kui-complex 0.0.44 → 0.0.47

package/cjs/index.js

@@ -11,6 +11,7 @@ var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var kuiBasic = require('kui-basic');
 var reactRouterDom = require('react-router-dom');
+var luxon = require('luxon');
 var kuiIcon = require('kui-icon');
 var _ = require('lodash');
 var DatePicker = require('react-datepicker');
@@ -18,9 +19,8 @@ var reactHookForm = require('react-hook-form');
 var InputMask = require('react-input-mask');
 var reactScroll = require('react-scroll');
 var ru = require('date-fns/locale/ru');
-var luxon = require('luxon');
-var Swiper = require('react-id-swiper');
 var reactRouter = require('react-router');
+var Swiper = require('react-id-swiper');
 var ReactDOM = require('react-dom');
 var classNames = require('classnames');
 
@@ -97,7 +97,7 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var UndefinedAvatar = function (_a) {
+var UndefinedAvatar = React.forwardRef(function (_a, ref) {
     var label = _a.label, otherProps = __rest(_a, ["label"]);
     if (!label) {
         return jsxRuntime.jsx("div", {});
@@ -107,8 +107,8 @@ var UndefinedAvatar = function (_a) {
         .map(function (el) { return el[0]; })
         .slice(0, 3)
         .join("");
-    return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar" }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
-};
+    return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
+});
 var Wrapper$8 = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &,\n  p {\n    transition: all ease-out 0.3s;\n  }\n  @media (min-width: 900px) {\n    &:hover {\n      background-color: ", ";\n      p {\n        color: white;\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &,\n  p {\n    transition: all ease-out 0.3s;\n  }\n  @media (min-width: 900px) {\n    &:hover {\n      background-color: ", ";\n      p {\n        color: white;\n      }\n    }\n  }\n"])), kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main);
 var templateObject_1$u;
 
@@ -124,25 +124,25 @@ var largeAvatarCSS = function (_a) {
 };
 var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
     shouldForwardProp: function (prop) { return prop !== "size"; },
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
 var sizeStyles = {
     s: react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "], ["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "]))),
     lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 80px;\n    height: 80px;\n  "], ["\n    width: 80px;\n    height: 80px;\n  "]))),
 };
-var templateObject_1$t, templateObject_2$f, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6;
+var templateObject_1$t, templateObject_2$f, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6;
 
-var ButtonTab = function (_a) {
+var ButtonTab = React.forwardRef(function (_a, ref) {
     var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
     var handleClick = function () {
         onClick(index);
     };
-    return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
-};
+    return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
+});
 var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-right: 24px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: 24px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
 var inactiveStyles = react.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  p {\n    color: ", ";\n  }\n"], ["\n  p {\n    color: ", ";\n  }\n"])), kuiBasic.theme.palette.grey.seventy);
 var templateObject_1$s, templateObject_2$e;
 
-var ButtonsPanel = function (_a) {
+var ButtonsPanel = React.forwardRef(function (_a, ref) {
     var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange"]);
     var _b = React__namespace.useState(Number(activeTab)), value = _b[0], setValue = _b[1];
     var navigate = reactRouterDom.useNavigate();
@@ -158,8 +158,8 @@ var ButtonsPanel = function (_a) {
     React.useEffect(function () {
         setValue(Number(activeTab));
     }, [activeTab]);
-    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(StyledContainer$1, __assign({ css: isSticky && { position: "sticky" } }, otherProps, { children: jsxRuntime$1.jsx(kuiBasic.Container, { children: tabs.map(function (item, index) { return (jsxRuntime$1.jsx(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item.label }, item.label)); }) }) })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsxRuntime$1.jsx(jsxRuntime$1.Fragment, { children: item }) }), index)); })] }));
-};
+    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(StyledContainer$1, __assign({ css: isSticky && { position: "sticky" }, ref: ref }, otherProps, { children: jsxRuntime$1.jsx(kuiBasic.Container, { children: tabs.map(function (item, index) { return (jsxRuntime$1.jsx(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item.label }, item.label)); }) }) })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsxRuntime$1.jsx(jsxRuntime$1.Fragment, { children: item }) }), index)); })] }));
+});
 ButtonsPanel.defaultProps = {
     isSticky: false,
 };
