kui-complex 0.0.57 → 0.0.59

package/TestForm/index.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
+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 * as React from 'react';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { InputWithAdornments, Grid, theme, Caption, InputWithMask as InputWithMask$1, Divider, Button, Modal, IconButton, InputWithCountryDropdown, Switch as Switch$1, LinearProgress } from 'kui-basic';
-import { jsx as jsx$1, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from '@emotion/react/jsx-runtime';
 import styled from '@emotion/styled';
 import { HalfArrowIcon, CalendarIcon, CheckIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon } from 'kui-icon';
 import { css } from '@emotion/react';
@@ -81,7 +81,7 @@ var InputWithController = forwardRef(function (_a, ref) {
 });
 
 var InputDropdown = forwardRef(function (props, ref) {
-    var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children"]);
+    var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
     var _a = useState(false), isScrollable = _a[0], setIsScrollable = _a[1];
     var dropdownRef = useRef(null);
     var closePopUp = function (e) {
@@ -103,7 +103,7 @@ var InputDropdown = forwardRef(function (props, ref) {
         if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
             if (isOpen) {
                 buttonRef.current.style.zIndex = "4";
-                var scrollContainer = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0];
+                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);
@@ -124,20 +124,21 @@ var InputDropdown = forwardRef(function (props, ref) {
             ref.current = elem;
         dropdownRef.current = elem;
     };
-    return (jsx(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen, isScrollable: isScrollable }, otherProps, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })));
+    return (jsxs(StyledDropdown$1, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
 });
-var StyledDropdown$1 = styled(Grid)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n  padding: ", ";\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n  padding: ", ";\n"])), function (_a) {
+var StyledDropdown$1 = styled(Grid)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  background: ", ";\n  z-index: 3;\n  top: 50px;\n  box-shadow: 0px 26px 34px 0px #0000001a;\n  border-radius: 0 0 8px 8px;\n  user-select: none;\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? "flex" : "none");
-}, theme.palette.grey.zero, function (_a) {
+}, theme.palette.grey.zero);
+var StyledWrapper = styled.div(templateObject_2$7 || (templateObject_2$7 = __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_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  width: 100%;\n  max-height: 389px;\n  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\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  z-index: 3;\n  overflow: auto;\n  -ms-overflow-style: none;\n  overflow-y: scroll;\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 ScrollingContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __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$d, templateObject_2$7;
+var templateObject_1$d, templateObject_2$7, templateObject_3$4;
 
 var InputSelectDropdown = forwardRef(function (_a, ref) {
     var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
@@ -237,7 +238,7 @@ var InputSelect = forwardRef(function (props, ref) {
         inputRef.current = e;
         register === null || register === void 0 ? void 0 : register.ref(e);
     };
-    return (jsxs(Wrapper$4, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error }, other, { endIcon: !props.disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
+    return (jsxs$1(Wrapper$4, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error }, other, { endIcon: !props.disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
                         { transition: "all linear .2s" },
                         isOpenDropdown && { transform: "rotate(180deg)" },
                     ] }, iconProps))) }, register, { ref: forwardedRef })), options && options.length > 0 && !props.disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
@@ -318,14 +319,14 @@ var CalendarHeaderWithSelect = forwardRef(function (_a, ref) {
     var currentYear = DateTime.now().year;
     var minMonth = (min === null || min === void 0 ? void 0 : min.year) === currentYear ? min === null || min === void 0 ? void 0 : min.month : 0;
     var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
-    return (jsx(Wrapper$3, __assign({ ref: ref }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
+    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) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && 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$1(StyledFooter, __assign({ ref: ref }, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] })));
+    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"])));
@@ -432,7 +433,7 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
         setDate(newDate);
     };
     var forwardedRef = useForkRef(ref, field.ref);
-    return (jsxs(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(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 })] }))] }));
+    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 = {
     title: "Дата рождения",
@@ -459,7 +460,7 @@ 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$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
+    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 }, { 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$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"])));
@@ -535,13 +536,13 @@ var MobileInputWithMonthPicker = forwardRef(function (_a, ref) {
         field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
         handleModalClose();
     };
-    return (jsxs$1(Wrapper$1, __assign({ ref: ref }, { children: [jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] })));
+    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$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
+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;
@@ -619,7 +620,7 @@ var PassportStrengthBar = forwardRef(function (_a, ref) {
     var strengthKey = strength
         ? strengthCoefficients[strength]
         : -1;
-    return (jsxs(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" }))] })));
+    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"])));
@@ -666,7 +667,7 @@ var InputPassword = forwardRef(function (props, ref) {
             checkPasswordStrength(fieldValue);
         }
     }, []);
-    return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
+    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;
@@ -732,7 +733,7 @@ var TestForm = function () {
     var handleSubmit = function (data) {
         console.log(data);
     };
-    return (jsxs$1("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: [
+    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" })] })));