kui-complex 0.0.28 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -1
- package/dist/index.es.js +47 -42
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +47 -42
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -289,7 +289,8 @@ declare const Tooltip: React.ForwardRefExoticComponent<{
|
|
|
289
289
|
open?: boolean | undefined;
|
|
290
290
|
placement?: PopperPlacements | undefined;
|
|
291
291
|
withArrow?: boolean | undefined;
|
|
292
|
-
|
|
292
|
+
cursor?: "auto" | "pointer" | undefined;
|
|
293
|
+
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
293
294
|
|
|
294
295
|
type ButtonSelectProps = InputSelectProps
|
|
295
296
|
|
package/dist/index.es.js
CHANGED
|
@@ -82,10 +82,10 @@ var Avatar = function (_a) {
|
|
|
82
82
|
return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
83
83
|
};
|
|
84
84
|
var Wrapper$7 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
85
|
-
var StyledImage = styled.img(templateObject_2$
|
|
85
|
+
var StyledImage = styled.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"])));
|
|
86
86
|
var largeAvatarCSS = function (_a) {
|
|
87
87
|
var avatarSize = _a.avatarSize;
|
|
88
|
-
return avatarSize === "lg" && css(templateObject_3$
|
|
88
|
+
return avatarSize === "lg" && css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
89
89
|
};
|
|
90
90
|
var StyledUndefinedAvatar = styled(UndefinedAvatar, {
|
|
91
91
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
@@ -94,7 +94,7 @@ var sizeStyles = {
|
|
|
94
94
|
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 "]))),
|
|
95
95
|
lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
96
96
|
};
|
|
97
|
-
var templateObject_1$s, templateObject_2$
|
|
97
|
+
var templateObject_1$s, templateObject_2$f, templateObject_3$8, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
98
98
|
|
|
99
99
|
var ButtonTab = function (_a) {
|
|
100
100
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -104,8 +104,8 @@ var ButtonTab = function (_a) {
|
|
|
104
104
|
return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
105
105
|
};
|
|
106
106
|
var StyledButton = styled(Button)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
107
|
-
var inactiveStyles = css(templateObject_2$
|
|
108
|
-
var templateObject_1$r, templateObject_2$
|
|
107
|
+
var inactiveStyles = css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
|
|
108
|
+
var templateObject_1$r, templateObject_2$e;
|
|
109
109
|
|
|
110
110
|
var ButtonsPanel = function (_a) {
|
|
111
111
|
var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange"]);
|
|
@@ -129,8 +129,8 @@ ButtonsPanel.defaultProps = {
|
|
|
129
129
|
isSticky: false,
|
|
130
130
|
};
|
|
131
131
|
var Content = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
132
|
-
var StyledContainer$1 = styled.div(templateObject_2$
|
|
133
|
-
var templateObject_1$q, templateObject_2$
|
|
132
|
+
var StyledContainer$1 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"], ["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"])), theme.palette.grey.zero);
|
|
133
|
+
var templateObject_1$q, templateObject_2$d;
|
|
134
134
|
|
|
135
135
|
var dropdownStyles = function (_a) {
|
|
136
136
|
var isOpen = _a.isOpen;
|
|
@@ -190,9 +190,9 @@ var InputSelectDropdown = function (_a) {
|
|
|
190
190
|
} }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
|
|
191
191
|
};
|
|
192
192
|
var OptionWrapper = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
193
|
-
var StyledOption = styled.div(templateObject_2$
|
|
194
|
-
var selectedStyles = css(templateObject_3$
|
|
195
|
-
var templateObject_1$o, templateObject_2$
|
|
193
|
+
var StyledOption = styled.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"])), theme.palette.background.light1);
|
|
194
|
+
var selectedStyles = css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), theme.palette.background.light1);
|
|
195
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$7;
|
|
196
196
|
|
|
197
197
|
var getFormValue = function (name, form) {
|
|
198
198
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -266,9 +266,9 @@ var InputSelect = forwardRef(function (props, ref) {
|
|
|
266
266
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: value }))] }));
|
|
267
267
|
});
|
|
268
268
|
var Wrapper$6 = styled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
269
|
-
var StyledInput = styled(InputWithAdornments)(templateObject_2$
|
|
270
|
-
var StyledIconWrapper = styled.div(templateObject_3$
|
|
271
|
-
var templateObject_1$n, templateObject_2$
|
|
269
|
+
var StyledInput = styled(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"])));
|
|
270
|
+
var StyledIconWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n padding-right: 8px;\n padding-bottom: 4px;\n"], ["\n padding-right: 8px;\n padding-bottom: 4px;\n"])));
|
|
271
|
+
var templateObject_1$n, templateObject_2$b, templateObject_3$6;
|
|
272
272
|
|
|
273
273
|
var SelectYear = function (_a) {
|
|
274
274
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -320,9 +320,9 @@ var CalendarStandardHeader = function (_a) {
|
|
|
320
320
|
return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
321
321
|
};
|
|
322
322
|
var HeaderWrapper = styled(Grid)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"], ["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"])));
|
|
323
|
-
var StyledHeading = styled(Heading)(templateObject_2$
|
|
324
|
-
var CircleButtonStyled = styled(Button)(templateObject_3$
|
|
325
|
-
var templateObject_1$k, templateObject_2$
|
|
323
|
+
var StyledHeading = styled(Heading)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
324
|
+
var CircleButtonStyled = styled(Button)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"], ["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"])));
|
|
325
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$5;
|
|
326
326
|
|
|
327
327
|
var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
328
328
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -352,8 +352,8 @@ var MonthPickerHeader = function (_a) {
|
|
|
352
352
|
return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
353
353
|
};
|
|
354
354
|
var StyledIconButton = styled(IconButton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
355
|
-
var StyledHeader = styled(Grid)(templateObject_2$
|
|
356
|
-
var templateObject_1$h, templateObject_2$
|
|
355
|
+
var StyledHeader = styled(Grid)(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
356
|
+
var templateObject_1$h, templateObject_2$9;
|
|
357
357
|
|
|
358
358
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
359
359
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -400,8 +400,8 @@ var MenuItem = function (_a) {
|
|
|
400
400
|
return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
|
|
401
401
|
};
|
|
402
402
|
var ButtonWrapper$1 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"], ["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"])));
|
|
403
|
-
var disabledStyles = css(templateObject_2$
|
|
404
|
-
var templateObject_1$f, templateObject_2$
|
|
403
|
+
var disabledStyles = css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), theme.palette.grey.seventy);
|
|
404
|
+
var templateObject_1$f, templateObject_2$8;
|
|
405
405
|
|
|
406
406
|
var DesktopMenuPanel = function (_a) {
|
|
407
407
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
@@ -499,14 +499,14 @@ var PassportStrengthBar = function (_a) {
|
|
|
499
499
|
return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
|
|
500
500
|
};
|
|
501
501
|
var Wrapper$2 = styled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
502
|
-
var ReliabilityLevelWrapper = styled.div(templateObject_2$
|
|
503
|
-
var ReliabilityLevel = styled.div(templateObject_3$
|
|
502
|
+
var ReliabilityLevelWrapper = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
503
|
+
var ReliabilityLevel = styled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
504
504
|
var StyledLinearProgress = styled(LinearProgress)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"], ["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"])), theme.palette.grey.fifteenB, function (_a) {
|
|
505
505
|
var color = _a.color;
|
|
506
506
|
return color;
|
|
507
507
|
});
|
|
508
508
|
var Description = styled(Caption)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"], ["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"])));
|
|
509
|
-
var templateObject_1$d, templateObject_2$
|
|
509
|
+
var templateObject_1$d, templateObject_2$7, templateObject_3$4, templateObject_4, templateObject_5;
|
|
510
510
|
|
|
511
511
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
512
512
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -555,8 +555,8 @@ var templateObject_1$c;
|
|
|
555
555
|
|
|
556
556
|
var InputTextAreaMobile = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
|
|
557
557
|
var InputWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
558
|
-
var TextAreaWrapper = styled.div(templateObject_2$
|
|
559
|
-
var templateObject_1$b, templateObject_2$
|
|
558
|
+
var TextAreaWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
559
|
+
var templateObject_1$b, templateObject_2$6;
|
|
560
560
|
|
|
561
561
|
var useToggle = function (isModalOpen) {
|
|
562
562
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -575,9 +575,9 @@ var ModalFooter = function (_a) {
|
|
|
575
575
|
return (jsxs$1(StyledFooter, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
576
576
|
};
|
|
577
577
|
var StyledFooter = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"], ["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])), theme.palette.grey.zero);
|
|
578
|
-
var ButtonWrapper = styled.div(templateObject_2$
|
|
579
|
-
var ButtonStyled = styled(Button)(templateObject_3$
|
|
580
|
-
var templateObject_1$a, templateObject_2$
|
|
578
|
+
var ButtonWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"])));
|
|
579
|
+
var ButtonStyled = styled(Button)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
580
|
+
var templateObject_1$a, templateObject_2$5, templateObject_3$3;
|
|
581
581
|
|
|
582
582
|
registerLocale("ru", ru);
|
|
583
583
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -632,9 +632,9 @@ InputWithDatePicker.defaultProps = {
|
|
|
632
632
|
yearParams: { min: 18, max: 120 },
|
|
633
633
|
};
|
|
634
634
|
var ContentWrapper$1 = styled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
635
|
-
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$
|
|
636
|
-
var DayContent = styled.span(templateObject_3$
|
|
637
|
-
var templateObject_1$9, templateObject_2$
|
|
635
|
+
var StyledCalendarStandardContainer = styled(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"])), theme.palette.background.light1, theme.palette.background.light1);
|
|
636
|
+
var DayContent = styled.span(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
637
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$2;
|
|
638
638
|
|
|
639
639
|
var shortMonths = [
|
|
640
640
|
"ЯНВ",
|
|
@@ -698,8 +698,8 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
698
698
|
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" })] }))] }));
|
|
699
699
|
};
|
|
700
700
|
var Wrapper$1 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
701
|
-
var ContentWrapper = styled.div(templateObject_2$
|
|
702
|
-
var templateObject_1$8, templateObject_2$
|
|
701
|
+
var ContentWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
702
|
+
var templateObject_1$8, templateObject_2$3;
|
|
703
703
|
|
|
704
704
|
var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
705
705
|
|
|
@@ -716,8 +716,8 @@ var MobileMenuPanel = function (_a) {
|
|
|
716
716
|
return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
717
717
|
};
|
|
718
718
|
var Wrapper = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
719
|
-
var SlideWrapper = styled.div(templateObject_2$
|
|
720
|
-
var templateObject_1$7, templateObject_2$
|
|
719
|
+
var SlideWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"], ["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"])));
|
|
720
|
+
var templateObject_1$7, templateObject_2$2;
|
|
721
721
|
|
|
722
722
|
var useWindowWidth = function (time) {
|
|
723
723
|
if (time === void 0) { time = 10; }
|
|
@@ -908,15 +908,15 @@ var Popper = forwardRef(function (props, ref) {
|
|
|
908
908
|
// Распожить стрелочку к контенту посередине контента
|
|
909
909
|
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(StyledPopperWrapper, __assign({ ref: forwardedRef, style: position, className: "KUI-Popper" }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) }))] }), document.body);
|
|
910
910
|
});
|
|
911
|
-
var StyledPopperWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"], ["\n position: absolute;\n max-width: 215px;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"])), theme.breakpoints.xxs);
|
|
912
|
-
var StyledPopper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"], ["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"])), function (_a) {
|
|
911
|
+
var StyledPopperWrapper = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"], ["\n position: absolute;\n max-width: 215px;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"])), theme.breakpoints.xxs);
|
|
912
|
+
var StyledPopper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"], ["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"])), function (_a) {
|
|
913
913
|
var open = _a.open;
|
|
914
914
|
return (open ? 1 : 0);
|
|
915
915
|
});
|
|
916
|
-
var templateObject_1$2, templateObject_2, templateObject_3;
|
|
916
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1;
|
|
917
917
|
|
|
918
918
|
var Tooltip = forwardRef(function (props, ref) {
|
|
919
|
-
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children"]);
|
|
919
|
+
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, cursor = props.cursor, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children", "cursor"]);
|
|
920
920
|
var _a = useState(open), isOpen = _a[0], setOpen = _a[1];
|
|
921
921
|
var elemRef = useRef(null);
|
|
922
922
|
var handleOpen = function () {
|
|
@@ -934,10 +934,15 @@ var Tooltip = forwardRef(function (props, ref) {
|
|
|
934
934
|
useEffect(function () {
|
|
935
935
|
setOpen(open);
|
|
936
936
|
}, [open]);
|
|
937
|
-
return (jsxs$1(
|
|
937
|
+
return (jsxs$1(StyledWrapper, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsx(StyledContent, { children: children }) })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
938
938
|
});
|
|
939
|
-
var
|
|
940
|
-
var
|
|
939
|
+
var StyledWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n"])));
|
|
940
|
+
var StyledContentWrapper = styled(StyledWrapper)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: ", ";\n"], ["\n cursor: ", ";\n"])), function (_a) {
|
|
941
|
+
var cursor = _a.cursor;
|
|
942
|
+
return cursor;
|
|
943
|
+
});
|
|
944
|
+
var StyledContent = styled(StyledWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: -1;\n"], ["\n z-index: -1;\n"])));
|
|
945
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
941
946
|
|
|
942
947
|
var ButtonSelect = forwardRef(function (props, ref) {
|
|
943
948
|
var _a;
|