kui-complex 0.0.1 → 0.0.3

package/dist/index.es.js

@@ -1,2 +1,750 @@
+import { jsx as jsx$1, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Caption, Button, Container, Grid, InputWithAdornments, Heading, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1 } from 'kui-basic';
+import { themeOld } from 'kui-basic/src';
+import * as React from 'react';
+import { useEffect, useRef, useState, forwardRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon/src';
+import _ from 'lodash';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { Controller } from 'react-hook-form';
+import InputMask from 'react-input-mask';
+import { scroller, Events, Link, animateScroll, Element } from 'react-scroll';
+import ru from 'date-fns/locale/ru';
+import { DateTime } from 'luxon';
+import Swiper from 'react-id-swiper';
 
+/******************************************************************************
+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 __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var paletteBasic = themeOld.palette, themeBasicParams = __rest(themeOld, ["palette"]);
+var palette = {
+    brand: __assign(__assign({}, paletteBasic.primary), { background: paletteBasic.primary.light2 }),
+    grey: {
+        seventy: paletteBasic.secondary.main,
+        sixty: paletteBasic.secondary.gray60,
+        fiftyP: paletteBasic.secondary.gray50,
+        fourty: paletteBasic.secondary.gray40,
+        thirty: paletteBasic.secondary.gray30,
+        fifteenB: paletteBasic.secondary.gray15,
+        zero: paletteBasic.secondary.white,
+    },
+    background: __assign(__assign({}, paletteBasic.background), { light1: paletteBasic.background.main, light4: "#C5C6C7" }),
+    green: {
+        fiftyP: paletteBasic.success.main,
+        seventy: paletteBasic.success.green70,
+        sixty: paletteBasic.success.green60,
+        ten: paletteBasic.success.green10,
+        five: paletteBasic.success.green5,
+    },
+    red: {
+        fiftyP: paletteBasic.error.main,
+        seventy: paletteBasic.error.red70,
+        sixty: paletteBasic.error.red60,
+        ten: paletteBasic.error.red10,
+        five: paletteBasic.error.red5,
+    },
+    blue: {
+        fiftyP: paletteBasic.info.main,
+        seventy: paletteBasic.info.blue70,
+        sixty: paletteBasic.info.blue60,
+        ten: paletteBasic.info.blue10,
+        five: paletteBasic.info.blue5,
+    },
+    purple: {
+        fiftyP: paletteBasic.purple.main,
+        seventy: paletteBasic.purple.purple70,
+        sixty: paletteBasic.purple.purple60,
+        ten: paletteBasic.purple.purple10,
+        five: paletteBasic.purple.purple5,
+    },
+};
+var theme = __assign({ palette: palette }, themeBasicParams);
+
+var UndefinedAvatar = function (_a) {
+    var label = _a.label, otherProps = __rest(_a, ["label"]);
+    if (!label) {
+        return jsx("div", {});
+    }
+    var formattedLabel = label
+        .split(" ")
+        .map(function (el) { return el[0]; })
+        .slice(0, 3)
+        .join("");
+    return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar" }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
+};
+var Wrapper$8 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &,\n  p {\n    transition: all ease-out 0.3s;\n  }\n  @media (min-width: 900px) {\n    &:hover {\n      background-color: ", ";\n      p {\n        color: white;\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &,\n  p {\n    transition: all ease-out 0.3s;\n  }\n  @media (min-width: 900px) {\n    &:hover {\n      background-color: ", ";\n      p {\n        color: white;\n      }\n    }\n  }\n"])), theme.palette.brand.light, theme.palette.brand.main);
+var templateObject_1$n;
+
+var Avatar = function (_a) {
+    var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
+    return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
+};
+var Wrapper$7 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n"], ["\n  border-radius: 50%;\n  overflow: hidden;\n  cursor: pointer;\n"])));
+var StyledImage = styled.img(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"])));
+var largeAvatarCSS = function (_a) {
+    var avatarSize = _a.avatarSize;
+    return avatarSize === "lg" && css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
+};
+var StyledUndefinedAvatar = styled(UndefinedAvatar, {
+    shouldForwardProp: function (prop) { return prop !== "size"; },
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
+var sizeStyles = {
+    s: css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "], ["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "]))),
+    lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 80px;\n    height: 80px;\n  "], ["\n    width: 80px;\n    height: 80px;\n  "]))),
+};
+var templateObject_1$m, templateObject_2$d, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6;
+
+var ButtonTab = function (_a) {
+    var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
+    var handleClick = function () {
+        onClick(index);
+    };
+    return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles }, { children: label })));
+};
+var StyledButton = styled(Button)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  margin-right: 24px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: 24px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
+var inactiveStyles = css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  p {\n    color: ", ";\n  }\n"], ["\n  p {\n    color: ", ";\n  }\n"])), theme.palette.grey.seventy);
+var templateObject_1$l, templateObject_2$c;
+
+var ButtonsPanel = function (_a) {
+    var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange"]);
+    var _b = React.useState(Number(activeTab)), value = _b[0], setValue = _b[1];
+    var history = useHistory();
+    var handleChange = function (newValue) {
+        setValue(newValue);
+        if (paths && paths.length > 0) {
+            history.push(paths[newValue]);
+        }
+        if (onChange) {
+            onChange();
+        }
+    };
+    useEffect(function () {
+        setValue(Number(activeTab));
+    }, [activeTab]);
+    return (jsxs(Fragment, { children: [jsx$1(StyledContainer$1, __assign({ css: isSticky && { position: "sticky" } }, otherProps, { children: jsx$1(Container, { children: tabs.map(function (item, index) { return (jsx$1(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item.label }, item.label)); }) }) })), tabPanels.map(function (item, index) { return (jsx$1(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsx$1(Fragment, { children: item }) }), index)); })] }));
+};
+ButtonsPanel.defaultProps = {
+    isSticky: false,
+};
+var Content = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var StyledContainer$1 = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  background: ", ";\n  top: 80px;\n  z-index: 4;\n  padding-top: 16px;\n  padding-bottom: 24px;\n  @media (max-width: 1200px) {\n    padding-bottom: 18px;\n  }\n  @media (max-width: 600px) {\n    top: 48px;\n  }\n"], ["\n  background: ", ";\n  top: 80px;\n  z-index: 4;\n  padding-top: 16px;\n  padding-bottom: 24px;\n  @media (max-width: 1200px) {\n    padding-bottom: 18px;\n  }\n  @media (max-width: 600px) {\n    top: 48px;\n  }\n"])), theme.palette.grey.zero);
+var templateObject_1$k, templateObject_2$b;
+
+var dropdownStyles = function (_a) {
+    var isOpen = _a.isOpen;
+    return css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  border: 1px solid ", ";\n  top: 64px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n  user-select: none;\n  &::-webkit-scrollbar {\n    width: 0px;\n  },\n"], ["\n  width: 100%;\n  max-height: 389px;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  border: 1px solid ", ";\n  top: 64px;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n  user-select: none;\n  &::-webkit-scrollbar {\n    width: 0px;\n  },\n"])), isOpen ? "flex" : "none", theme.palette.grey.zero, theme.palette.grey.fifteenB);
+};
+var InputDropdown = function (_a) {
+    var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
+    var dropdownRef = useRef(null);
+    var closePopUp = function (e) {
+        if (dropdownRef.current && buttonRef && buttonRef.current) {
+            if (!dropdownRef.current.contains(e.target) &&
+                !buttonRef.current.contains(e.target)) {
+                handleClose();
+            }
+        }
+    };
+    useEffect(function () {
+        document.addEventListener("click", closePopUp);
+        return function () {
+            document.removeEventListener("click", closePopUp);
+        };
+    });
+    if (!isOpen) {
+        return null;
+    }
+    return (jsx$1(Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
+};
+var templateObject_1$j;
+
+var InputSelectDropdown = function (_a) {
+    var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
+    useEffect(function () {
+        var _a;
+        if (isOpenDropdown) {
+            (_a = document
+                .querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"))) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        }
+    }, [isOpenDropdown]);
+    return (jsx$1(InputDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
+            maxHeight: "142px",
+            padding: "4px",
+        } }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
+};
+var OptionWrapper = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"])));
+var StyledOption = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"])), theme.palette.background.light1);
+var selectedStyles = css(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), theme.palette.background.light1);
+var templateObject_1$i, templateObject_2$a, templateObject_3$4;
+
+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 InputSelect = function (_a) {
+    var _b, _c, _d, _e;
+    var options = _a.options, name = _a.name; _a.isLoading; var disabled = _a.disabled, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "isLoading", "disabled", "handleChange", "form", "value"]);
+    var _f = useState(false), isOpenDropdown = _f[0], setIsOpenDropDown = _f[1];
+    var _g = useState(getFormValue(name, form)), value = _g[0], setValue = _g[1];
+    var inputRef = useRef(null);
+    var selectedLabel = (_b = options === null || options === void 0 ? void 0 : options.find(function (option) {
+        return String(option.value) === String(valueProp || value);
+    })) === null || _b === void 0 ? void 0 : _b.label;
+    var error = (_c = form === null || form === void 0 ? void 0 : form.formState.errors[name]) === null || _c === void 0 ? void 0 : _c.message;
+    var control = form === null || form === void 0 ? void 0 : form.control.register(name);
+    var handleOpenDropdown = function () {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
+            (_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();
+        }
+        setIsOpenDropDown(function (prev) { return !prev; });
+    };
+    var handleCloseDropdown = function () {
+        setIsOpenDropDown(false);
+    };
+    var handleSelect = function (option) {
+        setValue(option.value);
+        if (handleChange) {
+            handleChange(option.value);
+        }
+        if (form) {
+            control === null || control === void 0 ? void 0 : control.onChange({
+                target: { value: option.value, name: name },
+                type: "change",
+            });
+        }
+        handleCloseDropdown();
+    };
+    return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, errorMessage: error }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, { width: 12, height: 13, css: [
+                        { transition: "all linear .2s" },
+                        isOpenDropdown && { transform: "rotate(180deg)" },
+                    ] })) }, form.register(name))), options.length > 0 && !disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
+                    current: (_e = (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.parentElement,
+                }, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: valueProp || value }))] }));
+};
+var Wrapper$6 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
+var StyledInput = styled(InputWithAdornments)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"])));
+var templateObject_1$h, templateObject_2$9;
+
+var SelectYear = function (_a) {
+    var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
+    return (jsx(InputSelect, __assign({ label: "Year", options: yearOptions }, props)));
+};
+
+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 = function (_a) {
+    _a.options; var props = __rest(_a, ["options"]);
+    return (jsx(InputSelect, __assign({ label: "Month", options: monthValues }, props)));
+};
+
+var CalendarHeaderWithSelect = function (_a) {
+    var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions;
+    var year = date.getFullYear();
+    var month = date.getMonth();
+    return (jsx(Wrapper$5, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
+};
+var Wrapper$5 = styled.div(templateObject_1$g || (templateObject_1$g = __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$g;
+
+var CalendarStandardContainer = function (_a) {
+    _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
+    return jsx(DatePickerContainer, __assign({}, props));
+};
+var DatePickerContainer = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"], ["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.fiftyP, theme.palette.grey.zero);
+var templateObject_1$f;
+
+var CalendarStandardHeader = function (_a) {
+    var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
+    var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
+    return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
+};
+var HeaderWrapper = styled(Grid)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  padding: 0 6px 34px;\n  @media (max-width: 600px) {\n    h2 {\n      font-size: 16px;\n    }\n  }\n"], ["\n  padding: 0 6px 34px;\n  @media (max-width: 600px) {\n    h2 {\n      font-size: 16px;\n    }\n  }\n"])));
+var StyledHeading = styled(Heading)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    font-weight: 700;\n  }\n"], ["\n  @media (max-width: 600px) {\n    font-weight: 700;\n  }\n"])));
+var CircleButtonStyled = styled(Button)(templateObject_3$3 || (templateObject_3$3 = __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$e, templateObject_2$8, templateObject_3$3;
+
+var InputForDatepicker = forwardRef(function (_a, ref) {
+    var onClick = _a.onClick; _a.onBlur; _a.onFocus; var props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
+    var onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, mask = props.mask, handleCLick = props.handleCLick, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick"]);
+    var handleIconClick = function () {
+        if (handleCLick) {
+            handleCLick();
+        }
+        else {
+            onClick();
+        }
+    };
+    return (jsx(InputMask, __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly }, { children: function () { return (jsx(InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsx(CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
+});
+var IconWrapper = styled.div(templateObject_1$d || (templateObject_1$d = __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$d;
+
+var MonthPickerContainer = function (_a) {
+    _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
+    return jsx(StyledContainer, __assign({}, props));
+};
+var StyledContainer = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid #fbfbfd !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\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 #fbfbfd !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\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"])));
+var templateObject_1$c;
+
+var MonthPickerHeader = function (_a) {
+    var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
+    return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
+};
+var StyledIconButton = styled(IconButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  &.Mui-disabled {\n    opacity: 0;\n  }\n"], ["\n  &.Mui-disabled {\n    opacity: 0;\n  }\n"])));
+var StyledHeader = styled(Grid)(templateObject_2$7 || (templateObject_2$7 = __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$b, templateObject_2$7;
+
+var DesktopInputWithMonthPicker = function (_a) {
+    var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
+    var error = getFormError(name, form);
+    var formValue = getFormValue(name, form);
+    return (jsx(Wrapper$4, { children: jsx(Controller, { name: name, control: form.control, render: function (_a) {
+                var field = _a.field;
+                return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, error: error, isLabelShrink: Boolean(formValue) }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
+            } }) }));
+};
+var Wrapper$4 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
+var templateObject_1$a;
+
+var MenuItem = function (_a) {
+    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);
+        }
+    };
+    useEffect(function () {
+        if (active === index) {
+            scroller.scrollTo(tab.label, { offset: offset });
+        }
+        Events.scrollEvent.register("begin", function (to, element) {
+            startScrolling();
+            if (element) {
+                handleClick(Number(element.dataset.index));
+            }
+        });
+        Events.scrollEvent.register("end", function (to, element) {
+            setTimeout(endScrolling);
+        });
+        return function () {
+            Events.scrollEvent.remove("begin");
+            Events.scrollEvent.remove("end");
+        };
+    }, []);
+    return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
+};
+var ButtonWrapper$1 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"], ["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"])));
+var disabledStyles = css(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"], ["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"])), theme.palette.grey.seventy);
+var templateObject_1$9, templateObject_2$6;
+
+var DesktopMenuPanel = function (_a) {
+    var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
+    return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" } }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
+};
+var Wrapper$3 = styled(Grid)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), theme.palette.background.light1);
+var templateObject_1$8;
+
+var InputWithForm = forwardRef(function (_a, ref) {
+    var form = _a.form, name = _a.name, errorProp = _a.error, otherProps = __rest(_a, ["form", "name", "error"]);
+    var error = typeof errorProp !== "undefined" && String(errorProp).length > 0
+        ? errorProp
+        : getFormError(name, form);
+    return (jsx(InputWithAdornments, __assign({ errorMessage: error, inputRef: ref }, form === null || form === void 0 ? void 0 : form.register(name), otherProps)));
+});
+
+var InputWithController = forwardRef(function (_a, ref) {
+    var form = _a.form, name = _a.name, defaultValue = _a.defaultValue, inputProps = __rest(_a, ["form", "name", "defaultValue"]);
+    var handleChange = function (e, field) {
+        field.onChange(e);
+        if (inputProps.onChange) {
+            inputProps.onChange(e);
+        }
+    };
+    return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, defaultValue: defaultValue, render: function (_a) {
+            var field = _a.field;
+            return (jsx(InputWithForm, __assign({ ref: ref, name: name, form: form }, inputProps, { onBlur: field.onBlur, onChange: function (e) {
+                    return handleChange(e, field);
+                }, value: field.value || "" })));
+        } }));
+});
+
+var strengthCoefficients = {
+    weak: 0,
+    simple: 1,
+    medium: 2,
+    hard: 3,
+};
+var strengthColors = {
+    weak: theme.palette.red.fiftyP,
+    simple: theme.palette.brand.main,
+    medium: theme.palette.blue.fiftyP,
+    hard: theme.palette.green.fiftyP,
+};
+var strengthTexts = {
+    weak: "Очень простой",
+    simple: "Простой",
+    medium: "Средний",
+    hard: "Сложный",
+};
+var PassportStrengthBar = function (_a) {
+    var strength = _a.strength;
+    var color = strength
+        ? strengthColors[strength]
+        : "";
+    var strengthKey = strength
+        ? strengthCoefficients[strength]
+        : -1;
+    return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
+};
+var Wrapper$2 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"], ["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"])));
+var ReliabilityLevelWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
+var ReliabilityLevel = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
+var StyledLinearProgress = styled(LinearProgress)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), theme.palette.grey.fifteenB, function (_a) {
+    var color = _a.color;
+    return color;
+});
+var Description = styled(Caption)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 16px;\n  @media (max-width: 900px) {\n    margin-top: 8px;\n    font-size: 12px;\n  }\n"], ["\n  margin-top: 16px;\n  @media (max-width: 900px) {\n    margin-top: 8px;\n    font-size: 12px;\n  }\n"])));
+var templateObject_1$7, templateObject_2$5, templateObject_3$2, templateObject_4, templateObject_5;
+
+var isValidWithMaskExp = /^[^_]+$/;
+var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
+var mediumPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{12,}$/;
+var strongPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{14,}$/;
+
+var InputPassword = function (props) {
+    var _a = useState(false), showPassword = _a[0], setShowPassword = _a[1];
+    var _b = 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);
+    };
+    useEffect(function () {
+        var form = props.form, name = props.name;
+        var fieldValue = getFormValue(name, form);
+        if (typeof fieldValue === "string") {
+            checkPasswordStrength(fieldValue);
+        }
+    }, []);
+    return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
+};
+var EyeIconWrapper = styled.div(templateObject_1$6 || (templateObject_1$6 = __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$6;
+
+var InputTextAreaMobile = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
+var InputWrapper = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 900px) {\n    display: none;\n  }\n"])));
+var TextAreaWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 901px) {\n    display: none;\n  }\n"])));
+var templateObject_1$5, templateObject_2$4;
+
+var useToggle = function (isModalOpen) {
+    if (isModalOpen === void 0) { isModalOpen = false; }
+    var _a = useState(isModalOpen), isOpen = _a[0], setIsOpen = _a[1];
+    var handleClose = function () {
+        setIsOpen(false);
+    };
+    var handleOpen = function () {
+        setIsOpen(true);
+    };
+    return [isOpen, handleOpen, handleClose];
+};
+
+var ModalFooter = function (_a) {
+    var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
+    return (jsxs$1(StyledFooter, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] }));
+};
+var StyledFooter = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 0 0 12px 12px;\n  z-index: 10;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n"], ["\n  background: ", ";\n  border-radius: 0 0 12px 12px;\n  z-index: 10;\n  position: sticky;\n  bottom: 0;\n  left: 0;\n"])), theme.palette.grey.zero);
+var ButtonWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"])));
+var ButtonStyled = styled(Button)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"])));
+var templateObject_1$4, templateObject_2$3, templateObject_3$1;
+
+registerLocale("ru", ru);
+var generateYearRange = function (offsetFromCurrent, maxYearCount) {
+    var endYear = DateTime.now().year - offsetFromCurrent;
+    return _.range(maxYearCount).map(function (elem) {
+        var fullYear = endYear - elem;
+        return {
+            value: fullYear,
+            label: fullYear,
+        };
+    });
+};
+var InputWithDatePicker = function (_a) {
+    var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams"]);
+    var fieldValue = getFormValue(name, form);
+    var error = getFormError(name, form);
+    var control = form.control.register(name);
+    var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
+    var _c = useState(DateTime.fromJSDate(new Date(String(fieldValue))).toFormat("dd.MM.yyyy")), value = _c[0], setValue = _c[1];
+    var _d = useState(DateTime.fromFormat(value, "dd.MM.yyyy").toJSDate()), date = _d[0], setDate = _d[1];
+    var yearList = generateYearRange(yearParams.min, yearParams.max);
+    var handleChange = function (e) {
+        var targetValue = e.target.value;
+        setValue(targetValue);
+        if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
+            var jsDate = DateTime.fromFormat(targetValue, "dd.MM.yyyy").toJSDate();
+            setDate(jsDate);
+            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: jsDate, name: name }, type: "change" });
+        }
+        else {
+            setDate(null);
+            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: null, name: name }, type: "change" });
+        }
+    };
+    var acceptWithDateSelected = function () {
+        if (date) {
+            setValue(DateTime.fromJSDate(date).toFormat("dd.MM.yyyy"));
+            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: date, name: name }, type: "change" });
+            handleModalClose();
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, error: error, isLabelShrink: Boolean(fieldValue) }, props)), jsxs(Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return jsx$1(DayContent, { children: day }); } }) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
+};
+InputWithDatePicker.defaultProps = {
+    title: "Дата рождения",
+    description: "Выберите год, месяц и число вашего рождения",
+    yearParams: { min: 18, max: 120 },
+};
+var ContentWrapper$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  padding: 36px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 36px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
+var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$2 || (templateObject_2$2 = __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    @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    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"])), theme.palette.background.light1, theme.palette.background.light1);
+var DayContent = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-top: 1px;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
+var templateObject_1$3, templateObject_2$2, templateObject_3;
+
+var shortMonths = [
+    "ЯНВ",
+    "ФЕВ",
+    "МАРТ",
+    "АПР",
+    "МАЙ",
+    "ИЮНЬ",
+    "ИЮЛЬ",
+    "АВГ",
+    "СЕНТ",
+    "ОКТ",
+    "НОЯБ",
+    "ДЕК",
+];
+
+var ruCustom = __assign(__assign({}, ru), { localize: {
+        month: function (n) { return shortMonths[n]; },
+        ordinalNumber: function () { return ""; },
+        era: function () { return ""; },
+        quarter: function () { return ""; },
+        dayPeriod: function () { return ""; },
+        day: function () { return ""; },
+    } });
+var MobileInputWithMonthPicker = function (_a) {
+    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 fieldValue = getFormValue(name, form);
+    var error = getFormError(name, form);
+    var control = form.control.register(name);
+    var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
+    var _c = useState(DateTime.fromJSDate(new Date(String(fieldValue))).toFormat("MM.yyyy")), value = _c[0], setValue = _c[1];
+    var _d = useState(DateTime.fromFormat(value, "MM.yyyy").toJSDate()), date = _d[0], setDate = _d[1];
+    var handleChange = function (e) {
+        var targetValue = e.target.value;
+        setValue(targetValue);
+        if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
+            var jsDate = DateTime.fromFormat(targetValue, "MM.yyyy").toJSDate();
+            setDate(jsDate);
+            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: jsDate, name: name }, type: "change" });
+        }
+        else {
+            setDate(null);
+            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: null, name: name }, type: "change" });
+        }
+    };
+    var acceptWithDateSelected = function () {
+        if (date) {
+            setValue(DateTime.fromJSDate(date).toFormat("MM.yyyy"));
+        }
+        else {
+            setValue("");
+        }
+        control === null || control === void 0 ? void 0 : control.onChange({ target: { value: date, name: name }, type: "change" });
+        handleModalClose();
+    };
+    return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, error: error, isLabelShrink: Boolean(fieldValue) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return jsx(MonthPickerHeader, __assign({}, headProps)); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
+};
+var Wrapper$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"], ["\n  @media (min-width: 601px) {\n    display: none;\n  }\n"])));
+var ContentWrapper = styled.div(templateObject_2$1 || (templateObject_2$1 = __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$2, templateObject_2$1;
+
+var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
+
+var MobileMenuPanel = function (_a) {
+    var tabs = _a.tabs, handleClick = _a.handleClick, variant = _a.variant, other = __rest(_a, ["tabs", "handleClick", "variant"]);
+    var swiperRef = 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 (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
+};
+var Wrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"])), theme.palette.background.light1);
+var SlideWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"], ["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"])));
+var templateObject_1$1, templateObject_2;
+
+var useWindowWidth = function (time) {
+    if (time === void 0) { time = 10; }
+    var _a = useState(0), width = _a[0], setWidth = _a[1];
+    useEffect(function () {
+        setWidth(window.innerWidth);
+        var handleResize = _.debounce(function () {
+            setWidth(window.innerWidth);
+        }, time);
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, []);
+    return width;
+};
+
+var MenuPanel = function (_a) {
+    var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, variant = _a.variant;
+    var width = useWindowWidth();
+    var _b = React.useState(activeTab), value = _b[0], setValue = _b[1];
+    var _c = React.useState(false), isScrolling = _c[0], setIsScrolling = _c[1];
+    var history = useHistory();
+    var handleClick = function (index) {
+        if (paths[index]) {
+            setValue(index);
+            var pathName = history.location.pathname;
+            var currentLocation = "".concat(pathName).concat(history.location.search);
+            var newLocation = "".concat(pathName).concat(paths[index]);
+            if (currentLocation !== newLocation) {
+                history.replace(newLocation);
+            }
+        }
+    };
+    useEffect(function () {
+        setValue(activeTab);
+    }, [activeTab]);
+    useEffect(function () {
+        if (typeof activeTab !== "number" && width < 901) {
+            animateScroll.scrollToTop();
+        }
+    }, []);
+    if (width === 0) {
+        return null;
+    }
+    return (jsxs("div", { children: [width > 765 ? (jsx$1(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsx$1(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsx$1("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsx$1(Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] }));
+};
+MenuPanel.defaultProps = {
+    variant: "grey",
+};
+var fullHeightStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: calc(100vh - 121px);\n"], ["\n  height: calc(100vh - 121px);\n"])));
+var templateObject_1;
+
+var Switch = function (_a) {
+    var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
+    return (jsx$1(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
+            var field = _a.field;
+            return (jsx$1(Switch$1, __assign({ checked: Boolean(field.value), onChange: field.onChange, "data-testid": name }, props)));
+        } }));
+};
+
+export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithForm, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, UndefinedAvatar };
 //# sourceMappingURL=index.es.js.map