kui-complex 0.0.62 → 0.0.64

package/index.js

@@ -6,7 +6,7 @@ import { css, Global } from '@emotion/react';
 import * as React from 'react';
 import { forwardRef, useEffect, useState, useRef } from 'react';
 import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { Caption, theme, Button, Container, Grid, InputWithAdornments, Heading, InputWithMask as InputWithMask$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
+import { Caption, theme, Button, Container, Grid, InputWithAdornments, Heading, InputWithMask as InputWithMask$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown, Checkbox, Radio, InputMessage } from 'kui-basic';
 import { useNavigate } from 'react-router-dom';
 import { DateTime } from 'luxon';
 import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon';
@@ -58,6 +58,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -75,15 +85,15 @@ var UndefinedAvatar = forwardRef(function (_a, ref) {
         .join("");
     return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
 });
-var Wrapper$8 = styled.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"])), theme.palette.brand.light, theme.palette.brand.main);
-var templateObject_1$u;
+var Wrapper$8 = styled.div(templateObject_1$x || (templateObject_1$x = __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"])), theme.palette.brand.light, theme.palette.brand.main);
+var templateObject_1$x;
 
 var Avatar = forwardRef(function (props, ref) {
     var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
     return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
 });
-var Wrapper$7 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n"], ["\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n"])));
-var StyledImage = styled.img(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"])));
+var Wrapper$7 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n"], ["\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n"])));
+var StyledImage = styled.img(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"])));
 var largeAvatarCSS = function (_a) {
     var avatarSize = _a.avatarSize;
     return avatarSize === "lg" && css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
@@ -92,10 +102,10 @@ var StyledUndefinedAvatar = styled(UndefinedAvatar, {
     shouldForwardProp: function (prop) { return prop !== "size"; },
 })(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
 var sizeStyles = {
-    s: 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  "]))),
+    s: css(templateObject_5$2 || (templateObject_5$2 = __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: 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$g, templateObject_3$7, templateObject_4$4, templateObject_5$1, templateObject_6;
+var templateObject_1$w, templateObject_2$i, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6;
 
 var ButtonTab = forwardRef(function (_a, ref) {
     var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
@@ -104,9 +114,9 @@ var ButtonTab = forwardRef(function (_a, ref) {
     };
     return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
 });
-var StyledButton = styled(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 = css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  p {\n    color: ", ";\n  }\n"], ["\n  p {\n    color: ", ";\n  }\n"])), theme.palette.grey.seventy);
-var templateObject_1$s, templateObject_2$f;
+var StyledButton = styled(Button)(templateObject_1$v || (templateObject_1$v = __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 = css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  p {\n    color: ", ";\n  }\n"], ["\n  p {\n    color: ", ";\n  }\n"])), theme.palette.grey.seventy);
+var templateObject_1$v, templateObject_2$h;
 
 var ButtonsPanel = 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"]);
@@ -124,14 +134,14 @@ var ButtonsPanel = forwardRef(function (_a, ref) {
     useEffect(function () {
         setValue(Number(activeTab));
     }, [activeTab]);
-    return (jsxs(Fragment, { children: [jsx$1(StyledContainer$1, __assign({ css: isSticky && { position: "sticky" }, ref: ref }, otherProps, { children: jsx$1(Container, { children: tabs.map(function (item, index) { return (jsx$1(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item.label }, item.label)); }) }) })), tabPanels.map(function (item, index) { return (jsx$1(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsx$1(Fragment, { children: item }) }), index)); })] }));
+    return (jsxs(Fragment, { children: [jsx$1(StyledContainer$2, __assign({ css: isSticky && { position: "sticky" }, ref: ref }, otherProps, { children: jsx$1(Container, { children: tabs.map(function (item, index) { return (jsx$1(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item.label }, item.label)); }) }) })), tabPanels.map(function (item, index) { return (jsx$1(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsx$1(Fragment, { children: item }) }), index)); })] }));
 });
 ButtonsPanel.defaultProps = {
     isSticky: false,
 };
-var Content = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var StyledContainer$1 = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  background: ", ";\n  top: 80px;\n  z-index: 4;\n  padding-top: 16px;\n  padding-bottom: 24px;\n  @media (max-width: 1200px) {\n    padding-bottom: 18px;\n  }\n  @media (max-width: 600px) {\n    top: 48px;\n  }\n"], ["\n  background: ", ";\n  top: 80px;\n  z-index: 4;\n  padding-top: 16px;\n  padding-bottom: 24px;\n  @media (max-width: 1200px) {\n    padding-bottom: 18px;\n  }\n  @media (max-width: 600px) {\n    top: 48px;\n  }\n"])), theme.palette.grey.zero);
-var templateObject_1$r, templateObject_2$e;
+var Content = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var StyledContainer$2 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  background: ", ";\n  top: 80px;\n  z-index: 4;\n  padding-top: 16px;\n  padding-bottom: 24px;\n  @media (max-width: 1200px) {\n    padding-bottom: 18px;\n  }\n  @media (max-width: 600px) {\n    top: 48px;\n  }\n"], ["\n  background: ", ";\n  top: 80px;\n  z-index: 4;\n  padding-top: 16px;\n  padding-bottom: 24px;\n  @media (max-width: 1200px) {\n    padding-bottom: 18px;\n  }\n  @media (max-width: 600px) {\n    top: 48px;\n  }\n"])), theme.palette.grey.zero);
+var templateObject_1$u, templateObject_2$g;
 
 var InputDropdown = forwardRef(function (props, ref) {
     var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
@@ -177,13 +187,13 @@ var InputDropdown = forwardRef(function (props, ref) {
             ref.current = elem;
         dropdownRef.current = elem;
     };
-    return (jsxs$1(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper$1, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
+    return (jsxs$1(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper$2, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
 });
-var StyledDropdown$1 = styled(Grid)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"])), function (_a) {
+var StyledDropdown$1 = styled(Grid)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? "flex" : "none");
 }, theme.palette.grey.zero);
-var StyledWrapper$1 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  padding: ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  padding: ", ";\n"])), function (_a) {
+var StyledWrapper$2 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  padding: ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  padding: ", ";\n"])), function (_a) {
     var isScrollable = _a.isScrollable;
     return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
 });
@@ -191,73 +201,32 @@ var ScrollingContainer = styled.div(templateObject_3$6 || (templateObject_3$6 =
     var isScrollable = _a.isScrollable;
     return (isScrollable ? "4px" : "0px");
 }, theme.palette.grey.fifteenB, theme.palette.grey.thirty);
-var templateObject_1$q, templateObject_2$d, templateObject_3$6;
+var templateObject_1$t, templateObject_2$f, templateObject_3$6;
 
 var InputSelectDropdown = 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 = useRef(null);
-    useEffect(function () {
-        var _a;
-        if (isOpenDropdown) {
-            var element = document.querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"));
-            var coordinates = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-            if (coordinates && inputRef.current && element) {
-                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                    top: coordinates.top -
-                        inputRef.current.clientHeight -
-                        element.clientHeight,
-                });
-            }
+    var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
+    var handleClick = function (option) {
+        if (!option.disabled) {
+            handleSelect(option);
         }
-    }, [isOpenDropdown]);
-    var forwardedRef = function (elem) {
-        if (ref) {
-            if (typeof ref === "function")
-                ref(elem);
-            else
-                ref.current = elem;
-        }
-        dropdownRef.current = elem;
     };
-    return (jsx$1(StyledDropdown, __assign({ ref: forwardedRef, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
+    return (jsx(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
 });
-var OptionWrapper = styled.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.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"])), theme.palette.background.light1);
-var selectedStyles = css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), theme.palette.background.light1);
-var StyledDropdown = styled(InputDropdown)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"], ["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"])));
-var templateObject_1$p, templateObject_2$c, templateObject_3$5, templateObject_4$3;
-
-var getFormValue = function (name, form) {
-    var names = name === null || name === void 0 ? void 0 : name.split(".");
-    var fieldValue = form === null || form === void 0 ? void 0 : form.control._formValues;
-    names === null || names === void 0 ? void 0 : names.forEach(function (field) {
-        if (fieldValue) {
-            fieldValue = fieldValue[field];
-        }
-    });
-    return fieldValue;
-};
-var getFormError = function (name, form) {
-    var names = name === null || name === void 0 ? void 0 : name.split(".");
-    var fieldError = form === null || form === void 0 ? void 0 : form.formState.errors;
-    names === null || names === void 0 ? void 0 : names.forEach(function (field) {
-        if (fieldError) {
-            // @ts-ignore
-            fieldError = fieldError[field];
-        }
-    });
-    return fieldError === null || fieldError === void 0 ? void 0 : fieldError.message;
-};
+var OptionWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: ", ";\n  p {\n    color: ", ";\n  }\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: ", ";\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "auto" : "pointer");
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? theme.palette.grey.fiftyP : theme.palette.grey.seventy;
+});
+var StyledDropdown = styled(InputDropdown)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"], ["\n  .KUI-InputDropdown_scroll {\n    max-height: 142px;\n    padding: 0 4px;\n  }\n"])));
+var templateObject_1$s, templateObject_2$e;
 
-var InputSelect = forwardRef(function (props, ref) {
-    var _a, _b;
-    var options = props.options, name = props.name, handleChange = props.handleChange, form = props.form, iconProps = props.iconProps, defaultValue = props.value, other = __rest(props, ["options", "name", "handleChange", "form", "iconProps", "value"]);
+function InputSelectBase(_a) {
+    var _b;
+    var options = _a.options, name = _a.name, disabled = _a.disabled, handleChange = _a.handleChange, iconProps = _a.iconProps, renderOption = _a.renderOption, selectedLabel = _a.selectedLabel, selectedValue = _a.selectedValue, error = _a.error, inputProps = __rest(_a, ["options", "name", "disabled", "handleChange", "iconProps", "renderOption", "selectedLabel", "selectedValue", "error"]);
     var _c = useState(false), isDropdownOpen = _c[0], setIsDropdownOpen = _c[1];
-    var _d = useState(defaultValue || getFormValue(name, form)), value = _d[0], setValue = _d[1];
-    var error = getFormError(name, form);
     var inputRef = useRef(null);
-    var selectedLabel = (_a = options === null || options === void 0 ? void 0 : options.find(function (option) { return String(option.value) === String(value); })) === null || _a === void 0 ? void 0 : _a.label;
-    var register = form === null || form === void 0 ? void 0 : form.register(name);
     var handleOpenDropdown = function () {
         var _a, _b, _c, _d;
         if ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
@@ -269,41 +238,51 @@ var InputSelect = forwardRef(function (props, ref) {
         setIsDropdownOpen(false);
     };
     var handleSelect = function (option) {
-        setValue(option.value);
-        if (handleChange) {
-            handleChange(option.value);
-        }
-        if (form) {
-            register === null || register === void 0 ? void 0 : register.onChange({
-                target: { value: option.value, name: name },
-                type: "change",
-            });
-        }
+        if (handleChange)
+            handleChange(option);
         handleCloseDropdown();
     };
-    var forwardedRef = function (e) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = e;
-        }
-        // @ts-ignore
-        inputRef.current = e;
-        register === null || register === void 0 ? void 0 : register.ref(e);
-    };
-    return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen }, other, { endIcon: !props.disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
+    return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
                         { transition: "all linear .2s" },
                         isDropdownOpen && { transform: "rotate(180deg)" },
-                    ] }, iconProps))) }, register, { ref: forwardedRef })), options && options.length > 0 && !props.disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
+                    ] }, iconProps))) })), options.length > 0 && !disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
                     current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
