intelicoreact 2.0.4 → 2.0.6

package/dist/form.cjs

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var form_exports = {};
 __export(form_exports, {
   ALL_TIME_KEY: () => ALL_TIME_KEY,
+  ANDROID_CHROME_TEXT_CODE: () => ANDROID_CHROME_TEXT_CODE,
+  AccordionWithCheckbox: () => AccordionWithCheckbox_default,
   ActionAlert: () => ActionAlert_default2,
   AdvancedStatus: () => AdvancedStatus_default2,
   CUSTOM_INTERVAL_KEY: () => CUSTOM_INTERVAL_KEY,
@@ -37,69 +39,93 @@ __export(form_exports, {
   Calendar: () => Calendar_default,
   CheckboxInput: () => CheckboxInput_default2,
   CheckboxesLine: () => CheckboxesLine_default2,
+  DEFAULT_ERRORS: () => DEFAULT_ERRORS,
+  DIGIT_MASK_CHAR: () => DIGIT_MASK_CHAR,
+  DateInput: () => DateInput_default,
   Datepicker: () => Datepicker_default,
-  Dropdown: () => Dropdown_default,
+  DatepickerCalendar: () => DatepickerCalendar_default,
+  Dropdown: () => Dropdown_default2,
   DropdownLiveSearch: () => DropdownLiveSearch_default,
+  EXCLUDED_KEYS: () => EXCLUDED_KEYS,
   FileLoader: () => FileLoader_default,
   FileLoaderDescription: () => FileLoaderDescription_default,
   FileLoaderLocal: () => FileLoaderLocal_default,
   FileLoaderLocalGroup: () => FileLoaderLocalGroup_default,
   FormElement: () => FormElement_default,
   FormWithDependOn: () => FormWithDependOn_default,
-  FormattedRawSSN: () => FormattedRawSSN_default,
+  FormattedRawSSN: () => FormattedRawSSN_default2,
   INTERVALS: () => INTERVALS,
-  Input: () => Input_default,
+  Input: () => Input_default2,
   InputAddress: () => InputAddress_default,
   InputCalendar: () => InputCalendar_default,
-  InputColor: () => InputColor_default,
+  InputColor: () => InputColor_default2,
   InputCurrency: () => InputCurrency_default,
   InputCustomFetch: () => InputCustomFetch_default,
   InputDateRange: () => InputDateRange_default,
-  InputLink: () => InputLink_default,
+  InputDateRangeDatepicker: () => Datepicker_default2,
+  InputLink: () => InputLink_default2,
   InputMask: () => InputMask_default,
   InputMask3: () => InputMask3_default,
   InputPassword: () => InputPassword_default,
-  InputWithAction: () => InputWithAction_default,
-  InputsRow: () => InputsRow_default,
+  InputWithAction: () => InputWithAction_default2,
+  InputsRow: () => InputsRow_default2,
+  LOWERCASE_LETTER_MASK_CHAR: () => LOWERCASE_LETTER_MASK_CHAR,
   Label: () => Label_default2,
+  LoadZone: () => LoadZone_default,
+  LoadedContent: () => LoadedContent_default,
   MAIN_DATE_FORMAT: () => MAIN_DATE_FORMAT,
   MAIN_FORMAT: () => MAIN_FORMAT,
   MAIN_TIME_FORMAT: () => MAIN_TIME_FORMAT,
-  MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH: () => MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH,
   MobileCalendar: () => MobileCalendar_default,
   MultiSelect: () => MultiSelect_default,
   NumericInput: () => NumericInput_default,
+  OpenedPart: () => OpenedPart_default,
   RadioGroup: () => RadioGroup_default,
   RadioGroupWithInput: () => RadioGroupWithInput_default,
-  RadioInput: () => RadioInput_default,
+  RadioInput: () => RadioInput_default2,
   RadioRowSwitcher: () => RadioRowSwitcher_default,
   RangeCalendar: () => RangeCalendar_default,
-  RangeInputs: () => RangeInputs_default,
-  RangeList: () => RangeList_default,
+  RangeInputs: () => RangeInputs_default2,
+  RangeList: () => RangeList_default2,
+  RangeListRow: () => RangeListRow_default,
   RangeSlider: () => RangeSlider,
   RangeSlider2: () => RangeSlider2_default,
+  SPACE_CHAR: () => SPACE_CHAR,
+  SelectItem: () => SelectItem_default,
   SwitchableRow: () => SwitchableRow_default,
-  Switcher: () => Switcher_default,
+  Switcher: () => Switcher_default2,
   SwitcherCheckbox: () => SwitcherCheckbox_default,
-  SwitcherHide: () => SwitcherHide_default,
-  SwitcherRadio: () => SwitcherRadio_default,
-  SwitcherRange: () => SwitcherRange_default,
+  SwitcherHide: () => SwitcherHide_default2,
+  SwitcherRadio: () => SwitcherRadio_default2,
+  SwitcherRange: () => SwitcherRange_default2,
   SwitcherRangeList: () => SwitcherRangeList_default,
   SwitcherTagsDropdown: () => SwitcherTagsDropdown_default,
   SwitcherTextarea: () => SwitcherTextarea_default,
   TagListToDropdown: () => TagListToDropdown_default,
   TagsDropdown: () => TagsDropdown_default,
-  Text: () => Text_default,
+  Text: () => Text_default2,
   TextSwitcher: () => TextSwitcher_default,
   Textarea: () => Textarea_default,
-  TieredCheckboxes: () => TieredCheckboxes_default,
+  TieredCheckboxes: () => TieredCheckboxes_default2,
   TimeRange: () => TimeRange_default2,
+  UPPERCASE_LETTER_MASK_CHAR: () => UPPERCASE_LETTER_MASK_CHAR,
   UserContacts: () => UserContacts_default2,
   VariantsListRadio: () => VariantsListRadio_default,
   WidgetPseudoTable: () => WidgetPseudoTable_default,
   WidgetWithSwitchableRows: () => WidgetWithSwitchableRows_default,
+  copyToClipboard: () => copyToClipboard,
   getActualDateRange: () => getActualDateRange,
-  getIsDateValid: () => getIsDateValid
+  getIsDateValid: () => getIsDateValid,
+  getSelectionText: () => getSelectionText,
+  isDigit: () => isDigit,
+  isDigitMaskChar: () => isDigitMaskChar,
+  isLetter: () => isLetter,
+  isLetterMaskChar: () => isLetterMaskChar,
+  isLowerCaseLetter: () => isLowerCaseLetter,
+  isUpperCaseLetter: () => isUpperCaseLetter,
+  resetSelectionText: () => resetSelectionText,
+  selectElementContents: () => selectElementContents,
+  voidFn: () => voidFn
 });
 module.exports = __toCommonJS(form_exports);
 
@@ -596,6 +622,95 @@ var CheckboxesLine_default2 = CheckboxesLine_default;
 // src/Atomic/FormElements/CheckboxInput/index.ts
 var CheckboxInput_default2 = CheckboxInput_default;
 
+// src/Atomic/FormElements/Datepicker/components/DatepickerCalendar.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_classnames9 = __toESM(require("classnames"), 1);
+var import_moment2 = __toESM(require("moment"), 1);
+var import_react9 = require("react");
+var Icon = __toESM(require("react-feather"), 1);
+var DatepickerCalendar = ({
+  date,
+  setDate,
+  startDate,
+  endDate,
+  allowPrev = true,
+  allowNext = true,
+  onClick,
+  onHover,
+  startPrevDate,
+  endPrevDate,
+  limitRange
+}) => {
+  const [days, setDays] = (0, import_react9.useState)({});
+  const title = (0, import_react9.useMemo)(() => `${(0, import_moment2.default)(date).format("MMM")} ${(0, import_moment2.default)(date).format("YYYY")}`, [date]);
+  (0, import_react9.useEffect)(() => {
+    const result = {};
+    const day = (0, import_moment2.default)(date).startOf("month");
+    const daysInMonth = day.daysInMonth();
+    for (let d = 0; d < daysInMonth; d++) {
+      let week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+      if (!result[week]) result[week] = {};
+      result[week][day.weekday()] = { date: day.toDate() };
+      day.add(1, "d");
+    }
+    setDays(result);
+  }, [date]);
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[+week]?.[dayOfWeek];
+    const isFutureDay = day && (0, import_moment2.default)(day.date).isAfter((0, import_moment2.default)(), "day");
+    const isPastDay = limitRange ? day && (0, import_moment2.default)(day.date).isBefore((0, import_moment2.default)().subtract(limitRange, "days"), "day") : null;
+    const isRangeEnd = day && ((0, import_moment2.default)(day.date).isSame(startDate, "day") || (0, import_moment2.default)(day.date).isSame((0, import_moment2.default)(endDate).subtract(1, "hour"), "day"));
+    const isRangeInside = day && startDate && endDate && (0, import_moment2.default)(day.date).isAfter(startDate, "day") && (0, import_moment2.default)(day.date).isBefore((0, import_moment2.default)(endDate).subtract(1, "hour"), "day");
+    const isPrevRangeEnd = day && ((0, import_moment2.default)(day.date).isSame(startPrevDate, "day") || (0, import_moment2.default)(day.date).isSame((0, import_moment2.default)(endPrevDate).subtract(1, "day"), "day"));
+    const isPrevRangeInside = day && startPrevDate && endPrevDate && (0, import_moment2.default)(day.date).isAfter(startPrevDate, "day") && (0, import_moment2.default)(day.date).isBefore((0, import_moment2.default)(endPrevDate).subtract(1, "day"), "day");
+    const classNames2 = (0, import_classnames9.default)(
+      "calendar__day",
+      { "calendar__day--clickable": day },
+      { "calendar__day--disabled": isFutureDay || isPastDay },
+      { "calendar__day--range-end": isRangeEnd },
+      { "calendar__day--range-inside": isRangeInside },
+      { "calendar__day--prev-range-end": isPrevRangeEnd },
+      { "calendar__day--prev-range-inside": isPrevRangeInside }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: classNames2,
+        onClick: day && !isFutureDay ? () => onClick(day.date) : void 0,
+        onMouseOver: day && !isFutureDay ? () => onHover(day.date) : void 0,
+        onMouseLeave: () => onHover(null),
+        children: day && day.date.getDate()
+      },
+      `${week}_${dayOfWeek}`
+    );
+  };
+  const handlePrev = () => {
+    setDate((0, import_moment2.default)(date).subtract(1, "month").toDate());
+  };
+  const handleNext = () => {
+    setDate((0, import_moment2.default)(date).add(1, "month").toDate());
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "calendar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "calendar-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "calendar-header__prev", children: allowPrev && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "data-testid": "datepicker-calendar-prev", onClick: handlePrev, "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon.ChevronLeft, { size: 16 }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "calendar-header__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "calendar-header__next", children: allowNext && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "data-testid": "datepicker-calendar-next", onClick: handleNext, "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon.ChevronRight, { size: 16 }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "calendar__week", children: Array.from({ length: 7 }, (_, dayOfWeek) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: "calendar__day calendar__day--title",
+        children: (0, import_moment2.default)().weekday(dayOfWeek).format("dd").charAt(0)
+      },
+      `day-of-week_${dayOfWeek}`
+    )) }),
+    Object.keys(days).map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "calendar__week", children: Array.from({ length: 7 }, (_, dayOfWeek) => renderDay(week, dayOfWeek)) }, `week_${index}`))
+  ] });
+};
+var DatepickerCalendar_default = DatepickerCalendar;
+
 // src/Atomic/FormElements/Datepicker/Datepicker.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 
