kui-complex 0.0.1 → 0.0.3

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.
Files changed (5) hide show
  1. package/dist/index.es.js +748 -0
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +806 -0
  4. package/dist/index.js.map +1 -1
  5. package/package.json +10 -2
package/dist/index.js CHANGED
@@ -1,3 +1,809 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime$1 = require('@emotion/react/jsx-runtime');
6
+ var styled = require('@emotion/styled');
7
+ var react = require('@emotion/react');
8
+ var jsxRuntime = require('react/jsx-runtime');
9
+ var kuiBasic = require('kui-basic');
10
+ var src = require('kui-basic/src');
11
+ var React = require('react');
12
+ var reactRouterDom = require('react-router-dom');
13
+ var src$1 = require('kui-icon/src');
14
+ var _ = require('lodash');
15
+ var DatePicker = require('react-datepicker');
16
+ var reactHookForm = require('react-hook-form');
17
+ var InputMask = require('react-input-mask');
18
+ var reactScroll = require('react-scroll');
19
+ var ru = require('date-fns/locale/ru');
20
+ var luxon = require('luxon');
21
+ var Swiper = require('react-id-swiper');
22
+
23
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
24
+
25
+ function _interopNamespace(e) {
26
+ if (e && e.__esModule) return e;
27
+ var n = Object.create(null);
28
+ if (e) {
29
+ Object.keys(e).forEach(function (k) {
30
+ if (k !== 'default') {
31
+ var d = Object.getOwnPropertyDescriptor(e, k);
32
+ Object.defineProperty(n, k, d.get ? d : {
33
+ enumerable: true,
34
+ get: function () { return e[k]; }
35
+ });
36
+ }
37
+ });
38
+ }
39
+ n["default"] = e;
40
+ return Object.freeze(n);
41
+ }
42
+
43
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
44
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
45
+ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
46
+ var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
47
+ var InputMask__default = /*#__PURE__*/_interopDefaultLegacy(InputMask);
48
+ var ru__default = /*#__PURE__*/_interopDefaultLegacy(ru);
49
+ var Swiper__default = /*#__PURE__*/_interopDefaultLegacy(Swiper);
50
+
51
+ /******************************************************************************
52
+ Copyright (c) Microsoft Corporation.
53
+
54
+ Permission to use, copy, modify, and/or distribute this software for any
55
+ purpose with or without fee is hereby granted.
56
+
57
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
58
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
59
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
60
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
61
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
62
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
63
+ PERFORMANCE OF THIS SOFTWARE.
64
+ ***************************************************************************** */
65
+
66
+ var __assign = function() {
67
+ __assign = Object.assign || function __assign(t) {
68
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
69
+ s = arguments[i];
70
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
71
+ }
72
+ return t;
73
+ };
74
+ return __assign.apply(this, arguments);
75
+ };
76
+
77
+ function __rest(s, e) {
78
+ var t = {};
79
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
80
+ t[p] = s[p];
81
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
82
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
83
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
84
+ t[p[i]] = s[p[i]];
85
+ }
86
+ return t;
87
+ }
88
+
89
+ function __makeTemplateObject(cooked, raw) {
90
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
91
+ return cooked;
92
+ }
93
+
94
+ var paletteBasic = src.themeOld.palette, themeBasicParams = __rest(src.themeOld, ["palette"]);
95
+ var palette = {
96
+ brand: __assign(__assign({}, paletteBasic.primary), { background: paletteBasic.primary.light2 }),
97
+ grey: {
98
+ seventy: paletteBasic.secondary.main,
99
+ sixty: paletteBasic.secondary.gray60,
100
+ fiftyP: paletteBasic.secondary.gray50,
101
+ fourty: paletteBasic.secondary.gray40,
102
+ thirty: paletteBasic.secondary.gray30,
103
+ fifteenB: paletteBasic.secondary.gray15,
104
+ zero: paletteBasic.secondary.white,
105
+ },
106
+ background: __assign(__assign({}, paletteBasic.background), { light1: paletteBasic.background.main, light4: "#C5C6C7" }),
107
+ green: {
108
+ fiftyP: paletteBasic.success.main,
109
+ seventy: paletteBasic.success.green70,
110
+ sixty: paletteBasic.success.green60,
111
+ ten: paletteBasic.success.green10,
112
+ five: paletteBasic.success.green5,
113
+ },
114
+ red: {
115
+ fiftyP: paletteBasic.error.main,
116
+ seventy: paletteBasic.error.red70,
117
+ sixty: paletteBasic.error.red60,
118
+ ten: paletteBasic.error.red10,
119
+ five: paletteBasic.error.red5,
120
+ },
121
+ blue: {
122
+ fiftyP: paletteBasic.info.main,
123
+ seventy: paletteBasic.info.blue70,
124
+ sixty: paletteBasic.info.blue60,
125
+ ten: paletteBasic.info.blue10,
126
+ five: paletteBasic.info.blue5,
127
+ },
128
+ purple: {
129
+ fiftyP: paletteBasic.purple.main,
130
+ seventy: paletteBasic.purple.purple70,
131
+ sixty: paletteBasic.purple.purple60,
132
+ ten: paletteBasic.purple.purple10,
133
+ five: paletteBasic.purple.purple5,
134
+ },
135
+ };
136
+ var theme = __assign({ palette: palette }, themeBasicParams);
137
+
138
+ var UndefinedAvatar = function (_a) {
139
+ var label = _a.label, otherProps = __rest(_a, ["label"]);
140
+ if (!label) {
141
+ return jsxRuntime.jsx("div", {});
142
+ }
143
+ var formattedLabel = label
144
+ .split(" ")
145
+ .map(function (el) { return el[0]; })
146
+ .slice(0, 3)
147
+ .join("");
148
+ 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 })) })));
149
+ };
150
+ var Wrapper$8 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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);
151
+ var templateObject_1$n;
152
+
153
+ var Avatar = function (_a) {
154
+ var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
155
+ 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 })) })));
156
+ };
157
+ var Wrapper$7 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
158
+ var StyledImage = styled__default["default"].img(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"])));
159
+ var largeAvatarCSS = function (_a) {
160
+ var avatarSize = _a.avatarSize;
161
+ return avatarSize === "lg" && react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
162
+ };
163
+ var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
164
+ shouldForwardProp: function (prop) { return prop !== "size"; },
165
+ })(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), largeAvatarCSS);
166
+ var sizeStyles = {
167
+ 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 "]))),
168
+ lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
169
+ };
170
+ var templateObject_1$m, templateObject_2$d, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6;
171
+
172
+ var ButtonTab = function (_a) {
173
+ var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
174
+ var handleClick = function () {
175
+ onClick(index);
176
+ };
177
+ return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles }, { children: label })));
178
+ };
179
+ var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$l || (templateObject_1$l = __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"])));
180
+ var inactiveStyles = react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
181
+ var templateObject_1$l, templateObject_2$c;
182
+
183
+ var ButtonsPanel = function (_a) {
184
+ 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"]);
185
+ var _b = React__namespace.useState(Number(activeTab)), value = _b[0], setValue = _b[1];
186
+ var history = reactRouterDom.useHistory();
187
+ var handleChange = function (newValue) {
188
+ setValue(newValue);
189
+ if (paths && paths.length > 0) {
190
+ history.push(paths[newValue]);
191
+ }
192
+ if (onChange) {
193
+ onChange();
194
+ }
195
+ };
196
+ React.useEffect(function () {
197
+ setValue(Number(activeTab));
198
+ }, [activeTab]);
199
+ return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(StyledContainer$1, __assign({ css: isSticky && { position: "sticky" } }, otherProps, { children: jsxRuntime$1.jsx(kuiBasic.Container, { children: tabs.map(function (item, index) { return (jsxRuntime$1.jsx(ButtonTab, { index: index, onClick: handleChange, isActive: index === value, label: item.label }, item.label)); }) }) })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx(Content, __assign({ role: "tabpanel", hidden: value !== index }, { children: value === index && jsxRuntime$1.jsx(jsxRuntime$1.Fragment, { children: item }) }), index)); })] }));
200
+ };
201
+ ButtonsPanel.defaultProps = {
202
+ isSticky: false,
203
+ };
204
+ var Content = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
205
+ var StyledContainer$1 = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __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);
206
+ var templateObject_1$k, templateObject_2$b;
207
+
208
+ var dropdownStyles = function (_a) {
209
+ var isOpen = _a.isOpen;
210
+ return react.css(templateObject_1$j || (templateObject_1$j = __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", theme.palette.grey.zero, theme.palette.grey.fifteenB);
211
+ };
212
+ var InputDropdown = function (_a) {
213
+ var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
214
+ var dropdownRef = React.useRef(null);
215
+ var closePopUp = function (e) {
216
+ if (dropdownRef.current && buttonRef && buttonRef.current) {
217
+ if (!dropdownRef.current.contains(e.target) &&
218
+ !buttonRef.current.contains(e.target)) {
219
+ handleClose();
220
+ }
221
+ }
222
+ };
223
+ React.useEffect(function () {
224
+ document.addEventListener("click", closePopUp);
225
+ return function () {
226
+ document.removeEventListener("click", closePopUp);
227
+ };
228
+ });
229
+ if (!isOpen) {
230
+ return null;
231
+ }
232
+ return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
233
+ };
234
+ var templateObject_1$j;
235
+
236
+ var InputSelectDropdown = function (_a) {
237
+ var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
238
+ React.useEffect(function () {
239
+ var _a;
240
+ if (isOpenDropdown) {
241
+ (_a = document
242
+ .querySelector("[data-value=autocomplete_option_".concat(selectedValue, "]"))) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
243
+ }
244
+ }, [isOpenDropdown]);
245
+ return (jsxRuntime$1.jsx(InputDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, css: {
246
+ maxHeight: "142px",
247
+ padding: "4px",
248
+ } }, { 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)); }) })));
249
+ };
250
+ var OptionWrapper = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
251
+ var StyledOption = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"])), theme.palette.background.light1);
252
+ var selectedStyles = react.css(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), theme.palette.background.light1);
253
+ var templateObject_1$i, templateObject_2$a, templateObject_3$4;
254
+
255
+ var getFormValue = function (name, form) {
256
+ var names = name === null || name === void 0 ? void 0 : name.split(".");
257
+ var fieldValue = form === null || form === void 0 ? void 0 : form.control._formValues;
258
+ names === null || names === void 0 ? void 0 : names.forEach(function (field) {
259
+ if (fieldValue) {
260
+ fieldValue = fieldValue[field];
261
+ }
262
+ });
263
+ return fieldValue;
264
+ };
265
+ var getFormError = function (name, form) {
266
+ var names = name === null || name === void 0 ? void 0 : name.split(".");
267
+ var fieldError = form === null || form === void 0 ? void 0 : form.formState.errors;
268
+ names === null || names === void 0 ? void 0 : names.forEach(function (field) {
269
+ if (fieldError) {
270
+ // @ts-ignore
271
+ fieldError = fieldError[field];
272
+ }
273
+ });
274
+ return fieldError === null || fieldError === void 0 ? void 0 : fieldError.message;
275
+ };
276
+
277
+ var InputSelect = function (_a) {
278
+ var _b, _c, _d, _e;
279
+ var options = _a.options, name = _a.name; _a.isLoading; var disabled = _a.disabled, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "isLoading", "disabled", "handleChange", "form", "value"]);
280
+ var _f = React.useState(false), isOpenDropdown = _f[0], setIsOpenDropDown = _f[1];
281
+ var _g = React.useState(getFormValue(name, form)), value = _g[0], setValue = _g[1];
282
+ var inputRef = React.useRef(null);
283
+ var selectedLabel = (_b = options === null || options === void 0 ? void 0 : options.find(function (option) {
284
+ return String(option.value) === String(valueProp || value);
285
+ })) === null || _b === void 0 ? void 0 : _b.label;
286
+ var error = (_c = form === null || form === void 0 ? void 0 : form.formState.errors[name]) === null || _c === void 0 ? void 0 : _c.message;
287
+ var control = form === null || form === void 0 ? void 0 : form.control.register(name);
288
+ var handleOpenDropdown = function () {
289
+ var _a, _b, _c, _d;
290
+ if ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
291
+ (_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement.focus();
292
+ }
293
+ setIsOpenDropDown(function (prev) { return !prev; });
294
+ };
295
+ var handleCloseDropdown = function () {
296
+ setIsOpenDropDown(false);
297
+ };
298
+ var handleSelect = function (option) {
299
+ setValue(option.value);
300
+ if (handleChange) {
301
+ handleChange(option.value);
302
+ }
303
+ if (form) {
304
+ control === null || control === void 0 ? void 0 : control.onChange({
305
+ target: { value: option.value, name: name },
306
+ type: "change",
307
+ });
308
+ }
309
+ handleCloseDropdown();
310
+ };
311
+ return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, errorMessage: error }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsx(src$1.HalfArrowIcon, { width: 12, height: 13, css: [
312
+ { transition: "all linear .2s" },
313
+ isOpenDropdown && { transform: "rotate(180deg)" },
314
+ ] })) }, form.register(name))), options.length > 0 && !disabled && (jsxRuntime$1.jsx(InputSelectDropdown, { options: options, inputRef: {
315
+ current: (_e = (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.parentElement,
316
+ }, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: valueProp || value }))] }));
317
+ };
318
+ var Wrapper$6 = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
319
+ var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n"], ["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n"])));
320
+ var templateObject_1$h, templateObject_2$9;
321
+
322
+ var SelectYear = function (_a) {
323
+ var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
324
+ return (jsxRuntime.jsx(InputSelect, __assign({ label: "Year", options: yearOptions }, props)));
325
+ };
326
+
327
+ var monthValues = [
328
+ { value: 0, label: "January" },
329
+ { value: 1, label: "February" },
330
+ { value: 2, label: "March" },
331
+ { value: 3, label: "April" },
332
+ { value: 4, label: "May" },
333
+ { value: 5, label: "June" },
334
+ { value: 6, label: "July" },
335
+ { value: 7, label: "August" },
336
+ { value: 8, label: "September" },
337
+ { value: 9, label: "October" },
338
+ { value: 10, label: "November" },
339
+ { value: 11, label: "December" },
340
+ ];
341
+ var SelectMonth = function (_a) {
342
+ _a.options; var props = __rest(_a, ["options"]);
343
+ return (jsxRuntime.jsx(InputSelect, __assign({ label: "Month", options: monthValues }, props)));
344
+ };
345
+
346
+ var CalendarHeaderWithSelect = function (_a) {
347
+ var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions;
348
+ var year = date.getFullYear();
349
+ var month = date.getMonth();
350
+ 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 }) }))] })) }));
351
+ };
352
+ var Wrapper$5 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"], ["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"])));
353
+ var templateObject_1$g;
354
+
355
+ var CalendarStandardContainer = function (_a) {
356
+ _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
357
+ return jsxRuntime.jsx(DatePickerContainer, __assign({}, props));
358
+ };
359
+ var DatePickerContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.fiftyP, theme.palette.grey.zero);
360
+ var templateObject_1$f;
361
+
362
+ var CalendarStandardHeader = function (_a) {
363
+ var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
364
+ var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
365
+ 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(src$1.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(src$1.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
366
+ };
367
+ var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$e || (templateObject_1$e = __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"])));
368
+ var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
369
+ var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$3 || (templateObject_3$3 = __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"])));
370
+ var templateObject_1$e, templateObject_2$8, templateObject_3$3;
371
+
372
+ var InputForDatepicker = React.forwardRef(function (_a, ref) {
373
+ var onClick = _a.onClick; _a.onBlur; _a.onFocus; var props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
374
+ var onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, mask = props.mask, handleCLick = props.handleCLick, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick"]);
375
+ var handleIconClick = function () {
376
+ if (handleCLick) {
377
+ handleCLick();
378
+ }
379
+ else {
380
+ onClick();
381
+ }
382
+ };
383
+ return (jsxRuntime.jsx(InputMask__default["default"], __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly }, { 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(src$1.CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
384
+ });
385
+ var IconWrapper = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 1;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 1;\n"])));
386
+ var templateObject_1$d;
387
+
388
+ var MonthPickerContainer = function (_a) {
389
+ _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
390
+ return jsxRuntime.jsx(StyledContainer, __assign({}, props));
391
+ };
392
+ var StyledContainer = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid #fbfbfd !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\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 #fbfbfd !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\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"])));
393
+ var templateObject_1$c;
394
+
395
+ var MonthPickerHeader = function (_a) {
396
+ var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
397
+ 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(src$1.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(src$1.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
398
+ };
399
+ var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n &.Mui-disabled {\n opacity: 0;\n }\n"], ["\n &.Mui-disabled {\n opacity: 0;\n }\n"])));
400
+ var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$7 || (templateObject_2$7 = __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"])));
401
+ var templateObject_1$b, templateObject_2$7;
402
+
403
+ var DesktopInputWithMonthPicker = function (_a) {
404
+ var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
405
+ var error = getFormError(name, form);
406
+ var formValue = getFormValue(name, form);
407
+ return (jsxRuntime.jsx(Wrapper$4, { children: jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: form.control, render: function (_a) {
408
+ var field = _a.field;
409
+ 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, error: error, isLabelShrink: Boolean(formValue) }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
410
+ } }) }));
411
+ };
412
+ var Wrapper$4 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
413
+ var templateObject_1$a;
414
+
415
+ var MenuItem = function (_a) {
416
+ var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
417
+ var startScrolling = function () {
418
+ setIsScrolling(true);
419
+ };
420
+ var endScrolling = function () {
421
+ setIsScrolling(false);
422
+ };
423
+ var handleSelect = function () {
424
+ if (!isScrolling) {
425
+ handleClick(index);
426
+ }
427
+ };
428
+ React.useEffect(function () {
429
+ if (active === index) {
430
+ reactScroll.scroller.scrollTo(tab.label, { offset: offset });
431
+ }
432
+ reactScroll.Events.scrollEvent.register("begin", function (to, element) {
433
+ startScrolling();
434
+ if (element) {
435
+ handleClick(Number(element.dataset.index));
436
+ }
437
+ });
438
+ reactScroll.Events.scrollEvent.register("end", function (to, element) {
439
+ setTimeout(endScrolling);
440
+ });
441
+ return function () {
442
+ reactScroll.Events.scrollEvent.remove("begin");
443
+ reactScroll.Events.scrollEvent.remove("end");
444
+ };
445
+ }, []);
446
+ 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 })) }) })));
447
+ };
448
+ var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __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"])));
449
+ var disabledStyles = react.css(templateObject_2$6 || (templateObject_2$6 = __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);
450
+ var templateObject_1$9, templateObject_2$6;
451
+
452
+ var DesktopMenuPanel = function (_a) {
453
+ var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
454
+ 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)); }) })));
455
+ };
456
+ var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])), theme.palette.background.light1);
457
+ var templateObject_1$8;
458
+
459
+ var InputWithForm = React.forwardRef(function (_a, ref) {
460
+ var form = _a.form, name = _a.name, errorProp = _a.error, otherProps = __rest(_a, ["form", "name", "error"]);
461
+ var error = typeof errorProp !== "undefined" && String(errorProp).length > 0
462
+ ? errorProp
463
+ : getFormError(name, form);
464
+ return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ errorMessage: error, inputRef: ref }, form === null || form === void 0 ? void 0 : form.register(name), otherProps)));
465
+ });
466
+
467
+ var InputWithController = React.forwardRef(function (_a, ref) {
468
+ var form = _a.form, name = _a.name, defaultValue = _a.defaultValue, inputProps = __rest(_a, ["form", "name", "defaultValue"]);
469
+ var handleChange = function (e, field) {
470
+ field.onChange(e);
471
+ if (inputProps.onChange) {
472
+ inputProps.onChange(e);
473
+ }
474
+ };
475
+ return (jsxRuntime.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, defaultValue: defaultValue, render: function (_a) {
476
+ var field = _a.field;
477
+ return (jsxRuntime.jsx(InputWithForm, __assign({ ref: ref, name: name, form: form }, inputProps, { onBlur: field.onBlur, onChange: function (e) {
478
+ return handleChange(e, field);
479
+ }, value: field.value || "" })));
480
+ } }));
481
+ });
482
+
483
+ var strengthCoefficients = {
484
+ weak: 0,
485
+ simple: 1,
486
+ medium: 2,
487
+ hard: 3,
488
+ };
489
+ var strengthColors = {
490
+ weak: theme.palette.red.fiftyP,
491
+ simple: theme.palette.brand.main,
492
+ medium: theme.palette.blue.fiftyP,
493
+ hard: theme.palette.green.fiftyP,
494
+ };
495
+ var strengthTexts = {
496
+ weak: "Очень простой",
497
+ simple: "Простой",
498
+ medium: "Средний",
499
+ hard: "Сложный",
500
+ };
501
+ var PassportStrengthBar = function (_a) {
502
+ var strength = _a.strength;
503
+ var color = strength
504
+ ? strengthColors[strength]
505
+ : "";
506
+ var strengthKey = strength
507
+ ? strengthCoefficients[strength]
508
+ : -1;
509
+ 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" }))] })));
510
+ };
511
+ var Wrapper$2 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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"])));
512
+ var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
513
+ var ReliabilityLevel = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __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"])));
514
+ 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"])), theme.palette.grey.fifteenB, function (_a) {
515
+ var color = _a.color;
516
+ return color;
517
+ });
518
+ 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"])));
519
+ var templateObject_1$7, templateObject_2$5, templateObject_3$2, templateObject_4, templateObject_5;
520
+
521
+ var isValidWithMaskExp = /^[^_]+$/;
522
+ var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
523
+ var mediumPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{12,}$/;
524
+ var strongPasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{14,}$/;
525
+
526
+ var InputPassword = function (props) {
527
+ var _a = React.useState(false), showPassword = _a[0], setShowPassword = _a[1];
528
+ var _b = React.useState(null), strength = _b[0], setStrength = _b[1];
529
+ var handleShowChange = function () {
530
+ setShowPassword(function (prev) { return !prev; });
531
+ };
532
+ var checkPasswordStrength = function (value) {
533
+ if (value.length === 0) {
534
+ setStrength(null);
535
+ return;
536
+ }
537
+ if (strongPasswordRegExp.test(value)) {
538
+ setStrength("hard");
539
+ }
540
+ else if (mediumPasswordRegExp.test(value)) {
541
+ setStrength("medium");
542
+ }
543
+ else if (simplePasswordRegExp.test(value)) {
544
+ setStrength("simple");
545
+ }
546
+ else {
547
+ setStrength("weak");
548
+ }
549
+ };
550
+ var handleChange = function (e) {
551
+ var targetValue = e.target.value;
552
+ checkPasswordStrength(targetValue);
553
+ };
554
+ React.useEffect(function () {
555
+ var form = props.form, name = props.name;
556
+ var fieldValue = getFormValue(name, form);
557
+ if (typeof fieldValue === "string") {
558
+ checkPasswordStrength(fieldValue);
559
+ }
560
+ }, []);
561
+ 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(src$1.ClosedEyeIcon, {}) : jsxRuntime.jsx(src$1.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
562
+ };
563
+ var EyeIconWrapper = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __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"])));
564
+ var templateObject_1$6;
565
+
566
+ 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)) })] })); };
567
+ var InputWrapper = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
568
+ var TextAreaWrapper = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
569
+ var templateObject_1$5, templateObject_2$4;
570
+
571
+ var useToggle = function (isModalOpen) {
572
+ if (isModalOpen === void 0) { isModalOpen = false; }
573
+ var _a = React.useState(isModalOpen), isOpen = _a[0], setIsOpen = _a[1];
574
+ var handleClose = function () {
575
+ setIsOpen(false);
576
+ };
577
+ var handleOpen = function () {
578
+ setIsOpen(true);
579
+ };
580
+ return [isOpen, handleOpen, handleClose];
581
+ };
582
+
583
+ var ModalFooter = function (_a) {
584
+ var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
585
+ 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(src$1.CheckIcon, {}) }, otherProps, { children: label }))) })] }));
586
+ };
587
+ var StyledFooter = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __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);
588
+ var ButtonWrapper = styled__default["default"].div(templateObject_2$3 || (templateObject_2$3 = __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"])));
589
+ var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
590
+ var templateObject_1$4, templateObject_2$3, templateObject_3$1;
591
+
592
+ DatePicker.registerLocale("ru", ru__default["default"]);
593
+ var generateYearRange = function (offsetFromCurrent, maxYearCount) {
594
+ var endYear = luxon.DateTime.now().year - offsetFromCurrent;
595
+ return ___default["default"].range(maxYearCount).map(function (elem) {
596
+ var fullYear = endYear - elem;
597
+ return {
598
+ value: fullYear,
599
+ label: fullYear,
600
+ };
601
+ });
602
+ };
603
+ var InputWithDatePicker = function (_a) {
604
+ var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams"]);
605
+ var fieldValue = getFormValue(name, form);
606
+ var error = getFormError(name, form);
607
+ var control = form.control.register(name);
608
+ var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
609
+ var _c = React.useState(luxon.DateTime.fromJSDate(new Date(String(fieldValue))).toFormat("dd.MM.yyyy")), value = _c[0], setValue = _c[1];
610
+ var _d = React.useState(luxon.DateTime.fromFormat(value, "dd.MM.yyyy").toJSDate()), date = _d[0], setDate = _d[1];
611
+ var yearList = generateYearRange(yearParams.min, yearParams.max);
612
+ var handleChange = function (e) {
613
+ var targetValue = e.target.value;
614
+ setValue(targetValue);
615
+ if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
616
+ var jsDate = luxon.DateTime.fromFormat(targetValue, "dd.MM.yyyy").toJSDate();
617
+ setDate(jsDate);
618
+ control === null || control === void 0 ? void 0 : control.onChange({ target: { value: jsDate, name: name }, type: "change" });
619
+ }
620
+ else {
621
+ setDate(null);
622
+ control === null || control === void 0 ? void 0 : control.onChange({ target: { value: null, name: name }, type: "change" });
623
+ }
624
+ };
625
+ var acceptWithDateSelected = function () {
626
+ if (date) {
627
+ setValue(luxon.DateTime.fromJSDate(date).toFormat("dd.MM.yyyy"));
628
+ control === null || control === void 0 ? void 0 : control.onChange({ target: { value: date, name: name }, type: "change" });
629
+ handleModalClose();
630
+ }
631
+ };
632
+ return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, error: error, isLabelShrink: Boolean(fieldValue) }, props)), jsxRuntime$1.jsxs(kuiBasic.Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime$1.jsx(ContentWrapper$1, { children: jsxRuntime$1.jsx(DatePicker__default["default"], { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return jsxRuntime$1.jsx(DayContent, { children: day }); } }) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
633
+ };
634
+ InputWithDatePicker.defaultProps = {
635
+ title: "Дата рождения",
636
+ description: "Выберите год, месяц и число вашего рождения",
637
+ yearParams: { min: 18, max: 120 },
638
+ };
639
+ var ContentWrapper$1 = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
640
+ var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"], ["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"])), theme.palette.background.light1, theme.palette.background.light1);
641
+ var DayContent = styled__default["default"].span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
642
+ var templateObject_1$3, templateObject_2$2, templateObject_3;
643
+
644
+ var shortMonths = [
645
+ "ЯНВ",
646
+ "ФЕВ",
647
+ "МАРТ",
648
+ "АПР",
649
+ "МАЙ",
650
+ "ИЮНЬ",
651
+ "ИЮЛЬ",
652
+ "АВГ",
653
+ "СЕНТ",
654
+ "ОКТ",
655
+ "НОЯБ",
656
+ "ДЕК",
657
+ ];
658
+
659
+ var ruCustom = __assign(__assign({}, ru__default["default"]), { localize: {
660
+ month: function (n) { return shortMonths[n]; },
661
+ ordinalNumber: function () { return ""; },
662
+ era: function () { return ""; },
663
+ quarter: function () { return ""; },
664
+ dayPeriod: function () { return ""; },
665
+ day: function () { return ""; },
666
+ } });
667
+ var MobileInputWithMonthPicker = function (_a) {
668
+ var title = _a.title, name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, props = __rest(_a, ["title", "name", "form", "disabled", "datePickerProps"]);
669
+ var fieldValue = getFormValue(name, form);
670
+ var error = getFormError(name, form);
671
+ var control = form.control.register(name);
672
+ var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
673
+ var _c = React.useState(luxon.DateTime.fromJSDate(new Date(String(fieldValue))).toFormat("MM.yyyy")), value = _c[0], setValue = _c[1];
674
+ var _d = React.useState(luxon.DateTime.fromFormat(value, "MM.yyyy").toJSDate()), date = _d[0], setDate = _d[1];
675
+ var handleChange = function (e) {
676
+ var targetValue = e.target.value;
677
+ setValue(targetValue);
678
+ if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
679
+ var jsDate = luxon.DateTime.fromFormat(targetValue, "MM.yyyy").toJSDate();
680
+ setDate(jsDate);
681
+ control === null || control === void 0 ? void 0 : control.onChange({ target: { value: jsDate, name: name }, type: "change" });
682
+ }
683
+ else {
684
+ setDate(null);
685
+ control === null || control === void 0 ? void 0 : control.onChange({ target: { value: null, name: name }, type: "change" });
686
+ }
687
+ };
688
+ var acceptWithDateSelected = function () {
689
+ if (date) {
690
+ setValue(luxon.DateTime.fromJSDate(date).toFormat("MM.yyyy"));
691
+ }
692
+ else {
693
+ setValue("");
694
+ }
695
+ control === null || control === void 0 ? void 0 : control.onChange({ target: { value: date, name: name }, type: "change" });
696
+ handleModalClose();
697
+ };
698
+ return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, error: error, isLabelShrink: Boolean(fieldValue) }, 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" })] }))] }));
699
+ };
700
+ var Wrapper$1 = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
701
+ var ContentWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"], ["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"])));
702
+ var templateObject_1$2, templateObject_2$1;
703
+
704
+ var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
705
+
706
+ var MobileMenuPanel = function (_a) {
707
+ var tabs = _a.tabs, handleClick = _a.handleClick, variant = _a.variant, other = __rest(_a, ["tabs", "handleClick", "variant"]);
708
+ var swiperRef = React.useRef(null);
709
+ var slideTo = function (index) {
710
+ setTimeout(function () {
711
+ var _a, _b;
712
+ (_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(index);
713
+ }, 16);
714
+ handleClick(index);
715
+ };
716
+ 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)); }) })) })));
717
+ };
718
+ var Wrapper = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"])), theme.palette.background.light1);
719
+ var SlideWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"], ["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"])));
720
+ var templateObject_1$1, templateObject_2;
721
+
722
+ var useWindowWidth = function (time) {
723
+ if (time === void 0) { time = 10; }
724
+ var _a = React.useState(0), width = _a[0], setWidth = _a[1];
725
+ React.useEffect(function () {
726
+ setWidth(window.innerWidth);
727
+ var handleResize = ___default["default"].debounce(function () {
728
+ setWidth(window.innerWidth);
729
+ }, time);
730
+ window.addEventListener("resize", handleResize);
731
+ return function () { return window.removeEventListener("resize", handleResize); };
732
+ }, []);
733
+ return width;
734
+ };
735
+
736
+ var MenuPanel = function (_a) {
737
+ var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, variant = _a.variant;
738
+ var width = useWindowWidth();
739
+ var _b = React__namespace.useState(activeTab), value = _b[0], setValue = _b[1];
740
+ var _c = React__namespace.useState(false), isScrolling = _c[0], setIsScrolling = _c[1];
741
+ var history = reactRouterDom.useHistory();
742
+ var handleClick = function (index) {
743
+ if (paths[index]) {
744
+ setValue(index);
745
+ var pathName = history.location.pathname;
746
+ var currentLocation = "".concat(pathName).concat(history.location.search);
747
+ var newLocation = "".concat(pathName).concat(paths[index]);
748
+ if (currentLocation !== newLocation) {
749
+ history.replace(newLocation);
750
+ }
751
+ }
752
+ };
753
+ React.useEffect(function () {
754
+ setValue(activeTab);
755
+ }, [activeTab]);
756
+ React.useEffect(function () {
757
+ if (typeof activeTab !== "number" && width < 901) {
758
+ reactScroll.animateScroll.scrollToTop();
759
+ }
760
+ }, []);
761
+ if (width === 0) {
762
+ return null;
763
+ }
764
+ return (jsxRuntime$1.jsxs("div", { children: [width > 765 ? (jsxRuntime$1.jsx(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsxRuntime$1.jsx(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsxRuntime$1.jsx(reactScroll.Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] }));
765
+ };
766
+ MenuPanel.defaultProps = {
767
+ variant: "grey",
768
+ };
769
+ var fullHeightStyles = react.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
770
+ var templateObject_1;
771
+
772
+ var Switch = function (_a) {
773
+ var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
774
+ return (jsxRuntime$1.jsx(reactHookForm.Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
775
+ var field = _a.field;
776
+ return (jsxRuntime$1.jsx(kuiBasic.Switch, __assign({ checked: Boolean(field.value), onChange: field.onChange, "data-testid": name }, props)));
777
+ } }));
778
+ };
779
+
780
+ exports.Avatar = Avatar;
781
+ exports.ButtonTab = ButtonTab;
782
+ exports.ButtonsPanel = ButtonsPanel;
783
+ exports.CalendarHeaderWithSelect = CalendarHeaderWithSelect;
784
+ exports.CalendarStandardContainer = CalendarStandardContainer;
785
+ exports.CalendarStandardHeader = CalendarStandardHeader;
786
+ exports.DesktopInputWithMonthPicker = DesktopInputWithMonthPicker;
787
+ exports.DesktopMenuPanel = DesktopMenuPanel;
788
+ exports.InputDropdown = InputDropdown;
789
+ exports.InputForDatepicker = InputForDatepicker;
790
+ exports.InputPassword = InputPassword;
791
+ exports.InputSelect = InputSelect;
792
+ exports.InputSelectDropdown = InputSelectDropdown;
793
+ exports.InputTextAreaMobile = InputTextAreaMobile;
794
+ exports.InputWithController = InputWithController;
795
+ exports.InputWithDatePicker = InputWithDatePicker;
796
+ exports.InputWithForm = InputWithForm;
797
+ exports.InputWithMonthPicker = InputWithMonthPicker;
798
+ exports.MenuItem = MenuItem;
799
+ exports.MenuPanel = MenuPanel;
800
+ exports.MobileInputWithMonthPicker = MobileInputWithMonthPicker;
801
+ exports.MobileMenuPanel = MobileMenuPanel;
802
+ exports.MonthPickerContainer = MonthPickerContainer;
803
+ exports.MonthPickerHeader = MonthPickerHeader;
804
+ exports.PassportStrengthBar = PassportStrengthBar;
805
+ exports.SelectMonth = SelectMonth;
806
+ exports.SelectYear = SelectYear;
807
+ exports.Switch = Switch;
808
+ exports.UndefinedAvatar = UndefinedAvatar;
3
809
  //# sourceMappingURL=index.js.map