@typeolymp/ui-components 1.6.0 → 1.7.0
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/Textarea/index.d.ts +14 -0
- package/build/components/atoms/Textarea/stories.d.ts +8 -0
- package/build/components/atoms/Textarea/styles.d.ts +1 -0
- package/build/components/molecules/Collapse/index.d.ts +9 -0
- package/build/components/molecules/Collapse/stories.d.ts +15 -0
- package/build/components/molecules/Collapse/styles.d.ts +2 -0
- package/build/components/molecules/TextareaField/index.d.ts +16 -0
- package/build/components/molecules/TextareaField/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +5 -1
- package/build/components/organisms/Keyboard/keys.d.ts +14 -0
- package/build/components/organisms/Keyboard/stories.d.ts +1 -1
- package/build/index.d.ts +2 -1
- package/build/index.es.js +271 -185
- package/build/index.es.js.map +1 -1
- package/build/index.js +271 -184
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/build/index.es.js
CHANGED
|
@@ -188,7 +188,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
188
188
|
return cooked;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
var StyledButton = styled.button(templateObject_1$
|
|
191
|
+
var StyledButton = styled.button(templateObject_1$I || (templateObject_1$I = __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) {
|
|
192
192
|
var fluid = _a.fluid;
|
|
193
193
|
return (fluid ? "100%" : "fit-content");
|
|
194
194
|
}, function (_a) {
|
|
@@ -238,7 +238,7 @@ var StyledButton = styled.button(templateObject_1$F || (templateObject_1$F = __m
|
|
|
238
238
|
? theme.button.medium.heightActive
|
|
239
239
|
: theme.button[size].heightActive;
|
|
240
240
|
});
|
|
241
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
241
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$q || (templateObject_2$q = __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) {
|
|
242
242
|
var size = _a.size;
|
|
243
243
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
244
244
|
});
|
|
@@ -258,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$8 || (templateObject_3$8
|
|
|
258
258
|
? theme.button.medium.marginTopActive
|
|
259
259
|
: theme.button[size].marginTopActive;
|
|
260
260
|
});
|
|
261
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$8;
|
|
262
262
|
|
|
263
263
|
var Button = forwardRef(function (props, ref) {
|
|
264
264
|
var as = props.href || props.asAnchor ? "a" : "button";
|
|
@@ -276,7 +276,7 @@ var Button = forwardRef(function (props, ref) {
|
|
|
276
276
|
return (jsx(StyledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
277
277
|
});
|
|
278
278
|
|
|
279
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
279
|
+
var StyledCheckbox = styled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
280
280
|
var checked = _a.checked, disabled = _a.disabled;
|
|
281
281
|
if (disabled)
|
|
282
282
|
return theme.colors.lightGray.darker;
|
|
@@ -297,7 +297,7 @@ var StyledCheckbox = styled.div(templateObject_1$E || (templateObject_1$E = __ma
|
|
|
297
297
|
return theme.colors.green.base;
|
|
298
298
|
return theme.colors.lightGray.darker;
|
|
299
299
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
300
|
-
var templateObject_1$
|
|
300
|
+
var templateObject_1$H;
|
|
301
301
|
|
|
302
302
|
var Checkbox = function (props) {
|
|
303
303
|
var _a;
|
|
@@ -330,7 +330,7 @@ var Checkbox = function (props) {
|
|
|
330
330
|
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" }, void 0) }), void 0)), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
331
331
|
};
|
|
332
332
|
|
|
333
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
333
|
+
var Wrapper$9 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
334
334
|
var size = _a.size;
|
|
335
335
|
switch (size) {
|
|
336
336
|
case "small":
|
|
@@ -353,20 +353,20 @@ var Wrapper$9 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTem
|
|
|
353
353
|
return "27px";
|
|
354
354
|
}
|
|
355
355
|
});
|
|
356
|
-
var templateObject_1$
|
|
356
|
+
var templateObject_1$G;
|
|
357
357
|
|
|
358
358
|
var parsers = {};
|
|
359
359
|
|
|
360
360
|
Object.defineProperty(parsers, "__esModule", { value: true });
|
|
361
|
-
|
|
361
|
+
parsers.getKeyboardLayoutByLocale = getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
|
|
362
362
|
var getNativeLanguageByLocale = function (locale) {
|
|
363
363
|
var nativeLanguages = {
|
|
364
364
|
"en-GB": "English (UK)",
|
|
365
365
|
"nl-NL": "Nederlands",
|
|
366
366
|
"nl-BE": "Nederlands (BE)",
|
|
367
|
-
"fr-BE": "Français (BE)",
|
|
368
|
-
"fr-FR": "Français",
|
|
369
|
-
"de-DE": "Deutsch",
|
|
367
|
+
// "fr-BE": "Français (BE)",
|
|
368
|
+
// "fr-FR": "Français",
|
|
369
|
+
// "de-DE": "Deutsch",
|
|
370
370
|
};
|
|
371
371
|
return nativeLanguages[locale];
|
|
372
372
|
};
|
|
@@ -378,7 +378,19 @@ parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
|
|
|
378
378
|
var getCountryCodeByLocale = function (locale) {
|
|
379
379
|
return locale.split("-")[1];
|
|
380
380
|
};
|
|
381
|
-
getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
381
|
+
var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
382
|
+
var getKeyboardLayoutByLocale = function (locale) {
|
|
383
|
+
var keyboardLayouts = {
|
|
384
|
+
"en-GB": "qwerty-uk",
|
|
385
|
+
"nl-NL": "qwerty-nl",
|
|
386
|
+
"nl-BE": "azerty-be",
|
|
387
|
+
// "fr-BE": "azerty",
|
|
388
|
+
// "fr-FR": "azerty",
|
|
389
|
+
// "de-DE": "qwerty",
|
|
390
|
+
};
|
|
391
|
+
return keyboardLayouts[locale];
|
|
392
|
+
};
|
|
393
|
+
parsers.getKeyboardLayoutByLocale = getKeyboardLayoutByLocale;
|
|
382
394
|
|
|
383
395
|
var flags = {
|
|
384
396
|
NL: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -389,7 +401,7 @@ var flags = {
|
|
|
389
401
|
};
|
|
390
402
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
391
403
|
|
|
392
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
404
|
+
var StyledHeading = styled.span(templateObject_1$F || (templateObject_1$F = __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) {
|
|
393
405
|
var type = _a.type;
|
|
394
406
|
return theme.heading[type].fontSize;
|
|
395
407
|
}, function (_a) {
|
|
@@ -413,14 +425,14 @@ var StyledHeading = styled.span(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
413
425
|
var align = _a.align;
|
|
414
426
|
return align;
|
|
415
427
|
});
|
|
416
|
-
var templateObject_1$
|
|
428
|
+
var templateObject_1$F;
|
|
417
429
|
|
|
418
430
|
var Heading = function (props) {
|
|
419
431
|
var element = !!props.as ? props.as : props.type;
|
|
420
432
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
421
433
|
};
|
|
422
434
|
|
|
423
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
435
|
+
var Wrapper$8 = styled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
424
436
|
var size = _a.size;
|
|
425
437
|
return theme.icon[size] || theme.icon.medium;
|
|
426
438
|
}, function (_a) {
|
|
@@ -450,7 +462,7 @@ var Wrapper$8 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTem
|
|
|
450
462
|
return theme.colors.lightGray.light;
|
|
451
463
|
}
|
|
452
464
|
});
|
|
453
|
-
var templateObject_1$
|
|
465
|
+
var templateObject_1$E;
|
|
454
466
|
|
|
455
467
|
var icons = {
|
|
456
468
|
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" }, void 0)),
|
|
@@ -475,7 +487,7 @@ var icons = {
|
|
|
475
487
|
};
|
|
476
488
|
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] }), void 0) }), void 0)); };
|
|
477
489
|
|
|
478
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
490
|
+
var Wrapper$7 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
479
491
|
var size = _a.size;
|
|
480
492
|
switch (size) {
|
|
481
493
|
default:
|
|
@@ -487,7 +499,7 @@ var Wrapper$7 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTem
|
|
|
487
499
|
return "118px";
|
|
488
500
|
}
|
|
489
501
|
});
|
|
490
|
-
var templateObject_1$
|
|
502
|
+
var templateObject_1$D;
|
|
491
503
|
|
|
492
504
|
var illustrations = {
|
|
493
505
|
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" }, void 0), 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" }, void 0), 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" }, void 0), 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" }, void 0), 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" }, void 0), 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" }, void 0)] }), void 0)),
|
|
@@ -502,14 +514,14 @@ var illustrations = {
|
|
|
502
514
|
};
|
|
503
515
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
504
516
|
|
|
505
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
517
|
+
var InputIconWrapper = styled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
506
518
|
var isChanged = _a.isChanged;
|
|
507
519
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
508
520
|
}, function (_a) {
|
|
509
521
|
var disabled = _a.disabled;
|
|
510
522
|
return (disabled ? "not-allowed" : "pointer");
|
|
511
523
|
});
|
|
512
|
-
var StyledInput = styled.input(templateObject_2$
|
|
524
|
+
var StyledInput = styled.input(templateObject_2$p || (templateObject_2$p = __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) {
|
|
513
525
|
var disabled = _a.disabled;
|
|
514
526
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
515
527
|
}, function (_a) {
|
|
@@ -522,7 +534,7 @@ var StyledInput = styled.input(templateObject_2$n || (templateObject_2$n = __mak
|
|
|
522
534
|
var disabled = _a.disabled;
|
|
523
535
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
524
536
|
}, 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));
|
|
525
|
-
var templateObject_1$
|
|
537
|
+
var templateObject_1$C, templateObject_2$p;
|
|
526
538
|
|
|
527
539
|
var PasswordInput = function (props) {
|
|
528
540
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -709,7 +721,7 @@ Input.Date = DateInput;
|
|
|
709
721
|
|
|
710
722
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
711
723
|
|
|
712
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
724
|
+
var Wrapper$6 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
713
725
|
var size = _a.size;
|
|
714
726
|
switch (size) {
|
|
715
727
|
default:
|
|
@@ -719,7 +731,7 @@ var Wrapper$6 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTem
|
|
|
719
731
|
return "116px";
|
|
720
732
|
}
|
|
721
733
|
});
|
|
722
|
-
var templateObject_1$
|
|
734
|
+
var templateObject_1$B;
|
|
723
735
|
|
|
724
736
|
var medals = {
|
|
725
737
|
small: {
|
|
@@ -735,11 +747,11 @@ var medals = {
|
|
|
735
747
|
};
|
|
736
748
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
737
749
|
|
|
738
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
750
|
+
var Wrapper$5 = styled.div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
739
751
|
var disabled = _a.disabled;
|
|
740
752
|
return (disabled ? "49.5px" : "");
|
|
741
753
|
});
|
|
742
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
754
|
+
var StyledInputNumber = styled.input(templateObject_2$o || (templateObject_2$o = __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) {
|
|
743
755
|
var disabled = _a.disabled;
|
|
744
756
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
745
757
|
}, function (_a) {
|
|
@@ -752,7 +764,7 @@ var StyledInputNumber = styled.input(templateObject_2$m || (templateObject_2$m =
|
|
|
752
764
|
var disabled = _a.disabled;
|
|
753
765
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
754
766
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
755
|
-
var templateObject_1$
|
|
767
|
+
var templateObject_1$A, templateObject_2$o;
|
|
756
768
|
|
|
757
769
|
var Number = function (props) {
|
|
758
770
|
var inputRef = useRef(null);
|
|
@@ -789,7 +801,7 @@ var Number = function (props) {
|
|
|
789
801
|
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
790
802
|
};
|
|
791
803
|
|
|
792
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
804
|
+
var StyledParagraph = styled.p(templateObject_1$z || (templateObject_1$z = __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) {
|
|
793
805
|
var size = _a.size;
|
|
794
806
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
795
807
|
}, function (_a) {
|
|
@@ -821,11 +833,11 @@ var StyledParagraph = styled.p(templateObject_1$w || (templateObject_1$w = __mak
|
|
|
821
833
|
var align = _a.align;
|
|
822
834
|
return align;
|
|
823
835
|
});
|
|
824
|
-
var templateObject_1$
|
|
836
|
+
var templateObject_1$z;
|
|
825
837
|
|
|
826
838
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
827
839
|
|
|
828
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
840
|
+
var StyledRadio = styled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
829
841
|
var checked = _a.checked, disabled = _a.disabled;
|
|
830
842
|
if (disabled)
|
|
831
843
|
return theme.colors.lightGray.darker;
|
|
@@ -853,7 +865,7 @@ var StyledRadio = styled.div(templateObject_1$v || (templateObject_1$v = __makeT
|
|
|
853
865
|
return theme.colors.green.base;
|
|
854
866
|
return "";
|
|
855
867
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
856
|
-
var templateObject_1$
|
|
868
|
+
var templateObject_1$y;
|
|
857
869
|
|
|
858
870
|
var Radio = function (props) {
|
|
859
871
|
var _a, _b;
|
|
@@ -885,11 +897,11 @@ var Radio = function (props) {
|
|
|
885
897
|
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 }, void 0) }), void 0));
|
|
886
898
|
};
|
|
887
899
|
|
|
888
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
900
|
+
var Wrapper$4 = styled.div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
889
901
|
var disabled = _a.disabled;
|
|
890
902
|
return (disabled ? "not-allowed" : "pointer");
|
|
891
903
|
});
|
|
892
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
904
|
+
var StyledSelect = styled.select(templateObject_2$n || (templateObject_2$n = __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) {
|
|
893
905
|
var disabled = _a.disabled;
|
|
894
906
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
895
907
|
}, function (_a) {
|
|
@@ -902,7 +914,7 @@ var StyledSelect = styled.select(templateObject_2$l || (templateObject_2$l = __m
|
|
|
902
914
|
var isChanged = _a.isChanged;
|
|
903
915
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
904
916
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
905
|
-
var templateObject_1$
|
|
917
|
+
var templateObject_1$x, templateObject_2$n;
|
|
906
918
|
|
|
907
919
|
var Select = function (props) {
|
|
908
920
|
var _a;
|
|
@@ -924,18 +936,18 @@ var Select = function (props) {
|
|
|
924
936
|
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
925
937
|
};
|
|
926
938
|
|
|
927
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
939
|
+
var StyledSpacer = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
928
940
|
var horizontal = _a.horizontal;
|
|
929
941
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
930
942
|
}, function (_a) {
|
|
931
943
|
var vertical = _a.vertical;
|
|
932
944
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
933
945
|
});
|
|
934
|
-
var templateObject_1$
|
|
946
|
+
var templateObject_1$w;
|
|
935
947
|
|
|
936
948
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
937
949
|
|
|
938
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
950
|
+
var StyledSubheading = styled.p(templateObject_1$v || (templateObject_1$v = __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) {
|
|
939
951
|
var size = _a.size;
|
|
940
952
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
941
953
|
}, function (_a) {
|
|
@@ -963,11 +975,11 @@ var StyledSubheading = styled.p(templateObject_1$s || (templateObject_1$s = __ma
|
|
|
963
975
|
return theme.colors.darkGray.dark;
|
|
964
976
|
}
|
|
965
977
|
});
|
|
966
|
-
var templateObject_1$
|
|
978
|
+
var templateObject_1$v;
|
|
967
979
|
|
|
968
980
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
969
981
|
|
|
970
|
-
var Container$
|
|
982
|
+
var Container$f = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: 46px;\n 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 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) {
|
|
971
983
|
var disabled = _a.disabled;
|
|
972
984
|
return (disabled ? "not-allowed" : "pointer");
|
|
973
985
|
}, function (_a) {
|
|
@@ -985,7 +997,7 @@ var Container$d = styled.div(templateObject_1$r || (templateObject_1$r = __makeT
|
|
|
985
997
|
var disabled = _a.disabled;
|
|
986
998
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
987
999
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
988
|
-
var templateObject_1$
|
|
1000
|
+
var templateObject_1$u;
|
|
989
1001
|
|
|
990
1002
|
var Toggle = function (props) {
|
|
991
1003
|
var _a;
|
|
@@ -1013,10 +1025,10 @@ var Toggle = function (props) {
|
|
|
1013
1025
|
props.onChange(newValue);
|
|
1014
1026
|
}
|
|
1015
1027
|
};
|
|
1016
|
-
return (jsx(Container$
|
|
1028
|
+
return (jsx(Container$f, __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 }, void 0) }), void 0));
|
|
1017
1029
|
};
|
|
1018
1030
|
|
|
1019
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
1031
|
+
var Wrapper$3 = styled.div(templateObject_1$t || (templateObject_1$t = __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) {
|
|
1020
1032
|
var level = _a.level;
|
|
1021
1033
|
switch (level) {
|
|
1022
1034
|
case 1:
|
|
@@ -1027,7 +1039,7 @@ var Wrapper$3 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTem
|
|
|
1027
1039
|
return "70px";
|
|
1028
1040
|
}
|
|
1029
1041
|
});
|
|
1030
|
-
var templateObject_1$
|
|
1042
|
+
var templateObject_1$t;
|
|
1031
1043
|
|
|
1032
1044
|
var trophies = {
|
|
1033
1045
|
1: {
|
|
@@ -1063,7 +1075,7 @@ var trophies = {
|
|
|
1063
1075
|
};
|
|
1064
1076
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
1065
1077
|
|
|
1066
|
-
var Container$
|
|
1078
|
+
var Container$e = styled.div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
1067
1079
|
var type = _a.type;
|
|
1068
1080
|
switch (type) {
|
|
1069
1081
|
case "success":
|
|
@@ -1080,11 +1092,11 @@ var Container$c = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
1080
1092
|
return theme.colors.red.base;
|
|
1081
1093
|
}
|
|
1082
1094
|
});
|
|
1083
|
-
var templateObject_1$
|
|
1095
|
+
var templateObject_1$s;
|
|
1084
1096
|
|
|
1085
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
1097
|
+
var Alert = function (props) { return (jsxs(Container$e, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
1086
1098
|
|
|
1087
|
-
var StyledCard = styled.div(templateObject_1$
|
|
1099
|
+
var StyledCard = styled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
1088
1100
|
var ellipse = _a.ellipse;
|
|
1089
1101
|
return ellipse
|
|
1090
1102
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1093,23 +1105,23 @@ var StyledCard = styled.div(templateObject_1$o || (templateObject_1$o = __makeTe
|
|
|
1093
1105
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1094
1106
|
: "";
|
|
1095
1107
|
});
|
|
1096
|
-
var Ellipse = styled.div(templateObject_2$
|
|
1108
|
+
var Ellipse = styled.div(templateObject_2$m || (templateObject_2$m = __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) {
|
|
1097
1109
|
var color = _a.color;
|
|
1098
1110
|
return color ? theme.colors[color].light : "";
|
|
1099
1111
|
});
|
|
1100
1112
|
var Content = styled.div(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
1101
|
-
var templateObject_1$
|
|
1113
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$7;
|
|
1102
1114
|
|
|
1103
1115
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
1104
1116
|
|
|
1105
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
1106
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
1117
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1118
|
+
var CheckboxContainer = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1107
1119
|
var CheckboxWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
1108
|
-
var Label$
|
|
1120
|
+
var Label$8 = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __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) {
|
|
1109
1121
|
var weight = _a.weight;
|
|
1110
1122
|
return weight || 500;
|
|
1111
1123
|
}, theme.colors.darkGray.base);
|
|
1112
|
-
var templateObject_1$
|
|
1124
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$6, templateObject_4$5;
|
|
1113
1125
|
|
|
1114
1126
|
var Checkboxes = function (props) {
|
|
1115
1127
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1126,15 +1138,38 @@ var Checkboxes = function (props) {
|
|
|
1126
1138
|
if (props.onBlur)
|
|
1127
1139
|
props.onBlur(props.name);
|
|
1128
1140
|
};
|
|
1129
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
1141
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$8, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1130
1142
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1131
|
-
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 }, void 0), jsx(Label$
|
|
1143
|
+
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 }, void 0), jsx(Label$8, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1132
1144
|
}) }, void 0)] }, void 0));
|
|
1133
1145
|
};
|
|
1134
1146
|
|
|
1135
|
-
var Container$
|
|
1136
|
-
var
|
|
1137
|
-
var
|
|
1147
|
+
var Container$d = styled.div(templateObject_1$p || (templateObject_1$p = __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);
|
|
1148
|
+
var Item = styled.div(templateObject_2$k || (templateObject_2$k = __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) {
|
|
1149
|
+
var isOpen = _a.isOpen;
|
|
1150
|
+
return (isOpen ? "" : "none");
|
|
1151
|
+
}, theme.colors.lightGray.darker);
|
|
1152
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1153
|
+
|
|
1154
|
+
var Collapse = function (props) {
|
|
1155
|
+
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
1156
|
+
var onClickItem = function (index, isOpen) {
|
|
1157
|
+
if (isOpen) {
|
|
1158
|
+
setOpenItems(function (prevState) { return prevState.filter(function (item) { return item !== index; }); });
|
|
1159
|
+
}
|
|
1160
|
+
else {
|
|
1161
|
+
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1162
|
+
}
|
|
1163
|
+
};
|
|
1164
|
+
return (jsx(Container$d, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1165
|
+
var isOpen = openItems.includes(index);
|
|
1166
|
+
return (jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h6" }, { children: item.title }), void 0), jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" }, void 0)] }, void 0), jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }), void 0)] }), "".concat(item.title, "-").concat(index)));
|
|
1167
|
+
}) }), void 0));
|
|
1168
|
+
};
|
|
1169
|
+
|
|
1170
|
+
var Container$c = styled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
1171
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1172
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1138
1173
|
|
|
1139
1174
|
var DateInputField = function (props) {
|
|
1140
1175
|
var onChange = function (value) {
|
|
@@ -1145,12 +1180,12 @@ var DateInputField = function (props) {
|
|
|
1145
1180
|
if (props.onBlur)
|
|
1146
1181
|
props.onBlur(props.name);
|
|
1147
1182
|
};
|
|
1148
|
-
return (jsxs(Container$
|
|
1183
|
+
return (jsxs(Container$c, { children: [jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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 }, void 0)] }, void 0));
|
|
1149
1184
|
};
|
|
1150
1185
|
|
|
1151
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
1152
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
1153
|
-
var templateObject_1$
|
|
1186
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
1187
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
1188
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1154
1189
|
|
|
1155
1190
|
var IconButton = function (props) {
|
|
1156
1191
|
if (props.color === "white")
|
|
@@ -1158,9 +1193,9 @@ var IconButton = function (props) {
|
|
|
1158
1193
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1159
1194
|
};
|
|
1160
1195
|
|
|
1161
|
-
var Container$
|
|
1162
|
-
var Label$
|
|
1163
|
-
var templateObject_1$
|
|
1196
|
+
var Container$b = styled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
1197
|
+
var Label$6 = styled(StyledParagraph)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1198
|
+
var templateObject_1$m, templateObject_2$h;
|
|
1164
1199
|
|
|
1165
1200
|
var InputField = function (props) {
|
|
1166
1201
|
var onChange = function (value) {
|
|
@@ -1171,18 +1206,18 @@ var InputField = function (props) {
|
|
|
1171
1206
|
if (props.onBlur)
|
|
1172
1207
|
props.onBlur(props.name);
|
|
1173
1208
|
};
|
|
1174
|
-
return (jsxs(Container$
|
|
1209
|
+
return (jsxs(Container$b, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
|
|
1175
1210
|
};
|
|
1176
1211
|
|
|
1177
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
1212
|
+
var Wrapper$2 = styled.a(templateObject_1$l || (templateObject_1$l = __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-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-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
1178
1213
|
var chevron = _a.chevron;
|
|
1179
1214
|
return (chevron === "left" ? "4px" : "");
|
|
1180
1215
|
}, function (_a) {
|
|
1181
1216
|
var chevron = _a.chevron;
|
|
1182
1217
|
return (chevron === "right" ? "4px" : "");
|
|
1183
1218
|
});
|
|
1184
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
1185
|
-
var templateObject_1$
|
|
1219
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$g || (templateObject_2$g = __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);
|
|
1220
|
+
var templateObject_1$l, templateObject_2$g;
|
|
1186
1221
|
|
|
1187
1222
|
var Link = function (props) {
|
|
1188
1223
|
var onClick = function (e) {
|
|
@@ -1194,15 +1229,15 @@ var Link = function (props) {
|
|
|
1194
1229
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
1195
1230
|
};
|
|
1196
1231
|
|
|
1197
|
-
var Container$
|
|
1232
|
+
var Container$a = styled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
1198
1233
|
var text = _a.text;
|
|
1199
1234
|
return (text ? "20px" : "");
|
|
1200
1235
|
});
|
|
1201
|
-
var templateObject_1$
|
|
1236
|
+
var templateObject_1$k;
|
|
1202
1237
|
|
|
1203
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1238
|
+
var Loading = function (props) { return (jsxs(Container$a, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1204
1239
|
|
|
1205
|
-
var Container$
|
|
1240
|
+
var Container$9 = styled.div(templateObject_1$j || (templateObject_1$j = __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) {
|
|
1206
1241
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1207
1242
|
if (dropdownIsVisible) {
|
|
1208
1243
|
switch (color) {
|
|
@@ -1215,7 +1250,7 @@ var Container$8 = styled.div(templateObject_1$h || (templateObject_1$h = __makeT
|
|
|
1215
1250
|
}
|
|
1216
1251
|
return "";
|
|
1217
1252
|
});
|
|
1218
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
1253
|
+
var SelectedLocaleWrapper = styled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
1219
1254
|
var DropdownContainer = styled.div(templateObject_3$5 || (templateObject_3$5 = __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) {
|
|
1220
1255
|
var color = _a.color;
|
|
1221
1256
|
switch (color) {
|
|
@@ -1227,7 +1262,7 @@ var DropdownContainer = styled.div(templateObject_3$5 || (templateObject_3$5 = _
|
|
|
1227
1262
|
}
|
|
1228
1263
|
});
|
|
1229
1264
|
var Locale = styled.div(templateObject_4$4 || (templateObject_4$4 = __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);
|
|
1230
|
-
var templateObject_1$
|
|
1265
|
+
var templateObject_1$j, templateObject_2$f, templateObject_3$5, templateObject_4$4;
|
|
1231
1266
|
|
|
1232
1267
|
var LocaleSelect = function (props) {
|
|
1233
1268
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1236,22 +1271,22 @@ var LocaleSelect = function (props) {
|
|
|
1236
1271
|
setLocale(locale);
|
|
1237
1272
|
props.onChange(locale);
|
|
1238
1273
|
};
|
|
1239
|
-
return (jsxs(Container$
|
|
1274
|
+
return (jsxs(Container$9, __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 }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1240
1275
|
.filter(function (l) { return l !== locale; })
|
|
1241
1276
|
.map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
|
|
1242
1277
|
};
|
|
1243
1278
|
|
|
1244
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1245
|
-
var templateObject_1$
|
|
1279
|
+
var Wrapper$1 = styled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
1280
|
+
var templateObject_1$i;
|
|
1246
1281
|
|
|
1247
1282
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1248
1283
|
|
|
1249
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1284
|
+
var NotificationContainer = styled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
1250
1285
|
var contrast = _a.contrast;
|
|
1251
1286
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1252
1287
|
});
|
|
1253
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
1254
|
-
var templateObject_1$
|
|
1288
|
+
var ButtonContainer = styled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
1289
|
+
var templateObject_1$h, templateObject_2$e;
|
|
1255
1290
|
|
|
1256
1291
|
var Notification = function (props) {
|
|
1257
1292
|
if (!props.isVisible)
|
|
@@ -1259,9 +1294,9 @@ var Notification = function (props) {
|
|
|
1259
1294
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), 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) }))); }) }, void 0))] }), void 0));
|
|
1260
1295
|
};
|
|
1261
1296
|
|
|
1262
|
-
var Container$
|
|
1263
|
-
var Label$
|
|
1264
|
-
var templateObject_1$
|
|
1297
|
+
var Container$8 = styled.div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
1298
|
+
var Label$5 = styled(StyledParagraph)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1299
|
+
var templateObject_1$g, templateObject_2$d;
|
|
1265
1300
|
|
|
1266
1301
|
var NumberField = function (props) {
|
|
1267
1302
|
var onChange = function (value) {
|
|
@@ -1272,7 +1307,7 @@ var NumberField = function (props) {
|
|
|
1272
1307
|
if (props.onBlur)
|
|
1273
1308
|
props.onBlur(props.name);
|
|
1274
1309
|
};
|
|
1275
|
-
return (jsxs(Container$
|
|
1310
|
+
return (jsxs(Container$8, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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 }, void 0)] }, void 0));
|
|
1276
1311
|
};
|
|
1277
1312
|
|
|
1278
1313
|
var expressions = {};
|
|
@@ -1323,15 +1358,15 @@ var isStrongPassword = function (password) {
|
|
|
1323
1358
|
exports.isStrongPassword = isStrongPassword;
|
|
1324
1359
|
}(expressions));
|
|
1325
1360
|
|
|
1326
|
-
var Container$
|
|
1327
|
-
var Label$
|
|
1361
|
+
var Container$7 = styled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
1362
|
+
var Label$4 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1328
1363
|
var HelperContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
1329
1364
|
var fadeIn = keyframes(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
1330
1365
|
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) {
|
|
1331
1366
|
var isOk = _a.isOk;
|
|
1332
1367
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1333
1368
|
}, fadeIn);
|
|
1334
|
-
var templateObject_1$
|
|
1369
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$4, templateObject_4$3, templateObject_5$2;
|
|
1335
1370
|
|
|
1336
1371
|
var translations = {
|
|
1337
1372
|
"nl-NL": {
|
|
@@ -1352,24 +1387,24 @@ var translations = {
|
|
|
1352
1387
|
specialCharacter: "At least 1 special character",
|
|
1353
1388
|
length: "At least 8 characters",
|
|
1354
1389
|
},
|
|
1355
|
-
"fr-FR": {
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
},
|
|
1361
|
-
"fr-BE": {
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
},
|
|
1367
|
-
"de-DE": {
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
},
|
|
1390
|
+
// "fr-FR": {
|
|
1391
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1392
|
+
// number: "Au moins un chiffre",
|
|
1393
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1394
|
+
// length: "Au moins 8 caractères",
|
|
1395
|
+
// },
|
|
1396
|
+
// "fr-BE": {
|
|
1397
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1398
|
+
// number: "Au moins un chiffre",
|
|
1399
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1400
|
+
// length: "Au moins 8 caractères",
|
|
1401
|
+
// },
|
|
1402
|
+
// "de-DE": {
|
|
1403
|
+
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
1404
|
+
// number: "Mindestens 1 Zahl",
|
|
1405
|
+
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
1406
|
+
// length: "Mindestens 8 Zeichen",
|
|
1407
|
+
// },
|
|
1373
1408
|
};
|
|
1374
1409
|
|
|
1375
1410
|
var PasswordInputField = function (props) {
|
|
@@ -1388,7 +1423,7 @@ var PasswordInputField = function (props) {
|
|
|
1388
1423
|
if (props.onBlur)
|
|
1389
1424
|
props.onBlur(props.name);
|
|
1390
1425
|
};
|
|
1391
|
-
return (jsxs(Container$
|
|
1426
|
+
return (jsxs(Container$7, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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 }, void 0), props.helper && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helper].capitalLetter] }), void 0), jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helper].number] }), void 0), jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helper].specialCharacter] }), void 0), jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helper].length] }), void 0)] }, void 0)) : null] }, void 0));
|
|
1392
1427
|
};
|
|
1393
1428
|
|
|
1394
1429
|
var generateRandomString = function (length) {
|
|
@@ -1401,7 +1436,7 @@ var generateRandomString = function (length) {
|
|
|
1401
1436
|
return string;
|
|
1402
1437
|
};
|
|
1403
1438
|
|
|
1404
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1439
|
+
var PopupContainer = styled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
1405
1440
|
var isVisible = _a.isVisible;
|
|
1406
1441
|
return (isVisible ? "100%" : "0%");
|
|
1407
1442
|
}, function (_a) {
|
|
@@ -1414,7 +1449,7 @@ var PopupContainer = styled.div(templateObject_1$c || (templateObject_1$c = __ma
|
|
|
1414
1449
|
var contrast = _a.contrast;
|
|
1415
1450
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1416
1451
|
});
|
|
1417
|
-
var templateObject_1$
|
|
1452
|
+
var templateObject_1$e;
|
|
1418
1453
|
|
|
1419
1454
|
var Popup = function (props) {
|
|
1420
1455
|
var popupRef = useRef(null);
|
|
@@ -1450,8 +1485,8 @@ var Popup = function (props) {
|
|
|
1450
1485
|
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 }), void 0), jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
1451
1486
|
};
|
|
1452
1487
|
|
|
1453
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1454
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1488
|
+
var Wrapper = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1489
|
+
var StyledProgressBar = styled.div(templateObject_2$b || (templateObject_2$b = __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) {
|
|
1455
1490
|
var showInfo = _a.showInfo;
|
|
1456
1491
|
return (showInfo ? "10px" : "");
|
|
1457
1492
|
});
|
|
@@ -1462,12 +1497,12 @@ var Indicator = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTem
|
|
|
1462
1497
|
var color = _a.color;
|
|
1463
1498
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1464
1499
|
});
|
|
1465
|
-
var templateObject_1$
|
|
1500
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$3;
|
|
1466
1501
|
|
|
1467
1502
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
1468
1503
|
|
|
1469
|
-
var Container$
|
|
1470
|
-
var Step$1 = styled.li(templateObject_2$
|
|
1504
|
+
var Container$6 = styled.ol(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
1505
|
+
var Step$1 = styled.li(templateObject_2$a || (templateObject_2$a = __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) {
|
|
1471
1506
|
var status = _a.status;
|
|
1472
1507
|
return (!!status ? "pointer" : "not-allowed");
|
|
1473
1508
|
}, function (_a) {
|
|
@@ -1489,9 +1524,9 @@ var Step$1 = styled.li(templateObject_2$9 || (templateObject_2$9 = __makeTemplat
|
|
|
1489
1524
|
var hasTitle = _a.hasTitle;
|
|
1490
1525
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1491
1526
|
}, theme.colors.lightGray.dark);
|
|
1492
|
-
var templateObject_1$
|
|
1527
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1493
1528
|
|
|
1494
|
-
var Steps$2 = function (props) { return (jsx(Container$
|
|
1529
|
+
var Steps$2 = function (props) { return (jsx(Container$6, { children: props.steps.map(function (_a, index) {
|
|
1495
1530
|
var title = _a.title, onClick = _a.onClick;
|
|
1496
1531
|
var step = index + 1;
|
|
1497
1532
|
var status = props.current > step
|
|
@@ -1506,8 +1541,8 @@ var Steps$2 = function (props) { return (jsx(Container$5, { children: props.step
|
|
|
1506
1541
|
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" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), title && jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1507
1542
|
}) }, void 0)); };
|
|
1508
1543
|
|
|
1509
|
-
var Container$
|
|
1510
|
-
var Step = styled.li(templateObject_2$
|
|
1544
|
+
var Container$5 = styled.ol(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
1545
|
+
var Step = styled.li(templateObject_2$9 || (templateObject_2$9 = __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) {
|
|
1511
1546
|
var status = _a.status;
|
|
1512
1547
|
return (!!status ? "pointer" : "not-allowed");
|
|
1513
1548
|
}, function (_a) {
|
|
@@ -1526,9 +1561,9 @@ var Step = styled.li(templateObject_2$8 || (templateObject_2$8 = __makeTemplateO
|
|
|
1526
1561
|
? theme.colors.lightGray.light
|
|
1527
1562
|
: theme.colors.darkGray.light;
|
|
1528
1563
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1529
|
-
var templateObject_1$
|
|
1564
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1530
1565
|
|
|
1531
|
-
var Steps$1 = function (props) { return (jsx(Container$
|
|
1566
|
+
var Steps$1 = function (props) { return (jsx(Container$5, { children: props.steps.map(function (_a, index) {
|
|
1532
1567
|
var title = _a.title, onClick = _a.onClick;
|
|
1533
1568
|
var step = index + 1;
|
|
1534
1569
|
var status = props.current > step
|
|
@@ -1547,14 +1582,14 @@ var Steps = function (props) {
|
|
|
1547
1582
|
return props.alignment === "vertical" ? (jsx(Steps$1, __assign({}, props), void 0)) : (jsx(Steps$2, __assign({}, props), void 0));
|
|
1548
1583
|
};
|
|
1549
1584
|
|
|
1550
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
1551
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
1585
|
+
var Fieldset = styled.fieldset(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1586
|
+
var RadioContainer = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1552
1587
|
var RadioWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
1553
|
-
var Label$
|
|
1588
|
+
var Label$3 = styled(StyledParagraph)(templateObject_4$2 || (templateObject_4$2 = __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) {
|
|
1554
1589
|
var weight = _a.weight;
|
|
1555
1590
|
return weight || 500;
|
|
1556
1591
|
}, theme.colors.darkGray.base);
|
|
1557
|
-
var templateObject_1$
|
|
1592
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$2, templateObject_4$2;
|
|
1558
1593
|
|
|
1559
1594
|
var RadioGroup = function (props) {
|
|
1560
1595
|
var onChange = function (value) {
|
|
@@ -1565,15 +1600,15 @@ var RadioGroup = function (props) {
|
|
|
1565
1600
|
if (props.onBlur)
|
|
1566
1601
|
props.onBlur(props.name);
|
|
1567
1602
|
};
|
|
1568
|
-
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$
|
|
1603
|
+
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$3, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1569
1604
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1570
|
-
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 }, void 0), jsx(Label$
|
|
1605
|
+
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 }, void 0), jsx(Label$3, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1571
1606
|
}) }, void 0)] }, void 0));
|
|
1572
1607
|
};
|
|
1573
1608
|
|
|
1574
|
-
var Container$
|
|
1575
|
-
var Label$
|
|
1576
|
-
var templateObject_1$
|
|
1609
|
+
var Container$4 = styled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
1610
|
+
var Label$2 = styled(StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1611
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1577
1612
|
|
|
1578
1613
|
var SelectField = function (props) {
|
|
1579
1614
|
var onChange = function (value) {
|
|
@@ -1584,15 +1619,15 @@ var SelectField = function (props) {
|
|
|
1584
1619
|
if (props.onBlur)
|
|
1585
1620
|
props.onBlur(props.name);
|
|
1586
1621
|
};
|
|
1587
|
-
return (jsxs(Container$
|
|
1622
|
+
return (jsxs(Container$4, { children: [jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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) {
|
|
1588
1623
|
var value = _a.value, label = _a.label;
|
|
1589
1624
|
return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1590
1625
|
}) }), void 0)] }, void 0));
|
|
1591
1626
|
};
|
|
1592
1627
|
|
|
1593
|
-
var Container$
|
|
1594
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
1595
|
-
var templateObject_1$
|
|
1628
|
+
var Container$3 = styled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
1629
|
+
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);
|
|
1630
|
+
var templateObject_1$8, templateObject_2$6;
|
|
1596
1631
|
|
|
1597
1632
|
var ToggleField = function (props) {
|
|
1598
1633
|
var onChange = function (value) {
|
|
@@ -1603,10 +1638,10 @@ var ToggleField = function (props) {
|
|
|
1603
1638
|
if (props.onBlur)
|
|
1604
1639
|
props.onBlur(props.name);
|
|
1605
1640
|
};
|
|
1606
|
-
return (jsxs(Container$
|
|
1641
|
+
return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1607
1642
|
};
|
|
1608
1643
|
|
|
1609
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
1644
|
+
var TooltipContainer = styled.div(templateObject_1$7 || (templateObject_1$7 = __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) {
|
|
1610
1645
|
var isVisible = _a.isVisible;
|
|
1611
1646
|
return (isVisible ? "100%" : "0%");
|
|
1612
1647
|
}, function (_a) {
|
|
@@ -1616,7 +1651,7 @@ var TooltipContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __
|
|
|
1616
1651
|
var x = _a.x;
|
|
1617
1652
|
return (x ? "".concat(x, "px") : "");
|
|
1618
1653
|
});
|
|
1619
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1654
|
+
var TooltipTitle = styled.div(templateObject_2$5 || (templateObject_2$5 = __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) {
|
|
1620
1655
|
var color = _a.color;
|
|
1621
1656
|
switch (color) {
|
|
1622
1657
|
default:
|
|
@@ -1626,7 +1661,7 @@ var TooltipTitle = styled.div(templateObject_2$4 || (templateObject_2$4 = __make
|
|
|
1626
1661
|
return theme.colors.lightGray.dark;
|
|
1627
1662
|
}
|
|
1628
1663
|
});
|
|
1629
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$7, templateObject_2$5;
|
|
1630
1665
|
|
|
1631
1666
|
var Tooltip = function (props) {
|
|
1632
1667
|
var tooltipRef = useRef(null);
|
|
@@ -1660,6 +1695,45 @@ var Tooltip = function (props) {
|
|
|
1660
1695
|
theme.colors.lightGray.light }, void 0) }), void 0), jsx(TooltipTitle, __assign({ color: props.color }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1661
1696
|
};
|
|
1662
1697
|
|
|
1698
|
+
var StyledTextarea = styled.textarea(templateObject_1$6 || (templateObject_1$6 = __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) {
|
|
1699
|
+
var disabled = _a.disabled;
|
|
1700
|
+
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1701
|
+
}, function (_a) {
|
|
1702
|
+
var disabled = _a.disabled;
|
|
1703
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
1704
|
+
}, function (_a) {
|
|
1705
|
+
var disabled = _a.disabled;
|
|
1706
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
1707
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
1708
|
+
var disabled = _a.disabled;
|
|
1709
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1710
|
+
}, 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));
|
|
1711
|
+
var templateObject_1$6;
|
|
1712
|
+
|
|
1713
|
+
var Textarea = function (props) {
|
|
1714
|
+
var onChange = function (e) {
|
|
1715
|
+
if (!props.disabled && !!props.onChange)
|
|
1716
|
+
props.onChange(e.target.value);
|
|
1717
|
+
};
|
|
1718
|
+
return jsx(StyledTextarea, __assign({}, props, { onChange: onChange }), void 0);
|
|
1719
|
+
};
|
|
1720
|
+
|
|
1721
|
+
var Container$2 = styled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
1722
|
+
var Label = styled(StyledParagraph)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1723
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1724
|
+
|
|
1725
|
+
var TextareaField = function (props) {
|
|
1726
|
+
var onChange = function (value) {
|
|
1727
|
+
if (props.onChange)
|
|
1728
|
+
props.onChange(props.name, value);
|
|
1729
|
+
};
|
|
1730
|
+
var onBlur = function () {
|
|
1731
|
+
if (props.onBlur)
|
|
1732
|
+
props.onBlur(props.name);
|
|
1733
|
+
};
|
|
1734
|
+
return (jsxs(Container$2, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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 }, void 0), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
|
|
1735
|
+
};
|
|
1736
|
+
|
|
1663
1737
|
var FeedbackColors = {
|
|
1664
1738
|
success: theme.colors.green.base,
|
|
1665
1739
|
error: theme.colors.red.base,
|
|
@@ -1724,6 +1798,14 @@ var Form = forwardRef(function (props, ref) {
|
|
|
1724
1798
|
element.value = field.defaultValue;
|
|
1725
1799
|
break;
|
|
1726
1800
|
}
|
|
1801
|
+
case "textarea": {
|
|
1802
|
+
var element = document.getElementById(field.name);
|
|
1803
|
+
if (!field.defaultValue)
|
|
1804
|
+
element.value = "";
|
|
1805
|
+
else
|
|
1806
|
+
element.value = field.defaultValue;
|
|
1807
|
+
break;
|
|
1808
|
+
}
|
|
1727
1809
|
case "toggle": {
|
|
1728
1810
|
var element = document.getElementById(field.name);
|
|
1729
1811
|
if (!field.defaultValue)
|
|
@@ -1832,6 +1914,9 @@ var Form = forwardRef(function (props, ref) {
|
|
|
1832
1914
|
case "date":
|
|
1833
1915
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1834
1916
|
jsx(DateInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1917
|
+
case "textarea":
|
|
1918
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1919
|
+
jsx(TextareaField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1835
1920
|
case "radio":
|
|
1836
1921
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1837
1922
|
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1901,12 +1986,10 @@ var Keyboard = function (props) {
|
|
|
1901
1986
|
right: [],
|
|
1902
1987
|
};
|
|
1903
1988
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1904
|
-
var
|
|
1905
|
-
var index = k.index, key = k.key, color = k.color, isShiftKey = k.isShiftKey;
|
|
1989
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
1906
1990
|
keys_1[index] = { character: key, color: color };
|
|
1907
|
-
if (isShiftKey)
|
|
1908
|
-
shiftKeys_1[
|
|
1909
|
-
}
|
|
1991
|
+
if (isShiftKey)
|
|
1992
|
+
shiftKeys_1[hand].push(key);
|
|
1910
1993
|
}
|
|
1911
1994
|
setKeys(keys_1);
|
|
1912
1995
|
setShiftKeys(shiftKeys_1);
|
|
@@ -1914,49 +1997,52 @@ var Keyboard = function (props) {
|
|
|
1914
1997
|
}, [props.keys]);
|
|
1915
1998
|
if (!keys)
|
|
1916
1999
|
return null;
|
|
1917
|
-
return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[
|
|
1918
|
-
keys[
|
|
1919
|
-
keys[
|
|
1920
|
-
keys[
|
|
1921
|
-
keys[
|
|
1922
|
-
keys[
|
|
1923
|
-
keys[
|
|
1924
|
-
keys[
|
|
1925
|
-
keys[
|
|
1926
|
-
keys[
|
|
1927
|
-
keys[
|
|
1928
|
-
keys[
|
|
1929
|
-
keys[
|
|
1930
|
-
keys[
|
|
1931
|
-
keys[
|
|
1932
|
-
keys[
|
|
1933
|
-
keys[
|
|
1934
|
-
keys[
|
|
1935
|
-
keys[
|
|
1936
|
-
keys[
|
|
1937
|
-
keys[
|
|
1938
|
-
keys[
|
|
1939
|
-
keys[
|
|
1940
|
-
keys[
|
|
1941
|
-
keys[
|
|
1942
|
-
keys[
|
|
1943
|
-
keys[
|
|
1944
|
-
keys[
|
|
1945
|
-
keys[
|
|
1946
|
-
keys[
|
|
1947
|
-
keys[
|
|
1948
|
-
keys[
|
|
1949
|
-
keys[
|
|
1950
|
-
keys[
|
|
1951
|
-
keys[
|
|
1952
|
-
keys[
|
|
1953
|
-
keys[
|
|
1954
|
-
keys[
|
|
1955
|
-
keys[
|
|
1956
|
-
keys[
|
|
1957
|
-
keys[
|
|
1958
|
-
keys[
|
|
1959
|
-
keys[70].character === props.activeKey }, void 0), jsx(Key, { characters: [
|
|
2000
|
+
return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
2001
|
+
keys[89].character === props.activeKey }, 44), jsx(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
2002
|
+
keys[87].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
2003
|
+
keys[85].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
2004
|
+
keys[83].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
2005
|
+
keys[81].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
2006
|
+
keys[91].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
2007
|
+
keys[90].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
2008
|
+
keys[80].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
2009
|
+
keys[82].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
2010
|
+
keys[84].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
2011
|
+
keys[86].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
2012
|
+
keys[88].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(TopRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
2013
|
+
keys[65].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
2014
|
+
keys[63].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
2015
|
+
keys[61].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
2016
|
+
keys[59].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
2017
|
+
keys[69].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
2018
|
+
keys[68].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
2019
|
+
keys[58].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
2020
|
+
keys[60].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
2021
|
+
keys[62].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[9].character === props.activeKey ||
|
|
2022
|
+
keys[64].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
2023
|
+
keys[67].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
2024
|
+
keys[66].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(StartRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
2025
|
+
keys[54].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
2026
|
+
keys[52].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
2027
|
+
keys[50].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
2028
|
+
keys[48].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
2029
|
+
keys[57].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
2030
|
+
keys[56].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
2031
|
+
keys[47].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
2032
|
+
keys[49].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
2033
|
+
keys[51].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[8].character, keys[53].character].filter(function (k) { return k !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
|
|
2034
|
+
keys[53].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
2035
|
+
keys[55].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(BottomRow, { children: [jsx(Key, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsx(Key, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
2036
|
+
keys[77].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
2037
|
+
keys[75].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
2038
|
+
keys[73].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
2039
|
+
keys[71].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
2040
|
+
keys[79].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
2041
|
+
keys[78].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[70].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
2042
|
+
keys[70].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
2043
|
+
keys[72].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
2044
|
+
keys[74].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
2045
|
+
keys[76].character === props.activeKey }, void 0), jsx(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) }, void 0)] }, void 0), jsxs(SpacebarRow, { children: [jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0)] }, void 0));
|
|
1960
2046
|
};
|
|
1961
2047
|
|
|
1962
2048
|
var Mask = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
@@ -1982,5 +2068,5 @@ var Modal = function (props) {
|
|
|
1982
2068
|
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1983
2069
|
};
|
|
1984
2070
|
|
|
1985
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Steps, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
2071
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Steps, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1986
2072
|
//# sourceMappingURL=index.es.js.map
|