@@ -768,7 +883,7 @@ var Langs = {
 var Langs_default = Langs;
 
 // src/Atomic/FormElements/Dropdown/Dropdown.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 
 // src/Constants/index.constants.js
 var KEYBOARD_SERVICE_KEYS = [
@@ -846,7 +961,7 @@ var OS = {
 };
 
 // src/Functions/utils.js
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_moment_timezone = __toESM(require("moment-timezone"), 1);
 var uuid = () => Date.now().toString(36) + Math.random().toString(36).substring(2);
 var getIsOnlyAnObject = (input) => {
@@ -876,7 +991,7 @@ var useOutsideToggle = (ref, setOut, open) => {
       setOut(open);
     }
   }
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     document.addEventListener("mouseup", handleClickOutside);
     return () => {
       document.removeEventListener("mouseup", handleClickOutside);
@@ -1407,21 +1522,21 @@ var formatToHideValuePartially = (value, settings) => {
 };
 
 // src/Atomic/FormElements/Input/Input.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 
 // src/Atomic/Layout/Spinner/Spinner.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var import_classnames9 = __toESM(require("classnames"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_classnames10 = __toESM(require("classnames"), 1);
 var CN2 = "loader-box";
 var Spinner = ({ size = null, className, testId = CN2 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       role: "status",
       "aria-live": "polite",
       "aria-busy": "true",
       "data-testid": testId,
-      className: (0, import_classnames9.default)(
+      className: (0, import_classnames10.default)(
         CN2,
         {
           j5: size !== "small",
@@ -1429,11 +1544,11 @@ var Spinner = ({ size = null, className, testId = CN2 }) => {
         },
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_classnames9.default)("lds-ring", { [`lds-ring_${size}`]: size }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_classnames10.default)("lds-ring", { [`lds-ring_${size}`]: size }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {})
       ] })
     }
   );
@@ -1441,11 +1556,11 @@ var Spinner = ({ size = null, className, testId = CN2 }) => {
 var Spinner_default = Spinner;
 
 // src/Atomic/UI/DynamicIcon/DynamicIcon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
 var DynamicIcon = ({ iconKey, ...props }) => {
-  const [Icon2, setIcon] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const [Icon2, setIcon] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
     const fetchData = async () => {
       const FeatherIcons = await import("react-feather");
       const iconComponent = FeatherIcons[iconKey];
@@ -1453,21 +1568,21 @@ var DynamicIcon = ({ iconKey, ...props }) => {
     };
     fetchData();
   }, [iconKey]);
-  return Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { ...props }) : null;
+  return Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { ...props }) : null;
 };
 var DynamicIcon_default = DynamicIcon;
 
 // src/Atomic/FormElements/Input/hooks/useErrorBlink.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var DEFAULT_BLINK_TIME = 100;
 function useErrorBlink({
   isUseErrorsBlink,
   blinkTime = DEFAULT_BLINK_TIME
 }) {
-  const [isAttemptToChange, setIsAttemptToChange] = (0, import_react12.useState)(false);
-  const [isToHighlightError, setIsToHighlightError] = (0, import_react12.useState)(false);
-  const [prevValue, setPreviousValue] = (0, import_react12.useState)("");
-  (0, import_react12.useEffect)(() => {
+  const [isAttemptToChange, setIsAttemptToChange] = (0, import_react13.useState)(false);
+  const [isToHighlightError, setIsToHighlightError] = (0, import_react13.useState)(false);
+  const [prevValue, setPreviousValue] = (0, import_react13.useState)("");
+  (0, import_react13.useEffect)(() => {
     if (!isAttemptToChange) return;
     let timerId = null;
     setIsToHighlightError(true);
@@ -1516,19 +1631,19 @@ function useErrorBlink({
 }
 
 // src/Atomic/FormElements/Input/hooks/useInputFocus.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useInputFocus({
   isSelect,
   isFocusDefault = false,
   onFocus = () => {
   }
 }) {
-  const [isFocused, setIsFocused] = (0, import_react13.useState)(false);
-  const [isEditing, setEditing] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
+  const [isFocused, setIsFocused] = (0, import_react14.useState)(false);
+  const [isEditing, setEditing] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
     setEditing(isSelect ?? false);
   }, [isSelect]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (typeof isFocusDefault === "boolean") {
       setIsFocused(isFocusDefault);
       setEditing(isFocusDefault);
@@ -1552,9 +1667,9 @@ function useInputFocus({
 }
 
 // src/Atomic/FormElements/Input/hooks/useInputHover.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useInputHover() {
-  const [onInputHover, setOnInputHover] = (0, import_react14.useState)(false);
+  const [onInputHover, setOnInputHover] = (0, import_react15.useState)(false);
   const handleMouseEnter = () => setOnInputHover(true);
   const handleMouseLeave = () => setOnInputHover(false);
   return {
@@ -1718,7 +1833,7 @@ function useInputValueProcessing({
 }
 
 // src/Atomic/FormElements/Input/hooks/useKeyboardHandling.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useKeyboardHandling({
   onKeyDown,
   onKeyUp,
@@ -1726,7 +1841,7 @@ function useKeyboardHandling({
   setPreviousValue,
   value
 }) {
-  const [keyDownData, setKeyDownData] = (0, import_react15.useState)({
+  const [keyDownData, setKeyDownData] = (0, import_react16.useState)({
     start: null,
     end: null,
     keyCode: null
@@ -1753,14 +1868,14 @@ function useKeyboardHandling({
 }
 
 // src/Atomic/FormElements/Input/Input.tsx
-var import_classnames10 = __toESM(require("classnames"), 1);
-var import_react16 = require("react");
+var import_classnames11 = __toESM(require("classnames"), 1);
+var import_react17 = require("react");
 function defaultCallback() {
 }
 function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defaultCallback, onBlur = defaultCallback, onFocus = defaultCallback, onKeyUp = defaultCallback, onKeyDown = defaultCallback, isNotBlinkErrors, isPriceInput, onlyNumbers, disabled, withDelete, value, placeholder, className, type = "text", mask, maskChar, formatChars, error, icon, iconDynamicKey, iconDynamicProps = {}, symbolsLimit, blinkTime, isFocusDefault = false, isNotValidateASCII = false, isNumericMobileKeyboard = false, isCropFirstNool = false, testId = "input", action, isUseAutoSelect = true, isReadOnly = false, isLoading = false, name, fieldKey, id, attributesOfNativeInput = {} }) {
-  const DynamicIconComponent = iconDynamicKey && !icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DynamicIcon_default, { iconKey: iconDynamicKey, ...iconDynamicProps }) : null;
-  const inputInnerRef = (0, import_react16.useRef)(null);
-  const inputRef = (0, import_react16.useMemo)(() => ref || inputInnerRef, [ref]);
+  const DynamicIconComponent = iconDynamicKey && !icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicIcon_default, { iconKey: iconDynamicKey, ...iconDynamicProps }) : null;
+  const inputInnerRef = (0, import_react17.useRef)(null);
+  const inputRef = (0, import_react17.useMemo)(() => ref || inputInnerRef, [ref]);
   const isUseErrorsBlink = !isNotBlinkErrors && !mask;
   const inputName = name || fieldKey || id;
   const {
@@ -1825,7 +1940,7 @@ function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defau
     setIsFocused(false);
     setEditing(false);
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isEditing) inputRef?.current?.focus?.();
   }, [isEditing, isFocused]);
   const getInputType = () => {
@@ -1834,7 +1949,7 @@ function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defau
   };
   const uniProps = {
     name: inputName,
-    className: (0, import_classnames10.default)("input", className, {
+    className: (0, import_classnames11.default)("input", className, {
       "input--with-icon": icon,
       "input--with-delete": withDelete
     }),
@@ -1850,11 +1965,11 @@ function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defau
     ...maskChar ? { maskChar } : {},
     ...formatChars ? { formatChars } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       "data-testid": testId,
-      className: (0, import_classnames10.default)(
+      className: (0, import_classnames11.default)(
         `input__wrap`,
         { [`input__wrap_focus`]: isFocused },
         { [`input__wrap_error`]: error || isToHighlightError },
@@ -1863,7 +1978,7 @@ function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defau
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             readOnly: isReadOnly,
@@ -1885,14 +2000,14 @@ function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defau
         ),
         DynamicIconComponent ?? icon,
         action,
-        withDelete && onInputHover && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        withDelete && onInputHover && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "span",
           {
-            className: (0, import_classnames10.default)(`input__close`, { hidden: !getSafelyValue(value) }),
+            className: (0, import_classnames11.default)(`input__close`, { hidden: !getSafelyValue(value) }),
             onClick: handleToggleWithClear
           }
         ),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner_default, { size: "small" })
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner_default, { size: "small" })
       ]
     }
   );
@@ -1900,8 +2015,8 @@ function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defau
 var Input_default = Input;
 
 // src/Atomic/FormElements/RadioInput/RadioInput.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var import_classnames11 = __toESM(require("classnames"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_classnames12 = __toESM(require("classnames"), 1);
 var RC6 = "radio-input";
 var RadioInput = ({
   label,
@@ -1915,21 +2030,21 @@ var RadioInput = ({
   onChange,
   attributesOfNativeInput
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "label",
     {
       "data-testid": testId,
-      className: (0, import_classnames11.default)(RC6, className, { [`${RC6}_disabled`]: disabled }),
+      className: (0, import_classnames12.default)(RC6, className, { [`${RC6}_disabled`]: disabled }),
       htmlFor: id,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
-            className: (0, import_classnames11.default)(`${RC6}__input`, {
+            className: (0, import_classnames12.default)(`${RC6}__input`, {
               [`${RC6}__input--checked`]: checked === value
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "input",
                 {
                   id,
@@ -1943,11 +2058,11 @@ var RadioInput = ({
                   ...attributesOfNativeInput
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${RC6}__mark` })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${RC6}__mark` })
             ]
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${RC6}__label`, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${RC6}__label`, children: label })
       ]
     }
   );
@@ -1955,18 +2070,18 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/Atomic/FormElements/Dropdown/components/DropdownLoader.js
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var import_react18 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react19 = __toESM(require("react"), 1);
 var DropdownLoader = function({ variant = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dropdown-loader-box j5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dropdown-loader-box j5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: `lds-ring${variant === "little" ? " lds-ring_little" : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {})
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {})
       ]
     }
   ) });
@@ -1974,7 +2089,7 @@ var DropdownLoader = function({ variant = "" }) {
 var DropdownLoader_default = DropdownLoader;
 
 // src/Functions/useIsMobile/useIsMobile.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useIsMobile({ isWithoutWidthCheck = false } = {}) {
   const isIPad = () => {
     const ua = navigator.userAgent || navigator.vendor || window.opera;
@@ -1985,8 +2100,8 @@ function useIsMobile({ isWithoutWidthCheck = false } = {}) {
   const getIsMobile = () => {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || isIPad();
   };
-  const [isMobile, setIsMobile] = (0, import_react19.useState)(getIsMobile());
-  (0, import_react19.useEffect)(() => {
+  const [isMobile, setIsMobile] = (0, import_react20.useState)(getIsMobile());
+  (0, import_react20.useEffect)(() => {
     if (getIsMobile()) {
       setIsMobile(true);
     }
@@ -2074,59 +2189,59 @@ function getSortedOptions(data, sortAlphabetical = false) {
 }
 
 // src/Atomic/FormElements/Dropdown/useDropdown.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 function useDropdown({ id, fieldKey, value, sortAlphabetical, withMobileLogic, options, minItemsForShowMobileSearch, isSearchable: isSearchableProp, isDoNotPullOutListOfMainContainer } = {}) {
   const { isMobile: isMobileProp } = useIsMobile_default2();
   const isMobile = isMobileProp && withMobileLogic;
-  const [dropdownId] = (0, import_react20.useState)(
+  const [dropdownId] = (0, import_react21.useState)(
     (id || fieldKey || Math.random().toString(16).slice(2)).toString()
   );
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const [valueToApply, setValueToApplyState] = (0, import_react20.useState)(null);
-  const valueToApplyRef = (0, import_react20.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [valueToApply, setValueToApplyState] = (0, import_react21.useState)(null);
+  const valueToApplyRef = (0, import_react21.useRef)(null);
   const setValueToApply = (value2) => {
     valueToApplyRef.current = value2;
     setValueToApplyState(value2);
   };
-  const [searchValue, setSearchValue] = (0, import_react20.useState)();
-  const dropdownRef = (0, import_react20.useRef)(null);
-  const dropdownListRef = (0, import_react20.useRef)(null);
-  const dropdownFooterRef = (0, import_react20.useRef)(null);
-  const dropdownListWrapperRef = (0, import_react20.useRef)(null);
-  const searchInputRef = (0, import_react20.useRef)(null);
-  const wrapperRef = (0, import_react20.useRef)(null);
-  const [initListHeight, setInitListHeight] = (0, import_react20.useState)(null);
-  const [isSearchChanged, setIsSearchChanged] = (0, import_react20.useState)(false);
-  const [isSearchInputFocused, setIsSearchInputFocused] = (0, import_react20.useState)(false);
-  const [isScrollableList, setIsScrollableList] = (0, import_react20.useState)(false);
-  const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, import_react20.useState)(false);
-  const [scrollTop, setScrollTop] = (0, import_react20.useState)(0);
-  const [scrollHeight, setScrollHeight] = (0, import_react20.useState)(1);
-  const [maxListContainerHeight, setMaxListContainerHeight] = (0, import_react20.useState)(0);
-  const totalOptionsLength = (0, import_react20.useMemo)(() => options ? getTotalOptions(options) : 0, [options]);
-  const isSearchable = (0, import_react20.useMemo)(() => {
+  const [searchValue, setSearchValue] = (0, import_react21.useState)();
+  const dropdownRef = (0, import_react21.useRef)(null);
+  const dropdownListRef = (0, import_react21.useRef)(null);
+  const dropdownFooterRef = (0, import_react21.useRef)(null);
+  const dropdownListWrapperRef = (0, import_react21.useRef)(null);
+  const searchInputRef = (0, import_react21.useRef)(null);
+  const wrapperRef = (0, import_react21.useRef)(null);
+  const [initListHeight, setInitListHeight] = (0, import_react21.useState)(null);
+  const [isSearchChanged, setIsSearchChanged] = (0, import_react21.useState)(false);
+  const [isSearchInputFocused, setIsSearchInputFocused] = (0, import_react21.useState)(false);
+  const [isScrollableList, setIsScrollableList] = (0, import_react21.useState)(false);
+  const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, import_react21.useState)(false);
+  const [scrollTop, setScrollTop] = (0, import_react21.useState)(0);
+  const [scrollHeight, setScrollHeight] = (0, import_react21.useState)(1);
+  const [maxListContainerHeight, setMaxListContainerHeight] = (0, import_react21.useState)(0);
+  const totalOptionsLength = (0, import_react21.useMemo)(() => options ? getTotalOptions(options) : 0, [options]);
+  const isSearchable = (0, import_react21.useMemo)(() => {
     return isMobile ? totalOptionsLength > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) : isSearchableProp;
   }, [isMobile, isSearchableProp, totalOptionsLength, minItemsForShowMobileSearch, MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH]);
-  const optionsWithOtherAtTheEnd = (0, import_react20.useMemo)(() => moveOtherToEnd(options ?? []), [options]);
-  const filteredGroups = (0, import_react20.useMemo)(() => optionsWithOtherAtTheEnd.map((item) => ({
+  const optionsWithOtherAtTheEnd = (0, import_react21.useMemo)(() => moveOtherToEnd(options ?? []), [options]);
+  const filteredGroups = (0, import_react21.useMemo)(() => optionsWithOtherAtTheEnd.map((item) => ({
     ...item,
     items: !isSearchable || !isSearchChanged ? item?.items : item.items?.slice().filter(
       (el) => el?.label?.toLowerCase().includes(searchValue?.toString()?.toLowerCase() || "") || !el?.value || el?.value === ""
     )
   })).filter((item) => (item.items?.length ?? 0) > 0), [optionsWithOtherAtTheEnd, searchValue, isSearchable, isSearchChanged]);
-  const filteredItems = (0, import_react20.useMemo)(() => optionsWithOtherAtTheEnd.filter((item) => !item.items?.length).filter((item) => {
+  const filteredItems = (0, import_react21.useMemo)(() => optionsWithOtherAtTheEnd.filter((item) => !item.items?.length).filter((item) => {
     if (!isSearchable || !isSearchChanged) return true;
     return item?.label?.toLowerCase().includes(searchValue?.toString()?.toLowerCase() || "") || !item?.value || item?.value === "";
   }), [optionsWithOtherAtTheEnd, searchValue, isSearchable, isSearchChanged]);
-  const filteredOptions = (0, import_react20.useMemo)(() => [...filteredItems, ...filteredGroups], [filteredItems, filteredGroups]);
-  const selectedLabel = (0, import_react20.useMemo)(() => options?.find((el) => el.value === value)?.label ?? options?.reduce(
+  const filteredOptions = (0, import_react21.useMemo)(() => [...filteredItems, ...filteredGroups], [filteredItems, filteredGroups]);
+  const selectedLabel = (0, import_react21.useMemo)(() => options?.find((el) => el.value === value)?.label ?? options?.reduce(
     (acc, item) => {
       if (!acc?.length) return item.items?.find((el) => el.value === value)?.label ?? "";
       return acc;
     },
     ""
   ), [options, value]);
-  const postfixText = (0, import_react20.useMemo)(() => selectedLabel && filteredOptions.find((option) => option.value === value)?.postfix || null, [selectedLabel, filteredOptions, value]);
+  const postfixText = (0, import_react21.useMemo)(() => selectedLabel && filteredOptions.find((option) => option.value === value)?.postfix || null, [selectedLabel, filteredOptions, value]);
   return {
     isMobile,
     dropdownId,
@@ -2176,8 +2291,8 @@ function useDropdown({ id, fieldKey, value, sortAlphabetical, withMobileLogic, o
 var useDropdown_default = useDropdown;
 
 // src/Atomic/FormElements/Dropdown/Dropdown.tsx
-var import_classnames12 = __toESM(require("classnames"), 1);
-var import_react21 = require("react");
+var import_classnames13 = __toESM(require("classnames"), 1);
+var import_react22 = require("react");
 var import_react_dom = require("react-dom");
 var import_react_feather2 = require("react-feather");
 var RC7 = "dropdown";
@@ -2315,7 +2430,7 @@ function Dropdown({
       onCancelClick();
     }
   };
-  const doScrollCallback = (0, import_react21.useCallback)(
+  const doScrollCallback = (0, import_react22.useCallback)(
     (e) => {
       const {
         callback,
@@ -2428,16 +2543,16 @@ function Dropdown({
       options: getDependsTrigger ? newOptions : options
     };
   };
-  const modalBtnTrigger = (0, import_react21.useMemo)(() => entity && entity !== "" && typeof entity === "string", [entity]);
-  const depend = (0, import_react21.useMemo)(() => getDepends(modalBtnTrigger), [modalBtnTrigger, filteredOptions]);
+  const modalBtnTrigger = (0, import_react22.useMemo)(() => entity && entity !== "" && typeof entity === "string", [entity]);
+  const depend = (0, import_react22.useMemo)(() => getDepends(modalBtnTrigger), [modalBtnTrigger, filteredOptions]);
   const getMarkupForElement = (item, _index, optTestId) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         type: "button",
         "data-testid": `${testId}-${optTestId}-option`,
         onMouseDown: () => depend.onChange(item),
-        className: (0, import_classnames12.default)(
+        className: (0, import_classnames13.default)(
           `${RC7}__list-item`,
           {
             [`${RC7}__list-item_active`]: item.value === (valueToApply ?? value),
@@ -2447,19 +2562,19 @@ function Dropdown({
         ),
         value: item?.value,
         children: [
-          !isMobile && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          !isMobile && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
-              className: (0, import_classnames12.default)(`${RC7}__active-icon`, {
+              className: (0, import_classnames13.default)(`${RC7}__active-icon`, {
                 [`${RC7}__active-icon_active`]: item.value === value
               }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.Check, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.Check, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
-              className: (0, import_classnames12.default)(`${RC7}__list-item-label`, item.labelClassName || ""),
+              className: (0, import_classnames13.default)(`${RC7}__list-item-label`, item.labelClassName || ""),
               dangerouslySetInnerHTML: {
                 __html: getPreparedOptionLabel2(
                   item.label,
@@ -2470,19 +2585,19 @@ function Dropdown({
             }
           ),
           item?.icon || "",
-          isMobile ? item?.customMobileIcon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadioInput_default, { value: item.value, checked: valueToApply ?? value }) : ""
+          isMobile ? item?.customMobileIcon ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadioInput_default, { value: item.value, checked: valueToApply ?? value }) : ""
         ]
       },
       item.value?.toString()?.replace(/ /g, "_")
     );
   };
   const filteredOptionList = (filteredOption) => {
-    return (filteredOption.items?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return (filteredOption.items?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
-        className: (0, import_classnames12.default)(`${RC7}-group`, filteredOption.className),
+        className: (0, import_classnames13.default)(`${RC7}-group`, filteredOption.className),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${RC7}-group__name`, children: filteredOption.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${RC7}-group__name`, children: filteredOption.label }),
           filteredOption.items?.map(
             (el, index) => getMarkupForElement(el, index, (el?.testId || index)?.toString())
           )
@@ -2492,44 +2607,44 @@ function Dropdown({
     ) : null;
   };
   const getListMarkUp = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         "data-testid": `${testId}-container-wrapper`,
-        className: (0, import_classnames12.default)(`${RC7}__container-wrapper`),
+        className: (0, import_classnames13.default)(`${RC7}__container-wrapper`),
         ref: wrapperRef,
         onClick: isMobile ? onWrapperClick : () => {
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
-            className: (0, import_classnames12.default)(`${RC7}__list-wrapper`, {
+            className: (0, import_classnames13.default)(`${RC7}__list-wrapper`, {
               [`${RC7}__list-wrapper--fixed-height`]: isFixedMaxHeight,
               [`${RC7}__list-wrapper--with-bottom-shadow`]: isScrollableList && isMobile && !footerContent,
               [`${RC7}__list-wrapper--with-bottom-shadow-hidden`]: scrollTop === scrollHeight && !footerContent
             }),
             ref: dropdownListWrapperRef,
             children: [
-              isMobile && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              isMobile && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
-                  className: (0, import_classnames12.default)(`${RC7}__list-header`, {
+                  className: (0, import_classnames13.default)(`${RC7}__list-header`, {
                     [`${RC7}__list-header-with-shadow`]: isScrollableList && isMobile,
                     [`${RC7}__list-header-with-shadow-hidden`]: scrollTop === 0
                   }),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_classnames12.default)(`${RC7}__list-header-row`), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_classnames12.default)(`${RC7}__list-label`), children: label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)(`${RC7}__list-header-row`), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)(`${RC7}__list-label`), children: label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         "div",
                         {
-                          className: (0, import_classnames12.default)(`${RC7}__list-close-icon`),
+                          className: (0, import_classnames13.default)(`${RC7}__list-close-icon`),
                           onClick: onCancelClick,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.X, { onClick: onCancelClick })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.X, { onClick: onCancelClick })
                         }
                       )
                     ] }),
-                    isSearchable && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_classnames12.default)(`${RC7}__list-header-row`), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    isSearchable && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)(`${RC7}__list-header-row`), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       Input_default,
                       {
                         ref: searchInputRef,
@@ -2545,10 +2660,10 @@ function Dropdown({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
-                  className: (0, import_classnames12.default)(`${RC7}__list`, {
+                  className: (0, import_classnames13.default)(`${RC7}__list`, {
                     [`${RC7}__list-top`]: isListTop,
                     [`${RC7}__list--with-footer`]: footerContent
                   }),
@@ -2571,16 +2686,16 @@ function Dropdown({
                       }
                       return null;
                     }),
-                    !filteredItems?.length && !filteredGroups?.length && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${RC7}__list-item ${RC7}__list-item--no-options`, children: noOptionsText }),
-                    disabled && isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownLoader_default, {})
+                    !filteredItems?.length && !filteredGroups?.length && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${RC7}__list-item ${RC7}__list-item--no-options`, children: noOptionsText }),
+                    disabled && isOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownLoader_default, {})
                   ]
                 }
               ),
-              footerContent && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              footerContent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "div",
                 {
                   ref: dropdownFooterRef,
-                  className: (0, import_classnames12.default)(`${RC7}__footer`, {
+                  className: (0, import_classnames13.default)(`${RC7}__footer`, {
                     [`${RC7}__footer-with-shadow`]: isMobile && isScrollableList,
                     [`${RC7}__footer-with-shadow-hidden`]: scrollTop === scrollHeight
                   }),
@@ -2598,7 +2713,7 @@ function Dropdown({
     if (!lc) return null;
     return (0, import_react_dom.createPortal)(getListMarkUp(), lc);
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     document.addEventListener("click", handleClickOutside, true);
     return () => {
       getListContainer2()?.remove();
@@ -2606,13 +2721,13 @@ function Dropdown({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
       initListContainer();
       if (isDefaultOpened && !isMobile || isDefaultOpenedMobile) setIsOpen(true);
     }
   }, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     if (!isMobile) {
       window.addEventListener("resize", setListContainerStyles);
       window.addEventListener("mousewheel", closeList);
@@ -2633,7 +2748,7 @@ function Dropdown({
       getListContainer2()?.removeEventListener("click", closeList);
     };
   }, [getListContainer2]);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     setListContainerStyles();
   }, [
     maxListContainerHeight,
@@ -2643,7 +2758,7 @@ function Dropdown({
     isFixedMaxHeight,
     options
   ]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const fn = isOpen ? "addEventListener" : "removeEventListener";
     cancelButtonRef?.current?.[fn]("click", onCancelClick, true);
     applyButtonRef?.current?.[fn]("click", onApplyClick, true);
@@ -2659,7 +2774,7 @@ function Dropdown({
         removeEventListener("scroll", doScrollCallback);
     };
   }, [isOpen, dropdownListRef]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     let timeout;
     if (!searchValue && isSearchInputFocused && !isMobile) {
       setSearchValue(selectedLabel);
@@ -2672,7 +2787,7 @@ function Dropdown({
       clearTimeout(timeout);
     };
   }, [isSearchInputFocused]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isOpen && !isSearchInputFocused && searchInputRef?.current && !isMobile)
       searchInputRef.current?.focus();
     if (isOpen) {
@@ -2689,7 +2804,7 @@ function Dropdown({
       setSearchValue(null);
     }
   }, [isOpen]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const dropdownListEl = getListContainer2()?.getElementsByClassName("dropdown__list")[0];
     if (!isMobile && dropdownListEl) {
       const handleWheel = (e) => {
@@ -2714,7 +2829,7 @@ function Dropdown({
     return () => {
     };
   }, [isOpen, isMobile, getListContainer2()]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isOpen && isMobile && dropdownListRef?.current && !searchValue) {
       setIsScrollableList(
         dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight
@@ -2731,7 +2846,7 @@ function Dropdown({
     dropdownListRef?.current?.scrollHeight,
     dropdownListRef?.current?.clientHeight
   ]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const setScrollTopValue = (e) => {
       setScrollTop(Number.parseInt(e?.target?.scrollTop?.toString(), 10));
     };
@@ -2747,7 +2862,7 @@ function Dropdown({
       }
     };
   }, [isOpen, isMobile, dropdownListRef?.current]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (dropdownListRef?.current) {
       setScrollHeight(
         Number.parseInt(
@@ -2758,10 +2873,10 @@ function Dropdown({
     }
   }, [scrollTop, dropdownListRef?.current]);
   if (!options) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
-      className: (0, import_classnames12.default)(RC7, className, {
+      className: (0, import_classnames13.default)(RC7, className, {
         disabled,
         [`${RC7}-mobile`]: isMobile,
         [`${RC7}--focused`]: isOpen && !isMobile,
@@ -2771,12 +2886,12 @@ function Dropdown({
       onKeyDown,
       onKeyUp,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
             "data-testid": testId,
-            className: (0, import_classnames12.default)(`${RC7}__trigger`, "input__wrap", {
+            className: (0, import_classnames13.default)(`${RC7}__trigger`, "input__wrap", {
               [`${RC7}__trigger--with-actions`]: withActions,
               placeholder: value === null || value === void 0 || value === "",
               error
@@ -2785,8 +2900,8 @@ function Dropdown({
             onKeyDown,
             onKeyUp,
             tabIndex,
-            children: customTrigger || /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-              isSearchable && !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            children: customTrigger || /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+              isSearchable && !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "input",
                 {
                   ref: searchInputRef,
@@ -2797,38 +2912,38 @@ function Dropdown({
                   onFocus: () => setIsSearchInputFocused(true),
                   onBlur: () => setIsSearchInputFocused(false)
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text", children: selectedLabel || placeholder || "" }),
-                postfixText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dropdown__list-item-postfix", children: postfixText })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: selectedLabel || placeholder || "" }),
+                postfixText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "dropdown__list-item-postfix", children: postfixText })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "span",
                 {
-                  className: (0, import_classnames12.default)(`${RC7}__arrow`, {
+                  className: (0, import_classnames13.default)(`${RC7}__arrow`, {
                     [`${RC7}__arrow_active`]: isOpen
                   }),
                   onClick: toggleList,
-                  children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.Code, { className: "mobile-icon" }) : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.ChevronDown, {})
+                  children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.Code, { className: "mobile-icon" }) : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.ChevronDown, {})
                 }
               )
             ] })
           }
         ),
-        withActions && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_classnames12.default)(`${RC7}__actions`), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        withActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)(`${RC7}__actions`), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
-              className: (0, import_classnames12.default)(`${RC7}__actions-item`),
+              className: (0, import_classnames13.default)(`${RC7}__actions-item`),
               onClick: onActionConfirmClick,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.Check, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.Check, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
-              className: (0, import_classnames12.default)(`${RC7}__actions-item`),
+              className: (0, import_classnames13.default)(`${RC7}__actions-item`),
               onClick: onActionCancelClick,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_feather2.X, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_feather2.X, {})
             }
           )
         ] }),
@@ -2840,15 +2955,15 @@ function Dropdown({
 var Dropdown_default = Dropdown;
 
 // src/Atomic/FormElements/Switcher/Switcher.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 
 // src/Atomic/UI/Hint/Hint.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 
 // src/Molecular/CustomIcons/components/Check2.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Check2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2856,15 +2971,15 @@ function Check2(props) {
       height: 16,
       fill: "none",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { stroke: "#000", d: "M13.333 4 6 11.333 2.667 8" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { stroke: "#000", d: "M13.333 4 6 11.333 2.667 8" })
     }
   );
 }
 
 // src/Molecular/CustomIcons/components/Email.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Email(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2873,7 +2988,7 @@ function Email(props) {
       fill: "none",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "mask",
           {
             id: "a",
@@ -2883,27 +2998,27 @@ function Email(props) {
             y: 0,
             maskUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "path",
                 {
                   stroke: "#000",
                   d: "M2.667 2.667h10.666c.734 0 1.334.6 1.334 1.333v8c0 .733-.6 1.333-1.334 1.333H2.667c-.734 0-1.334-.6-1.334-1.333V4c0-.733.6-1.333 1.334-1.333Z"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { stroke: "#000", d: "M14.667 4 8 8.667 1.333 4" })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { stroke: "#000", d: "M14.667 4 8 8.667 1.333 4" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { fill: "#1F7499", d: "M0 0h16v16H0z" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#1F7499", d: "M0 0h16v16H0z" }) })
       ]
     }
   );
 }
 
 // src/Molecular/CustomIcons/components/HelpCircleFilled.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function HelpCircleFilled(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2912,14 +3027,14 @@ function HelpCircleFilled(props) {
       fill: "none",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
             fill: "#9AA0B9",
             d: "M8 14.667A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.334Z"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
             stroke: "#fff",
@@ -2932,9 +3047,9 @@ function HelpCircleFilled(props) {
 }
 
 // src/Molecular/CustomIcons/components/Phone.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Phone(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2943,7 +3058,7 @@ function Phone(props) {
       fill: "none",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "mask",
           {
             id: "a",
@@ -2952,7 +3067,7 @@ function Phone(props) {
             x: 0,
             y: 0,
             maskUnits: "userSpaceOnUse",
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "path",
               {
                 stroke: "#000",
@@ -2961,7 +3076,7 @@ function Phone(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "#1F7499", d: "M0 0h16v16H0z" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fill: "#1F7499", d: "M0 0h16v16H0z" }) })
       ]
     }
   );
@@ -3010,8 +3125,8 @@ function HandleClickOutsideObj(id, setIsOpen) {
 }
 
 // src/Atomic/UI/Hint/Hint.tsx
-var import_classnames13 = __toESM(require("classnames"), 1);
-var import_react22 = require("react");
+var import_classnames14 = __toESM(require("classnames"), 1);
+var import_react23 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_react_feather3 = require("react-feather");
 var hintTimeoutMap = /* @__PURE__ */ new Map();
@@ -3039,13 +3154,13 @@ var Hint = ({
   isLoading,
   isCloseOnChildrenClick = false
 }) => {
-  const hintRef = (0, import_react22.useRef)(null);
-  const [hintId] = (0, import_react22.useState)(id ?? key ?? Math.random().toString(16).slice(2));
-  const [iAmOpenedOptions] = (0, import_react22.useState)({ ...I_AM_OPENED_EVENT_OPTIONS, detail: { hintId } });
-  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
-  const [isStyleComputed, setIsStyleComputed] = (0, import_react22.useState)(false);
-  const [handleScroll] = (0, import_react22.useState)(new HandleScrollObj(setIsOpen));
-  const [handleClickOutside] = (0, import_react22.useState)(new HandleClickOutsideObj(hintId, setIsOpen));
+  const hintRef = (0, import_react23.useRef)(null);
+  const [hintId] = (0, import_react23.useState)(id ?? key ?? Math.random().toString(16).slice(2));
+  const [iAmOpenedOptions] = (0, import_react23.useState)({ ...I_AM_OPENED_EVENT_OPTIONS, detail: { hintId } });
+  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
+  const [isStyleComputed, setIsStyleComputed] = (0, import_react23.useState)(false);
+  const [handleScroll] = (0, import_react23.useState)(new HandleScrollObj(setIsOpen));
+  const [handleClickOutside] = (0, import_react23.useState)(new HandleClickOutsideObj(hintId, setIsOpen));
   const isCallbackExist = typeof onClickCallback === "function";
   const handle = {
     onMouseEnter: () => {
@@ -3095,11 +3210,11 @@ var Hint = ({
     }
   };
   const getHintMarkUp = (className2) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         "data-testid": "test-hint-text",
-        className: (0, import_classnames13.default)("hint__text", `hint__text_${side}`, `hint--${className2}__text`),
+        className: (0, import_classnames14.default)("hint__text", `hint__text_${side}`, `hint--${className2}__text`),
         onMouseEnter: () => {
           if (isHoverableContent) isContentHoveredOuter = true;
         },
@@ -3107,7 +3222,7 @@ var Hint = ({
         onClick: handle.onClick,
         style: { visibility: isStyleComputed ? "visible" : "hidden" },
         children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Spinner_default, { size: "small" }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Spinner_default, { size: "small" }),
           hint,
           children
         ]
@@ -3164,7 +3279,7 @@ var Hint = ({
     if (!hc) return null;
     return (0, import_react_dom2.createPortal)(getHintMarkUp(className2), hc);
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     initHintContainer(hintId, hintContainer);
     const iAmOpenedCallback = (ev) => {
       const event = ev;
@@ -3190,7 +3305,7 @@ var Hint = ({
       }
     };
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     setIsStyleComputed(false);
     setHintContainerStyles();
     onOpenChange?.(isOpen);
@@ -3209,8 +3324,8 @@ var Hint = ({
       }
     };
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { "data-testid": testId, className: (0, import_classnames13.default)("hint", className), ref: hintRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-testid": testId, className: (0, import_classnames14.default)("hint", className), ref: hintRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
         tabIndex: isAccessability ? 0 : -1,
@@ -3219,14 +3334,14 @@ var Hint = ({
         onClick: () => handleOpenType === "click" && (isCallbackExist ? onClickCallback?.() : setIsOpen(!isOpen)),
         onMouseEnter: handle.onMouseEnter,
         onMouseLeave: handle.onMouseLeave,
-        className: (0, import_classnames13.default)("hint__button", { hint__button_active: isOpen }),
+        className: (0, import_classnames14.default)("hint__button", { hint__button_active: isOpen }),
         children: [
-          icon || icon === null || /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-            variant === "outlined" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_feather3.HelpCircle, { width: 16, height: 16, className: "hint__icon outlined" }),
-            variant === "filled" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HelpCircleFilled, { className: "hint__icon filled" }),
-            variant === "warning" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_feather3.AlertTriangle, { className: "hint__icon", color: "#F06D8D", width: 16, height: 16 })
+          icon || icon === null || /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            variant === "outlined" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_feather3.HelpCircle, { width: 16, height: 16, className: "hint__icon outlined" }),
+            variant === "filled" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HelpCircleFilled, { className: "hint__icon filled" }),
+            variant === "warning" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_feather3.AlertTriangle, { className: "hint__icon", color: "#F06D8D", width: 16, height: 16 })
           ] }),
-          label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: (0, import_classnames13.default)("hint__label", { "color--primary": isOpen }), children: typeof label === "string" ? capitalized(label) : label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: (0, import_classnames14.default)("hint__label", { "color--primary": isOpen }), children: typeof label === "string" ? capitalized(label) : label })
         ]
       }
     ),
@@ -3236,7 +3351,7 @@ var Hint = ({
 var Hint_default = Hint;
 
 // src/Atomic/FormElements/Switcher/Switcher.tsx
-var import_classnames14 = __toESM(require("classnames"), 1);
+var import_classnames15 = __toESM(require("classnames"), 1);
 var RC8 = "switcher";
 var Switcher = ({
   label,
@@ -3249,34 +3364,34 @@ var Switcher = ({
   hintSide,
   testId = "switcher"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       "data-testid": testId,
-      className: (0, import_classnames14.default)(RC8, className, { [`${RC8}_disabled`]: disabled }),
+      className: (0, import_classnames15.default)(RC8, className, { [`${RC8}_disabled`]: disabled }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             type: "button",
             "data-testid": `${testId}-button`,
-            className: (0, import_classnames14.default)(`${RC8}__button`),
+            className: (0, import_classnames15.default)(`${RC8}__button`),
             disabled,
             onClick: (e) => onChange(!isActive, e),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "div",
                 {
-                  className: (0, import_classnames14.default)(`${RC8}__button-content`, {
+                  className: (0, import_classnames15.default)(`${RC8}__button-content`, {
                     [`${RC8}__button-content_active`]: isActive
                   }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `${RC8}__ball` })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${RC8}__ball` })
                 }
               ),
-              label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "span",
                 {
-                  className: (0, import_classnames14.default)(`${RC8}__label`, {
+                  className: (0, import_classnames15.default)(`${RC8}__label`, {
                     [`${RC8}__label_bold`]: isLabelBold
                   }),
                   children: label
@@ -3285,102 +3400,13 @@ var Switcher = ({
             ]
           }
         ),
-        hint && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Hint_default, { className: `${RC8}__hint`, hint, side: hintSide })
+        hint && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Hint_default, { className: `${RC8}__hint`, hint, side: hintSide })
       ]
     }
   );
 };
 var Switcher_default = Switcher;
 
-// src/Atomic/FormElements/Datepicker/components/DatepickerCalendar.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var import_classnames15 = __toESM(require("classnames"), 1);
-var import_moment2 = __toESM(require("moment"), 1);
-var import_react24 = require("react");
-var Icon = __toESM(require("react-feather"), 1);
-var DatepickerCalendar = ({
-  date,
-  setDate,
-  startDate,
-  endDate,
-  allowPrev = true,
-  allowNext = true,
-  onClick,
-  onHover,
-  startPrevDate,
-  endPrevDate,
-  limitRange
-}) => {
-  const [days, setDays] = (0, import_react24.useState)({});
-  const title = (0, import_react24.useMemo)(() => `${(0, import_moment2.default)(date).format("MMM")} ${(0, import_moment2.default)(date).format("YYYY")}`, [date]);
-  (0, import_react24.useEffect)(() => {
-    const result = {};
-    const day = (0, import_moment2.default)(date).startOf("month");
-    const daysInMonth = day.daysInMonth();
-    for (let d = 0; d < daysInMonth; d++) {
-      let week = day.week();
-      if (day.month() === 11 && week === 1) week = 53;
-      if (day.month() === 0 && week === 53) week = 0;
-      if (!result[week]) result[week] = {};
-      result[week][day.weekday()] = { date: day.toDate() };
-      day.add(1, "d");
-    }
-    setDays(result);
-  }, [date]);
-  const renderDay = (week, dayOfWeek) => {
-    const day = days[+week]?.[dayOfWeek];
-    const isFutureDay = day && (0, import_moment2.default)(day.date).isAfter((0, import_moment2.default)(), "day");
-    const isPastDay = limitRange ? day && (0, import_moment2.default)(day.date).isBefore((0, import_moment2.default)().subtract(limitRange, "days"), "day") : null;
-    const isRangeEnd = day && ((0, import_moment2.default)(day.date).isSame(startDate, "day") || (0, import_moment2.default)(day.date).isSame((0, import_moment2.default)(endDate).subtract(1, "hour"), "day"));
-    const isRangeInside = day && startDate && endDate && (0, import_moment2.default)(day.date).isAfter(startDate, "day") && (0, import_moment2.default)(day.date).isBefore((0, import_moment2.default)(endDate).subtract(1, "hour"), "day");
-    const isPrevRangeEnd = day && ((0, import_moment2.default)(day.date).isSame(startPrevDate, "day") || (0, import_moment2.default)(day.date).isSame((0, import_moment2.default)(endPrevDate).subtract(1, "day"), "day"));
-    const isPrevRangeInside = day && startPrevDate && endPrevDate && (0, import_moment2.default)(day.date).isAfter(startPrevDate, "day") && (0, import_moment2.default)(day.date).isBefore((0, import_moment2.default)(endPrevDate).subtract(1, "day"), "day");
-    const classNames2 = (0, import_classnames15.default)(
-      "calendar__day",
-      { "calendar__day--clickable": day },
-      { "calendar__day--disabled": isFutureDay || isPastDay },
-      { "calendar__day--range-end": isRangeEnd },
-      { "calendar__day--range-inside": isRangeInside },
-      { "calendar__day--prev-range-end": isPrevRangeEnd },
-      { "calendar__day--prev-range-inside": isPrevRangeInside }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      "div",
-      {
-        className: classNames2,
-        onClick: day && !isFutureDay ? () => onClick(day.date) : void 0,
-        onMouseOver: day && !isFutureDay ? () => onHover(day.date) : void 0,
-        onMouseLeave: () => onHover(null),
-        children: day && day.date.getDate()
-      },
-      `${week}_${dayOfWeek}`
-    );
-  };
-  const handlePrev = () => {
-    setDate((0, import_moment2.default)(date).subtract(1, "month").toDate());
-  };
-  const handleNext = () => {
-    setDate((0, import_moment2.default)(date).add(1, "month").toDate());
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "calendar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "calendar-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "calendar-header__prev", children: allowPrev && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "data-testid": "datepicker-calendar-prev", onClick: handlePrev, "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon.ChevronLeft, { size: 16 }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "calendar-header__title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "calendar-header__next", children: allowNext && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "data-testid": "datepicker-calendar-next", onClick: handleNext, "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon.ChevronRight, { size: 16 }) }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "calendar__week", children: Array.from({ length: 7 }, (_, dayOfWeek) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      "div",
-      {
-        className: "calendar__day calendar__day--title",
-        children: (0, import_moment2.default)().weekday(dayOfWeek).format("dd").charAt(0)
-      },
-      `day-of-week_${dayOfWeek}`
-    )) }),
-    Object.keys(days).map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "calendar__week", children: Array.from({ length: 7 }, (_, dayOfWeek) => renderDay(week, dayOfWeek)) }, `week_${index}`))
-  ] });
-};
-var DatepickerCalendar_default = DatepickerCalendar;
-
 // src/Atomic/FormElements/Datepicker/Datepicker.tsx
 var import_classnames16 = __toESM(require("classnames"), 1);
 var import_moment3 = __toESM(require("moment"), 1);
