@ssa-ui-kit/core 2.2.2 → 2.4.0

package/dist/index.js

@@ -199,6 +199,8 @@ __webpack_require__.d(__webpack_exports__, {
   TooltipTrigger: () => (/* reexport */ TooltipTrigger_TooltipTrigger),
   TranslationContext: () => (/* reexport */ TranslationContext),
   TranslationProvider: () => (/* reexport */ TranslationProvider),
+  TreeMapChart: () => (/* reexport */ TreeMapChart),
+  TreeMapChartComponent: () => (/* reexport */ TreeMapChartComponent),
   Typeahead: () => (/* reexport */ Typeahead),
   TypeaheadItemIcon: () => (/* reexport */ TypeaheadItemIcon),
   TypeaheadItemImage: () => (/* reexport */ TypeaheadItemImage),
@@ -941,6 +943,8 @@ const main = {
     //  #ffffff
     greyLighter: 'rgba(238, 241, 247, 1)',
     //  #eef1f7
+    greyLighter20: 'rgba(238, 241, 247, 0.2)',
+    //#eef1f766
     greyLighter40: 'rgba(238, 241, 247, 0.4)',
     //#eef1f766
     greyLighter60: 'rgba(238, 241, 247, 0.6)',
@@ -1111,6 +1115,8 @@ const main = {
     // #4178e1
     blue20: 'rgba(65, 120, 225, 0.2)',
     // #4178e1
+    blueCool: 'rgba(108, 148, 247, 1)',
+    // #6c94f7
     blueDark: 'rgba(36, 101, 227, 1)',
     // #2465e3
     blueLightDarker: 'rgba(127, 159, 221)',
@@ -1157,6 +1163,8 @@ const main = {
     //#487DE1
     blueRoyal12: 'rgba(72, 125, 225, 0.12)',
     //#487DE1
+    cyanTeal: 'rgba(85, 214, 210, 1)',
+    //#55D6D2
     dangerShades300: 'rgb(253, 128, 122)',
     //#FD807A
     dangerShades500: 'rgb(223, 90, 96)',
@@ -5891,14 +5899,21 @@ const WidgetCard = ({
 ;// ./src/components/WidgetCard/WithWidgetCard.tsx
 
 
-const WithWidgetCard = ({
+
+// `Has<T, U>` = `true` if every string in `U` also appears in `T`.
+
+function WithWidgetCard({
   children,
   features = [],
   cardProps = {}
-}) => features && features.includes('header') ? (0,jsx_runtime_namespaceObject.jsx)(WidgetCard, {
-  ...cardProps,
-  children: children
-}) : children;
+}) {
+  return features && features.includes('header') ? (0,jsx_runtime_namespaceObject.jsx)(WidgetCard, {
+    ...cardProps,
+    children: children
+  }) : (0,jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+    children: children
+  });
+}
 ;// ./src/components/Charts/PieChart/PieChartBases.tsx
 
 function PieChartBases_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)."; }
@@ -9434,11 +9449,6 @@ 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,
@@ -10043,440 +10053,1688 @@ 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,
-    asChild = false,
-    ...divProps
-  } = props;
-  const Wrapper = asChild ? external_react_namespaceObject.Fragment : 'div';
-  const wrapperProps = asChild ? {} : divProps;
-  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper, {
-    ...wrapperProps,
-    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
+;// ./src/components/DateRangePicker/constants.ts
+const constants_DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
+const constants_DEFAULT_MASK = '__/__/____';
+const constants_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const constants_DATE_MIN = '01/01/1900';
+const constants_DATE_MAX = '01/01/2150';
+const constants_OUT_OF_RANGE = 'The date is out of the defined range';
+const constants_INVALID_DATE = 'Invalid date';
+const FULL_DATE_LENGTH = 10;
+;// ./src/components/DateRangePicker/components/DatesListWrapper.tsx
 
 
+const DatesListWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e10i52w40"
+} : 0)("flex-wrap:wrap;&>div.hover-range-from.date-hovered,&>div.hover-range-to.date-hovered{background:", ({
+  theme
+}) => theme.colors.greyLighter, ";border-left:none;border-top-left-radius:6px;border-bottom-left-radius:6px;}&>div.hover-range-from:not(.selected-range-from, .date-hovered),&>div.hover-range-to:not(.selected-range-to, .date-hovered){background:", ({
+  theme
+}) => theme.colors.greyLighter60, ";border-radius:0;}&>div.hover-range-from.selected-range-from::after,&>div.hover-range-from.date-hovered::after,&>div.hover-range-to.selected-range-to::after,&>div.hover-range-to.date-hovered::after{content:'';position:absolute;width:10px;height:40px;z-index:-1;background:", ({
+  theme
+}) => theme.colors.greyLighter60, ";}&>div.hover-range-from.selected-range-from::after,&>div.hover-range-to.date-hovered::after{left:0;}&>div.hover-range-from.date-hovered::after,&>div.hover-range-to.selected-range-to::after{right:0;}&>div.hover-range-form.selected-range-from:has(~ div.date-hovered)::after,&>div.hover-range-to.selected-range-to:has(+ div.date-hovered)::after,&>div.date-hovered:has(+ div.selected-range-from)::after,&>div.hover-range-to.selected-range-to+div.date-hovered::after,&>div.date-hovered+div.selected-range-from::after{background:", ({
+  theme
+}) => theme.colors.greyLighter, ";}" + ( true ? "" : 0));
+;// ./src/components/DateRangePicker/styles.ts
 
 
-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,
+const styles_DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e19l41fq2"
+} : 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:", ({
+  theme,
+  isCalendarDateSelected
+}) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
+  theme,
+  isCalendarDateSelected
+}) => isCalendarDateSelected && `linear-gradient(247deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)`, ";cursor:pointer;user-select:none;&[aria-disabled='true']{color:", ({
   theme
-}) => {
-  if (status === 'error') return theme.colors.red;
-  if (status === 'success') return theme.colors.greenLighter;
-  return theme.colors.grey;
-}, ";background:", ({
-  disabled,
+}) => theme.colors.grey, ";cursor:default;pointer-events:none;}&[aria-disabled='false']{background:", ({
+  theme,
+  isCalendarDateSelected,
+  isHighlighted
+}) => isHighlighted && !isCalendarDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
   theme
