kui-complex 0.0.68 → 0.0.70
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/AutocompleteOption/cjs/index.js +50 -0
- package/AutocompleteOption/cjs/index.js.map +1 -0
- package/AutocompleteOption/cjs/package.json +9 -0
- package/AutocompleteOption/index.d.ts +7 -0
- package/AutocompleteOption/index.js +44 -0
- package/AutocompleteOption/index.js.map +1 -0
- package/AutocompleteOption/package.json +9 -0
- package/InputWithAutocomplete/cjs/index.js +310 -0
- package/InputWithAutocomplete/cjs/index.js.map +1 -0
- package/InputWithAutocomplete/cjs/package.json +10 -0
- package/InputWithAutocomplete/index.d.ts +27 -0
- package/InputWithAutocomplete/index.js +286 -0
- package/InputWithAutocomplete/index.js.map +1 -0
- package/InputWithAutocomplete/package.json +10 -0
- package/Loading/cjs/index.js +72 -0
- package/Loading/cjs/index.js.map +1 -0
- package/Loading/cjs/package.json +9 -0
- package/Loading/index.d.ts +7 -0
- package/Loading/index.js +66 -0
- package/Loading/index.js.map +1 -0
- package/Loading/package.json +9 -0
- package/cjs/index.js +221 -101
- package/cjs/index.js.map +1 -1
- package/index.d.ts +40 -11
- package/index.js +222 -104
- package/index.js.map +1 -1
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -6,10 +6,10 @@ import { css, Global } from '@emotion/react';
|
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { forwardRef, useEffect, useState, useRef } from 'react';
|
|
8
8
|
import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
9
|
-
import { Caption, theme, Button, Container, Grid, InputWithAdornments, Heading, InputWithMask as InputWithMask$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown, Checkbox, Radio, InputMessage } from 'kui-basic';
|
|
9
|
+
import { Caption, theme, Button, Container, Grid, InputWithAdornments, Heading, InputWithMask as InputWithMask$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown, Checkbox, Radio, InputMessage, CircularProgress, Box } from 'kui-basic';
|
|
10
10
|
import { useNavigate } from 'react-router-dom';
|
|
11
11
|
import { DateTime } from 'luxon';
|
|
12
|
-
import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon';
|
|
12
|
+
import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon, PlusIcon } from 'kui-icon';
|
|
13
13
|
import _ from 'lodash';
|
|
14
14
|
import DatePicker from 'react-datepicker';
|
|
15
15
|
import { Controller, useController } from 'react-hook-form';
|
|
@@ -85,18 +85,18 @@ var UndefinedAvatar = forwardRef(function (_a, ref) {
|
|
|
85
85
|
.join("");
|
|
86
86
|
return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
87
87
|
});
|
|
88
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
89
|
-
var templateObject_1$
|
|
88
|
+
var Wrapper$8 = styled.div(templateObject_1$D || (templateObject_1$D = __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"])), theme.palette.brand.light, theme.palette.brand.main);
|
|
89
|
+
var templateObject_1$D;
|
|
90
90
|
|
|
91
91
|
var Avatar = forwardRef(function (props, ref) {
|
|
92
92
|
var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
|
|
93
93
|
return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
94
94
|
});
|
|
95
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
96
|
-
var StyledImage = styled.img(templateObject_2$
|
|
95
|
+
var Wrapper$7 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
96
|
+
var StyledImage = styled.img(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
97
97
|
var largeAvatarCSS = function (_a) {
|
|
98
98
|
var avatarSize = _a.avatarSize;
|
|
99
|
-
return avatarSize === "lg" && css(templateObject_3$
|
|
99
|
+
return avatarSize === "lg" && css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
100
100
|
};
|
|
101
101
|
var StyledUndefinedAvatar = styled(UndefinedAvatar, {
|
|
102
102
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
@@ -105,7 +105,7 @@ var sizeStyles = {
|
|
|
105
105
|
s: css(templateObject_5$2 || (templateObject_5$2 = __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 "]))),
|
|
106
106
|
lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
107
107
|
};
|
|
108
|
-
var templateObject_1$
|
|
108
|
+
var templateObject_1$C, templateObject_2$m, templateObject_3$9, templateObject_4$4, templateObject_5$2, templateObject_6;
|
|
109
109
|
|
|
110
110
|
var ButtonTab = forwardRef(function (_a, ref) {
|
|
111
111
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -114,9 +114,9 @@ var ButtonTab = forwardRef(function (_a, ref) {
|
|
|
114
114
|
};
|
|
115
115
|
return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
|
|
116
116
|
});
|
|
117
|
-
var StyledButton = styled(Button)(templateObject_1$
|
|
118
|
-
var inactiveStyles = css(templateObject_2$
|
|
119
|
-
var templateObject_1$
|
|
117
|
+
var StyledButton = styled(Button)(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
118
|
+
var inactiveStyles = css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
|
|
119
|
+
var templateObject_1$B, templateObject_2$l;
|
|
120
120
|
|
|
121
121
|
var ButtonsPanel = forwardRef(function (_a, ref) {
|
|
122
122
|
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"]);
|
|
@@ -139,9 +139,9 @@ var ButtonsPanel = forwardRef(function (_a, ref) {
|
|
|
139
139
|
ButtonsPanel.defaultProps = {
|
|
140
140
|
isSticky: false,
|
|
141
141
|
};
|
|
142
|
-
var Content = styled.div(templateObject_1$
|
|
143
|
-
var StyledContainer$2 = styled.div(templateObject_2$
|
|
144
|
-
var templateObject_1$
|
|
142
|
+
var Content = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
143
|
+
var StyledContainer$2 = styled.div(templateObject_2$k || (templateObject_2$k = __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);
|
|
144
|
+
var templateObject_1$A, templateObject_2$k;
|
|
145
145
|
|
|
146
146
|
var InputDropdown = forwardRef(function (props, ref) {
|
|
147
147
|
var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
|
|
@@ -187,21 +187,21 @@ var InputDropdown = forwardRef(function (props, ref) {
|
|
|
187
187
|
ref.current = elem;
|
|
188
188
|
dropdownRef.current = elem;
|
|
189
189
|
};
|
|
190
|
-
return (jsxs$1(StyledDropdown$
|
|
190
|
+
return (jsxs$1(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper$6, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
|
|
191
191
|
});
|
|
192
|
-
var StyledDropdown$
|
|
192
|
+
var StyledDropdown$2 = styled(Grid)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: 100%;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n top: 50px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n border-radius: 0 0 8px 8px;\n user-select: none;\n"], ["\n width: 100%;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n top: 50px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n border-radius: 0 0 8px 8px;\n user-select: none;\n"])), function (_a) {
|
|
193
193
|
var isOpen = _a.isOpen;
|
|
194
194
|
return (isOpen ? "flex" : "none");
|
|
195
195
|
}, theme.palette.grey.zero);
|
|
196
|
-
var StyledWrapper$
|
|
196
|
+
var StyledWrapper$6 = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"])), function (_a) {
|
|
197
197
|
var isScrollable = _a.isScrollable;
|
|
198
198
|
return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
|
|
199
199
|
});
|
|
200
|
-
var ScrollingContainer = styled.div(templateObject_3$
|
|
200
|
+
var ScrollingContainer = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"], ["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"])), function (_a) {
|
|
201
201
|
var isScrollable = _a.isScrollable;
|
|
202
202
|
return (isScrollable ? "4px" : "0px");
|
|
203
203
|
}, theme.palette.grey.fifteenB, theme.palette.grey.thirty);
|
|
204
|
-
var templateObject_1$
|
|
204
|
+
var templateObject_1$z, templateObject_2$j, templateObject_3$8;
|
|
205
205
|
|
|
206
206
|
var InputSelectDropdown = forwardRef(function (_a, ref) {
|
|
207
207
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
|
|
@@ -210,17 +210,17 @@ var InputSelectDropdown = forwardRef(function (_a, ref) {
|
|
|
210
210
|
handleSelect(option);
|
|
211
211
|
}
|
|
212
212
|
};
|
|
213
|
-
return (jsx(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
|
|
213
|
+
return (jsx(StyledDropdown$1, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
|
|
214
214
|
});
|
|
215
|
-
var OptionWrapper = styled.div(templateObject_1$
|
|
215
|
+
var OptionWrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
216
216
|
var disabled = _a.disabled;
|
|
217
217
|
return (disabled ? "auto" : "pointer");
|
|
218
218
|
}, function (_a) {
|
|
219
219
|
var disabled = _a.disabled;
|
|
220
220
|
return disabled ? theme.palette.grey.fiftyP : theme.palette.grey.seventy;
|
|
221
221
|
});
|
|
222
|
-
var StyledDropdown = styled(InputDropdown)(templateObject_2$
|
|
223
|
-
var templateObject_1$
|
|
222
|
+
var StyledDropdown$1 = styled(InputDropdown)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
223
|
+
var templateObject_1$y, templateObject_2$i;
|
|
224
224
|
|
|
225
225
|
function InputSelectBase(_a) {
|
|
226
226
|
var _b;
|
|
@@ -242,29 +242,29 @@ function InputSelectBase(_a) {
|
|
|
242
242
|
handleChange(option);
|
|
243
243
|
handleCloseDropdown();
|
|
244
244
|
};
|
|
245
|
-
return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
|
|
245
|
+
return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput$1, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
|
|
246
246
|
{ transition: "all linear .2s" },
|
|
247
247
|
isDropdownOpen && { transform: "rotate(180deg)" },
|
|
248
248
|
] }, iconProps))) })), options.length > 0 && !disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
|
|
249
249
|
current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
250
250
|
}, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption }))] }));
|
|
251
251
|
}
|
|
252
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
253
|
-
var StyledInput = styled(InputWithAdornments)(templateObject_2$
|
|
252
|
+
var Wrapper$6 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
253
|
+
var StyledInput$1 = styled(InputWithAdornments)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
254
254
|
var isDropdownOpen = _a.isDropdownOpen;
|
|
255
255
|
return (isDropdownOpen ? 0 : 1);
|
|
256
256
|
});
|
|
257
|
-
var templateObject_1$
|
|
257
|
+
var templateObject_1$x, templateObject_2$h;
|
|
258
258
|
|
|
259
259
|
function InputSelectOption(props) {
|
|
260
260
|
var option = props.option, selectedValue = props.selectedValue;
|
|
261
261
|
return (jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsx(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
|
|
262
262
|
}
|
|
263
|
-
var StyledOption$1 = styled.div(templateObject_1$
|
|
263
|
+
var StyledOption$1 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
264
264
|
var selected = _a.selected;
|
|
265
265
|
return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
266
266
|
}, theme.palette.background.light1);
|
|
267
|
-
var templateObject_1$
|
|
267
|
+
var templateObject_1$w;
|
|
268
268
|
|
|
269
269
|
function InputSelect(_a) {
|
|
270
270
|
var _b;
|
|
@@ -323,25 +323,25 @@ var CalendarHeaderWithSelect = forwardRef(function (_a, ref) {
|
|
|
323
323
|
var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
|
|
324
324
|
return (jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
|
|
325
325
|
});
|
|
326
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
327
|
-
var templateObject_1$
|
|
326
|
+
var Wrapper$5 = styled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
327
|
+
var templateObject_1$v;
|
|
328
328
|
|
|
329
329
|
var CalendarStandardContainer = forwardRef(function (_a, ref) {
|
|
330
330
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
331
331
|
return jsx(DatePickerContainer, __assign({ ref: ref }, props));
|
|
332
332
|
});
|
|
333
|
-
var DatePickerContainer = styled.div(templateObject_1$
|
|
334
|
-
var templateObject_1$
|
|
333
|
+
var DatePickerContainer = styled.div(templateObject_1$u || (templateObject_1$u = __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--today {\n color: ", ";\n background-color: ", ";\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--today {\n color: ", ";\n background-color: ", ";\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"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.light, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
|
|
334
|
+
var templateObject_1$u;
|
|
335
335
|
|
|
336
336
|
var CalendarStandardHeader = forwardRef(function (_a, ref) {
|
|
337
337
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
338
338
|
var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
339
339
|
return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { 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 }) })) }))] })) }))] })));
|
|
340
340
|
});
|
|
341
|
-
var HeaderWrapper = styled(Grid)(templateObject_1$
|
|
342
|
-
var StyledHeading = styled(Heading)(templateObject_2$
|
|
343
|
-
var CircleButtonStyled = styled(Button)(templateObject_3$
|
|
344
|
-
var templateObject_1$
|
|
341
|
+
var HeaderWrapper = styled(Grid)(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
342
|
+
var StyledHeading = styled(Heading)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
343
|
+
var CircleButtonStyled = styled(Button)(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
344
|
+
var templateObject_1$t, templateObject_2$g, templateObject_3$7;
|
|
345
345
|
|
|
346
346
|
var InputForDatepicker = forwardRef(function (props, ref) {
|
|
347
347
|
var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
|
|
@@ -356,23 +356,23 @@ var InputForDatepicker = forwardRef(function (props, ref) {
|
|
|
356
356
|
var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
|
|
357
357
|
return (jsx(InputWithMask$1, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
|
|
358
358
|
});
|
|
359
|
-
var IconWrapper = styled.div(templateObject_1$
|
|
360
|
-
var templateObject_1$
|
|
359
|
+
var IconWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
360
|
+
var templateObject_1$s;
|
|
361
361
|
|
|
362
362
|
var MonthPickerContainer = forwardRef(function (_a, ref) {
|
|
363
363
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
364
364
|
return jsx(StyledContainer$1, __assign({ ref: ref }, props));
|
|
365
365
|
});
|
|
366
|
-
var StyledContainer$1 = styled.div(templateObject_1$
|
|
367
|
-
var templateObject_1$
|
|
366
|
+
var StyledContainer$1 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"], ["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
|
|
367
|
+
var templateObject_1$r;
|
|
368
368
|
|
|
369
369
|
var MonthPickerHeader = forwardRef(function (_a, ref) {
|
|
370
370
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
371
371
|
return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { 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 }) })) }))] })));
|
|
372
372
|
});
|
|
373
|
-
var StyledIconButton = styled(IconButton)(templateObject_1$
|
|
374
|
-
var StyledHeader = styled(Grid)(templateObject_2$
|
|
375
|
-
var templateObject_1$
|
|
373
|
+
var StyledIconButton = styled(IconButton)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
374
|
+
var StyledHeader = styled(Grid)(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
375
|
+
var templateObject_1$q, templateObject_2$f;
|
|
376
376
|
|
|
377
377
|
var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
378
378
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -382,8 +382,8 @@ var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
|
382
382
|
return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
383
383
|
} }) })));
|
|
384
384
|
});
|
|
385
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
386
|
-
var templateObject_1$
|
|
385
|
+
var Wrapper$4 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
386
|
+
var templateObject_1$p;
|
|
387
387
|
|
|
388
388
|
var MenuItem = forwardRef(function (_a, ref) {
|
|
389
389
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -418,16 +418,16 @@ var MenuItem = forwardRef(function (_a, ref) {
|
|
|
418
418
|
}, []);
|
|
419
419
|
return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, __assign({ ref: ref }, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
|
|
420
420
|
});
|
|
421
|
-
var ButtonWrapper$1 = styled.div(templateObject_1$
|
|
422
|
-
var disabledStyles = css(templateObject_2$
|
|
423
|
-
var templateObject_1$
|
|
421
|
+
var ButtonWrapper$1 = styled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
422
|
+
var disabledStyles = css(templateObject_2$e || (templateObject_2$e = __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);
|
|
423
|
+
var templateObject_1$o, templateObject_2$e;
|
|
424
424
|
|
|
425
425
|
var DesktopMenuPanel = forwardRef(function (_a, ref) {
|
|
426
426
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
427
427
|
return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
428
428
|
});
|
|
429
|
-
var Wrapper$3 = styled(Grid)(templateObject_1$
|
|
430
|
-
var templateObject_1$
|
|
429
|
+
var Wrapper$3 = styled(Grid)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
430
|
+
var templateObject_1$n;
|
|
431
431
|
|
|
432
432
|
var InputWithMask = forwardRef(function (_a, ref) {
|
|
433
433
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -503,15 +503,15 @@ var PassportStrengthBar = forwardRef(function (_a, ref) {
|
|
|
503
503
|
: -1;
|
|
504
504
|
return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { 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" }))] })));
|
|
505
505
|
});
|
|
506
|
-
var Wrapper$2 = styled.div(templateObject_1$
|
|
507
|
-
var ReliabilityLevelWrapper = styled.div(templateObject_2$
|
|
508
|
-
var ReliabilityLevel = styled.div(templateObject_3$
|
|
506
|
+
var Wrapper$2 = styled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
507
|
+
var ReliabilityLevelWrapper = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
508
|
+
var ReliabilityLevel = styled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
509
509
|
var StyledLinearProgress = styled(LinearProgress)(templateObject_4$3 || (templateObject_4$3 = __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) {
|
|
510
510
|
var color = _a.color;
|
|
511
511
|
return color;
|
|
512
512
|
});
|
|
513
513
|
var Description = styled(Caption)(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
514
|
-
var templateObject_1$
|
|
514
|
+
var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$3, templateObject_5$1;
|
|
515
515
|
|
|
516
516
|
var getFormValue = function (name, form) {
|
|
517
517
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -566,13 +566,13 @@ var InputPassword = forwardRef(function (props, ref) {
|
|
|
566
566
|
}, []);
|
|
567
567
|
return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
|
|
568
568
|
});
|
|
569
|
-
var EyeIconWrapper = styled.div(templateObject_1$
|
|
570
|
-
var templateObject_1$
|
|
569
|
+
var EyeIconWrapper = styled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
570
|
+
var templateObject_1$l;
|
|
571
571
|
|
|
572
572
|
var InputTextAreaMobile = forwardRef(function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
|
|
573
|
-
var InputWrapper = styled.div(templateObject_1$
|
|
574
|
-
var TextAreaWrapper = styled.div(templateObject_2$
|
|
575
|
-
var templateObject_1$
|
|
573
|
+
var InputWrapper = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
574
|
+
var TextAreaWrapper = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
575
|
+
var templateObject_1$k, templateObject_2$c;
|
|
576
576
|
|
|
577
577
|
var useToggle = function (isModalOpen) {
|
|
578
578
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -590,10 +590,10 @@ var ModalFooter = forwardRef(function (_a, ref) {
|
|
|
590
590
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
591
591
|
return (jsxs$1(StyledFooter, __assign({ ref: ref }, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] })));
|
|
592
592
|
});
|
|
593
|
-
var StyledFooter = styled.div(templateObject_1$
|
|
594
|
-
var ButtonWrapper = styled.div(templateObject_2$
|
|
595
|
-
var ButtonStyled = styled(Button)(templateObject_3$
|
|
596
|
-
var templateObject_1$
|
|
593
|
+
var StyledFooter = styled.div(templateObject_1$j || (templateObject_1$j = __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);
|
|
594
|
+
var ButtonWrapper = styled.div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
595
|
+
var ButtonStyled = styled(Button)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
596
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$5;
|
|
597
597
|
|
|
598
598
|
function setRef(ref, value) {
|
|
599
599
|
if (typeof ref === "function") {
|
|
@@ -697,14 +697,14 @@ InputWithDatePicker.defaultProps = {
|
|
|
697
697
|
footerLabel: "Подтвердить",
|
|
698
698
|
alignTitle: "center",
|
|
699
699
|
};
|
|
700
|
-
var ContentWrapper$1 = styled.div(templateObject_1$
|
|
701
|
-
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$
|
|
702
|
-
var DayContent = styled.span(templateObject_3$
|
|
700
|
+
var ContentWrapper$1 = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
|
|
701
|
+
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$a || (templateObject_2$a = __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);
|
|
702
|
+
var DayContent = styled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
|
|
703
703
|
var StyledModal = styled(Modal)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ", ";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"], ["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ", ";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"])), function (_a) {
|
|
704
704
|
var alignTitle = _a.alignTitle;
|
|
705
705
|
return alignTitle || "center";
|
|
706
706
|
});
|
|
707
|
-
var templateObject_1$
|
|
707
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$4, templateObject_4$2;
|
|
708
708
|
|
|
709
709
|
var shortMonths = [
|
|
710
710
|
"ЯНВ",
|
|
@@ -767,9 +767,9 @@ var MobileInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
|
767
767
|
};
|
|
768
768
|
return (jsxs$1(Wrapper$1, __assign({ ref: ref }, { children: [jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: 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" })] }))] })));
|
|
769
769
|
});
|
|
770
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
771
|
-
var ContentWrapper = styled.div(templateObject_2$
|
|
772
|
-
var templateObject_1$
|
|
770
|
+
var Wrapper$1 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
771
|
+
var ContentWrapper = styled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
772
|
+
var templateObject_1$h, templateObject_2$9;
|
|
773
773
|
|
|
774
774
|
var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
775
775
|
|
|
@@ -785,9 +785,9 @@ var MobileMenuPanel = forwardRef(function (_a, ref) {
|
|
|
785
785
|
};
|
|
786
786
|
return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { 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)); }) })) })));
|
|
787
787
|
});
|
|
788
|
-
var Wrapper = styled.div(templateObject_1$
|
|
789
|
-
var SlideWrapper = styled.div(templateObject_2$
|
|
790
|
-
var templateObject_1$
|
|
788
|
+
var Wrapper = styled.div(templateObject_1$g || (templateObject_1$g = __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);
|
|
789
|
+
var SlideWrapper = styled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
790
|
+
var templateObject_1$g, templateObject_2$8;
|
|
791
791
|
|
|
792
792
|
var useWindowWidth = function (time) {
|
|
793
793
|
if (time === void 0) { time = 10; }
|
|
@@ -837,8 +837,8 @@ var MenuPanel = forwardRef(function (_a, ref) {
|
|
|
837
837
|
MenuPanel.defaultProps = {
|
|
838
838
|
variant: "grey",
|
|
839
839
|
};
|
|
840
|
-
var fullHeightStyles = css(templateObject_1$
|
|
841
|
-
var templateObject_1$
|
|
840
|
+
var fullHeightStyles = css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
841
|
+
var templateObject_1$f;
|
|
842
842
|
|
|
843
843
|
var Switch = forwardRef(function (_a, ref) {
|
|
844
844
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -891,14 +891,14 @@ InputPhoneWithForm.defaultProps = {
|
|
|
891
891
|
};
|
|
892
892
|
|
|
893
893
|
var Table = forwardRef(function (props, ref) { return jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
|
|
894
|
-
var StyledTable = styled.table(templateObject_1$
|
|
895
|
-
var templateObject_1$
|
|
894
|
+
var StyledTable = styled.table(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
895
|
+
var templateObject_1$e;
|
|
896
896
|
|
|
897
|
-
var TableHeadCell = styled.th(templateObject_1$
|
|
898
|
-
var templateObject_1$
|
|
897
|
+
var TableHeadCell = styled.th(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
898
|
+
var templateObject_1$d;
|
|
899
899
|
|
|
900
|
-
var TableCell = styled.td(templateObject_1$
|
|
901
|
-
var templateObject_1$
|
|
900
|
+
var TableCell = styled.td(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
901
|
+
var templateObject_1$c;
|
|
902
902
|
|
|
903
903
|
var TableRow = forwardRef(function (_a, ref) {
|
|
904
904
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
@@ -937,15 +937,15 @@ var PopperBase = forwardRef(function (props, ref) {
|
|
|
937
937
|
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"]);
|
|
938
938
|
return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
939
939
|
});
|
|
940
|
-
var StyledPopperWrapper = styled.div(templateObject_1$
|
|
940
|
+
var StyledPopperWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n width: max-content;\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 width: max-content;\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) {
|
|
941
941
|
var spacing = _a.spacing;
|
|
942
942
|
return spacing || 0;
|
|
943
943
|
}, theme.breakpoints.xxs);
|
|
944
|
-
var StyledPopper = styled.div(templateObject_2$
|
|
944
|
+
var StyledPopper = styled.div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
945
945
|
var open = _a.open;
|
|
946
946
|
return (open ? 1 : 0);
|
|
947
947
|
});
|
|
948
|
-
var templateObject_1$
|
|
948
|
+
var templateObject_1$b, templateObject_2$7;
|
|
949
949
|
|
|
950
950
|
var PopperWithPortal = forwardRef(function (props, ref) {
|
|
951
951
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -989,9 +989,9 @@ var PopperWithPortal = forwardRef(function (props, ref) {
|
|
|
989
989
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
990
990
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
991
991
|
// Распожить стрелочку к контенту посередине контента
|
|
992
|
-
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$
|
|
992
|
+
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
993
993
|
});
|
|
994
|
-
var templateObject_1$
|
|
994
|
+
var templateObject_1$a;
|
|
995
995
|
|
|
996
996
|
var StaticPopper = forwardRef(function (props, ref) {
|
|
997
997
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -1073,24 +1073,24 @@ var Tooltip = forwardRef(function (props, ref) {
|
|
|
1073
1073
|
useEffect(function () {
|
|
1074
1074
|
setOpen(open);
|
|
1075
1075
|
}, [open]);
|
|
1076
|
-
return (jsxs$1(StyledWrapper$
|
|
1076
|
+
return (jsxs$1(StyledWrapper$5, __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 }))] })));
|
|
1077
1077
|
});
|
|
1078
|
-
var containerCSS = css(templateObject_1$
|
|
1079
|
-
var StyledWrapper$
|
|
1080
|
-
var StyledContentWrapper = styled.div(templateObject_3$
|
|
1078
|
+
var containerCSS = css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"])));
|
|
1079
|
+
var StyledWrapper$5 = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1080
|
+
var StyledContentWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
1081
1081
|
var cursor = _a.cursor;
|
|
1082
1082
|
return cursor;
|
|
1083
1083
|
});
|
|
1084
1084
|
var StyledContent = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1085
|
-
var templateObject_1$
|
|
1085
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$3, templateObject_4$1;
|
|
1086
1086
|
|
|
1087
1087
|
var ButtonSelect = forwardRef(function (props, ref) {
|
|
1088
1088
|
var _a;
|
|
1089
1089
|
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
1090
1090
|
return (jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
|
|
1091
1091
|
});
|
|
1092
|
-
var StyledInputSelect = styled(InputSelect)(templateObject_1$
|
|
1093
|
-
var templateObject_1$
|
|
1092
|
+
var StyledInputSelect = styled(InputSelect)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"], ["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"])), theme.breakpoints.xs);
|
|
1093
|
+
var templateObject_1$8;
|
|
1094
1094
|
|
|
1095
1095
|
function InputSelectWithController(_a) {
|
|
1096
1096
|
var _b, _c;
|
|
@@ -1120,17 +1120,17 @@ function InputMultiSelectOption(props) {
|
|
|
1120
1120
|
var selected = selectedValue.includes(option.value);
|
|
1121
1121
|
return (jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsx(Checkbox, { checked: selected, label: jsx(StyledCaption, __assign({ selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
|
|
1122
1122
|
}
|
|
1123
|
-
var StyledOption = styled(Grid)(templateObject_1$
|
|
1123
|
+
var StyledOption = styled(Grid)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"])), function (_a) {
|
|
1124
1124
|
var selected = _a.selected;
|
|
1125
1125
|
return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
1126
1126
|
}, theme.palette.background.light1, theme.palette.grey.seventy);
|
|
1127
|
-
var StyledCaption = styled(Caption)(templateObject_2$
|
|
1127
|
+
var StyledCaption = styled(Caption)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n color: ", " !important;\n"], ["\n color: ", " !important;\n"])), function (_a) {
|
|
1128
1128
|
var selected = _a.selected;
|
|
1129
1129
|
return selected
|
|
1130
1130
|
? theme.palette.grey.seventy
|
|
1131
1131
|
: theme.palette.grey.fiftyP;
|
|
1132
1132
|
});
|
|
1133
|
-
var templateObject_1$
|
|
1133
|
+
var templateObject_1$7, templateObject_2$5;
|
|
1134
1134
|
|
|
1135
1135
|
function InputMultiSelect(_a) {
|
|
1136
1136
|
var _b, _c;
|
|
@@ -1233,18 +1233,18 @@ function RadioGroupWithLabel(props) {
|
|
|
1233
1233
|
name: name,
|
|
1234
1234
|
}).fieldState;
|
|
1235
1235
|
var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1236
|
-
return (jsxs$1(StyledContainer, { children: [jsxs$1(StyledWrapper, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsx(Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsx(InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1236
|
+
return (jsxs$1(StyledContainer, { children: [jsxs$1(StyledWrapper$4, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsx(Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsx(InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1237
1237
|
}
|
|
1238
|
-
var StyledContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1238
|
+
var StyledContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1239
1239
|
var columnDirectionCSS = function (_a) {
|
|
1240
1240
|
var hasError = _a.hasError;
|
|
1241
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"], ["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
|
|
1241
|
+
return css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"], ["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
|
|
1242
1242
|
};
|
|
1243
1243
|
var rowDirectionCSS = function (_a) {
|
|
1244
1244
|
var hasError = _a.hasError, withTitle = _a.withTitle;
|
|
1245
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n"], ["\n padding: ", ";\n border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "66px 66px 0 0" : "66px");
|
|
1245
|
+
return css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n"], ["\n padding: ", ";\n border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "66px 66px 0 0" : "66px");
|
|
1246
1246
|
};
|
|
1247
|
-
var StyledWrapper = styled(Grid, {
|
|
1247
|
+
var StyledWrapper$4 = styled(Grid, {
|
|
1248
1248
|
shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
|
|
1249
1249
|
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n ", ";\n"], ["\n border: 1px solid\n ", ";\n ", ";\n"])), function (_a) {
|
|
1250
1250
|
var hasError = _a.hasError;
|
|
@@ -1259,7 +1259,125 @@ var StyledTitle = styled(Caption)(templateObject_5 || (templateObject_5 = __make
|
|
|
1259
1259
|
var direction = _a.direction;
|
|
1260
1260
|
return (direction === "vertical" ? 8 : 0);
|
|
1261
1261
|
});
|
|
1262
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
1262
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$2, templateObject_4, templateObject_5;
|
|
1263
|
+
|
|
1264
|
+
var Loading = forwardRef(function (_a) {
|
|
1265
|
+
var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
|
|
1266
|
+
return (jsx(StyledWrapper$3, __assign({ container: true, alignItems: "center", justify: "center", className: className, height: height }, { children: jsx(StyledCircularProgress, __assign({}, otherProps)) })));
|
|
1267
|
+
});
|
|
1268
|
+
Loading.defaultProps = {
|
|
1269
|
+
height: "adaptive",
|
|
1270
|
+
};
|
|
1271
|
+
var StyledCircularProgress = styled(CircularProgress)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), theme.palette.brand.main);
|
|
1272
|
+
var StyledWrapper$3 = styled(Grid, {
|
|
1273
|
+
shouldForwardProp: function (prop) { return prop !== "height"; },
|
|
1274
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), function (_a) {
|
|
1275
|
+
var height = _a.height;
|
|
1276
|
+
return height;
|
|
1277
|
+
});
|
|
1278
|
+
var templateObject_1$5, templateObject_2$3;
|
|
1279
|
+
|
|
1280
|
+
function CreatingEntityFromDropdown(_a) {
|
|
1281
|
+
var creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal;
|
|
1282
|
+
var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
|
|
1283
|
+
if (!creatingLabel || !renderCreatingModal) {
|
|
1284
|
+
return null;
|
|
1285
|
+
}
|
|
1286
|
+
var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
|
|
1287
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledWrapper$2, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsx(StyledPlusIcon, { width: 12, height: 12 }), jsx(Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
|
|
1288
|
+
isOpen: isModalOpen,
|
|
1289
|
+
handleClose: handleModalClose,
|
|
1290
|
+
}) }))] }));
|
|
1291
|
+
}
|
|
1292
|
+
var StyledWrapper$2 = styled(Grid)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"], ["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"])), theme.palette.grey.fifteenB);
|
|
1293
|
+
var StyledPlusIcon = styled(PlusIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"], ["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"])), theme.palette.grey.fiftyP);
|
|
1294
|
+
var StyledModalWrapper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
|
|
1295
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
1296
|
+
|
|
1297
|
+
var AutocompleteOption$1 = function (props) {
|
|
1298
|
+
var option = props.option, renderOption = props.renderOption, handleSelect = props.handleSelect, index = props.index;
|
|
1299
|
+
var handleClick = function () {
|
|
1300
|
+
handleSelect(option);
|
|
1301
|
+
};
|
|
1302
|
+
return (jsx(StyledOptionWrapper, __assign({ item: true, xs: 12, onClick: handleClick, "data-testid": "autocomplete_option_".concat(index) }, { children: renderOption(option) })));
|
|
1303
|
+
};
|
|
1304
|
+
var StyledOptionWrapper = styled(Grid)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1305
|
+
var templateObject_1$3;
|
|
1306
|
+
|
|
1307
|
+
function AutocompleteDropdown(props) {
|
|
1308
|
+
var options = props.options, renderOption = props.renderOption, creatingLabel = props.creatingLabel, renderCreatingModal = props.renderCreatingModal;
|
|
1309
|
+
var inputRef = props.inputRef, isOpenDropdown = props.isOpenDropdown, isLoading = props.isLoading;
|
|
1310
|
+
var handleCloseDropdown = props.handleCloseDropdown, handleSelect = props.handleSelect, handleScrollEnd = props.handleScrollEnd;
|
|
1311
|
+
var handleScroll = function (e) {
|
|
1312
|
+
if (e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight) <
|
|
1313
|
+
100) {
|
|
1314
|
+
if (handleScrollEnd)
|
|
1315
|
+
handleScrollEnd();
|
|
1316
|
+
}
|
|
1317
|
+
};
|
|
1318
|
+
return (jsxs$1(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsx(AutocompleteOption$1, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsx(StyledLoading, { height: "auto" })] })));
|
|
1319
|
+
}
|
|
1320
|
+
var StyledDropdown = styled(InputDropdown)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
1321
|
+
var StyledLoading = styled(Loading)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: sticky;\n bottom: 30px;\n"], ["\n position: sticky;\n bottom: 30px;\n"])));
|
|
1322
|
+
var templateObject_1$2, templateObject_2$1;
|
|
1323
|
+
|
|
1324
|
+
function InputWithAutocomplete(_a) {
|
|
1325
|
+
var _b;
|
|
1326
|
+
var renderOption = _a.renderOption, options = _a.options, name = _a.name, hideName = _a.hideName, form = _a.form, isLoading = _a.isLoading, onSelectItem = _a.onSelectItem, handleScrollEnd = _a.handleScrollEnd, onSearchItem = _a.onSearchItem, isLabelLoading = _a.isLabelLoading, disabled = _a.disabled, creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal, endComponent = _a.endComponent, inputRefProps = _a.inputRef, inputProps = __rest(_a, ["renderOption", "options", "name", "hideName", "form", "isLoading", "onSelectItem", "handleScrollEnd", "onSearchItem", "isLabelLoading", "disabled", "creatingLabel", "renderCreatingModal", "endComponent", "inputRef"]);
|
|
1327
|
+
var _c = useState(false), isOpenDropdown = _c[0], setIsOpenDropDown = _c[1];
|
|
1328
|
+
var inputRef = useRef(null);
|
|
1329
|
+
if (hideName)
|
|
1330
|
+
form.register(hideName);
|
|
1331
|
+
var handleOpenDropdown = function () {
|
|
1332
|
+
setIsOpenDropDown(true);
|
|
1333
|
+
};
|
|
1334
|
+
var handleCloseDropdown = function () {
|
|
1335
|
+
setIsOpenDropDown(false);
|
|
1336
|
+
};
|
|
1337
|
+
var handleSelect = function (option) {
|
|
1338
|
+
var _a;
|
|
1339
|
+
onSelectItem(option);
|
|
1340
|
+
handleCloseDropdown();
|
|
1341
|
+
var error = (_a = form.getFieldState(name).error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1342
|
+
if (error) {
|
|
1343
|
+
form.clearErrors(name);
|
|
1344
|
+
}
|
|
1345
|
+
};
|
|
1346
|
+
var handleSearch = function (e) {
|
|
1347
|
+
if (onSearchItem) {
|
|
1348
|
+
onSearchItem(e.target.value);
|
|
1349
|
+
form.setValue(hideName, null);
|
|
1350
|
+
}
|
|
1351
|
+
if (!e.target.value && hideName) {
|
|
1352
|
+
form.setValue(hideName, null);
|
|
1353
|
+
form.setValue(name, null);
|
|
1354
|
+
onSelectItem(null);
|
|
1355
|
+
}
|
|
1356
|
+
handleOpenDropdown();
|
|
1357
|
+
};
|
|
1358
|
+
var forwardRef = useForkRef(inputRef, inputRefProps);
|
|
1359
|
+
return (jsxs(StyledWrapper$1, { children: [isLabelLoading && (jsx$1(StyledLoadingWrapper, { children: jsx$1(Loading, { height: "100%" }) })), jsx$1(StyledInput, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxs(Grid, __assign({ container: true, alignItems: "center" }, { children: [jsx$1(Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
|
|
1360
|
+
(!disabled && (jsx$1(HalfArrowIcon, { width: 12, height: 13, css: [
|
|
1361
|
+
{ transition: "all linear .2s" },
|
|
1362
|
+
isOpenDropdown && { transform: "rotate(180deg)" },
|
|
1363
|
+
] })))] }))) })), jsx$1(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
|
|
1364
|
+
current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
1365
|
+
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal })] }));
|
|
1366
|
+
}
|
|
1367
|
+
var StyledLoadingWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"])));
|
|
1368
|
+
var StyledWrapper$1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1369
|
+
var StyledInput = styled(InputWithController)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
1370
|
+
var isDropdownOpen = _a.isDropdownOpen;
|
|
1371
|
+
return (isDropdownOpen ? 0 : 1);
|
|
1372
|
+
});
|
|
1373
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
1374
|
+
|
|
1375
|
+
function AutocompleteOption(_a) {
|
|
1376
|
+
var label = _a.label;
|
|
1377
|
+
return (jsx(StyledWrapper, { children: jsx(Caption, __assign({ size: "s", weight: 500 }, { children: label })) }));
|
|
1378
|
+
}
|
|
1379
|
+
var StyledWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ", ";\n },\n"], ["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ", ";\n },\n"])), theme.palette.background.light2);
|
|
1380
|
+
var templateObject_1;
|
|
1263
1381
|
|
|
1264
|
-
export { Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputMultiSelect, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputSelectWithController, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, RadioButtons, RadioButtonsWithController, RadioGroupWithLabel, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
|
1382
|
+
export { AutocompleteOption, Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputMultiSelect, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputSelectWithController, InputTextAreaMobile, InputWithAutocomplete, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, RadioButtons, RadioButtonsWithController, RadioGroupWithLabel, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
|
1265
1383
|
//# sourceMappingURL=index.js.map
|