@@ -3708,6 +3734,9 @@ var Datepicker = ({
 };
 var Datepicker_default = Datepicker;
 
+// src/Atomic/FormElements/Dropdown/index.ts
+var Dropdown_default2 = Dropdown_default;
+
 // src/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 
@@ -5833,6 +5862,12 @@ var FormattedRawSSN = ({
 };
 var FormattedRawSSN_default = FormattedRawSSN;
 
+// src/Atomic/FormElements/FormattedRawSSN/index.ts
+var FormattedRawSSN_default2 = FormattedRawSSN_default;
+
+// src/Atomic/FormElements/Input/index.ts
+var Input_default2 = Input_default;
+
 // src/Atomic/FormElements/InputCalendar/InputCalendar.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 
@@ -6034,6 +6069,9 @@ var InputColor = ({
 };
 var InputColor_default = InputColor;
 
+// src/Atomic/FormElements/InputColor/index.ts
+var InputColor_default2 = InputColor_default;
+
 // src/Atomic/FormElements/InputCurrency/InputCurrency.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var import_classnames29 = __toESM(require("classnames"), 1);
@@ -6187,191 +6225,87 @@ var InputCurrency = ({
 InputCurrency.displayName = "InputCurrency";
 var InputCurrency_default = InputCurrency;
 
-// src/Atomic/FormElements/InputDateRange/dependencies.ts
-var import_moment_timezone3 = __toESM(require("moment-timezone"), 1);
-var import_react43 = require("react");
-var getIsDateValid = (date) => (0, import_moment_timezone3.default)(date).isValid();
-function useClickOutside2(hideComponent, additionalComponent, onlyGetRef) {
-  const ref = (0, import_react43.useRef)(null);
-  const checkCondition = (target) => {
-    if (additionalComponent && additionalComponent?.length) {
-      return !ref.current?.contains(target) && !Array.from(additionalComponent)?.some((item) => item?.contains(target));
-    } else {
-      return !ref.current?.contains(target);
-    }
-  };
-  const handleClickOutside = (0, import_react43.useCallback)(
-    (e) => {
-      const target = e.target;
-      if (checkCondition(target)) hideComponent();
-    },
-    [hideComponent]
-  );
-  (0, import_react43.useEffect)(() => {
-    if (!onlyGetRef) {
-      document.addEventListener("mousedown", handleClickOutside, true);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true);
-      };
-    }
-    return () => {
-    };
-  }, []);
-  return ref;
-}
-function useToggle(initialState) {
-  const [isToggled, setToggle] = (0, import_react43.useState)(Boolean(initialState));
-  const toggle = (0, import_react43.useCallback)(() => setToggle((isOn) => !isOn), []);
-  const toggleOn = (0, import_react43.useCallback)(() => setToggle(true), []);
-  const toggleOff = (0, import_react43.useCallback)(() => setToggle(false), []);
-  return {
-    isToggled,
-    toggle,
-    toggleOn,
-    toggleOff
-  };
-}
-var INTERVALS = {
-  today: {
-    label: "today",
-    start: () => (0, import_moment_timezone3.default)().startOf("day"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  yesterday: {
-    label: "yesterday",
-    start: () => (0, import_moment_timezone3.default)().subtract(1, "day").startOf("day"),
-    end: () => (0, import_moment_timezone3.default)().startOf("day")
-  },
-  thisWeek: {
-    label: "This Week",
-    start: () => (0, import_moment_timezone3.default)().startOf("week"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  lastWeek: {
-    label: "Last Week",
-    start: () => (0, import_moment_timezone3.default)().subtract(1, "week").startOf("week"),
-    end: () => (0, import_moment_timezone3.default)().startOf("week")
-  },
-  last7Days: {
-    label: "Last 7 Days",
-    start: () => (0, import_moment_timezone3.default)().subtract(6, "day").startOf("day"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  last14Days: {
-    label: "Last 14 Days",
-    start: () => (0, import_moment_timezone3.default)().subtract(13, "day").startOf("day"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  last30Days: {
-    label: "Last 30 Days",
-    start: () => (0, import_moment_timezone3.default)().subtract(29, "day").startOf("day"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  thisMonth: {
-    label: "This Month",
-    start: () => (0, import_moment_timezone3.default)().startOf("month"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  lastMonth: {
-    label: "Last Month",
-    start: () => (0, import_moment_timezone3.default)().subtract(1, "month").startOf("month"),
-    end: () => (0, import_moment_timezone3.default)().startOf("month")
-  },
-  last3Months: {
-    label: "Last 3 Months",
-    start: () => (0, import_moment_timezone3.default)().subtract(3, "month").startOf("month"),
-    end: () => (0, import_moment_timezone3.default)().startOf("month")
-  },
-  last6Months: {
-    label: "Last 6 Months",
-    start: () => (0, import_moment_timezone3.default)().subtract(6, "month").startOf("month"),
-    end: () => (0, import_moment_timezone3.default)().startOf("month")
-  },
-  sixMonths: {
-    label: "6 Months",
-    isHidden: true,
-    start: () => (0, import_moment_timezone3.default)().subtract(6, "month"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  thisYear: {
-    label: "This Year",
-    start: () => (0, import_moment_timezone3.default)().startOf("year"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  year: {
-    label: "Year",
-    isHidden: true,
-    start: () => (0, import_moment_timezone3.default)().subtract(1, "year"),
-    end: () => (0, import_moment_timezone3.default)().add(1, "day").startOf("day")
-  },
-  lastYear: {
-    label: "Last Year",
-    start: () => (0, import_moment_timezone3.default)().subtract(1, "year").startOf("year"),
-    end: () => (0, import_moment_timezone3.default)().startOf("year")
-  },
-  allTime: {
-    label: "All Time",
-    start: () => (0, import_moment_timezone3.default)("2022-01-01T00:00:00"),
-    end: () => (0, import_moment_timezone3.default)()
-    // start: () => null,
-    // end: () => null,
-  }
+// src/Atomic/FormElements/InputDateRange/components/DateInput.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// src/Functions/presets/mobileKeyboardTypesPresets.js
+var ALL_KEYBOARD_TYPES = {
+  numeric: { inputMode: "decimal" },
+  email: { inputMode: "email" }
 };
-var ALL_TIME_KEY = "allTime";
-var CUSTOM_INTERVAL_KEY = "customDate";
-var CUSTOM_INTERVAL_KEY_TEXT = "Custom Date";
-var MAIN_FORMAT = "YYYY-MM-DDTHH:mm";
-var MAIN_DATE_FORMAT = "YYYY-MM-DD";
-var MAIN_TIME_FORMAT = "HH:mm";
-function getActualDateRange(inputDateRange) {
-  const getActualIntervalKey = () => {
-    if (inputDateRange?.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
-      return inputDateRange.intervalKey;
-    } else if (inputDateRange?.start && inputDateRange?.end) {
-      for (const [key, interval2] of Object.entries(INTERVALS)) {
-        if ((0, import_moment_timezone3.default)(inputDateRange.start).isSame(interval2.start()) && (0, import_moment_timezone3.default)(inputDateRange.end).isSame(interval2.end())) {
-          return key;
-        }
-      }
-      return CUSTOM_INTERVAL_KEY;
-    }
-    return ALL_TIME_KEY;
-  };
-  const getIntervalDate = (intervalKey) => {
-    if (intervalKey === ALL_TIME_KEY || intervalKey === CUSTOM_INTERVAL_KEY) {
-      return {
-        start: null,
-        end: null,
-        compare: inputDateRange?.compare,
-        startPrevDate: null,
-        endPrevDate: null
-      };
+var NUMERIC_KEYBOARD = {
+  attributesOfNativeInput: ALL_KEYBOARD_TYPES.numeric
+};
+var EMAIL_KEYBOARD = {
+  attributesOfNativeInput: ALL_KEYBOARD_TYPES.email
+};
+
+// src/Atomic/FormElements/InputDateRange/components/DateInput.tsx
+var import_classnames30 = __toESM(require("classnames"), 1);
+var import_moment_timezone3 = __toESM(require("moment-timezone"), 1);
+function handleDateInputOnChange(value) {
+  const replace = (val) => val?.replace(/[^0-9/]/g, "");
+  const input = replace(value);
+  const lastSymbol = input ? input.slice(-1) : "";
+  const previousValue = input ? input.slice(0, input.length - 1) : "";
+  if (value.length > 10 || lastSymbol === "/") return previousValue;
+  return previousValue.length === 2 || previousValue.length === 5 ? `${previousValue}/${lastSymbol}` : input;
+}
+function DateInput({ ref, ...props }) {
+  const {
+    RC: RC36,
+    className,
+    testId,
+    isFocused,
+    disabled,
+    value,
+    date,
+    prepareDate,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyUp
+  } = props;
+  const preparedDate = (() => {
+    const prepareDateDefault = (date2) => (0, import_moment_timezone3.default)(date2).format("MM/DD/YYYY");
+    const output = prepareDate?.(date) ?? prepareDateDefault(date);
+    return (output?.toString?.().toLowerCase() || "") !== "invalid date" ? output : "";
+  })();
+  return isFocused ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    Input_default,
+    {
+      ref,
+      testId,
+      className: (0, import_classnames30.default)(className, `${RC36}-interactive`),
+      value,
+      disabled,
+      onChange: (value2) => onChange(handleDateInputOnChange(value2)),
+      onBlur,
+      onKeyUp,
+      ...NUMERIC_KEYBOARD
     }
-    const actualValues = {
-      start: INTERVALS[intervalKey]?.start()?.format(MAIN_FORMAT),
-      end: INTERVALS[intervalKey]?.end()?.format(MAIN_FORMAT),
-      compare: inputDateRange?.compare
-    };
-    if (actualValues.compare) {
-      const intervalHoursCount = (0, import_moment_timezone3.default)(actualValues.end).diff(
-        actualValues.start,
-        "hours"
-      );
-      actualValues.startPrevDate = (0, import_moment_timezone3.default)(actualValues.start).subtract(intervalHoursCount, "hours").toDate();
-      actualValues.endPrevDate = actualValues.start;
+  ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      className: (0, import_classnames30.default)(className, `${RC36}-emulation`, {
+        [`${RC36}-emulation_disabled`]: disabled
+      }),
+      onClick: disabled ? void 0 : onFocus,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: (0, import_classnames30.default)(""), children: preparedDate })
     }
-    return actualValues;
-  };
-  const interval = getActualIntervalKey();
-  return interval !== CUSTOM_INTERVAL_KEY && interval !== ALL_TIME_KEY ? { intervalKey: interval, ...getIntervalDate(interval) } : { ...inputDateRange, intervalKey: interval };
+  );
 }
+var DateInput_default = DateInput;
 
-// src/Atomic/FormElements/InputDateRange/InputDateRange.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+// src/Atomic/FormElements/InputDateRange/components/Datepicker.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// src/Atomic/FormElements/RangeCalendar/RangeCalendar.js
+var import_jsx_runtime39 = require("react/jsx-runtime");
 
 // src/Atomic/UI/Arrow/Arrow.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var import_classnames30 = __toESM(require("classnames"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_classnames31 = __toESM(require("classnames"), 1);
 var import_react44 = require("react");
 function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
   const ref = (0, import_react44.useRef)(null);
@@ -6385,7 +6319,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
   function renderSVG() {
     if (type === "left") {
       if (isAlt) {
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           "svg",
           {
             "data-testid": testId,
@@ -6396,7 +6330,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
             height: "16",
             viewBox: "0 0 16 16",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "path",
                 {
                   d: "M12.7,8H3.3",
@@ -6407,7 +6341,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
                   strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "path",
                 {
                   d: "M8,3.3L3.3,8L8,12.7",
@@ -6422,7 +6356,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "svg",
         {
           "data-testid": testId,
@@ -6431,7 +6365,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
           viewBox: "0 0 24 24",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "path",
             {
               d: "M15 18L9 12L15 6",
@@ -6445,7 +6379,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
       );
     }
     if (isAlt) {
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "svg",
         {
           "data-testid": testId,
@@ -6455,7 +6389,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
           height: "16",
           viewBox: "0 0 16 16",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "path",
               {
                 d: "M3.3,8h9.3",
@@ -6466,7 +6400,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "path",
               {
                 d: "M8,3.3L12.7,8L8,12.7",
@@ -6481,7 +6415,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "svg",
       {
         "data-testid": testId,
@@ -6490,7 +6424,7 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "path",
           {
             d: "M9 18L15 12L9 6",
@@ -6503,12 +6437,12 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       "data-testid": `arrow--key-${testId}--type-${type}`,
       ref,
-      className: (0, import_classnames30.default)("arrow", `arrow_${type}`, className, {
+      className: (0, import_classnames31.default)("arrow", `arrow_${type}`, className, {
         arrow_disabled: disabled
       }),
       onClick,
@@ -6518,1353 +6452,1456 @@ function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
 }
 var Arrow_default = Arrow;
 
-// src/Atomic/FormElements/InputDateRange/components/OpenedPart.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-
-// src/Functions/useResize.js
-var import_react45 = require("react");
-var useResize = (element) => {
-  const [elemPosition, setElemPosition] = (0, import_react45.useState)("");
-  const onResize = (elemRightPosition) => {
-    if (elemRightPosition > document.documentElement.clientWidth) {
-      return setElemPosition("left");
-    } else setElemPosition("");
-  };
-  (0, import_react45.useEffect)(() => {
-    const elemRightPosition = element?.current?.getBoundingClientRect().right + 20;
-    window.addEventListener("resize", () => onResize(elemRightPosition));
-    return () => {
-      window.removeEventListener("resize", () => setElemPosition(""));
-    };
-  }, []);
-  (0, import_react45.useLayoutEffect)(() => {
-    const elemRightPosition = element?.current?.getBoundingClientRect().right + 20;
-    if (elemRightPosition > document.documentElement.clientWidth) {
-      return setElemPosition("left");
-    }
-  }, []);
-  return { elemPosition };
-};
-
-// src/Atomic/UI/Modal/Modal.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-
-// src/Functions/useKeyPress/useKeyPress.ts
-var import_react46 = require("react");
-function isISuspendProcessing(x) {
-  return getIsOnlyAnObject(x) && Object.values(x).every((v) => typeof v === "function");
-}
-function useKeyPress(targetKey, clamping = true, isForbidden, suspendProcessing) {
-  const [keyPressed, setKeyPressed] = (0, import_react46.useState)(false);
-  const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
-  const downHandler = (0, import_react46.useCallback)(
-    (event) => {
-      const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
-      const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
-      if (key === targetKey && isPressingWithoutAuxiliaryKeys && !safelySuspendProcessing[key]?.(event)) {
-        if (!clamping && repeat) return;
-        setKeyPressed(true);
-      }
+// src/Atomic/FormElements/RangeCalendar/RangeCalendar.js
+var import_react45 = __toESM(require("react"), 1);
+var import_classnames32 = __toESM(require("classnames"), 1);
+var import_moment_timezone4 = __toESM(require("moment-timezone"), 1);
+var RangeCalendar = (props) => {
+  const {
+    className,
+    date,
+    setDate,
+    startDate,
+    endDate,
+    allowPrev = true,
+    allowNext = true,
+    onClick = () => {
     },
-    // ? Намерянно в зависимостях используем именно входной suspendProcessing,
-    // ? хоть в коде используем "безопасный"
-    [clamping, targetKey, suspendProcessing]
-  );
-  const upHandler = (0, import_react46.useCallback)(
-    (event) => {
-      const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
-      const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
-      if (key === targetKey && isPressingWithoutAuxiliaryKeys && !safelySuspendProcessing[key]?.(event)) {
-        if (!clamping && repeat) return;
-        setKeyPressed(false);
-      }
+    onHover = () => {
     },
-    // ? Намерянно в зависимостях используем именно входной suspendProcessing,
-    // ? хоть в коде используем "безопасный"
-    [clamping, targetKey, suspendProcessing]
+    startPrevDate,
+    endPrevDate,
+    limitRange,
+    isShortWeekNames,
+    minDate,
+    maxDate,
+    momentMinDate,
+    momentMaxDate,
+    isDontLimitFuture,
+    testId = "range-calendar"
+  } = props;
+  const [days, setDays] = (0, import_react45.useState)({});
+  const title = (0, import_react45.useMemo)(
+    () => `${(0, import_moment_timezone4.default)(date).format("MMM")} ${(0, import_moment_timezone4.default)(date).format("YYYY")}`,
+    [date]
   );
-  (0, import_react46.useEffect)(
-    () => {
-      const handleDown = (event) => downHandler(event);
-      const handleUp = (event) => upHandler(event);
-      if (!isForbidden) {
-        window.addEventListener("keydown", handleDown);
-        window.addEventListener("keyup", handleUp);
+  (0, import_react45.useEffect)(() => {
+    const result = {};
+    const day = (0, import_moment_timezone4.default)(date).startOf("month");
+    const daysInMonth = day.daysInMonth();
+    for (let d = 0; d < daysInMonth; d += 1) {
+      let week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+      if (!Object.prototype.hasOwnProperty.call(result, week)) {
+        result[week] = {};
       }
-      return () => {
-        window.removeEventListener("keydown", handleDown);
-        window.removeEventListener("keyup", handleUp);
-      };
-    },
-    // ? Намерянно в зависимостях используем именно входной suspendProcessing,
-    // ? хоть в коде используем "безопасный"
-    [downHandler, upHandler, isForbidden, suspendProcessing]
-  );
-  return keyPressed;
-}
-var useKeyPress_default = useKeyPress;
-
-// src/Functions/useKeyPress/useHandleKeyPress.ts
-var import_react47 = require("react");
-function useHandleKeyPress({
-  escCallback,
-  enterCallback,
-  withClamping = true,
-  withEventManagementStructure,
-  suspendProcessing = null
-}) {
-  const { isWithSubmitAndCloseManagement } = withEventManagementStructure || {};
-  const isPressEnter = useKeyPress_default("Enter", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
-  const isPressEscape = useKeyPress_default("Escape", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
-  (0, import_react47.useEffect)(() => {
-    if (!isWithSubmitAndCloseManagement && isPressEscape && typeof escCallback === "function") {
-      escCallback();
-    }
-  }, [isPressEscape, escCallback]);
-  (0, import_react47.useEffect)(() => {
-    if (!isWithSubmitAndCloseManagement && isPressEnter && typeof enterCallback === "function") {
-      enterCallback();
+      result[week][day.weekday()] = { date: day.toDate() };
+      day.add(1, "d");
     }
-  }, [isPressEnter, enterCallback]);
-}
-var useHandleKeyPress_default = useHandleKeyPress;
-
-// src/Atomic/UI/Modal/partials/_constants.ts
-var DEFAULT_EVENT_OPTIONS = Object.freeze({
-  bubbles: true,
-  cancelable: true,
-  composed: false
-});
-var ModalEventsInnerKeys = /* @__PURE__ */ ((ModalEventsInnerKeys2) => {
-  ModalEventsInnerKeys2["iGotAnEnterKeyPress"] = "iGotAnEnterKeyPress";
-  ModalEventsInnerKeys2["iGotAnEscKeyPress"] = "iGotAnEscKeyPress";
-  return ModalEventsInnerKeys2;
-})(ModalEventsInnerKeys || {});
-var EVENTS = Object.freeze({
-  ["iGotAnEnterKeyPress" /* iGotAnEnterKeyPress */]: {
-    innerKey: "iGotAnEnterKeyPress" /* iGotAnEnterKeyPress */,
-    name: "modal:i-got-an-enter-key-press",
-    shortName: "enterIsPressed",
-    middlewareKey: "Enter",
-    options: DEFAULT_EVENT_OPTIONS
-  },
-  ["iGotAnEscKeyPress" /* iGotAnEscKeyPress */]: {
-    innerKey: "iGotAnEscKeyPress" /* iGotAnEscKeyPress */,
-    name: "modal:i-got-an-esc-key-press",
-    shortName: "escIsPressed",
-    middlewareKey: "Escape",
-    options: DEFAULT_EVENT_OPTIONS
-  }
-});
-
-// src/Atomic/UI/Modal/partials/_utils.ts
-function getWithEventManagementStructure(modalId, withEventManagement) {
-  const output = {
-    isWithSubmitAndCloseManagement: false
+    setDays(result);
+  }, [date]);
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[week][dayOfWeek];
+    const isFutureDay = day && (0, import_moment_timezone4.default)(day.date).isAfter((0, import_moment_timezone4.default)(), "day");
+    const isPastDay = limitRange ? day && (0, import_moment_timezone4.default)(day.date).isBefore((0, import_moment_timezone4.default)().subtract(limitRange, "days"), "day") : null;
+    const isRangeStart = day && (0, import_moment_timezone4.default)(day.date).isSame(startDate, "day");
+    const isRangeEnd = day && (0, import_moment_timezone4.default)(day.date).isSame((0, import_moment_timezone4.default)(endDate).subtract(1, "hour"), "day");
+    const isRangeInside = day && startDate && endDate && (0, import_moment_timezone4.default)(day.date).isAfter(startDate, "day") && (0, import_moment_timezone4.default)(day.date).isBefore((0, import_moment_timezone4.default)(endDate).subtract(1, "hour"), "day");
+    const isPrevRangeEnd = day && ((0, import_moment_timezone4.default)(day.date).isSame(startPrevDate, "day") || (0, import_moment_timezone4.default)(day.date).isSame((0, import_moment_timezone4.default)(endPrevDate).subtract(1, "day"), "day"));
+    const isPrevRangeInside = day && startPrevDate && endPrevDate && (0, import_moment_timezone4.default)(day.date).isAfter(startPrevDate, "day") && (0, import_moment_timezone4.default)(day.date).isBefore((0, import_moment_timezone4.default)(endPrevDate).subtract(1, "day"), "day");
+    const classNames2 = (0, import_classnames32.default)(
+      "range-calendar__day",
+      { "range-calendar__day--clickable": day },
+      {
+        "range-calendar__day--disabled": isPastDay || minDate && (0, import_moment_timezone4.default)(day?.date).isBefore(momentMinDate, "day") || !isDontLimitFuture && (maxDate ? (0, import_moment_timezone4.default)(day?.date).isAfter(momentMaxDate) : isFutureDay)
+      },
+      { "range-calendar__day--range-start": isRangeStart },
+      { "range-calendar__day--range-end": isRangeEnd },
+      { "range-calendar__day--range-inside": isRangeInside },
+      { "range-calendar__day--prev-range-end": isPrevRangeEnd },
+      { "range-calendar__day--prev-range-inside": isPrevRangeInside }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "div",
+      {
+        className: classNames2,
+        onClick: day ? (e) => onClick(day.date, e) : null,
+        onMouseOver: day ? () => onHover(day.date) : null,
+        onMouseLeave: () => onHover(null),
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "calendar__day-num", children: day && day.date.getDate() })
+      },
+      `${week}_${dayOfWeek}`
+    );
   };
-  for (const key in output) {
-    if (!modalId) {
-      output[key] = false;
-    } else {
-      output[key] = getIsOnlyAnObject(withEventManagement) ? withEventManagement[key] ?? false : !!withEventManagement;
-    }
-  }
-  return output;
-}
-function getOnKeyPress({
-  id: modalId,
-  onSubmit,
-  onClose,
-  suspendProcessing
-}) {
-  if (!modalId) return null;
-  return function onKeyPress(ev) {
-    const customEvent = ev;
-    const { id: eventId, realEvent } = customEvent.detail || {};
-    const constantInfoAboutCustomEvent = Object.values(EVENTS).find((ev2) => ev2.name === customEvent.type || ev2.shortName === customEvent.type) || {};
-    const middlewareKey = constantInfoAboutCustomEvent.middlewareKey || "incorrectKey";
-    const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
-    if (modalId && eventId && eventId === modalId && !safelySuspendProcessing[middlewareKey]?.(realEvent)) {
-      switch (customEvent.type) {
-        case EVENTS.iGotAnEnterKeyPress.name: {
-          onSubmit?.();
-          break;
-        }
-        case EVENTS.iGotAnEscKeyPress.name: {
-          onClose?.();
-          break;
+  const handlePrev = () => {
+    setDate((0, import_moment_timezone4.default)(date).subtract(1, "month").toDate());
+  };
+  const handleNext = () => {
+    setDate((0, import_moment_timezone4.default)(date).add(1, "month").toDate());
+  };
+  const getFormatedWeekName = (input) => isShortWeekNames ? input.charAt(0) : input;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_classnames32.default)("range-calendar", className), "data-testid": testId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "range-calendar-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Arrow_default,
+        {
+          type: "left",
+          disabled: !allowPrev || minDate && (0, import_moment_timezone4.default)(date).startOf("month").isSameOrBefore(momentMinDate, "months"),
+          onClick: handlePrev,
+          className: "range-calendar-header__prev"
         }
-        default: {
-          break;
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "range-calendar-header__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Arrow_default,
+        {
+          type: "right",
+          disabled: !allowNext || !isDontLimitFuture && (0, import_moment_timezone4.default)(date).startOf("month").isSameOrAfter(
+            maxDate ? momentMaxDate : (0, import_moment_timezone4.default)().add(1, "day").startOf("day"),
+            "months"
+          ),
+          onClick: handleNext,
+          className: "range-calendar-header__next"
         }
-      }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "range-calendar__week range-calendar__week-title", children: [...Array(7).keys()].map((dayOfWeek) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "div",
+        {
+          className: "range-calendar__day range-calendar__day--title",
+          children: getFormatedWeekName((0, import_moment_timezone4.default)().weekday(dayOfWeek).format("dd"))
+        },
+        `day-of-week_${dayOfWeek}`
+      );
+    }) }),
+    Object.keys(days).map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "range-calendar__week", children: [...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek)) }, `week_${index}`))
+  ] });
+};
+var RangeCalendar_default = RangeCalendar;
+
+// src/Atomic/FormElements/InputDateRange/dependencies.ts
+var import_moment_timezone5 = __toESM(require("moment-timezone"), 1);
+var import_react46 = require("react");
+var getIsDateValid = (date) => (0, import_moment_timezone5.default)(date).isValid();
+function useClickOutside2(hideComponent, additionalComponent, onlyGetRef) {
+  const ref = (0, import_react46.useRef)(null);
+  const checkCondition = (target) => {
+    if (additionalComponent && additionalComponent?.length) {
+      return !ref.current?.contains(target) && !Array.from(additionalComponent)?.some((item) => item?.contains(target));
+    } else {
+      return !ref.current?.contains(target);
     }
   };
-}
-function dispatchEventForModalManagement(realEvent, nameOfCustomEvent, uniqueIdOfRecipient, target) {
-  const { repeat, altKey, ctrlKey, shiftKey, metaKey } = realEvent;
-  const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
-  if (!repeat && isPressingWithoutAuxiliaryKeys) {
-    const event = Object.values(EVENTS).find((ev) => ev.name === nameOfCustomEvent || ev.shortName === nameOfCustomEvent);
-    if (event && uniqueIdOfRecipient) {
-      (target ?? document).dispatchEvent(new CustomEvent(event.name, { ...event.options, detail: { id: uniqueIdOfRecipient, realEvent } }));
+  const handleClickOutside = (0, import_react46.useCallback)(
+    (e) => {
+      const target = e.target;
+      if (checkCondition(target)) hideComponent();
+    },
+    [hideComponent]
+  );
+  (0, import_react46.useEffect)(() => {
+    if (!onlyGetRef) {
+      document.addEventListener("mousedown", handleClickOutside, true);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+      };
     }
-  }
+    return () => {
+    };
+  }, []);
+  return ref;
 }
-
-// src/Atomic/UI/Modal/partials/ModalFooter.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var import_classnames31 = __toESM(require("classnames"), 1);
-var import_react48 = require("react");
-var ModalFooter = (0, import_react48.memo)(
-  ({ className = "", children, wrapperRef, testId = "modal-footer" }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      "footer",
-      {
-        "data-testid": testId,
-        ref: wrapperRef,
-        className: (0, import_classnames31.default)("modal__footer", className),
-        role: "contentinfo",
-        "aria-label": "Modal footer",
-        children
-      }
-    );
-  }
-);
-ModalFooter.displayName = "ModalFooter";
-var ModalFooter_default = ModalFooter;
-
-// src/Atomic/UI/Modal/partials/ModalTitle.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var import_classnames32 = __toESM(require("classnames"), 1);
-var import_react49 = require("react");
-var import_react_feather11 = require("react-feather");
-var ModalTitle = (0, import_react49.memo)(
-  ({
-    variant = "primary",
-    children,
-    isForced = false,
-    onClose,
-    closeBtnDisable,
-    noHeaderCloseBtn = false,
-    className,
-    wrapperRef,
-    testId = "modal-title"
-  }) => {
-    const closeModalRef = (0, import_react49.useRef)(onClose);
-    const handleClick = (0, import_react49.useMemo)(() => () => closeModalRef.current?.(), []);
-    (0, import_react49.useLayoutEffect)(() => {
-      closeModalRef.current = closeBtnDisable ? void 0 : onClose;
-    }, [onClose, closeBtnDisable]);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-      "header",
-      {
-        "data-testid": testId,
-        ref: wrapperRef,
-        className: (0, import_classnames32.default)("modal__header", className, {
-          [`modal__header-${variant}`]: variant
-        }),
-        role: "banner",
-        "aria-label": "Modal header",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            "span",
-            {
-              className: (0, import_classnames32.default)("modal__header-title", {
-                [`modal__header-${variant}-title`]: variant
-              }),
-              id: `${testId}-heading`,
-              children
-            }
-          ),
-          !isForced && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: handleClick,
-              className: (0, import_classnames32.default)("modal-close-icon-box", {
-                "modal-close-icon-box-primary": variant === "primary",
-                "modal-close-icon-box--hidden": noHeaderCloseBtn
-              }),
-              "aria-label": "Close modal",
-              title: "Close modal",
-              children: !noHeaderCloseBtn && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_feather11.X, { className: "modal-close-icon", role: "img", "aria-hidden": "true" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-ModalTitle.displayName = "ModalTitle";
-var ModalTitle_default = ModalTitle;
-
-// src/Atomic/UI/Modal/partials/useMobileModal.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var import_react50 = require("react");
-var SCROLL_DIRECTION = {
-  UP: "up",
-  DOWN: "down"
-};
-function useMobileModal({
-  modalRef,
-  withMobileLogic = false,
-  withFixedFooter = false,
-  isOpen = false
-}) {
-  const modalMobileContainerRef = (0, import_react50.useRef)(null);
-  const modalMobileHeaderRef = (0, import_react50.useRef)(null);
-  const modalMobileFooterRef = (0, import_react50.useRef)(null);
-  const modalMobileBodyRef = (0, import_react50.useRef)(null);
-  const { isMobile } = useIsMobile_default();
-  const [modalHeight, setModalHeight] = (0, import_react50.useState)(0);
-  const [modalsLogic, setModalsLogic] = (0, import_react50.useState)({
-    IS_HEADER_HIDDEN: false,
-    IS_HEADER_STICKY: false,
-    IS_FOOTER_HIDDEN: false,
-    IS_FOOTER_STICKY: withFixedFooter
-  });
-  const [modalsLogicProps, setModalsLogicProps] = (0, import_react50.useState)({
-    headerHeight: 0,
-    footerHeight: 0
-  });
-  const [scrollDirection, setScrollDirection] = (0, import_react50.useState)(SCROLL_DIRECTION.UP);
-  const [scrollTopPrev, setScrollTopPrev] = (0, import_react50.useState)(0);
-  const [scrollTop, setScrollTop] = (0, import_react50.useState)(0);
-  const [scrollHeight, setScrollHeight] = (0, import_react50.useState)(1);
-  const [, setContainerScrollHeight] = (0, import_react50.useState)(1);
-  (0, import_react50.useLayoutEffect)(() => {
-    const el = modalMobileContainerRef?.current;
-    if (el) {
-      el.addEventListener("scroll", () => {
-        setScrollTop((scrollTop2) => {
-          if (scrollTop2 !== el.scrollTop) setScrollTopPrev(scrollTop2);
-          return el.scrollTop;
-        });
-      });
-    }
-  }, [modalMobileContainerRef?.current]);
-  (0, import_react50.useEffect)(() => {
-    setScrollDirection(
-      (prevScrollDirection) => scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection
-    );
-  }, [scrollTop, scrollTopPrev]);
-  (0, import_react50.useLayoutEffect)(() => {
-    if (isOpen) {
-      const modalStyle = modalRef?.current ? modalRef?.current.style || window.getComputedStyle(modalRef?.current) : {};
-      const computedModalHeight = modalRef?.current ? modalHeight + Number.parseFloat(modalStyle?.marginTop || "0") : 0;
-      const windowHeight = document.documentElement.clientHeight || window.screen.availHeight || window.screen.height;
-      if (modalMobileContainerRef?.current) {
-        if (computedModalHeight <= windowHeight) {
-          modalMobileContainerRef.current.style.display = "flex";
-          modalMobileContainerRef.current.style.alignItems = "flex-end";
-        } else {
-          modalMobileContainerRef.current?.style?.removeProperty("display");
-          modalMobileContainerRef.current?.style?.removeProperty("align-items");
-        }
-      }
-    }
-  }, [modalsLogicProps, isOpen, isMobile, modalHeight]);
-  (0, import_react50.useLayoutEffect)(() => {
-    if (isMobile && isOpen) {
-      const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;
-      if (newModalHeight && modalHeight !== newModalHeight) {
-        setModalHeight(newModalHeight);
-      }
-    }
-  });
-  (0, import_react50.useEffect)(() => {
-    if (isMobile && withMobileLogic) {
-      const { footerHeight, headerHeight } = modalsLogicProps;
-      setModalsLogic((prevStickyLogic) => ({
-        IS_HEADER_HIDDEN: scrollDirection === SCROLL_DIRECTION.DOWN || scrollTop === 0,
-        IS_HEADER_STICKY: scrollDirection === SCROLL_DIRECTION.UP && scrollTop !== 0 && (scrollTop >= headerHeight || prevStickyLogic.IS_HEADER_STICKY),
-        IS_FOOTER_HIDDEN: !withFixedFooter && (scrollDirection === SCROLL_DIRECTION.UP || scrollHeight === Math.round(scrollTop)),
-        IS_FOOTER_STICKY: withFixedFooter && scrollHeight > 1 || scrollDirection === SCROLL_DIRECTION.DOWN && (scrollHeight - Math.round(scrollTop) >= footerHeight || prevStickyLogic.IS_FOOTER_STICKY)
-      }));
-    }
-  }, [
-    scrollTop,
-    scrollHeight,
-    isMobile,
-    withMobileLogic,
-    scrollDirection,
-    modalsLogicProps,
-    modalHeight,
-    window.innerHeight
-  ]);
-  (0, import_react50.useLayoutEffect)(() => {
-    if (modalMobileHeaderRef?.current?.getBoundingClientRect()?.height !== void 0) {
-      setModalsLogicProps((state) => ({
-        ...state,
-        headerHeight: modalMobileHeaderRef?.current?.getBoundingClientRect()?.height ?? 0
-      }));
-    }
-  }, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);
-  (0, import_react50.useLayoutEffect)(() => {
-    if (modalMobileFooterRef?.current?.getBoundingClientRect()?.height !== void 0) {
-      setModalsLogicProps((state) => ({
-        ...state,
-        footerHeight: modalMobileFooterRef?.current?.getBoundingClientRect()?.height ?? 0
-      }));
-    }
-  }, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);
-  (0, import_react50.useEffect)(() => {
-    if (modalMobileContainerRef?.current) {
-      setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);
-      setScrollHeight(
-        modalMobileContainerRef?.current?.scrollHeight - window.innerHeight
-      );
-    }
-  }, [scrollTop, modalMobileContainerRef?.current, window.innerHeight]);
-  (0, import_react50.useEffect)(() => {
-    window.addEventListener("resize", () => {
-      setContainerScrollHeight((containerScrollHeight) => {
-        setScrollHeight(containerScrollHeight - window.innerHeight);
-        return containerScrollHeight;
-      });
-    });
-  }, []);
-  const renderModal = (0, import_react50.useCallback)(
-    (modal) => {
-      if (!isMobile || !withMobileLogic) return modal;
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "modal-mobile-container", ref: modalMobileContainerRef, children: modal });
-    },
-    [isMobile, withMobileLogic]
-  );
+function useToggle(initialState) {
+  const [isToggled, setToggle] = (0, import_react46.useState)(Boolean(initialState));
+  const toggle = (0, import_react46.useCallback)(() => setToggle((isOn) => !isOn), []);
+  const toggleOn = (0, import_react46.useCallback)(() => setToggle(true), []);
+  const toggleOff = (0, import_react46.useCallback)(() => setToggle(false), []);
   return {
-    modalMobileContainerRef,
-    modalMobileHeaderRef,
-    modalMobileBodyRef,
-    modalMobileFooterRef,
-    MODALS_LOGIC: modalsLogic,
-    SCROLL_DIRECTION,
-    scrollTop,
-    scrollHeight,
-    renderModal,
-    isMobile
+    isToggled,
+    toggle,
+    toggleOn,
+    toggleOff
   };
 }
-
-// src/Atomic/UI/Modal/Modal.tsx
-var import_classnames33 = __toESM(require("classnames"), 1);
-var import_react51 = require("react");
-var attrsForModalBodyDefault = {};
-var KEY_CODE = Object.freeze({
-  ENTER: 13,
-  ESC: 27
-});
-function renderModalTitle({
-  mode,
-  title,
-  onlyTitle
-}) {
-  if (mode && mode !== "default" && !onlyTitle) {
-    return `${mode[0].toUpperCase()}${mode.slice(1)} ${title}`;
+var INTERVALS = {
+  today: {
+    label: "today",
+    start: () => (0, import_moment_timezone5.default)().startOf("day"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  yesterday: {
+    label: "yesterday",
+    start: () => (0, import_moment_timezone5.default)().subtract(1, "day").startOf("day"),
+    end: () => (0, import_moment_timezone5.default)().startOf("day")
+  },
+  thisWeek: {
+    label: "This Week",
+    start: () => (0, import_moment_timezone5.default)().startOf("week"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  lastWeek: {
+    label: "Last Week",
+    start: () => (0, import_moment_timezone5.default)().subtract(1, "week").startOf("week"),
+    end: () => (0, import_moment_timezone5.default)().startOf("week")
+  },
+  last7Days: {
+    label: "Last 7 Days",
+    start: () => (0, import_moment_timezone5.default)().subtract(6, "day").startOf("day"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  last14Days: {
+    label: "Last 14 Days",
+    start: () => (0, import_moment_timezone5.default)().subtract(13, "day").startOf("day"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  last30Days: {
+    label: "Last 30 Days",
+    start: () => (0, import_moment_timezone5.default)().subtract(29, "day").startOf("day"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  thisMonth: {
+    label: "This Month",
+    start: () => (0, import_moment_timezone5.default)().startOf("month"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  lastMonth: {
+    label: "Last Month",
+    start: () => (0, import_moment_timezone5.default)().subtract(1, "month").startOf("month"),
+    end: () => (0, import_moment_timezone5.default)().startOf("month")
+  },
+  last3Months: {
+    label: "Last 3 Months",
+    start: () => (0, import_moment_timezone5.default)().subtract(3, "month").startOf("month"),
+    end: () => (0, import_moment_timezone5.default)().startOf("month")
+  },
+  last6Months: {
+    label: "Last 6 Months",
+    start: () => (0, import_moment_timezone5.default)().subtract(6, "month").startOf("month"),
+    end: () => (0, import_moment_timezone5.default)().startOf("month")
+  },
+  sixMonths: {
+    label: "6 Months",
+    isHidden: true,
+    start: () => (0, import_moment_timezone5.default)().subtract(6, "month"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  thisYear: {
+    label: "This Year",
+    start: () => (0, import_moment_timezone5.default)().startOf("year"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  year: {
+    label: "Year",
+    isHidden: true,
+    start: () => (0, import_moment_timezone5.default)().subtract(1, "year"),
+    end: () => (0, import_moment_timezone5.default)().add(1, "day").startOf("day")
+  },
+  lastYear: {
+    label: "Last Year",
+    start: () => (0, import_moment_timezone5.default)().subtract(1, "year").startOf("year"),
+    end: () => (0, import_moment_timezone5.default)().startOf("year")
+  },
+  allTime: {
+    label: "All Time",
+    start: () => (0, import_moment_timezone5.default)("2022-01-01T00:00:00"),
+    end: () => (0, import_moment_timezone5.default)()
+    // start: () => null,
+    // end: () => null,
   }
-  return title;
-}
-function Modal({
-  ref,
-  id,
-  testId = "modal",
-  zIndex = 100,
-  isOpen,
-  onConfirm,
-  onDecline,
-  closeModal,
-  className,
-  variant = "primary",
-  size,
-  mode,
-  title,
-  onlyTitle,
-  atributesForModalBody = attrsForModalBodyDefault,
-  confirmBtnClassName,
-  confirmBtnLabel,
-  confirmBtnVariant = "primary",
-  confirmBtnDisable,
-  confirmBtnIcon,
-  isConfirmBtnIconPositionRight,
-  noConfirmBtn,
-  forced,
-  closeBtnClassName,
-  closeBtnText,
-  closeBtnVariant,
-  closeBtnDisable,
-  closeBtnIcon,
-  btnClassNames,
-  isCloseBtnIconPositionRight,
-  noCloseBtn,
-  noHeader,
-  noHeaderCloseBtn,
-  customHeader,
-  declineBtnDisable,
-  noFooter,
-  customFooter,
-  withFixedFooter,
-  leftContentOfFooter,
-  isSubmittingByEnter: isSubmittingByEnterOuter = true,
-  isClosingByEsc: isClosingByEscOuter = true,
-  withEventManagement = false,
-  submitOnEnter,
-  closeOnEsc,
-  withMobileLogic,
-  children
-}) {
-  const internalRef = (0, import_react51.useRef)(null);
-  const modalRef = ref || internalRef;
-  const onConfirmRef = (0, import_react51.useRef)(onConfirm);
-  const closeModalRef = (0, import_react51.useRef)(closeModal);
-  const onDeclineRef = (0, import_react51.useRef)(onDecline);
-  const isSubmittingByEnter = submitOnEnter === false ? false : isSubmittingByEnterOuter;
-  const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
-  const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
-  const isUseAutoBlockingForHandlers = withEventManagementStructure.isWithSubmitAndCloseManagement;
-  const isOnConfirmBlocked = typeof onConfirm === "function" && isUseAutoBlockingForHandlers && confirmBtnDisable;
-  const isCloseModalBlocked = typeof closeModal === "function" && isUseAutoBlockingForHandlers && closeBtnDisable;
-  const isOnDeclineBlocked = typeof onDecline === "function" && isUseAutoBlockingForHandlers && declineBtnDisable;
-  const {
-    modalMobileHeaderRef,
-    modalMobileBodyRef,
-    modalMobileFooterRef,
-    MODALS_LOGIC,
-    renderModal,
-    isMobile,
-    scrollTop,
-    scrollHeight
-  } = useMobileModal({
-    withMobileLogic,
-    withFixedFooter,
-    isOpen
-  });
-  const handle = (0, import_react51.useMemo)(() => ({
-    confirm: () => onConfirmRef.current?.(),
-    close: () => closeModalRef.current?.(),
-    decline: () => {
-      if (typeof onDeclineRef.current === "function") onDeclineRef.current();
-      else closeModalRef.current?.();
-    }
-  }), []);
-  const suspendProcessing = {
-    // FIN-12482
-    // ? Чтобы НЕ замыкать рефку на модалку в логике, чтобы потом поискать в контенте все текстэриа,
-    // ? чтобы оценить есть ли среди них сфокусированная - делаем элеГАнтно:
-    // ? оцениваем ev.target, и если target это текстэриа, то вот сейчас то она и сфокусирована,
-    // ? т.е нужно приостановить процессы связанные с нажатием enter.
-    Enter: (ev) => ev?.target?.nodeName === "TEXTAREA"
-    // ? Колбеки опциональны, можно передавать только нужные
-    // Escape: (ev: globalThis.KeyboardEvent) => false,
-  };
-  useHandleKeyPress_default({
-    enterCallback: isSubmittingByEnter && typeof onConfirm === "function" && !confirmBtnDisable ? handle.confirm : void 0,
-    escCallback: isClosingByEsc && typeof closeModal === "function" ? handle.close : void 0,
-    withClamping: false,
-    withEventManagementStructure: {
-      isWithSubmitAndCloseManagement: confirmBtnDisable || withEventManagementStructure.isWithSubmitAndCloseManagement
-    },
-    suspendProcessing
-  });
-  (0, import_react51.useLayoutEffect)(() => {
-    onConfirmRef.current = isOnConfirmBlocked ? void 0 : onConfirm;
-  }, [onConfirm, isOnConfirmBlocked]);
-  (0, import_react51.useLayoutEffect)(() => {
-    closeModalRef.current = isCloseModalBlocked ? void 0 : closeModal;
-  }, [closeModal, isCloseModalBlocked]);
-  (0, import_react51.useLayoutEffect)(() => {
-    onDeclineRef.current = isOnDeclineBlocked ? () => {
-    } : onDecline;
-  }, [onDecline, isOnDeclineBlocked]);
-  (0, import_react51.useEffect)(() => {
-    const outerTarget = getIsOnlyAnObject(withEventManagement) ? withEventManagement.listenersTarget : void 0;
-    const target = outerTarget ?? document;
-    const onKeyPress = getOnKeyPress({ id, onSubmit: handle.confirm, onClose: handle.close, suspendProcessing });
-    if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
-      if (isSubmittingByEnter) target.addEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress);
-      if (isClosingByEsc) target.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
-    }
-    return () => {
-      if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
-        if (isSubmittingByEnter) target.removeEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress);
-        if (isClosingByEsc) target.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
-      }
-    };
-  }, []);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    "div",
-    {
-      id: `${id}`,
-      style: { zIndex },
-      "data-testid": testId,
-      className: "modal-box j5",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": `${testId}-title`,
-      children: renderModal(
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            "div",
-            {
-              "data-testid": `${testId}-overlay`,
-              className: isOpen ? "modal-overlay" : "hidden",
-              onClick: handle.close,
-              role: "presentation"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-            "div",
-            {
-              ref: modalRef,
-              style: { width: typeof size === "number" ? `${size}px` : `${size?.replace("px", "")}px` },
-              className: (0, import_classnames33.default)(className, {
-                "modal": isOpen,
-                "modal--no-header": isOpen && noHeader && !customHeader,
-                "modal-mobile": isOpen && isMobile,
-                "hidden": !isOpen
-              }),
-              children: [
-                customHeader || !noHeader && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  ModalTitle_default,
-                  {
-                    wrapperRef: modalMobileHeaderRef,
-                    className: (0, import_classnames33.default)({
-                      "modal__header--hidden": MODALS_LOGIC.IS_HEADER_HIDDEN,
-                      "modal__header--sticky": !MODALS_LOGIC.IS_HEADER_HIDDEN && MODALS_LOGIC.IS_HEADER_STICKY
-                    }),
-                    variant,
-                    isForced: forced,
-                    onClose: handle.close,
-                    noHeaderCloseBtn,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { id: `${testId}-title`, children: renderModalTitle({ mode, title, onlyTitle }) })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  "div",
-                  {
-                    ...atributesForModalBody,
-                    ref: modalMobileBodyRef,
-                    className: (0, import_classnames33.default)("modal__body", {
-                      "modal__body--no-footer": noFooter
-                    }),
-                    role: "document",
-                    children
-                  }
-                ),
-                (!noFooter || customFooter) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  ModalFooter_default,
-                  {
-                    wrapperRef: modalMobileFooterRef,
-                    className: (0, import_classnames33.default)({
-                      "modal__footer--hidden": MODALS_LOGIC.IS_FOOTER_HIDDEN,
-                      "modal__footer--sticky": !MODALS_LOGIC.IS_FOOTER_HIDDEN && MODALS_LOGIC.IS_FOOTER_STICKY && scrollTop !== scrollHeight,
-                      "modal__footer_with-left-content": leftContentOfFooter
-                    }),
-                    children: customFooter || /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-                      leftContentOfFooter,
-                      (!noCloseBtn || !noConfirmBtn) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "modal__buttons-block", children: [
-                        !noCloseBtn && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                          Button_default,
-                          {
-                            testId: "modal",
-                            className: (0, import_classnames33.default)(closeBtnClassName, btnClassNames),
-                            variant: closeBtnVariant || "dark-outline",
-                            onClick: handle.decline,
-                            label: closeBtnText || "Cancel",
-                            disabled: typeof onDecline === "function" ? declineBtnDisable : closeBtnDisable,
-                            icon: closeBtnIcon,
-                            isIconRight: isCloseBtnIconPositionRight,
-                            tabIndex: 1,
-                            "aria-label": "Close modal"
-                          }
-                        ),
-                        !noConfirmBtn && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                          Button_default,
-                          {
-                            testId: "modal",
-                            onClick: handle.confirm,
-                            label: confirmBtnLabel || mode && mode?.[0].toUpperCase() + mode?.slice(1) || "Apply",
-                            className: (0, import_classnames33.default)("ml5", confirmBtnClassName, btnClassNames),
-                            variant: confirmBtnVariant,
-                            disabled: confirmBtnDisable,
-                            icon: confirmBtnIcon,
-                            isIconRight: isConfirmBtnIconPositionRight,
-                            "aria-label": "Confirm modal"
-                          }
-                        )
-                      ] })
-                    ] })
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      )
+};
+var ALL_TIME_KEY = "allTime";
+var CUSTOM_INTERVAL_KEY = "customDate";
+var CUSTOM_INTERVAL_KEY_TEXT = "Custom Date";
+var MAIN_FORMAT = "YYYY-MM-DDTHH:mm";
+var MAIN_DATE_FORMAT = "YYYY-MM-DD";
+var MAIN_TIME_FORMAT = "HH:mm";
+function getActualDateRange(inputDateRange) {
+  const getActualIntervalKey = () => {
+    if (inputDateRange?.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
+      return inputDateRange.intervalKey;
+    } else if (inputDateRange?.start && inputDateRange?.end) {
+      for (const [key, interval2] of Object.entries(INTERVALS)) {
+        if ((0, import_moment_timezone5.default)(inputDateRange.start).isSame(interval2.start()) && (0, import_moment_timezone5.default)(inputDateRange.end).isSame(interval2.end())) {
+          return key;
+        }
+      }
+      return CUSTOM_INTERVAL_KEY;
     }
-  );
+    return ALL_TIME_KEY;
+  };
+  const getIntervalDate = (intervalKey) => {
+    if (intervalKey === ALL_TIME_KEY || intervalKey === CUSTOM_INTERVAL_KEY) {
+      return {
+        start: null,
+        end: null,
+        compare: inputDateRange?.compare,
+        startPrevDate: null,
+        endPrevDate: null
+      };
+    }
+    const actualValues = {
+      start: INTERVALS[intervalKey]?.start()?.format(MAIN_FORMAT),
+      end: INTERVALS[intervalKey]?.end()?.format(MAIN_FORMAT),
+      compare: inputDateRange?.compare
+    };
+    if (actualValues.compare) {
+      const intervalHoursCount = (0, import_moment_timezone5.default)(actualValues.end).diff(
+        actualValues.start,
+        "hours"
+      );
+      actualValues.startPrevDate = (0, import_moment_timezone5.default)(actualValues.start).subtract(intervalHoursCount, "hours").toDate();
+      actualValues.endPrevDate = actualValues.start;
+    }
+    return actualValues;
+  };
+  const interval = getActualIntervalKey();
+  return interval !== CUSTOM_INTERVAL_KEY && interval !== ALL_TIME_KEY ? { intervalKey: interval, ...getIntervalDate(interval) } : { ...inputDateRange, intervalKey: interval };
 }
-Modal.displayName = "Modal";
-var Modal_default = Modal;
 
 // src/Atomic/FormElements/InputDateRange/components/Datepicker.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-
-// src/Atomic/FormElements/RangeCalendar/RangeCalendar.js
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var import_react52 = __toESM(require("react"), 1);
-var import_classnames34 = __toESM(require("classnames"), 1);
-var import_moment_timezone4 = __toESM(require("moment-timezone"), 1);
-var RangeCalendar = (props) => {
+var import_classnames33 = __toESM(require("classnames"), 1);
+var import_moment_timezone6 = __toESM(require("moment-timezone"), 1);
+var import_react47 = require("react");
+var DATE_INPUT_FORMAT = "MM/DD/YYYY";
+function padTime2(time) {
+  return `${time.toString().padStart(2, "0")}:00`;
+}
+var Datepicker2 = (props) => {
   const {
+    txt,
     className,
-    date,
-    setDate,
-    startDate,
-    endDate,
-    allowPrev = true,
-    allowNext = true,
-    onClick = () => {
-    },
-    onHover = () => {
-    },
-    startPrevDate,
-    endPrevDate,
+    buttonsTypes = {},
+    values = {},
+    onChange,
+    onChangeMobile,
+    onChangeCompare,
+    onCancel,
+    getSelectedMode,
+    onChangeInterval,
+    isCompareHidden,
     limitRange,
+    setActiveInterval,
     isShortWeekNames,
     minDate,
     maxDate,
     momentMinDate,
     momentMaxDate,
     isDontLimitFuture,
-    testId = "range-calendar"
+    testId,
+    mainId,
+    withMobileLogic,
+    isDoNotPullOutListOfMainContainer
   } = props;
-  const [days, setDays] = (0, import_react52.useState)({});
-  const title = (0, import_react52.useMemo)(
-    () => `${(0, import_moment_timezone4.default)(date).format("MMM")} ${(0, import_moment_timezone4.default)(date).format("YYYY")}`,
-    [date]
+  const { start = null, end = null, compare: compare2 = false } = values;
+  const startDateInputRef = (0, import_react47.useRef)(null);
+  const endDateInputRef = (0, import_react47.useRef)(null);
+  const [startDate, setStartDate] = (0, import_react47.useState)(
+    getIsDateValid(start) ? (0, import_moment_timezone6.default)(start) : ""
   );
-  (0, import_react52.useEffect)(() => {
-    const result = {};
-    const day = (0, import_moment_timezone4.default)(date).startOf("month");
-    const daysInMonth = day.daysInMonth();
-    for (let d = 0; d < daysInMonth; d += 1) {
-      let week = day.week();
-      if (day.month() === 11 && week === 1) week = 53;
-      if (day.month() === 0 && week === 53) week = 0;
-      if (!Object.prototype.hasOwnProperty.call(result, week)) {
-        result[week] = {};
+  const [endDate, setEndDate] = (0, import_react47.useState)(
+    getIsDateValid(end) ? (0, import_moment_timezone6.default)(end) : ""
+  );
+  const dateInterval = getSelectedMode({ start: startDate, end: endDate });
+  const [startDateInput, setStartDateInput] = (0, import_react47.useState)(null);
+  const [endDateInput, setEndDateInput] = (0, import_react47.useState)(null);
+  const [isStartFocused, setIsStartFocused] = (0, import_react47.useState)(false);
+  const [isEndFocused, setIsEndFocused] = (0, import_react47.useState)(false);
+  const [startHour, setStartHour] = (0, import_react47.useState)(start ? (0, import_moment_timezone6.default)(start).hour() : 0);
+  const [endHour, setEndHour] = (0, import_react47.useState)(end ? (0, import_moment_timezone6.default)(end).hour() : 0);
+  const [isCompare, setIsCompare] = (0, import_react47.useState)(compare2);
+  const [date1, setDate1] = (0, import_react47.useState)(
+    start ? (0, import_moment_timezone6.default)(start) : (0, import_moment_timezone6.default)().subtract(1, "month")
+  );
+  const [date2, setDate2] = (0, import_react47.useState)(end ? (0, import_moment_timezone6.default)(end) : (0, import_moment_timezone6.default)());
+  const isNearby = (0, import_react47.useMemo)(
+    () => (0, import_moment_timezone6.default)(date2).subtract(1, "month").isSame((0, import_moment_timezone6.default)(date1), "month"),
+    [date1, date2]
+  );
+  const isPreviousPeriodShowed = (0, import_react47.useMemo)(
+    () => isCompare && !isCompareHidden && startDate && endDate,
+    [startDate, endDate, isCompare]
+  );
+  const prevEndHour = (0, import_react47.useRef)(endHour);
+  const startPrevDate = (0, import_react47.useMemo)(() => {
+    if (isPreviousPeriodShowed) {
+      const intervalHoursCount = (0, import_moment_timezone6.default)(endDate).diff(startDate, "hours");
+      return (0, import_moment_timezone6.default)(startDate).subtract(intervalHoursCount, "hours").toDate();
+    } else {
+      return null;
+    }
+  }, [startDate, endDate, isCompare]);
+  const endPrevDate = (0, import_react47.useMemo)(() => {
+    if (isPreviousPeriodShowed) {
+      return startDate;
+    } else {
+      return null;
+    }
+  }, [startDate, endDate, isCompare]);
+  const title = (0, import_react47.useMemo)(() => {
+    if (isCompare && !isCompareHidden && startDate && endDate) {
+      return `${(0, import_moment_timezone6.default)(startPrevDate).format("ll")} (${(0, import_moment_timezone6.default)(startPrevDate).format(MAIN_TIME_FORMAT)}) - ${(0, import_moment_timezone6.default)(
+        endPrevDate
+      ).format("ll")} (${(0, import_moment_timezone6.default)(endPrevDate).format(MAIN_TIME_FORMAT)})`;
+    } else {
+      return "";
+    }
+  }, [startDate, endDate, isCompare]);
+  const subtractDay = (date) => endHour === 0 ? (0, import_moment_timezone6.default)(date).subtract(1, "days") : (0, import_moment_timezone6.default)(date);
+  const addDay = (date) => endHour === 0 ? (0, import_moment_timezone6.default)(date).add(1, "days") : (0, import_moment_timezone6.default)(date);
+  const getCorrectedDateForDateInput = (key, date) => {
+    if (key === "startDateInput") return (0, import_moment_timezone6.default)(date);
+    return subtractDay((0, import_moment_timezone6.default)(date));
+  };
+  const setInterval2 = () => {
+    setActiveInterval?.(
+      getActualDateRange({ start: startDate, end: endDate }).intervalKey
+    );
+  };
+  const handleClick = (date) => {
+    prevEndHour.current = 0;
+    if (!startDate || startDate && endDate && !((0, import_moment_timezone6.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
+      setStartDate((0, import_moment_timezone6.default)(date).startOf("day"));
+      setEndDate((0, import_moment_timezone6.default)(date).add(1, "d").startOf("day"));
+      setStartHour(0);
+      setEndHour(0);
+    } else if ((0, import_moment_timezone6.default)(date).isBefore((0, import_moment_timezone6.default)(startDate), "day")) {
+      setEndDate((0, import_moment_timezone6.default)(startDate).add(1, "d").startOf("day"));
+      setStartDate((0, import_moment_timezone6.default)(date).set("hour", Number.parseInt(startHour.toString(), 10)));
+    } else if ((0, import_moment_timezone6.default)(date).isAfter((0, import_moment_timezone6.default)(startDate), "day")) {
+      setEndDate((0, import_moment_timezone6.default)(date).add(1, "d").startOf("day"));
+    }
+  };
+  const handleChangeStartHour = (val) => {
+    setStartHour(Number(val));
+    setStartDate((0, import_moment_timezone6.default)(startDate || (0, import_moment_timezone6.default)()).set("hour", Number(val)));
+  };
+  const handleChangeEndHour = (val) => {
+    const newHour = Number(val);
+    setEndHour(newHour);
+    let newEndDate = (0, import_moment_timezone6.default)();
+    if (endDate) {
+      if (prevEndHour.current === 0 && newHour !== 0) {
+        newEndDate = (0, import_moment_timezone6.default)(endDate).subtract(1, "days");
+      } else if (prevEndHour.current !== 0 && newHour === 0) {
+        newEndDate = (0, import_moment_timezone6.default)(endDate).add(1, "days");
       }
-      result[week][day.weekday()] = { date: day.toDate() };
-      day.add(1, "d");
     }
-    setDays(result);
-  }, [date]);
-  const renderDay = (week, dayOfWeek) => {
-    const day = days[week][dayOfWeek];
-    const isFutureDay = day && (0, import_moment_timezone4.default)(day.date).isAfter((0, import_moment_timezone4.default)(), "day");
-    const isPastDay = limitRange ? day && (0, import_moment_timezone4.default)(day.date).isBefore((0, import_moment_timezone4.default)().subtract(limitRange, "days"), "day") : null;
-    const isRangeStart = day && (0, import_moment_timezone4.default)(day.date).isSame(startDate, "day");
-    const isRangeEnd = day && (0, import_moment_timezone4.default)(day.date).isSame((0, import_moment_timezone4.default)(endDate).subtract(1, "hour"), "day");
-    const isRangeInside = day && startDate && endDate && (0, import_moment_timezone4.default)(day.date).isAfter(startDate, "day") && (0, import_moment_timezone4.default)(day.date).isBefore((0, import_moment_timezone4.default)(endDate).subtract(1, "hour"), "day");
-    const isPrevRangeEnd = day && ((0, import_moment_timezone4.default)(day.date).isSame(startPrevDate, "day") || (0, import_moment_timezone4.default)(day.date).isSame((0, import_moment_timezone4.default)(endPrevDate).subtract(1, "day"), "day"));
-    const isPrevRangeInside = day && startPrevDate && endPrevDate && (0, import_moment_timezone4.default)(day.date).isAfter(startPrevDate, "day") && (0, import_moment_timezone4.default)(day.date).isBefore((0, import_moment_timezone4.default)(endPrevDate).subtract(1, "day"), "day");
-    const classNames2 = (0, import_classnames34.default)(
-      "range-calendar__day",
-      { "range-calendar__day--clickable": day },
+    prevEndHour.current = newHour;
+    setEndDate((0, import_moment_timezone6.default)(newEndDate).set("hour", newHour));
+  };
+  const handleDateInputFocus = (key, e) => {
+    const changeFlag = key === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+    const set = key === "startDateInput" ? setStartDateInput : setEndDateInput;
+    const date = key === "startDateInput" ? startDate : endDate;
+    changeFlag(true);
+    set(date ? getCorrectedDateForDateInput(key, date).format("L") : "");
+    setTimeout(() => {
+      const defaultTarget = key === "startDateInput" ? startDateInputRef.current : endDateInputRef.current;
+      const target = e?.target ?? defaultTarget;
+      target.select?.();
+    }, 0);
+  };
+  const doBlur = (type, e) => {
+    const executor = type === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+    e.target.blur();
+    executor(false);
+  };
+  const processOverflow = (newDateAsString, valueForRollback, key) => {
+    const newDateAsMomentObj = (0, import_moment_timezone6.default)(newDateAsString, DATE_INPUT_FORMAT);
+    if (!newDateAsMomentObj.isValid()) {
+      return valueForRollback;
+    } else {
+      const beforeOfFuture = (0, import_moment_timezone6.default)().endOf("day");
+      const hour = key === "startDateInput" ? startHour : endHour;
+      let output;
+      if (minDate && newDateAsMomentObj.isBefore(momentMinDate)) {
+        output = momentMinDate;
+      } else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate)) {
+        output = momentMaxDate;
+      } else if (!isDontLimitFuture && newDateAsMomentObj.isAfter(beforeOfFuture)) {
+        output = beforeOfFuture.startOf("day");
+      } else {
+        output = newDateAsMomentObj;
+      }
+      if (key === "endDateInput") {
+        output = addDay(output);
+      }
+      return output.set("hour", Number.parseInt(hour.toString(), 10));
+    }
+  };
+  const handleDateInputBlur = (key, e) => {
+    const reserveValue = key === "startDateInput" ? startDateInput : endDateInput;
+    const valueForRollback = key === "startDateInput" ? startDate : endDate;
+    const execute = key === "startDateInput" ? setStartDate : setEndDate;
+    const executeForCalendar = key === "startDateInput" ? setDate1 : setDate2;
+    const prepareValueForCalendar = (newDate) => {
+      if (key === "endDateInput") return newDate;
+      return (0, import_moment_timezone6.default)(newDate).isSameOrAfter((0, import_moment_timezone6.default)(date2), "month") ? (0, import_moment_timezone6.default)(date2).subtract(1, "month") : (0, import_moment_timezone6.default)(newDate);
+    };
+    const newDateValue = e?.target?.value ?? reserveValue;
+    const processedNewDate = processOverflow(
+      newDateValue,
+      valueForRollback,
+      key
+    );
+    execute(processedNewDate);
+    executeForCalendar(prepareValueForCalendar(processedNewDate));
+    doBlur(key, e);
+  };
+  const handleKeyPressed = (code, e, type) => {
+    if (code === 13) {
+      const syntheticEvent = {
+        target: e.target,
+        relatedTarget: null
+      };
+      handleDateInputBlur(type, syntheticEvent);
+    }
+    if (code === 27) doBlur(type, e);
+  };
+  const getStartHourItems = () => [...Array.from({ length: 24 }).keys()].map((hour) => ({
+    label: padTime2(hour),
+    value: hour,
+    disabled: (0, import_moment_timezone6.default)(startDate).isSame(endDate, "day") && endHour <= hour
+  }));
+  const getEndHourItems = () => [...Array.from({ length: 24 }).keys()].map((hour) => ({
+    label: padTime2(hour + 1),
+    value: hour === 23 ? 0 : hour + 1,
+    disabled: ((0, import_moment_timezone6.default)(startDate).isSame(endDate, "day") || (0, import_moment_timezone6.default)(startDate).isSame(
+      (0, import_moment_timezone6.default)(endDate).subtract(1, "days"),
+      "day"
+    ) && endHour === 0) && hour < startHour
+  }));
+  const renderButtons = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      Button_default,
       {
-        "range-calendar__day--disabled": isPastDay || minDate && (0, import_moment_timezone4.default)(day?.date).isBefore(momentMinDate, "day") || !isDontLimitFuture && (maxDate ? (0, import_moment_timezone4.default)(day?.date).isAfter(momentMaxDate) : isFutureDay)
-      },
-      { "range-calendar__day--range-start": isRangeStart },
-      { "range-calendar__day--range-end": isRangeEnd },
-      { "range-calendar__day--range-inside": isRangeInside },
-      { "range-calendar__day--prev-range-end": isPrevRangeEnd },
-      { "range-calendar__day--prev-range-inside": isPrevRangeInside }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      "div",
+        className: "date-picker__button",
+        onClick: () => onCancel?.(),
+        variant: buttonsTypes?.cancel,
+        children: txt?.buttons?.cancel || "Cancel"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      Button_default,
       {
-        className: classNames2,
-        onClick: day ? (e) => onClick(day.date, e) : null,
-        onMouseOver: day ? () => onHover(day.date) : null,
-        onMouseLeave: () => onHover(null),
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "calendar__day-num", children: day && day.date.getDate() })
-      },
-      `${week}_${dayOfWeek}`
-    );
-  };
-  const handlePrev = () => {
-    setDate((0, import_moment_timezone4.default)(date).subtract(1, "month").toDate());
-  };
-  const handleNext = () => {
-    setDate((0, import_moment_timezone4.default)(date).add(1, "month").toDate());
+        className: "date-picker__button",
+        variant: buttonsTypes?.apply,
+        disabled: !startDate || !endDate,
+        onClick: () => onChange?.({
+          start: (0, import_moment_timezone6.default)(startDate).format(MAIN_FORMAT),
+          end: (0, import_moment_timezone6.default)(endDate).format(MAIN_FORMAT),
+          startPrevDate: (0, import_moment_timezone6.default)(startPrevDate).format(MAIN_FORMAT),
+          endPrevDate: (0, import_moment_timezone6.default)(endPrevDate).format(MAIN_FORMAT),
+          compare: isCompare
+        }),
+        children: txt?.buttons?.apply || "apply"
+      }
+    )
+  ] });
+  const renderPreviousPeriod = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    txt?.labels?.previousPeriod || "",
+    ":",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "date-picker__previous-period-interval", children: title })
+  ] });
+  (0, import_react47.useEffect)(() => {
+    if ((0, import_moment_timezone6.default)(startDate).isSameOrAfter(endDate)) {
+      setStartDate((0, import_moment_timezone6.default)(endDate).subtract(1, "d"));
+      setDate1((0, import_moment_timezone6.default)(endDate).subtract(1, "d"));
+    }
+  }, [startDate]);
+  (0, import_react47.useEffect)(() => {
+    if ((0, import_moment_timezone6.default)(endDate).isSameOrBefore(startDate)) {
+      setEndDate((0, import_moment_timezone6.default)(startDate).add(1, "d"));
+      setDate2((0, import_moment_timezone6.default)(startDate).add(1, "d"));
+    }
+  }, [endDate]);
+  (0, import_react47.useEffect)(() => {
+    if ((0, import_moment_timezone6.default)(startDate).isBefore((0, import_moment_timezone6.default)(endDate), "month")) {
+      setDate1((0, import_moment_timezone6.default)(startDate));
+      setDate2((0, import_moment_timezone6.default)(endDate));
+    }
+    setInterval2();
+  }, [startDate, endDate]);
+  (0, import_react47.useEffect)(() => {
+    if ((0, import_moment_timezone6.default)(date1).isSameOrAfter((0, import_moment_timezone6.default)(date2), "month") && !withMobileLogic) {
+      setDate1((0, import_moment_timezone6.default)(date2).subtract(1, "month"));
+    }
+  }, [date1, date2]);
+  (0, import_react47.useEffect)(() => {
+    onChangeInterval(dateInterval);
+  }, [dateInterval]);
+  (0, import_react47.useEffect)(() => {
+    if (typeof onChangeMobile === "function") {
+      onChangeMobile({
+        start: (0, import_moment_timezone6.default)(startDate).format(MAIN_FORMAT),
+        end: (0, import_moment_timezone6.default)(endDate).format(MAIN_FORMAT),
+        startPrevDate: (0, import_moment_timezone6.default)(startPrevDate).format(MAIN_FORMAT),
+        endPrevDate: (0, import_moment_timezone6.default)(endPrevDate).format(MAIN_FORMAT),
+        compare: isCompare
+      });
+    }
+  }, [startDate, endDate, startPrevDate, endPrevDate, isCompare]);
+  const renderRowStart = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__date-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        DateInput_default,
+        {
+          ref: startDateInputRef,
+          testId: `datepicker-${testId}_start-date-input`,
+          RC: "date-picker__date-input",
+          className: (0, import_classnames33.default)("date-picker__date-input"),
+          isFocused: isStartFocused,
+          value: startDateInput,
+          date: getCorrectedDateForDateInput("startDateInput", startDate),
+          disabled: !startDate,
+          onChange: setStartDateInput,
+          onFocus: (e) => handleDateInputFocus("startDateInput", e),
+          onBlur: (e) => handleDateInputBlur("startDateInput", e),
+          onKeyUp: (code, e) => handleKeyPressed(+code, e, "startDateInput")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        Dropdown_default,
+        {
+          testId,
+          id: `datepicker-id-${mainId}_start-hour-select-input`,
+          className: (0, import_classnames33.default)("date-picker__hour-select-input"),
+          onChange: (value) => handleChangeStartHour(value),
+          value: startHour,
+          options: getStartHourItems(),
+          disabled: !startDate,
+          isDoNotPullOutListOfMainContainer,
+          withMobileLogic
+        }
+      )
+    ] });
   };
-  const getFormatedWeekName = (input) => isShortWeekNames ? input.charAt(0) : input;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_classnames34.default)("range-calendar", className), "data-testid": testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "range-calendar-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        Arrow_default,
+  const renderRowEnd = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__date-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        DateInput_default,
         {
-          type: "left",
-          disabled: !allowPrev || minDate && (0, import_moment_timezone4.default)(date).startOf("month").isSameOrBefore(momentMinDate, "months"),
-          onClick: handlePrev,
-          className: "range-calendar-header__prev"
+          ref: endDateInputRef,
+          testId: `datepicker-${testId}_start-date-input`,
+          RC: "date-picker__date-input",
+          className: (0, import_classnames33.default)("date-picker__date-input"),
+          isFocused: isEndFocused,
+          value: endDateInput,
+          date: getCorrectedDateForDateInput("endDateInput", endDate),
+          disabled: !endDate,
+          onChange: setEndDateInput,
+          onFocus: (e) => handleDateInputFocus("endDateInput", e),
+          onBlur: (e) => handleDateInputBlur("endDateInput", e),
+          onKeyUp: (code, e) => handleKeyPressed(+code, e, "endDateInput")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "range-calendar-header__title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        Arrow_default,
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        Dropdown_default,
         {
-          type: "right",
-          disabled: !allowNext || !isDontLimitFuture && (0, import_moment_timezone4.default)(date).startOf("month").isSameOrAfter(
-            maxDate ? momentMaxDate : (0, import_moment_timezone4.default)().add(1, "day").startOf("day"),
-            "months"
-          ),
-          onClick: handleNext,
-          className: "range-calendar-header__next"
+          testId,
+          id: `datepicker-id-${mainId}_end-hour-select-input`,
+          className: (0, import_classnames33.default)("date-picker__hour-select-input"),
+          onChange: (value) => handleChangeEndHour(value),
+          value: endHour,
+          options: getEndHourItems(),
+          disabled: !endDate,
+          isDoNotPullOutListOfMainContainer,
+          withMobileLogic
         }
       )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "range-calendar__week range-calendar__week-title", children: [...Array(7).keys()].map((dayOfWeek) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    ] });
+  };
+  const renderCalendarStart = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      RangeCalendar_default,
+      {
+        testId,
+        className: "date-picker__calendar",
+        date: date1,
+        setDate: setDate1,
+        allowNext: withMobileLogic ? !(0, import_moment_timezone6.default)(date1).startOf("month").isSameOrAfter((0, import_moment_timezone6.default)().startOf("day"), "months") : !isNearby,
+        startDate,
+        endDate,
+        startPrevDate,
+        endPrevDate,
+        onClick: handleClick,
+        limitRange,
+        isShortWeekNames,
+        minDate,
+        maxDate,
+        momentMinDate,
+        momentMaxDate
+      }
+    );
+  };
+  const renderCalendarEnd = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      RangeCalendar_default,
+      {
+        className: "date-picker__calendar",
+        date: date2,
+        setDate: setDate2,
+        allowPrev: !isNearby,
+        startDate,
+        endDate,
+        startPrevDate,
+        endPrevDate,
+        onClick: handleClick,
+        isShortWeekNames,
+        minDate,
+        maxDate,
+        momentMinDate,
+        momentMaxDate,
+        isDontLimitFuture
+      }
+    );
+  };
+  const render = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: (0, import_classnames33.default)("date-picker", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__inputs-block", children: [
+          renderRowStart(),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__inputs-separator date-picker__header--gray", children: "\u2014" }),
+          renderRowEnd()
+        ] }),
+        isCompare && !isCompareHidden && startDate && endDate && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__previous-period", children: renderPreviousPeriod() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__calendars", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__calendars-wrapper", children: [
+        renderCalendarStart(),
+        renderCalendarEnd()
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "div",
         {
-          className: "range-calendar__day range-calendar__day--title",
-          children: getFormatedWeekName((0, import_moment_timezone4.default)().weekday(dayOfWeek).format("dd"))
-        },
-        `day-of-week_${dayOfWeek}`
-      );
-    }) }),
-    Object.keys(days).map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "range-calendar__week", children: [...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek)) }, `week_${index}`))
-  ] });
+          className: (0, import_classnames33.default)("date-picker__footer", {
+            "date-picker__footer_once-element": isCompareHidden
+          }),
+          children: [
+            !isCompareHidden ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__compare-block", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mr5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              Switcher_default,
+              {
+                label: txt?.labels?.compare || "Compare",
+                isActive: isCompare,
+                onChange: () => {
+                  onChangeCompare?.(!isCompare);
+                  setIsCompare((state) => !state);
+                }
+              }
+            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__buttons-block", children: renderButtons() })
+          ]
+        }
+      )
+    ] });
+  };
+  const renderMobile = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: (0, import_classnames33.default)("date-picker", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "date-picker__inputs-block", children: [
+          renderRowStart(),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__inputs-separator date-picker__header--gray", children: "\u2014" }),
+          renderRowEnd()
+        ] }),
+        isCompare && !isCompareHidden && startDate && endDate && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__previous-period", children: renderPreviousPeriod() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__calendars", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "date-picker__calendars-wrapper", children: renderCalendarStart() }) })
+    ] });
+  };
+  return withMobileLogic ? renderMobile() : render();
 };