-}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";&>*{background:transparent;}&:active,&:hover{background:", ({
-  disabled,
+}) => theme.colors.greyLighter, ";color:", ({
   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.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
-}) => {
-  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;
+}) => theme.colors.blueRoyal16, ";}}&:hover{border:", ({
+  theme,
+  isCalendarDateNow
+}) => isCalendarDateNow && `1px solid ${theme.colors.greyFocused}`, ";}" + ( true ? "" : 0));
+const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19l41fq1"
+} : 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,
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => (isCalendarYear || isCalendarFirstDateSelected || isCalendarSecondDateSelected) && theme.colors.white, ";background:", ({
+  theme,
+  isCalendarYear,
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarYear || isCalendarFirstDateSelected || isCalendarSecondDateSelected ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";background:", ({
+  theme,
+  isHighlighted,
+  isCalendarYear
+}) => isHighlighted && !isCalendarYear && theme.colors.blueRoyal16, ";&:hover{background:", ({
+  theme
+}) => theme.colors.greyLighter, ";color:", ({
+  theme
+}) => theme.colors.greyDarker, ";border-radius:6px;}&::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 styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19l41fq0"
+} : 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,
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => (isCalendarMonth || isCalendarFirstDateSelected || isCalendarSecondDateSelected) && theme.colors.white, ";user-select:none;background:", ({
+  theme,
+  isCalendarMonth,
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarMonth || isCalendarFirstDateSelected || isCalendarSecondDateSelected ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
+  theme
+}) => theme.colors.greyDarker, ";background:", ({
+  theme
+}) => theme.colors.grey, ";}&[aria-disabled='false']{background:", ({
+  theme,
+  isHighlighted,
+  isCalendarMonth,
+  isCalendarSecondDateSelected
+}) => isHighlighted && !isCalendarMonth && !isCalendarSecondDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
+  theme
+}) => theme.colors.greyLighter, ";color:", ({
+  theme
+}) => 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/DateRangePicker/utils/dates.ts
+
+const dates_getDaysForCalendarMonth = date => {
+  if (!date) {
+    return [];
   }
-  return false;
+  const firstDayOfMonth = external_luxon_namespaceObject.DateTime.fromJSDate(date).startOf('month');
+  const firstDayOfCal = firstDayOfMonth.startOf('week');
+  const lastDayOfMonth = firstDayOfMonth.endOf('month');
+  const lastDayOfCal = lastDayOfMonth.endOf('week');
+  const days = [firstDayOfCal.toJSDate()];
+  let temp = firstDayOfCal;
+  while (temp.toMillis() < lastDayOfCal.toMillis() && days.length < 42) {
+    temp = temp.plus({
+      days: 1
+    });
+    days.push(temp.toJSDate());
+  }
+  while (days.length < 42) {
+    temp = temp.plus({
+      days: 1
+    });
+    days.push(temp.toJSDate());
+  }
+  return days;
 };
