kui-complex 0.0.50 → 0.0.51

package/TestForm/cjs/index.js

@@ -4,16 +4,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var yup = require('yup');
 var yup$1 = require('@hookform/resolvers/yup');
-var react = require('react');
+var React = require('react');
 var kuiBasic = require('kui-basic');
 var jsxRuntime$1 = require('@emotion/react/jsx-runtime');
 var styled = require('@emotion/styled');
 var kuiIcon = require('kui-icon');
-var react$1 = require('@emotion/react');
+var react = require('@emotion/react');
 var DatePicker = require('react-datepicker');
 var luxon = require('luxon');
 var _ = require('lodash');
-var InputMask = require('react-input-mask');
 var ru = require('date-fns/locale/ru');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,10 +36,10 @@ function _interopNamespace(e) {
 }
 
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-var InputMask__default = /*#__PURE__*/_interopDefaultLegacy(InputMask);
 var ru__default = /*#__PURE__*/_interopDefaultLegacy(ru);
 
 /******************************************************************************
@@ -86,7 +85,7 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var InputWithController = react.forwardRef(function (_a, ref) {
+var InputWithController = React.forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, error = _a.error, value = _a.value, inputProps = __rest(_a, ["form", "name", "error", "value"]);
     var handleChange = function (e, field) {
         field.onChange(e);
@@ -110,11 +109,11 @@ var InputWithController = react.forwardRef(function (_a, ref) {
 
 var dropdownStyles = function (_a) {
     var isOpen = _a.isOpen;
-    return react$1.css(templateObject_1$d || (templateObject_1$d = __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", kuiBasic.theme.palette.grey.zero, kuiBasic.theme.palette.grey.fifteenB);
+    return react.css(templateObject_1$d || (templateObject_1$d = __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", kuiBasic.theme.palette.grey.zero, kuiBasic.theme.palette.grey.fifteenB);
 };
-var InputDropdown = react.forwardRef(function (_a, ref) {
+var InputDropdown = React.forwardRef(function (_a, ref) {
     var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
-    var dropdownRef = react.useRef(null);
+    var dropdownRef = React.useRef(null);
     var closePopUp = function (e) {
         if (dropdownRef.current && buttonRef && buttonRef.current) {
             if (!dropdownRef.current.contains(e.target) &&
@@ -123,7 +122,7 @@ var InputDropdown = react.forwardRef(function (_a, ref) {
             }
         }
     };
-    react.useEffect(function () {
+    React.useEffect(function () {
         document.addEventListener("click", closePopUp);
         return function () {
             document.removeEventListener("click", closePopUp);
@@ -143,10 +142,10 @@ var InputDropdown = react.forwardRef(function (_a, ref) {
 });
 var templateObject_1$d;
 
-var InputSelectDropdown = react.forwardRef(function (_a, ref) {
+var InputSelectDropdown = React.forwardRef(function (_a, ref) {
     var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
-    var dropdownRef = react.useRef(null);
-    react.useEffect(function () {
+    var dropdownRef = React.useRef(null);
+    React.useEffect(function () {
         var _a;
         if (isOpenDropdown) {
             var element = document.querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"));
@@ -176,7 +175,7 @@ var InputSelectDropdown = react.forwardRef(function (_a, ref) {
 });
 var OptionWrapper = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __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__default["default"].div(templateObject_2$6 || (templateObject_2$6 = __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"])), kuiBasic.theme.palette.background.light1);
-var selectedStyles = react$1.css(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
+var selectedStyles = react.css(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
 var templateObject_1$c, templateObject_2$6, templateObject_3$3;
 
 var getFormValue = function (name, form) {
@@ -201,13 +200,13 @@ var getFormError = function (name, form) {
     return fieldError === null || fieldError === void 0 ? void 0 : fieldError.message;
 };
 
-var InputSelect = react.forwardRef(function (props, ref) {
+var InputSelect = React.forwardRef(function (props, ref) {
     var _a, _b, _c;
     var options = props.options, name = props.name, handleChange = props.handleChange, form = props.form, iconProps = props.iconProps, defaultValue = props.value, other = __rest(props, ["options", "name", "handleChange", "form", "iconProps", "value"]);
-    var _d = react.useState(false), isOpenDropdown = _d[0], setIsOpenDropDown = _d[1];
-    var _e = react.useState(defaultValue || getFormValue(name, form)), value = _e[0], setValue = _e[1];
+    var _d = React.useState(false), isOpenDropdown = _d[0], setIsOpenDropDown = _d[1];
+    var _e = React.useState(defaultValue || getFormValue(name, form)), value = _e[0], setValue = _e[1];
     var error = getFormError(name, form);
-    var inputRef = react.useRef(null);
+    var inputRef = React.useRef(null);
     var selectedLabel = (_a = options === null || options === void 0 ? void 0 : options.find(function (option) { return String(option.value) === String(value); })) === null || _a === void 0 ? void 0 : _a.label;
     var register = form === null || form === void 0 ? void 0 : form.register(name);
     var handleOpenDropdown = function () {
@@ -254,26 +253,25 @@ var Wrapper$4 = styled__default["default"].div(templateObject_1$b || (templateOb
 var StyledInput = styled__default["default"](kuiBasic.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$b, templateObject_2$5;
 
-var InputForDatepicker = react.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
-    var onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, mask = props.mask, handleCLick = props.handleCLick, startIcon = props.startIcon, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick", "startIcon"]);
+var InputForDatepicker = React.forwardRef(function (props, ref) {
+    var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
     var handleIconClick = function () {
-        if (handleCLick) {
-            handleCLick();
+        if (handleClick) {
+            handleClick();
         }
         else {
             onClick();
         }
     };
     var Icon = function () { return (jsxRuntime.jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) }))); };
-    return (jsxRuntime.jsx(InputMask__default["default"], __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref }))); } })));
+    return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref })));
 });
 var IconWrapper = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __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$a;
 
 var useToggle = function (isModalOpen) {
     if (isModalOpen === void 0) { isModalOpen = false; }
-    var _a = react.useState(isModalOpen), isOpen = _a[0], setIsOpen = _a[1];
+    var _a = React.useState(isModalOpen), isOpen = _a[0], setIsOpen = _a[1];
     var handleClose = function () {
         setIsOpen(false);
     };
@@ -291,7 +289,7 @@ var strongPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{14,
 var checkDisabled$1 = function (year, min, max) {
     return (min && year <= min) || (max && year >= max);
 };
-var SelectYear = react.forwardRef(function (_a, ref) {
+var SelectYear = React.forwardRef(function (_a, ref) {
     var yearOptions = _a.yearOptions; _a.options; var min = _a.min, max = _a.max, props = __rest(_a, ["yearOptions", "options", "min", "max"]);
     var formattedYearOptions = yearOptions.map(function (year) { return (__assign(__assign({}, year), { disabled: checkDisabled$1(Number(year.value), min, max) })); });
     return (jsxRuntime.jsx(InputSelect, __assign({ ref: ref, label: "Year", options: formattedYearOptions }, props)));
@@ -312,13 +310,13 @@ var monthValues = [
     { value: 10, label: "November" },
     { value: 11, label: "December" },
 ];
-var SelectMonth = react.forwardRef(function (props, ref) {
+var SelectMonth = React.forwardRef(function (props, ref) {
     var min = props.min, max = props.max; props.options; var other = __rest(props, ["min", "max", "options"]);
     var formattedMonths = monthValues.map(function (month) { return (__assign(__assign({}, month), { disabled: checkDisabled(month.value, min, max) })); });
     return (jsxRuntime.jsx(InputSelect, __assign({ ref: ref, label: "Month", options: formattedMonths }, other)));
 });
 
-var CalendarHeaderWithSelect = react.forwardRef(function (_a, ref) {
+var CalendarHeaderWithSelect = React.forwardRef(function (_a, ref) {
     var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions, max = _a.max, min = _a.min;
     var year = date.getFullYear();
     var month = date.getMonth();
@@ -330,7 +328,7 @@ var CalendarHeaderWithSelect = react.forwardRef(function (_a, ref) {
 var Wrapper$3 = styled__default["default"].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 = react.forwardRef(function (_a, ref) {
+var ModalFooter = React.forwardRef(function (_a, ref) {
     var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
     return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] })));
 });
@@ -339,13 +337,38 @@ var ButtonWrapper = styled__default["default"].div(templateObject_2$4 || (templa
 var ButtonStyled = styled__default["default"](kuiBasic.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 = react.forwardRef(function (_a, ref) {
+var CalendarStandardContainer = React.forwardRef(function (_a, ref) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
     return jsxRuntime.jsx(DatePickerContainer, __assign({ ref: ref }, props));
 });
 var DatePickerContainer = styled__default["default"].div(templateObject_1$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--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"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.seventy, kuiBasic.theme.palette.grey.zero);
 var templateObject_1$7;
 
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+function useForkRef() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return React__namespace.useMemo(function () {
+        if (refs.every(function (ref) { return ref == null; })) {
+            return null;
+        }
+        return function (instance) {
+            refs.forEach(function (ref) {
+                setRef(ref, instance);
+            });
+        };
+    }, refs);
+}
+
 var generateYearRange = function (offsetFromCurrent, maxYearCount) {
     if (!offsetFromCurrent || !maxYearCount)
         return [];
@@ -358,7 +381,7 @@ var generateYearRange = function (offsetFromCurrent, maxYearCount) {
         };
     });
 };
-var InputWithDatePicker = react.forwardRef(function (_a, ref) {
+var InputWithDatePicker = React.forwardRef(function (_a, ref) {
     var _b;
     var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, onChange = _a.onChange, max = _a.max, min = _a.min, footerLabel = _a.footerLabel, datePickerProps = _a.datePickerProps, alignTitle = _a.alignTitle, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams", "onChange", "max", "min", "footerLabel", "datePickerProps", "alignTitle"]);
     var _c = reactHookForm.useController({
@@ -369,10 +392,10 @@ var InputWithDatePicker = react.forwardRef(function (_a, ref) {
     var formattedValue = field.value ? field.value.toFormat("dd.MM.yyyy") : "";
     var formattedDate = field.value ? field.value.toJSDate() : null;
     var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
-    var _e = react.useState(formattedDate), date = _e[0], setDate = _e[1];
-    var _f = react.useState(formattedValue), value = _f[0], setValue = _f[1];
+    var _e = React.useState(formattedDate), date = _e[0], setDate = _e[1];
+    var _f = React.useState(formattedValue), value = _f[0], setValue = _f[1];
     var yearList = generateYearRange(yearParams === null || yearParams === void 0 ? void 0 : yearParams.min, yearParams === null || yearParams === void 0 ? void 0 : yearParams.max);
-    react.useEffect(function () {
+    React.useEffect(function () {
         if (!isModalOpen) {
             setDate(null);
         }
@@ -413,15 +436,8 @@ var InputWithDatePicker = react.forwardRef(function (_a, ref) {
     var handleDateChange = function (newDate) {
         setDate(newDate);
     };
-    var forwardedRef = function (elem) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        field.ref(elem);
-    };
-    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxRuntime$1.jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsxRuntime$1.jsx(ContentWrapper$1, { children: jsxRuntime$1.jsx(DatePicker__default["default"], __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsxRuntime$1.jsx(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
+    var forwardedRef = useForkRef(ref, field.ref);
+    return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxRuntime$1.jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsxRuntime$1.jsx(ContentWrapper$1, { children: jsxRuntime$1.jsx(DatePicker__default["default"], __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsxRuntime$1.jsx(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
 });
 InputWithDatePicker.defaultProps = {
     title: "Дата рождения",
@@ -439,14 +455,14 @@ var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$1
 });
 var templateObject_1$6, templateObject_2$3, templateObject_3$1, templateObject_4$1;
 
-var MonthPickerContainer = react.forwardRef(function (_a, ref) {
+var MonthPickerContainer = React.forwardRef(function (_a, ref) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
     return jsxRuntime.jsx(StyledContainer, __assign({ ref: ref }, props));
 });
 var StyledContainer = styled__default["default"].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"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
 var templateObject_1$5;
 
-var MonthPickerHeader = react.forwardRef(function (_a, ref) {
+var MonthPickerHeader = React.forwardRef(function (_a, ref) {
     var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
     return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
 });
@@ -454,7 +470,7 @@ var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateO
 var StyledHeader = styled__default["default"](kuiBasic.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 = react.forwardRef(function (_a, ref) {
+var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
     var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
     return (jsxRuntime.jsx(Wrapper$2, __assign({ ref: ref }, { children: jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: form.control, render: function (_a) {
                 var _b;
@@ -488,7 +504,7 @@ var ruCustom = __assign(__assign({}, ru__default["default"]), { localize: {
         dayPeriod: function () { return ""; },
         day: function () { return ""; },
     } });
-var MobileInputWithMonthPicker = react.forwardRef(function (_a, ref) {
+var MobileInputWithMonthPicker = React.forwardRef(function (_a, ref) {
     var _b;
     var title = _a.title, name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, props = __rest(_a, ["title", "name", "form", "disabled", "datePickerProps"]);
     var _c = reactHookForm.useController({
@@ -497,10 +513,10 @@ var MobileInputWithMonthPicker = react.forwardRef(function (_a, ref) {
     }), field = _c.field, fieldState = _c.fieldState;
     var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
-    var _e = react.useState(field.value
+    var _e = React.useState(field.value
         ? luxon.DateTime.fromJSDate(new Date(String(field.value))).toFormat("MM.yyyy")
         : null), value = _e[0], setValue = _e[1];
-    var _f = react.useState(value ? luxon.DateTime.fromFormat(value, "MM.yyyy").toJSDate() : null), date = _f[0], setDate = _f[1];
+    var _f = React.useState(value ? luxon.DateTime.fromFormat(value, "MM.yyyy").toJSDate() : null), date = _f[0], setDate = _f[1];
     var handleChange = function (e) {
         var targetValue = e.target.value;
         setValue(targetValue);
@@ -532,7 +548,7 @@ var templateObject_1$2, templateObject_2$1;
 
 var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
 
-var InputPhoneWithForm = react.forwardRef(function (props, ref) {
+var InputPhoneWithForm = React.forwardRef(function (props, ref) {
     var _a;
     var form = props.form, name = props.name, hiddenInputProps = props.hiddenInputProps, error = props.error, other = __rest(props, ["form", "name", "hiddenInputProps", "error"]);
     var codeRegister = reactHookForm.useController({
@@ -555,35 +571,26 @@ var InputPhoneWithForm = react.forwardRef(function (props, ref) {
     };
     var handleChange = function (e) {
         phoneRegister.field.onChange(e);
-        if (other.onChange) {
-            other.onChange(e);
-        }
-    };
-    var forwardedRef = function (elem) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        phoneRegister.field.ref(elem);
-    };
-    react.useEffect(function () {
         if (!codeRegister.field.value) {
             codeRegister.field.onChange({
                 target: { value: "7", name: "".concat(name, ".phoneCode") },
                 type: "change",
             });
         }
-    }, []);
+        if (other.onChange) {
+            other.onChange(e);
+        }
+    };
+    var forwardedRef = useForkRef(ref, phoneRegister.field.ref);
     return (jsxRuntime.jsx(kuiBasic.InputWithCountryDropdown, __assign({ message: errorMessage, 
         // @ts-ignore
-        hiddenInputProps: __assign(__assign(__assign({}, codeRegister.field), hiddenInputProps), { value: codeRegister.field.value || "7" }), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
+        hiddenInputProps: __assign(__assign({}, codeRegister.field), hiddenInputProps), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
 });
 InputPhoneWithForm.defaultProps = {
     name: "phone",
 };
 
-var Switch = react.forwardRef(function (_a, ref) {
+var Switch = React.forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
     return (jsxRuntime$1.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
             var field = _a.field;
@@ -609,7 +616,7 @@ var strengthTexts = {
     medium: "Средний",
     hard: "Сложный",
 };
-var PassportStrengthBar = react.forwardRef(function (_a, ref) {
+var PassportStrengthBar = React.forwardRef(function (_a, ref) {
     var strength = _a.strength;
     var color = strength
         ? strengthColors[strength]
@@ -629,9 +636,9 @@ var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(t
 var Description = styled__default["default"](kuiBasic.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 InputPassword = react.forwardRef(function (props, ref) {
-    var _a = react.useState(false), showPassword = _a[0], setShowPassword = _a[1];
-    var _b = react.useState(null), strength = _b[0], setStrength = _b[1];
+var InputPassword = React.forwardRef(function (props, ref) {
+    var _a = React.useState(false), showPassword = _a[0], setShowPassword = _a[1];
+    var _b = React.useState(null), strength = _b[0], setStrength = _b[1];
     var handleShowChange = function () {
         setShowPassword(function (prev) { return !prev; });
     };
@@ -657,7 +664,7 @@ var InputPassword = react.forwardRef(function (props, ref) {
         var targetValue = e.target.value;
         checkPasswordStrength(targetValue);
     };
-    react.useEffect(function () {
+    React.useEffect(function () {
         var form = props.form, name = props.name;
         var fieldValue = getFormValue(name, form);
         if (typeof fieldValue === "string") {
@@ -669,7 +676,7 @@ var InputPassword = react.forwardRef(function (props, ref) {
 var EyeIconWrapper = styled__default["default"].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 = react.forwardRef(function (_a, ref) {
+var InputWithMask = React.forwardRef(function (_a, ref) {
     var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
     var handleChange = function (e, field) {
         field.onChange(e);
@@ -677,14 +684,6 @@ var InputWithMask = react.forwardRef(function (_a, ref) {
             inputProps.onChange(e);
         }
     };
-    var forwardedRef = function (elem, field) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        field.ref(elem);
-    };
     var getError = function (fieldState) {
         var _a;
         return typeof error !== "undefined" && String(error).length > 0
@@ -695,7 +694,7 @@ var InputWithMask = react.forwardRef(function (_a, ref) {
             var field = _a.field, fieldState = _a.fieldState;
             return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
                     return handleChange(e, field);
-                }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
+                }, inputRef: ref })));
         } }));
 });