-var RangeCalendar_default = RangeCalendar;
-
-// src/Atomic/FormElements/InputDateRange/components/DateInput.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var Datepicker_default2 = Datepicker2;
 
-// src/Functions/presets/mobileKeyboardTypesPresets.js
-var ALL_KEYBOARD_TYPES = {
-  numeric: { inputMode: "decimal" },
-  email: { inputMode: "email" }
-};
-var NUMERIC_KEYBOARD = {
-  attributesOfNativeInput: ALL_KEYBOARD_TYPES.numeric
-};
-var EMAIL_KEYBOARD = {
-  attributesOfNativeInput: ALL_KEYBOARD_TYPES.email
-};
+// src/Atomic/FormElements/InputDateRange/components/OpenedPart.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
 
-// src/Atomic/FormElements/InputDateRange/components/DateInput.tsx
-var import_classnames35 = __toESM(require("classnames"), 1);
-var import_moment_timezone5 = __toESM(require("moment-timezone"), 1);
-function handleDateInputOnChange(value) {
-  const replace = (val) => val?.replace(/[^0-9/]/g, "");
-  const input = replace(value);
-  const lastSymbol = input ? input.slice(-1) : "";
-  const previousValue = input ? input.slice(0, input.length - 1) : "";
-  if (value.length > 10 || lastSymbol === "/") return previousValue;
-  return previousValue.length === 2 || previousValue.length === 5 ? `${previousValue}/${lastSymbol}` : input;
-}
-function DateInput({ ref, ...props }) {
-  const {
-    RC: RC36,
-    className,
-    testId,
-    isFocused,
-    disabled,
-    value,
-    date,
-    prepareDate,
-    onChange,
-    onFocus,
-    onBlur,
-    onKeyUp
-  } = props;
-  const preparedDate = (() => {
-    const prepareDateDefault = (date2) => (0, import_moment_timezone5.default)(date2).format("MM/DD/YYYY");
-    const output = prepareDate?.(date) ?? prepareDateDefault(date);
-    return (output?.toString?.().toLowerCase() || "") !== "invalid date" ? output : "";
-  })();
-  return isFocused ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    Input_default,
-    {
-      ref,
-      testId,
-      className: (0, import_classnames35.default)(className, `${RC36}-interactive`),
-      value,
-      disabled,
-      onChange: (value2) => onChange(handleDateInputOnChange(value2)),
-      onBlur,
-      onKeyUp,
-      ...NUMERIC_KEYBOARD
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    "div",
-    {
-      className: (0, import_classnames35.default)(className, `${RC36}-emulation`, {
-        [`${RC36}-emulation_disabled`]: disabled
-      }),
-      onClick: disabled ? void 0 : onFocus,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_classnames35.default)(""), children: preparedDate })
+// src/Functions/useResize.js
+var import_react48 = require("react");
+var useResize = (element) => {
+  const [elemPosition, setElemPosition] = (0, import_react48.useState)("");
+  const onResize = (elemRightPosition) => {
+    if (elemRightPosition > document.documentElement.clientWidth) {
+      return setElemPosition("left");
+    } else setElemPosition("");
+  };
+  (0, import_react48.useEffect)(() => {
+    const elemRightPosition = element?.current?.getBoundingClientRect().right + 20;
+    window.addEventListener("resize", () => onResize(elemRightPosition));
+    return () => {
+      window.removeEventListener("resize", () => setElemPosition(""));
+    };
+  }, []);
+  (0, import_react48.useLayoutEffect)(() => {
+    const elemRightPosition = element?.current?.getBoundingClientRect().right + 20;
+    if (elemRightPosition > document.documentElement.clientWidth) {
+      return setElemPosition("left");
     }
-  );
-}
-var DateInput_default = DateInput;
+  }, []);
+  return { elemPosition };
+};
 