-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)
+const dates_getWeekDays = () => {
+  const firstDayOfMonth = external_luxon_namespaceObject.DateTime.fromJSDate(new Date()).startOf('month');
+  const firstDayOfWeek = firstDayOfMonth.startOf('week');
+  const lastDayOfWeek = firstDayOfMonth.endOf('week');
+  const days = [firstDayOfWeek.toFormat('ccccc')];
+  let temp = firstDayOfWeek;
+  while (temp.toMillis() < lastDayOfWeek.toMillis()) {
+    temp = temp.plus({
+      days: 1
     });
+    days.push(temp.toFormat('ccccc'));
   }
-  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?.();
-      }
+  days.pop();
+  return days;
+};
+const dates_getYearsList = props => {
+  const {
+    yearsFrom = 1900,
+    yearsCount = 250
+  } = props || {};
+  return Array.from({
+    length: yearsCount
+  }, (value, index) => yearsFrom + index);
+};
+const dates_processDate = (dateParts, yearMin, yearMax) => {
+  const yearMinStr = yearMin.toString();
+  const yearMaxStr = yearMax.toString();
+  const {
+    day,
+    month,
+    year
+  } = dateParts;
+  if (typeof month === 'string' && month.length === 2) {
+    const monthN = Number(month);
+    if (monthN < 1 || monthN > 12) {
+      return false;
+    }
+  }
+  if (typeof day === 'string' && day.length === 2) {
+    const dayN = Number(day);
+    if (dayN < 1 || dayN > 31) {
+      return false;
+    }
+  }
+  if (typeof year === 'string' && year.length > 0) {
+    const yearN = Number(year);
+    const yearMinPart = Number(yearMinStr.slice(0, year.length));
+    const yearMaxPart = Number(yearMaxStr.slice(0, year.length));
+    if (yearN < yearMinPart || yearN > yearMaxPart) {
+      return false;
+    }
+  }
+  return true;
+};
+;// ./src/components/DateRangePicker/DateRangePickerContext.tsx
+
+
+
+const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({
+  format: constants_DEFAULT_MASK_FORMAT,
+  name: '',
+  nameFrom: '',
+  nameTo: '',
+  maskOptions: {},
+  openCalendarMode: 'icon',
+  inputFromRef: {
+    current: null
+  },
+  inputToRef: {
+    current: null
+  },
+  inputProps: {},
+  isOpen: false,
+  isOpenState: false,
+  calendarType: 'days',
+  inputValueFrom: undefined,
+  inputValueTo: undefined,
+  dateTime: [undefined, undefined],
+  calendarViewDateTime: [undefined, undefined],
+  dateMinParts: constants_DATE_MIN.split('/').map(Number),
+  dateMaxParts: constants_DATE_MAX.split('/').map(Number),
+  dateMinDT: external_luxon_namespaceObject.DateTime.fromFormat(constants_DATE_MIN, constants_DEFAULT_MASK_FORMAT),
+  dateMaxDT: external_luxon_namespaceObject.DateTime.fromFormat(constants_DATE_MAX, constants_DEFAULT_MASK_FORMAT),
+  formatIndexes: {
+    day: 1,
+    month: 0,
+    year: 2
+  },
+  lastFocusedElement: 'from',
+  currentCalendarViewDT: external_luxon_namespaceObject.DateTime.now().set({
+    day: 1
+  }),
+  currentIndex: 0,
+  handleSetIsOpen: () => {
+    // no-op
+  },
+  handleToggleOpen: () => {
+    // no-op
+  },
+  setIsOpen: () => {
+    // no-op
+  },
+  setCalendarType: () => {
+    // no-op
+  },
+  setCalendarViewDateTime: () => {
+    // no-op
+  },
+  setDateTime: () => {
+    // no-op
+  },
+  setLastFocusedElement: () => {
+    // no-op
+  }
+});
+;// ./src/components/DateRangePicker/useDateRangePickerContext.tsx
+
+
+const useDateRangePickerContext = () => (0,external_react_namespaceObject.useContext)(DateRangePickerContext);
+;// ./src/components/DateRangePicker/helpers/ClassnameArray.ts
+class ClassnameArray extends Array {
+  toggle(className, condition) {
+    const index = this.indexOf(className);
+    if (condition) {
+      if (index === -1) {
+        this.push(className);
+      }
+    } else {
+      if (index > -1) {
+        this.splice(index, 1);
+      }
+    }
+    return this;
+  }
+}
+;// ./src/components/DateRangePicker/hooks/useRangeHighlighting.ts
+
+
+
+const useRangeHighlighting = () => {
+  const [hoveredDate, setHoveredDate] = (0,external_react_namespaceObject.useState)(null);
+  const {
+    dateTime,
+    lastFocusedElement
+  } = useDateRangePickerContext();
+  const handleDateHover = currentDT => {
+    setHoveredDate(currentDT);
+  };
+  const getClassNames = (currentDT, {
+    isCalendarFirstDateSelected,
+    isCalendarSecondDateSelected
+  }) => {
+    const classNames = new ClassnameArray();
+    let isHoverRangeHighlightFrom = false;
+    let isHoverRangeHighlightTo = false;
+    if (hoveredDate !== null) {
+      if (dateTime[0] && lastFocusedElement === 'from' && hoveredDate < dateTime[0]) {
+        isHoverRangeHighlightFrom = currentDT >= hoveredDate && currentDT <= dateTime[0];
+      }
+      if (dateTime[1] && lastFocusedElement === 'to' && hoveredDate > dateTime[1]) {
+        isHoverRangeHighlightTo = currentDT <= hoveredDate && currentDT >= dateTime[1];
+      }
+    }
+    classNames.toggle('hover-range-from', isHoverRangeHighlightFrom);
+    classNames.toggle('hover-range-to', isHoverRangeHighlightTo);
+    classNames.toggle('selected-range-from', isCalendarFirstDateSelected);
+    classNames.toggle('selected-range-to', isCalendarSecondDateSelected);
+    classNames.toggle('date-hovered', hoveredDate?.toISODate() === currentDT.toISODate());
+    return classNames.values().toArray();
+  };
+  const isHighlightDate = currentDT => {
+    if (dateTime[0] && dateTime[1]) {
+      return currentDT > dateTime[0] && currentDT < dateTime[1];
+    } else if (dateTime[0] && hoveredDate) {
+      return currentDT > dateTime[0] && currentDT < hoveredDate;
+    } else if (dateTime[1] && hoveredDate) {
+      return currentDT < dateTime[1] && currentDT > hoveredDate;
+    }
+    return false;
+  };
+  return {
+    handleDateHover,
+    getClassNames,
+    isHighlightDate,
+    hoveredDate
+  };
+};
+;// ./src/components/DateRangePicker/components/DaysView.tsx
+function components_DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+
+
+var components_DaysView_ref =  true ? {
+  name: "hisq2i",
+  styles: "padding-left:9px"
+} : 0;
+var components_DaysView_ref2 =  true ? {
+  name: "yzljcr",
+  styles: "width:40px;height:40px;justify-content:center;font-size:12px;font-weight:600;cursor:default;user-select:none"
+} : 0;
+var components_DaysView_ref3 =  true ? {
+  name: "hisq2i",
+  styles: "padding-left:9px"
+} : 0;
+const DaysView_DaysView = () => {
+  const weekDays = dates_getWeekDays();
+  const {
+    dateTime,
+    calendarViewDateTime,
+    dateMinDT,
+    dateMaxDT,
+    lastFocusedElement,
+    currentCalendarViewDT,
+    setCalendarViewDateTime,
+    setDateTime,
+    setIsOpen
+  } = useDateRangePickerContext();
+  const currentDate = currentCalendarViewDT.toJSDate();
+  const currentMonth = currentDate?.getMonth();
+  const dates = dates_getDaysForCalendarMonth(currentDate);
+  const nowDate = external_luxon_namespaceObject.DateTime.fromJSDate(new Date()).toFormat('D');
+  const {
+    handleDateHover,
+    getClassNames,
+    isHighlightDate
+  } = useRangeHighlighting();
+  const handleDaySelect = event => {
+    const {
+      target
+    } = event;
+    const selectedDay = Number(target.innerHTML);
+    const isEnabled = target.getAttribute('aria-disabled') === 'false';
+    if (isEnabled) {
+      const newDate = currentCalendarViewDT.set({
+        day: selectedDay
+      });
+      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
+      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
+      setDateTime(newDateTuple);
+      if (newDateTuple[0] && newDateTuple[1]) {
+        setIsOpen(false);
+      }
+    }
+  };
+  return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+      css: components_DaysView_ref,
+      children: weekDays.map((weekDay, index) => (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+        css: components_DaysView_ref2,
+        children: weekDay
+      }, `week-day-${weekDay}-${index}`))
+    }), (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
+      css: components_DaysView_ref3,
+      onClick: handleDaySelect,
+      children: dates.map((currentDate, index) => {
+        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate);
+        const calendarDate = currentDT.toFormat('D');
+        const calendarDay = currentDate.getDate();
+        const calendarMonth = currentDate.getMonth();
+        const ariaLabel = currentDT.toLocaleString(external_luxon_namespaceObject.DateTime.DATE_HUGE);
+        const isCalendarDateNow = nowDate === calendarDate;
+        const isCalendarMonth = currentMonth === calendarMonth;
+        const isCalendarFirstDateSelected = calendarDate === dateTime[0]?.toFormat('D');
+        const isCalendarSecondDateSelected = calendarDate === dateTime[1]?.toFormat('D');
+        const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+        let isAriaDisabled = false;
+        if (dateMinDT && dateMaxDT) {
+          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
+        } else {
+          if (dateMinDT) {
+            isAriaDisabled = currentDT < dateMinDT || !isCalendarMonth;
+          }
+          if (dateMaxDT) {
+            isAriaDisabled = currentDT > dateMaxDT || !isCalendarMonth;
+          }
+        }
+        const classNames = getClassNames(currentDT, {
+          isCalendarFirstDateSelected,
+          isCalendarSecondDateSelected
+        });
+        return (0,jsx_runtime_namespaceObject.jsx)(styles_DaysViewCell, {
+          "aria-disabled": isAriaDisabled,
+          "aria-label": ariaLabel,
+          "data-day": calendarDate,
+          isCalendarDateNow: isCalendarDateNow,
+          isCalendarDateSelected: isCalendarDateSelected,
+          isCalendarFirstDateSelected: isCalendarFirstDateSelected,
+          isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+          isHighlighted: isHighlightDate(currentDT),
+          className: classNames.join(' '),
+          onMouseEnter: () => handleDateHover(currentDT),
+          onMouseLeave: () => handleDateHover(null),
+          children: calendarDay
+        }, `day-${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}-${index}`);
+      })
+    })]
+  });
+};
+;// ./src/components/DateRangePicker/components/MonthsView.tsx
+function components_MonthsView_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 components_MonthsView_ref =  true ? {
+  name: "icns00",
+  styles: "padding-top:10px"
+} : 0;
+const MonthsView_MonthsView = () => {
+  const {
+    dateTime,
+    calendarViewDateTime,
+    dateMinDT,
+    dateMaxDT,
+    lastFocusedElement,
+    currentCalendarViewDT,
+    setCalendarType,
+    setCalendarViewDateTime,
+    onMonthChange
+  } = useDateRangePickerContext();
+  const {
+    handleDateHover,
+    getClassNames,
+    isHighlightDate
+  } = useRangeHighlighting();
+  const handleMonthSelect = event => {
+    const {
+      target
+    } = event;
+    if (target.getAttribute('aria-disabled') === null) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+    const selectedMonth = target.innerHTML;
+    const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
+    const newDate = currentCalendarViewDT?.set({
+      month: monthNumber + 1
+    });
+    setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
+    if (newDate) {
+      onMonthChange?.(newDate.toJSDate());
+    }
+    setCalendarType('days');
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
+    css: components_MonthsView_ref,
+    onClick: handleMonthSelect,
+    children: constants_MONTHS.map((month, index) => {
+      const isCalendarMonth = currentCalendarViewDT ? currentCalendarViewDT.month === index + 1 : false;
+      const currentMonthDT = external_luxon_namespaceObject.DateTime.fromObject({
+        year: currentCalendarViewDT?.year,
+        month: index + 1,
+        day: 1
+      });
+      const isMinMonthReached = dateMinDT ? currentMonthDT.month < dateMinDT.month && currentMonthDT.year === dateMinDT.year : false;
+      const isMaxMonthReached = dateMaxDT ? currentMonthDT.month > dateMaxDT.month && currentMonthDT.year === dateMaxDT.year : false;
+      const isAriaDisabled = isMinMonthReached || isMaxMonthReached;
+      const isCalendarFirstDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[0]?.toFormat('yyyy-MM');
+      const isCalendarSecondDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[1]?.toFormat('yyyy-MM');
+      const classNames = getClassNames(currentMonthDT, {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      });
+      return (0,jsx_runtime_namespaceObject.jsx)(styles_MonthsViewCell, {
+        isCalendarMonth: isCalendarMonth,
+        "aria-disabled": isAriaDisabled,
+        "aria-label": `${month}, ${currentCalendarViewDT?.year}`,
+        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isHighlighted: isHighlightDate(currentMonthDT),
+        className: classNames.join(' '),
+        onMouseEnter: () => handleDateHover(currentMonthDT),
+        onMouseLeave: () => handleDateHover(null),
+        children: month
+      }, month);
+    })
+  });
+};
+;// ./src/components/DateRangePicker/components/YearsView.tsx
+function components_YearsView_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 components_YearsView_ref =  true ? {
+  name: "1lqam8u",
+  styles: "overflow-y:auto;height:280px;align-content:flex-start"
+} : 0;
+const YearsView_YearsView = () => {
+  const {
+    dateTime,
+    calendarViewDateTime,
+    currentCalendarViewDT,
+    dateMinParts,
+    dateMaxParts,
+    formatIndexes,
+    lastFocusedElement,
+    setCalendarType,
+    setCalendarViewDateTime,
+    onYearChange
+  } = useDateRangePickerContext();
+  const wrapper = (0,external_react_namespaceObject.useRef)(null);
+  const yearsList = dates_getYearsList({
+    yearsFrom: dateMinParts[formatIndexes['year']],
+    yearsCount: dateMaxParts[formatIndexes['year']] - dateMinParts[formatIndexes['year']] + 1
+  });
+  const {
+    handleDateHover,
+    getClassNames,
+    isHighlightDate
+  } = useRangeHighlighting();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (currentCalendarViewDT && wrapper.current) {
+      wrapper.current.querySelector('[aria-current=date]')?.scrollIntoView({
+        behavior: 'instant',
+        block: 'center'
+      });
+    }
+  }, [calendarViewDateTime, lastFocusedElement]);
+  const handleYearSelect = event => {
+    const {
+      target
+    } = event;
+    const selectedYear = Number(target.innerHTML);
+    const newDate = currentCalendarViewDT.set({
+      year: selectedYear
+    });
+    setCalendarType('months');
+    setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
+    if (newDate) {
+      onYearChange?.(newDate.toJSDate());
+    }
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
+    css: components_YearsView_ref,
+    ref: wrapper,
+    onClick: handleYearSelect,
+    children: yearsList.map(year => {
+      const additionalProps = {};
+      const currentYearDT = external_luxon_namespaceObject.DateTime.fromObject({
+        year,
+        month: 1,
+        day: 1
+      });
+      const isCalendarYear = currentCalendarViewDT ? currentCalendarViewDT.year === year : false;
+      if (isCalendarYear) {
+        additionalProps['aria-current'] = 'date';
+      }
+      const isCalendarFirstDateSelected = year.toString() === dateTime[0]?.toFormat('yyyy');
+      const isCalendarSecondDateSelected = year.toString() === dateTime[1]?.toFormat('yyyy');
+      const classNames = getClassNames(currentYearDT, {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      });
+      return (0,jsx_runtime_namespaceObject.jsx)(styles_YearsViewCell, {
+        className: classNames.join(' '),
+        isCalendarYear: isCalendarYear,
+        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isHighlighted: isHighlightDate(currentYearDT),
+        onMouseEnter: () => handleDateHover(currentYearDT),
+        onMouseLeave: () => handleDateHover(null),
+        ...additionalProps,
+        children: year
+      }, `year-${year}`);
+    })
+  });
+};
+;// ./src/components/DateRangePicker/components/MonthsSwitch.tsx
+
+function MonthsSwitch_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+var MonthsSwitch_ref =  true ? {
+  name: "9cmux7",
+  styles: "width:72px;gap:24px"
+} : 0;
+const MonthsSwitch = () => {
+  const {
+    calendarType,
+    calendarViewDateTime,
+    dateMinDT,
+    dateMaxDT,
+    lastFocusedElement,
+    setCalendarViewDateTime,
+    onMonthChange
+  } = useDateRangePickerContext();
+  const theme = (0,react_namespaceObject.useTheme)();
+  const isDayCalendarType = calendarType === 'days';
+  const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
+  const currentCalendarViewDT = calendarViewDateTime[currentIndex] || external_luxon_namespaceObject.DateTime.now().set({
+    day: 1
+  });
+  const isMinMonthReached = calendarViewDateTime ? currentCalendarViewDT?.month === dateMinDT.month && currentCalendarViewDT.year === dateMinDT.year : false;
+  const isMaxMonthReached = calendarViewDateTime ? currentCalendarViewDT?.month === dateMaxDT.month && currentCalendarViewDT.year === dateMaxDT.year : false;
+  const handlePreviousMonth = () => {
+    const newDate = currentCalendarViewDT?.minus({
+      month: 1
+    });
+    setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
+    if (newDate) {
+      onMonthChange?.(newDate.toJSDate());
+    }
+  };
+  const handleNextMonth = () => {
+    const newDate = currentCalendarViewDT?.plus({
+      month: 1
+    });
+    setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
+    if (newDate) {
+      onMonthChange?.(newDate.toJSDate());
+    }
+  };
+  if (!isDayCalendarType) {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: MonthsSwitch_ref,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+      endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "carrot-left",
+        size: 14,
+        tooltip: "Previous month",
+        color: isMinMonthReached ? theme.colors.grey : theme.colors.greyDarker
+      }),
+      variant: 'tertiary',
+      "aria-label": "Previous month",
+      "data-testid": "previous-month",
+      onClick: handlePreviousMonth,
+      isDisabled: isMinMonthReached,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        padding: 4,
+        height: 32,
+        cursor: isMinMonthReached ? 'default' : 'pointer',
+        '&:focus::before': {
+          display: 'none'
+        }
+      },  true ? "" : 0,  true ? "" : 0)
+    }), (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+      endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "carrot-right",
+        size: 14,
+        tooltip: "Next month",
+        color: isMaxMonthReached ? theme.colors.grey : theme.colors.greyDarker
+      }),
+      variant: 'tertiary',
+      onClick: handleNextMonth,
+      isDisabled: isMaxMonthReached,
+      "aria-label": "Next month",
+      "data-testid": "next-month",
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        padding: 4,
+        height: 32,
+        cursor: isMaxMonthReached ? 'default' : 'pointer',
+        '&:focus::before': {
+          display: 'none'
+        }
+      },  true ? "" : 0,  true ? "" : 0)
+    })]
+  });
+};
+;// ./src/components/DateRangePicker/components/Header.tsx
+function components_Header_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 components_Header_ref =  true ? {
+  name: "ugcp8m",
+  styles: "display:flex;justify-content:space-between;width:100%;height:32px;margin-bottom:12px"
+} : 0;
+var Header_ref2 =  true ? {
+  name: "1bk2bba",
+  styles: "padding:0;font-size:18px;font-weight:700;line-height:24px;height:32px;gap:16px;&:focus::before{display:none;}"
+} : 0;
+const Header_Header = () => {
+  const {
+    calendarType,
+    currentCalendarViewDT,
+    setCalendarType
+  } = useDateRangePickerContext();
+  const handleCalendarTypeChange = () => {
+    setCalendarType(calendarType === 'days' ? 'years' : 'days');
+  };
+  return (0,jsx_runtime_namespaceObject.jsxs)(PopoverHeading, {
+    css: components_Header_ref,
+    as: 'div',
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+      endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: calendarType === 'days' ? 'carrot-down' : 'carrot-up',
+        size: 14,
+        tooltip: ""
+      }),
+      variant: "tertiary",
+      onClick: handleCalendarTypeChange,
+      "data-testid": "calendar-type-change-button",
+      css: Header_ref2,
+      children: currentCalendarViewDT.toFormat('LLLL yyyy')
+    }), (0,jsx_runtime_namespaceObject.jsx)(MonthsSwitch, {})]
+  });
+};
+;// ./src/components/DateRangePicker/components/Calendar.tsx
+function Calendar_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 Calendar_ref =  true ? {
+  name: "14ggdrv",
+  styles: "height:100%;display:flex;flex-direction:column;justify-content:space-between"
+} : 0;
+const Calendar_DatePickerCalendar = () => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const components = {
+    days: DaysView_DaysView,
+    months: MonthsView_MonthsView,
+    years: YearsView_YearsView
+  };
+  const {
+    calendarType,
+    calendarClassname
+  } = useDateRangePickerContext();
+  const Component = components[calendarType];
+  return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
+    className: ['popover', calendarClassname].filter(Boolean).join(' '),
+    "data-testid": "daterangepicker-calendar",
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      background: theme.colors.white,
+      boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
+      borderRadius: 16,
+      padding: 24,
+      paddingTop: 16,
+      width: 346,
+      height: 370,
+      alignItems: 'flex-start'
+    },  true ? "" : 0,  true ? "" : 0),
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Header_Header, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
+      as: "div",
+      css: Calendar_ref,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Component, {})
+    })]
+  });
+};
+;// ./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,
+    asChild = false,
+    ...divProps
+  } = props;
+  const Wrapper = asChild ? external_react_namespaceObject.Fragment : 'div';
+  const wrapperProps = asChild ? {} : divProps;
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper, {
+    ...wrapperProps,
+    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
+});
+;// ./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",
+    "data-testid": "field-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/components/TriggerInput.tsx
+function TriggerInput_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 WithTriggerPopover = ({
+  isEnabled,
+  children
+}) => {
+  return isEnabled ? (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+    asChild: true,
+    children: /*#__PURE__*/external_react_default().cloneElement(children, {
+      ...children.props
+    })
+  }) : (/*#__PURE__*/external_react_default().cloneElement(children, {
+    ...children.props
+  }));
+};
+const TriggerInput = ({
+  datepickerType,
+  withPopover = false,
+  onClick
+}) => {
+  const {
+    format,
+    nameFrom,
+    nameTo,
+    inputFromRef,
+    inputToRef,
+    inputProps,
+    disabled,
+    helperText,
+    setLastFocusedElement,
+    onBlur: handleBlur
+  } = useDateRangePickerContext();
+  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  const currentName = datepickerType === 'from' ? nameFrom : nameTo;
+  const hookFormResult = formContext ?? useFormResult;
+  const {
+    register,
+    formState: {
+      errors
+    }
+  } = hookFormResult;
+  const {
+    inputProps: inputElementProps,
+    ...restInputProps
+  } = inputProps || {};
+  const fieldError = errors[currentName];
+  const fieldStatus = fieldError?.message ? 'error' : 'basic';
+  const handleFocus = e => {
+    setLastFocusedElement(datepickerType);
+    inputProps?.inputProps?.onFocus?.(e);
+  };
+  const handleOpen = event => {
+    onClick?.(event);
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(WithTriggerPopover, {
+    isEnabled: withPopover,
+    children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+      name: currentName,
+      placeholder: format,
+      ref: datepickerType === 'from' ? inputFromRef : inputToRef,
+      disabled: disabled,
+      register: register,
+      inputProps: {
+        onBlur: handleBlur,
+        onClick: handleOpen,
+        onFocus: handleFocus,
+        id: inputProps?.inputProps?.id || currentName,
+        'data-testid': `daterangepicker-input-${datepickerType}`,
+        autoComplete: 'off',
+        className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+          name: "150iz59",
+          styles: "border:none!important"
+        } : 0),
+        ...inputElementProps
+      },
+      showStatusIcon: false,
+      errors: fieldError,
+      status: fieldStatus,
+      helperText: helperText,
+      helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+        name: "lhoo11",
+        styles: "&>span::first-letter{text-transform:uppercase;}"
+      } : 0),
+      ...restInputProps
+    })
+  });
+};
+;// ./src/components/DateRangePicker/components/Trigger.tsx
+
+function Trigger_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 Trigger_ref =  true ? {
+  name: "jpxugn",
+  styles: "margin:0 14px"
+} : 0;
+var Trigger_ref2 =  true ? {
+  name: "ud49p1",
+  styles: "color:inherit;&::first-letter{text-transform:uppercase;}"
+} : 0;
+const Trigger = () => {
+  const {
+    nameFrom,
+    nameTo,
+    label,
+    lastFocusedElement,
+    disabled,
+    status,
+    helperText,
+    openCalendarMode,
+    isOpen,
+    showCalendarIcon,
+    triggerClassname,
+    setIsOpen,
+    handleToggleOpen
+  } = useDateRangePickerContext();
+  const theme = (0,react_namespaceObject.useTheme)();
+  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)();
+  const wrapperRef = (0,external_react_namespaceObject.useRef)(null);
+  (0,hooks_namespaceObject.useClickOutside)(wrapperRef, event => {
+    const {
+      target
+    } = event;
+    const closestPopover = target.closest('div.popover');
+    if (isOpen && !closestPopover) {
+      setIsOpen(false);
+    }
+  });
+  const errorsFrom = formContext.formState.errors[nameFrom]?.message;
+  const errorsTo = formContext.formState.errors[nameTo]?.message;
+  const errorMessage = [errorsFrom, errorsTo].filter(Boolean);
+  return (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
+    status: status,
+    disabled: disabled,
+    "data-testid": "daterangepicker",
+    className: triggerClassname,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+      htmlFor: lastFocusedElement === 'from' ? nameFrom : nameTo,
+      children: label
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
+      children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+        ref: wrapperRef,
+        children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
+          withPopover: true,
+          datepickerType: "from",
+          onClick: () => {
+            if (!isOpen) {
+              setIsOpen(true);
+            }
+          }
+        }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "carrot-right",
+          size: 18,
+          color: theme.colors.greyDarker80,
+          css: Trigger_ref
+        }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
+          datepickerType: "to",
+          onClick: () => {
+            if (!isOpen) {
+              setIsOpen(true);
+            }
+          }
+        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+            name: "calendar",
+            size: 16,
+            color: disabled ? theme.colors.grey : theme.colors.greyDarker
+          }),
+          "data-testid": 'daterangepicker-button',
+          onClick: handleToggleOpen,
+          variant: "tertiary",
+          "aria-label": "Calendar",
+          isDisabled: disabled,
+          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: helperText
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
+      children: errorMessage ? errorMessage.map((error, index) => (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: Trigger_ref2,
+        children: error
+      }, `error-${index}`)) : helperText
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
+      children: helperText
+    })]
+  });
+};
+;// ./src/components/DateRangePicker/components/Content.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
+
+
+const Content_DatePickerContent = () => {
+  const {
+    isOpen
+  } = useDateRangePickerContext();
+  return (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+    interactionsEnabled: 'click',
+    placement: 'top-start',
+    open: isOpen,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Trigger, {}), (0,jsx_runtime_namespaceObject.jsx)(Calendar_DatePickerCalendar, {})]
   });
 };
