kui-complex 0.0.79 → 0.0.82

package/cjs/index.js

@@ -0,0 +1,1981 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react-datepicker/dist/react-datepicker.css');
+require('swiper/swiper-bundle.css');
+var jsxRuntime$1 = require('@emotion/react/jsx-runtime');
+var styled = require('@emotion/styled');
+var react = require('@emotion/react');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var kuiBasic = require('kui-basic');
+var classNames = require('classnames');
+var luxon = require('luxon');
+var kuiIcon = require('kui-icon');
+var _ = require('lodash');
+var DatePicker = require('react-datepicker');
+var reactHookForm = require('react-hook-form');
+var reactScroll = require('react-scroll');
+var ru = require('date-fns/locale/ru');
+var reactRouterDom = require('react-router-dom');
+var reactRouter = require('react-router');
+var Swiper = require('react-id-swiper');
+var ReactDOM = require('react-dom');
+var jsApiLoader = require('@googlemaps/js-api-loader');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
+var ru__default = /*#__PURE__*/_interopDefaultLegacy(ru);
+var Swiper__default = /*#__PURE__*/_interopDefaultLegacy(Swiper);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+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;
+}
+
+var UndefinedAvatar = React.forwardRef(function (_a, ref) {
+    var label = _a.label, otherProps = __rest(_a, ["label"]);
+    if (!label) {
+        return jsxRuntime.jsx("div", {});
+    }
+    var formattedLabel = label
+        .split(" ")
+        .map(function (el) { return el[0]; })
+        .slice(0, 3)
+        .join("");
+    return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
+});
+var Wrapper$8 = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &,\n  p {\n    transition: all ease-out 0.3s;\n  }\n  @media (min-width: 900px) {\n    &:hover {\n      background-color: ", ";\n      p {\n        color: white;\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &,\n  p {\n    transition: all ease-out 0.3s;\n  }\n  @media (min-width: 900px) {\n    &:hover {\n      background-color: ", ";\n      p {\n        color: white;\n      }\n    }\n  }\n"])), kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main);
+var templateObject_1$H;
+
+var Avatar = React.forwardRef(function (props, ref) {
+    var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
+    return (jsxRuntime$1.jsx(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsxRuntime$1.jsx(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsxRuntime$1.jsx(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
+});
+var Wrapper$7 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __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__default["default"].img(templateObject_2$p || (templateObject_2$p = __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" && react.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
+};
+var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
+    shouldForwardProp: function (prop) { return prop !== "size"; },
+})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
+var sizeStyles = {
+    s: react.css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "], ["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "]))),
+    lg: react.css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    width: 80px;\n    height: 80px;\n  "], ["\n    width: 80px;\n    height: 80px;\n  "]))),
+};
+var templateObject_1$G, templateObject_2$p, templateObject_3$c, templateObject_4$6, templateObject_5$4, templateObject_6$1;
+
+var ButtonTab = React.forwardRef(function (_a, ref) {
+    var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
+    var handleClick = function () {
+        onClick(index);
+    };
+    return (jsxRuntime$1.jsx(StyledButton$1, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref, className: classNames__default["default"]("KUI-ButtonTab", isActive && "KUI-ButtonTab_active") }, { children: label })));
+});
+var StyledButton$1 = styled__default["default"](kuiBasic.Button)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  margin-right: 24px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: 24px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
+var inactiveStyles = react.css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  p {\n    color: ", ";\n  }\n"], ["\n  p {\n    color: ", ";\n  }\n"])), kuiBasic.theme.palette.grey.seventy);
+var templateObject_1$F, templateObject_2$o;
+
+var updateQueryParams = function (newLink) {
+    var searchQuery = new URLSearchParams(window.location.search);
+    var hrefLinkParams = newLink.split(/\?|&/);
+    var hrefParams = Object.fromEntries(new URLSearchParams(hrefLinkParams.slice(1).join("&")).entries());
+    var searchParams = Object.fromEntries(searchQuery.entries());
+    var route = hrefLinkParams[0];
+    Object.keys(searchParams).forEach(function (key, index) {
+        if (key in hrefParams) {
+            searchParams[key] = hrefParams[key];
+            delete hrefParams[key];
+        }
+        if (key !== "id") {
+            route += "".concat(index === 0 ? "?" : "&").concat(key, "=").concat(searchParams[key]);
+        }
+    });
+    Object.keys(hrefParams).forEach(function (key) {
+        route += "&".concat(key, "=").concat(hrefParams[key]);
+    });
+    window.history.pushState({ route: route }, "", route);
+};
+
+var ButtonsPanel = React.forwardRef(function (_a, ref) {
+    var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, startComponent = _a.startComponent, endComponent = _a.endComponent, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange", "startComponent", "endComponent"]);
+    var _b = React__namespace.useState(Number(activeTab)), value = _b[0], setValue = _b[1];
+    var handleChange = function (newValue) {
+        setValue(newValue);
+        if (paths && paths.length)
+            updateQueryParams(paths[newValue]);
+        if (onChange)
+            onChange(newValue);
+    };
+    React.useEffect(function () {
+        setValue(Number(activeTab));
+    }, [activeTab]);
+    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(StyledContainer$2, __assign({ css: isSticky && { position: "sticky" }, ref: ref }, otherProps, { children: jsxRuntime$1.jsxs(StyledWrapper$9, __assign({ className: "KUI-ButtonTabs" }, { children: [startComponent, tabs.map(function (item, index) { return (jsxRuntime$1.jsx(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item }, item)); }), endComponent] })) })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsxRuntime$1.jsx(jsxRuntime$1.Fragment, { children: item }) }), index)); })] }));
+});
+ButtonsPanel.defaultProps = {
+    isSticky: false,
+};
+var Content = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var StyledContainer$2 = styled__default["default"].div(templateObject_2$n || (templateObject_2$n = __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"])), kuiBasic.theme.palette.grey.zero);
+var StyledWrapper$9 = styled__default["default"](kuiBasic.Container)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var templateObject_1$E, templateObject_2$n, templateObject_3$b;
+
+var InputDropdown = React.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"]);
+    var _a = React.useState(false), isScrollable = _a[0], setIsScrollable = _a[1];
+    var dropdownRef = React.useRef(null);
+    var closePopUp = function (e) {
+        if (dropdownRef.current && buttonRef && buttonRef.current) {
+            if (!dropdownRef.current.contains(e.target) &&
+                !buttonRef.current.contains(e.target)) {
+                handleClose();
+            }
+        }
+    };
+    React.useEffect(function () {
+        document.addEventListener("click", closePopUp);
+        return function () {
+            document.removeEventListener("click", closePopUp);
+        };
+    });
+    React.useEffect(function () {
+        var _a;
+        if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
+            if (isOpen) {
+                buttonRef.current.style.zIndex = "4";
+                var scrollContainer = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0];
+                if (scrollContainer) {
+                    var hasScroll = scrollContainer.scrollHeight > scrollContainer.clientHeight;
+                    setIsScrollable(hasScroll);
+                }
+            }
+            else {
+                buttonRef.current.style.zIndex = "1";
+            }
+        }
+    }, [isOpen]);
+    if (!isOpen) {
+        return null;
+    }
+    var forwardedRef = function (elem) {
+        if (typeof ref === "function")
+            ref(elem);
+        else if (ref)
+            ref.current = elem;
+        dropdownRef.current = elem;
+    };
+    return (jsxRuntime.jsxs(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsxRuntime.jsx(StyledWrapper$8, __assign({ isScrollable: isScrollable }, { children: jsxRuntime.jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
+});
+var StyledDropdown$2 = styled__default["default"](kuiBasic.Grid)(templateObject_1$D || (templateObject_1$D = __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");
+}, kuiBasic.theme.palette.grey.zero);
+var StyledWrapper$8 = styled__default["default"].div(templateObject_2$m || (templateObject_2$m = __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";
+});
+var ScrollingContainer = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  box-sizing: border-box;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  user-select: none;\n  ::-webkit-scrollbar {\n    width: ", ";\n    position: absolute;\n    right: 8px;\n  }\n  ::-webkit-scrollbar-track,\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    transition: all ease-out 0.3s;\n  }\n\n  ::-webkit-resizer,\n  ::-webkit-scrollbar-button,\n  ::-webkit-scrollbar-corner {\n    display: none;\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n"], ["\n  width: 100%;\n  max-height: 389px;\n  box-sizing: border-box;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  user-select: none;\n  ::-webkit-scrollbar {\n    width: ", ";\n    position: absolute;\n    right: 8px;\n  }\n  ::-webkit-scrollbar-track,\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    transition: all ease-out 0.3s;\n  }\n\n  ::-webkit-resizer,\n  ::-webkit-scrollbar-button,\n  ::-webkit-scrollbar-corner {\n    display: none;\n  }\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n"])), function (_a) {
+    var isScrollable = _a.isScrollable;
+    return (isScrollable ? "4px" : "0px");
+}, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.thirty);
+var templateObject_1$D, templateObject_2$m, templateObject_3$a;
+
+var InputSelectDropdown = React.forwardRef(function (_a, ref) {
+    var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
+    var handleClick = function (option) {
+        if (!option.disabled) {
+            handleSelect(option);
+        }
+    };
+    return (jsxRuntime.jsx(StyledDropdown$1, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsxRuntime.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__default["default"].div(templateObject_1$C || (templateObject_1$C = __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 ? kuiBasic.theme.palette.grey.fiftyP : kuiBasic.theme.palette.grey.seventy;
+});
+var StyledDropdown$1 = styled__default["default"](InputDropdown)(templateObject_2$l || (templateObject_2$l = __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$C, templateObject_2$l;
+
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+function useForkRef() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return React__namespace.useMemo(function () {
+        if (refs.every(function (ref) { return ref == null; })) {
+            return null;
+        }
+        return function (instance) {
+            refs.forEach(function (ref) {
+                setRef(ref, instance);
+            });
+        };
+    }, refs);
+}
+
+var InputSelectBase = React.forwardRef(function (_a, ref) {
+    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 = React.useState(false), isDropdownOpen = _c[0], setIsDropdownOpen = _c[1];
+    var inputRef = React.useRef(null);
+    var forwardedRef = useForkRef(inputRef, ref);
+    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) {
+            (_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement.focus();
+        }
+        setIsDropdownOpen(function (prev) { return !prev; });
+    };
+    var handleCloseDropdown = function () {
+        setIsDropdownOpen(false);
+    };
+    var handleSelect = function (option) {
+        if (handleChange)
+            handleChange(option);
+        handleCloseDropdown();
+    };
+    return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput$3, __assign({ onClick: handleOpenDropdown, ref: forwardedRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, __assign({ width: 12, height: 13, css: [
+                        { transition: "all linear .2s" },
+                        isDropdownOpen && { transform: "rotate(180deg)" },
+                    ] }, iconProps))) })), options.length > 0 && !disabled && (jsxRuntime$1.jsx(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: selectedValue, renderOption: renderOption }))] }));
+});
+var Wrapper$6 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
+var StyledInput$3 = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$k || (templateObject_2$k = __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$B, templateObject_2$k;
+
+function InputSelectOption(props) {
+    var option = props.option, selectedValue = props.selectedValue;
+    return (jsxRuntime.jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
+}
+var StyledOption$1 = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __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 ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
+}, kuiBasic.theme.palette.background.light1);
+var templateObject_1$A;
+
+var InputSelect = React.forwardRef(function (_a, ref) {
+    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 = React.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);
+        }
+    };
+    React.useEffect(function () {
+        if (typeof valueProp !== "undefined")
+            setValue(valueProp);
+    }, [valueProp]);
+    return (jsxRuntime.jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, selectedLabel: selectedLabel, selectedValue: value, name: name, renderOption: function (option, selectedValue) { return (jsxRuntime.jsx(InputSelectOption, { option: option, selectedValue: selectedValue })); }, ref: ref }, inputProps)));
+});
+
+var checkDisabled$1 = function (year, min, max) {
+    return (min && year <= min) || (max && year >= max);
+};
+var SelectYear = React.forwardRef(function (_a, ref) {
+    var yearOptions = _a.yearOptions; _a.options; var min = _a.min, max = _a.max, props = __rest(_a, ["yearOptions", "options", "min", "max"]);
+    var formattedYearOptions = yearOptions.map(function (year) { return (__assign(__assign({}, year), { disabled: checkDisabled$1(Number(year.value), min, max) })); });
+    return (jsxRuntime.jsx(InputSelect, __assign({ ref: ref, label: "Year", options: formattedYearOptions }, props)));
+});
+
+var checkDisabled = function (month, min, max) { return (min && month <= min) || (max && month >= max); };
+var monthValues = [
+    { value: 0, label: "January" },
+    { value: 1, label: "February" },
+    { value: 2, label: "March" },
+    { value: 3, label: "April" },
+    { value: 4, label: "May" },
+    { value: 5, label: "June" },
+    { value: 6, label: "July" },
+    { value: 7, label: "August" },
+    { value: 8, label: "September" },
+    { value: 9, label: "October" },
+    { value: 10, label: "November" },
+    { value: 11, label: "December" },
+];
+var SelectMonth = React.forwardRef(function (props, ref) {
+    var min = props.min, max = props.max; props.options; var other = __rest(props, ["min", "max", "options"]);
+    var formattedMonths = monthValues.map(function (month) { return (__assign(__assign({}, month), { disabled: checkDisabled(month.value, min, max) })); });
+    return (jsxRuntime.jsx(InputSelect, __assign({ ref: ref, label: "Month", options: formattedMonths }, other)));
+});
+
+var CalendarHeaderWithSelect = React.forwardRef(function (_a, ref) {
+    var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions, max = _a.max, min = _a.min;
+    var year = date.getFullYear();
+    var month = date.getMonth();
+    var currentYear = luxon.DateTime.now().year;
+    var minMonth = (min === null || min === void 0 ? void 0 : min.year) === currentYear ? min === null || min === void 0 ? void 0 : min.month : 0;
+    var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
+    return (jsxRuntime.jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
+});
+var Wrapper$5 = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __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$z;
+
+var CalendarStandardContainer = React.forwardRef(function (_a, ref) {
+    _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
+    return jsxRuntime.jsx(DatePickerContainer, __assign({ ref: ref }, props));
+});
+var DatePickerContainer = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __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"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.seventy, kuiBasic.theme.palette.grey.zero);
+var templateObject_1$y;
+
+var CalendarStandardHeader = React.forwardRef(function (_a, ref) {
+    var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
+    var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
+    return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsxRuntime.jsx(kuiIcon.PrevArrowIcon, { width: 10, height: 10 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsxRuntime.jsx(kuiIcon.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
+});
+var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  padding: 0 6px 34px;\n  @media (max-width: 600px) {\n    h2 {\n      font-size: 16px;\n    }\n  }\n"], ["\n  padding: 0 6px 34px;\n  @media (max-width: 600px) {\n    h2 {\n      font-size: 16px;\n    }\n  }\n"])));
+var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    font-weight: 700;\n  }\n"], ["\n  @media (max-width: 600px) {\n    font-weight: 700;\n  }\n"])));
+var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$9 || (templateObject_3$9 = __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$x, templateObject_2$j, templateObject_3$9;
+
+var InputForDatepicker = React.forwardRef(function (props, ref) {
+    var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
+    var handleIconClick = function () {
+        if (handleClick) {
+            handleClick();
+        }
+        else {
+            onClick();
+        }
+    };
+    var Icon = function () { return (jsxRuntime.jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) }))); };
+    return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref })));
+});
+var IconWrapper = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __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$w;
+
+var MonthPickerContainer = React.forwardRef(function (_a, ref) {
+    _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
+    return jsxRuntime.jsx(StyledContainer$1, __assign({ ref: ref }, props));
+});
+var StyledContainer$1 = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white !important;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white !important;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
+var templateObject_1$v;
+
+var MonthPickerHeader = React.forwardRef(function (_a, ref) {
+    var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
+    return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
+});
+var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"], ["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"])));
+var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$i || (templateObject_2$i = __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$u, templateObject_2$i;
+
+var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
+    var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
+    return (jsxRuntime.jsx(Wrapper$4, __assign({ ref: ref }, { children: jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: form.control, render: function (_a) {
+                var _b;
+                var field = _a.field, fieldState = _a.fieldState;
+                return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "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 (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
+            } }) })));
+});
+var Wrapper$4 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
+var templateObject_1$t;
+
+var MenuItem = React.forwardRef(function (_a, ref) {
+    var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
+    var startScrolling = function () {
+        setIsScrolling(true);
+    };
+    var endScrolling = function () {
+        setIsScrolling(false);
+    };
+    var handleSelect = function () {
+        if (!isScrolling) {
+            handleClick(index);
+        }
+    };
+    React.useEffect(function () {
+        if (active === index) {
+            reactScroll.scroller.scrollTo(tab.label, { offset: offset });
+        }
+        reactScroll.Events.scrollEvent.register("begin", function (to, element) {
+            startScrolling();
+            if (element) {
+                handleClick(Number(element.dataset.index));
+            }
+        });
+        reactScroll.Events.scrollEvent.register("end", function (to, element) {
+            setTimeout(endScrolling);
+        });
+        return function () {
+            reactScroll.Events.scrollEvent.remove("begin");
+            reactScroll.Events.scrollEvent.remove("end");
+        };
+    }, []);
+    return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$2, __assign({ ref: ref }, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
+});
+var ButtonWrapper$2 = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"], ["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"])));
+var disabledStyles = react.css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"], ["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"])), kuiBasic.theme.palette.grey.seventy);
+var templateObject_1$s, templateObject_2$h;
+
+var DesktopMenuPanel = React.forwardRef(function (_a, ref) {
+    var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
+    return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
+});
+var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
+var templateObject_1$r;
+
+var InputWithMask = React.forwardRef(function (_a, ref) {
+    var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
+    var handleChange = function (e, field) {
+        field.onChange(e);
+        if (inputProps.onChange) {
+            inputProps.onChange(e);
+        }
+    };
+    var getError = function (fieldState) {
+        var _a;
+        return typeof error !== "undefined" && String(error).length > 0
+            ? error
+            : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    };
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
+            var field = _a.field, fieldState = _a.fieldState;
+            return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
+                    return handleChange(e, field);
+                }, inputRef: ref })));
+        } }));
+});
+
+var InputWithController = React.forwardRef(function (_a, ref) {
+    var form = _a.form, name = _a.name, error = _a.error, value = _a.value, type = _a.type, inputProps = __rest(_a, ["form", "name", "error", "value", "type"]);
+    var handleChange = function (e, field) {
+        var _a;
+        var newValue = type === "number" && !((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.length) ? null : e.target.value;
+        field.onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: newValue }) }));
+        if (inputProps.onChange) {
+            inputProps.onChange(e);
+        }
+    };
+    var getError = function (fieldState) {
+        var _a;
+        return typeof error !== "undefined" && String(error).length > 0
+            ? error
+            : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    };
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
+            var field = _a.field, fieldState = _a.fieldState;
+            return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
+                    return handleChange(e, field);
+                }, type: type, value: value !== null && value !== void 0 ? value : field.value, inputRef: ref })));
+        } }));
+});
+
+var strengthCoefficients = {
+    weak: 0,
+    simple: 1,
+    medium: 2,
+    hard: 3,
+};
+var strengthColors = {
+    weak: kuiBasic.theme.palette.red.fiftyP,
+    simple: kuiBasic.theme.palette.brand.main,
+    medium: kuiBasic.theme.palette.blue.fiftyP,
+    hard: kuiBasic.theme.palette.green.fiftyP,
+};
+var strengthTexts = {
+    weak: "Очень простой",
+    simple: "Простой",
+    medium: "Средний",
+    hard: "Сложный",
+};
+var PassportStrengthBar = React.forwardRef(function (_a, ref) {
+    var strength = _a.strength;
+    var color = strength
+        ? strengthColors[strength]
+        : "";
+    var strengthKey = strength
+        ? strengthCoefficients[strength]
+        : -1;
+    return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { children: [jsxRuntime$1.jsx(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsxRuntime$1.jsx(ReliabilityLevel, { children: jsxRuntime$1.jsx(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsxRuntime$1.jsx(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
+});
+var Wrapper$2 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"], ["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"])));
+var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
+var ReliabilityLevel = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
+var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
+    var color = _a.color;
+    return color;
+});
+var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5$3 || (templateObject_5$3 = __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$q, templateObject_2$g, templateObject_3$8, templateObject_4$5, templateObject_5$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 phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/;
+var isValidWithMaskExp = /^[^_]+$/;
+var dateRegExp = /(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d/;
+var monthYearRegExp = /(0[1-9]|1[012])[- /.](19|20)\d\d/;
+var emailRegExp = /^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/;
+var carNumberRegExp = /^([А-Яа-я]{1}[0-9]{3}[А-Яа-я]{2}\s{0,1}[0-9]{2,3})?$/;
+var innRegExp = /^(([0-9]{12})|([0-9]{10}))?$/;
+var corrAccountRegExp = /^(301[0-9]{17})?$/;
+var accountRegExp = /^408([0-9]{17})?$/;
+var bicRegExp = /^([0-9]{9})?$/;
+var swiftRegExp = /^([A-Za-z]{6}\w{2}\d{0,3})?$/;
+var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
+var mediumPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{12,}$/;
+var strongPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{14,}$/;
+
+var InputPassword = React.forwardRef(function (props, ref) {
+    var _a = React.useState(false), showPassword = _a[0], setShowPassword = _a[1];
+    var _b = React.useState(null), strength = _b[0], setStrength = _b[1];
+    var handleShowChange = function () {
+        setShowPassword(function (prev) { return !prev; });
+    };
+    var checkPasswordStrength = function (value) {
+        if (value.length === 0) {
+            setStrength(null);
+            return;
+        }
+        if (strongPasswordRegExp.test(value)) {
+            setStrength("hard");
+        }
+        else if (mediumPasswordRegExp.test(value)) {
+            setStrength("medium");
+        }
+        else if (simplePasswordRegExp.test(value)) {
+            setStrength("simple");
+        }
+        else {
+            setStrength("weak");
+        }
+    };
+    var handleChange = function (e) {
+        var targetValue = e.target.value;
+        checkPasswordStrength(targetValue);
+    };
+    React.useEffect(function () {
+        var form = props.form, name = props.name;
+        var fieldValue = getFormValue(name, form);
+        if (typeof fieldValue === "string") {
+            checkPasswordStrength(fieldValue);
+        }
+    }, []);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsxRuntime.jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsxRuntime.jsx(kuiIcon.ClosedEyeIcon, {}) : jsxRuntime.jsx(kuiIcon.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
+});
+var EyeIconWrapper = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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$p;
+
+var InputTextAreaMobile = React.forwardRef(function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper$1, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
+var InputWrapper$1 = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"])));
+var TextAreaWrapper = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"])));
+var templateObject_1$o, templateObject_2$f;
+
+var useToggle = function (isModalOpen) {
+    if (isModalOpen === void 0) { isModalOpen = false; }
+    var _a = React.useState(isModalOpen), isOpen = _a[0], setIsOpen = _a[1];
+    var handleClose = function () {
+        setIsOpen(false);
+    };
+    var handleOpen = function () {
+        setIsOpen(true);
+    };
+    return [isOpen, handleOpen, handleClose];
+};
+
+var ModalFooter = React.forwardRef(function (_a, ref) {
+    var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
+    return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper$1, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] })));
+});
+var StyledFooter = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 0 0 12px 12px;\n  z-index: 10;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n"], ["\n  background: ", ";\n  border-radius: 0 0 12px 12px;\n  z-index: 10;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n"])), kuiBasic.theme.palette.grey.zero);
+var ButtonWrapper$1 = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"])));
+var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"])));
+var templateObject_1$n, templateObject_2$e, templateObject_3$7;
+
+var generateYearRange = function (offsetFromCurrent, maxYearCount) {
+    if (!offsetFromCurrent || !maxYearCount)
+        return [];
+    var endYear = luxon.DateTime.now().year - offsetFromCurrent;
+    return ___default["default"].range(maxYearCount).map(function (elem) {
+        var fullYear = endYear - elem;
+        return {
+            value: fullYear,
+            label: fullYear,
+        };
+    });
+};
+var InputWithDatePicker = React.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, onChange = _a.onChange, max = _a.max, min = _a.min, footerLabel = _a.footerLabel, datePickerProps = _a.datePickerProps, alignTitle = _a.alignTitle, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams", "onChange", "max", "min", "footerLabel", "datePickerProps", "alignTitle"]);
+    var _c = reactHookForm.useController({
+        name: name,
+        control: form.control,
+    }), field = _c.field, fieldState = _c.fieldState;
+    var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var formattedValue = field.value ? field.value.toFormat("dd.MM.yyyy") : "";
+    var formattedDate = field.value ? field.value.toJSDate() : null;
+    var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
+    var _e = React.useState(formattedDate), date = _e[0], setDate = _e[1];
+    var _f = React.useState(formattedValue), value = _f[0], setValue = _f[1];
+    var yearList = generateYearRange(yearParams === null || yearParams === void 0 ? void 0 : yearParams.min, yearParams === null || yearParams === void 0 ? void 0 : yearParams.max);
+    React.useEffect(function () {
+        if (!isModalOpen) {
+            setDate(null);
+        }
+        else {
+            setDate(formattedDate);
+        }
+    }, [isModalOpen]);
+    var handleChange = function (e) {
+        var targetValue = e.target.value;
+        setValue(targetValue);
+        if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
+            var targetDate = luxon.DateTime.fromFormat(targetValue, "dd.MM.yyyy");
+            setDate(targetDate.toJSDate());
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: targetDate, name: name }, type: "change" });
+            if (onChange) {
+                onChange(targetDate);
+            }
+        }
+        else {
+            setDate(null);
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
+            if (onChange) {
+                onChange(null);
+            }
+        }
+    };
+    var acceptWithDateSelected = function () {
+        if (date) {
+            var dateObj = luxon.DateTime.fromJSDate(date);
+            setValue(dateObj.toFormat("dd.MM.yyyy"));
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: dateObj, name: name }, type: "change" });
+            if (onChange) {
+                onChange(dateObj);
+            }
+            handleModalClose();
+        }
+    };
+    var handleDateChange = function (newDate) {
+        setDate(newDate);
+    };
+    var forwardedRef = useForkRef(ref, field.ref);
+    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxRuntime$1.jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsxRuntime$1.jsx(ContentWrapper$2, { children: jsxRuntime$1.jsx(DatePicker__default["default"], __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsxRuntime$1.jsx(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
+});
+InputWithDatePicker.defaultProps = {
+    title: "Дата рождения",
+    description: "Выберите год, месяц и число вашего рождения",
+    yearParams: { min: 18, max: 120 },
+    footerLabel: "Подтвердить",
+    alignTitle: "center",
+};
+var ContentWrapper$2 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __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__default["default"](CalendarStandardContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"], ["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.background.light1);
+var DayContent = styled__default["default"].span(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
+var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$4 || (templateObject_4$4 = __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$m, templateObject_2$d, templateObject_3$6, templateObject_4$4;
+
+var shortMonths = [
+    "ЯНВ",
+    "ФЕВ",
+    "МАРТ",
+    "АПР",
+    "МАЙ",
+    "ИЮНЬ",
+    "ИЮЛЬ",
+    "АВГ",
+    "СЕНТ",
+    "ОКТ",
+    "НОЯБ",
+    "ДЕК",
+];
+
+var ruCustom = __assign(__assign({}, ru__default["default"]), { localize: {
+        month: function (n) { return shortMonths[n]; },
+        ordinalNumber: function () { return ""; },
+        era: function () { return ""; },
+        quarter: function () { return ""; },
+        dayPeriod: function () { return ""; },
+        day: function () { return ""; },
+    } });
+var MobileInputWithMonthPicker = React.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, props = __rest(_a, ["title", "name", "form", "disabled", "datePickerProps"]);
+    var _c = reactHookForm.useController({
+        name: name,
+        control: form.control,
+    }), field = _c.field, fieldState = _c.fieldState;
+    var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
+    var _e = React.useState(field.value
+        ? luxon.DateTime.fromJSDate(new Date(String(field.value))).toFormat("MM.yyyy")
+        : null), value = _e[0], setValue = _e[1];
+    var _f = React.useState(value ? luxon.DateTime.fromFormat(value, "MM.yyyy").toJSDate() : null), date = _f[0], setDate = _f[1];
+    var handleChange = function (e) {
+        var targetValue = e.target.value;
+        setValue(targetValue);
+        if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
+            var jsDate = luxon.DateTime.fromFormat(targetValue, "MM.yyyy").toJSDate();
+            setDate(jsDate);
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: jsDate, name: name }, type: "change" });
+        }
+        else {
+            setDate(null);
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
+        }
+    };
+    var acceptWithDateSelected = function () {
+        if (date) {
+            setValue(luxon.DateTime.fromJSDate(date).toFormat("MM.yyyy"));
+        }
+        else {
+            setValue("");
+        }
+        field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
+        handleModalClose();
+    };
+    return (jsxRuntime.jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper$1, { children: jsxRuntime.jsx(DatePicker__default["default"], __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsxRuntime.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] })));
+});
+var Wrapper$1 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"])));
+var ContentWrapper$1 = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __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$l, templateObject_2$c;
+
+var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
+
+var MobileMenuPanel = React.forwardRef(function (_a, ref) {
+    var tabs = _a.tabs, handleClick = _a.handleClick, variant = _a.variant, other = __rest(_a, ["tabs", "handleClick", "variant"]);
+    var swiperRef = React.useRef(null);
+    var slideTo = function (index) {
+        setTimeout(function () {
+            var _a, _b;
+            (_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(index);
+        }, 16);
+        handleClick(index);
+    };
+    return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
+});
+var Wrapper = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
+var SlideWrapper = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __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$k, templateObject_2$b;
+
+var useWindowWidth = function (time) {
+    if (time === void 0) { time = 10; }
+    var _a = React.useState(0), width = _a[0], setWidth = _a[1];
+    React.useEffect(function () {
+        setWidth(window.innerWidth);
+        var handleResize = ___default["default"].debounce(function () {
+            setWidth(window.innerWidth);
+        }, time);
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, []);
+    return width;
+};
+
+var MenuPanel = React.forwardRef(function (_a, ref) {
+    var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, variant = _a.variant;
+    var width = useWindowWidth();
+    var _b = React__namespace.useState(activeTab), value = _b[0], setValue = _b[1];
+    var _c = React__namespace.useState(false), isScrolling = _c[0], setIsScrolling = _c[1];
+    var navigate = reactRouterDom.useNavigate();
+    var location = reactRouter.useLocation();
+    var handleClick = function (index) {
+        if (paths[index]) {
+            setValue(index);
+            var pathName = location.pathname;
+            var currentLocation = "".concat(pathName).concat(location.search);
+            var newLocation = "".concat(pathName).concat(paths[index]);
+            if (currentLocation !== newLocation) {
+                navigate(newLocation, { replace: true });
+            }
+        }
+    };
+    React.useEffect(function () {
+        setValue(activeTab);
+    }, [activeTab]);
+    React.useEffect(function () {
+        if (typeof activeTab !== "number" && width < 901) {
+            reactScroll.animateScroll.scrollToTop();
+        }
+    }, []);
+    if (width === 0) {
+        return null;
+    }
+    return (jsxRuntime$1.jsxs("div", __assign({ ref: ref }, { children: [width > 765 ? (jsxRuntime$1.jsx(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsxRuntime$1.jsx(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsxRuntime$1.jsx(reactScroll.Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] })));
+});
+MenuPanel.defaultProps = {
+    variant: "grey",
+};
+var fullHeightStyles = react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  height: calc(100vh - 121px);\n"], ["\n  height: calc(100vh - 121px);\n"])));
+var templateObject_1$j;
+
+var Switch = React.forwardRef(function (_a, ref) {
+    var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
+    return (jsxRuntime$1.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
+            var field = _a.field;
+            return (jsxRuntime$1.jsx(kuiBasic.Switch, __assign({ checked: Boolean(field.value), onChange: field.onChange, "data-testid": name, ref: ref, name: name }, props)));
+        } }));
+});
+
+var InputPhoneWithForm = React.forwardRef(function (props, ref) {
+    var _a;
+    var form = props.form, name = props.name, hiddenInputProps = props.hiddenInputProps, error = props.error, other = __rest(props, ["form", "name", "hiddenInputProps", "error"]);
+    var codeRegister = reactHookForm.useController({
+        control: form.control,
+        name: "".concat(name, ".phoneCode"),
+        defaultValue: "7",
+    });
+    var phoneRegister = reactHookForm.useController({
+        control: form.control,
+        name: "".concat(name, ".phoneNumber"),
+    });
+    var errorMessage = typeof error !== "undefined" && String(error).length > 0
+        ? error
+        : (_a = phoneRegister.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    var handleCountryChange = function (country) {
+        codeRegister.field.onChange({
+            target: { value: country.phoneCode, name: "".concat(name, ".phoneCode") },
+            type: "change",
+        });
+    };
+    var handleChange = function (e) {
+        phoneRegister.field.onChange(e);
+        if (!codeRegister.field.value) {
+            codeRegister.field.onChange({
+                target: { value: "7", name: "".concat(name, ".phoneCode") },
+                type: "change",
+            });
+        }
+        if (other.onChange) {
+            other.onChange(e);
+        }
+    };
+    var forwardedRef = useForkRef(ref, phoneRegister.field.ref);
+    return (jsxRuntime.jsx(kuiBasic.InputWithCountryDropdown, __assign({ message: errorMessage, 
+        // @ts-ignore
+        hiddenInputProps: __assign(__assign({}, codeRegister.field), hiddenInputProps), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
+});
+InputPhoneWithForm.defaultProps = {
+    name: "phone",
+};
+
+var Table = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
+var StyledTable = styled__default["default"].table(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  width: 100%;\n  border-spacing: 0;\n"], ["\n  width: 100%;\n  border-spacing: 0;\n"])));
+var templateObject_1$i;
+
+var TableHeadCell = styled__default["default"].th(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  padding: 0;\n  text-align: left;\n"], ["\n  padding: 0;\n  text-align: left;\n"])));
+var templateObject_1$h;
+
+var TableCell = styled__default["default"].td(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
+var templateObject_1$g;
+
+var TableRow = React.forwardRef(function (_a, ref) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    var childrenArr = React__namespace.Children.toArray(children);
+    return (jsxRuntime.jsx("tr", __assign({ ref: ref }, { children: childrenArr.map(function (child) { return React__namespace.cloneElement(child, other); }) })));
+});
+
+var placementsPositions = {
+    bottomStart: {
+        bottom: 1,
+        offset: 0,
+    },
+    bottomMiddle: {
+        bottom: 1,
+        offset: 0.5,
+    },
+    bottomEnd: {
+        bottom: 1,
+        offset: 1,
+    },
+    topStart: {
+        top: 1,
+        offset: 0,
+    },
+    topMiddle: {
+        top: 1,
+        offset: 0.5,
+    },
+    topEnd: {
+        top: 1,
+        offset: 1,
+    },
+};
+
+var PopperBase = React.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 (jsxRuntime.jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames__default["default"]("KUI-Popper", className), spacing: spacing, style: style }, { children: jsxRuntime.jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
+});
+var StyledPopperWrapper = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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;
+}, kuiBasic.theme.breakpoints.xxs);
+var StyledPopper = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __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$f, templateObject_2$a;
+
+var PopperWithPortal = React.forwardRef(function (props, ref) {
+    var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
+    var popperRef = React.useRef(null);
+    var _a = React.useState(null), coords = _a[0], setCoords = _a[1];
+    var _b = React.useState(null), size = _b[0], setSize = _b[1];
+    React.useEffect(function () {
+        if (contentRef.current && popperRef.current) {
+            var popper = popperRef.current;
+            var elemCoords = contentRef.current.getBoundingClientRect();
+            var popperSize = {
+                width: popper.clientWidth,
+                height: popper.clientHeight,
+            };
+            setCoords(elemCoords);
+            setSize(popperSize);
+        }
+    }, []);
+    var position = {};
+    if (coords && size) {
+        var placementPositions = 
+        // @ts-ignore
+        placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
+        position = {
+            top: Math.max(placementPositions.top
+                ? coords.top - size.height
+                : coords.top + coords.height, 0),
+            left: Math.max(coords.left +
+                coords.width * placementPositions.offset -
+                size.width * placementPositions.offset, 0),
+        };
+    }
+    var forwardedRef = function (elem) {
+        if (ref) {
+            // @ts-ignore
+            ref.current = elem;
+        }
+        // @ts-ignore
+        popperRef.current = elem;
+    };
+    // TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
+    // Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
+    // Распожить стрелочку к контенту посередине контента
+    return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n            body {\n              position: relative;\n            }\n          "], ["\n            body {\n              position: relative;\n            }\n          "]))) }), jsxRuntime.jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
+});
+var templateObject_1$e;
+
+var StaticPopper = React.forwardRef(function (props, ref) {
+    var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
+    var popperRef = React.useRef(null);
+    var _a = React.useState(null), contentSize = _a[0], setContentSize = _a[1];
+    var _b = React.useState(null), popperSize = _b[0], setPopperSize = _b[1];
+    var position = {};
+    React.useEffect(function () {
+        if (contentRef.current && popperRef.current) {
+            setContentSize({
+                width: contentRef.current.clientWidth,
+                height: contentRef.current.clientHeight,
+            });
+            setPopperSize({
+                width: popperRef.current.clientWidth,
+                height: popperRef.current.clientHeight,
+            });
+        }
+    }, []);
+    if (contentSize && popperSize) {
+        var placementPositions = 
+        // @ts-ignore
+        placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
+        position = {
+            top: placementPositions.top
+                ? 0 - popperSize.height
+                : 0 + contentSize.height,
+            left: Math.max(contentSize.width * placementPositions.offset -
+                popperSize.width * placementPositions.offset, 0),
+        };
+    }
+    var forwardedRef = function (elem) {
+        if (ref) {
+            // @ts-ignore
+            ref.current = elem;
+        }
+        // @ts-ignore
+        popperRef.current = elem;
+    };
+    return jsxRuntime.jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other));
+});
+
+var Popper = React.forwardRef(function (props, ref) {
+    var contentRef = props.contentRef, other = __rest(props, ["contentRef"]);
+    var _a = React.useState(true), isParentSticky = _a[0], setIsParentSticky = _a[1];
+    React.useEffect(function () {
+        function checkParentIsSticky() {
+            var el = contentRef.current;
+            while (el) {
+                var position = window.getComputedStyle(el).position;
+                if (position === "sticky" || position === "fixed")
+                    return true;
+                el = el.parentElement;
+            }
+            return false;
+        }
+        var isSticky = checkParentIsSticky();
+        setIsParentSticky(!!isSticky);
+    }, [contentRef]);
+    return isParentSticky ? (jsxRuntime.jsx(StaticPopper, __assign({ ref: ref, contentRef: contentRef }, other))) : (jsxRuntime.jsx(PopperWithPortal, __assign({ ref: ref, contentRef: contentRef }, other)));
+});
+
+var Tooltip = React.forwardRef(function (props, ref) {
+    var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, cursor = props.cursor, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children", "cursor"]);
+    var _a = React.useState(open), isOpen = _a[0], setOpen = _a[1];
+    var elemRef = React.useRef(null);
+    var handleOpen = function () {
+        setOpen(true);
+        if (onOpen) {
+            onOpen();
+        }
+    };
+    var handleClose = function () {
+        setOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    };
+    React.useEffect(function () {
+        setOpen(open);
+    }, [open]);
+    return (jsxRuntime.jsxs(StyledWrapper$7, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsxRuntime.jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsxRuntime.jsx(StyledContent$1, { children: children }) })), jsxRuntime.jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
+});
+var containerCSS = react.css(templateObject_1$d || (templateObject_1$d = __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$7 = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  ", ";\n  position: relative;\n"], ["\n  ", ";\n  position: relative;\n"])), containerCSS);
+var StyledContentWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  ", ";\n  cursor: ", ";\n"], ["\n  ", ";\n  cursor: ", ";\n"])), containerCSS, function (_a) {
+    var cursor = _a.cursor;
+    return cursor;
+});
+var StyledContent$1 = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", ";\n  z-index: -1;\n"], ["\n  ", ";\n  z-index: -1;\n"])), containerCSS);
+var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$3;
+
+var ButtonSelect = React.forwardRef(function (props, ref) {
+    var _a;
+    var options = props.options, otherProps = __rest(props, ["options"]);
+    return (jsxRuntime.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__default["default"](InputSelect)(templateObject_1$c || (templateObject_1$c = __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"])), kuiBasic.theme.breakpoints.xs);
+var templateObject_1$c;
+
+var InputSelectWithController = React.forwardRef(function (_a, ref) {
+    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 = reactHookForm.useController({
+        control: form.control,
+        name: name,
+    });
+    var error = (_b = control.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var handleSelect = function (value) {
+        var _a;
+        if (handleChange) {
+            handleChange(value);
+        }
+        if (form) {
+            (_a = control.field) === null || _a === void 0 ? void 0 : _a.onChange({
+                target: { value: value, name: name },
+                type: "change",
+            });
+        }
+    };
+    return (jsxRuntime.jsx(InputSelect, __assign({ options: options, handleChange: handleSelect, error: error, name: name, value: valueProp || ((_c = control.field) === null || _c === void 0 ? void 0 : _c.value), ref: ref }, inputProps)));
+});
+
+function InputMultiSelectOption(props) {
+    var option = props.option, selectedValue = props.selectedValue;
+    var selected = selectedValue.includes(option.value);
+    return (jsxRuntime.jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsxRuntime.jsx(kuiBasic.Checkbox, { checked: selected, label: jsxRuntime.jsx(StyledCaption, __assign({ selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
+}
+var StyledOption = styled__default["default"](kuiBasic.Grid)(templateObject_1$b || (templateObject_1$b = __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 ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
+}, kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.seventy);
+var StyledCaption = styled__default["default"](kuiBasic.Caption)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  color: ", " !important;\n"], ["\n  color: ", " !important;\n"])), function (_a) {
+    var selected = _a.selected;
+    return selected
+        ? kuiBasic.theme.palette.grey.seventy
+        : kuiBasic.theme.palette.grey.fiftyP;
+});
+var templateObject_1$b, templateObject_2$8;
+
+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
+        ? reactHookForm.useController({
+            control: form.control,
+            name: name,
+        })
+        : null;
+    var _d = React.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;
+    React.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 (jsxRuntime.jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, error: error, selectedLabel: selectedLabel, selectedValue: value, name: name, isLabelShrink: !!selectedLabel, renderOption: function (option, selectedValue) { return (jsxRuntime.jsx(InputMultiSelectOption, { option: option, selectedValue: selectedValue })); } }, inputProps)));
+}
+
+var RadioButtons = React.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 = React.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);
+            }
+        }
+    };
+    React.useEffect(function () {
+        if (valueOfProps) {
+            setValue(valueOfProps);
+        }
+    }, [valueOfProps]);
+    return (jsxRuntime.jsx(kuiBasic.Grid, __assign({ container: true, direction: direction, ref: ref }, { children: options.map(function (option) { return (jsxRuntime.jsx(kuiBasic.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);
+        }
+    };
+    React.useEffect(function () {
+        if (!form.getValues(name) && !defaultValue) {
+            form.setValue(name, otherProps.options[0].value);
+        }
+    }, []);
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: form.control, name: String(name), render: function (_a) {
+            var field = _a.field;
+            return (jsxRuntime.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 = reactHookForm.useController({
+        control: form.control,
+        name: name,
+    }).fieldState;
+    var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    return (jsxRuntime.jsxs(StyledContainer, { children: [jsxRuntime.jsxs(StyledWrapper$6, __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 && (jsxRuntime.jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsxRuntime.jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsxRuntime.jsx(kuiBasic.InputMessage, { variant: "error", msg: errorMessage })] }));
+}
+var StyledContainer = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var columnDirectionCSS = function (_a) {
+    var hasError = _a.hasError;
+    return react.css(templateObject_2$7 || (templateObject_2$7 = __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 react.css(templateObject_3$4 || (templateObject_3$4 = __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$6 = styled__default["default"](kuiBasic.Grid, {
+    shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  ", ";\n"])), function (_a) {
+    var hasError = _a.hasError;
+    return hasError ? kuiBasic.theme.palette.red.fiftyP : kuiBasic.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__default["default"](kuiBasic.Caption)(templateObject_5$2 || (templateObject_5$2 = __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$a, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2;
+
+var Loading = React.forwardRef(function (_a) {
+    var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
+    return (jsxRuntime.jsx(StyledWrapper$5, __assign({ container: true, alignItems: "center", justify: "center", className: className, height: height }, { children: jsxRuntime.jsx(StyledCircularProgress, __assign({}, otherProps)) })));
+});
+Loading.defaultProps = {
+    height: "adaptive",
+};
+var StyledCircularProgress = styled__default["default"](kuiBasic.CircularProgress)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), kuiBasic.theme.palette.brand.main);
+var StyledWrapper$5 = styled__default["default"](kuiBasic.Grid, {
+    shouldForwardProp: function (prop) { return prop !== "height"; },
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  height: ", ";\n"], ["\n  height: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height;
+});
+var templateObject_1$9, templateObject_2$6;
+
+function CreatingEntityFromDropdown(_a) {
+    var creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal;
+    var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
+    if (!creatingLabel || !renderCreatingModal) {
+        return null;
+    }
+    var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledWrapper$4, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsxRuntime.jsx(StyledPlusIcon, { width: 12, height: 12 }), jsxRuntime.jsx(kuiBasic.Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsxRuntime.jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
+                    isOpen: isModalOpen,
+                    handleClose: handleModalClose,
+                }) }))] }));
+}
+var StyledWrapper$4 = styled__default["default"](kuiBasic.Grid)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  width: 100%;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  border-radius: 0 0 12px 12px;\n  border-top: 1px solid ", ";\n  padding: 8px 19px;\n  cursor: pointer;\n  background: white;\n"], ["\n  width: 100%;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  border-radius: 0 0 12px 12px;\n  border-top: 1px solid ", ";\n  padding: 8px 19px;\n  cursor: pointer;\n  background: white;\n"])), kuiBasic.theme.palette.grey.fifteenB);
+var StyledPlusIcon = styled__default["default"](kuiIcon.PlusIcon)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  margin-right: 14px;\n  path {\n    fill: ", ";\n  }\n"], ["\n  margin-right: 14px;\n  path {\n    fill: ", ";\n  }\n"])), kuiBasic.theme.palette.grey.fiftyP);
+var StyledModalWrapper = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject([""], [""])));
+var templateObject_1$8, templateObject_2$5, templateObject_3$3;
+
+var AutocompleteOption$1 = function (props) {
+    var option = props.option, renderOption = props.renderOption, handleSelect = props.handleSelect, index = props.index;
+    var handleClick = function () {
+        handleSelect(option);
+    };
+    return (jsxRuntime.jsx(StyledOptionWrapper, __assign({ item: true, xs: 12, onClick: handleClick, "data-testid": "autocomplete_option_".concat(index) }, { children: renderOption(option) })));
+};
+var StyledOptionWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var templateObject_1$7;
+
+function AutocompleteDropdown(props) {
+    var options = props.options, renderOption = props.renderOption, creatingLabel = props.creatingLabel, renderCreatingModal = props.renderCreatingModal;
+    var inputRef = props.inputRef, isOpenDropdown = props.isOpenDropdown, isLoading = props.isLoading;
+    var handleCloseDropdown = props.handleCloseDropdown, handleSelect = props.handleSelect, handleScrollEnd = props.handleScrollEnd;
+    var handleScroll = function (e) {
+        if (e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight) <
+            100) {
+            if (handleScrollEnd)
+                handleScrollEnd();
+        }
+    };
+    return (jsxRuntime.jsxs(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsxRuntime.jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsxRuntime.jsx(AutocompleteOption$1, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsxRuntime.jsx(StyledLoading, { height: "auto" })] })));
+}
+var StyledDropdown = styled__default["default"](InputDropdown)(templateObject_1$6 || (templateObject_1$6 = __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 StyledLoading = styled__default["default"](Loading)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 30px;\n"], ["\n  position: sticky;\n  bottom: 30px;\n"])));
+var templateObject_1$6, templateObject_2$4;
+
+function InputWithAutocomplete(_a) {
+    var _b;
+    var renderOption = _a.renderOption, options = _a.options, name = _a.name, hideName = _a.hideName, form = _a.form, isLoading = _a.isLoading, onSelectItem = _a.onSelectItem, handleScrollEnd = _a.handleScrollEnd, onSearchItem = _a.onSearchItem, isLabelLoading = _a.isLabelLoading, disabled = _a.disabled, creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal, endComponent = _a.endComponent, inputRefProps = _a.inputRef, inputProps = __rest(_a, ["renderOption", "options", "name", "hideName", "form", "isLoading", "onSelectItem", "handleScrollEnd", "onSearchItem", "isLabelLoading", "disabled", "creatingLabel", "renderCreatingModal", "endComponent", "inputRef"]);
+    var _c = React.useState(false), isOpenDropdown = _c[0], setIsOpenDropDown = _c[1];
+    var inputRef = React.useRef(null);
+    if (hideName)
+        form.register(hideName);
+    var handleOpenDropdown = function () {
+        setIsOpenDropDown(true);
+    };
+    var handleCloseDropdown = function () {
+        setIsOpenDropDown(false);
+    };
+    var handleSelect = function (option) {
+        var _a;
+        onSelectItem(option);
+        handleCloseDropdown();
+        var error = (_a = form.getFieldState(name).error) === null || _a === void 0 ? void 0 : _a.message;
+        if (error) {
+            form.clearErrors(name);
+        }
+    };
+    var handleSearch = function (e) {
+        if (onSearchItem) {
+            onSearchItem(e.target.value);
+            form.setValue(hideName, null);
+        }
+        if (!e.target.value && hideName) {
+            form.setValue(hideName, null);
+            form.setValue(name, null);
+            onSelectItem(null);
+        }
+        handleOpenDropdown();
+    };
+    var forwardRef = useForkRef(inputRef, inputRefProps);
+    return (jsxRuntime$1.jsxs(StyledWrapper$3, { children: [isLabelLoading && (jsxRuntime$1.jsx(StyledLoadingWrapper, { children: jsxRuntime$1.jsx(Loading, { height: "100%" }) })), jsxRuntime$1.jsx(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsxs(kuiBasic.Grid, __assign({ container: true, alignItems: "center" }, { children: [jsxRuntime$1.jsx(kuiBasic.Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
+                            (!disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, { width: 12, height: 13, css: [
+                                    { transition: "all linear .2s" },
+                                    isOpenDropdown && { transform: "rotate(180deg)" },
+                                ] })))] }))) })), jsxRuntime$1.jsx(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
+                    current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
+                }, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal })] }));
+}
+var StyledLoadingWrapper = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n"])));
+var StyledWrapper$3 = styled__default["default"].div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var StyledInput$2 = styled__default["default"](InputWithController)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"], ["\n  .KUI-InputMessage {\n    opacity: ", ";\n  }\n"])), function (_a) {
+    var isDropdownOpen = _a.isDropdownOpen;
+    return (isDropdownOpen ? 0 : 1);
+});
+var templateObject_1$5, templateObject_2$3, templateObject_3$2;
+
+function AutocompleteOption(_a) {
+    var label = _a.label;
+    return (jsxRuntime.jsx(StyledWrapper$2, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", weight: 500 }, { children: label })) }));
+}
+var StyledWrapper$2 = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  &:hover {\n    background: ", ";\n  },\n"], ["\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  &:hover {\n    background: ", ";\n  },\n"])), kuiBasic.theme.palette.background.light2);
+var templateObject_1$4;
+
+function Link(props) {
+    var href = props.href, withoutRoute = props.withoutRoute, stopPropagation = props.stopPropagation, openInNewWindow = props.openInNewWindow, other = __rest(props, ["href", "withoutRoute", "stopPropagation", "openInNewWindow"]);
+    var navigate = reactRouterDom.useNavigate();
+    var handleClick = function (e) {
+        if (stopPropagation)
+            e.stopPropagation();
+        e.preventDefault();
+        if (href) {
+            if (withoutRoute)
+                updateQueryParams(href);
+            else if (openInNewWindow)
+                window.open(href, "_blank");
+            else
+                navigate(href);
+        }
+    };
+    return (jsxRuntime.jsx(StyledLink, __assign({ href: href || undefined, onClick: handleClick }, other)));
+}
+var StyledLink = styled__default["default"].a(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  text-decoration: none;\n  color: inherit;\n  max-width: 100%;\n  width: 100%;\n"], ["\n  text-decoration: none;\n  color: inherit;\n  max-width: 100%;\n  width: 100%;\n"])));
+var templateObject_1$3;
+
+function FileItem(_a) {
+    var _b, _c;
+    var file = _a.file, onDelete = _a.onDelete, onChange = _a.onChange, index = _a.index, selectedFile = _a.selectedFile, setSelectedFile = _a.setSelectedFile, limitTitle = _a.limitTitle, icon = _a.icon, subtitle = _a.subtitle, disabled = _a.disabled, error = _a.error, className = _a.className, otherProps = __rest(_a, ["file", "onDelete", "onChange", "index", "selectedFile", "setSelectedFile", "limitTitle", "icon", "subtitle", "disabled", "error", "className"]);
+    var formattedFileName = String((_c = (file.title || file.name || ((_b = file.file) === null || _b === void 0 ? void 0 : _b.name))) === null || _c === void 0 ? void 0 : _c.replace(/\.[^/.]+$/, ""));
+    var _d = React.useState(formattedFileName), title = _d[0], setTitle = _d[1];
+    var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var inputRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (isEditing) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (!isEditing && formattedFileName !== title && onChange) {
+            onChange(title, index);
+        }
+    }, [isEditing]);
+    var toggleEdit = function () {
+        setIsEditing(function (prev) { return !prev; });
+    };
+    var handleBlur = function () {
+        setIsEditing(false);
+    };
+    var handleChange = function (e) {
+        setTitle(e.target.value);
+    };
+    var handleDelete = function () {
+        var _a;
+        if (onDelete) {
+            onDelete((_a = file.index) !== null && _a !== void 0 ? _a : 1, Number(index));
+        }
+    };
+    var handleClick = function () {
+        if (setSelectedFile) {
+            setSelectedFile(index !== null && index !== void 0 ? index : 1);
+        }
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FileWrapper, __assign({ selected: (selectedFile !== null && selectedFile !== void 0 ? selectedFile : -1) === index, error: (limitTitle && title.length > limitTitle) || !!error, onClick: handleClick, disabled: !!disabled, className: "FileWrapper ".concat(className || "") }, otherProps, { children: [jsxRuntime.jsx(FileIconWrapper, __assign({ className: "FileIcon_wrapper" }, { children: icon || jsxRuntime.jsx(kuiIcon.FileIcon, {}) })), jsxRuntime.jsxs(ContentWrapper, __assign({ className: "FileContent_wrapper" }, { children: [jsxRuntime.jsxs(InputWrapper, { children: [jsxRuntime.jsx(Link, __assign({ href: file.url, openInNewWindow: true }, { children: jsxRuntime.jsx(InputPlaceholder, { children: title }) })), jsxRuntime.jsx(StyledInput$1, { "data-testid": "file_name", ref: inputRef, disabled: !isEditing, value: title, onChange: handleChange, onBlur: handleBlur, maxLength: 100 })] }), subtitle ||
+                                (String(file.size) && (jsxRuntime.jsxs(kuiBasic.Caption, __assign({ "data-testid": "file_size", size: "xs", color: "fiftyP" }, { children: [Number(file.size), " mb"] }))))] })), jsxRuntime.jsxs(ButtonWrapper, __assign({ className: "FileButtons_wrapper" }, { children: [!disabled && onChange && (jsxRuntime.jsx(kuiBasic.Button, __assign({ isCircle: true, "data-testid": "edit_file_name_btn", size: "xs", variant: "transparentLight", onClick: toggleEdit }, { children: isEditing ? jsxRuntime.jsx(kuiIcon.CheckIcon, {}) : jsxRuntime.jsx(kuiIcon.EditIcon, { width: 18, height: 18 }) }))), onDelete && !disabled && (jsxRuntime.jsx(kuiBasic.Button, __assign({ isCircle: true, "data-testid": "delete_file_btn", size: "xs", variant: "transparentLight", onClick: handleDelete }, { children: jsxRuntime.jsx(kuiIcon.TrashIcon, { width: 18, height: 18 }) })))] }))] })), ((limitTitle && title.length > limitTitle) || error) && (jsxRuntime.jsx(kuiBasic.Box, __assign({ mb: 1 }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", colorGroup: "red", weight: 500 }, { children: error ||
+                        "File upload error. The number of characters in the file name should not exceed 100" })) })))] }));
+}
+FileItem.defaultProps = {
+    limitTitle: 100,
+};
+var errorCSS = function (_a) {
+    var error = _a.error;
+    return error && react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    border-color: ", ";\n  "], ["\n    border-color: ", ";\n  "])), kuiBasic.theme.palette.red.seventy);
+};
+var disabledCSS = function (_a) {
+    var disabled = _a.disabled;
+    return disabled && react.css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    background: ", ";\n  "], ["\n    background: ", ";\n  "])), kuiBasic.theme.palette.background.light1);
+};
+var FileWrapper = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: 100%;\n  border-radius: 12px;\n  padding: 10px 12px;\n  border: 1px solid\n    ", ";\n  display: flex;\n  margin-bottom: 8px;\n  cursor: pointer;\n  ", ";\n  ", ";\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  width: 100%;\n  border-radius: 12px;\n  padding: 10px 12px;\n  border: 1px solid\n    ", ";\n  display: flex;\n  margin-bottom: 8px;\n  cursor: pointer;\n  ", ";\n  ", ";\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+    var selected = _a.selected;
+    return selected ? kuiBasic.theme.palette.brand.main : kuiBasic.theme.palette.grey.fifteenB;
+}, disabledCSS, errorCSS);
+var FileIconWrapper = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin-right: 16px;\n  min-height: 32px;\n  width: 32px;\n  border-radius: 12px;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: flex-start;\n"], ["\n  margin-right: 16px;\n  min-height: 32px;\n  width: 32px;\n  border-radius: 12px;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: flex-start;\n"])), kuiBasic.theme.palette.brand.light);
+var ButtonWrapper = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  margin-left: auto;\n  padding-left: 8px;\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-left: auto;\n  padding-left: 8px;\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), kuiBasic.theme.palette.grey.thirty);
+var ContentWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: calc(100% - 120px);\n  min-height: 34px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  & > p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"], ["\n  width: calc(100% - 120px);\n  min-height: 34px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  & > p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])));
+var StyledInput$1 = styled__default["default"].textarea(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none;\n  font-size: 14px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  font-weight: 500;\n  background: transparent;\n  padding: 0;\n  color: ", ";\n  caret-color: ", ";\n  height: -webkit-fill-available;\n  overflow: hidden;\n  resize: none;\n  width: 100%;\n  &:focus-visible {\n    outline: none;\n  }\n  &:disabled {\n    pointer-events: none;\n  }\n"], ["\n  border: none;\n  font-size: 14px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  font-weight: 500;\n  background: transparent;\n  padding: 0;\n  color: ", ";\n  caret-color: ", ";\n  height: -webkit-fill-available;\n  overflow: hidden;\n  resize: none;\n  width: 100%;\n  &:focus-visible {\n    outline: none;\n  }\n  &:disabled {\n    pointer-events: none;\n  }\n"])), kuiBasic.theme.palette.grey.seventy, kuiBasic.theme.palette.brand.main);
+var InputPlaceholder = styled__default["default"].span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  word-break: break-word;\n  max-width: 100%;\n  color: transparent;\n  min-height: 17px;\n  display: inline-block;\n  white-space: nowrap;\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  word-break: break-word;\n  max-width: 100%;\n  color: transparent;\n  min-height: 17px;\n  display: inline-block;\n  white-space: nowrap;\n"])));
+var InputWrapper = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  max-width: 100%;\n  height: auto;\n"], ["\n  position: relative;\n  width: fit-content;\n  max-width: 100%;\n  height: auto;\n"])));
+var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+var limitTitle = 100;
+var InputFile = React.forwardRef(function (props, ref) {
+    var _a;
+    var form = props.form, name = props.name, label = props.label, disabled = props.disabled, withEdit = props.withEdit, fileName = props.fileName, otherProps = __rest(props, ["form", "name", "label", "disabled", "withEdit", "fileName"]);
+    var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
+    var _c = React.useState(), file = _c[0], setFile = _c[1];
+    var _d = React.useState(""), defaultFileURL = _d[0], setDefaultFileURL = _d[1];
+    var inputRef = React.useRef(null);
+    var _e = reactHookForm.useController({
+        control: form.control,
+        name: name,
+    }), field = _e.field, fieldState = _e.fieldState;
+    var formattedFile = file && "url" in file
+        ? file
+        : {
+            file: file,
+            url: file ? URL.createObjectURL(file) : defaultFileURL,
+            size: file
+                ? Math.round((file.size / (1024 * 1024)) * 100) / 100
+                : null,
+            name: fileName || (file === null || file === void 0 ? void 0 : file.name),
+        };
+    var error = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    React.useEffect(function () {
+        if (typeof field.value === "string") {
+            setDefaultFileURL(field.value);
+        }
+        if (typeof field.value === "object") {
+            setFile(field.value);
+        }
+        setMounted(true);
+    }, []);
+    React.useEffect(function () {
+        var _a;
+        var toBigTitle = Number((fileName === null || fileName === void 0 ? void 0 : fileName.length) || ((_a = file === null || file === void 0 ? void 0 : file.name) === null || _a === void 0 ? void 0 : _a.length)) > limitTitle;
+        if (mounted && !defaultFileURL) {
+            field.onChange({ target: { value: file, name: name }, type: "change" });
+        }
+        if (toBigTitle) {
+            form.setError(name, {
+                type: "custom",
+                message: "The file name must be less than 100 characters",
+            });
+        }
+        else {
+            form.clearErrors(name);
+        }
+    }, [file]);
+    var handleChange = function (e) {
+        if (e.target.files && e.target.files[0]) {
+            setFile(e.target.files[0]);
+        }
+        else {
+            setFile(undefined);
+        }
+    };
+    var handleClick = function () {
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    var handleDelete = function () {
+        if (file && inputRef.current) {
+            inputRef.current.value = "";
+        }
+        setFile(undefined);
+        setDefaultFileURL("");
+        field.onChange({ target: { value: null, name: name }, type: "change" });
+    };
+    var changeName = function (newName) {
+        var currentFile = form.getValues(name);
+        var extension = currentFile.name.split(".").pop();
+        var newFileName = "".concat(newName, ".").concat(extension);
+        var newFile;
+        if ("filesStore" in currentFile) {
+            currentFile.updateName(newName);
+            newFile = currentFile;
+        }
+        else {
+            newFile = new File([currentFile], newFileName, {
+                type: currentFile.type,
+            });
+        }
+        setFile(newFile);
+    };
+    var forwardedRef = function (elem) {
+        if (ref) {
+            // @ts-ignore
+            // eslint-disable-next-line no-param-reassign
+            ref.current = elem;
+        }
+        inputRef.current = elem;
+    };
+    return (jsxRuntime.jsxs(StyledWrapper$1, { children: [jsxRuntime.jsx(StyledInput, __assign({ type: "file", onInput: handleChange }, otherProps, { ref: forwardedRef })), file || defaultFileURL ? (jsxRuntime.jsx(FileItem, { file: formattedFile, onDelete: handleDelete, onChange: withEdit && changeName, error: error, disabled: disabled })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledLabel, __assign({ error: !!error, disabled: disabled, container: true, justify: "space-between", alignItems: "center" }, { children: [jsxRuntime.jsx(StyledContent, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", color: "fiftyP" }, { children: label })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledButton, __assign({ disabled: disabled, size: "s", onClick: handleClick }, { children: "Upload" })) }))] })), error && jsxRuntime.jsx(kuiBasic.InputMessage, { variant: "error", msg: error })] }))] }));
+});
+InputFile.defaultProps = {
+    withEdit: true,
+};
+var StyledWrapper$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var StyledLabel = styled__default["default"](kuiBasic.Grid)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  border-radius: ", ";\n  border: 1px solid\n    ", ";\n  background: ", ";\n  height: 56px;\n  padding: 0 8px 0 15px;\n"], ["\n  border-radius: ", ";\n  border: 1px solid\n    ", ";\n  background: ", ";\n  height: 56px;\n  padding: 0 8px 0 15px;\n"])), function (_a) {
+    var error = _a.error;
+    return (error ? "8px 8px 0 0" : "8px");
+}, function (_a) {
+    var error = _a.error;
+    return error ? kuiBasic.theme.palette.red.fiftyP : kuiBasic.theme.palette.grey.fifteenB;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
+});
+var StyledInput = styled__default["default"].input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var StyledContent = styled__default["default"](kuiBasic.Grid)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: calc(100% - 32px);\n"], ["\n  max-width: calc(100% - 32px);\n"])));
+var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 12px;\n"], ["\n  border-radius: 12px;\n"])));
+var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
+
+var CheckboxWithController = React.forwardRef(function (props, ref) {
+    var form = props.form, name = props.name, label = props.label, labelProps = props.labelProps, inputProps = __rest(props, ["form", "name", "label", "labelProps"]);
+    var handleChange = function (e, field) {
+        field.onChange(e);
+        if (inputProps.onChange) {
+            inputProps.onChange(e);
+        }
+    };
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: form.control, name: String(name), render: function (_a) {
+            var field = _a.field;
+            return (jsxRuntime.jsx(kuiBasic.Checkbox, __assign({}, inputProps, field, { checked: field.value || "", onChange: function (e) {
+                    return handleChange(e, field);
+                }, label: jsxRuntime.jsx(kuiBasic.Caption, __assign({}, labelProps, { children: label })) })));
+        } }));
+});
+
+function CheckboxGroupWithTitle(_a) {
+    var title = _a.title, options = _a.options, form = _a.form; _a.name; var otherProps = __rest(_a, ["title", "options", "form", "name"]);
+    return (jsxRuntime.jsxs(StyledWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", weight: 500, color: "fiftyP" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Grid, __assign({ container: true }, { children: options.map(function (option) { return (jsxRuntime.jsx(StyledCheckbox, __assign({ name: option.name, label: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", color: "fiftyP", weight: 500 }, { children: option.label })), form: form, testId: option.name }, otherProps), option.name)); }) })) }))] })));
+}
+var StyledCheckbox = styled__default["default"](CheckboxWithController)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &:not(:last-child) {\n    margin-right: 22px;\n  }\n"], ["\n  &:not(:last-child) {\n    margin-right: 22px;\n  }\n"])));
+var StyledWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 3px 16px;\n  border: 1px solid ", ";\n  border-radius: 66px;\n  height: 40px;\n"], ["\n  padding: 3px 16px;\n  border: 1px solid ", ";\n  border-radius: 66px;\n  height: 40px;\n"])), kuiBasic.theme.palette.grey.fifteenB);
+var templateObject_1, templateObject_2;
+
+var settings = {
+    mapKey: "",
+};
+var observers = [];
+var getSettings = function () { return (__assign({}, settings)); };
+var setSettings = function (newSettings) {
+    settings = __assign(__assign({}, settings), newSettings);
+    observers.forEach(function (observer) { return observer(settings); });
+};
+var subscribeToSettings = function (observer) {
+    observers.push(observer);
+};
+var unsubscribeFromSettings = function (observer) {
+    var index = observers.indexOf(observer);
+    if (index !== -1)
+        observers.splice(index, 1);
+};
+
+var render = function (status) {
+    if (status === "LOADING")
+        return jsxRuntime.jsx(Loading, { height: "100%" });
+    if (status === "FAILURE")
+        return jsxRuntime.jsx("h3", { children: status });
+    return jsxRuntime.jsx("div", {});
+};
+function MapWrapper(_a) {
+    var children = _a.children;
+    var _b = React.useState(false), isUnMounted = _b[0], setIsUnMounted = _b[1];
+    var _c = React.useState("LOADING"), status = _c[0], setStatus = _c[1];
+    var _d = React.useState(getSettings().mapKey), mapKey = _d[0], setMapKey = _d[1];
+    React.useEffect(function () {
+        var handleChange = function (settings) {
+            return setMapKey(settings.mapKey);
+        };
+        subscribeToSettings(handleChange);
+        return function () {
+            unsubscribeFromSettings(handleChange);
+        };
+    }, []);
+    React.useEffect(function () {
+        if (!isUnMounted && mapKey) {
+            var loader = new jsApiLoader.Loader({
+                apiKey: mapKey,
+                libraries: ["places"],
+            });
+            var setStatusAndExecuteCallback_1 = function (newStatus) {
+                setStatus(newStatus);
+            };
+            setStatusAndExecuteCallback_1("LOADING");
+            loader.load().then(function () { return setStatusAndExecuteCallback_1("SUCCESS"); }, function () { return setStatusAndExecuteCallback_1("FAILURE"); });
+        }
+        return function () { return setIsUnMounted(true); };
+    }, [mapKey]);
+    if (!mapKey) {
+        return jsxRuntime.jsx("h2", { children: "Add google key" });
+    }
+    if (status === "SUCCESS" && children)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    render(status);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}
+
+var useAddressAutocomplete = function (form, name, handlePlaceSelectProp) {
+    var _a = React.useState(null), place = _a[0], setPlace = _a[1];
+    var inputRef = React.useRef(null);
+    function handlePlaceSelect(newPlace) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return __awaiter(this, void 0, void 0, function () {
+            var toCoords, lat, lng, street, houseNumber, zipCode, formattedAddress;
+            return __generator(this, function (_h) {
+                toCoords = ((_a = newPlace.geometry) === null || _a === void 0 ? void 0 : _a.location)
+                    ? {
+                        lat: newPlace.geometry.location.lat(),
+                        lng: newPlace.geometry.location.lng(),
+                    }
+                    : null;
+                lat = toCoords === null || toCoords === void 0 ? void 0 : toCoords.lat;
+                lng = toCoords === null || toCoords === void 0 ? void 0 : toCoords.lng;
+                if (handlePlaceSelectProp) {
+                    handlePlaceSelectProp(lat && lng ? { lat: lat, lng: lng } : null, newPlace);
+                }
+                form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lat"), lat, { shouldValidate: true });
+                form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lon"), lng, { shouldValidate: true });
+                form.setValue("".concat(name, ".addressAutoComplete"), newPlace, {
+                    shouldValidate: true,
+                });
+                street = (_c = (_b = newPlace.address_components) === null || _b === void 0 ? void 0 : _b.find(function (elem) {
+                    return elem.types.includes("route");
+                })) === null || _c === void 0 ? void 0 : _c.short_name;
+                houseNumber = (_e = (_d = newPlace.address_components) === null || _d === void 0 ? void 0 : _d.find(function (elem) {
+                    return elem.types.includes("street_number");
+                })) === null || _e === void 0 ? void 0 : _e.short_name;
+                zipCode = (_g = (_f = newPlace.address_components) === null || _f === void 0 ? void 0 : _f.find(function (elem) {
+                    return elem.types.includes("postal_code");
+                })) === null || _g === void 0 ? void 0 : _g.short_name;
+                formattedAddress = newPlace.formatted_address;
+                if (street && houseNumber) {
+                    formattedAddress = "".concat(street, ", ").concat(houseNumber);
+                }
+                form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".address"), formattedAddress, {
+                    shouldValidate: true,
+                });
+                form.setValue("zipCode", zipCode);
+                setPlace(newPlace);
+                return [2 /*return*/];
+            });
+        });
+    }
+    var addAutocomplete = function () {
+        if (inputRef.current) {
+            var autoComplete_1 = new window.google.maps.places.Autocomplete(inputRef.current);
+            autoComplete_1.addListener("place_changed", function () {
+                var newPlace = autoComplete_1.getPlace();
+                handlePlaceSelect(newPlace);
+            });
+        }
+    };
+    var cleanLocation = function () {
+        setPlace(null);
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lat"), null, { shouldValidate: true });
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lon"), null, { shouldValidate: true });
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".addressAutoComplete"), null, {
+            shouldValidate: true,
+        });
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".address"), "", { shouldValidate: true });
+    };
+    var checkMapLoaded = function () {
+        if (!window.google || !inputRef.current) {
+            setTimeout(checkMapLoaded, 1);
+        }
+        else
+            addAutocomplete();
+    };
+    var setDefaultPlace = function () {
+        var address = form.getValues("".concat(name, ".address"));
+        var lat = form.getValues("".concat(name, ".location.lat"));
+        var lng = form.getValues("".concat(name, ".location.lon"));
+        var defaultPlace = {
+            formatted_address: address,
+            geometry: {
+                location: { lat: lat, lng: lng },
+            },
+        };
+        if (address && lat && lng)
+            setPlace(defaultPlace);
+    };
+    React.useEffect(function () {
+        checkMapLoaded();
+        setDefaultPlace();
+    }, []);
+    return { inputRef: inputRef, handlePlaceSelect: handlePlaceSelect, place: place, cleanLocation: cleanLocation };
+};
+
+function InputWithAddressAutocomplete(_a) {
+    var form = _a.form, name = _a.name, handlePlaceSelect = _a.handlePlaceSelect, inputProps = __rest(_a, ["form", "name", "handlePlaceSelect"]);
+    var inputRef = useAddressAutocomplete(form, name, handlePlaceSelect).inputRef;
+    return (jsxRuntime.jsx(MapWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ name: "".concat(name, ".address"), form: form, ref: inputRef, placeholder: "" }, inputProps)) }));
+}
+InputWithAddressAutocomplete.defaultProps = {
+    label: "Address",
+};
+
+var DependentInput = function (props) {
+    var dependentInputName = props.dependentInputName, form = props.form, disabled = props.disabled, Input = props.Input, other = __rest(props, ["dependentInputName", "form", "disabled", "Input"]);
+    var dependentInputValue = reactHookForm.useWatch({
+        control: form.control,
+        name: dependentInputName,
+    });
+    var inputProps = __assign({ form: form, disabled: disabled || !dependentInputValue }, other);
+    return Input ? (jsxRuntime.jsx(Input, __assign({}, inputProps))) : (jsxRuntime.jsx(InputWithController, __assign({}, inputProps)));
+};
+
+var getVisibility = function (_a) {
+    var landlord = _a.landlord, tenant = _a.tenant;
+    if (landlord && tenant)
+        return "everybody";
+    if (landlord)
+        return "landlord";
+    if (tenant)
+        return "tenant";
+    return "nobody";
+};
+var getVisibilitySettings = function (visibility) {
+    switch (visibility) {
+        case "everybody":
+            return { tenant: true, landlord: true };
+        case "landlord":
+            return { tenant: false, landlord: true };
+        case "tenant":
+            return { tenant: true, landlord: false };
+        default:
+            return { tenant: false, landlord: false };
+    }
+};
+
+exports.AutocompleteOption = AutocompleteOption;
+exports.Avatar = Avatar;
+exports.ButtonSelect = ButtonSelect;
+exports.ButtonTab = ButtonTab;
+exports.ButtonsPanel = ButtonsPanel;
+exports.CalendarHeaderWithSelect = CalendarHeaderWithSelect;
+exports.CalendarStandardContainer = CalendarStandardContainer;
+exports.CalendarStandardHeader = CalendarStandardHeader;
+exports.CheckboxGroupWithTitle = CheckboxGroupWithTitle;
+exports.CheckboxWithController = CheckboxWithController;
+exports.DependentInput = DependentInput;
+exports.DesktopInputWithMonthPicker = DesktopInputWithMonthPicker;
+exports.DesktopMenuPanel = DesktopMenuPanel;
+exports.InputDropdown = InputDropdown;
+exports.InputFile = InputFile;
+exports.InputForDatepicker = InputForDatepicker;
+exports.InputMultiSelect = InputMultiSelect;
+exports.InputPassword = InputPassword;
+exports.InputPhoneWithForm = InputPhoneWithForm;
+exports.InputSelect = InputSelect;
+exports.InputSelectDropdown = InputSelectDropdown;
+exports.InputSelectWithController = InputSelectWithController;
+exports.InputTextAreaMobile = InputTextAreaMobile;
+exports.InputWithAddressAutocomplete = InputWithAddressAutocomplete;
+exports.InputWithAutocomplete = InputWithAutocomplete;
+exports.InputWithController = InputWithController;
+exports.InputWithDatePicker = InputWithDatePicker;
+exports.InputWithMask = InputWithMask;
+exports.InputWithMonthPicker = InputWithMonthPicker;
+exports.Loading = Loading;
+exports.MapWrapper = MapWrapper;
+exports.MenuItem = MenuItem;
+exports.MenuPanel = MenuPanel;
+exports.MobileInputWithMonthPicker = MobileInputWithMonthPicker;
+exports.MobileMenuPanel = MobileMenuPanel;
+exports.MonthPickerContainer = MonthPickerContainer;
+exports.MonthPickerHeader = MonthPickerHeader;
+exports.PassportStrengthBar = PassportStrengthBar;
+exports.RadioButtons = RadioButtons;
+exports.RadioButtonsWithController = RadioButtonsWithController;
+exports.RadioGroupWithLabel = RadioGroupWithLabel;
+exports.SelectMonth = SelectMonth;
+exports.SelectYear = SelectYear;
+exports.Switch = Switch;
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableHeadCell = TableHeadCell;
+exports.TableRow = TableRow;
+exports.Tooltip = Tooltip;
+exports.UndefinedAvatar = UndefinedAvatar;
+exports.accountRegExp = accountRegExp;
+exports.bicRegExp = bicRegExp;
+exports.carNumberRegExp = carNumberRegExp;
+exports.corrAccountRegExp = corrAccountRegExp;
+exports.dateRegExp = dateRegExp;
+exports.emailRegExp = emailRegExp;
+exports.getFormError = getFormError;
+exports.getFormValue = getFormValue;
+exports.getVisibility = getVisibility;
+exports.getVisibilitySettings = getVisibilitySettings;
+exports.innRegExp = innRegExp;
+exports.isValidWithMaskExp = isValidWithMaskExp;
+exports.mediumPasswordRegExp = mediumPasswordRegExp;
+exports.monthYearRegExp = monthYearRegExp;
+exports.phoneRegExp = phoneRegExp;
+exports.setSettings = setSettings;
+exports.simplePasswordRegExp = simplePasswordRegExp;
+exports.strongPasswordRegExp = strongPasswordRegExp;
+exports.swiftRegExp = swiftRegExp;
+exports.useAddressAutocomplete = useAddressAutocomplete;
+//# sourceMappingURL=index.js.map