-// src/Atomic/FormElements/InputDateRange/components/Datepicker.tsx
-var import_classnames36 = __toESM(require("classnames"), 1);
-var import_moment_timezone6 = __toESM(require("moment-timezone"), 1);
-var import_react54 = require("react");
-var DATE_INPUT_FORMAT = "MM/DD/YYYY";
-function padTime2(time) {
-  return `${time.toString().padStart(2, "0")}:00`;
+// src/Atomic/UI/Modal/Modal.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// src/Functions/useKeyPress/useKeyPress.ts
+var import_react49 = require("react");
+function isISuspendProcessing(x) {
+  return getIsOnlyAnObject(x) && Object.values(x).every((v) => typeof v === "function");
 }
-var Datepicker2 = (props) => {
-  const {
-    txt,
-    className,
-    buttonsTypes = {},
-    values = {},
-    onChange,
-    onChangeMobile,
-    onChangeCompare,
-    onCancel,
-    getSelectedMode,
-    onChangeInterval,
-    isCompareHidden,
-    limitRange,
-    setActiveInterval,
-    isShortWeekNames,
-    minDate,
-    maxDate,
-    momentMinDate,
-    momentMaxDate,
-    isDontLimitFuture,
-    testId,
-    mainId,
-    withMobileLogic,
-    isDoNotPullOutListOfMainContainer
-  } = props;
-  const { start = null, end = null, compare: compare2 = false } = values;
-  const startDateInputRef = (0, import_react54.useRef)(null);
-  const endDateInputRef = (0, import_react54.useRef)(null);
-  const [startDate, setStartDate] = (0, import_react54.useState)(
-    getIsDateValid(start) ? (0, import_moment_timezone6.default)(start) : ""
-  );
-  const [endDate, setEndDate] = (0, import_react54.useState)(
-    getIsDateValid(end) ? (0, import_moment_timezone6.default)(end) : ""
-  );
-  const dateInterval = getSelectedMode({ start: startDate, end: endDate });
-  const [startDateInput, setStartDateInput] = (0, import_react54.useState)(null);
-  const [endDateInput, setEndDateInput] = (0, import_react54.useState)(null);
-  const [isStartFocused, setIsStartFocused] = (0, import_react54.useState)(false);
-  const [isEndFocused, setIsEndFocused] = (0, import_react54.useState)(false);
-  const [startHour, setStartHour] = (0, import_react54.useState)(start ? (0, import_moment_timezone6.default)(start).hour() : 0);
-  const [endHour, setEndHour] = (0, import_react54.useState)(end ? (0, import_moment_timezone6.default)(end).hour() : 0);
-  const [isCompare, setIsCompare] = (0, import_react54.useState)(compare2);
-  const [date1, setDate1] = (0, import_react54.useState)(
-    start ? (0, import_moment_timezone6.default)(start) : (0, import_moment_timezone6.default)().subtract(1, "month")
+function useKeyPress(targetKey, clamping = true, isForbidden, suspendProcessing) {
+  const [keyPressed, setKeyPressed] = (0, import_react49.useState)(false);
+  const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
+  const downHandler = (0, import_react49.useCallback)(
+    (event) => {
+      const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
+      const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
+      if (key === targetKey && isPressingWithoutAuxiliaryKeys && !safelySuspendProcessing[key]?.(event)) {
+        if (!clamping && repeat) return;
+        setKeyPressed(true);
+      }
+    },
+    // ? Намерянно в зависимостях используем именно входной suspendProcessing,
+    // ? хоть в коде используем "безопасный"
+    [clamping, targetKey, suspendProcessing]
   );
-  const [date2, setDate2] = (0, import_react54.useState)(end ? (0, import_moment_timezone6.default)(end) : (0, import_moment_timezone6.default)());
-  const isNearby = (0, import_react54.useMemo)(
-    () => (0, import_moment_timezone6.default)(date2).subtract(1, "month").isSame((0, import_moment_timezone6.default)(date1), "month"),
-    [date1, date2]
+  const upHandler = (0, import_react49.useCallback)(
+    (event) => {
+      const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
+      const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
+      if (key === targetKey && isPressingWithoutAuxiliaryKeys && !safelySuspendProcessing[key]?.(event)) {
+        if (!clamping && repeat) return;
+        setKeyPressed(false);
+      }
+    },
+    // ? Намерянно в зависимостях используем именно входной suspendProcessing,
+    // ? хоть в коде используем "безопасный"
+    [clamping, targetKey, suspendProcessing]
   );
-  const isPreviousPeriodShowed = (0, import_react54.useMemo)(
-    () => isCompare && !isCompareHidden && startDate && endDate,
-    [startDate, endDate, isCompare]
+  (0, import_react49.useEffect)(
+    () => {
+      const handleDown = (event) => downHandler(event);
+      const handleUp = (event) => upHandler(event);
+      if (!isForbidden) {
+        window.addEventListener("keydown", handleDown);
+        window.addEventListener("keyup", handleUp);
+      }
+      return () => {
+        window.removeEventListener("keydown", handleDown);
+        window.removeEventListener("keyup", handleUp);
+      };
+    },
+    // ? Намерянно в зависимостях используем именно входной suspendProcessing,
+    // ? хоть в коде используем "безопасный"
+    [downHandler, upHandler, isForbidden, suspendProcessing]
   );
-  const prevEndHour = (0, import_react54.useRef)(endHour);
-  const startPrevDate = (0, import_react54.useMemo)(() => {
-    if (isPreviousPeriodShowed) {
-      const intervalHoursCount = (0, import_moment_timezone6.default)(endDate).diff(startDate, "hours");
-      return (0, import_moment_timezone6.default)(startDate).subtract(intervalHoursCount, "hours").toDate();
-    } else {
-      return null;
-    }
-  }, [startDate, endDate, isCompare]);
-  const endPrevDate = (0, import_react54.useMemo)(() => {
-    if (isPreviousPeriodShowed) {
-      return startDate;
-    } else {
-      return null;
-    }
-  }, [startDate, endDate, isCompare]);
-  const title = (0, import_react54.useMemo)(() => {
-    if (isCompare && !isCompareHidden && startDate && endDate) {
-      return `${(0, import_moment_timezone6.default)(startPrevDate).format("ll")} (${(0, import_moment_timezone6.default)(startPrevDate).format(MAIN_TIME_FORMAT)}) - ${(0, import_moment_timezone6.default)(
-        endPrevDate
-      ).format("ll")} (${(0, import_moment_timezone6.default)(endPrevDate).format(MAIN_TIME_FORMAT)})`;
-    } else {
-      return "";
+  return keyPressed;
+}
+var useKeyPress_default = useKeyPress;
+
+// src/Functions/useKeyPress/useHandleKeyPress.ts
+var import_react50 = require("react");
+function useHandleKeyPress({
+  escCallback,
+  enterCallback,
+  withClamping = true,
+  withEventManagementStructure,
+  suspendProcessing = null
+}) {
+  const { isWithSubmitAndCloseManagement } = withEventManagementStructure || {};
+  const isPressEnter = useKeyPress_default("Enter", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
+  const isPressEscape = useKeyPress_default("Escape", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
+  (0, import_react50.useEffect)(() => {
+    if (!isWithSubmitAndCloseManagement && isPressEscape && typeof escCallback === "function") {
+      escCallback();
     }
-  }, [startDate, endDate, isCompare]);
-  const subtractDay = (date) => endHour === 0 ? (0, import_moment_timezone6.default)(date).subtract(1, "days") : (0, import_moment_timezone6.default)(date);
-  const addDay = (date) => endHour === 0 ? (0, import_moment_timezone6.default)(date).add(1, "days") : (0, import_moment_timezone6.default)(date);
-  const getCorrectedDateForDateInput = (key, date) => {
-    if (key === "startDateInput") return (0, import_moment_timezone6.default)(date);
-    return subtractDay((0, import_moment_timezone6.default)(date));
-  };
-  const setInterval2 = () => {
-    setActiveInterval?.(
-      getActualDateRange({ start: startDate, end: endDate }).intervalKey
-    );
-  };
-  const handleClick = (date) => {
-    prevEndHour.current = 0;
-    if (!startDate || startDate && endDate && !((0, import_moment_timezone6.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
-      setStartDate((0, import_moment_timezone6.default)(date).startOf("day"));
-      setEndDate((0, import_moment_timezone6.default)(date).add(1, "d").startOf("day"));
-      setStartHour(0);
-      setEndHour(0);
-    } else if ((0, import_moment_timezone6.default)(date).isBefore((0, import_moment_timezone6.default)(startDate), "day")) {
-      setEndDate((0, import_moment_timezone6.default)(startDate).add(1, "d").startOf("day"));
-      setStartDate((0, import_moment_timezone6.default)(date).set("hour", Number.parseInt(startHour.toString(), 10)));
-    } else if ((0, import_moment_timezone6.default)(date).isAfter((0, import_moment_timezone6.default)(startDate), "day")) {
-      setEndDate((0, import_moment_timezone6.default)(date).add(1, "d").startOf("day"));
+  }, [isPressEscape, escCallback]);
+  (0, import_react50.useEffect)(() => {
+    if (!isWithSubmitAndCloseManagement && isPressEnter && typeof enterCallback === "function") {
+      enterCallback();
     }
+  }, [isPressEnter, enterCallback]);
+}
+var useHandleKeyPress_default = useHandleKeyPress;
+
+// src/Atomic/UI/Modal/partials/_constants.ts
+var DEFAULT_EVENT_OPTIONS = Object.freeze({
+  bubbles: true,
+  cancelable: true,
+  composed: false
+});
+var ModalEventsInnerKeys = /* @__PURE__ */ ((ModalEventsInnerKeys2) => {
+  ModalEventsInnerKeys2["iGotAnEnterKeyPress"] = "iGotAnEnterKeyPress";
+  ModalEventsInnerKeys2["iGotAnEscKeyPress"] = "iGotAnEscKeyPress";
+  return ModalEventsInnerKeys2;
+})(ModalEventsInnerKeys || {});
+var EVENTS = Object.freeze({
+  ["iGotAnEnterKeyPress" /* iGotAnEnterKeyPress */]: {
+    innerKey: "iGotAnEnterKeyPress" /* iGotAnEnterKeyPress */,
+    name: "modal:i-got-an-enter-key-press",
+    shortName: "enterIsPressed",
+    middlewareKey: "Enter",
+    options: DEFAULT_EVENT_OPTIONS
+  },
+  ["iGotAnEscKeyPress" /* iGotAnEscKeyPress */]: {
+    innerKey: "iGotAnEscKeyPress" /* iGotAnEscKeyPress */,
+    name: "modal:i-got-an-esc-key-press",
+    shortName: "escIsPressed",
+    middlewareKey: "Escape",
+    options: DEFAULT_EVENT_OPTIONS
+  }
+});
+
+// src/Atomic/UI/Modal/partials/_utils.ts
+function getWithEventManagementStructure(modalId, withEventManagement) {
+  const output = {
+    isWithSubmitAndCloseManagement: false
   };
-  const handleChangeStartHour = (val) => {
-    setStartHour(Number(val));
-    setStartDate((0, import_moment_timezone6.default)(startDate || (0, import_moment_timezone6.default)()).set("hour", Number(val)));
-  };
-  const handleChangeEndHour = (val) => {
-    const newHour = Number(val);
-    setEndHour(newHour);
-    let newEndDate = (0, import_moment_timezone6.default)();
-    if (endDate) {
-      if (prevEndHour.current === 0 && newHour !== 0) {
-        newEndDate = (0, import_moment_timezone6.default)(endDate).subtract(1, "days");
-      } else if (prevEndHour.current !== 0 && newHour === 0) {
-        newEndDate = (0, import_moment_timezone6.default)(endDate).add(1, "days");
+  for (const key in output) {
+    if (!modalId) {
+      output[key] = false;
+    } else {
+      output[key] = getIsOnlyAnObject(withEventManagement) ? withEventManagement[key] ?? false : !!withEventManagement;
+    }
+  }
+  return output;
+}
+function getOnKeyPress({
+  id: modalId,
+  onSubmit,
+  onClose,
+  suspendProcessing
+}) {
+  if (!modalId) return null;
+  return function onKeyPress(ev) {
+    const customEvent = ev;
+    const { id: eventId, realEvent } = customEvent.detail || {};
+    const constantInfoAboutCustomEvent = Object.values(EVENTS).find((ev2) => ev2.name === customEvent.type || ev2.shortName === customEvent.type) || {};
+    const middlewareKey = constantInfoAboutCustomEvent.middlewareKey || "incorrectKey";
+    const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
+    if (modalId && eventId && eventId === modalId && !safelySuspendProcessing[middlewareKey]?.(realEvent)) {
+      switch (customEvent.type) {
+        case EVENTS.iGotAnEnterKeyPress.name: {
+          onSubmit?.();
+          break;
+        }
+        case EVENTS.iGotAnEscKeyPress.name: {
+          onClose?.();
+          break;
+        }
+        default: {
+          break;
+        }
       }
     }
-    prevEndHour.current = newHour;
-    setEndDate((0, import_moment_timezone6.default)(newEndDate).set("hour", newHour));
-  };
-  const handleDateInputFocus = (key, e) => {
-    const changeFlag = key === "startDateInput" ? setIsStartFocused : setIsEndFocused;
-    const set = key === "startDateInput" ? setStartDateInput : setEndDateInput;
-    const date = key === "startDateInput" ? startDate : endDate;
-    changeFlag(true);
-    set(date ? getCorrectedDateForDateInput(key, date).format("L") : "");
-    setTimeout(() => {
-      const defaultTarget = key === "startDateInput" ? startDateInputRef.current : endDateInputRef.current;
-      const target = e?.target ?? defaultTarget;
-      target.select?.();
-    }, 0);
-  };
-  const doBlur = (type, e) => {
-    const executor = type === "startDateInput" ? setIsStartFocused : setIsEndFocused;
-    e.target.blur();
-    executor(false);
   };
-  const processOverflow = (newDateAsString, valueForRollback, key) => {
-    const newDateAsMomentObj = (0, import_moment_timezone6.default)(newDateAsString, DATE_INPUT_FORMAT);
-    if (!newDateAsMomentObj.isValid()) {
-      return valueForRollback;
-    } else {
-      const beforeOfFuture = (0, import_moment_timezone6.default)().endOf("day");
-      const hour = key === "startDateInput" ? startHour : endHour;
-      let output;
-      if (minDate && newDateAsMomentObj.isBefore(momentMinDate)) {
-        output = momentMinDate;
-      } else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate)) {
-        output = momentMaxDate;
-      } else if (!isDontLimitFuture && newDateAsMomentObj.isAfter(beforeOfFuture)) {
-        output = beforeOfFuture.startOf("day");
-      } else {
-        output = newDateAsMomentObj;
+}
+function dispatchEventForModalManagement(realEvent, nameOfCustomEvent, uniqueIdOfRecipient, target) {
+  const { repeat, altKey, ctrlKey, shiftKey, metaKey } = realEvent;
+  const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
+  if (!repeat && isPressingWithoutAuxiliaryKeys) {
+    const event = Object.values(EVENTS).find((ev) => ev.name === nameOfCustomEvent || ev.shortName === nameOfCustomEvent);
+    if (event && uniqueIdOfRecipient) {
+      (target ?? document).dispatchEvent(new CustomEvent(event.name, { ...event.options, detail: { id: uniqueIdOfRecipient, realEvent } }));
+    }
+  }
+}
+
+// src/Atomic/UI/Modal/partials/ModalFooter.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_classnames34 = __toESM(require("classnames"), 1);
+var import_react51 = require("react");
+var ModalFooter = (0, import_react51.memo)(
+  ({ className = "", children, wrapperRef, testId = "modal-footer" }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "footer",
+      {
+        "data-testid": testId,
+        ref: wrapperRef,
+        className: (0, import_classnames34.default)("modal__footer", className),
+        role: "contentinfo",
+        "aria-label": "Modal footer",
+        children
       }
-      if (key === "endDateInput") {
-        output = addDay(output);
+    );
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+var ModalFooter_default = ModalFooter;
+
+// src/Atomic/UI/Modal/partials/ModalTitle.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_classnames35 = __toESM(require("classnames"), 1);
+var import_react52 = require("react");
+var import_react_feather11 = require("react-feather");
+var ModalTitle = (0, import_react52.memo)(
+  ({
+    variant = "primary",
+    children,
+    isForced = false,
+    onClose,
+    closeBtnDisable,
+    noHeaderCloseBtn = false,
+    className,
+    wrapperRef,
+    testId = "modal-title"
+  }) => {
+    const closeModalRef = (0, import_react52.useRef)(onClose);
+    const handleClick = (0, import_react52.useMemo)(() => () => closeModalRef.current?.(), []);
+    (0, import_react52.useLayoutEffect)(() => {
+      closeModalRef.current = closeBtnDisable ? void 0 : onClose;
+    }, [onClose, closeBtnDisable]);
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      "header",
+      {
+        "data-testid": testId,
+        ref: wrapperRef,
+        className: (0, import_classnames35.default)("modal__header", className, {
+          [`modal__header-${variant}`]: variant
+        }),
+        role: "banner",
+        "aria-label": "Modal header",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "span",
+            {
+              className: (0, import_classnames35.default)("modal__header-title", {
+                [`modal__header-${variant}-title`]: variant
+              }),
+              id: `${testId}-heading`,
+              children
+            }
+          ),
+          !isForced && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClick,
+              className: (0, import_classnames35.default)("modal-close-icon-box", {
+                "modal-close-icon-box-primary": variant === "primary",
+                "modal-close-icon-box--hidden": noHeaderCloseBtn
+              }),
+              "aria-label": "Close modal",
+              title: "Close modal",
+              children: !noHeaderCloseBtn && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_feather11.X, { className: "modal-close-icon", role: "img", "aria-hidden": "true" })
+            }
+          )
+        ]
       }
-      return output.set("hour", Number.parseInt(hour.toString(), 10));
-    }
-  };
-  const handleDateInputBlur = (key, e) => {
-    const reserveValue = key === "startDateInput" ? startDateInput : endDateInput;
-    const valueForRollback = key === "startDateInput" ? startDate : endDate;
-    const execute = key === "startDateInput" ? setStartDate : setEndDate;
-    const executeForCalendar = key === "startDateInput" ? setDate1 : setDate2;
-    const prepareValueForCalendar = (newDate) => {
-      if (key === "endDateInput") return newDate;
-      return (0, import_moment_timezone6.default)(newDate).isSameOrAfter((0, import_moment_timezone6.default)(date2), "month") ? (0, import_moment_timezone6.default)(date2).subtract(1, "month") : (0, import_moment_timezone6.default)(newDate);
-    };
-    const newDateValue = e?.target?.value ?? reserveValue;
-    const processedNewDate = processOverflow(
-      newDateValue,
-      valueForRollback,
-      key
     );
-    execute(processedNewDate);
-    executeForCalendar(prepareValueForCalendar(processedNewDate));
-    doBlur(key, e);
-  };
-  const handleKeyPressed = (code, e, type) => {
-    if (code === 13) {
-      const syntheticEvent = {
-        target: e.target,
-        relatedTarget: null
-      };
-      handleDateInputBlur(type, syntheticEvent);
+  }
+);
+ModalTitle.displayName = "ModalTitle";
+var ModalTitle_default = ModalTitle;
+
+// src/Atomic/UI/Modal/partials/useMobileModal.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react53 = require("react");
+var SCROLL_DIRECTION = {
+  UP: "up",
+  DOWN: "down"
+};
+function useMobileModal({
+  modalRef,
+  withMobileLogic = false,
+  withFixedFooter = false,
+  isOpen = false
+}) {
+  const modalMobileContainerRef = (0, import_react53.useRef)(null);
+  const modalMobileHeaderRef = (0, import_react53.useRef)(null);
+  const modalMobileFooterRef = (0, import_react53.useRef)(null);
+  const modalMobileBodyRef = (0, import_react53.useRef)(null);
+  const { isMobile } = useIsMobile_default();
+  const [modalHeight, setModalHeight] = (0, import_react53.useState)(0);
+  const [modalsLogic, setModalsLogic] = (0, import_react53.useState)({
+    IS_HEADER_HIDDEN: false,
+    IS_HEADER_STICKY: false,
+    IS_FOOTER_HIDDEN: false,
+    IS_FOOTER_STICKY: withFixedFooter
+  });
+  const [modalsLogicProps, setModalsLogicProps] = (0, import_react53.useState)({
+    headerHeight: 0,
+    footerHeight: 0
+  });
+  const [scrollDirection, setScrollDirection] = (0, import_react53.useState)(SCROLL_DIRECTION.UP);
+  const [scrollTopPrev, setScrollTopPrev] = (0, import_react53.useState)(0);
+  const [scrollTop, setScrollTop] = (0, import_react53.useState)(0);
+  const [scrollHeight, setScrollHeight] = (0, import_react53.useState)(1);
+  const [, setContainerScrollHeight] = (0, import_react53.useState)(1);
+  (0, import_react53.useLayoutEffect)(() => {
+    const el = modalMobileContainerRef?.current;
+    if (el) {
+      el.addEventListener("scroll", () => {
+        setScrollTop((scrollTop2) => {
+          if (scrollTop2 !== el.scrollTop) setScrollTopPrev(scrollTop2);
+          return el.scrollTop;
+        });
+      });
     }
-    if (code === 27) doBlur(type, e);
-  };
-  const getStartHourItems = () => [...Array.from({ length: 24 }).keys()].map((hour) => ({
-    label: padTime2(hour),
-    value: hour,
-    disabled: (0, import_moment_timezone6.default)(startDate).isSame(endDate, "day") && endHour <= hour
-  }));
-  const getEndHourItems = () => [...Array.from({ length: 24 }).keys()].map((hour) => ({
-    label: padTime2(hour + 1),
-    value: hour === 23 ? 0 : hour + 1,
-    disabled: ((0, import_moment_timezone6.default)(startDate).isSame(endDate, "day") || (0, import_moment_timezone6.default)(startDate).isSame(
-      (0, import_moment_timezone6.default)(endDate).subtract(1, "days"),
-      "day"
-    ) && endHour === 0) && hour < startHour
-  }));
-  const renderButtons = () => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      Button_default,
-      {
-        className: "date-picker__button",
-        onClick: () => onCancel?.(),
-        variant: buttonsTypes?.cancel,
-        children: txt?.buttons?.cancel || "Cancel"
+  }, [modalMobileContainerRef?.current]);
+  (0, import_react53.useEffect)(() => {
+    setScrollDirection(
+      (prevScrollDirection) => scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection
+    );
+  }, [scrollTop, scrollTopPrev]);
+  (0, import_react53.useLayoutEffect)(() => {
+    if (isOpen) {
+      const modalStyle = modalRef?.current ? modalRef?.current.style || window.getComputedStyle(modalRef?.current) : {};
+      const computedModalHeight = modalRef?.current ? modalHeight + Number.parseFloat(modalStyle?.marginTop || "0") : 0;
+      const windowHeight = document.documentElement.clientHeight || window.screen.availHeight || window.screen.height;
+      if (modalMobileContainerRef?.current) {
+        if (computedModalHeight <= windowHeight) {
+          modalMobileContainerRef.current.style.display = "flex";
+          modalMobileContainerRef.current.style.alignItems = "flex-end";
+        } else {
+          modalMobileContainerRef.current?.style?.removeProperty("display");
+          modalMobileContainerRef.current?.style?.removeProperty("align-items");
+        }
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      Button_default,
-      {
-        className: "date-picker__button",
-        variant: buttonsTypes?.apply,
-        disabled: !startDate || !endDate,
-        onClick: () => onChange?.({
-          start: (0, import_moment_timezone6.default)(startDate).format(MAIN_FORMAT),
-          end: (0, import_moment_timezone6.default)(endDate).format(MAIN_FORMAT),
-          startPrevDate: (0, import_moment_timezone6.default)(startPrevDate).format(MAIN_FORMAT),
-          endPrevDate: (0, import_moment_timezone6.default)(endPrevDate).format(MAIN_FORMAT),
-          compare: isCompare
-        }),
-        children: txt?.buttons?.apply || "apply"
+    }
+  }, [modalsLogicProps, isOpen, isMobile, modalHeight]);
+  (0, import_react53.useLayoutEffect)(() => {
+    if (isMobile && isOpen) {
+      const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;
+      if (newModalHeight && modalHeight !== newModalHeight) {
+        setModalHeight(newModalHeight);
       }
-    )
-  ] });
-  const renderPreviousPeriod = () => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    txt?.labels?.previousPeriod || "",
-    ":",
-    " ",
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "date-picker__previous-period-interval", children: title })
-  ] });
-  (0, import_react54.useEffect)(() => {
-    if ((0, import_moment_timezone6.default)(startDate).isSameOrAfter(endDate)) {
-      setStartDate((0, import_moment_timezone6.default)(endDate).subtract(1, "d"));
-      setDate1((0, import_moment_timezone6.default)(endDate).subtract(1, "d"));
     }
-  }, [startDate]);
-  (0, import_react54.useEffect)(() => {
-    if ((0, import_moment_timezone6.default)(endDate).isSameOrBefore(startDate)) {
-      setEndDate((0, import_moment_timezone6.default)(startDate).add(1, "d"));
-      setDate2((0, import_moment_timezone6.default)(startDate).add(1, "d"));
+  });
+  (0, import_react53.useEffect)(() => {
+    if (isMobile && withMobileLogic) {
+      const { footerHeight, headerHeight } = modalsLogicProps;
+      setModalsLogic((prevStickyLogic) => ({
+        IS_HEADER_HIDDEN: scrollDirection === SCROLL_DIRECTION.DOWN || scrollTop === 0,
+        IS_HEADER_STICKY: scrollDirection === SCROLL_DIRECTION.UP && scrollTop !== 0 && (scrollTop >= headerHeight || prevStickyLogic.IS_HEADER_STICKY),
+        IS_FOOTER_HIDDEN: !withFixedFooter && (scrollDirection === SCROLL_DIRECTION.UP || scrollHeight === Math.round(scrollTop)),
+        IS_FOOTER_STICKY: withFixedFooter && scrollHeight > 1 || scrollDirection === SCROLL_DIRECTION.DOWN && (scrollHeight - Math.round(scrollTop) >= footerHeight || prevStickyLogic.IS_FOOTER_STICKY)
+      }));
     }
-  }, [endDate]);
-  (0, import_react54.useEffect)(() => {
-    if ((0, import_moment_timezone6.default)(startDate).isBefore((0, import_moment_timezone6.default)(endDate), "month")) {
-      setDate1((0, import_moment_timezone6.default)(startDate));
-      setDate2((0, import_moment_timezone6.default)(endDate));
+  }, [
+    scrollTop,
+    scrollHeight,
+    isMobile,
+    withMobileLogic,
+    scrollDirection,
+    modalsLogicProps,
+    modalHeight,
+    window.innerHeight
+  ]);
+  (0, import_react53.useLayoutEffect)(() => {
+    if (modalMobileHeaderRef?.current?.getBoundingClientRect()?.height !== void 0) {
+      setModalsLogicProps((state) => ({
+        ...state,
+        headerHeight: modalMobileHeaderRef?.current?.getBoundingClientRect()?.height ?? 0
+      }));
     }
-    setInterval2();
-  }, [startDate, endDate]);
-  (0, import_react54.useEffect)(() => {
-    if ((0, import_moment_timezone6.default)(date1).isSameOrAfter((0, import_moment_timezone6.default)(date2), "month") && !withMobileLogic) {
-      setDate1((0, import_moment_timezone6.default)(date2).subtract(1, "month"));
+  }, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);
+  (0, import_react53.useLayoutEffect)(() => {
+    if (modalMobileFooterRef?.current?.getBoundingClientRect()?.height !== void 0) {
+      setModalsLogicProps((state) => ({
+        ...state,
+        footerHeight: modalMobileFooterRef?.current?.getBoundingClientRect()?.height ?? 0
+      }));
     }
-  }, [date1, date2]);
-  (0, import_react54.useEffect)(() => {
-    onChangeInterval(dateInterval);
-  }, [dateInterval]);
-  (0, import_react54.useEffect)(() => {
-    if (typeof onChangeMobile === "function") {
-      onChangeMobile({
-        start: (0, import_moment_timezone6.default)(startDate).format(MAIN_FORMAT),
-        end: (0, import_moment_timezone6.default)(endDate).format(MAIN_FORMAT),
-        startPrevDate: (0, import_moment_timezone6.default)(startPrevDate).format(MAIN_FORMAT),
-        endPrevDate: (0, import_moment_timezone6.default)(endPrevDate).format(MAIN_FORMAT),
-        compare: isCompare
-      });
+  }, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);
+  (0, import_react53.useEffect)(() => {
+    if (modalMobileContainerRef?.current) {
+      setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);
+      setScrollHeight(
+        modalMobileContainerRef?.current?.scrollHeight - window.innerHeight
+      );
     }
-  }, [startDate, endDate, startPrevDate, endPrevDate, isCompare]);
-  const renderRowStart = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__date-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        DateInput_default,
-        {
-          ref: startDateInputRef,
-          testId: `datepicker-${testId}_start-date-input`,
-          RC: "date-picker__date-input",
-          className: (0, import_classnames36.default)("date-picker__date-input"),
-          isFocused: isStartFocused,
-          value: startDateInput,
-          date: getCorrectedDateForDateInput("startDateInput", startDate),
-          disabled: !startDate,
-          onChange: setStartDateInput,
-          onFocus: (e) => handleDateInputFocus("startDateInput", e),
-          onBlur: (e) => handleDateInputBlur("startDateInput", e),
-          onKeyUp: (code, e) => handleKeyPressed(+code, e, "startDateInput")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        Dropdown_default,
-        {
-          testId,
-          id: `datepicker-id-${mainId}_start-hour-select-input`,
-          className: (0, import_classnames36.default)("date-picker__hour-select-input"),
-          onChange: (value) => handleChangeStartHour(value),
-          value: startHour,
-          options: getStartHourItems(),
-          disabled: !startDate,
-          isDoNotPullOutListOfMainContainer,
-          withMobileLogic
-        }
-      )
-    ] });
-  };
-  const renderRowEnd = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__date-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        DateInput_default,
-        {
-          ref: endDateInputRef,
-          testId: `datepicker-${testId}_start-date-input`,
-          RC: "date-picker__date-input",
-          className: (0, import_classnames36.default)("date-picker__date-input"),
-          isFocused: isEndFocused,
-          value: endDateInput,
-          date: getCorrectedDateForDateInput("endDateInput", endDate),
-          disabled: !endDate,
-          onChange: setEndDateInput,
-          onFocus: (e) => handleDateInputFocus("endDateInput", e),
-          onBlur: (e) => handleDateInputBlur("endDateInput", e),
-          onKeyUp: (code, e) => handleKeyPressed(+code, e, "endDateInput")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        Dropdown_default,
-        {
-          testId,
-          id: `datepicker-id-${mainId}_end-hour-select-input`,
-          className: (0, import_classnames36.default)("date-picker__hour-select-input"),
-          onChange: (value) => handleChangeEndHour(value),
-          value: endHour,
-          options: getEndHourItems(),
-          disabled: !endDate,
-          isDoNotPullOutListOfMainContainer,
-          withMobileLogic
-        }
-      )
-    ] });
+  }, [scrollTop, modalMobileContainerRef?.current, window.innerHeight]);
+  (0, import_react53.useEffect)(() => {
+    window.addEventListener("resize", () => {
+      setContainerScrollHeight((containerScrollHeight) => {
+        setScrollHeight(containerScrollHeight - window.innerHeight);
+        return containerScrollHeight;
+      });
+    });
+  }, []);
+  const renderModal = (0, import_react53.useCallback)(
+    (modal) => {
+      if (!isMobile || !withMobileLogic) return modal;
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "modal-mobile-container", ref: modalMobileContainerRef, children: modal });
+    },
+    [isMobile, withMobileLogic]
+  );
+  return {
+    modalMobileContainerRef,
+    modalMobileHeaderRef,
+    modalMobileBodyRef,
+    modalMobileFooterRef,
+    MODALS_LOGIC: modalsLogic,
+    SCROLL_DIRECTION,
+    scrollTop,
+    scrollHeight,
+    renderModal,
+    isMobile
   };
-  const renderCalendarStart = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      RangeCalendar_default,
-      {
-        testId,
-        className: "date-picker__calendar",
-        date: date1,
-        setDate: setDate1,
-        allowNext: withMobileLogic ? !(0, import_moment_timezone6.default)(date1).startOf("month").isSameOrAfter((0, import_moment_timezone6.default)().startOf("day"), "months") : !isNearby,
-        startDate,
-        endDate,
-        startPrevDate,
-        endPrevDate,
-        onClick: handleClick,
-        limitRange,
-        isShortWeekNames,
-        minDate,
-        maxDate,
-        momentMinDate,
-        momentMaxDate
-      }
-    );
+}
+
+// src/Atomic/UI/Modal/Modal.tsx
+var import_classnames36 = __toESM(require("classnames"), 1);
+var import_react54 = require("react");
+var attrsForModalBodyDefault = {};
+var KEY_CODE = Object.freeze({
+  ENTER: 13,
+  ESC: 27
+});
+function renderModalTitle({
+  mode,
+  title,
+  onlyTitle
+}) {
+  if (mode && mode !== "default" && !onlyTitle) {
+    return `${mode[0].toUpperCase()}${mode.slice(1)} ${title}`;
+  }
+  return title;
+}
+function Modal({
+  ref,
+  id,
+  testId = "modal",
+  zIndex = 100,
+  isOpen,
+  onConfirm,
+  onDecline,
+  closeModal,
+  className,
+  variant = "primary",
+  size,
+  mode,
+  title,
+  onlyTitle,
+  atributesForModalBody = attrsForModalBodyDefault,
+  confirmBtnClassName,
+  confirmBtnLabel,
+  confirmBtnVariant = "primary",
+  confirmBtnDisable,
+  confirmBtnIcon,
+  isConfirmBtnIconPositionRight,
+  noConfirmBtn,
+  forced,
+  closeBtnClassName,
+  closeBtnText,
+  closeBtnVariant,
+  closeBtnDisable,
+  closeBtnIcon,
+  btnClassNames,
+  isCloseBtnIconPositionRight,
+  noCloseBtn,
+  noHeader,
+  noHeaderCloseBtn,
+  customHeader,
+  declineBtnDisable,
+  noFooter,
+  customFooter,
+  withFixedFooter,
+  leftContentOfFooter,
+  isSubmittingByEnter: isSubmittingByEnterOuter = true,
+  isClosingByEsc: isClosingByEscOuter = true,
+  withEventManagement = false,
+  submitOnEnter,
+  closeOnEsc,
+  withMobileLogic,
+  children
+}) {
+  const internalRef = (0, import_react54.useRef)(null);
+  const modalRef = ref || internalRef;
+  const onConfirmRef = (0, import_react54.useRef)(onConfirm);
+  const closeModalRef = (0, import_react54.useRef)(closeModal);
+  const onDeclineRef = (0, import_react54.useRef)(onDecline);
+  const isSubmittingByEnter = submitOnEnter === false ? false : isSubmittingByEnterOuter;
+  const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
+  const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
+  const isUseAutoBlockingForHandlers = withEventManagementStructure.isWithSubmitAndCloseManagement;
+  const isOnConfirmBlocked = typeof onConfirm === "function" && isUseAutoBlockingForHandlers && confirmBtnDisable;
+  const isCloseModalBlocked = typeof closeModal === "function" && isUseAutoBlockingForHandlers && closeBtnDisable;
+  const isOnDeclineBlocked = typeof onDecline === "function" && isUseAutoBlockingForHandlers && declineBtnDisable;
+  const {
+    modalMobileHeaderRef,
+    modalMobileBodyRef,
+    modalMobileFooterRef,
+    MODALS_LOGIC,
+    renderModal,
+    isMobile,
+    scrollTop,
+    scrollHeight
+  } = useMobileModal({
+    withMobileLogic,
+    withFixedFooter,
+    isOpen
+  });
+  const handle = (0, import_react54.useMemo)(() => ({
+    confirm: () => onConfirmRef.current?.(),
+    close: () => closeModalRef.current?.(),
+    decline: () => {
+      if (typeof onDeclineRef.current === "function") onDeclineRef.current();
+      else closeModalRef.current?.();
+    }
+  }), []);
+  const suspendProcessing = {
+    // FIN-12482
+    // ? Чтобы НЕ замыкать рефку на модалку в логике, чтобы потом поискать в контенте все текстэриа,
+    // ? чтобы оценить есть ли среди них сфокусированная - делаем элеГАнтно:
+    // ? оцениваем ev.target, и если target это текстэриа, то вот сейчас то она и сфокусирована,
+    // ? т.е нужно приостановить процессы связанные с нажатием enter.
+    Enter: (ev) => ev?.target?.nodeName === "TEXTAREA"
+    // ? Колбеки опциональны, можно передавать только нужные
+    // Escape: (ev: globalThis.KeyboardEvent) => false,
   };
-  const renderCalendarEnd = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      RangeCalendar_default,
-      {
-        className: "date-picker__calendar",
-        date: date2,
-        setDate: setDate2,
-        allowPrev: !isNearby,
-        startDate,
-        endDate,
-        startPrevDate,
-        endPrevDate,
-        onClick: handleClick,
-        isShortWeekNames,
-        minDate,
-        maxDate,
-        momentMinDate,
-        momentMaxDate,
-        isDontLimitFuture
+  useHandleKeyPress_default({
+    enterCallback: isSubmittingByEnter && typeof onConfirm === "function" && !confirmBtnDisable ? handle.confirm : void 0,
+    escCallback: isClosingByEsc && typeof closeModal === "function" ? handle.close : void 0,
+    withClamping: false,
+    withEventManagementStructure: {
+      isWithSubmitAndCloseManagement: confirmBtnDisable || withEventManagementStructure.isWithSubmitAndCloseManagement
+    },
+    suspendProcessing
+  });
+  (0, import_react54.useLayoutEffect)(() => {
+    onConfirmRef.current = isOnConfirmBlocked ? void 0 : onConfirm;
+  }, [onConfirm, isOnConfirmBlocked]);
+  (0, import_react54.useLayoutEffect)(() => {
+    closeModalRef.current = isCloseModalBlocked ? void 0 : closeModal;
+  }, [closeModal, isCloseModalBlocked]);
+  (0, import_react54.useLayoutEffect)(() => {
+    onDeclineRef.current = isOnDeclineBlocked ? () => {
+    } : onDecline;
+  }, [onDecline, isOnDeclineBlocked]);
+  (0, import_react54.useEffect)(() => {
+    const outerTarget = getIsOnlyAnObject(withEventManagement) ? withEventManagement.listenersTarget : void 0;
+    const target = outerTarget ?? document;
+    const onKeyPress = getOnKeyPress({ id, onSubmit: handle.confirm, onClose: handle.close, suspendProcessing });
+    if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
+      if (isSubmittingByEnter) target.addEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress);
+      if (isClosingByEsc) target.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
+    }
+    return () => {
+      if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
+        if (isSubmittingByEnter) target.removeEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress);
+        if (isClosingByEsc) target.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
       }
-    );
-  };
-  const render = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_classnames36.default)("date-picker", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__inputs-block", children: [
-          renderRowStart(),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__inputs-separator date-picker__header--gray", children: "\u2014" }),
-          renderRowEnd()
-        ] }),
-        isCompare && !isCompareHidden && startDate && endDate && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__previous-period", children: renderPreviousPeriod() })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__calendars", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__calendars-wrapper", children: [
-        renderCalendarStart(),
-        renderCalendarEnd()
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-        "div",
-        {
-          className: (0, import_classnames36.default)("date-picker__footer", {
-            "date-picker__footer_once-element": isCompareHidden
-          }),
-          children: [
-            !isCompareHidden ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__compare-block", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mr5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              Switcher_default,
-              {
-                label: txt?.labels?.compare || "Compare",
-                isActive: isCompare,
-                onChange: () => {
-                  onChangeCompare?.(!isCompare);
-                  setIsCompare((state) => !state);
-                }
-              }
-            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__buttons-block", children: renderButtons() })
-          ]
-        }
+    };
+  }, []);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "div",
+    {
+      id: `${id}`,
+      style: { zIndex },
+      "data-testid": testId,
+      className: "modal-box j5",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": `${testId}-title`,
+      children: renderModal(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            "div",
+            {
+              "data-testid": `${testId}-overlay`,
+              className: isOpen ? "modal-overlay" : "hidden",
+              onClick: handle.close,
+              role: "presentation"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            "div",
+            {
+              ref: modalRef,
+              style: { width: typeof size === "number" ? `${size}px` : `${size?.replace("px", "")}px` },
+              className: (0, import_classnames36.default)(className, {
+                "modal": isOpen,
+                "modal--no-header": isOpen && noHeader && !customHeader,
+                "modal-mobile": isOpen && isMobile,
+                "hidden": !isOpen
+              }),
+              children: [
+                customHeader || !noHeader && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  ModalTitle_default,
+                  {
+                    wrapperRef: modalMobileHeaderRef,
+                    className: (0, import_classnames36.default)({
+                      "modal__header--hidden": MODALS_LOGIC.IS_HEADER_HIDDEN,
+                      "modal__header--sticky": !MODALS_LOGIC.IS_HEADER_HIDDEN && MODALS_LOGIC.IS_HEADER_STICKY
+                    }),
+                    variant,
+                    isForced: forced,
+                    onClose: handle.close,
+                    noHeaderCloseBtn,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: `${testId}-title`, children: renderModalTitle({ mode, title, onlyTitle }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  "div",
+                  {
+                    ...atributesForModalBody,
+                    ref: modalMobileBodyRef,
+                    className: (0, import_classnames36.default)("modal__body", {
+                      "modal__body--no-footer": noFooter
+                    }),
+                    role: "document",
+                    children
+                  }
+                ),
+                (!noFooter || customFooter) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  ModalFooter_default,
+                  {
+                    wrapperRef: modalMobileFooterRef,
+                    className: (0, import_classnames36.default)({
+                      "modal__footer--hidden": MODALS_LOGIC.IS_FOOTER_HIDDEN,
+                      "modal__footer--sticky": !MODALS_LOGIC.IS_FOOTER_HIDDEN && MODALS_LOGIC.IS_FOOTER_STICKY && scrollTop !== scrollHeight,
+                      "modal__footer_with-left-content": leftContentOfFooter
+                    }),
+                    children: customFooter || /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                      leftContentOfFooter,
+                      (!noCloseBtn || !noConfirmBtn) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "modal__buttons-block", children: [
+                        !noCloseBtn && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          Button_default,
+                          {
+                            testId: "modal",
+                            className: (0, import_classnames36.default)(closeBtnClassName, btnClassNames),
+                            variant: closeBtnVariant || "dark-outline",
+                            onClick: handle.decline,
+                            label: closeBtnText || "Cancel",
+                            disabled: typeof onDecline === "function" ? declineBtnDisable : closeBtnDisable,
+                            icon: closeBtnIcon,
+                            isIconRight: isCloseBtnIconPositionRight,
+                            tabIndex: 1,
+                            "aria-label": "Close modal"
+                          }
+                        ),
+                        !noConfirmBtn && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          Button_default,
+                          {
+                            testId: "modal",
+                            onClick: handle.confirm,
+                            label: confirmBtnLabel || mode && mode?.[0].toUpperCase() + mode?.slice(1) || "Apply",
+                            className: (0, import_classnames36.default)("ml5", confirmBtnClassName, btnClassNames),
+                            variant: confirmBtnVariant,
+                            disabled: confirmBtnDisable,
+                            icon: confirmBtnIcon,
+                            isIconRight: isConfirmBtnIconPositionRight,
+                            "aria-label": "Confirm modal"
+                          }
+                        )
+                      ] })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       )
-    ] });
-  };
-  const renderMobile = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_classnames36.default)("date-picker", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "date-picker__inputs-block", children: [
-          renderRowStart(),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__inputs-separator date-picker__header--gray", children: "\u2014" }),
-          renderRowEnd()
-        ] }),
-        isCompare && !isCompareHidden && startDate && endDate && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__previous-period", children: renderPreviousPeriod() })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__calendars", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "date-picker__calendars-wrapper", children: renderCalendarStart() }) })
-    ] });
-  };
-  return withMobileLogic ? renderMobile() : render();
-};
-var Datepicker_default2 = Datepicker2;
+    }
+  );
+}
+Modal.displayName = "Modal";
+var Modal_default = Modal;
 
 // src/Atomic/FormElements/InputDateRange/components/SelectItem.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -8100,6 +8137,7 @@ var OpenedPart = (props) => {
 var OpenedPart_default = OpenedPart;
 
 // src/Atomic/FormElements/InputDateRange/InputDateRange.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var import_classnames39 = __toESM(require("classnames"), 1);
 var import_moment_timezone8 = __toESM(require("moment-timezone"), 1);
 var import_react57 = __toESM(require("react"), 1);