-;// ./src/components/Field/FieldError.tsx
+;// ./src/components/DateRangePicker/hooks/useDatePickerMask.tsx
 
 
 
-const FieldError = ({
-  children
+const useDatePickerMask_useDatePickerMask = ({
+  maskOptions,
+  formatIndexes,
+  dateMinParts,
+  dateMaxParts
 }) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'error') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "error",
-    children: children
+  const {
+    mask = constants_DEFAULT_MASK,
+    replacement = {
+      _: /\d/
+    },
+    ...restMaskOptions
+  } = maskOptions || {};
+  const useMaskResult = (0,mask_namespaceObject.useMask)({
+    mask,
+    replacement,
+    track: ({
+      data,
+      selectionStart,
+      selectionEnd,
+      value: currentValue
+    }) => {
+      if (mask === constants_DEFAULT_MASK) {
+        const newValue = currentValue.slice(0, selectionStart) + data + currentValue.slice(selectionEnd);
+        const updatedValue = (0,mask_namespaceObject.format)(newValue, {
+          mask,
+          replacement
+        });
+        const splittedValue = updatedValue.split('/');
+        const isChecked = dates_processDate({
+          day: splittedValue[formatIndexes['day']],
+          month: splittedValue[formatIndexes['month']],
+          year: splittedValue[formatIndexes['year']]
+        }, dateMinParts[formatIndexes['year']], dateMaxParts[formatIndexes['year']]);
+        return isChecked ? data : '';
+      } else {
+        return data;
+      }
+    },
+    ...restMaskOptions
   });
+  return useMaskResult;
 };
