kui-complex 0.0.9 → 0.0.11

package/dist/index.es.js

@@ -4,14 +4,14 @@ import { jsx as jsx$1, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { themeOld, Caption, Button, Container, Grid, InputWithAdornments, Heading, theme as theme$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1 } from 'kui-basic';
+import { theme, Caption, Button, Container, Grid, InputWithAdornments, Heading, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
 import * as React from 'react';
-import { useEffect, useRef, useState, forwardRef } from 'react';
+import { useEffect, useRef, forwardRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon';
 import _ from 'lodash';
 import DatePicker, { registerLocale } from 'react-datepicker';
-import { Controller } from 'react-hook-form';
+import { Controller, useController } from 'react-hook-form';
 import InputMask from 'react-input-mask';
 import { scroller, Events, Link, animateScroll, Element } from 'react-scroll';
 import ru from 'date-fns/locale/ru';
@@ -61,50 +61,6 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var paletteBasic = themeOld.palette, themeBasicParams = __rest(themeOld, ["palette"]);
-var palette = {
-    brand: __assign(__assign({}, paletteBasic.primary), { background: paletteBasic.primary.light2 }),
-    grey: {
-        seventy: paletteBasic.secondary.main,
-        sixty: paletteBasic.secondary.gray60,
-        fiftyP: paletteBasic.secondary.gray50,
-        fourty: paletteBasic.secondary.gray40,
-        thirty: paletteBasic.secondary.gray30,
-        fifteenB: paletteBasic.secondary.gray15,
-        zero: paletteBasic.secondary.white,
-    },
-    background: __assign(__assign({}, paletteBasic.background), { light1: paletteBasic.background.main, light4: "#C5C6C7" }),
-    green: {
-        fiftyP: paletteBasic.success.main,
-        seventy: paletteBasic.success.green70,
-        sixty: paletteBasic.success.green60,
-        ten: paletteBasic.success.green10,
-        five: paletteBasic.success.green5,
-    },
-    red: {
-        fiftyP: paletteBasic.error.main,
-        seventy: paletteBasic.error.red70,
-        sixty: paletteBasic.error.red60,
-        ten: paletteBasic.error.red10,
-        five: paletteBasic.error.red5,
-    },
-    blue: {
-        fiftyP: paletteBasic.info.main,
-        seventy: paletteBasic.info.blue70,
-        sixty: paletteBasic.info.blue60,
-        ten: paletteBasic.info.blue10,
-        five: paletteBasic.info.blue5,
-    },
-    purple: {
-        fiftyP: paletteBasic.purple.main,
-        seventy: paletteBasic.purple.purple70,
-        sixty: paletteBasic.purple.purple60,
-        ten: paletteBasic.purple.purple10,
-        five: paletteBasic.purple.purple5,
-    },
-};
-var theme = __assign({ palette: palette }, themeBasicParams);
-
 var UndefinedAvatar = function (_a) {
     var label = _a.label, otherProps = __rest(_a, ["label"]);
     if (!label) {
@@ -128,7 +84,7 @@ var Wrapper$7 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTem
 var StyledImage = styled.img(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n"])));
 var largeAvatarCSS = function (_a) {
     var avatarSize = _a.avatarSize;
-    return avatarSize === "lg" && css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
+    return avatarSize === "lg" && css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
 };
 var StyledUndefinedAvatar = styled(UndefinedAvatar, {
     shouldForwardProp: function (prop) { return prop !== "size"; },
@@ -137,7 +93,7 @@ var sizeStyles = {
     s: css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "], ["\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      width: 32px;\n      height: 32px;\n    }\n  "]))),
     lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 80px;\n    height: 80px;\n  "], ["\n    width: 80px;\n    height: 80px;\n  "]))),
 };
-var templateObject_1$m, templateObject_2$d, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6;
+var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$1, templateObject_5$1, templateObject_6;
 
 var ButtonTab = function (_a) {
     var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
@@ -219,8 +175,8 @@ var InputSelectDropdown = function (_a) {
 };
 var OptionWrapper = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"], ["\n  width: 100%;\n  padding: 2px 0;\n  cursor: pointer;\n"])));
 var StyledOption = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  padding: 8px;\n  transition: all ease-out 0.3s;\n  border-radius: 4px;\n  &:hover {\n    background-color: ", ";\n  }\n"])), theme.palette.background.light1);
-var selectedStyles = css(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), theme.palette.background.light1);
-var templateObject_1$i, templateObject_2$a, templateObject_3$4;
+var selectedStyles = css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), theme.palette.background.light1);
+var templateObject_1$i, templateObject_2$a, templateObject_3$5;
 
 var getFormValue = function (name, form) {
     var names = name === null || name === void 0 ? void 0 : name.split(".");
@@ -244,17 +200,17 @@ var getFormError = function (name, form) {
     return fieldError === null || fieldError === void 0 ? void 0 : fieldError.message;
 };
 
-var InputSelect = function (_a) {
-    var _b, _c, _d, _e;
-    var options = _a.options, name = _a.name; _a.isLoading; var disabled = _a.disabled, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "isLoading", "disabled", "handleChange", "form", "value"]);
-    var _f = useState(false), isOpenDropdown = _f[0], setIsOpenDropDown = _f[1];
-    var _g = useState(getFormValue(name, form)), value = _g[0], setValue = _g[1];
+var InputSelect = forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var options = props.options, name = props.name, handleChange = props.handleChange, form = props.form, other = __rest(props, ["options", "name", "handleChange", "form"]);
+    var _d = useState(false), isOpenDropdown = _d[0], setIsOpenDropDown = _d[1];
+    var _e = useState(getFormValue(name, form)), value = _e[0], setValue = _e[1];
+    var error = getFormError(name, form);
     var inputRef = useRef(null);
-    var selectedLabel = (_b = options === null || options === void 0 ? void 0 : options.find(function (option) {
-        return String(option.value) === String(valueProp || value);
-    })) === null || _b === void 0 ? void 0 : _b.label;
-    var error = (_c = form === null || form === void 0 ? void 0 : form.formState.errors[name]) === null || _c === void 0 ? void 0 : _c.message;
-    var control = form === null || form === void 0 ? void 0 : form.control.register(name);
+    var selectedLabel = (_a = options === null || options === void 0 ? void 0 : options.find(function (option) {
+        return String(option.value) === String(other.value || value);
+    })) === null || _a === void 0 ? void 0 : _a.label;
+    var register = form === null || form === void 0 ? void 0 : form.register(name);
     var handleOpenDropdown = function () {
         var _a, _b, _c, _d;
         if ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
@@ -271,27 +227,40 @@ var InputSelect = function (_a) {
             handleChange(option.value);
         }
         if (form) {
-            control === null || control === void 0 ? void 0 : control.onChange({
+            register === null || register === void 0 ? void 0 : register.onChange({
                 target: { value: option.value, name: name },
                 type: "change",
             });
         }
         handleCloseDropdown();
     };
-    return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, errorMessage: error }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, { width: 12, height: 13, css: [
-                        { transition: "all linear .2s" },
-                        isOpenDropdown && { transform: "rotate(180deg)" },
-                    ] })) }, form.register(name))), options.length > 0 && !disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
-                    current: (_e = (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.parentElement,
-                }, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: valueProp || value }))] }));
-};
+    var forwardedRef = function (e) {
+        if (ref) {
+            // eslint-disable-next-line no-param-reassign
+            // @ts-ignore
+            ref.current = e;
+        }
+        // @ts-ignore
+        inputRef.current = e;
+        register === null || register === void 0 ? void 0 : register.ref(e);
+    };
+    return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, errorMessage: error }, other, { endIcon: !props.disabled && (jsx$1(StyledIconWrapper, { children: jsx$1(HalfArrowIcon, { width: 12, height: 13, css: [
+                            { transition: "all linear .2s" },
+                            isOpenDropdown && { transform: "rotate(180deg)" },
+                        ] }) })) }, register, { ref: forwardedRef })), options && options.length > 0 && !props.disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
+                    current: (_c = (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement,
+                }, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: other.value || value }))] }));
+});
 var Wrapper$6 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n"], ["\n  position: relative;\n  text-align: left;\n"])));
 var StyledInput = styled(InputWithAdornments)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"])));