@@ -8458,6 +8496,9 @@ var InputLink = ({
 };
 var InputLink_default = InputLink;
 
+// src/Atomic/FormElements/InputLink/index.ts
+var InputLink_default2 = InputLink_default;
+
 // src/Atomic/FormElements/InputMask/InputMask.tsx
 var InputMask_default = InputMask3_default;
 
@@ -8632,6 +8673,9 @@ var InputsRow = ({
 };
 var InputsRow_default = InputsRow;
 
+// src/Atomic/FormElements/InputsRow/index.ts
+var InputsRow_default2 = InputsRow_default;
+
 // src/Atomic/FormElements/InputWithAction/InputWithAction.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var import_classnames41 = __toESM(require("classnames"), 1);
@@ -8731,6 +8775,9 @@ var InputWithAction = (props, ref) => {
 };
 var InputWithAction_default = import_react60.default.forwardRef(InputWithAction);
 
+// src/Atomic/FormElements/InputWithAction/index.ts
+var InputWithAction_default2 = InputWithAction_default;
+
 // src/Atomic/FormElements/Label/Label.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var import_classnames42 = __toESM(require("classnames"), 1);
@@ -9738,6 +9785,9 @@ function RadioGroupWithInput({
 }
 var RadioGroupWithInput_default = RadioGroupWithInput;
 
+// src/Atomic/FormElements/RadioInput/index.ts
+var RadioInput_default2 = RadioInput_default;
+
 // src/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var import_classnames47 = __toESM(require("classnames"), 1);
@@ -9915,6 +9965,9 @@ var RangeInputs = ({
 };
 var RangeInputs_default = RangeInputs;
 
+// src/Atomic/FormElements/RangeInputs/index.ts
+var RangeInputs_default2 = RangeInputs_default;
+
 // src/Atomic/FormElements/RangeList/RangeList.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
 
@@ -10203,6 +10256,9 @@ var RangeList = (props) => {
 };
 var RangeList_default = RangeList;
 
+// src/Atomic/FormElements/RangeList/index.ts
+var RangeList_default2 = RangeList_default;
+
 // src/Atomic/FormElements/RangeSlider2/RangeSlider2.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var import_classnames51 = __toESM(require("classnames"), 1);
@@ -11321,6 +11377,9 @@ var SwitchableRow = (props) => {
 };
 var SwitchableRow_default = SwitchableRow;
 
+// src/Atomic/FormElements/Switcher/index.ts
+var Switcher_default2 = Switcher_default;
+
 // src/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var import_classnames54 = __toESM(require("classnames"), 1);
@@ -11416,6 +11475,9 @@ var SwitcherHide = ({
 };
 var SwitcherHide_default = SwitcherHide;
 
+// src/Atomic/FormElements/SwitcherHide/index.ts
+var SwitcherHide_default2 = SwitcherHide_default;
+
 // src/Atomic/FormElements/SwitcherRadio/SwitcherRadio.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var import_react75 = (
@@ -11487,6 +11549,9 @@ var SwitcherRadio = ({
 };
 var SwitcherRadio_default = SwitcherRadio;
 
+// src/Atomic/FormElements/SwitcherRadio/index.ts
+var SwitcherRadio_default2 = SwitcherRadio_default;
+
 // src/Atomic/FormElements/SwitcherRange/SwitcherRange.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var RC20 = "switcher-range";
@@ -11536,6 +11601,9 @@ var SwitcherRange = ({
 };
 var SwitcherRange_default = SwitcherRange;
 
+// src/Atomic/FormElements/SwitcherRange/index.ts
+var SwitcherRange_default2 = SwitcherRange_default;
+
 // src/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var import_classnames57 = __toESM(require("classnames"), 1);
@@ -13464,6 +13532,9 @@ var Text = ({
 };
 var Text_default = Text;
 
+// src/Atomic/FormElements/Text/index.ts
+var Text_default2 = Text_default;
+
 // src/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var import_react88 = require("react");
@@ -13739,6 +13810,9 @@ var TieredCheckboxes = ({
 };
 var TieredCheckboxes_default = TieredCheckboxes;
 
+// src/Atomic/FormElements/TieredCheckboxes/index.ts
+var TieredCheckboxes_default2 = TieredCheckboxes_default;
+
 // src/Atomic/FormElements/TimeRange/TimeRange.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");