-;// ./src/components/Field/FieldSuccess.tsx
+;// ./src/components/DateRangePicker/hooks/useDateRangePicker.ts
 
 
 
-const FieldSuccess = ({
-  children
+
+
+
+const useDateRangePicker = ({
+  dateMin = constants_DATE_MIN,
+  dateMax = constants_DATE_MAX,
+  name: _name,
+  format = 'mm/dd/yyyy',
+  maskOptions,
+  isOpenState = false,
+  defaultValue,
+  onOpen,
+  onClose,
+  onError,
+  onChange,
+  ...rest
 }) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'success') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "success",
-    children: children
+  const inputFromRef = (0,external_react_namespaceObject.useRef)(null);
+  const inputToRef = (0,external_react_namespaceObject.useRef)(null);
+  const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isOpenState);
+  const [status, setStatus] = (0,external_react_namespaceObject.useState)(rest.status);
+  const previousOpenState = (0,external_react_namespaceObject.useRef)(isOpenState);
+  const handleSetIsOpen = open => {
+    setIsOpen(open);
+  };
+  const {
+    clearErrors,
+    setError,
+    setValue,
+    resetField,
+    setFocus
+  } = (0,external_react_hook_form_namespaceObject.useFormContext)();
+  const nameFrom = `${_name}From`;
+  const nameTo = `${_name}To`;
+  const inputValueFrom = (0,external_react_hook_form_namespaceObject.useWatch)({
+    name: nameFrom
+  });
+  const inputValueTo = (0,external_react_hook_form_namespaceObject.useWatch)({
+    name: nameTo
+  });
+  const [dateTime, setDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
+  const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
+  const [lastFocusedElement, setLastFocusedElement] = (0,external_react_namespaceObject.useState)('from');
+  const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
+  const currentName = lastFocusedElement === 'from' ? nameFrom : nameTo;
+  const [dateTimeForChangeEvent, setDateTimeForChangeEvent] = (0,external_react_namespaceObject.useState)(undefined);
+  const [currentError, setCurrentError] = (0,external_react_namespaceObject.useState)({
+    date: null,
+    error: null
+  });
+  const splittedFormat = format.split('/');
+  const [formatIndexes, setFormatIndexes] = (0,external_react_namespaceObject.useState)({
+    day: splittedFormat.findIndex(item => item === 'dd'),
+    month: splittedFormat.findIndex(item => item === 'mm'),
+    year: splittedFormat.findIndex(item => item === 'yyyy')
   });
+  const [calendarType, setCalendarType] = (0,external_react_namespaceObject.useState)('days');
+  const [calendarViewDateTime, setCalendarViewDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
+  const currentCalendarViewDT = calendarViewDateTime[currentIndex] || external_luxon_namespaceObject.DateTime.now().set({
+    day: 1
+  });
+  const luxonFormat = format.replace('mm', 'MM');
+  const dateMinParts = dateMin.split('/').map(Number);
+  const dateMaxParts = dateMax.split('/').map(Number);
+  const maskInputRef = useDatePickerMask_useDatePickerMask({
+    maskOptions,
+    dateMaxParts,
+    dateMinParts,
+    formatIndexes
+  });
+  const dateMaxDT = external_luxon_namespaceObject.DateTime.fromObject({
+    year: dateMaxParts[formatIndexes['year']],
+    month: dateMaxParts[formatIndexes['month']],
+    day: dateMaxParts[formatIndexes['day']]
+  });
+  const dateMinDT = external_luxon_namespaceObject.DateTime.fromObject({
+    year: dateMinParts[formatIndexes['year']],
+    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) {
+        const _newDateTimeJS = _newDateTime.toJSDate();
+        if (lastFocusedElement === 'from') {
+          setLastChangedDate([_newDateTimeJS, lastChangedDate[1]]);
+          onChange?.([_newDateTimeJS, lastChangedDate[1] || null]);
+        } else {
+          setLastChangedDate([lastChangedDate[0], _newDateTimeJS]);
+          onChange?.([lastChangedDate[0] || null, _newDateTimeJS]);
+        }
+      } else {
+        setLastChangedDate([lastFocusedElement === 'from' ? undefined : lastChangedDate[0], lastFocusedElement === 'to' ? undefined : lastChangedDate[1]]);
+        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, elementName) => {
+    const currentElementType = elementName || lastFocusedElement;
+    const currentName = currentElementType === 'from' ? nameFrom : nameTo;
+    const newDateTime = typeof newValue === 'string' && newValue.length === FULL_DATE_LENGTH ? external_luxon_namespaceObject.DateTime.fromFormat(newValue, luxonFormat) : undefined;
+    const newDateTimeIfInvalid = [currentElementType === 'from' ? undefined : dateTime?.[0], currentElementType === 'to' ? undefined : dateTime?.[1]];
+    const newDateTimeIfValid = [currentElementType === 'from' ? newDateTime : dateTime?.[0], currentElementType === 'to' ? newDateTime : dateTime?.[1]];
+    if (!newDateTime?.isValid) {
+      const errorMessage = newDateTime?.invalidExplanation || constants_INVALID_DATE;
+      setError(currentName, {
+        message: errorMessage
+      }, {
+        shouldFocus: true
+      });
+      setStatus('error');
+      setDateTime(newDateTimeIfInvalid);
+      safeOnError?.(newValue, errorMessage);
+      safeOnChange();
+    } else if (newDateTime !== undefined) {
+      if (newDateTime < dateMinDT || newDateTime > dateMaxDT) {
+        const errorMessage = constants_OUT_OF_RANGE;
+        setError(currentName, {
+          message: errorMessage
+        }, {
+          shouldFocus: true
+        });
+        setStatus('error');
+        setDateTime(newDateTimeIfInvalid);
+        safeOnError?.(newValue, errorMessage);
+        safeOnChange();
+      } else {
+        setDateTime(newDateTimeIfValid);
+        clearErrors();
+        setStatus('basic');
+        safeOnError?.(null);
+        safeOnChange?.(newDateTime);
+      }
+    }
+  };
+  const handleBlur = event => {
+    event.preventDefault();
+    const blurredValue = event.currentTarget.value;
+    if (blurredValue.length > 0) {
+      processValue(blurredValue);
+    }
+  };
+  const processInputValue = (inputValue, elementName) => {
+    const currentElementType = elementName || lastFocusedElement;
+    const currentName = currentElementType === 'from' ? nameFrom : nameTo;
+    if (typeof inputValue === 'string' && inputValue.length && inputValue.length < FULL_DATE_LENGTH) {
+      setIsOpen(false);
+      setTimeout(() => {
+        maskInputRef.current.focus();
+      }, 10);
+    }
+    let newDateTime;
+    if (typeof inputValue === 'string' && inputValue.length === FULL_DATE_LENGTH) {
+      newDateTime = external_luxon_namespaceObject.DateTime.fromFormat(inputValue, luxonFormat);
+      setValue(currentName, inputValue);
+      processValue(inputValue, elementName);
+    }
+    const newCalendarViewDateTime = newDateTime && newDateTime.isValid ? newDateTime : undefined;
+    if (newCalendarViewDateTime) {
+      if (newCalendarViewDateTime < dateMinDT) {
+        const {
+          year,
+          month,
+          day
+        } = dateMinDT;
+        newCalendarViewDateTime.set({
+          year,
+          month,
+          day
+        });
+      }
+      if (newCalendarViewDateTime > dateMaxDT) {
+        const {
+          year,
+          month,
+          day
+        } = dateMaxDT;
+        newCalendarViewDateTime.set({
+          year,
+          month,
+          day
+        });
+      }
+      setCalendarViewDateTime(currentElementType === 'from' ? [newCalendarViewDateTime, calendarViewDateTime[1]] : [calendarViewDateTime[0], newCalendarViewDateTime]);
+    }
+  };
+  (0,external_react_namespaceObject.useEffect)(() => {
+    processInputValue(lastFocusedElement === 'from' ? inputValueFrom : inputValueTo);
+  }, [lastFocusedElement]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (inputValueFrom && inputValueFrom.length === FULL_DATE_LENGTH) {
+      processInputValue(lastFocusedElement === 'from' ? inputValueFrom : inputValueTo);
+    }
+  }, [inputValueFrom]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (inputValueTo && inputValueTo.length === FULL_DATE_LENGTH) {
+      processInputValue(lastFocusedElement === 'from' ? inputValueFrom : inputValueTo);
+    }
+  }, [inputValueTo]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
+    const currentInputValue = currentIndex === 0 ? inputValueFrom : inputValueTo;
+    if (dateTime?.[currentIndex]) {
+      const newValue = dateTime[currentIndex].toFormat(luxonFormat);
+      if (currentInputValue !== newValue) {
+        setValue(currentName, newValue);
+      }
+    }
+  }, [dateTime, lastFocusedElement, currentName]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (dateTime[0] && dateTime[1] && dateTime[0] > dateTime[1]) {
+      resetField(nameFrom);
+      resetField(nameTo);
+      setDateTime([dateTime[1], undefined]);
+      setLastChangedDate([dateTime[1].toJSDate(), undefined]);
+      setValue(nameFrom, dateTime[1].toFormat(luxonFormat));
+      setLastFocusedElement('to');
+      setTimeout(() => {
+        setFocus(nameTo, {
+          shouldSelect: true
+        });
+      }, 50);
+      setIsOpen(true);
+    }
+  }, [dateTime]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (previousOpenState.current !== isOpen) {
+      if (isOpen) {
+        onOpen?.();
+      } else {
+        onClose?.();
+        setCalendarType('days');
+        setCalendarViewDateTime([dateTime[0], dateTime[1]]);
+      }
+      previousOpenState.current = isOpen;
+    }
+  }, [isOpen]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const splittedFormat = format.split('/');
+    setFormatIndexes({
+      day: splittedFormat.findIndex(item => item === 'dd'),
+      month: splittedFormat.findIndex(item => item === 'mm'),
+      year: splittedFormat.findIndex(item => item === 'yyyy')
+    });
+  }, [format]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (Array.isArray(rest.value)) {
+      const newDateTimeFrom = typeof rest.value[0] === 'string' && rest.value[0].length === FULL_DATE_LENGTH ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[0], luxonFormat) : undefined;
+      const newDateTimeTo = typeof rest.value[1] === 'string' && rest.value[1].length === FULL_DATE_LENGTH ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[1], luxonFormat) : undefined;
+      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom : undefined, newDateTimeTo?.isValid ? newDateTimeTo : undefined];
+      setDateTime(newDateTime);
+      setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
+      setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat));
+      setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
+    }
+  }, [rest.value]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setStatus(rest.status);
+  }, [rest.status]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (lastChangedDate[0] || lastChangedDate[1]) {
+      if (lastFocusedElement === 'from' && !lastChangedDate[1]) {
+        setFocus(nameTo);
+      }
+      if (lastFocusedElement === 'to' && !lastChangedDate[0]) {
+        setFocus(nameFrom);
+        inputFromRef.current?.focus();
+      }
+    }
+  }, [lastChangedDate]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (calendarViewDateTime[0] && !calendarViewDateTime[1]) {
+      setCalendarViewDateTime([calendarViewDateTime[0], calendarViewDateTime[0]]);
+    }
+    if (calendarViewDateTime[1] && !calendarViewDateTime[0]) {
+      setCalendarViewDateTime([calendarViewDateTime[1], calendarViewDateTime[1]]);
+    }
+  }, [calendarViewDateTime]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (isOpenState !== isOpen) {
+      setIsOpen(isOpenState);
+    }
+  }, [isOpenState]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (defaultValue) {
+      setValue(nameFrom, defaultValue[0]);
+      setValue(nameTo, defaultValue[1]);
+    }
+  }, []);
+  return {
+    formatIndexes,
+    dateMinParts,
+    dateMaxParts,
+    dateMinDT,
+    dateMaxDT,
+    dateTime,
+    inputValueFrom,
+    inputValueTo,
+    calendarViewDateTime,
+    maskInputRef,
+    calendarType,
+    lastChangedDate,
+    luxonFormat,
+    lastFocusedElement,
+    nameFrom,
+    nameTo,
+    currentIndex,
+    currentCalendarViewDT,
+    isOpen,
+    status,
+    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputFromRef]),
+    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputToRef]),
+    setIsOpen,
+    handleSetIsOpen,
+    setLastFocusedElement,
+    safeOnChange,
+    setCalendarType,
+    setCalendarViewDateTime,
+    setDateTime,
+    handleBlur
+  };
 };
