@typeolymp/ui-components 1.9.9 → 1.9.11
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/build/components/atoms/Button/index.d.ts +1 -0
- package/build/components/atoms/Button/styles.d.ts +1 -0
- package/build/components/atoms/Range/index.d.ts +13 -0
- package/build/components/atoms/Range/stories.d.ts +7 -0
- package/build/components/atoms/Range/styles.d.ts +1 -0
- package/build/components/molecules/RangeField/index.d.ts +12 -0
- package/build/components/molecules/RangeField/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +5 -1
- package/build/components/organisms/Form/stories.d.ts +1 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +242 -134
- package/build/index.es.js.map +1 -1
- package/build/index.js +243 -134
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React, { forwardRef, useRef, useState, useEffect, createElement, useImperativeHandle } from 'react';
|
|
3
|
-
import styled, { keyframes } from 'styled-components';
|
|
4
3
|
import BeatLoader from 'react-spinners/BeatLoader';
|
|
4
|
+
import styled, { keyframes } from 'styled-components';
|
|
5
5
|
import parse from 'html-react-parser';
|
|
6
6
|
|
|
7
7
|
var theme = {
|
|
@@ -174,6 +174,18 @@ var __assign = function() {
|
|
|
174
174
|
return __assign.apply(this, arguments);
|
|
175
175
|
};
|
|
176
176
|
|
|
177
|
+
function __rest(s, e) {
|
|
178
|
+
var t = {};
|
|
179
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
180
|
+
t[p] = s[p];
|
|
181
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
182
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
183
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
184
|
+
t[p[i]] = s[p[i]];
|
|
185
|
+
}
|
|
186
|
+
return t;
|
|
187
|
+
}
|
|
188
|
+
|
|
177
189
|
function __spreadArray(to, from, pack) {
|
|
178
190
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
179
191
|
if (ar || !(i in from)) {
|
|
@@ -189,7 +201,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
189
201
|
return cooked;
|
|
190
202
|
}
|
|
191
203
|
|
|
192
|
-
var StyledButton = styled.button(templateObject_1$
|
|
204
|
+
var StyledButton = styled.button(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
193
205
|
var fluid = _a.fluid;
|
|
194
206
|
return (fluid ? "100%" : "fit-content");
|
|
195
207
|
}, function (_a) {
|
|
@@ -239,7 +251,7 @@ var StyledButton = styled.button(templateObject_1$L || (templateObject_1$L = __m
|
|
|
239
251
|
? theme.button.medium.heightActive
|
|
240
252
|
: theme.button[size].heightActive;
|
|
241
253
|
});
|
|
242
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
254
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
243
255
|
var size = _a.size;
|
|
244
256
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
245
257
|
});
|
|
@@ -259,20 +271,50 @@ var GhostButton = styled(StyledButton)(templateObject_3$a || (templateObject_3$a
|
|
|
259
271
|
? theme.button.medium.marginTopActive
|
|
260
272
|
: theme.button[size].marginTopActive;
|
|
261
273
|
});
|
|
262
|
-
var
|
|
274
|
+
var LoaderWrapper = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
275
|
+
var width = _a.width;
|
|
276
|
+
return "".concat(width, "px");
|
|
277
|
+
}, function (_a) {
|
|
278
|
+
var size = _a.size;
|
|
279
|
+
return (size === "small" ? "3px" : "");
|
|
280
|
+
});
|
|
281
|
+
var templateObject_1$N, templateObject_2$t, templateObject_3$a, templateObject_4$7;
|
|
263
282
|
|
|
264
283
|
var Button = forwardRef(function (_a, ref) {
|
|
265
|
-
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor,
|
|
284
|
+
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
285
|
+
var buttonRef = useRef(null);
|
|
286
|
+
var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
|
|
266
287
|
var as = href || asAnchor ? "a" : "button";
|
|
288
|
+
var onClick = function () {
|
|
289
|
+
if (props.onClickAsync) {
|
|
290
|
+
setIsLoading(true);
|
|
291
|
+
new Promise(function (resolve) {
|
|
292
|
+
props.onClickAsync(resolve);
|
|
293
|
+
}).then(function () { return setIsLoading(false); });
|
|
294
|
+
}
|
|
295
|
+
else if (props.onClick) {
|
|
296
|
+
props.onClick();
|
|
297
|
+
}
|
|
298
|
+
};
|
|
299
|
+
var Loader = function (_a) {
|
|
300
|
+
var _b;
|
|
301
|
+
var dark = _a.dark;
|
|
302
|
+
var width = ((_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) - 40;
|
|
303
|
+
if (dark)
|
|
304
|
+
width = width + 4;
|
|
305
|
+
return (jsx(LoaderWrapper, __assign({ width: width, size: size }, { children: jsx(BeatLoader, { size: 10, color: dark
|
|
306
|
+
? theme.colors.lightGray.darker
|
|
307
|
+
: theme.colors.lightGray.light, speedMultiplier: 0.5 }) })));
|
|
308
|
+
};
|
|
267
309
|
if (disabled) {
|
|
268
|
-
return (jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref }, { children: jsx("span", { children: label }) })));
|
|
310
|
+
return (jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsx("span", { children: label }) })));
|
|
269
311
|
}
|
|
270
312
|
if (color === "white")
|
|
271
|
-
return (jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsx("span", { children: label }) })));
|
|
272
|
-
return (jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsx("span", { children: label }) })));
|
|
313
|
+
return (jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsx(Loader, { dark: true }) : jsx("span", { children: label }) })));
|
|
314
|
+
return (jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsx(Loader, {}) : jsx("span", { children: label }) })));
|
|
273
315
|
});
|
|
274
316
|
|
|
275
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
317
|
+
var StyledCheckbox = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
276
318
|
var checked = _a.checked, disabled = _a.disabled;
|
|
277
319
|
if (disabled)
|
|
278
320
|
return theme.colors.lightGray.darker;
|
|
@@ -293,7 +335,7 @@ var StyledCheckbox = styled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
293
335
|
return theme.colors.green.base;
|
|
294
336
|
return theme.colors.lightGray.darker;
|
|
295
337
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
296
|
-
var templateObject_1$
|
|
338
|
+
var templateObject_1$M;
|
|
297
339
|
|
|
298
340
|
var Checkbox = function (props) {
|
|
299
341
|
var _a;
|
|
@@ -326,7 +368,7 @@ var Checkbox = function (props) {
|
|
|
326
368
|
return (jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
327
369
|
};
|
|
328
370
|
|
|
329
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
371
|
+
var Wrapper$9 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
330
372
|
var size = _a.size;
|
|
331
373
|
switch (size) {
|
|
332
374
|
case "small":
|
|
@@ -349,7 +391,7 @@ var Wrapper$9 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
349
391
|
return "27px";
|
|
350
392
|
}
|
|
351
393
|
});
|
|
352
|
-
var templateObject_1$
|
|
394
|
+
var templateObject_1$L;
|
|
353
395
|
|
|
354
396
|
var parsers = {};
|
|
355
397
|
|
|
@@ -397,7 +439,7 @@ var flags = {
|
|
|
397
439
|
};
|
|
398
440
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
399
441
|
|
|
400
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
442
|
+
var StyledHeading = styled.span(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
401
443
|
var type = _a.type;
|
|
402
444
|
return theme.heading[type].fontSize;
|
|
403
445
|
}, function (_a) {
|
|
@@ -421,14 +463,14 @@ var StyledHeading = styled.span(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
421
463
|
var align = _a.align;
|
|
422
464
|
return align;
|
|
423
465
|
});
|
|
424
|
-
var templateObject_1$
|
|
466
|
+
var templateObject_1$K;
|
|
425
467
|
|
|
426
468
|
var Heading = function (props) {
|
|
427
469
|
var element = !!props.as ? props.as : props.type;
|
|
428
470
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children })));
|
|
429
471
|
};
|
|
430
472
|
|
|
431
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
473
|
+
var Wrapper$8 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
432
474
|
var size = _a.size;
|
|
433
475
|
return theme.icon[size] || theme.icon.medium;
|
|
434
476
|
}, function (_a) {
|
|
@@ -458,7 +500,7 @@ var Wrapper$8 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTem
|
|
|
458
500
|
return theme.colors.lightGray.light;
|
|
459
501
|
}
|
|
460
502
|
});
|
|
461
|
-
var templateObject_1$
|
|
503
|
+
var templateObject_1$J;
|
|
462
504
|
|
|
463
505
|
var icons = {
|
|
464
506
|
check: (jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -487,7 +529,7 @@ var icons = {
|
|
|
487
529
|
};
|
|
488
530
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
489
531
|
|
|
490
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
532
|
+
var Wrapper$7 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
491
533
|
var size = _a.size;
|
|
492
534
|
switch (size) {
|
|
493
535
|
default:
|
|
@@ -499,7 +541,7 @@ var Wrapper$7 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTem
|
|
|
499
541
|
return "118px";
|
|
500
542
|
}
|
|
501
543
|
});
|
|
502
|
-
var templateObject_1$
|
|
544
|
+
var templateObject_1$I;
|
|
503
545
|
|
|
504
546
|
var illustrations = {
|
|
505
547
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -515,14 +557,14 @@ var illustrations = {
|
|
|
515
557
|
};
|
|
516
558
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }))); };
|
|
517
559
|
|
|
518
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
560
|
+
var InputIconWrapper = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
519
561
|
var isChanged = _a.isChanged;
|
|
520
562
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
521
563
|
}, function (_a) {
|
|
522
564
|
var disabled = _a.disabled;
|
|
523
565
|
return (disabled ? "not-allowed" : "pointer");
|
|
524
566
|
});
|
|
525
|
-
var StyledInput = styled.input(templateObject_2$
|
|
567
|
+
var StyledInput = styled.input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
526
568
|
var disabled = _a.disabled;
|
|
527
569
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
528
570
|
}, function (_a) {
|
|
@@ -535,7 +577,7 @@ var StyledInput = styled.input(templateObject_2$r || (templateObject_2$r = __mak
|
|
|
535
577
|
var disabled = _a.disabled;
|
|
536
578
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
537
579
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
538
|
-
var templateObject_1$
|
|
580
|
+
var templateObject_1$H, templateObject_2$s;
|
|
539
581
|
|
|
540
582
|
var PasswordInput = function (props) {
|
|
541
583
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -715,7 +757,7 @@ Input.Date = DateInput;
|
|
|
715
757
|
|
|
716
758
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxs("g", __assign({ fill: "#23292f" }, { children: [jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
717
759
|
|
|
718
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
760
|
+
var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
719
761
|
var size = _a.size;
|
|
720
762
|
switch (size) {
|
|
721
763
|
default:
|
|
@@ -725,7 +767,7 @@ var Wrapper$6 = styled.div(templateObject_1$E || (templateObject_1$E = __makeTem
|
|
|
725
767
|
return "116px";
|
|
726
768
|
}
|
|
727
769
|
});
|
|
728
|
-
var templateObject_1$
|
|
770
|
+
var templateObject_1$G;
|
|
729
771
|
|
|
730
772
|
var medals = {
|
|
731
773
|
small: {
|
|
@@ -741,11 +783,11 @@ var medals = {
|
|
|
741
783
|
};
|
|
742
784
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
743
785
|
|
|
744
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
786
|
+
var Wrapper$5 = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"])), function (_a) {
|
|
745
787
|
var disabled = _a.disabled;
|
|
746
788
|
return (disabled ? "49.5px" : "");
|
|
747
789
|
});
|
|
748
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
790
|
+
var StyledInputNumber = styled.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
749
791
|
var disabled = _a.disabled;
|
|
750
792
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
751
793
|
}, function (_a) {
|
|
@@ -758,7 +800,7 @@ var StyledInputNumber = styled.input(templateObject_2$q || (templateObject_2$q =
|
|
|
758
800
|
var disabled = _a.disabled;
|
|
759
801
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
760
802
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
761
|
-
var templateObject_1$
|
|
803
|
+
var templateObject_1$F, templateObject_2$r;
|
|
762
804
|
|
|
763
805
|
var Number = function (props) {
|
|
764
806
|
var inputRef = useRef(null);
|
|
@@ -795,7 +837,7 @@ var Number = function (props) {
|
|
|
795
837
|
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
796
838
|
};
|
|
797
839
|
|
|
798
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
840
|
+
var StyledParagraph = styled.p(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
799
841
|
var size = _a.size;
|
|
800
842
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
801
843
|
}, function (_a) {
|
|
@@ -827,11 +869,11 @@ var StyledParagraph = styled.p(templateObject_1$C || (templateObject_1$C = __mak
|
|
|
827
869
|
var align = _a.align;
|
|
828
870
|
return align;
|
|
829
871
|
});
|
|
830
|
-
var templateObject_1$
|
|
872
|
+
var templateObject_1$E;
|
|
831
873
|
|
|
832
874
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }))); };
|
|
833
875
|
|
|
834
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
876
|
+
var StyledRadio = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
835
877
|
var checked = _a.checked, disabled = _a.disabled;
|
|
836
878
|
if (disabled)
|
|
837
879
|
return theme.colors.lightGray.darker;
|
|
@@ -859,7 +901,7 @@ var StyledRadio = styled.div(templateObject_1$B || (templateObject_1$B = __makeT
|
|
|
859
901
|
return theme.colors.green.base;
|
|
860
902
|
return "";
|
|
861
903
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
862
|
-
var templateObject_1$
|
|
904
|
+
var templateObject_1$D;
|
|
863
905
|
|
|
864
906
|
var Radio = function (props) {
|
|
865
907
|
var _a, _b;
|
|
@@ -891,11 +933,50 @@ var Radio = function (props) {
|
|
|
891
933
|
return (jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
892
934
|
};
|
|
893
935
|
|
|
894
|
-
var
|
|
936
|
+
var StyledRange = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
|
|
937
|
+
var value = _a.value, disabled = _a.disabled;
|
|
938
|
+
return "linear-gradient(90deg,\n ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " 100%\n )");
|
|
939
|
+
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
940
|
+
var disabled = _a.disabled;
|
|
941
|
+
return "7px solid ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base);
|
|
942
|
+
}, function (_a) {
|
|
943
|
+
var disabled = _a.disabled;
|
|
944
|
+
return disabled ? "not-allowed" : "pointer";
|
|
945
|
+
});
|
|
946
|
+
var templateObject_1$C;
|
|
947
|
+
|
|
948
|
+
var Range = function (props) {
|
|
949
|
+
var _a;
|
|
950
|
+
var rangeRef = useRef(null);
|
|
951
|
+
var _b = useState(props.defaultValue || 0), value = _b[0], setValue = _b[1];
|
|
952
|
+
useEffect(function () {
|
|
953
|
+
if (props.autoFocus)
|
|
954
|
+
rangeRef.current.focus();
|
|
955
|
+
}, []);
|
|
956
|
+
useEffect(function () {
|
|
957
|
+
var value = parseInt(rangeRef.current.value);
|
|
958
|
+
setValue(value);
|
|
959
|
+
}, [(_a = rangeRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
960
|
+
useEffect(function () {
|
|
961
|
+
rangeRef.current.value = "".concat(value);
|
|
962
|
+
}, [value]);
|
|
963
|
+
var onChange = function () {
|
|
964
|
+
if (!props.disabled) {
|
|
965
|
+
var value_1 = parseInt(rangeRef.current.value);
|
|
966
|
+
if (!!props.onChange) {
|
|
967
|
+
props.onChange(value_1);
|
|
968
|
+
setValue(value_1);
|
|
969
|
+
}
|
|
970
|
+
}
|
|
971
|
+
};
|
|
972
|
+
return (jsx(StyledRange, __assign({ value: value, disabled: props.disabled }, { children: jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
973
|
+
};
|
|
974
|
+
|
|
975
|
+
var Wrapper$4 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
895
976
|
var disabled = _a.disabled;
|
|
896
977
|
return (disabled ? "not-allowed" : "pointer");
|
|
897
978
|
});
|
|
898
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
979
|
+
var StyledSelect = styled.select(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
899
980
|
var disabled = _a.disabled;
|
|
900
981
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
901
982
|
}, function (_a) {
|
|
@@ -908,7 +989,7 @@ var StyledSelect = styled.select(templateObject_2$p || (templateObject_2$p = __m
|
|
|
908
989
|
var isChanged = _a.isChanged;
|
|
909
990
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
910
991
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
911
|
-
var templateObject_1$
|
|
992
|
+
var templateObject_1$B, templateObject_2$q;
|
|
912
993
|
|
|
913
994
|
var Select = function (props) {
|
|
914
995
|
var _a;
|
|
@@ -930,18 +1011,18 @@ var Select = function (props) {
|
|
|
930
1011
|
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
931
1012
|
};
|
|
932
1013
|
|
|
933
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
1014
|
+
var StyledSpacer = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
934
1015
|
var horizontal = _a.horizontal;
|
|
935
1016
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
936
1017
|
}, function (_a) {
|
|
937
1018
|
var vertical = _a.vertical;
|
|
938
1019
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
939
1020
|
});
|
|
940
|
-
var templateObject_1$
|
|
1021
|
+
var templateObject_1$A;
|
|
941
1022
|
|
|
942
1023
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props))); };
|
|
943
1024
|
|
|
944
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
1025
|
+
var StyledSubheading = styled.p(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
945
1026
|
var size = _a.size;
|
|
946
1027
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
947
1028
|
}, function (_a) {
|
|
@@ -969,18 +1050,18 @@ var StyledSubheading = styled.p(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
969
1050
|
return theme.colors.darkGray.dark;
|
|
970
1051
|
}
|
|
971
1052
|
});
|
|
972
|
-
var templateObject_1$
|
|
1053
|
+
var templateObject_1$z;
|
|
973
1054
|
|
|
974
1055
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }))); };
|
|
975
1056
|
|
|
976
|
-
var Container$
|
|
977
|
-
var templateObject_1$
|
|
1057
|
+
var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
1058
|
+
var templateObject_1$y;
|
|
978
1059
|
|
|
979
1060
|
var Tag = function (props) {
|
|
980
|
-
return jsx(Container$
|
|
1061
|
+
return jsx(Container$j, { children: props.children });
|
|
981
1062
|
};
|
|
982
1063
|
|
|
983
|
-
var Container$
|
|
1064
|
+
var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
984
1065
|
var disabled = _a.disabled;
|
|
985
1066
|
return (disabled ? "not-allowed" : "pointer");
|
|
986
1067
|
}, function (_a) {
|
|
@@ -998,7 +1079,7 @@ var Container$h = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
|
|
|
998
1079
|
var disabled = _a.disabled;
|
|
999
1080
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
1000
1081
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
1001
|
-
var templateObject_1$
|
|
1082
|
+
var templateObject_1$x;
|
|
1002
1083
|
|
|
1003
1084
|
var Toggle = function (props) {
|
|
1004
1085
|
var _a;
|
|
@@ -1026,10 +1107,10 @@ var Toggle = function (props) {
|
|
|
1026
1107
|
props.onChange(newValue);
|
|
1027
1108
|
}
|
|
1028
1109
|
};
|
|
1029
|
-
return (jsx(Container$
|
|
1110
|
+
return (jsx(Container$i, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
1030
1111
|
};
|
|
1031
1112
|
|
|
1032
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
1113
|
+
var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
1033
1114
|
var level = _a.level;
|
|
1034
1115
|
switch (level) {
|
|
1035
1116
|
case 1:
|
|
@@ -1040,7 +1121,7 @@ var Wrapper$3 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTem
|
|
|
1040
1121
|
return "70px";
|
|
1041
1122
|
}
|
|
1042
1123
|
});
|
|
1043
|
-
var templateObject_1$
|
|
1124
|
+
var templateObject_1$w;
|
|
1044
1125
|
|
|
1045
1126
|
var trophies = {
|
|
1046
1127
|
1: {
|
|
@@ -1076,7 +1157,7 @@ var trophies = {
|
|
|
1076
1157
|
};
|
|
1077
1158
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
1078
1159
|
|
|
1079
|
-
var Container$
|
|
1160
|
+
var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
1080
1161
|
var type = _a.type;
|
|
1081
1162
|
switch (type) {
|
|
1082
1163
|
case "success":
|
|
@@ -1093,11 +1174,11 @@ var Container$g = styled.div(templateObject_1$u || (templateObject_1$u = __makeT
|
|
|
1093
1174
|
return theme.colors.red.base;
|
|
1094
1175
|
}
|
|
1095
1176
|
});
|
|
1096
|
-
var templateObject_1$
|
|
1177
|
+
var templateObject_1$v;
|
|
1097
1178
|
|
|
1098
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
1179
|
+
var Alert = function (props) { return (jsxs(Container$h, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx(Spacer, { horizontal: 10 }), jsx(Paragraph, { children: props.message })] }))); };
|
|
1099
1180
|
|
|
1100
|
-
var StyledCard = styled.div(templateObject_1$
|
|
1181
|
+
var StyledCard = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
1101
1182
|
var ellipse = _a.ellipse;
|
|
1102
1183
|
return ellipse
|
|
1103
1184
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1106,23 +1187,23 @@ var StyledCard = styled.div(templateObject_1$t || (templateObject_1$t = __makeTe
|
|
|
1106
1187
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1107
1188
|
: "";
|
|
1108
1189
|
});
|
|
1109
|
-
var Ellipse = styled.div(templateObject_2$
|
|
1190
|
+
var Ellipse = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
1110
1191
|
var color = _a.color;
|
|
1111
1192
|
return color ? theme.colors[color].light : "";
|
|
1112
1193
|
});
|
|
1113
1194
|
var Content = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
1114
|
-
var templateObject_1$
|
|
1195
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9;
|
|
1115
1196
|
|
|
1116
1197
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }), jsx(Content, { children: props.children })] }))); };
|
|
1117
1198
|
|
|
1118
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
1119
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
1199
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1200
|
+
var CheckboxContainer = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1120
1201
|
var CheckboxWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
1121
|
-
var Label$
|
|
1202
|
+
var Label$9 = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
1122
1203
|
var weight = _a.weight;
|
|
1123
1204
|
return weight || 500;
|
|
1124
1205
|
}, theme.colors.darkGray.base);
|
|
1125
|
-
var templateObject_1$
|
|
1206
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$8, templateObject_4$6;
|
|
1126
1207
|
|
|
1127
1208
|
var Checkboxes = function (props) {
|
|
1128
1209
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1139,18 +1220,18 @@ var Checkboxes = function (props) {
|
|
|
1139
1220
|
if (props.onBlur)
|
|
1140
1221
|
props.onBlur(props.name);
|
|
1141
1222
|
};
|
|
1142
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
1223
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$9, __assign({ as: "legend" }, { children: props.legend })), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1143
1224
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1144
|
-
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsx(Label$
|
|
1225
|
+
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsx(Label$9, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1145
1226
|
}) })] }));
|
|
1146
1227
|
};
|
|
1147
1228
|
|
|
1148
|
-
var Container$
|
|
1149
|
-
var Item = styled.div(templateObject_2$
|
|
1229
|
+
var Container$g = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
1230
|
+
var Item = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
1150
1231
|
var isOpen = _a.isOpen;
|
|
1151
1232
|
return (isOpen ? "" : "none");
|
|
1152
1233
|
}, theme.colors.lightGray.darker);
|
|
1153
|
-
var templateObject_1$
|
|
1234
|
+
var templateObject_1$s, templateObject_2$n;
|
|
1154
1235
|
|
|
1155
1236
|
var Collapse = function (props) {
|
|
1156
1237
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -1162,15 +1243,15 @@ var Collapse = function (props) {
|
|
|
1162
1243
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1163
1244
|
}
|
|
1164
1245
|
};
|
|
1165
|
-
return (jsx(Container$
|
|
1246
|
+
return (jsx(Container$g, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1166
1247
|
var isOpen = openItems.includes(index);
|
|
1167
1248
|
return (jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h6" }, { children: item.title })), jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
1168
1249
|
}) })));
|
|
1169
1250
|
};
|
|
1170
1251
|
|
|
1171
|
-
var Container$
|
|
1172
|
-
var Label$
|
|
1173
|
-
var templateObject_1$
|
|
1252
|
+
var Container$f = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1253
|
+
var Label$8 = styled(StyledParagraph)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1254
|
+
var templateObject_1$r, templateObject_2$m;
|
|
1174
1255
|
|
|
1175
1256
|
var DateInputField = function (props) {
|
|
1176
1257
|
var onChange = function (value) {
|
|
@@ -1181,12 +1262,12 @@ var DateInputField = function (props) {
|
|
|
1181
1262
|
if (props.onBlur)
|
|
1182
1263
|
props.onBlur(props.name);
|
|
1183
1264
|
};
|
|
1184
|
-
return (jsxs(Container$
|
|
1265
|
+
return (jsxs(Container$f, { children: [jsx(Label$8, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1185
1266
|
};
|
|
1186
1267
|
|
|
1187
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
1188
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
1189
|
-
var templateObject_1$
|
|
1268
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
|
|
1269
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
|
|
1270
|
+
var templateObject_1$q, templateObject_2$l;
|
|
1190
1271
|
|
|
1191
1272
|
var IconButton = function (props) {
|
|
1192
1273
|
if (props.color === "white")
|
|
@@ -1194,9 +1275,9 @@ var IconButton = function (props) {
|
|
|
1194
1275
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
1195
1276
|
};
|
|
1196
1277
|
|
|
1197
|
-
var Container$
|
|
1198
|
-
var Label$
|
|
1199
|
-
var templateObject_1$
|
|
1278
|
+
var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1279
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1280
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1200
1281
|
|
|
1201
1282
|
var InputField = function (props) {
|
|
1202
1283
|
var onChange = function (value) {
|
|
@@ -1207,10 +1288,10 @@ var InputField = function (props) {
|
|
|
1207
1288
|
if (props.onBlur)
|
|
1208
1289
|
props.onBlur(props.name);
|
|
1209
1290
|
};
|
|
1210
|
-
return (jsxs(Container$
|
|
1291
|
+
return (jsxs(Container$e, { children: [jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1211
1292
|
};
|
|
1212
1293
|
|
|
1213
|
-
var Container$
|
|
1294
|
+
var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
1214
1295
|
var status = _a.status, color = _a.color;
|
|
1215
1296
|
switch (status) {
|
|
1216
1297
|
case "passed":
|
|
@@ -1254,23 +1335,23 @@ var Container$c = styled.div(templateObject_1$n || (templateObject_1$n = __makeT
|
|
|
1254
1335
|
return theme.colors.darkGray.light;
|
|
1255
1336
|
}
|
|
1256
1337
|
});
|
|
1257
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
1258
|
-
var templateObject_1$
|
|
1338
|
+
var CheckIconWrapper = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
1339
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1259
1340
|
|
|
1260
|
-
var Key$1 = function (props) { return (jsxs(Container$
|
|
1341
|
+
var Key$1 = function (props) { return (jsxs(Container$d, __assign({}, props, { children: [props.status === "passed" && (jsx(CheckIconWrapper, { children: jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx("svg", __assign({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
1261
1342
|
marginTop: "13px",
|
|
1262
1343
|
transform: "scale(2)",
|
|
1263
1344
|
} }, { children: jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsx(Heading, __assign({ type: "h1" }, { children: props.char })))] }))); };
|
|
1264
1345
|
|
|
1265
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
1346
|
+
var Wrapper$2 = styled.a(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
1266
1347
|
var chevron = _a.chevron;
|
|
1267
1348
|
return (chevron === "left" ? "4px" : "");
|
|
1268
1349
|
}, function (_a) {
|
|
1269
1350
|
var chevron = _a.chevron;
|
|
1270
1351
|
return (chevron === "right" ? "4px" : "");
|
|
1271
1352
|
});
|
|
1272
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
1273
|
-
var templateObject_1$
|
|
1353
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
1354
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1274
1355
|
|
|
1275
1356
|
var Link = function (props) {
|
|
1276
1357
|
var onClick = function (e) {
|
|
@@ -1282,15 +1363,15 @@ var Link = function (props) {
|
|
|
1282
1363
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }), jsx(StyledLink, __assign({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
1283
1364
|
};
|
|
1284
1365
|
|
|
1285
|
-
var Container$
|
|
1366
|
+
var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
1286
1367
|
var text = _a.text;
|
|
1287
1368
|
return (text ? "20px" : "");
|
|
1288
1369
|
});
|
|
1289
|
-
var templateObject_1$
|
|
1370
|
+
var templateObject_1$m;
|
|
1290
1371
|
|
|
1291
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1372
|
+
var Loading = function (props) { return (jsxs(Container$c, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
1292
1373
|
|
|
1293
|
-
var Container$
|
|
1374
|
+
var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
|
|
1294
1375
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1295
1376
|
if (dropdownIsVisible) {
|
|
1296
1377
|
switch (color) {
|
|
@@ -1303,7 +1384,7 @@ var Container$a = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
1303
1384
|
}
|
|
1304
1385
|
return "";
|
|
1305
1386
|
});
|
|
1306
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
1387
|
+
var SelectedLocaleWrapper = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
1307
1388
|
var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
1308
1389
|
var color = _a.color;
|
|
1309
1390
|
switch (color) {
|
|
@@ -1315,7 +1396,7 @@ var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = _
|
|
|
1315
1396
|
}
|
|
1316
1397
|
});
|
|
1317
1398
|
var Locale = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
1318
|
-
var templateObject_1$
|
|
1399
|
+
var templateObject_1$l, templateObject_2$h, templateObject_3$7, templateObject_4$5;
|
|
1319
1400
|
|
|
1320
1401
|
var LocaleSelect = function (props) {
|
|
1321
1402
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1324,22 +1405,22 @@ var LocaleSelect = function (props) {
|
|
|
1324
1405
|
setLocale(locale);
|
|
1325
1406
|
props.onChange(locale);
|
|
1326
1407
|
};
|
|
1327
|
-
return (jsxs(Container$
|
|
1408
|
+
return (jsxs(Container$b, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }), jsx(Spacer, { horizontal: 10 }), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1328
1409
|
.filter(function (l) { return l !== locale; })
|
|
1329
1410
|
.map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }), jsx(Spacer, { horizontal: 10 }), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
1330
1411
|
};
|
|
1331
1412
|
|
|
1332
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1333
|
-
var templateObject_1$
|
|
1413
|
+
var Wrapper$1 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
1414
|
+
var templateObject_1$k;
|
|
1334
1415
|
|
|
1335
1416
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }), jsx(Spacer, { horizontal: 5 }), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx(Medal, { type: "silver" }), jsx(Spacer, { horizontal: 5 }), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx(Medal, { type: "bronze" }), jsx(Spacer, { horizontal: 5 }), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
1336
1417
|
|
|
1337
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1418
|
+
var NotificationContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
|
|
1338
1419
|
var contrast = _a.contrast;
|
|
1339
1420
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1340
1421
|
});
|
|
1341
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
1342
|
-
var templateObject_1$
|
|
1422
|
+
var ButtonContainer = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
|
|
1423
|
+
var templateObject_1$j, templateObject_2$g;
|
|
1343
1424
|
|
|
1344
1425
|
var Notification = function (props) {
|
|
1345
1426
|
if (!props.isVisible)
|
|
@@ -1347,9 +1428,9 @@ var Notification = function (props) {
|
|
|
1347
1428
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
1348
1429
|
};
|
|
1349
1430
|
|
|
1350
|
-
var Container$
|
|
1351
|
-
var Label$
|
|
1352
|
-
var templateObject_1$
|
|
1431
|
+
var Container$a = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1432
|
+
var Label$6 = styled(StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1433
|
+
var templateObject_1$i, templateObject_2$f;
|
|
1353
1434
|
|
|
1354
1435
|
var NumberField = function (props) {
|
|
1355
1436
|
var onChange = function (value) {
|
|
@@ -1360,7 +1441,7 @@ var NumberField = function (props) {
|
|
|
1360
1441
|
if (props.onBlur)
|
|
1361
1442
|
props.onBlur(props.name);
|
|
1362
1443
|
};
|
|
1363
|
-
return (jsxs(Container$
|
|
1444
|
+
return (jsxs(Container$a, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Number, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1364
1445
|
};
|
|
1365
1446
|
|
|
1366
1447
|
var expressions = {};
|
|
@@ -1411,15 +1492,15 @@ var isStrongPassword = function (password) {
|
|
|
1411
1492
|
exports.isStrongPassword = isStrongPassword;
|
|
1412
1493
|
}(expressions));
|
|
1413
1494
|
|
|
1414
|
-
var Container$
|
|
1415
|
-
var Label$
|
|
1495
|
+
var Container$9 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1496
|
+
var Label$5 = styled(StyledParagraph)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1416
1497
|
var HelperContainer = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
1417
1498
|
var fadeIn = keyframes(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
1418
1499
|
var Helper = styled(StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
1419
1500
|
var isOk = _a.isOk;
|
|
1420
1501
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1421
1502
|
}, fadeIn);
|
|
1422
|
-
var templateObject_1$
|
|
1503
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$6, templateObject_4$4, templateObject_5$2;
|
|
1423
1504
|
|
|
1424
1505
|
var translations = {
|
|
1425
1506
|
"nl-NL": {
|
|
@@ -1476,7 +1557,7 @@ var PasswordInputField = function (props) {
|
|
|
1476
1557
|
if (props.onBlur)
|
|
1477
1558
|
props.onBlur(props.name);
|
|
1478
1559
|
};
|
|
1479
|
-
return (jsxs(Container$
|
|
1560
|
+
return (jsxs(Container$9, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
1480
1561
|
};
|
|
1481
1562
|
|
|
1482
1563
|
var generateRandomString = function (length) {
|
|
@@ -1489,7 +1570,7 @@ var generateRandomString = function (length) {
|
|
|
1489
1570
|
return string;
|
|
1490
1571
|
};
|
|
1491
1572
|
|
|
1492
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1573
|
+
var PopupContainer = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
1493
1574
|
var isVisible = _a.isVisible;
|
|
1494
1575
|
return (isVisible ? "100%" : "0%");
|
|
1495
1576
|
}, function (_a) {
|
|
@@ -1502,7 +1583,7 @@ var PopupContainer = styled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
1502
1583
|
var contrast = _a.contrast;
|
|
1503
1584
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1504
1585
|
});
|
|
1505
|
-
var templateObject_1$
|
|
1586
|
+
var templateObject_1$g;
|
|
1506
1587
|
|
|
1507
1588
|
var Popup = function (props) {
|
|
1508
1589
|
var popupRef = useRef(null);
|
|
@@ -1538,8 +1619,8 @@ var Popup = function (props) {
|
|
|
1538
1619
|
return (jsxs(Fragment, { children: [children, jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h6" }, { children: props.title })), jsx(Spacer, { vertical: 10 })] })), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
1539
1620
|
};
|
|
1540
1621
|
|
|
1541
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1542
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1622
|
+
var Wrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1623
|
+
var StyledProgressBar = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
1543
1624
|
var showInfo = _a.showInfo;
|
|
1544
1625
|
return (showInfo ? "10px" : "");
|
|
1545
1626
|
});
|
|
@@ -1550,12 +1631,12 @@ var Indicator$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeT
|
|
|
1550
1631
|
var color = _a.color;
|
|
1551
1632
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1552
1633
|
});
|
|
1553
|
-
var templateObject_1$
|
|
1634
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$5;
|
|
1554
1635
|
|
|
1555
1636
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator$1, __assign({}, props)) })), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
1556
1637
|
|
|
1557
|
-
var Container$
|
|
1558
|
-
var Step$1 = styled.li(templateObject_2$
|
|
1638
|
+
var Container$8 = styled.ol(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
1639
|
+
var Step$1 = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
|
|
1559
1640
|
var status = _a.status;
|
|
1560
1641
|
return (!!status ? "pointer" : "not-allowed");
|
|
1561
1642
|
}, function (_a) {
|
|
@@ -1577,9 +1658,9 @@ var Step$1 = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplat
|
|
|
1577
1658
|
var hasTitle = _a.hasTitle;
|
|
1578
1659
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1579
1660
|
}, theme.colors.lightGray.dark);
|
|
1580
|
-
var templateObject_1$
|
|
1661
|
+
var templateObject_1$e, templateObject_2$c;
|
|
1581
1662
|
|
|
1582
|
-
var Steps$2 = function (props) { return (jsx(Container$
|
|
1663
|
+
var Steps$2 = function (props) { return (jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
1583
1664
|
var title = _a.title, onClick = _a.onClick;
|
|
1584
1665
|
var step = index + 1;
|
|
1585
1666
|
var status = props.current > step
|
|
@@ -1594,8 +1675,8 @@ var Steps$2 = function (props) { return (jsx(Container$7, { children: props.step
|
|
|
1594
1675
|
return (jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsx(Heading, __assign({ type: "h6" }, { children: step }))) })), title && jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
1595
1676
|
}) })); };
|
|
1596
1677
|
|
|
1597
|
-
var Container$
|
|
1598
|
-
var Step = styled.li(templateObject_2$
|
|
1678
|
+
var Container$7 = styled.ol(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
1679
|
+
var Step = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
1599
1680
|
var status = _a.status;
|
|
1600
1681
|
return (!!status ? "pointer" : "not-allowed");
|
|
1601
1682
|
}, function (_a) {
|
|
@@ -1614,9 +1695,9 @@ var Step = styled.li(templateObject_2$a || (templateObject_2$a = __makeTemplateO
|
|
|
1614
1695
|
? theme.colors.lightGray.light
|
|
1615
1696
|
: theme.colors.darkGray.light;
|
|
1616
1697
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1617
|
-
var templateObject_1$
|
|
1698
|
+
var templateObject_1$d, templateObject_2$b;
|
|
1618
1699
|
|
|
1619
|
-
var Steps$1 = function (props) { return (jsx(Container$
|
|
1700
|
+
var Steps$1 = function (props) { return (jsx(Container$7, { children: props.steps.map(function (_a, index) {
|
|
1620
1701
|
var title = _a.title, onClick = _a.onClick;
|
|
1621
1702
|
var step = index + 1;
|
|
1622
1703
|
var status = props.current > step
|
|
@@ -1635,14 +1716,14 @@ var Steps = function (props) {
|
|
|
1635
1716
|
return props.alignment === "vertical" ? (jsx(Steps$1, __assign({}, props))) : (jsx(Steps$2, __assign({}, props)));
|
|
1636
1717
|
};
|
|
1637
1718
|
|
|
1638
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
1639
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
1719
|
+
var Fieldset = styled.fieldset(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1720
|
+
var RadioContainer = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1640
1721
|
var RadioWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
1641
|
-
var Label$
|
|
1722
|
+
var Label$4 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
1642
1723
|
var weight = _a.weight;
|
|
1643
1724
|
return weight || 500;
|
|
1644
1725
|
}, theme.colors.darkGray.base);
|
|
1645
|
-
var templateObject_1$
|
|
1726
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$4, templateObject_4$3;
|
|
1646
1727
|
|
|
1647
1728
|
var RadioGroup = function (props) {
|
|
1648
1729
|
var onChange = function (value) {
|
|
@@ -1653,15 +1734,15 @@ var RadioGroup = function (props) {
|
|
|
1653
1734
|
if (props.onBlur)
|
|
1654
1735
|
props.onBlur(props.name);
|
|
1655
1736
|
};
|
|
1656
|
-
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$
|
|
1737
|
+
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$4, __assign({ as: "legend" }, { children: props.legend })), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1657
1738
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1658
|
-
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsx(Label$
|
|
1739
|
+
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsx(Label$4, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1659
1740
|
}) })] }));
|
|
1660
1741
|
};
|
|
1661
1742
|
|
|
1662
|
-
var Container$
|
|
1663
|
-
var Label$
|
|
1664
|
-
var templateObject_1$
|
|
1743
|
+
var Container$6 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1744
|
+
var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1745
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1665
1746
|
|
|
1666
1747
|
var SelectField = function (props) {
|
|
1667
1748
|
var onChange = function (value) {
|
|
@@ -1672,15 +1753,15 @@ var SelectField = function (props) {
|
|
|
1672
1753
|
if (props.onBlur)
|
|
1673
1754
|
props.onBlur(props.name);
|
|
1674
1755
|
};
|
|
1675
|
-
return (jsxs(Container$
|
|
1756
|
+
return (jsxs(Container$6, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
1676
1757
|
var value = _a.value, label = _a.label;
|
|
1677
1758
|
return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1678
1759
|
}) }))] }));
|
|
1679
1760
|
};
|
|
1680
1761
|
|
|
1681
|
-
var Container$
|
|
1682
|
-
var Label$
|
|
1683
|
-
var templateObject_1$
|
|
1762
|
+
var Container$5 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1763
|
+
var Label$2 = styled(StyledParagraph)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1764
|
+
var templateObject_1$a, templateObject_2$8;
|
|
1684
1765
|
|
|
1685
1766
|
var ToggleField = function (props) {
|
|
1686
1767
|
var onChange = function (value) {
|
|
@@ -1691,10 +1772,10 @@ var ToggleField = function (props) {
|
|
|
1691
1772
|
if (props.onBlur)
|
|
1692
1773
|
props.onBlur(props.name);
|
|
1693
1774
|
};
|
|
1694
|
-
return (jsxs(Container$
|
|
1775
|
+
return (jsxs(Container$5, { children: [jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
1695
1776
|
};
|
|
1696
1777
|
|
|
1697
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
1778
|
+
var TooltipContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
1698
1779
|
var isVisible = _a.isVisible;
|
|
1699
1780
|
return (isVisible ? "100%" : "0%");
|
|
1700
1781
|
}, function (_a) {
|
|
@@ -1704,7 +1785,7 @@ var TooltipContainer = styled.div(templateObject_1$8 || (templateObject_1$8 = __
|
|
|
1704
1785
|
var x = _a.x;
|
|
1705
1786
|
return (x ? "".concat(x, "px") : "");
|
|
1706
1787
|
});
|
|
1707
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1788
|
+
var TooltipTitle = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
1708
1789
|
var color = _a.color;
|
|
1709
1790
|
switch (color) {
|
|
1710
1791
|
default:
|
|
@@ -1714,7 +1795,7 @@ var TooltipTitle = styled.div(templateObject_2$6 || (templateObject_2$6 = __make
|
|
|
1714
1795
|
return theme.colors.lightGray.dark;
|
|
1715
1796
|
}
|
|
1716
1797
|
});
|
|
1717
|
-
var templateObject_1$
|
|
1798
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1718
1799
|
|
|
1719
1800
|
var Tooltip = function (props) {
|
|
1720
1801
|
var tooltipRef = useRef(null);
|
|
@@ -1748,7 +1829,7 @@ var Tooltip = function (props) {
|
|
|
1748
1829
|
theme.colors.lightGray.light }) })), jsx(TooltipTitle, __assign({ color: props.color }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.title })) }))] }))] }));
|
|
1749
1830
|
};
|
|
1750
1831
|
|
|
1751
|
-
var StyledTextarea = styled.textarea(templateObject_1$
|
|
1832
|
+
var StyledTextarea = styled.textarea(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
1752
1833
|
var disabled = _a.disabled;
|
|
1753
1834
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1754
1835
|
}, function (_a) {
|
|
@@ -1761,7 +1842,7 @@ var StyledTextarea = styled.textarea(templateObject_1$7 || (templateObject_1$7 =
|
|
|
1761
1842
|
var disabled = _a.disabled;
|
|
1762
1843
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1763
1844
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
1764
|
-
var templateObject_1$
|
|
1845
|
+
var templateObject_1$8;
|
|
1765
1846
|
|
|
1766
1847
|
var Textarea = function (props) {
|
|
1767
1848
|
var onChange = function (e) {
|
|
@@ -1771,11 +1852,27 @@ var Textarea = function (props) {
|
|
|
1771
1852
|
return jsx(StyledTextarea, __assign({}, props, { onChange: onChange }));
|
|
1772
1853
|
};
|
|
1773
1854
|
|
|
1855
|
+
var Container$4 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1856
|
+
var Label$1 = styled(StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1857
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1858
|
+
|
|
1859
|
+
var TextareaField = function (props) {
|
|
1860
|
+
var onChange = function (value) {
|
|
1861
|
+
if (props.onChange)
|
|
1862
|
+
props.onChange(props.name, value);
|
|
1863
|
+
};
|
|
1864
|
+
var onBlur = function () {
|
|
1865
|
+
if (props.onBlur)
|
|
1866
|
+
props.onBlur(props.name);
|
|
1867
|
+
};
|
|
1868
|
+
return (jsxs(Container$4, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1869
|
+
};
|
|
1870
|
+
|
|
1774
1871
|
var Container$3 = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1775
1872
|
var Label = styled(StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1776
1873
|
var templateObject_1$6, templateObject_2$5;
|
|
1777
1874
|
|
|
1778
|
-
var
|
|
1875
|
+
var RangeField = function (props) {
|
|
1779
1876
|
var onChange = function (value) {
|
|
1780
1877
|
if (props.onChange)
|
|
1781
1878
|
props.onChange(props.name, value);
|
|
@@ -1784,7 +1881,7 @@ var TextareaField = function (props) {
|
|
|
1784
1881
|
if (props.onBlur)
|
|
1785
1882
|
props.onBlur(props.name);
|
|
1786
1883
|
};
|
|
1787
|
-
return (jsxs(Container$3, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(
|
|
1884
|
+
return (jsxs(Container$3, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1788
1885
|
};
|
|
1789
1886
|
|
|
1790
1887
|
var FeedbackColors = {
|
|
@@ -1910,6 +2007,14 @@ var Form = forwardRef(function (props, ref) {
|
|
|
1910
2007
|
}
|
|
1911
2008
|
break;
|
|
1912
2009
|
}
|
|
2010
|
+
case "range": {
|
|
2011
|
+
var element = document.getElementById(field.name);
|
|
2012
|
+
if (!field.defaultValue)
|
|
2013
|
+
element.value = "0";
|
|
2014
|
+
else
|
|
2015
|
+
element.value = "".concat(field.defaultValue);
|
|
2016
|
+
break;
|
|
2017
|
+
}
|
|
1913
2018
|
}
|
|
1914
2019
|
};
|
|
1915
2020
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1986,6 +2091,9 @@ var Form = forwardRef(function (props, ref) {
|
|
|
1986
2091
|
case "toggle":
|
|
1987
2092
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1988
2093
|
jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
2094
|
+
case "range":
|
|
2095
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
2096
|
+
jsx(RangeField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
1989
2097
|
}
|
|
1990
2098
|
}) }), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
1991
2099
|
});
|
|
@@ -2149,5 +2257,5 @@ var Result = function (props) {
|
|
|
2149
2257
|
return (jsxs(Container, __assign({ passed: isPassed }, { children: [jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsx(Spacer, { horizontal: 15 }), jsxs("div", { children: [jsx(Heading, __assign({ type: "h5" }, { children: props.title })), jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxs(ProgressBarWrapper, { children: [jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsx(Target, __assign({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxs(Paragraph, __assign({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxs("div", { children: [jsxs(Paragraph, __assign({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxs(Paragraph, __assign({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
2150
2258
|
};
|
|
2151
2259
|
|
|
2152
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Result, Select, SelectField, Spacer, Steps, Subheading, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
2260
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
2153
2261
|
//# sourceMappingURL=index.es.js.map
|