kui-complex 0.0.30 → 0.0.32
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.es.js +147 -78
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +148 -78
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21,6 +21,7 @@ var ru = require('date-fns/locale/ru');
|
|
|
21
21
|
var luxon = require('luxon');
|
|
22
22
|
var Swiper = require('react-id-swiper');
|
|
23
23
|
var ReactDOM = require('react-dom');
|
|
24
|
+
var classNames = require('classnames');
|
|
24
25
|
|
|
25
26
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
27
|
|
|
@@ -50,6 +51,7 @@ var InputMask__default = /*#__PURE__*/_interopDefaultLegacy(InputMask);
|
|
|
50
51
|
var ru__default = /*#__PURE__*/_interopDefaultLegacy(ru);
|
|
51
52
|
var Swiper__default = /*#__PURE__*/_interopDefaultLegacy(Swiper);
|
|
52
53
|
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
|
|
54
|
+
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
53
55
|
|
|
54
56
|
/******************************************************************************
|
|
55
57
|
Copyright (c) Microsoft Corporation.
|
|
@@ -106,27 +108,27 @@ var UndefinedAvatar = function (_a) {
|
|
|
106
108
|
.join("");
|
|
107
109
|
return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar" }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
108
110
|
};
|
|
109
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
110
|
-
var templateObject_1$
|
|
111
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"])), kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main);
|
|
112
|
+
var templateObject_1$u;
|
|
111
113
|
|
|
112
114
|
var Avatar = function (_a) {
|
|
113
115
|
var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
|
|
114
116
|
return (jsxRuntime$1.jsx(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsxRuntime$1.jsx(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsxRuntime$1.jsx(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
115
117
|
};
|
|
116
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
118
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
117
119
|
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"])));
|
|
118
120
|
var largeAvatarCSS = function (_a) {
|
|
119
121
|
var avatarSize = _a.avatarSize;
|
|
120
|
-
return avatarSize === "lg" && react.css(templateObject_3$
|
|
122
|
+
return avatarSize === "lg" && react.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
121
123
|
};
|
|
122
124
|
var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
|
|
123
125
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
124
|
-
})(templateObject_4$
|
|
126
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), largeAvatarCSS);
|
|
125
127
|
var sizeStyles = {
|
|
126
128
|
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 "]))),
|
|
127
129
|
lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
128
130
|
};
|
|
129
|
-
var templateObject_1$
|
|
131
|
+
var templateObject_1$t, templateObject_2$f, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6;
|
|
130
132
|
|
|
131
133
|
var ButtonTab = function (_a) {
|
|
132
134
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -135,9 +137,9 @@ var ButtonTab = function (_a) {
|
|
|
135
137
|
};
|
|
136
138
|
return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
137
139
|
};
|
|
138
|
-
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$
|
|
140
|
+
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
139
141
|
var inactiveStyles = react.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
140
|
-
var templateObject_1$
|
|
142
|
+
var templateObject_1$s, templateObject_2$e;
|
|
141
143
|
|
|
142
144
|
var ButtonsPanel = function (_a) {
|
|
143
145
|
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"]);
|
|
@@ -160,13 +162,13 @@ var ButtonsPanel = function (_a) {
|
|
|
160
162
|
ButtonsPanel.defaultProps = {
|
|
161
163
|
isSticky: false,
|
|
162
164
|
};
|
|
163
|
-
var Content = styled__default["default"].div(templateObject_1$
|
|
165
|
+
var Content = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
164
166
|
var StyledContainer$1 = styled__default["default"].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"])), kuiBasic.theme.palette.grey.zero);
|
|
165
|
-
var templateObject_1$
|
|
167
|
+
var templateObject_1$r, templateObject_2$d;
|
|
166
168
|
|
|
167
169
|
var dropdownStyles = function (_a) {
|
|
168
170
|
var isOpen = _a.isOpen;
|
|
169
|
-
return react.css(templateObject_1$
|
|
171
|
+
return react.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n border: 1px solid ", ";\n top: 64px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n overflow-y: scroll;\n user-select: none;\n &::-webkit-scrollbar {\n width: 0px;\n },\n"], ["\n width: 100%;\n max-height: 389px;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n border: 1px solid ", ";\n top: 64px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n overflow-y: scroll;\n user-select: none;\n &::-webkit-scrollbar {\n width: 0px;\n },\n"])), isOpen ? "flex" : "none", kuiBasic.theme.palette.grey.zero, kuiBasic.theme.palette.grey.fifteenB);
|
|
170
172
|
};
|
|
171
173
|
var InputDropdown = React.forwardRef(function (_a, ref) {
|
|
172
174
|
var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
|
|
@@ -197,7 +199,7 @@ var InputDropdown = React.forwardRef(function (_a, ref) {
|
|
|
197
199
|
};
|
|
198
200
|
return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
|
|
199
201
|
});
|
|
200
|
-
var templateObject_1$
|
|
202
|
+
var templateObject_1$q;
|
|
201
203
|
|
|
202
204
|
var InputSelectDropdown = function (_a) {
|
|
203
205
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
|
|
@@ -221,10 +223,10 @@ var InputSelectDropdown = function (_a) {
|
|
|
221
223
|
padding: "4px",
|
|
222
224
|
} }, { children: options.map(function (option, key) { return (jsxRuntime$1.jsx(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsxRuntime$1.jsx(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
|
|
223
225
|
};
|
|
224
|
-
var OptionWrapper = styled__default["default"].div(templateObject_1$
|
|
226
|
+
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"])));
|
|
225
227
|
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);
|
|
226
|
-
var selectedStyles = react.css(templateObject_3$
|
|
227
|
-
var templateObject_1$
|
|
228
|
+
var selectedStyles = react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
|
|
229
|
+
var templateObject_1$p, templateObject_2$c, templateObject_3$6;
|
|
228
230
|
|
|
229
231
|
var getFormValue = function (name, form) {
|
|
230
232
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -297,10 +299,10 @@ var InputSelect = React.forwardRef(function (props, ref) {
|
|
|
297
299
|
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,
|
|
298
300
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: value }))] }));
|
|
299
301
|
});
|
|
300
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
302
|
+
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"])));
|
|
301
303
|
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"])));
|
|
302
|
-
var StyledIconWrapper = styled__default["default"].div(templateObject_3$
|
|
303
|
-
var templateObject_1$
|
|
304
|
+
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"])));
|
|
305
|
+
var templateObject_1$o, templateObject_2$b, templateObject_3$5;
|
|
304
306
|
|
|
305
307
|
var SelectYear = function (_a) {
|
|
306
308
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -336,25 +338,25 @@ var CalendarHeaderWithSelect = function (_a) {
|
|
|
336
338
|
var month = date.getMonth() + 1;
|
|
337
339
|
return (jsxRuntime.jsx(Wrapper$5, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
|
|
338
340
|
};
|
|
339
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
340
|
-
var templateObject_1$
|
|
341
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
342
|
+
var templateObject_1$n;
|
|
341
343
|
|
|
342
344
|
var CalendarStandardContainer = function (_a) {
|
|
343
345
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
344
346
|
return jsxRuntime.jsx(DatePickerContainer, __assign({}, props));
|
|
345
347
|
};
|
|
346
|
-
var DatePickerContainer = styled__default["default"].div(templateObject_1$
|
|
347
|
-
var templateObject_1$
|
|
348
|
+
var DatePickerContainer = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"], ["\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.fiftyP, kuiBasic.theme.palette.grey.zero);
|
|
349
|
+
var templateObject_1$m;
|
|
348
350
|
|
|
349
351
|
var CalendarStandardHeader = function (_a) {
|
|
350
352
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
351
353
|
var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
352
354
|
return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsxRuntime.jsx(kuiIcon.PrevArrowIcon, { width: 10, height: 10 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsxRuntime.jsx(kuiIcon.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
353
355
|
};
|
|
354
|
-
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
356
|
+
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
355
357
|
var StyledHeading = styled__default["default"](kuiBasic.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"])));
|
|
356
|
-
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
357
|
-
var templateObject_1$
|
|
358
|
+
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
359
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$4;
|
|
358
360
|
|
|
359
361
|
var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
360
362
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -369,23 +371,23 @@ var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
|
369
371
|
};
|
|
370
372
|
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 }))); } })));
|
|
371
373
|
});
|
|
372
|
-
var IconWrapper = styled__default["default"].div(templateObject_1$
|
|
373
|
-
var templateObject_1$
|
|
374
|
+
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"])));
|
|
375
|
+
var templateObject_1$k;
|
|
374
376
|
|
|
375
377
|
var MonthPickerContainer = function (_a) {
|
|
376
378
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
377
379
|
return jsxRuntime.jsx(StyledContainer, __assign({}, props));
|
|
378
380
|
};
|
|
379
|
-
var StyledContainer = styled__default["default"].div(templateObject_1$
|
|
380
|
-
var templateObject_1$
|
|
381
|
+
var StyledContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __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"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
|
|
382
|
+
var templateObject_1$j;
|
|
381
383
|
|
|
382
384
|
var MonthPickerHeader = function (_a) {
|
|
383
385
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
384
386
|
return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
385
387
|
};
|
|
386
|
-
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$
|
|
388
|
+
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
387
389
|
var StyledHeader = styled__default["default"](kuiBasic.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"])));
|
|
388
|
-
var templateObject_1$
|
|
390
|
+
var templateObject_1$i, templateObject_2$9;
|
|
389
391
|
|
|
390
392
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
391
393
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -395,8 +397,8 @@ var DesktopInputWithMonthPicker = function (_a) {
|
|
|
395
397
|
return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.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 (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
396
398
|
} }) }));
|
|
397
399
|
};
|
|
398
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
399
|
-
var templateObject_1$
|
|
400
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
401
|
+
var templateObject_1$h;
|
|
400
402
|
|
|
401
403
|
var MenuItem = function (_a) {
|
|
402
404
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -431,16 +433,16 @@ var MenuItem = function (_a) {
|
|
|
431
433
|
}, []);
|
|
432
434
|
return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$1, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
|
|
433
435
|
};
|
|
434
|
-
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
436
|
+
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
435
437
|
var disabledStyles = react.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"])), kuiBasic.theme.palette.grey.seventy);
|
|
436
|
-
var templateObject_1$
|
|
438
|
+
var templateObject_1$g, templateObject_2$8;
|
|
437
439
|
|
|
438
440
|
var DesktopMenuPanel = function (_a) {
|
|
439
441
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
440
442
|
return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" } }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
441
443
|
};
|
|
442
|
-
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
443
|
-
var templateObject_1$
|
|
444
|
+
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$f || (templateObject_1$f = __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"])), kuiBasic.theme.palette.background.light1);
|
|
445
|
+
var templateObject_1$f;
|
|
444
446
|
|
|
445
447
|
var InputWithMask = React.forwardRef(function (_a, ref) {
|
|
446
448
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -530,15 +532,15 @@ var PassportStrengthBar = function (_a) {
|
|
|
530
532
|
: -1;
|
|
531
533
|
return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsxRuntime$1.jsx(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsxRuntime$1.jsx(ReliabilityLevel, { children: jsxRuntime$1.jsx(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsxRuntime$1.jsx(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" }))] })));
|
|
532
534
|
};
|
|
533
|
-
var Wrapper$2 = styled__default["default"].div(templateObject_1$
|
|
535
|
+
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"])));
|
|
534
536
|
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"])));
|
|
535
|
-
var ReliabilityLevel = styled__default["default"].div(templateObject_3$
|
|
536
|
-
var StyledLinearProgress = styled__default["default"](kuiBasic.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"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
|
|
537
|
+
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"])));
|
|
538
|
+
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) {
|
|
537
539
|
var color = _a.color;
|
|
538
540
|
return color;
|
|
539
541
|
});
|
|
540
542
|
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"])));
|
|
541
|
-
var templateObject_1$
|
|
543
|
+
var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$1, templateObject_5;
|
|
542
544
|
|
|
543
545
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
544
546
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -582,13 +584,13 @@ var InputPassword = function (props) {
|
|
|
582
584
|
}, []);
|
|
583
585
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", endIcon: jsxRuntime.jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsxRuntime.jsx(kuiIcon.ClosedEyeIcon, {}) : jsxRuntime.jsx(kuiIcon.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
|
|
584
586
|
};
|
|
585
|
-
var EyeIconWrapper = styled__default["default"].div(templateObject_1$
|
|
586
|
-
var templateObject_1$
|
|
587
|
+
var EyeIconWrapper = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
588
|
+
var templateObject_1$d;
|
|
587
589
|
|
|
588
590
|
var InputTextAreaMobile = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
|
|
589
|
-
var InputWrapper = styled__default["default"].div(templateObject_1$
|
|
591
|
+
var InputWrapper = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
590
592
|
var TextAreaWrapper = styled__default["default"].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"])));
|
|
591
|
-
var templateObject_1$
|
|
593
|
+
var templateObject_1$c, templateObject_2$6;
|
|
592
594
|
|
|
593
595
|
var useToggle = function (isModalOpen) {
|
|
594
596
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -606,10 +608,10 @@ var ModalFooter = function (_a) {
|
|
|
606
608
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
607
609
|
return (jsxRuntime.jsxs(StyledFooter, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
608
610
|
};
|
|
609
|
-
var StyledFooter = styled__default["default"].div(templateObject_1$
|
|
611
|
+
var StyledFooter = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __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"])), kuiBasic.theme.palette.grey.zero);
|
|
610
612
|
var ButtonWrapper = styled__default["default"].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"])));
|
|
611
|
-
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
612
|
-
var templateObject_1$
|
|
613
|
+
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
614
|
+
var templateObject_1$b, templateObject_2$5, templateObject_3$2;
|
|
613
615
|
|
|
614
616
|
DatePicker.registerLocale("ru", ru__default["default"]);
|
|
615
617
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -663,10 +665,10 @@ InputWithDatePicker.defaultProps = {
|
|
|
663
665
|
description: "Выберите год, месяц и число вашего рождения",
|
|
664
666
|
yearParams: { min: 18, max: 120 },
|
|
665
667
|
};
|
|
666
|
-
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
668
|
+
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"])));
|
|
667
669
|
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);
|
|
668
|
-
var DayContent = styled__default["default"].span(templateObject_3$
|
|
669
|
-
var templateObject_1$
|
|
670
|
+
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"])));
|
|
671
|
+
var templateObject_1$a, templateObject_2$4, templateObject_3$1;
|
|
670
672
|
|
|
671
673
|
var shortMonths = [
|
|
672
674
|
"ЯНВ",
|
|
@@ -729,9 +731,9 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
729
731
|
};
|
|
730
732
|
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper, { children: jsxRuntime.jsx(DatePicker__default["default"], __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsxRuntime.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
|
|
731
733
|
};
|
|
732
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
734
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
733
735
|
var ContentWrapper = styled__default["default"].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"])));
|
|
734
|
-
var templateObject_1$
|
|
736
|
+
var templateObject_1$9, templateObject_2$3;
|
|
735
737
|
|
|
736
738
|
var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
737
739
|
|
|
@@ -747,9 +749,9 @@ var MobileMenuPanel = function (_a) {
|
|
|
747
749
|
};
|
|
748
750
|
return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
749
751
|
};
|
|
750
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
752
|
+
var Wrapper = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __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"])), kuiBasic.theme.palette.background.light1);
|
|
751
753
|
var SlideWrapper = styled__default["default"].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"])));
|
|
752
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$8, templateObject_2$2;
|
|
753
755
|
|
|
754
756
|
var useWindowWidth = function (time) {
|
|
755
757
|
if (time === void 0) { time = 10; }
|
|
@@ -798,8 +800,8 @@ var MenuPanel = function (_a) {
|
|
|
798
800
|
MenuPanel.defaultProps = {
|
|
799
801
|
variant: "grey",
|
|
800
802
|
};
|
|
801
|
-
var fullHeightStyles = react.css(templateObject_1$
|
|
802
|
-
var templateObject_1$
|
|
803
|
+
var fullHeightStyles = react.css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
804
|
+
var templateObject_1$7;
|
|
803
805
|
|
|
804
806
|
var Switch = function (_a) {
|
|
805
807
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -853,15 +855,15 @@ InputPhoneWithForm.defaultProps = {
|
|
|
853
855
|
};
|
|
854
856
|
|
|
855
857
|
var Table = function (props) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
|
|
856
|
-
var StyledTable = styled__default["default"].table(templateObject_1$
|
|
858
|
+
var StyledTable = styled__default["default"].table(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
859
|
+
var templateObject_1$6;
|
|
860
|
+
|
|
861
|
+
var TableHeadCell = styled__default["default"].th(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
857
862
|
var templateObject_1$5;
|
|
858
863
|
|
|
859
|
-
var
|
|
864
|
+
var TableCell = styled__default["default"].td(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
860
865
|
var templateObject_1$4;
|
|
861
866
|
|
|
862
|
-
var TableCell = styled__default["default"].td(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
863
|
-
var templateObject_1$3;
|
|
864
|
-
|
|
865
867
|
var TableRow = function (_a) {
|
|
866
868
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
867
869
|
var childrenArr = React__namespace.Children.toArray(children);
|
|
@@ -896,8 +898,22 @@ var placementsPositions = {
|
|
|
896
898
|
},
|
|
897
899
|
};
|
|
898
900
|
|
|
899
|
-
var
|
|
900
|
-
|
|
901
|
+
var PopperBase = React.forwardRef(function (props, ref) {
|
|
902
|
+
props.placement; var open = props.open, children = props.children, spacing = props.spacing, className = props.className, style = props.style, other = __rest(props, ["placement", "open", "children", "spacing", "className", "style"]);
|
|
903
|
+
return (jsxRuntime.jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames__default["default"]("KUI-Popper", className), spacing: spacing, style: style }, { children: jsxRuntime.jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
904
|
+
});
|
|
905
|
+
var StyledPopperWrapper = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n padding: ", ";\n z-index: 10;\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 padding: ", ";\n z-index: 10;\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"])), function (_a) {
|
|
906
|
+
var spacing = _a.spacing;
|
|
907
|
+
return spacing || 0;
|
|
908
|
+
}, kuiBasic.theme.breakpoints.xxs);
|
|
909
|
+
var StyledPopper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$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) {
|
|
910
|
+
var open = _a.open;
|
|
911
|
+
return (open ? 1 : 0);
|
|
912
|
+
});
|
|
913
|
+
var templateObject_1$3, templateObject_2$1;
|
|
914
|
+
|
|
915
|
+
var PopperWithPortal = React.forwardRef(function (props, ref) {
|
|
916
|
+
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
901
917
|
var popperRef = React.useRef(null);
|
|
902
918
|
var _a = React.useState(null), coords = _a[0], setCoords = _a[1];
|
|
903
919
|
var _b = React.useState(null), size = _b[0], setSize = _b[1];
|
|
@@ -938,17 +954,70 @@ var Popper = React.forwardRef(function (props, ref) {
|
|
|
938
954
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
939
955
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
940
956
|
// Распожить стрелочку к контенту посередине контента
|
|
941
|
-
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(
|
|
957
|
+
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
942
958
|
});
|
|
943
|
-
var
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
var
|
|
948
|
-
var
|
|
949
|
-
|
|
950
|
-
}
|
|
951
|
-
|
|
959
|
+
var templateObject_1$2;
|
|
960
|
+
|
|
961
|
+
var StaticPopper = React.forwardRef(function (props, ref) {
|
|
962
|
+
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
963
|
+
var popperRef = React.useRef(null);
|
|
964
|
+
var _a = React.useState(null), contentSize = _a[0], setContentSize = _a[1];
|
|
965
|
+
var _b = React.useState(null), popperSize = _b[0], setPopperSize = _b[1];
|
|
966
|
+
var position = {};
|
|
967
|
+
React.useEffect(function () {
|
|
968
|
+
if (contentRef.current && popperRef.current) {
|
|
969
|
+
setContentSize({
|
|
970
|
+
width: contentRef.current.clientWidth,
|
|
971
|
+
height: contentRef.current.clientHeight,
|
|
972
|
+
});
|
|
973
|
+
setPopperSize({
|
|
974
|
+
width: popperRef.current.clientWidth,
|
|
975
|
+
height: popperRef.current.clientHeight,
|
|
976
|
+
});
|
|
977
|
+
}
|
|
978
|
+
}, []);
|
|
979
|
+
if (contentSize && popperSize) {
|
|
980
|
+
var placementPositions =
|
|
981
|
+
// @ts-ignore
|
|
982
|
+
placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
|
|
983
|
+
position = {
|
|
984
|
+
top: placementPositions.top
|
|
985
|
+
? 0 - popperSize.height
|
|
986
|
+
: 0 + contentSize.height,
|
|
987
|
+
left: Math.max(contentSize.width * placementPositions.offset -
|
|
988
|
+
popperSize.width * placementPositions.offset, 0),
|
|
989
|
+
};
|
|
990
|
+
}
|
|
991
|
+
var forwardedRef = function (elem) {
|
|
992
|
+
if (ref) {
|
|
993
|
+
// @ts-ignore
|
|
994
|
+
ref.current = elem;
|
|
995
|
+
}
|
|
996
|
+
// @ts-ignore
|
|
997
|
+
popperRef.current = elem;
|
|
998
|
+
};
|
|
999
|
+
return jsxRuntime.jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other));
|
|
1000
|
+
});
|
|
1001
|
+
|
|
1002
|
+
var Popper = React.forwardRef(function (props, ref) {
|
|
1003
|
+
var contentRef = props.contentRef, other = __rest(props, ["contentRef"]);
|
|
1004
|
+
var _a = React.useState(true), isParentSticky = _a[0], setIsParentSticky = _a[1];
|
|
1005
|
+
React.useEffect(function () {
|
|
1006
|
+
function checkParentIsSticky() {
|
|
1007
|
+
var el = contentRef.current;
|
|
1008
|
+
while (el) {
|
|
1009
|
+
var position = window.getComputedStyle(el).position;
|
|
1010
|
+
if (position === "sticky" || position === "fixed")
|
|
1011
|
+
return true;
|
|
1012
|
+
el = el.parentElement;
|
|
1013
|
+
}
|
|
1014
|
+
return false;
|
|
1015
|
+
}
|
|
1016
|
+
var isSticky = checkParentIsSticky();
|
|
1017
|
+
setIsParentSticky(!!isSticky);
|
|
1018
|
+
}, [contentRef]);
|
|
1019
|
+
return isParentSticky ? (jsxRuntime.jsx(StaticPopper, __assign({ ref: ref, contentRef: contentRef }, other))) : (jsxRuntime.jsx(PopperWithPortal, __assign({ ref: ref, contentRef: contentRef }, other)));
|
|
1020
|
+
});
|
|
952
1021
|
|
|
953
1022
|
var Tooltip = React.forwardRef(function (props, ref) {
|
|
954
1023
|
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"]);
|
|
@@ -971,13 +1040,14 @@ var Tooltip = React.forwardRef(function (props, ref) {
|
|
|
971
1040
|
}, [open]);
|
|
972
1041
|
return (jsxRuntime.jsxs(StyledWrapper, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsxRuntime.jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsxRuntime.jsx(StyledContent, { children: children }) })), jsxRuntime.jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
973
1042
|
});
|
|
974
|
-
var
|
|
975
|
-
var
|
|
1043
|
+
var containerCSS = react.css(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"])));
|
|
1044
|
+
var StyledWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1045
|
+
var StyledContentWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
976
1046
|
var cursor = _a.cursor;
|
|
977
1047
|
return cursor;
|
|
978
1048
|
});
|
|
979
|
-
var StyledContent = styled__default["default"](
|
|
980
|
-
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
1049
|
+
var StyledContent = styled__default["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1050
|
+
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
|
|
981
1051
|
|
|
982
1052
|
var ButtonSelect = React.forwardRef(function (props, ref) {
|
|
983
1053
|
var _a;
|