-;// ./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
+;// ./src/components/DateRangePicker/DateRangePickerProvider.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,
+const DateRangePickerProvider = ({
+  children,
   ...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]);
+    formatIndexes,
+    inputFromRef,
+    inputToRef,
+    ...restHook
+  } = useDateRangePicker({
+    ...rest,
+    isOpenState: rest.isOpenState
+  });
+  const handleBlur = e => {
+    restHook.handleBlur(e);
+    rest.onBlur?.(e);
+  };
   const toggleOpen = () => {
-    if (lastFocusedElement === 'from') {
-      setFromOpenToggle(current => !current);
-      setTimeout(() => datepickerFromRef.current?.focus(), 5);
-    } else {
-      setToOpenToggle(current => !current);
-      setTimeout(() => datepickerToRef.current?.focus(), 5);
-    }
+    restHook.setIsOpen(current => !current);
   };
   const handleToggleOpen = e => {
     const tagName = e.currentTarget.tagName.toLowerCase();
-    if (openCalendarMode === 'both' || openCalendarMode === 'input' && tagName === 'input' || openCalendarMode === 'icon' && tagName === 'button') {
+    if (rest.openCalendarMode === 'both' || rest.openCalendarMode === 'input' && tagName === 'input' || rest.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
-    })]
+  return (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerContext.Provider, {
+    value: {
+      ...rest,
+      ...restHook,
+      formatIndexes,
+      inputFromRef,
+      inputToRef,
+      handleToggleOpen,
+      onBlur: handleBlur
+    },
+    children: children
   });
 };