-var templateObject_1$h, templateObject_2$9;
+var StyledIconWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  padding-right: 8px;\n  height: 13px;\n"], ["\n  padding-right: 8px;\n  height: 13px;\n"])));
+var templateObject_1$h, templateObject_2$9, templateObject_3$4;
 
 var SelectYear = function (_a) {
     var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
-    return (jsx(InputSelect, __assign({ label: "Year", options: yearOptions }, props)));
+    return (
+    // @ts-ignore
+    jsx(InputSelect, __assign({ label: "Year", options: yearOptions }, props)));
 };
 
 var monthValues = [
@@ -310,13 +279,15 @@ var monthValues = [
 ];
 var SelectMonth = function (_a) {
     _a.options; var props = __rest(_a, ["options"]);
-    return (jsx(InputSelect, __assign({ label: "Month", options: monthValues }, props)));
+    return (
+    // @ts-ignore
+    jsx(InputSelect, __assign({ label: "Month", options: monthValues }, props)));
 };
 
 var CalendarHeaderWithSelect = function (_a) {
     var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions;
     var year = date.getFullYear();
-    var month = date.getMonth();
+    var month = date.getMonth() + 1;
     return (jsx(Wrapper$5, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
 };
 var Wrapper$5 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  margin-bottom: 24px;\n  @media (max-width: 900px) {\n    padding: 0 18px;\n    margin-bottom: 20px;\n  }\n"], ["\n  margin-bottom: 24px;\n  @media (max-width: 900px) {\n    padding: 0 18px;\n    margin-bottom: 20px;\n  }\n"])));
@@ -340,7 +311,7 @@ var CircleButtonStyled = styled(Button)(templateObject_3$3 || (templateObject_3$
 var templateObject_1$e, templateObject_2$8, templateObject_3$3;
 
 var InputForDatepicker = forwardRef(function (_a, ref) {
-    var onClick = _a.onClick; _a.onBlur; _a.onFocus; var props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
+    var 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, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick"]);
     var handleIconClick = function () {
         if (handleCLick) {
@@ -350,7 +321,7 @@ var InputForDatepicker = forwardRef(function (_a, ref) {
             onClick();
         }
     };
-    return (jsx(InputMask, __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly }, { children: function () { return (jsx(InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsx(CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
+    return (jsx(InputMask, __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsx(InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsx(CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
 });
 var IconWrapper = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"])));
 var templateObject_1$d;
@@ -359,7 +330,7 @@ var MonthPickerContainer = function (_a) {
     _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
     return jsx(StyledContainer, __assign({}, props));
 };
-var StyledContainer = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !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  }\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  }\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$1.palette.background.light1, theme$1.palette.grey.fifteenB, theme$1.palette.grey.fifteenB, theme$1.palette.brand.main, theme$1.palette.grey.fifteenB);
+var StyledContainer = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n  border-radius: 12px !important;\n  border: 1px solid ", " !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  }\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  }\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$c;
 
 var MonthPickerHeader = function (_a) {
@@ -372,11 +343,10 @@ var templateObject_1$b, templateObject_2$7;
 
 var DesktopInputWithMonthPicker = function (_a) {
     var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
-    var error = getFormError(name, form);
-    var formValue = getFormValue(name, form);
     return (jsx(Wrapper$4, { children: jsx(Controller, { name: name, control: form.control, render: function (_a) {
-                var field = _a.field;
-                return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, error: error, isLabelShrink: Boolean(formValue) }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
+                var _b;
+                var field = _a.field, fieldState = _a.fieldState;
+                return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
             } }) }));
 };
 var Wrapper$4 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
@@ -426,27 +396,33 @@ var DesktopMenuPanel = function (_a) {
 var Wrapper$3 = styled(Grid)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), theme.palette.background.light1);
 var templateObject_1$8;
 
-var InputWithForm = forwardRef(function (_a, ref) {
-    var form = _a.form, name = _a.name, errorProp = _a.error, otherProps = __rest(_a, ["form", "name", "error"]);
-    var error = typeof errorProp !== "undefined" && String(errorProp).length > 0
-        ? errorProp
-        : getFormError(name, form);
-    return (jsx(InputWithAdornments, __assign({ errorMessage: error, inputRef: ref }, form === null || form === void 0 ? void 0 : form.register(name), otherProps)));
-});
-
 var InputWithController = forwardRef(function (_a, ref) {
-    var form = _a.form, name = _a.name, defaultValue = _a.defaultValue, inputProps = __rest(_a, ["form", "name", "defaultValue"]);
+    var 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);
         }
     };
-    return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, defaultValue: defaultValue, render: function (_a) {
-            var field = _a.field;
-            return (jsx(InputWithForm, __assign({ ref: ref, name: name, form: form }, inputProps, { onBlur: field.onBlur, onChange: function (e) {
+    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
+            ? 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({ errorMessage: getError(fieldState) }, field, inputProps, { onChange: function (e) {
                     return handleChange(e, field);
-                }, value: field.value || "" })));
+                }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
         } }));
 });
 
@@ -571,13 +547,18 @@ var generateYearRange = function (offsetFromCurrent, maxYearCount) {
     });
 };
 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, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams"]);
-    var fieldValue = getFormValue(name, form);
-    var error = getFormError(name, form);
-    var control = form.control.register(name);
-    var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
-    var _c = useState(DateTime.fromJSDate(new Date(String(fieldValue))).toFormat("dd.MM.yyyy")), value = _c[0], setValue = _c[1];
-    var _d = useState(DateTime.fromFormat(value, "dd.MM.yyyy").toJSDate()), date = _d[0], setDate = _d[1];
+    var _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("dd.MM.yyyy")
+        : null), value = _e[0], setValue = _e[1];
+    var _f = useState(value ? DateTime.fromFormat(value, "dd.MM.yyyy").toJSDate() : null), date = _f[0], setDate = _f[1];
     var yearList = generateYearRange(yearParams.min, yearParams.max);
     var handleChange = function (e) {
         var targetValue = e.target.value;
@@ -585,21 +566,21 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
         if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
             var jsDate = DateTime.fromFormat(targetValue, "dd.MM.yyyy").toJSDate();
             setDate(jsDate);
-            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: jsDate, name: name }, type: "change" });
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: jsDate, name: name }, type: "change" });
         }
         else {
             setDate(null);
-            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: null, name: name }, type: "change" });
+            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("dd.MM.yyyy"));
-            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: date, name: name }, type: "change" });
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
             handleModalClose();
         }
     };