-                }, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: value }))] }));
-});
-var Wrapper$6 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n  width: fit-content;\n"], ["\n  position: relative;\n  text-align: left;\n  width: fit-content;\n"])));
-var StyledInput = styled(InputWithAdornments)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"])), function (_a) {
+                }, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption }))] }));
+}
+var Wrapper$6 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
+var StyledInput = styled(InputWithAdornments)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var isDropdownOpen = _a.isDropdownOpen;
     return (isDropdownOpen ? 0 : 1);
 });
-var templateObject_1$o, templateObject_2$b;
+var templateObject_1$r, templateObject_2$d;
+
+function InputSelectOption(props) {
+    var option = props.option, selectedValue = props.selectedValue;
+    return (jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsx(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
+}
+var StyledOption$1 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var selected = _a.selected;
+    return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
+}, theme.palette.background.light1);
+var templateObject_1$q;
+
+function InputSelect(_a) {
+    var _b;
+    var options = _a.options, name = _a.name, handleChange = _a.handleChange; _a.form; var valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
+    var _c = useState(valueProp), value = _c[0], setValue = _c[1];
+    var selectedLabel = (_b = options.find(function (option) { return String(option.value) === String(value); })) === null || _b === void 0 ? void 0 : _b.label;
+    var handleSelect = function (option) {
+        setValue(option.value);
+        if (handleChange) {
+            handleChange(option.value);
+        }
+    };
+    useEffect(function () {
+        if (typeof valueProp !== "undefined")
+            setValue(valueProp);
+    }, [valueProp]);
+    return (jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, selectedLabel: selectedLabel, selectedValue: value, name: name, renderOption: function (option, selectedValue) { return (jsx(InputSelectOption, { option: option, selectedValue: selectedValue })); } }, inputProps)));
+}
 
 var checkDisabled$1 = function (year, min, max) {
     return (min && year <= min) || (max && year >= max);
@@ -344,25 +323,25 @@ var CalendarHeaderWithSelect = forwardRef(function (_a, ref) {
     var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
     return (jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: 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 }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: 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.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 Wrapper$5 = styled.div(templateObject_1$p || (templateObject_1$p = __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$p;
 
 var CalendarStandardContainer = forwardRef(function (_a, ref) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
     return jsx(DatePickerContainer, __assign({ ref: ref }, props));
 });
-var DatePickerContainer = styled.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--today {\n    color: ", ";\n    background-color: ", ";\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--today {\n    color: ", ";\n    background-color: ", ";\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"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.light, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
-var templateObject_1$m;
+var DatePickerContainer = styled.div(templateObject_1$o || (templateObject_1$o = __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--today {\n    color: ", ";\n    background-color: ", ";\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--today {\n    color: ", ";\n    background-color: ", ";\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"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.light, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
+var templateObject_1$o;
 
 var CalendarStandardHeader = forwardRef(function (_a, ref) {
     var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
     var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
     return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
 });
-var HeaderWrapper = styled(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(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(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"])));
-var templateObject_1$l, templateObject_2$a, templateObject_3$4;
+var HeaderWrapper = styled(Grid)(templateObject_1$n || (templateObject_1$n = __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(Heading)(templateObject_2$c || (templateObject_2$c = __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(Button)(templateObject_3$5 || (templateObject_3$5 = __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"])));
+var templateObject_1$n, templateObject_2$c, templateObject_3$5;
 
 var InputForDatepicker = forwardRef(function (props, ref) {
     var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
@@ -377,23 +356,23 @@ var InputForDatepicker = forwardRef(function (props, ref) {
     var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
     return (jsx(InputWithMask$1, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
 });
-var IconWrapper = styled.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 IconWrapper = styled.div(templateObject_1$m || (templateObject_1$m = __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$m;
 
 var MonthPickerContainer = forwardRef(function (_a, ref) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
-    return jsx(StyledContainer, __assign({ ref: ref }, props));
+    return jsx(StyledContainer$1, __assign({ ref: ref }, props));
 });
-var StyledContainer = styled.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"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
-var templateObject_1$j;
+var StyledContainer$1 = styled.div(templateObject_1$l || (templateObject_1$l = __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"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
+var templateObject_1$l;
 
 var MonthPickerHeader = forwardRef(function (_a, ref) {
     var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
     return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
 });
-var StyledIconButton = styled(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(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 StyledIconButton = styled(IconButton)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"], ["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"])));
+var StyledHeader = styled(Grid)(templateObject_2$b || (templateObject_2$b = __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$k, templateObject_2$b;
 
 var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
     var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
@@ -403,8 +382,8 @@ var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
                 return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", 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 (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
             } }) })));
 });
-var Wrapper$4 = styled.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 Wrapper$4 = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
+var templateObject_1$j;
 
 var MenuItem = 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;
@@ -439,16 +418,16 @@ var MenuItem = forwardRef(function (_a, ref) {
     }, []);
     return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, __assign({ ref: ref }, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
 });
-var ButtonWrapper$1 = styled.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 = 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"])), theme.palette.grey.seventy);
-var templateObject_1$g, templateObject_2$8;
+var ButtonWrapper$1 = styled.div(templateObject_1$i || (templateObject_1$i = __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 = css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"], ["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"])), theme.palette.grey.seventy);
+var templateObject_1$i, templateObject_2$a;
 
 var DesktopMenuPanel = forwardRef(function (_a, ref) {
     var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
     return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
 });
-var Wrapper$3 = styled(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"])), theme.palette.background.light1);
-var templateObject_1$f;
+var Wrapper$3 = styled(Grid)(templateObject_1$h || (templateObject_1$h = __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"])), theme.palette.background.light1);
+var templateObject_1$h;
 
 var InputWithMask = forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
@@ -524,15 +503,26 @@ var PassportStrengthBar = forwardRef(function (_a, ref) {
         : -1;
     return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(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.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.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.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(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"])), theme.palette.grey.fifteenB, function (_a) {
+var Wrapper$2 = styled.div(templateObject_1$g || (templateObject_1$g = __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.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
+var ReliabilityLevel = styled.div(templateObject_3$4 || (templateObject_3$4 = __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(LinearProgress)(templateObject_4$3 || (templateObject_4$3 = __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"])), theme.palette.grey.fifteenB, function (_a) {
     var color = _a.color;
     return color;
 });
-var Description = styled(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$2, templateObject_5;
+var Description = styled(Caption)(templateObject_5$1 || (templateObject_5$1 = __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$g, templateObject_2$9, templateObject_3$4, templateObject_4$3, templateObject_5$1;
+
+var getFormValue = function (name, form) {
+    var names = name === null || name === void 0 ? void 0 : name.split(".");
+    var fieldValue = form === null || form === void 0 ? void 0 : form.control._formValues;
+    names === null || names === void 0 ? void 0 : names.forEach(function (field) {
+        if (fieldValue) {
+            fieldValue = fieldValue[field];
+        }
+    });
+    return fieldValue;
+};
 
 var isValidWithMaskExp = /^[^_]+$/;
 var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
@@ -576,13 +566,13 @@ var InputPassword = forwardRef(function (props, ref) {
     }, []);
     return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
 });
-var EyeIconWrapper = styled.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 EyeIconWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __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$f;
 
 var InputTextAreaMobile = forwardRef(function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
-var InputWrapper = styled.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.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;
+var InputWrapper = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"])));
+var TextAreaWrapper = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"])));
+var templateObject_1$e, templateObject_2$8;
 
 var useToggle = function (isModalOpen) {
     if (isModalOpen === void 0) { isModalOpen = false; }
@@ -600,10 +590,10 @@ var ModalFooter = forwardRef(function (_a, ref) {
     var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
     return (jsxs$1(StyledFooter, __assign({ ref: ref }, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] })));
 });
-var StyledFooter = styled.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"])), theme.palette.grey.zero);
-var ButtonWrapper = styled.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(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;
+var StyledFooter = styled.div(templateObject_1$d || (templateObject_1$d = __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"])), theme.palette.grey.zero);
+var ButtonWrapper = styled.div(templateObject_2$7 || (templateObject_2$7 = __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(Button)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"])));
+var templateObject_1$d, templateObject_2$7, templateObject_3$3;
 
 function setRef(ref, value) {
     if (typeof ref === "function") {
@@ -707,14 +697,14 @@ InputWithDatePicker.defaultProps = {
     footerLabel: "Подтвердить",
     alignTitle: "center",
 };
-var ContentWrapper$1 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
-var StyledCalendarStandardContainer = styled(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"])), theme.palette.background.light1, theme.palette.background.light1);
-var DayContent = styled.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(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  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"])), function (_a) {
+var ContentWrapper$1 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
+var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$6 || (templateObject_2$6 = __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"])), theme.palette.background.light1, theme.palette.background.light1);
+var DayContent = styled.span(templateObject_3$2 || (templateObject_3$2 = __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(Modal)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\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 templateObject_1$c, templateObject_2$6, templateObject_3$2, templateObject_4$2;
 
 var shortMonths = [
     "ЯНВ",
@@ -777,9 +767,9 @@ var MobileInputWithMonthPicker = forwardRef(function (_a, ref) {
     };
     return (jsxs$1(Wrapper$1, __assign({ ref: ref }, { children: [jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] })));
 });
-var Wrapper$1 = styled.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.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 Wrapper$1 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"])));
+var ContentWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __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$b, templateObject_2$5;
 
 var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
 
@@ -795,9 +785,9 @@ var MobileMenuPanel = forwardRef(function (_a, ref) {
     };
     return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
 });
-var Wrapper = styled.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"])), theme.palette.background.light1);
-var SlideWrapper = styled.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;
+var Wrapper = styled.div(templateObject_1$a || (templateObject_1$a = __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"])), theme.palette.background.light1);
+var SlideWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __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$a, templateObject_2$4;
 
 var useWindowWidth = function (time) {
     if (time === void 0) { time = 10; }
@@ -847,8 +837,8 @@ var MenuPanel = forwardRef(function (_a, ref) {
 MenuPanel.defaultProps = {
     variant: "grey",
 };
-var fullHeightStyles = 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 fullHeightStyles = css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  height: calc(100vh - 121px);\n"], ["\n  height: calc(100vh - 121px);\n"])));
+var templateObject_1$9;
 
 var Switch = forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
@@ -901,14 +891,14 @@ InputPhoneWithForm.defaultProps = {
 };
 
 var Table = forwardRef(function (props, ref) { return jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
-var StyledTable = styled.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;
+var StyledTable = styled.table(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  width: 100%;\n  border-spacing: 0;\n"], ["\n  width: 100%;\n  border-spacing: 0;\n"])));
+var templateObject_1$8;
 
-var TableHeadCell = styled.th(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  padding: 0;\n  text-align: left;\n"], ["\n  padding: 0;\n  text-align: left;\n"])));
-var templateObject_1$5;
+var TableHeadCell = styled.th(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  padding: 0;\n  text-align: left;\n"], ["\n  padding: 0;\n  text-align: left;\n"])));
+var templateObject_1$7;
 
-var TableCell = styled.td(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
-var templateObject_1$4;
+var TableCell = styled.td(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
+var templateObject_1$6;
 
 var TableRow = forwardRef(function (_a, ref) {
     var children = _a.children, other = __rest(_a, ["children"]);
@@ -947,15 +937,15 @@ var PopperBase = forwardRef(function (props, ref) {
     props.placement; var open = props.open, children = props.children, spacing = props.spacing, className = props.className, style = props.style, other = __rest(props, ["placement", "open", "children", "spacing", "className", "style"]);
     return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
 });
-var StyledPopperWrapper = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: 10;\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"], ["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: 10;\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"])), function (_a) {
+var StyledPopperWrapper = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: 10;\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"], ["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: 10;\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"])), function (_a) {
     var spacing = _a.spacing;
     return spacing || 0;
 }, theme.breakpoints.xxs);
-var StyledPopper = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"], ["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"])), function (_a) {
+var StyledPopper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"], ["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"])), function (_a) {
     var open = _a.open;
     return (open ? 1 : 0);
 });
-var templateObject_1$3, templateObject_2$1;
+var templateObject_1$5, templateObject_2$3;
 
 var PopperWithPortal = forwardRef(function (props, ref) {
     var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
@@ -999,9 +989,9 @@ var PopperWithPortal = forwardRef(function (props, ref) {
     // TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
     // Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
     // Распожить стрелочку к контенту посередине контента
-    return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n            body {\n              position: relative;\n            }\n          "], ["\n            body {\n              position: relative;\n            }\n          "]))) }), jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
+    return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n            body {\n              position: relative;\n            }\n          "], ["\n            body {\n              position: relative;\n            }\n          "]))) }), jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
 });
-var templateObject_1$2;
+var templateObject_1$4;
 
 var StaticPopper = forwardRef(function (props, ref) {
     var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
@@ -1083,24 +1073,193 @@ var Tooltip = forwardRef(function (props, ref) {
     useEffect(function () {
         setOpen(open);
     }, [open]);
-    return (jsxs$1(StyledWrapper, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsx(StyledContent, { children: children }) })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
+    return (jsxs$1(StyledWrapper$1, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsx(StyledContent, { children: children }) })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
 });
-var containerCSS = css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: inline-flex;\n  width: 100%;\n  height: fit-content;\n"], ["\n  display: inline-flex;\n  width: 100%;\n  height: fit-content;\n"])));
-var StyledWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  position: relative;\n"], ["\n  ", ";\n  position: relative;\n"])), containerCSS);
-var StyledContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  cursor: ", ";\n"], ["\n  ", ";\n  cursor: ", ";\n"])), containerCSS, function (_a) {
+var containerCSS = css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: inline-flex;\n  width: 100%;\n  height: fit-content;\n"], ["\n  display: inline-flex;\n  width: 100%;\n  height: fit-content;\n"])));
+var StyledWrapper$1 = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  ", ";\n  position: relative;\n"], ["\n  ", ";\n  position: relative;\n"])), containerCSS);
+var StyledContentWrapper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  ", ";\n  cursor: ", ";\n"], ["\n  ", ";\n  cursor: ", ";\n"])), containerCSS, function (_a) {
     var cursor = _a.cursor;
     return cursor;
 });
-var StyledContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  z-index: -1;\n"], ["\n  ", ";\n  z-index: -1;\n"])), containerCSS);
-var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
+var StyledContent = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  ", ";\n  z-index: -1;\n"], ["\n  ", ";\n  z-index: -1;\n"])), containerCSS);
+var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1;
 
 var ButtonSelect = forwardRef(function (props, ref) {
     var _a;
     var options = props.options, otherProps = __rest(props, ["options"]);
     return (jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
 });
-var StyledInputSelect = styled(InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n\n    @media (max-width: ", "px) {\n      height: 32px;\n      input {\n        height: 32px;\n      }\n    }\n  }\n  & + div {\n    top: 22px;\n    padding-top: 22px;\n  }\n"], ["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n\n    @media (max-width: ", "px) {\n      height: 32px;\n      input {\n        height: 32px;\n      }\n    }\n  }\n  & + div {\n    top: 22px;\n    padding-top: 22px;\n  }\n"])), theme.breakpoints.xs);
-var templateObject_1;
+var StyledInputSelect = styled(InputSelect)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n\n    @media (max-width: ", "px) {\n      height: 32px;\n      input {\n        height: 32px;\n      }\n    }\n  }\n  & + div {\n    top: 22px;\n    padding-top: 22px;\n  }\n"], ["\n  &.KUI-Input_container {\n    height: 40px;\n    width: fit-content;\n    input {\n      height: 40px;\n      border-radius: 66px;\n      padding: 0 12px;\n      transform: none;\n      font-size: 12px;\n      line-height: 14px;\n      margin: 0 !important;\n      width: auto !important;\n    }\n\n    @media (max-width: ", "px) {\n      height: 32px;\n      input {\n        height: 32px;\n      }\n    }\n  }\n  & + div {\n    top: 22px;\n    padding-top: 22px;\n  }\n"])), theme.breakpoints.xs);
+var templateObject_1$2;
+
+function InputSelectWithController(_a) {
+    var _b, _c;
+    var options = _a.options, name = _a.name, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
+    var control = useController({
+        control: form.control,
+        name: name,
+    });
+    var error = (_b = control.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var handleSelect = function (option) {
+        var _a;
+        if (handleChange) {
+            handleChange(option.value);
+        }
+        if (form) {
+            (_a = control.field) === null || _a === void 0 ? void 0 : _a.onChange({
+                target: { value: option.value, name: name },
+                type: "change",
+            });
+        }
+    };
+    return (jsx(InputSelect, __assign({ options: options, handleChange: handleSelect, error: error, name: name, value: valueProp || ((_c = control.field) === null || _c === void 0 ? void 0 : _c.value) }, inputProps)));
+}
+
+function InputMultiSelectOption(props) {
+    var option = props.option, selectedValue = props.selectedValue;
+    var selected = selectedValue.includes(option.value);
+    return (jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsx(Checkbox, { checked: selected, label: jsx(StyledCaption, __assign({ selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
+}
+var StyledOption = styled(Grid)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n    p {\n      color: ", " !important;\n    }\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n    p {\n      color: ", " !important;\n    }\n  }\n"])), function (_a) {
+    var selected = _a.selected;
+    return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
+}, theme.palette.background.light1, theme.palette.grey.seventy);
+var StyledCaption = styled(Caption)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  color: ", " !important;\n"], ["\n  color: ", " !important;\n"])), function (_a) {
+    var selected = _a.selected;
+    return selected
+        ? theme.palette.grey.seventy
+        : theme.palette.grey.fiftyP;
+});
+var templateObject_1$1, templateObject_2$1;
+
+function InputMultiSelect(_a) {
+    var _b, _c;
+    var options = _a.options, name = _a.name, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
+    var control = form
+        ? useController({
+            control: form.control,
+            name: name,
+        })
+        : null;
+    var _d = useState(valueProp || ((_b = control === null || control === void 0 ? void 0 : control.field) === null || _b === void 0 ? void 0 : _b.value) || []), value = _d[0], setValue = _d[1];
+    var selectedLabel = options
+        .filter(function (option) { return value.includes(option.value); })
+        .map(function (option) { return option.label; })
+        .join(", ");
+    var error = (_c = control === null || control === void 0 ? void 0 : control.fieldState.error) === null || _c === void 0 ? void 0 : _c.message;
+    useEffect(function () {
+        var _a;
+        if (form) {
+            (_a = control === null || control === void 0 ? void 0 : control.field) === null || _a === void 0 ? void 0 : _a.onChange({
+                target: { value: value, name: name },
+                type: "change",
+            });
+        }
+    }, [value]);
+    var handleSelect = function (option) {
+        if (value.includes(option.value)) {
+            setValue(function (prev) { return prev.filter(function (elem) { return elem !== option.value; }); });
+        }
+        else {
+            setValue(function (prev) { return __spreadArray(__spreadArray([], prev, true), [option.value], false); });
+        }
+        if (handleChange) {
+            handleChange(option.value);
+        }
+    };
+    return (jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, error: error, selectedLabel: selectedLabel, selectedValue: value, name: name, isLabelShrink: !!selectedLabel, renderOption: function (option, selectedValue) { return (jsx(InputMultiSelectOption, { option: option, selectedValue: selectedValue })); } }, inputProps)));
+}
+
+var RadioButtons = forwardRef(function (_a, ref) {
+    var options = _a.options, disabled = _a.disabled, direction = _a.direction, defaultValue = _a.defaultValue, valueOfProps = _a.value, onChange = _a.onChange, isSquare = _a.isSquare, otherProps = __rest(_a, ["options", "disabled", "direction", "defaultValue", "value", "onChange", "isSquare"]);
+    var _b = useState(defaultValue || valueOfProps || options[0].value), value = _b[0], setValue = _b[1];
+    var handleChange = function (e) {
+        var radioValue = e.target.value;
+        setValue(radioValue);
+        if (onChange) {
+            onChange(e, radioValue);
+        }
+    };
+    var handleClick = function (e) {
+        var radioValue = e.target.value;
+        if (String(value) === String(radioValue)) {
+            setValue(null);
+            if (onChange) {
+                onChange(e, null);
+            }
+        }
+    };
+    useEffect(function () {
+        if (valueOfProps) {
+            setValue(valueOfProps);
+        }
+    }, [valueOfProps]);
+    return (jsx(Grid, __assign({ container: true, direction: direction, ref: ref }, { children: options.map(function (option) { return (jsx(Radio, __assign({ value: option.value, label: option.label, disabled: Boolean(disabled), checked: String(value) === String(option.value), isSquare: isSquare, onClick: handleClick, onChange: handleChange }, otherProps), option.value)); }) })));
+});
+RadioButtons.defaultProps = {
+    disabled: false,
+    direction: "row",
+    fullWidth: false,
+    defaultValue: undefined,
+};
+RadioButtons.displayName = "RadioButtons";
+
+function RadioButtonsWithController(_a) {
+    var form = _a.form, name = _a.name, defaultValue = _a.defaultValue, otherProps = __rest(_a, ["form", "name", "defaultValue"]);
+    var handleChange = function (e, value, field) {
+        field.onChange({ target: { value: value, name: name }, type: "change" });
+        if (otherProps.onChange) {
+            otherProps.onChange(e, value);
+        }
+    };
+    useEffect(function () {
+        if (!form.getValues(name) && !defaultValue) {
+            form.setValue(name, otherProps.options[0].value);
+        }
+    }, []);
+    return (jsx(Controller, { control: form.control, name: String(name), render: function (_a) {
+            var field = _a.field;
+            return (jsx(RadioButtons, __assign({}, otherProps, field, { defaultValue: defaultValue, onChange: function (e, value) {
+                    return handleChange(e, value, field);
+                } })));
+        } }));
+}
+
+function RadioGroupWithLabel(props) {
+    var _a;
+    var title = props.title, className = props.className, direction = props.direction, form = props.form, name = props.name, otherProps = __rest(props, ["title", "className", "direction", "form", "name"]);
+    var fieldState = useController({
+        control: form.control,
+        name: name,
+    }).fieldState;
+    var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    return (jsxs$1(StyledContainer, { children: [jsxs$1(StyledWrapper, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsx(Grid, __assign({ item: true }, { children: jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsx(InputMessage, { variant: "error", msg: errorMessage })] }));
+}
+var StyledContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var columnDirectionCSS = function (_a) {
+    var hasError = _a.hasError;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 12px 15px 15px;\n  border-radius: ", ";\n"], ["\n  padding: 12px 15px 15px;\n  border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
+};
+var rowDirectionCSS = function (_a) {
+    var hasError = _a.hasError, withTitle = _a.withTitle;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n  border-radius: ", ";\n"], ["\n  padding: ", ";\n  border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "66px 66px 0 0" : "66px");
+};
+var StyledWrapper = styled(Grid, {
+    shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  ", ";\n"])), function (_a) {
+    var hasError = _a.hasError;
+    return hasError ? theme.palette.red.fiftyP : theme.palette.grey.fifteenB;
+}, function (_a) {
+    var direction = _a.direction, hasError = _a.hasError, withTitle = _a.withTitle;
+    return direction === "column"
+        ? columnDirectionCSS({ hasError: hasError })
+        : rowDirectionCSS({ hasError: hasError, withTitle: withTitle });
+});
+var StyledTitle = styled(Caption)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), function (_a) {
+    var direction = _a.direction;
+    return (direction === "vertical" ? 8 : 0);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
-export { Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
+export { Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputMultiSelect, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputSelectWithController, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, RadioButtons, RadioButtonsWithController, RadioGroupWithLabel, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
 //# sourceMappingURL=index.js.map