kui-complex 0.0.148 → 0.0.150

package/TestForm/index.js

@@ -1,670 +0,0 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { Controller, useController, useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { InputWithAdornments, Tooltip, Grid, theme, Caption, InputWithMask as InputWithMask$1, Divider, Button, Modal, IconButton, InputWithCountryDropdown, Switch as Switch$1, LinearProgress } from 'kui-basic';
-import { jsxs as jsxs$1, jsx as jsx$1, Fragment } from '@emotion/react/jsx-runtime';
-import styled from '@emotion/styled';
-import { HalfArrowIcon, CalendarIcon, CheckIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon } from 'kui-icon';
-import { useForkRef, useToggle, isValidWithMaskExp, strongPasswordRegExp, mediumPasswordRegExp, simplePasswordRegExp } from 'kui-utils';
-import DatePicker from 'react-datepicker';
-import { DateTime } from 'luxon';
-import _ from 'lodash';
-import ru from 'date-fns/locale/ru';
-
-/******************************************************************************
-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 InputWithController = 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 (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
-            var field = _a.field, fieldState = _a.fieldState;
-            return (jsx(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 InputDropdown = forwardRef(function (props, ref) {
-    var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, input = props.input, className = props.className, strategy = props.strategy, onScroll = props.onScroll, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent", "input", "className", "strategy", "onScroll"]);
-    var _a = useState(false), isScrollable = _a[0], setIsScrollable = _a[1];
-    var dropdownRef = useRef(null);
-    var handleChange = function (open) {
-        if (!open) {
-            handleClose();
-        }
-    };
-    useEffect(function () {
-        var _a;
-        if ((buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) && isOpen) {
-            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);
-            }
-        }
-    }, [isOpen]);
-    var forwardedRef = function (elem) {
-        if (typeof ref === "function")
-            ref(elem);
-        else if (ref)
-            ref.current = elem;
-        dropdownRef.current = elem;
-    };
-    return (jsx(StyledTooltip, __assign({ fullWidth: true, withoutMobile: true, open: isOpen, onChange: handleChange, toggleMethod: "controlled", strategy: strategy || "fixed", placement: "bottom", className: className, content: jsxs(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef }, otherProps, { children: [jsx(StyledWrapper, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ onScroll: onScroll, isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })) }, { children: input })));
-});
-var StyledTooltip = styled(Tooltip)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  width: 100%;\n  > div {\n    z-index: unset;\n    width: 100%;\n    > div {\n      z-index: unset;\n      width: 100%;\n      > div {\n        width: 100%;\n      }\n    }\n  }\n  .KUI-Popper {\n    max-width: unset;\n    > div {\n      user-select: none;\n      padding: 0;\n      border-radius: 0 0 8px 8px;\n      box-shadow: 0px 26px 34px 0px #0000001a;\n    }\n    &.top > div {\n      border-radius: 8px 8px 0 0;\n    }\n  }\n"], ["\n  width: 100%;\n  > div {\n    z-index: unset;\n    width: 100%;\n    > div {\n      z-index: unset;\n      width: 100%;\n      > div {\n        width: 100%;\n      }\n    }\n  }\n  .KUI-Popper {\n    max-width: unset;\n    > div {\n      user-select: none;\n      padding: 0;\n      border-radius: 0 0 8px 8px;\n      box-shadow: 0px 26px 34px 0px #0000001a;\n    }\n    &.top > div {\n      border-radius: 8px 8px 0 0;\n    }\n  }\n"])));
-var StyledDropdown$1 = styled(Grid)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  width: 100%;\n  user-select: none;\n"], ["\n  width: 100%;\n  user-select: none;\n"])));
-var StyledWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __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.div(templateObject_4$2 || (templateObject_4$2 = __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");
-}, theme.palette.grey.fifteenB, theme.palette.grey.thirty);
-var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$2;
-
-var InputSelectDropdown = forwardRef(function (_a, ref) {
-    var input = _a.input, 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 (jsx(StyledDropdown, __assign({ input: input, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
-});
-var OptionWrapper = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: ", ";\n  p {\n    color: ", ";\n  }\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: ", ";\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? "auto" : "pointer");
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled ? theme.palette.grey.fiftyP : theme.palette.grey.seventy;
-});
-var StyledDropdown = styled(InputDropdown)(templateObject_2$6 || (templateObject_2$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 templateObject_1$d, templateObject_2$6;
-
-var InputSelectBase = 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 = useState(false), isDropdownOpen = _c[0], setIsDropdownOpen = _c[1];
-    var inputRef = 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();
-        }
-        if (!disabled)
-            setIsDropdownOpen(function (prev) { return !prev; });
-    };
-    var handleCloseDropdown = function () {
-        setIsDropdownOpen(false);
-    };
-    var handleSelect = function (option) {
-        if (handleChange)
-            handleChange(option);
-        handleCloseDropdown();
-    };
-    return (jsxs$1(Wrapper$4, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(InputSelectDropdown, { options: options, inputRef: {
-                    current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
-                }, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption, input: jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: forwardedRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
-                            { transition: "all linear .2s" },
-                            isDropdownOpen && { transform: "rotate(180deg)" },
-                        ] }, iconProps))) })) })] }));
-});
-var Wrapper$4 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
-var StyledInput = styled(InputWithAdornments)(templateObject_2$5 || (templateObject_2$5 = __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$c, templateObject_2$5;
-
-function InputSelectOption(props) {
-    var option = props.option, selectedValue = props.selectedValue;
-    return (jsx(StyledOption, __assign({ selected: selectedValue === option.value }, { children: jsx(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
-}
-var StyledOption = styled.div(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  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var selected = _a.selected;
-    return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
-}, theme.palette.background.light1);
-var templateObject_1$b;
-
-var InputSelect = 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 = useState(valueProp), value = _c[0], setValue = _c[1];
-    var selectedLabel = (_b = options.find(function (option) { return String(option.value) === String(value); })) === null || _b === void 0 ? void 0 : _b.label;
-    var handleSelect = function (option) {
-        setValue(option.value);
-        if (handleChange) {
-            handleChange(option.value);
-        }
-    };
-    useEffect(function () {
-        if (typeof valueProp !== "undefined")
-            setValue(valueProp);
-    }, [valueProp]);
-    return (jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, selectedLabel: selectedLabel, selectedValue: value, name: name, renderOption: function (option, selectedValue) { return (jsx(InputSelectOption, { option: option, selectedValue: selectedValue })); }, ref: ref }, inputProps)));
-});
-
-var InputForDatepicker = forwardRef(function (props, ref) {
-    var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
-    var handleIconClick = function () {
-        if (!disabled) {
-            if (handleClick) {
-                handleClick();
-            }
-            else {
-                onClick();
-            }
-        }
-    };
-    var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
-    return (jsx(InputWithMask$1, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
-});
-var IconWrapper = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  z-index: 1;\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? "auto" : "pointer");
-});
-var templateObject_1$a;
-
-var checkDisabled$1 = function (year, min, max) {
-    return (min && year < min) || (max && year > max);
-};
-var SelectYear = 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 (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 = 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 (jsx(InputSelect, __assign({ ref: ref, label: "Month", options: formattedMonths }, other)));
-});
-
-var CalendarHeaderWithSelect = 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 minMonth = (min === null || min === void 0 ? void 0 : min.year) === year && (min === null || min === void 0 ? void 0 : min.month) ? min.month - 1 : 0;
-    var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === year ? max === null || max === void 0 ? void 0 : max.month : 11;
-    return (jsx(Wrapper$3, __assign({ ref: ref }, { children: jsxs(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= year && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= year && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
-});
-var Wrapper$3 = styled.div(templateObject_1$9 || (templateObject_1$9 = __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$9;
-
-var ModalFooter = forwardRef(function (_a, ref) {
-    var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
-    return (jsxs(StyledFooter, __assign({ ref: ref }, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] })));
-});
-var StyledFooter = styled.div(templateObject_1$8 || (templateObject_1$8 = __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$4 || (templateObject_2$4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  padding: 24px 40px;\n  @media (max-width: 600px) {\n    padding: 24px 16px;\n  }\n"])));
-var ButtonStyled = styled(Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"])));
-var templateObject_1$8, templateObject_2$4, templateObject_3$2;
-
-var CalendarStandardContainer = forwardRef(function (_a, ref) {
-    _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
-    return jsx(DatePickerContainer, __assign({ ref: ref }, props));
-});
-var DatePickerContainer = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--today {\n    color: ", ";\n    background-color: ", ";\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"], ["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--today {\n    color: ", ";\n    background-color: ", ";\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.light, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
-var templateObject_1$7;
-
-var generateYearRange = function (offsetFromCurrent, maxYearCount) {
-    if (!offsetFromCurrent || !maxYearCount)
-        return [];
-    var endYear = DateTime.now().year - offsetFromCurrent;
-    return _.range(maxYearCount).map(function (elem) {
-        var fullYear = endYear - elem;
-        return {
-            value: fullYear,
-            label: fullYear,
-        };
-    });
-};
-var InputWithDatePicker = 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 = 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 = useState(formattedDate), date = _e[0], setDate = _e[1];
-    var _f = 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);
-    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 = 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 = 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 (jsxs$1(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxs$1(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
-});
-InputWithDatePicker.defaultProps = {
-    alignTitle: "center",
-};
-var ContentWrapper$1 = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
-var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"], ["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"])), theme.palette.background.light1, theme.palette.background.light1);
-var DayContent = styled.span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
-var StyledModal = styled(Modal)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"])), function (_a) {
-    var alignTitle = _a.alignTitle;
-    return alignTitle || "center";
-});
-var templateObject_1$6, templateObject_2$3, templateObject_3$1, templateObject_4$1;
-
-var MonthPickerContainer = forwardRef(function (_a, ref) {
-    _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
-    return jsx(StyledContainer, __assign({ ref: ref }, props));
-});
-var StyledContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white !important;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !important;\n  background: #fff;\n  overflow: hidden;\n  z-index: 5;\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n  .react-datepicker__header,\n  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    padding: 0;\n    border: none;\n    background-color: #fff;\n  }\n  .react-datepicker__month {\n    margin: 0px 8px 8px !important;\n    border-radius: 12px;\n    border: 1px solid ", ";\n    width: 238px;\n    height: 169px;\n    display: flex;\n    flex-direction: column;\n  }\n  .react-datepicker__month-text {\n    margin: 4px !important;\n    /*width: auto !important;*/\n    width: calc(100% / 3) !important;\n    position: relative;\n    display: flex !important;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    height: calc(100% / 4);\n    display: flex;\n  }\n\n  .react-datepicker__month-text:after {\n    content: \"\";\n    display: block;\n    height: calc(100% + 8px);\n    width: 1px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: ", ";\n  }\n\n  .react-datepicker__month-text:nth-child(3n):after {\n    content: none;\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month-text--keyboard-selected {\n    background-color: ", " !important;\n    border-radius: 8px !important;\n    color: white !important;\n  }\n  .react-datepicker__month-wrapper {\n    border-bottom: 1px solid ", ";\n  }\n\n  .react-datepicker__month-wrapper:last-child {\n    border-bottom: none;\n  }\n\n  @media (max-width: 600px) {\n    .react-datepicker__month-container {\n      width: 100%;\n      height: 100%;\n    }\n    .react-datepicker__month {\n      margin: 0px 16px 16px !important;\n      height: calc(100% - 58px);\n      text-align: center;\n      width: auto;\n    }\n    .react-datepicker__month-text {\n      margin: 8px !important;\n    }\n    .react-datepicker__month-text:after {\n      height: calc(100% + 16px);\n      top: -8px;\n      right: -8px;\n    }\n    .react-datepicker__month-text:nth-child(3n):after {\n      content: none;\n    }\n  }\n  @media (max-width: 600px) {\n    width: 100%;\n    height: 262px;\n    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n  }\n"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
-var templateObject_1$5;
-
-var MonthPickerHeader = forwardRef(function (_a, ref) {
-    var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
-    return (jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear, type: "button" }, { 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, type: "button" }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
-});
-var StyledIconButton = styled(IconButton)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"], ["\n  height: 36px;\n  &:disabled {\n    opacity: 0;\n  }\n"])));
-var StyledHeader = styled(Grid)(templateObject_2$2 || (templateObject_2$2 = __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$4, templateObject_2$2;
-
-var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
-    var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, onChange = _a.onChange, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps", "onChange"]);
-    var _b = useState(), changedValue = _b[0], setChangedValue = _b[1];
-    var handleChange = function (date, field) {
-        field.onChange(date);
-        setChangedValue(date);
-        if (onChange)
-            onChange(date);
-    };
-    return (jsx(Wrapper$2, __assign({ ref: ref }, { children: jsx(Controller, { name: name, control: form.control, render: function (_a) {
-                var _b;
-                var field = _a.field, fieldState = _a.fieldState;
-                return (jsx(DatePicker, __assign({ selected: field.value, onChange: function (e) { return handleChange(e, field); }, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps), changedValue), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
-            } }) })));
-});
-var Wrapper$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
-var templateObject_1$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 = 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 = 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 = useState(field.value
-        ? DateTime.fromJSDate(new Date(String(field.value))).toFormat("MM.yyyy")
-        : null), value = _e[0], setValue = _e[1];
-    var _f = useState(value ? 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 = 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(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 (jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxs(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(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
-
-var InputPhoneWithForm = 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 = useController({
-        control: form.control,
-        name: "".concat(name, ".phoneCode"),
-        defaultValue: "7",
-    });
-    var phoneRegister = 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 (jsx(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 Switch = forwardRef(function (_a, ref) {
-    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, ref: ref, name: name }, props)));
-        } }));
-});
-
-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 = forwardRef(function (_a, ref) {
-    var strength = _a.strength;
-    var color = strength
-        ? strengthColors[strength]
-        : "";
-    var strengthKey = strength
-        ? strengthCoefficients[strength]
-        : -1;
-    return (jsxs$1(Wrapper, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
-});
-var Wrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __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 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
-var ReliabilityLevel = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
-var StyledLinearProgress = styled(LinearProgress)(templateObject_4 || (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$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-
-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 InputPassword = forwardRef(function (props, ref) {
-    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(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
-});
-var EyeIconWrapper = styled.div(templateObject_1 || (templateObject_1 = __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;
-
-var InputWithMask = 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 (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
-            var field = _a.field, fieldState = _a.fieldState;
-            return (jsx(InputWithMask$1, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
-                    return handleChange(e, field);
-                }, inputRef: ref })));
-        } }));
-});
-
-var Schema = yup.object().shape({
-    fields: yup.object({
-        basic: yup.string().required("basic"),
-        withMask: yup.string().required("withMask"),
-        select: yup.string().required("select"),
-        withDatepicker: yup
-            .date()
-            .max(new Date("2022-10-15"), "date")
-            .required("withDatepicker")
-            .nullable(),
-        withMonthpicker: yup.date().required("withMonthpicker"),
-        phone: yup.object({
-            phoneNumber: yup.string().required("phone"),
-        }),
-        password: yup.string().required("password"),
-    }),
-});
-var TestForm = function () {
-    var form = useForm({
-        defaultValues: {
-            fields: {
-                basic: "Basic input",
-                withMask: "565-632",
-                select: "second",
-                withDatepicker: new Date(),
-                withMonthpicker: new Date(),
-                phone: {
-                    phoneNumber: "9123456987",
-                    phoneCode: "93",
-                },
-                switch: true,
-                password: "password",
-            },
-        },
-        resolver: yupResolver(Schema),
-    });
-    var handleSubmit = function (data) {
-        console.log(data);
-    };
-    return (jsxs("form", __assign({ onSubmit: form.handleSubmit(handleSubmit, handleSubmit) }, { children: [jsx("button", __assign({ type: "submit" }, { children: "Submit" })), jsx(InputWithController, { form: form, name: "fields.basic", label: "Basic" }), jsx(InputWithMask, { mask: "999-999", form: form, name: "fields.withMask", label: "With mask" }), jsx(InputSelect, { form: form, name: "fields.select", label: "Select", options: [
-                    { label: "First", value: "first" },
-                    { label: "Second", value: "second" },
-                ] }), jsx(InputWithDatePicker, { form: form, name: "fields.withDatepicker", label: "With Datepicker" }), jsx(InputWithMonthPicker, { form: form, name: "fields.withMonthpicker", label: "With Monthpicker" }), jsx(InputPhoneWithForm, { form: form, name: "fields.phone", label: "Phone" }), jsx(Switch, { form: form, name: "fields.switch", label: "Switch" }), jsx(InputPassword, { form: form, name: "fields.password", label: "Password" })] })));
-};
-
-export { TestForm as default };
-//# sourceMappingURL=index.js.map