+;// ./src/components/DateRangePicker/DateRangePicker.tsx
+
+
+
+
+const DateRangePicker = ({
+  format = constants_DEFAULT_MASK_FORMAT,
+  openCalendarMode = 'icon',
+  showCalendarIcon = true,
+  ...rest
+}) => (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
+  format: format,
+  openCalendarMode: openCalendarMode,
+  showCalendarIcon: showCalendarIcon,
+  ...rest,
+  children: (0,jsx_runtime_namespaceObject.jsx)(Content_DatePickerContent, {})
+});
 ;// ./src/components/DateRangePicker/index.ts
 
 ;// ./src/components/Drawer/DrawerProvider.tsx
@@ -12470,7 +13728,7 @@ const WithNestedTableRow = ({
         setIsCollapsed: setIsCollapsed,
         isSubHeader: isSubHeader,
         childRowsCount: childRowsCount,
-        children: /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child)
+        children: child
       });
     }
   });
@@ -13038,8 +14296,8 @@ const WithPagination = Component => {
 
 ;// ./src/components/Charts/PieChart/colorPalettes.ts
 const getBalancePalette = theme => {
-  const legendColorNames = ['yellow', 'blue', 'green', 'yellowWarm', 'blueLight', 'turquoise', 'pink', 'purple', '#6C94F7', '#55D6D2'];
-  const pieChartColors = [theme.colors.yellow, theme.colors.blue, theme.colors.green, theme.colors.yellowLighter, theme.colors.blueLight, theme.colors.turquoise, theme.colors.pink, theme.colors.purple, '#6C94F7', '#55D6D2'];
+  const legendColorNames = ['yellow', 'blue', 'green', 'yellowWarm', 'blueLight', 'turquoise', 'pink', 'purple', 'blueCool', 'cyanTeal'];
+  const pieChartColors = [theme.colors.yellow, theme.colors.blue, theme.colors.green, theme.colors.yellowLighter, theme.colors.blueLight, theme.colors.turquoise, theme.colors.pink, theme.colors.purple, theme.colors.blueCool, theme.colors.cyanTeal];
   return {
     legendColorNames,
     pieChartColors
@@ -14222,6 +15480,149 @@ const BarLineComplexChart = WithFullscreenMode(BarLineComplexChartComponent);
 ;// ./src/components/Charts/BarLineComplexChart/index.ts
 
 
+;// external "@nivo/treemap"
+const treemap_namespaceObject = require("@nivo/treemap");
+;// ./src/components/Charts/TreeMapChart/TreeMapChartHeader.tsx
+
+function TreeMapChartHeader_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 FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1nxcyi20"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var TreeMapChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var TreeMapChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const TreeMapChartHeader = ({
+  features
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: TreeMapChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: TreeMapChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// ./src/components/Charts/TreeMapChart/TreeMapChartTooltip.tsx
+
+function TreeMapChartTooltip_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 TreeMapChartTooltip_Tooltip = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eikatys0"
+} : 0)("background-color:", ({
+  theme
+}) => theme.colors.white, ";border:1px solid ", ({
+  theme
+}) => theme.colors.green20, ";border-radius:4px;font-size:12px;font-weight:500;padding:4px 8px;display:flex;gap:5px;" + ( true ? "" : 0));
+var TreeMapChartTooltip_ref =  true ? {
+  name: "1j389vi",
+  styles: "font-weight:700"
+} : 0;
+const TreeMapChartTooltip = ({
+  node
+}) => {
+  return (0,jsx_runtime_namespaceObject.jsxs)(TreeMapChartTooltip_Tooltip, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+      children: node.id
+    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: TreeMapChartTooltip_ref,
+      children: node.formattedValue
+    })]
+  });
+};
+;// ./src/components/Charts/TreeMapChart/TreeMapChart.tsx
+function TreeMapChart_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 TreeMapChart_ref =  true ? {
+  name: "1qkt16r",
+  styles: "position:relative;height:100%;width:100%"
+} : 0;
+var TreeMapChart_ref2 =  true ? {
+  name: "19s8nj4",
+  styles: "position:absolute;width:100%;height:100%"
+} : 0;
+const TreeMapChartComponent = ({
+  data,
+  title,
+  widgetCardProps,
+  features = [],
+  ...treeMapProps
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const colors = [theme.colors.purple, theme.colors.blue, theme.colors.blueLight, theme.colors.turquoise, theme.colors.green, theme.colors.yellowLighter, theme.colors.yellow, theme.colors.pink, theme.colors.blueCool, theme.colors.cyanTeal];
+  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+    features: features,
+    cardProps: {
+      title,
+      headerContent: (0,jsx_runtime_namespaceObject.jsx)(TreeMapChartHeader, {
+        features: features
+      }),
+      ...widgetCardProps
+    },
+    children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: TreeMapChart_ref,
+      children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: TreeMapChart_ref2,
+        children: (0,jsx_runtime_namespaceObject.jsx)(treemap_namespaceObject.ResponsiveTreeMap, {
+          borderWidth: 0,
+          colors: colors,
+          data: data,
+          identity: "name",
+          innerPadding: 4,
+          label: node => `${node.id} (${node.formattedValue})`,
+          labelSkipSize: 10,
+          labelTextColor: theme.colors.white,
+          parentLabelTextColor: theme.colors.white,
+          leavesOnly: true,
+          nodeOpacity: 1,
+          theme: {
+            labels: {
+              text: {
+                fontSize: 14,
+                fontWeight: 600
+              }
+            }
+          },
+          tooltip: TreeMapChartTooltip,
+          value: "value",
+          ...treeMapProps
+        })
+      })
+    })
+  });
+};
+const TreeMapChart = WithFullscreenMode(TreeMapChartComponent);
+;// ./src/components/Charts/TreeMapChart/index.ts
+
 ;// ./src/components/Charts/common/index.ts
 
 ;// ./src/components/Charts/hooks/index.ts
@@ -14232,6 +15633,7 @@ const BarLineComplexChart = WithFullscreenMode(BarLineComplexChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts