kui-complex 0.0.46 → 0.0.48

package/cjs/index.js

@@ -120,16 +120,16 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$t || (templateOb
 var StyledImage = styled__default["default"].img(templateObject_2$f || (templateObject_2$f = __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" && react.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
+    return avatarSize === "lg" && react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n    font-size: 32px;\n  "], ["\n    font-size: 32px;\n  "])));
 };
 var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
     shouldForwardProp: function (prop) { return prop !== "size"; },
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
 var sizeStyles = {
     s: react.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: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 80px;\n    height: 80px;\n  "], ["\n    width: 80px;\n    height: 80px;\n  "]))),
 };
-var templateObject_1$t, templateObject_2$f, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6;
+var templateObject_1$t, templateObject_2$f, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6;
 
 var ButtonTab = React.forwardRef(function (_a, ref) {
     var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
@@ -235,8 +235,8 @@ var InputSelectDropdown = React.forwardRef(function (_a, ref) {
 });
 var OptionWrapper = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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$c || (templateObject_2$c = __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.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
-var templateObject_1$p, templateObject_2$c, templateObject_3$6;
+var selectedStyles = react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
+var templateObject_1$p, templateObject_2$c, templateObject_3$5;
 
 var getFormValue = function (name, form) {
     var names = name === null || name === void 0 ? void 0 : name.split(".");
@@ -302,17 +302,16 @@ var InputSelect = React.forwardRef(function (props, ref) {
         inputRef.current = e;
         register === null || register === void 0 ? void 0 : register.ref(e);
     };
-    return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error }, other, { endIcon: !props.disabled && (jsxRuntime$1.jsx(StyledIconWrapper, { children: jsxRuntime$1.jsx(kuiIcon.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 && (jsxRuntime$1.jsx(InputSelectDropdown, { options: options, inputRef: {
+    return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error }, other, { endIcon: !props.disabled && (jsxRuntime$1.jsx(kuiIcon.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 && (jsxRuntime$1.jsx(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: value }))] }));
 });
 var Wrapper$6 = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: relative;\n  text-align: left;\n  width: fit-content;\n"], ["\n  position: relative;\n  text-align: left;\n  width: fit-content;\n"])));
 var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$b || (templateObject_2$b = __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 StyledIconWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  padding-right: 8px;\n  padding-bottom: 4px;\n"], ["\n  padding-right: 8px;\n  padding-bottom: 4px;\n"])));
-var templateObject_1$o, templateObject_2$b, templateObject_3$5;
+var templateObject_1$o, templateObject_2$b;
 
 var checkDisabled$1 = function (year, min, max) {
     return (min && year <= min) || (max && year >= max);
@@ -375,7 +374,7 @@ var templateObject_1$l, templateObject_2$a, templateObject_3$4;
 
 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, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick"]);
+    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 handleIconClick = function () {
         if (handleCLick) {
             handleCLick();
@@ -384,7 +383,8 @@ var InputForDatepicker = React.forwardRef(function (_a, ref) {
             onClick();
         }
     };
-    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: jsxRuntime.jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
+    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 }))); } })));
 });
 var IconWrapper = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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$k;
@@ -550,12 +550,12 @@ var PassportStrengthBar = React.forwardRef(function (_a, ref) {
 var Wrapper$2 = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
 var ReliabilityLevel = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
-var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
+var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
     var color = _a.color;
     return color;
 });
 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$e, templateObject_2$7, templateObject_3$3, templateObject_4$1, templateObject_5;
+var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5;
 
 var isValidWithMaskExp = /^[^_]+$/;
 var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
@@ -642,7 +642,7 @@ var generateYearRange = function (offsetFromCurrent, maxYearCount) {
 };
 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, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams", "onChange", "max", "min", "footerLabel", "datePickerProps"]);
+    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({
         name: name,
         control: form.control,
@@ -703,18 +703,23 @@ var InputWithDatePicker = React.forwardRef(function (_a, ref) {
         }
         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(kuiBasic.Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { 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 })] }))] }));
+    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 })] }))] }));
 });
 InputWithDatePicker.defaultProps = {
     title: "Дата рождения",
     description: "Выберите год, месяц и число вашего рождения",
     yearParams: { min: 18, max: 120 },
     footerLabel: "Подтвердить",
+    alignTitle: "center",
 };
-var ContentWrapper$1 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __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 ContentWrapper$1 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
 var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$4 || (templateObject_2$4 = __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"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.background.light1);
-var DayContent = styled__default["default"].span(templateObject_3$1 || (templateObject_3$1 = __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$a, templateObject_2$4, templateObject_3$1;
+var DayContent = styled__default["default"].span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
+var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"])), function (_a) {
+    var alignTitle = _a.alignTitle;
+    return alignTitle || "center";
+});
+var templateObject_1$a, templateObject_2$4, templateObject_3$1, templateObject_4$1;
 
 var shortMonths = [
     "ЯНВ",