-    return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, error: error, isLabelShrink: Boolean(fieldValue), ref: ref }, props)), jsxs(Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); } }) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
+    return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, ref: ref }, props)), jsxs(Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); } }) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
 });
 InputWithDatePicker.defaultProps = {
     title: "Дата рождения",
@@ -607,7 +588,7 @@ InputWithDatePicker.defaultProps = {
     yearParams: { min: 18, max: 120 },
 };
 var ContentWrapper$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  padding: 36px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 36px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
-var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"], ["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"])), theme.palette.background.light1, theme.palette.background.light1);
+var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    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 || (templateObject_3 = __makeTemplateObject(["\n  padding-top: 1px;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
 var templateObject_1$3, templateObject_2$2, templateObject_3;
 
@@ -635,24 +616,29 @@ var ruCustom = __assign(__assign({}, ru), { localize: {
         day: function () { return ""; },
     } });
 var MobileInputWithMonthPicker = function (_a) {
+    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 fieldValue = getFormValue(name, form);
-    var error = getFormError(name, form);
-    var control = form.control.register(name);
-    var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
-    var _c = useState(DateTime.fromJSDate(new Date(String(fieldValue))).toFormat("MM.yyyy")), value = _c[0], setValue = _c[1];
-    var _d = useState(DateTime.fromFormat(value, "MM.yyyy").toJSDate()), date = _d[0], setDate = _d[1];
+    var _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);
-            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: jsDate, name: name }, type: "change" });
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: jsDate, name: name }, type: "change" });
         }
         else {
             setDate(null);
-            control === null || control === void 0 ? void 0 : control.onChange({ target: { value: null, name: name }, type: "change" });
+            field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
         }
     };
     var acceptWithDateSelected = function () {
@@ -662,10 +648,10 @@ var MobileInputWithMonthPicker = function (_a) {
         else {
             setValue("");
         }
-        control === null || control === void 0 ? void 0 : control.onChange({ target: { value: date, name: name }, type: "change" });
+        field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
         handleModalClose();
     };
-    return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, error: error, isLabelShrink: Boolean(fieldValue) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return jsx(MonthPickerHeader, __assign({}, headProps)); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
+    return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: 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" })] }))] }));
 };
 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"])));
@@ -747,5 +733,45 @@ var Switch = function (_a) {
         } }));
 };
 
-export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithForm, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, UndefinedAvatar };
+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"),
+    });
+    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 (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);
+    };
+    return (jsx(InputWithCountryDropdown, __assign({ errorMessage: errorMessage, hiddenInputProps: __assign(__assign({}, codeRegister.field), hiddenInputProps), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
+});
+InputPhoneWithForm.defaultProps = {
+    name: "phone",
+};
+
+export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, UndefinedAvatar };
 //# sourceMappingURL=index.es.js.map