@@ -202,7 +202,7 @@ var InputDropdown = React.forwardRef(function (_a, ref) {
 });
 var templateObject_1$q;
 
-var InputSelectDropdown = function (_a) {
+var InputSelectDropdown = React.forwardRef(function (_a, ref) {
     var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
     var dropdownRef = React.useRef(null);
     React.useEffect(function () {
@@ -219,11 +219,20 @@ var InputSelectDropdown = function (_a) {
             }
         }
     }, [isOpenDropdown]);
-    return (jsxRuntime$1.jsx(InputDropdown, __assign({ ref: dropdownRef, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
+    var forwardedRef = function (elem) {
+        if (ref) {
+            if (typeof ref === "function")
+                ref(elem);
+            else
+                ref.current = elem;
+        }
+        dropdownRef.current = elem;
+    };
+    return (jsxRuntime$1.jsx(InputDropdown, __assign({ ref: forwardedRef, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
             maxHeight: "142px",
             padding: "4px",
         } }, { children: options.map(function (option, key) { return (jsxRuntime$1.jsx(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsxRuntime$1.jsx(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
-};
+});
 var OptionWrapper = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"])));
 var StyledOption = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"])), kuiBasic.theme.palette.background.light1);
 var selectedStyles = react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
@@ -305,13 +314,16 @@ var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templ
 var StyledIconWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  padding-right: 8px;\n  padding-bottom: 4px;\n"], ["\n  padding-right: 8px;\n  padding-bottom: 4px;\n"])));
 var templateObject_1$o, templateObject_2$b, templateObject_3$5;
 
-var SelectYear = function (_a) {
-    var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
-    return (
-    // @ts-ignore
-    jsxRuntime.jsx(InputSelect, __assign({ label: "Year", options: yearOptions }, props)));
-};
+var checkDisabled$1 = function (year, min, max) {
+    return (min && year <= min) || (max && year >= max);
+};
+var SelectYear = React.forwardRef(function (_a, ref) {
+    var yearOptions = _a.yearOptions; _a.options; var min = _a.min, max = _a.max, props = __rest(_a, ["yearOptions", "options", "min", "max"]);
+    var formattedYearOptions = yearOptions.map(function (year) { return (__assign(__assign({}, year), { disabled: checkDisabled$1(Number(year.value), min, max) })); });
+    return (jsxRuntime.jsx(InputSelect, __assign({ ref: ref, label: "Year", options: formattedYearOptions }, props)));
+});
 
+var checkDisabled = function (month, min, max) { return (min && month <= min) || (max && month >= max); };
 var monthValues = [
     { value: 0, label: "January" },
     { value: 1, label: "February" },
@@ -326,34 +338,36 @@ var monthValues = [
     { value: 10, label: "November" },
     { value: 11, label: "December" },
 ];
-var SelectMonth = function (_a) {
-    _a.options; var props = __rest(_a, ["options"]);
-    return (
-    // @ts-ignore
-    jsxRuntime.jsx(InputSelect, __assign({ label: "Month", options: monthValues }, props)));
-};
+var SelectMonth = React.forwardRef(function (props, ref) {
+    var min = props.min, max = props.max; props.options; var other = __rest(props, ["min", "max", "options"]);
+    var formattedMonths = monthValues.map(function (month) { return (__assign(__assign({}, month), { disabled: checkDisabled(month.value, min, max) })); });
+    return (jsxRuntime.jsx(InputSelect, __assign({ ref: ref, label: "Month", options: formattedMonths }, other)));
+});
 
-var CalendarHeaderWithSelect = function (_a) {
-    var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions;
+var CalendarHeaderWithSelect = React.forwardRef(function (_a, ref) {
+    var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions, max = _a.max, min = _a.min;
     var year = date.getFullYear();
-    var month = date.getMonth() + 1;
-    return (jsxRuntime.jsx(Wrapper$5, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
-};
+    var month = date.getMonth();
+    var currentYear = luxon.DateTime.now().year;
+    var minMonth = (min === null || min === void 0 ? void 0 : min.year) === currentYear ? min === null || min === void 0 ? void 0 : min.month : 0;
+    var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
+    return (jsxRuntime.jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
+});
 var Wrapper$5 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  margin-bottom: 24px;\n  @media (max-width: 900px) {\n    padding: 0 18px;\n    margin-bottom: 20px;\n  }\n"], ["\n  margin-bottom: 24px;\n  @media (max-width: 900px) {\n    padding: 0 18px;\n    margin-bottom: 20px;\n  }\n"])));
 var templateObject_1$n;
 
-var CalendarStandardContainer = function (_a) {
+var CalendarStandardContainer = React.forwardRef(function (_a, ref) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
-    return jsxRuntime.jsx(DatePickerContainer, __assign({}, props));
-};
+    return jsxRuntime.jsx(DatePickerContainer, __assign({ ref: ref }, props));
+});
 var DatePickerContainer = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"], ["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.seventy, kuiBasic.theme.palette.grey.zero);
 var templateObject_1$m;
 
-var CalendarStandardHeader = function (_a) {
+var CalendarStandardHeader = React.forwardRef(function (_a, ref) {
     var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
     var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
-    return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsxRuntime.jsx(kuiIcon.PrevArrowIcon, { width: 10, height: 10 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsxRuntime.jsx(kuiIcon.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
-};
+    return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsxRuntime.jsx(kuiIcon.PrevArrowIcon, { width: 10, height: 10 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsxRuntime.jsx(kuiIcon.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
+});
 var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  padding: 0 6px 34px;\n  @media (max-width: 600px) {\n    h2 {\n      font-size: 16px;\n    }\n  }\n"], ["\n  padding: 0 6px 34px;\n  @media (max-width: 600px) {\n    h2 {\n      font-size: 16px;\n    }\n  }\n"])));
 var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    font-weight: 700;\n  }\n"], ["\n  @media (max-width: 600px) {\n    font-weight: 700;\n  }\n"])));
 var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  border-color: transparent !important;\n  &:disabled {\n    background-color: white !important;\n  }\n"], ["\n  border-color: transparent !important;\n  &:disabled {\n    background-color: white !important;\n  }\n"])));
@@ -361,7 +375,7 @@ var templateObject_1$l, templateObject_2$a, templateObject_3$4;
 
 var InputForDatepicker = React.forwardRef(function (_a, ref) {
     var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
-    var onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, mask = props.mask, handleCLick = props.handleCLick, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick"]);
+    var onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, mask = props.mask, handleCLick = props.handleCLick, startIcon = props.startIcon, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick", "startIcon"]);
     var handleIconClick = function () {
         if (handleCLick) {
             handleCLick();
@@ -370,38 +384,39 @@ var InputForDatepicker = React.forwardRef(function (_a, ref) {
             onClick();
         }
     };
-    return (jsxRuntime.jsx(InputMask__default["default"], __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsxRuntime.jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
+    var Icon = function () { return (jsxRuntime.jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) }))); };
+    return (jsxRuntime.jsx(InputMask__default["default"], __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref }))); } })));
 });
 var IconWrapper = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"])));
 var templateObject_1$k;
 
-var MonthPickerContainer = function (_a) {
+var MonthPickerContainer = React.forwardRef(function (_a, ref) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
-    return jsxRuntime.jsx(StyledContainer, __assign({}, props));
-};
-var StyledContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
+    return jsxRuntime.jsx(StyledContainer, __assign({ ref: ref }, props));
+});
+var StyledContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white !important;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white !important;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
 var templateObject_1$j;
 
-var MonthPickerHeader = function (_a) {
+var MonthPickerHeader = React.forwardRef(function (_a, ref) {
     var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
-    return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
-};
+    return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
+});
 var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"], ["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"])));
 var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  background: #fff;\n  padding: 4px 16px;\n  border-radius: 12px 12px 0 0;\n"], ["\n  background: #fff;\n  padding: 4px 16px;\n  border-radius: 12px 12px 0 0;\n"])));
 var templateObject_1$i, templateObject_2$9;
 
-var DesktopInputWithMonthPicker = function (_a) {
+var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
     var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
-    return (jsxRuntime.jsx(Wrapper$4, { children: jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: form.control, render: function (_a) {
+    return (jsxRuntime.jsx(Wrapper$4, __assign({ ref: ref }, { children: jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: form.control, render: function (_a) {
                 var _b;
                 var field = _a.field, fieldState = _a.fieldState;
                 return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
-            } }) }));
-};
+            } }) })));
+});
 var Wrapper$4 = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
 var templateObject_1$h;
 
-var MenuItem = function (_a) {
+var MenuItem = React.forwardRef(function (_a, ref) {
     var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
     var startScrolling = function () {
         setIsScrolling(true);
@@ -432,16 +447,16 @@ var MenuItem = function (_a) {
             reactScroll.Events.scrollEvent.remove("end");
         };
     }, []);
-    return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$1, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
-};
+    return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$1, __assign({ ref: ref }, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
+});
 var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"], ["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"])));
 var disabledStyles = react.css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"], ["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"])), kuiBasic.theme.palette.grey.seventy);
 var templateObject_1$g, templateObject_2$8;
 
-var DesktopMenuPanel = function (_a) {
+var DesktopMenuPanel = React.forwardRef(function (_a, ref) {
     var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
-    return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" } }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
-};
+    return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
+});
 var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
 var templateObject_1$f;
 
@@ -476,7 +491,7 @@ var InputWithMask = React.forwardRef(function (_a, ref) {
 });
 
 var InputWithController = React.forwardRef(function (_a, ref) {
-    var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
+    var form = _a.form, name = _a.name, error = _a.error, value = _a.value, inputProps = __rest(_a, ["form", "name", "error", "value"]);
     var handleChange = function (e, field) {
         field.onChange(e);
         if (inputProps.onChange) {
@@ -501,7 +516,7 @@ var InputWithController = React.forwardRef(function (_a, ref) {
             var field = _a.field, fieldState = _a.fieldState;
             return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
                     return handleChange(e, field);
-                }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
+                }, value: typeof value !== "undefined" ? value : field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
         } }));
 });
 
@@ -523,7 +538,7 @@ var strengthTexts = {
     medium: "Средний",
     hard: "Сложный",
 };
-var PassportStrengthBar = function (_a) {
+var PassportStrengthBar = React.forwardRef(function (_a, ref) {
     var strength = _a.strength;
     var color = strength
         ? strengthColors[strength]
@@ -531,24 +546,24 @@ var PassportStrengthBar = function (_a) {
     var strengthKey = strength
         ? strengthCoefficients[strength]
         : -1;
-    return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsxRuntime$1.jsx(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsxRuntime$1.jsx(ReliabilityLevel, { children: jsxRuntime$1.jsx(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsxRuntime$1.jsx(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
-};
+    return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { children: [jsxRuntime$1.jsx(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsxRuntime$1.jsx(ReliabilityLevel, { children: jsxRuntime$1.jsx(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsxRuntime$1.jsx(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
+});
 var Wrapper$2 = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"], ["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"])));
 var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
 var ReliabilityLevel = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
-var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
+var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
     var color = _a.color;
     return color;
 });
 var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 16px;\n  @media (max-width: 900px) {\n    margin-top: 8px;\n    font-size: 12px;\n  }\n"], ["\n  margin-top: 16px;\n  @media (max-width: 900px) {\n    margin-top: 8px;\n    font-size: 12px;\n  }\n"])));
-var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$1, templateObject_5;
+var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5;
 
 var isValidWithMaskExp = /^[^_]+$/;
 var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
 var mediumPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{12,}$/;
 var strongPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{14,}$/;
 
-var InputPassword = function (props) {
+var InputPassword = React.forwardRef(function (props, ref) {
     var _a = React.useState(false), showPassword = _a[0], setShowPassword = _a[1];
     var _b = React.useState(null), strength = _b[0], setStrength = _b[1];
     var handleShowChange = function () {
@@ -583,12 +598,12 @@ var InputPassword = function (props) {
             checkPasswordStrength(fieldValue);
         }
     }, []);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", endIcon: jsxRuntime.jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsxRuntime.jsx(kuiIcon.ClosedEyeIcon, {}) : jsxRuntime.jsx(kuiIcon.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
-};
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsxRuntime.jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsxRuntime.jsx(kuiIcon.ClosedEyeIcon, {}) : jsxRuntime.jsx(kuiIcon.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
+});
 var EyeIconWrapper = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  height: 18px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  height: 18px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
 var templateObject_1$d;
 
-var InputTextAreaMobile = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
+var InputTextAreaMobile = React.forwardRef(function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
 var InputWrapper = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"])));
 var TextAreaWrapper = styled__default["default"].div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"])));
 var templateObject_1$c, templateObject_2$6;
@@ -605,17 +620,18 @@ var useToggle = function (isModalOpen) {
     return [isOpen, handleOpen, handleClose];
 };
 
-var ModalFooter = function (_a) {
+var ModalFooter = React.forwardRef(function (_a, ref) {
     var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
-    return (jsxRuntime.jsxs(StyledFooter, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] }));
-};
+    return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] })));
+});
 var StyledFooter = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 0 0 12px 12px;\n  z-index: 10;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n"], ["\n  background: ", ";\n  border-radius: 0 0 12px 12px;\n  z-index: 10;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n"])), kuiBasic.theme.palette.grey.zero);
 var ButtonWrapper = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"])));
 var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"])));
 var templateObject_1$b, templateObject_2$5, templateObject_3$2;
 
-DatePicker.registerLocale("ru", ru__default["default"]);
 var generateYearRange = function (offsetFromCurrent, maxYearCount) {
+    if (!offsetFromCurrent || !maxYearCount)
+        return [];
     var endYear = luxon.DateTime.now().year - offsetFromCurrent;
     return ___default["default"].range(maxYearCount).map(function (elem) {
         var fullYear = endYear - elem;
@@ -627,49 +643,84 @@ var generateYearRange = function (offsetFromCurrent, maxYearCount) {
 };
 var InputWithDatePicker = React.forwardRef(function (_a, ref) {
     var _b;
-    var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams"]);
+    var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, onChange = _a.onChange, max = _a.max, min = _a.min, footerLabel = _a.footerLabel, datePickerProps = _a.datePickerProps, alignTitle = _a.alignTitle, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams", "onChange", "max", "min", "footerLabel", "datePickerProps", "alignTitle"]);
     var _c = reactHookForm.useController({
         name: name,
         control: form.control,
     }), field = _c.field, fieldState = _c.fieldState;
     var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var formattedValue = field.value ? field.value.toFormat("dd.MM.yyyy") : "";
+    var formattedDate = field.value ? field.value.toJSDate() : null;
     var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
-    var _e = React.useState(field.value
-        ? luxon.DateTime.fromJSDate(new Date(String(field.value))).toFormat("dd.MM.yyyy")
-        : null), value = _e[0], setValue = _e[1];
-    var _f = React.useState(value ? luxon.DateTime.fromFormat(value, "dd.MM.yyyy").toJSDate() : null), date = _f[0], setDate = _f[1];
-    var yearList = generateYearRange(yearParams.min, yearParams.max);
+    var _e = React.useState(formattedDate), date = _e[0], setDate = _e[1];
+    var _f = React.useState(formattedValue), value = _f[0], setValue = _f[1];
+    var yearList = generateYearRange(yearParams === null || yearParams === void 0 ? void 0 : yearParams.min, yearParams === null || yearParams === void 0 ? void 0 : yearParams.max);
+    React.useEffect(function () {
+        if (!isModalOpen) {
+            setDate(null);
+        }
+        else {
+            setDate(formattedDate);
+        }
+    }, [isModalOpen]);
     var handleChange = function (e) {
         var targetValue = e.target.value;
         setValue(targetValue);
         if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
-            var jsDate = luxon.DateTime.fromFormat(targetValue, "dd.MM.yyyy").toJSDate();
-            setDate(jsDate);
-            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: jsDate, name: name }, type: "change" });
+            var targetDate = luxon.DateTime.fromFormat(targetValue, "dd.MM.yyyy");
+            setDate(targetDate.toJSDate());
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: targetDate, name: name }, type: "change" });
+            if (onChange) {
+                onChange(targetDate);
+            }
         }
         else {
             setDate(null);
             field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
+            if (onChange) {
+                onChange(null);
+            }
         }
     };
     var acceptWithDateSelected = function () {
         if (date) {
-            setValue(luxon.DateTime.fromJSDate(date).toFormat("dd.MM.yyyy"));
-            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
+            var dateObj = luxon.DateTime.fromJSDate(date);
+            setValue(dateObj.toFormat("dd.MM.yyyy"));
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: dateObj, name: name }, type: "change" });
+            if (onChange) {
+                onChange(dateObj);
+            }
             handleModalClose();
         }
     };
-    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, ref: ref }, props)), jsxRuntime$1.jsxs(kuiBasic.Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime$1.jsx(ContentWrapper$1, { children: jsxRuntime$1.jsx(DatePicker__default["default"], { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return (jsxRuntime$1.jsx(DayContent, { children: day })); } }) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
+    var handleDateChange = function (newDate) {
+        setDate(newDate);
+    };
+    var forwardedRef = function (elem) {
+        if (ref) {
+            // eslint-disable-next-line no-param-reassign
+            // @ts-ignore
+            ref.current = elem;
+        }
+        field.ref(elem);
+    };
+    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxRuntime$1.jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsxRuntime$1.jsx(ContentWrapper$1, { children: jsxRuntime$1.jsx(DatePicker__default["default"], __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsxRuntime$1.jsx(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
 });
 InputWithDatePicker.defaultProps = {
     title: "Дата рождения",
     description: "Выберите год, месяц и число вашего рождения",
     yearParams: { min: 18, max: 120 },
+    footerLabel: "Подтвердить",
+    alignTitle: "center",
 };
 var ContentWrapper$1 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  padding: 36px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 36px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
 var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"], ["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.background.light1);
-var DayContent = styled__default["default"].span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  padding-top: 1px;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
-var templateObject_1$a, templateObject_2$4, templateObject_3$1;
+var DayContent = styled__default["default"].span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
+var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n"])), function (_a) {
+    var alignTitle = _a.alignTitle;
+    return alignTitle || "center";
+});
+var templateObject_1$a, templateObject_2$4, templateObject_3$1, templateObject_4$1;
 
 var shortMonths = [
     "ЯНВ",
@@ -694,7 +745,7 @@ var ruCustom = __assign(__assign({}, ru__default["default"]), { localize: {
         dayPeriod: function () { return ""; },
         day: function () { return ""; },
     } });
-var MobileInputWithMonthPicker = function (_a) {
+var MobileInputWithMonthPicker = React.forwardRef(function (_a, ref) {
     var _b;
     var title = _a.title, name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, props = __rest(_a, ["title", "name", "form", "disabled", "datePickerProps"]);
     var _c = reactHookForm.useController({
@@ -730,15 +781,15 @@ var MobileInputWithMonthPicker = function (_a) {
         field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
         handleModalClose();
     };
-    return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper, { children: jsxRuntime.jsx(DatePicker__default["default"], __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsxRuntime.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
-};
+    return (jsxRuntime.jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper, { children: jsxRuntime.jsx(DatePicker__default["default"], __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsxRuntime.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] })));
+});
 var Wrapper$1 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"])));
 var ContentWrapper = styled__default["default"].div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    padding: 16px 16px 8px;\n  }\n"], ["\n  @media (max-width: 600px) {\n    padding: 16px 16px 8px;\n  }\n"])));
 var templateObject_1$9, templateObject_2$3;
 
 var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
 
-var MobileMenuPanel = function (_a) {
+var MobileMenuPanel = React.forwardRef(function (_a, ref) {
     var tabs = _a.tabs, handleClick = _a.handleClick, variant = _a.variant, other = __rest(_a, ["tabs", "handleClick", "variant"]);
     var swiperRef = React.useRef(null);
     var slideTo = function (index) {
@@ -748,8 +799,8 @@ var MobileMenuPanel = function (_a) {
         }, 16);
         handleClick(index);
     };
-    return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
-};
+    return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
+});
 var Wrapper = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
 var SlideWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"], ["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"])));
 var templateObject_1$8, templateObject_2$2;
@@ -768,7 +819,7 @@ var useWindowWidth = function (time) {
     return width;
 };
 
-var MenuPanel = function (_a) {
+var MenuPanel = React.forwardRef(function (_a, ref) {
     var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, variant = _a.variant;
     var width = useWindowWidth();
     var _b = React__namespace.useState(activeTab), value = _b[0], setValue = _b[1];
@@ -797,21 +848,21 @@ var MenuPanel = function (_a) {
     if (width === 0) {
         return null;
     }
-    return (jsxRuntime$1.jsxs("div", { children: [width > 765 ? (jsxRuntime$1.jsx(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsxRuntime$1.jsx(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsxRuntime$1.jsx(reactScroll.Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] }));
-};
+    return (jsxRuntime$1.jsxs("div", __assign({ ref: ref }, { children: [width > 765 ? (jsxRuntime$1.jsx(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsxRuntime$1.jsx(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsxRuntime$1.jsx(reactScroll.Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] })));
+});
 MenuPanel.defaultProps = {
     variant: "grey",
 };
 var fullHeightStyles = react.css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  height: calc(100vh - 121px);\n"], ["\n  height: calc(100vh - 121px);\n"])));
 var templateObject_1$7;
 
-var Switch = function (_a) {
+var Switch = React.forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
     return (jsxRuntime$1.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
             var field = _a.field;
-            return (jsxRuntime$1.jsx(kuiBasic.Switch, __assign({ checked: Boolean(field.value), onChange: field.onChange, "data-testid": name }, props)));
+            return (jsxRuntime$1.jsx(kuiBasic.Switch, __assign({ checked: Boolean(field.value), onChange: field.onChange, "data-testid": name, ref: ref }, props)));
         } }));
-};
+});
 
 var InputPhoneWithForm = React.forwardRef(function (props, ref) {
     var _a;
@@ -856,7 +907,7 @@ InputPhoneWithForm.defaultProps = {
     name: "phone",
 };
 
-var Table = function (props) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
+var Table = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
 var StyledTable = styled__default["default"].table(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  width: 100%;\n  border-spacing: 0;\n"], ["\n  width: 100%;\n  border-spacing: 0;\n"])));
 var templateObject_1$6;
 
@@ -866,12 +917,11 @@ var templateObject_1$5;
 var TableCell = styled__default["default"].td(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
 var templateObject_1$4;
 
-var TableRow = function (_a) {
+var TableRow = React.forwardRef(function (_a, ref) {
     var children = _a.children, other = __rest(_a, ["children"]);
     var childrenArr = React__namespace.Children.toArray(children);
-    // @ts-ignore
-    return jsxRuntime.jsx("tr", { children: childrenArr.map(function (child) { return React__namespace.cloneElement(child, other); }) });
-};
+    return (jsxRuntime.jsx("tr", __assign({ ref: ref }, { children: childrenArr.map(function (child) { return React__namespace.cloneElement(child, other); }) })));
+});
 
 var placementsPositions = {
     bottomStart: {