@typeolymp/ui-components 1.6.0 → 1.7.1
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.js
CHANGED
|
@@ -198,7 +198,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
198
198
|
return cooked;
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
201
|
+
var StyledButton = styled__default["default"].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) {
|
|
202
202
|
var fluid = _a.fluid;
|
|
203
203
|
return (fluid ? "100%" : "fit-content");
|
|
204
204
|
}, function (_a) {
|
|
@@ -248,7 +248,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$F || (temp
|
|
|
248
248
|
? theme.button.medium.heightActive
|
|
249
249
|
: theme.button[size].heightActive;
|
|
250
250
|
});
|
|
251
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
251
|
+
var DisabledButton = styled__default["default"](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) {
|
|
252
252
|
var size = _a.size;
|
|
253
253
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
254
254
|
});
|
|
@@ -268,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$8 ||
|
|
|
268
268
|
? theme.button.medium.marginTopActive
|
|
269
269
|
: theme.button[size].marginTopActive;
|
|
270
270
|
});
|
|
271
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$8;
|
|
272
272
|
|
|
273
273
|
var Button = React.forwardRef(function (props, ref) {
|
|
274
274
|
var as = props.href || props.asAnchor ? "a" : "button";
|
|
@@ -286,7 +286,7 @@ var Button = React.forwardRef(function (props, ref) {
|
|
|
286
286
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
287
287
|
});
|
|
288
288
|
|
|
289
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
289
|
+
var StyledCheckbox = styled__default["default"].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) {
|
|
290
290
|
var checked = _a.checked, disabled = _a.disabled;
|
|
291
291
|
if (disabled)
|
|
292
292
|
return theme.colors.lightGray.darker;
|
|
@@ -307,7 +307,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$E || (templ
|
|
|
307
307
|
return theme.colors.green.base;
|
|
308
308
|
return theme.colors.lightGray.darker;
|
|
309
309
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
310
|
-
var templateObject_1$
|
|
310
|
+
var templateObject_1$H;
|
|
311
311
|
|
|
312
312
|
var Checkbox = function (props) {
|
|
313
313
|
var _a;
|
|
@@ -340,7 +340,7 @@ var Checkbox = function (props) {
|
|
|
340
340
|
return (jsxRuntime.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 && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.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)), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
341
341
|
};
|
|
342
342
|
|
|
343
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
343
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
344
344
|
var size = _a.size;
|
|
345
345
|
switch (size) {
|
|
346
346
|
case "small":
|
|
@@ -363,20 +363,20 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$D || (templateOb
|
|
|
363
363
|
return "27px";
|
|
364
364
|
}
|
|
365
365
|
});
|
|
366
|
-
var templateObject_1$
|
|
366
|
+
var templateObject_1$G;
|
|
367
367
|
|
|
368
368
|
var parsers = {};
|
|
369
369
|
|
|
370
370
|
Object.defineProperty(parsers, "__esModule", { value: true });
|
|
371
|
-
|
|
371
|
+
parsers.getKeyboardLayoutByLocale = getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
|
|
372
372
|
var getNativeLanguageByLocale = function (locale) {
|
|
373
373
|
var nativeLanguages = {
|
|
374
374
|
"en-GB": "English (UK)",
|
|
375
375
|
"nl-NL": "Nederlands",
|
|
376
376
|
"nl-BE": "Nederlands (BE)",
|
|
377
|
-
"fr-BE": "Français (BE)",
|
|
378
|
-
"fr-FR": "Français",
|
|
379
|
-
"de-DE": "Deutsch",
|
|
377
|
+
// "fr-BE": "Français (BE)",
|
|
378
|
+
// "fr-FR": "Français",
|
|
379
|
+
// "de-DE": "Deutsch",
|
|
380
380
|
};
|
|
381
381
|
return nativeLanguages[locale];
|
|
382
382
|
};
|
|
@@ -388,7 +388,19 @@ parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
|
|
|
388
388
|
var getCountryCodeByLocale = function (locale) {
|
|
389
389
|
return locale.split("-")[1];
|
|
390
390
|
};
|
|
391
|
-
getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
391
|
+
var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
392
|
+
var getKeyboardLayoutByLocale = function (locale) {
|
|
393
|
+
var keyboardLayouts = {
|
|
394
|
+
"en-GB": "qwerty-uk",
|
|
395
|
+
"nl-NL": "qwerty-nl",
|
|
396
|
+
"nl-BE": "azerty-be",
|
|
397
|
+
// "fr-BE": "azerty",
|
|
398
|
+
// "fr-FR": "azerty",
|
|
399
|
+
// "de-DE": "qwerty",
|
|
400
|
+
};
|
|
401
|
+
return keyboardLayouts[locale];
|
|
402
|
+
};
|
|
403
|
+
parsers.getKeyboardLayoutByLocale = getKeyboardLayoutByLocale;
|
|
392
404
|
|
|
393
405
|
var flags = {
|
|
394
406
|
NL: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -399,7 +411,7 @@ var flags = {
|
|
|
399
411
|
};
|
|
400
412
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
401
413
|
|
|
402
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
414
|
+
var StyledHeading = styled__default["default"].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) {
|
|
403
415
|
var type = _a.type;
|
|
404
416
|
return theme.heading[type].fontSize;
|
|
405
417
|
}, function (_a) {
|
|
@@ -423,14 +435,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$C || (templ
|
|
|
423
435
|
var align = _a.align;
|
|
424
436
|
return align;
|
|
425
437
|
});
|
|
426
|
-
var templateObject_1$
|
|
438
|
+
var templateObject_1$F;
|
|
427
439
|
|
|
428
440
|
var Heading = function (props) {
|
|
429
441
|
var element = !!props.as ? props.as : props.type;
|
|
430
442
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
431
443
|
};
|
|
432
444
|
|
|
433
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
445
|
+
var Wrapper$8 = styled__default["default"].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) {
|
|
434
446
|
var size = _a.size;
|
|
435
447
|
return theme.icon[size] || theme.icon.medium;
|
|
436
448
|
}, function (_a) {
|
|
@@ -460,7 +472,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$B || (templateOb
|
|
|
460
472
|
return theme.colors.lightGray.light;
|
|
461
473
|
}
|
|
462
474
|
});
|
|
463
|
-
var templateObject_1$
|
|
475
|
+
var templateObject_1$E;
|
|
464
476
|
|
|
465
477
|
var icons = {
|
|
466
478
|
check: (jsxRuntime.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)),
|
|
@@ -485,7 +497,7 @@ var icons = {
|
|
|
485
497
|
};
|
|
486
498
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
487
499
|
|
|
488
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
500
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
489
501
|
var size = _a.size;
|
|
490
502
|
switch (size) {
|
|
491
503
|
default:
|
|
@@ -497,7 +509,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$A || (templateOb
|
|
|
497
509
|
return "118px";
|
|
498
510
|
}
|
|
499
511
|
});
|
|
500
|
-
var templateObject_1$
|
|
512
|
+
var templateObject_1$D;
|
|
501
513
|
|
|
502
514
|
var illustrations = {
|
|
503
515
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.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)),
|
|
@@ -512,14 +524,14 @@ var illustrations = {
|
|
|
512
524
|
};
|
|
513
525
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
514
526
|
|
|
515
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
527
|
+
var InputIconWrapper = styled__default["default"].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) {
|
|
516
528
|
var isChanged = _a.isChanged;
|
|
517
529
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
518
530
|
}, function (_a) {
|
|
519
531
|
var disabled = _a.disabled;
|
|
520
532
|
return (disabled ? "not-allowed" : "pointer");
|
|
521
533
|
});
|
|
522
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
534
|
+
var StyledInput = styled__default["default"].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) {
|
|
523
535
|
var disabled = _a.disabled;
|
|
524
536
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
525
537
|
}, function (_a) {
|
|
@@ -532,7 +544,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$n || (templa
|
|
|
532
544
|
var disabled = _a.disabled;
|
|
533
545
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
534
546
|
}, 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));
|
|
535
|
-
var templateObject_1$
|
|
547
|
+
var templateObject_1$C, templateObject_2$p;
|
|
536
548
|
|
|
537
549
|
var PasswordInput = function (props) {
|
|
538
550
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -719,7 +731,7 @@ Input.Date = DateInput;
|
|
|
719
731
|
|
|
720
732
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.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), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
721
733
|
|
|
722
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
734
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
723
735
|
var size = _a.size;
|
|
724
736
|
switch (size) {
|
|
725
737
|
default:
|
|
@@ -729,7 +741,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$y || (templateOb
|
|
|
729
741
|
return "116px";
|
|
730
742
|
}
|
|
731
743
|
});
|
|
732
|
-
var templateObject_1$
|
|
744
|
+
var templateObject_1$B;
|
|
733
745
|
|
|
734
746
|
var medals = {
|
|
735
747
|
small: {
|
|
@@ -745,11 +757,11 @@ var medals = {
|
|
|
745
757
|
};
|
|
746
758
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
747
759
|
|
|
748
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
760
|
+
var Wrapper$5 = styled__default["default"].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) {
|
|
749
761
|
var disabled = _a.disabled;
|
|
750
762
|
return (disabled ? "49.5px" : "");
|
|
751
763
|
});
|
|
752
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
764
|
+
var StyledInputNumber = styled__default["default"].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) {
|
|
753
765
|
var disabled = _a.disabled;
|
|
754
766
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
755
767
|
}, function (_a) {
|
|
@@ -762,7 +774,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$m || (
|
|
|
762
774
|
var disabled = _a.disabled;
|
|
763
775
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
764
776
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
765
|
-
var templateObject_1$
|
|
777
|
+
var templateObject_1$A, templateObject_2$o;
|
|
766
778
|
|
|
767
779
|
var Number = function (props) {
|
|
768
780
|
var inputRef = React.useRef(null);
|
|
@@ -799,7 +811,7 @@ var Number = function (props) {
|
|
|
799
811
|
return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
800
812
|
};
|
|
801
813
|
|
|
802
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
814
|
+
var StyledParagraph = styled__default["default"].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) {
|
|
803
815
|
var size = _a.size;
|
|
804
816
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
805
817
|
}, function (_a) {
|
|
@@ -831,11 +843,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$w || (templa
|
|
|
831
843
|
var align = _a.align;
|
|
832
844
|
return align;
|
|
833
845
|
});
|
|
834
|
-
var templateObject_1$
|
|
846
|
+
var templateObject_1$z;
|
|
835
847
|
|
|
836
848
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
837
849
|
|
|
838
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
850
|
+
var StyledRadio = styled__default["default"].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) {
|
|
839
851
|
var checked = _a.checked, disabled = _a.disabled;
|
|
840
852
|
if (disabled)
|
|
841
853
|
return theme.colors.lightGray.darker;
|
|
@@ -863,7 +875,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$v || (template
|
|
|
863
875
|
return theme.colors.green.base;
|
|
864
876
|
return "";
|
|
865
877
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
866
|
-
var templateObject_1$
|
|
878
|
+
var templateObject_1$y;
|
|
867
879
|
|
|
868
880
|
var Radio = function (props) {
|
|
869
881
|
var _a, _b;
|
|
@@ -895,11 +907,11 @@ var Radio = function (props) {
|
|
|
895
907
|
return (jsxRuntime.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: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
896
908
|
};
|
|
897
909
|
|
|
898
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
910
|
+
var Wrapper$4 = styled__default["default"].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) {
|
|
899
911
|
var disabled = _a.disabled;
|
|
900
912
|
return (disabled ? "not-allowed" : "pointer");
|
|
901
913
|
});
|
|
902
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
914
|
+
var StyledSelect = styled__default["default"].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) {
|
|
903
915
|
var disabled = _a.disabled;
|
|
904
916
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
905
917
|
}, function (_a) {
|
|
@@ -912,7 +924,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$l || (temp
|
|
|
912
924
|
var isChanged = _a.isChanged;
|
|
913
925
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
914
926
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
915
|
-
var templateObject_1$
|
|
927
|
+
var templateObject_1$x, templateObject_2$n;
|
|
916
928
|
|
|
917
929
|
var Select = function (props) {
|
|
918
930
|
var _a;
|
|
@@ -934,18 +946,18 @@ var Select = function (props) {
|
|
|
934
946
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
935
947
|
};
|
|
936
948
|
|
|
937
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
949
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
938
950
|
var horizontal = _a.horizontal;
|
|
939
951
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
940
952
|
}, function (_a) {
|
|
941
953
|
var vertical = _a.vertical;
|
|
942
954
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
943
955
|
});
|
|
944
|
-
var templateObject_1$
|
|
956
|
+
var templateObject_1$w;
|
|
945
957
|
|
|
946
958
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
947
959
|
|
|
948
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
960
|
+
var StyledSubheading = styled__default["default"].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) {
|
|
949
961
|
var size = _a.size;
|
|
950
962
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
951
963
|
}, function (_a) {
|
|
@@ -973,11 +985,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$s || (templ
|
|
|
973
985
|
return theme.colors.darkGray.dark;
|
|
974
986
|
}
|
|
975
987
|
});
|
|
976
|
-
var templateObject_1$
|
|
988
|
+
var templateObject_1$v;
|
|
977
989
|
|
|
978
990
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
979
991
|
|
|
980
|
-
var Container$
|
|
992
|
+
var Container$f = styled__default["default"].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) {
|
|
981
993
|
var disabled = _a.disabled;
|
|
982
994
|
return (disabled ? "not-allowed" : "pointer");
|
|
983
995
|
}, function (_a) {
|
|
@@ -995,7 +1007,7 @@ var Container$d = styled__default["default"].div(templateObject_1$r || (template
|
|
|
995
1007
|
var disabled = _a.disabled;
|
|
996
1008
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
997
1009
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
998
|
-
var templateObject_1$
|
|
1010
|
+
var templateObject_1$u;
|
|
999
1011
|
|
|
1000
1012
|
var Toggle = function (props) {
|
|
1001
1013
|
var _a;
|
|
@@ -1023,10 +1035,10 @@ var Toggle = function (props) {
|
|
|
1023
1035
|
props.onChange(newValue);
|
|
1024
1036
|
}
|
|
1025
1037
|
};
|
|
1026
|
-
return (jsxRuntime.jsx(Container$
|
|
1038
|
+
return (jsxRuntime.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: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
1027
1039
|
};
|
|
1028
1040
|
|
|
1029
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
1041
|
+
var Wrapper$3 = styled__default["default"].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) {
|
|
1030
1042
|
var level = _a.level;
|
|
1031
1043
|
switch (level) {
|
|
1032
1044
|
case 1:
|
|
@@ -1037,7 +1049,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$q || (templateOb
|
|
|
1037
1049
|
return "70px";
|
|
1038
1050
|
}
|
|
1039
1051
|
});
|
|
1040
|
-
var templateObject_1$
|
|
1052
|
+
var templateObject_1$t;
|
|
1041
1053
|
|
|
1042
1054
|
var trophies = {
|
|
1043
1055
|
1: {
|
|
@@ -1073,7 +1085,7 @@ var trophies = {
|
|
|
1073
1085
|
};
|
|
1074
1086
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
1075
1087
|
|
|
1076
|
-
var Container$
|
|
1088
|
+
var Container$e = styled__default["default"].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) {
|
|
1077
1089
|
var type = _a.type;
|
|
1078
1090
|
switch (type) {
|
|
1079
1091
|
case "success":
|
|
@@ -1090,11 +1102,11 @@ var Container$c = styled__default["default"].div(templateObject_1$p || (template
|
|
|
1090
1102
|
return theme.colors.red.base;
|
|
1091
1103
|
}
|
|
1092
1104
|
});
|
|
1093
|
-
var templateObject_1$
|
|
1105
|
+
var templateObject_1$s;
|
|
1094
1106
|
|
|
1095
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1107
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$e, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
1096
1108
|
|
|
1097
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
1109
|
+
var StyledCard = styled__default["default"].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) {
|
|
1098
1110
|
var ellipse = _a.ellipse;
|
|
1099
1111
|
return ellipse
|
|
1100
1112
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1103,23 +1115,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$o || (templateO
|
|
|
1103
1115
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1104
1116
|
: "";
|
|
1105
1117
|
});
|
|
1106
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
1118
|
+
var Ellipse = styled__default["default"].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) {
|
|
1107
1119
|
var color = _a.color;
|
|
1108
1120
|
return color ? theme.colors[color].light : "";
|
|
1109
1121
|
});
|
|
1110
1122
|
var Content = styled__default["default"].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"])));
|
|
1111
|
-
var templateObject_1$
|
|
1123
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$7;
|
|
1112
1124
|
|
|
1113
1125
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }, void 0), jsxRuntime.jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
1114
1126
|
|
|
1115
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
1116
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
1127
|
+
var Fieldset$1 = styled__default["default"].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"])));
|
|
1128
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1117
1129
|
var CheckboxWrapper = styled__default["default"].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"])));
|
|
1118
|
-
var Label$
|
|
1130
|
+
var Label$8 = styled__default["default"](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) {
|
|
1119
1131
|
var weight = _a.weight;
|
|
1120
1132
|
return weight || 500;
|
|
1121
1133
|
}, theme.colors.darkGray.base);
|
|
1122
|
-
var templateObject_1$
|
|
1134
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$6, templateObject_4$5;
|
|
1123
1135
|
|
|
1124
1136
|
var Checkboxes = function (props) {
|
|
1125
1137
|
var _a = React.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1136,15 +1148,38 @@ var Checkboxes = function (props) {
|
|
|
1136
1148
|
if (props.onBlur)
|
|
1137
1149
|
props.onBlur(props.name);
|
|
1138
1150
|
};
|
|
1139
|
-
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1151
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$8, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1140
1152
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1141
|
-
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$
|
|
1153
|
+
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$8, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1142
1154
|
}) }, void 0)] }, void 0));
|
|
1143
1155
|
};
|
|
1144
1156
|
|
|
1145
|
-
var Container$
|
|
1146
|
-
var
|
|
1147
|
-
var
|
|
1157
|
+
var Container$d = styled__default["default"].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);
|
|
1158
|
+
var Item = styled__default["default"].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) {
|
|
1159
|
+
var isOpen = _a.isOpen;
|
|
1160
|
+
return (isOpen ? "" : "none");
|
|
1161
|
+
}, theme.colors.lightGray.darker);
|
|
1162
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1163
|
+
|
|
1164
|
+
var Collapse = function (props) {
|
|
1165
|
+
var _a = React.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
1166
|
+
var onClickItem = function (index, isOpen) {
|
|
1167
|
+
if (isOpen) {
|
|
1168
|
+
setOpenItems(function (prevState) { return prevState.filter(function (item) { return item !== index; }); });
|
|
1169
|
+
}
|
|
1170
|
+
else {
|
|
1171
|
+
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1172
|
+
}
|
|
1173
|
+
};
|
|
1174
|
+
return (jsxRuntime.jsx(Container$d, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1175
|
+
var isOpen = openItems.includes(index);
|
|
1176
|
+
return (jsxRuntime.jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: item.title }), void 0), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" }, void 0)] }, void 0), jsxRuntime.jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }), void 0)] }), "".concat(item.title, "-").concat(index)));
|
|
1177
|
+
}) }), void 0));
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1180
|
+
var Container$c = styled__default["default"].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"])));
|
|
1181
|
+
var Label$7 = styled__default["default"](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);
|
|
1182
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1148
1183
|
|
|
1149
1184
|
var DateInputField = function (props) {
|
|
1150
1185
|
var onChange = function (value) {
|
|
@@ -1155,12 +1190,12 @@ var DateInputField = function (props) {
|
|
|
1155
1190
|
if (props.onBlur)
|
|
1156
1191
|
props.onBlur(props.name);
|
|
1157
1192
|
};
|
|
1158
|
-
return (jsxRuntime.jsxs(Container$
|
|
1193
|
+
return (jsxRuntime.jsxs(Container$c, { children: [jsxRuntime.jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
|
|
1159
1194
|
};
|
|
1160
1195
|
|
|
1161
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
1162
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
1163
|
-
var templateObject_1$
|
|
1196
|
+
var StyledIconButton = styled__default["default"](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"])));
|
|
1197
|
+
var GhostIconButton = styled__default["default"](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"])));
|
|
1198
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1164
1199
|
|
|
1165
1200
|
var IconButton = function (props) {
|
|
1166
1201
|
if (props.color === "white")
|
|
@@ -1168,9 +1203,9 @@ var IconButton = function (props) {
|
|
|
1168
1203
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1169
1204
|
};
|
|
1170
1205
|
|
|
1171
|
-
var Container$
|
|
1172
|
-
var Label$
|
|
1173
|
-
var templateObject_1$
|
|
1206
|
+
var Container$b = styled__default["default"].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"])));
|
|
1207
|
+
var Label$6 = styled__default["default"](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);
|
|
1208
|
+
var templateObject_1$m, templateObject_2$h;
|
|
1174
1209
|
|
|
1175
1210
|
var InputField = function (props) {
|
|
1176
1211
|
var onChange = function (value) {
|
|
@@ -1181,18 +1216,18 @@ var InputField = function (props) {
|
|
|
1181
1216
|
if (props.onBlur)
|
|
1182
1217
|
props.onBlur(props.name);
|
|
1183
1218
|
};
|
|
1184
|
-
return (jsxRuntime.jsxs(Container$
|
|
1219
|
+
return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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 && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
|
|
1185
1220
|
};
|
|
1186
1221
|
|
|
1187
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
1222
|
+
var Wrapper$2 = styled__default["default"].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) {
|
|
1188
1223
|
var chevron = _a.chevron;
|
|
1189
1224
|
return (chevron === "left" ? "4px" : "");
|
|
1190
1225
|
}, function (_a) {
|
|
1191
1226
|
var chevron = _a.chevron;
|
|
1192
1227
|
return (chevron === "right" ? "4px" : "");
|
|
1193
1228
|
});
|
|
1194
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1195
|
-
var templateObject_1$
|
|
1229
|
+
var StyledLink = styled__default["default"](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);
|
|
1230
|
+
var templateObject_1$l, templateObject_2$g;
|
|
1196
1231
|
|
|
1197
1232
|
var Link = function (props) {
|
|
1198
1233
|
var onClick = function (e) {
|
|
@@ -1204,15 +1239,15 @@ var Link = function (props) {
|
|
|
1204
1239
|
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsxRuntime.jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
1205
1240
|
};
|
|
1206
1241
|
|
|
1207
|
-
var Container$
|
|
1242
|
+
var Container$a = styled__default["default"].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) {
|
|
1208
1243
|
var text = _a.text;
|
|
1209
1244
|
return (text ? "20px" : "");
|
|
1210
1245
|
});
|
|
1211
|
-
var templateObject_1$
|
|
1246
|
+
var templateObject_1$k;
|
|
1212
1247
|
|
|
1213
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1248
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$a, __assign({}, props, { children: [jsxRuntime.jsx(BeatLoader__default["default"], { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1214
1249
|
|
|
1215
|
-
var Container$
|
|
1250
|
+
var Container$9 = styled__default["default"].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) {
|
|
1216
1251
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1217
1252
|
if (dropdownIsVisible) {
|
|
1218
1253
|
switch (color) {
|
|
@@ -1225,7 +1260,7 @@ var Container$8 = styled__default["default"].div(templateObject_1$h || (template
|
|
|
1225
1260
|
}
|
|
1226
1261
|
return "";
|
|
1227
1262
|
});
|
|
1228
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
1263
|
+
var SelectedLocaleWrapper = styled__default["default"].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"])));
|
|
1229
1264
|
var DropdownContainer = styled__default["default"].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) {
|
|
1230
1265
|
var color = _a.color;
|
|
1231
1266
|
switch (color) {
|
|
@@ -1237,7 +1272,7 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$5 || (te
|
|
|
1237
1272
|
}
|
|
1238
1273
|
});
|
|
1239
1274
|
var Locale = styled__default["default"].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);
|
|
1240
|
-
var templateObject_1$
|
|
1275
|
+
var templateObject_1$j, templateObject_2$f, templateObject_3$5, templateObject_4$4;
|
|
1241
1276
|
|
|
1242
1277
|
var LocaleSelect = function (props) {
|
|
1243
1278
|
var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1246,22 +1281,22 @@ var LocaleSelect = function (props) {
|
|
|
1246
1281
|
setLocale(locale);
|
|
1247
1282
|
props.onChange(locale);
|
|
1248
1283
|
};
|
|
1249
|
-
return (jsxRuntime.jsxs(Container$
|
|
1284
|
+
return (jsxRuntime.jsxs(Container$9, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1250
1285
|
.filter(function (l) { return l !== locale; })
|
|
1251
1286
|
.map(function (locale) { return (jsxRuntime.jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
|
|
1252
1287
|
};
|
|
1253
1288
|
|
|
1254
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1255
|
-
var templateObject_1$
|
|
1289
|
+
var Wrapper$1 = styled__default["default"].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"])));
|
|
1290
|
+
var templateObject_1$i;
|
|
1256
1291
|
|
|
1257
1292
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1258
1293
|
|
|
1259
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1294
|
+
var NotificationContainer = styled__default["default"].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) {
|
|
1260
1295
|
var contrast = _a.contrast;
|
|
1261
1296
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1262
1297
|
});
|
|
1263
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
1264
|
-
var templateObject_1$
|
|
1298
|
+
var ButtonContainer = styled__default["default"].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"])));
|
|
1299
|
+
var templateObject_1$h, templateObject_2$e;
|
|
1265
1300
|
|
|
1266
1301
|
var Notification = function (props) {
|
|
1267
1302
|
if (!props.isVisible)
|
|
@@ -1269,9 +1304,9 @@ var Notification = function (props) {
|
|
|
1269
1304
|
return (jsxRuntime.jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }, void 0), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React.createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }, void 0))] }), void 0));
|
|
1270
1305
|
};
|
|
1271
1306
|
|
|
1272
|
-
var Container$
|
|
1273
|
-
var Label$
|
|
1274
|
-
var templateObject_1$
|
|
1307
|
+
var Container$8 = styled__default["default"].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"])));
|
|
1308
|
+
var Label$5 = styled__default["default"](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);
|
|
1309
|
+
var templateObject_1$g, templateObject_2$d;
|
|
1275
1310
|
|
|
1276
1311
|
var NumberField = function (props) {
|
|
1277
1312
|
var onChange = function (value) {
|
|
@@ -1282,7 +1317,7 @@ var NumberField = function (props) {
|
|
|
1282
1317
|
if (props.onBlur)
|
|
1283
1318
|
props.onBlur(props.name);
|
|
1284
1319
|
};
|
|
1285
|
-
return (jsxRuntime.jsxs(Container$
|
|
1320
|
+
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
|
|
1286
1321
|
};
|
|
1287
1322
|
|
|
1288
1323
|
var expressions = {};
|
|
@@ -1333,15 +1368,15 @@ var isStrongPassword = function (password) {
|
|
|
1333
1368
|
exports.isStrongPassword = isStrongPassword;
|
|
1334
1369
|
}(expressions));
|
|
1335
1370
|
|
|
1336
|
-
var Container$
|
|
1337
|
-
var Label$
|
|
1371
|
+
var Container$7 = styled__default["default"].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"])));
|
|
1372
|
+
var Label$4 = styled__default["default"](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);
|
|
1338
1373
|
var HelperContainer = styled__default["default"].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"])));
|
|
1339
1374
|
var fadeIn = styled.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"])));
|
|
1340
1375
|
var Helper = styled__default["default"](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) {
|
|
1341
1376
|
var isOk = _a.isOk;
|
|
1342
1377
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1343
1378
|
}, fadeIn);
|
|
1344
|
-
var templateObject_1$
|
|
1379
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$4, templateObject_4$3, templateObject_5$2;
|
|
1345
1380
|
|
|
1346
1381
|
var translations = {
|
|
1347
1382
|
"nl-NL": {
|
|
@@ -1362,24 +1397,24 @@ var translations = {
|
|
|
1362
1397
|
specialCharacter: "At least 1 special character",
|
|
1363
1398
|
length: "At least 8 characters",
|
|
1364
1399
|
},
|
|
1365
|
-
"fr-FR": {
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
},
|
|
1371
|
-
"fr-BE": {
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
},
|
|
1377
|
-
"de-DE": {
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
},
|
|
1400
|
+
// "fr-FR": {
|
|
1401
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1402
|
+
// number: "Au moins un chiffre",
|
|
1403
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1404
|
+
// length: "Au moins 8 caractères",
|
|
1405
|
+
// },
|
|
1406
|
+
// "fr-BE": {
|
|
1407
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1408
|
+
// number: "Au moins un chiffre",
|
|
1409
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1410
|
+
// length: "Au moins 8 caractères",
|
|
1411
|
+
// },
|
|
1412
|
+
// "de-DE": {
|
|
1413
|
+
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
1414
|
+
// number: "Mindestens 1 Zahl",
|
|
1415
|
+
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
1416
|
+
// length: "Mindestens 8 Zeichen",
|
|
1417
|
+
// },
|
|
1383
1418
|
};
|
|
1384
1419
|
|
|
1385
1420
|
var PasswordInputField = function (props) {
|
|
@@ -1398,7 +1433,7 @@ var PasswordInputField = function (props) {
|
|
|
1398
1433
|
if (props.onBlur)
|
|
1399
1434
|
props.onBlur(props.name);
|
|
1400
1435
|
};
|
|
1401
|
-
return (jsxRuntime.jsxs(Container$
|
|
1436
|
+
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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 ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helper].capitalLetter] }), void 0), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helper].number] }), void 0), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helper].specialCharacter] }), void 0), jsxRuntime.jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helper].length] }), void 0)] }, void 0)) : null] }, void 0));
|
|
1402
1437
|
};
|
|
1403
1438
|
|
|
1404
1439
|
var generateRandomString = function (length) {
|
|
@@ -1411,7 +1446,7 @@ var generateRandomString = function (length) {
|
|
|
1411
1446
|
return string;
|
|
1412
1447
|
};
|
|
1413
1448
|
|
|
1414
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1449
|
+
var PopupContainer = styled__default["default"].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) {
|
|
1415
1450
|
var isVisible = _a.isVisible;
|
|
1416
1451
|
return (isVisible ? "100%" : "0%");
|
|
1417
1452
|
}, function (_a) {
|
|
@@ -1424,7 +1459,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$c || (templ
|
|
|
1424
1459
|
var contrast = _a.contrast;
|
|
1425
1460
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1426
1461
|
});
|
|
1427
|
-
var templateObject_1$
|
|
1462
|
+
var templateObject_1$e;
|
|
1428
1463
|
|
|
1429
1464
|
var Popup = function (props) {
|
|
1430
1465
|
var popupRef = React.useRef(null);
|
|
@@ -1460,8 +1495,8 @@ var Popup = function (props) {
|
|
|
1460
1495
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsxRuntime.jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
1461
1496
|
};
|
|
1462
1497
|
|
|
1463
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1464
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1498
|
+
var Wrapper = styled__default["default"].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"])));
|
|
1499
|
+
var StyledProgressBar = styled__default["default"].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) {
|
|
1465
1500
|
var showInfo = _a.showInfo;
|
|
1466
1501
|
return (showInfo ? "10px" : "");
|
|
1467
1502
|
});
|
|
@@ -1472,12 +1507,12 @@ var Indicator = styled__default["default"].div(templateObject_3$3 || (templateOb
|
|
|
1472
1507
|
var color = _a.color;
|
|
1473
1508
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1474
1509
|
});
|
|
1475
|
-
var templateObject_1$
|
|
1510
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$3;
|
|
1476
1511
|
|
|
1477
1512
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign({}, props, { children: jsxRuntime.jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
1478
1513
|
|
|
1479
|
-
var Container$
|
|
1480
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
1514
|
+
var Container$6 = styled__default["default"].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"])));
|
|
1515
|
+
var Step$1 = styled__default["default"].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) {
|
|
1481
1516
|
var status = _a.status;
|
|
1482
1517
|
return (!!status ? "pointer" : "not-allowed");
|
|
1483
1518
|
}, function (_a) {
|
|
@@ -1499,9 +1534,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$9 || (templateObject
|
|
|
1499
1534
|
var hasTitle = _a.hasTitle;
|
|
1500
1535
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1501
1536
|
}, theme.colors.lightGray.dark);
|
|
1502
|
-
var templateObject_1$
|
|
1537
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1503
1538
|
|
|
1504
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1539
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$6, { children: props.steps.map(function (_a, index) {
|
|
1505
1540
|
var title = _a.title, onClick = _a.onClick;
|
|
1506
1541
|
var step = index + 1;
|
|
1507
1542
|
var status = props.current > step
|
|
@@ -1516,8 +1551,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children:
|
|
|
1516
1551
|
return (jsxRuntime.jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), title && jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1517
1552
|
}) }, void 0)); };
|
|
1518
1553
|
|
|
1519
|
-
var Container$
|
|
1520
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
1554
|
+
var Container$5 = styled__default["default"].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"])));
|
|
1555
|
+
var Step = styled__default["default"].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) {
|
|
1521
1556
|
var status = _a.status;
|
|
1522
1557
|
return (!!status ? "pointer" : "not-allowed");
|
|
1523
1558
|
}, function (_a) {
|
|
@@ -1536,9 +1571,9 @@ var Step = styled__default["default"].li(templateObject_2$8 || (templateObject_2
|
|
|
1536
1571
|
? theme.colors.lightGray.light
|
|
1537
1572
|
: theme.colors.darkGray.light;
|
|
1538
1573
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1539
|
-
var templateObject_1$
|
|
1574
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1540
1575
|
|
|
1541
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1576
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$5, { children: props.steps.map(function (_a, index) {
|
|
1542
1577
|
var title = _a.title, onClick = _a.onClick;
|
|
1543
1578
|
var step = index + 1;
|
|
1544
1579
|
var status = props.current > step
|
|
@@ -1557,14 +1592,14 @@ var Steps = function (props) {
|
|
|
1557
1592
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign({}, props), void 0)) : (jsxRuntime.jsx(Steps$2, __assign({}, props), void 0));
|
|
1558
1593
|
};
|
|
1559
1594
|
|
|
1560
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
1561
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
1595
|
+
var Fieldset = styled__default["default"].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"])));
|
|
1596
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1562
1597
|
var RadioWrapper = styled__default["default"].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"])));
|
|
1563
|
-
var Label$
|
|
1598
|
+
var Label$3 = styled__default["default"](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) {
|
|
1564
1599
|
var weight = _a.weight;
|
|
1565
1600
|
return weight || 500;
|
|
1566
1601
|
}, theme.colors.darkGray.base);
|
|
1567
|
-
var templateObject_1$
|
|
1602
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$2, templateObject_4$2;
|
|
1568
1603
|
|
|
1569
1604
|
var RadioGroup = function (props) {
|
|
1570
1605
|
var onChange = function (value) {
|
|
@@ -1575,15 +1610,15 @@ var RadioGroup = function (props) {
|
|
|
1575
1610
|
if (props.onBlur)
|
|
1576
1611
|
props.onBlur(props.name);
|
|
1577
1612
|
};
|
|
1578
|
-
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1613
|
+
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$3, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1579
1614
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1580
|
-
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$
|
|
1615
|
+
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1581
1616
|
}) }, void 0)] }, void 0));
|
|
1582
1617
|
};
|
|
1583
1618
|
|
|
1584
|
-
var Container$
|
|
1585
|
-
var Label$
|
|
1586
|
-
var templateObject_1$
|
|
1619
|
+
var Container$4 = styled__default["default"].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"])));
|
|
1620
|
+
var Label$2 = styled__default["default"](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);
|
|
1621
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1587
1622
|
|
|
1588
1623
|
var SelectField = function (props) {
|
|
1589
1624
|
var onChange = function (value) {
|
|
@@ -1594,15 +1629,15 @@ var SelectField = function (props) {
|
|
|
1594
1629
|
if (props.onBlur)
|
|
1595
1630
|
props.onBlur(props.name);
|
|
1596
1631
|
};
|
|
1597
|
-
return (jsxRuntime.jsxs(Container$
|
|
1632
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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) {
|
|
1598
1633
|
var value = _a.value, label = _a.label;
|
|
1599
1634
|
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1600
1635
|
}) }), void 0)] }, void 0));
|
|
1601
1636
|
};
|
|
1602
1637
|
|
|
1603
|
-
var Container$
|
|
1604
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1605
|
-
var templateObject_1$
|
|
1638
|
+
var Container$3 = styled__default["default"].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"])));
|
|
1639
|
+
var Label$1 = styled__default["default"](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);
|
|
1640
|
+
var templateObject_1$8, templateObject_2$6;
|
|
1606
1641
|
|
|
1607
1642
|
var ToggleField = function (props) {
|
|
1608
1643
|
var onChange = function (value) {
|
|
@@ -1613,10 +1648,10 @@ var ToggleField = function (props) {
|
|
|
1613
1648
|
if (props.onBlur)
|
|
1614
1649
|
props.onBlur(props.name);
|
|
1615
1650
|
};
|
|
1616
|
-
return (jsxRuntime.jsxs(Container$
|
|
1651
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
|
|
1617
1652
|
};
|
|
1618
1653
|
|
|
1619
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
1654
|
+
var TooltipContainer = styled__default["default"].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) {
|
|
1620
1655
|
var isVisible = _a.isVisible;
|
|
1621
1656
|
return (isVisible ? "100%" : "0%");
|
|
1622
1657
|
}, function (_a) {
|
|
@@ -1626,7 +1661,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$5 || (tem
|
|
|
1626
1661
|
var x = _a.x;
|
|
1627
1662
|
return (x ? "".concat(x, "px") : "");
|
|
1628
1663
|
});
|
|
1629
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
1664
|
+
var TooltipTitle = styled__default["default"].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) {
|
|
1630
1665
|
var color = _a.color;
|
|
1631
1666
|
switch (color) {
|
|
1632
1667
|
default:
|
|
@@ -1636,7 +1671,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$4 || (templat
|
|
|
1636
1671
|
return theme.colors.lightGray.dark;
|
|
1637
1672
|
}
|
|
1638
1673
|
});
|
|
1639
|
-
var templateObject_1$
|
|
1674
|
+
var templateObject_1$7, templateObject_2$5;
|
|
1640
1675
|
|
|
1641
1676
|
var Tooltip = function (props) {
|
|
1642
1677
|
var tooltipRef = React.useRef(null);
|
|
@@ -1670,6 +1705,45 @@ var Tooltip = function (props) {
|
|
|
1670
1705
|
theme.colors.lightGray.light }, void 0) }), void 0), jsxRuntime.jsx(TooltipTitle, __assign({ color: props.color }, { children: jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1671
1706
|
};
|
|
1672
1707
|
|
|
1708
|
+
var StyledTextarea = styled__default["default"].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) {
|
|
1709
|
+
var disabled = _a.disabled;
|
|
1710
|
+
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1711
|
+
}, function (_a) {
|
|
1712
|
+
var disabled = _a.disabled;
|
|
1713
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
1714
|
+
}, function (_a) {
|
|
1715
|
+
var disabled = _a.disabled;
|
|
1716
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
1717
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
1718
|
+
var disabled = _a.disabled;
|
|
1719
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1720
|
+
}, 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));
|
|
1721
|
+
var templateObject_1$6;
|
|
1722
|
+
|
|
1723
|
+
var Textarea = function (props) {
|
|
1724
|
+
var onChange = function (e) {
|
|
1725
|
+
if (!props.disabled && !!props.onChange)
|
|
1726
|
+
props.onChange(e.target.value);
|
|
1727
|
+
};
|
|
1728
|
+
return jsxRuntime.jsx(StyledTextarea, __assign({}, props, { onChange: onChange }), void 0);
|
|
1729
|
+
};
|
|
1730
|
+
|
|
1731
|
+
var Container$2 = styled__default["default"].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"])));
|
|
1732
|
+
var Label = styled__default["default"](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);
|
|
1733
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1734
|
+
|
|
1735
|
+
var TextareaField = function (props) {
|
|
1736
|
+
var onChange = function (value) {
|
|
1737
|
+
if (props.onChange)
|
|
1738
|
+
props.onChange(props.name, value);
|
|
1739
|
+
};
|
|
1740
|
+
var onBlur = function () {
|
|
1741
|
+
if (props.onBlur)
|
|
1742
|
+
props.onBlur(props.name);
|
|
1743
|
+
};
|
|
1744
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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 && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
|
|
1745
|
+
};
|
|
1746
|
+
|
|
1673
1747
|
var FeedbackColors = {
|
|
1674
1748
|
success: theme.colors.green.base,
|
|
1675
1749
|
error: theme.colors.red.base,
|
|
@@ -1734,6 +1808,14 @@ var Form = React.forwardRef(function (props, ref) {
|
|
|
1734
1808
|
element.value = field.defaultValue;
|
|
1735
1809
|
break;
|
|
1736
1810
|
}
|
|
1811
|
+
case "textarea": {
|
|
1812
|
+
var element = document.getElementById(field.name);
|
|
1813
|
+
if (!field.defaultValue)
|
|
1814
|
+
element.value = "";
|
|
1815
|
+
else
|
|
1816
|
+
element.value = field.defaultValue;
|
|
1817
|
+
break;
|
|
1818
|
+
}
|
|
1737
1819
|
case "toggle": {
|
|
1738
1820
|
var element = document.getElementById(field.name);
|
|
1739
1821
|
if (!field.defaultValue)
|
|
@@ -1842,6 +1924,9 @@ var Form = React.forwardRef(function (props, ref) {
|
|
|
1842
1924
|
case "date":
|
|
1843
1925
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1844
1926
|
jsxRuntime.jsx(DateInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1927
|
+
case "textarea":
|
|
1928
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1929
|
+
jsxRuntime.jsx(TextareaField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1845
1930
|
case "radio":
|
|
1846
1931
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1847
1932
|
jsxRuntime.jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1911,12 +1996,10 @@ var Keyboard = function (props) {
|
|
|
1911
1996
|
right: [],
|
|
1912
1997
|
};
|
|
1913
1998
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1914
|
-
var
|
|
1915
|
-
var index = k.index, key = k.key, color = k.color, isShiftKey = k.isShiftKey;
|
|
1999
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
1916
2000
|
keys_1[index] = { character: key, color: color };
|
|
1917
|
-
if (isShiftKey)
|
|
1918
|
-
shiftKeys_1[
|
|
1919
|
-
}
|
|
2001
|
+
if (isShiftKey)
|
|
2002
|
+
shiftKeys_1[hand].push(key);
|
|
1920
2003
|
}
|
|
1921
2004
|
setKeys(keys_1);
|
|
1922
2005
|
setShiftKeys(shiftKeys_1);
|
|
@@ -1924,49 +2007,52 @@ var Keyboard = function (props) {
|
|
|
1924
2007
|
}, [props.keys]);
|
|
1925
2008
|
if (!keys)
|
|
1926
2009
|
return null;
|
|
1927
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [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[
|
|
1960
|
-
keys[
|
|
1961
|
-
keys[
|
|
1962
|
-
keys[
|
|
1963
|
-
keys[
|
|
1964
|
-
keys[
|
|
1965
|
-
keys[
|
|
1966
|
-
keys[
|
|
1967
|
-
keys[
|
|
1968
|
-
keys[
|
|
1969
|
-
keys[70].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [
|
|
2010
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
2011
|
+
keys[89].character === props.activeKey }, 44), jsxRuntime.jsx(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
2012
|
+
keys[87].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
2013
|
+
keys[85].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
2014
|
+
keys[83].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
2015
|
+
keys[81].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
2016
|
+
keys[91].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
2017
|
+
keys[90].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
2018
|
+
keys[80].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
2019
|
+
keys[82].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
2020
|
+
keys[84].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
2021
|
+
keys[86].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
2022
|
+
keys[88].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(TopRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
2023
|
+
keys[65].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
2024
|
+
keys[63].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
2025
|
+
keys[61].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
2026
|
+
keys[59].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
2027
|
+
keys[69].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
2028
|
+
keys[68].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
2029
|
+
keys[58].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
2030
|
+
keys[60].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
2031
|
+
keys[62].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[9].character === props.activeKey ||
|
|
2032
|
+
keys[64].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
2033
|
+
keys[67].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
2034
|
+
keys[66].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(StartRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
2035
|
+
keys[54].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
2036
|
+
keys[52].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
2037
|
+
keys[50].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
2038
|
+
keys[48].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
2039
|
+
keys[57].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
2040
|
+
keys[56].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
2041
|
+
keys[47].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
2042
|
+
keys[49].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
2043
|
+
keys[51].character === props.activeKey }, void 0), jsxRuntime.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 ||
|
|
2044
|
+
keys[53].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
2045
|
+
keys[55].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(BottomRow, { children: [jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsxRuntime.jsx(Key, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
2046
|
+
keys[77].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
2047
|
+
keys[75].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
2048
|
+
keys[73].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
2049
|
+
keys[71].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
2050
|
+
keys[79].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
2051
|
+
keys[78].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[70].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
2052
|
+
keys[70].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
2053
|
+
keys[72].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
2054
|
+
keys[74].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
2055
|
+
keys[76].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) }, void 0)] }, void 0), jsxRuntime.jsxs(SpacebarRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0)] }, void 0));
|
|
1970
2056
|
};
|
|
1971
2057
|
|
|
1972
2058
|
var Mask = styled__default["default"].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"])));
|
|
@@ -1997,6 +2083,7 @@ exports.Button = Button;
|
|
|
1997
2083
|
exports.Card = Card;
|
|
1998
2084
|
exports.Checkbox = Checkbox;
|
|
1999
2085
|
exports.Checkboxes = Checkboxes;
|
|
2086
|
+
exports.Collapse = Collapse;
|
|
2000
2087
|
exports.DateInputField = DateInputField;
|
|
2001
2088
|
exports.Flag = Flag;
|
|
2002
2089
|
exports.Form = Form;
|