@typeolymp/ui-components 1.4.0 → 1.5.2
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/Heading/index.d.ts +2 -1
- package/build/components/atoms/Input/Date.d.ts +2 -2
- package/build/components/atoms/Paragraph/index.d.ts +2 -1
- package/build/components/atoms/Select/index.d.ts +2 -1
- package/build/components/atoms/Subheading/index.d.ts +2 -1
- package/build/components/molecules/Card/index.d.ts +2 -1
- package/build/components/molecules/DateInputField/index.d.ts +2 -0
- package/build/components/molecules/Key/index.d.ts +2 -2
- package/build/components/molecules/Link/index.d.ts +2 -1
- package/build/components/molecules/LocaleSelect/index.d.ts +10 -0
- package/build/components/molecules/LocaleSelect/stories.d.ts +15 -0
- package/build/components/molecules/LocaleSelect/styles.d.ts +4 -0
- package/build/components/molecules/Notification/index.d.ts +5 -4
- package/build/components/molecules/Notification/styles.d.ts +1 -0
- package/build/components/molecules/Popup/index.d.ts +2 -1
- package/build/components/molecules/Steps/Horizontal/index.d.ts +4 -0
- package/build/components/molecules/Steps/Horizontal/styles.d.ts +2 -0
- package/build/components/molecules/Steps/Vertical/index.d.ts +4 -0
- package/build/components/molecules/Steps/Vertical/styles.d.ts +2 -0
- package/build/components/molecules/Steps/index.d.ts +12 -0
- package/build/components/molecules/Steps/stories.d.ts +8 -0
- package/build/components/molecules/Tooltip/index.d.ts +2 -1
- package/build/components/molecules/TranslationSelect/index.d.ts +8 -0
- package/build/components/molecules/TranslationSelect/stories.d.ts +15 -0
- package/build/components/molecules/TranslationSelect/styles.d.ts +4 -0
- package/build/components/organisms/Keyboard/index.d.ts +4 -1
- package/build/components/organisms/Keyboard/layouts/azerty.d.ts +1 -1
- package/build/components/organisms/Keyboard/layouts/qwerty.d.ts +1 -1
- package/build/components/organisms/Modal/index.d.ts +2 -1
- package/build/index.d.ts +3 -1
- package/build/index.es.js +436 -110
- package/build/index.es.js.map +1 -1
- package/build/index.js +437 -109
- package/build/index.js.map +1 -1
- package/package.json +3 -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$F || (templateObject_1$F = __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 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 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,11 +248,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$C || (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$o || (templateObject_2$o = __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
|
});
|
|
255
|
-
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$
|
|
255
|
+
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
256
256
|
var size = _a.size;
|
|
257
257
|
return !size
|
|
258
258
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -268,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$6 ||
|
|
|
268
268
|
? theme.button.medium.marginTopActive
|
|
269
269
|
: theme.button[size].marginTopActive;
|
|
270
270
|
});
|
|
271
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$F, templateObject_2$o, templateObject_3$7;
|
|
272
272
|
|
|
273
273
|
var Button = function (props) {
|
|
274
274
|
var onClick = function () {
|
|
@@ -285,7 +285,7 @@ var Button = function (props) {
|
|
|
285
285
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
286
286
|
};
|
|
287
287
|
|
|
288
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
288
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n height: 25px;\n 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 height: 25px;\n 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) {
|
|
289
289
|
var checked = _a.checked, disabled = _a.disabled;
|
|
290
290
|
if (disabled)
|
|
291
291
|
return theme.colors.lightGray.darker;
|
|
@@ -306,7 +306,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$B || (templ
|
|
|
306
306
|
return theme.colors.green.base;
|
|
307
307
|
return theme.colors.lightGray.darker;
|
|
308
308
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
309
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$E;
|
|
310
310
|
|
|
311
311
|
var Checkbox = function (props) {
|
|
312
312
|
var _a;
|
|
@@ -339,7 +339,7 @@ var Checkbox = function (props) {
|
|
|
339
339
|
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));
|
|
340
340
|
};
|
|
341
341
|
|
|
342
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
342
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
343
343
|
var size = _a.size;
|
|
344
344
|
switch (size) {
|
|
345
345
|
case "small":
|
|
@@ -362,16 +362,43 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$A || (templateOb
|
|
|
362
362
|
return "27px";
|
|
363
363
|
}
|
|
364
364
|
});
|
|
365
|
-
var templateObject_1$
|
|
365
|
+
var templateObject_1$D;
|
|
366
|
+
|
|
367
|
+
var parsers = {};
|
|
368
|
+
|
|
369
|
+
Object.defineProperty(parsers, "__esModule", { value: true });
|
|
370
|
+
var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
|
|
371
|
+
var getNativeLanguageByLocale = function (locale) {
|
|
372
|
+
var nativeLanguages = {
|
|
373
|
+
"en-GB": "English (UK)",
|
|
374
|
+
"nl-NL": "Nederlands",
|
|
375
|
+
"nl-BE": "Nederlands (BE)",
|
|
376
|
+
"fr-BE": "Français (BE)",
|
|
377
|
+
"fr-FR": "Français",
|
|
378
|
+
"de-DE": "Deutsch",
|
|
379
|
+
};
|
|
380
|
+
return nativeLanguages[locale];
|
|
381
|
+
};
|
|
382
|
+
var getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = getNativeLanguageByLocale;
|
|
383
|
+
var getLanguageCodeByLocale = function (locale) {
|
|
384
|
+
return locale.split("-")[0];
|
|
385
|
+
};
|
|
386
|
+
parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
|
|
387
|
+
var getCountryCodeByLocale = function (locale) {
|
|
388
|
+
return locale.split("-")[1];
|
|
389
|
+
};
|
|
390
|
+
getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
366
391
|
|
|
367
392
|
var flags = {
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
393
|
+
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)),
|
|
394
|
+
BE: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }, void 0), jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" }, void 0)] }), void 0)),
|
|
395
|
+
GB: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 24 24", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M24 3H0v18h24V3z", fill: "#1899D6" }, void 0), jsxRuntime.jsx("path", { d: "M24 3h-3.003l-6.252 4.683V3H9.238v4.875L2.63 3H0v2.434l4.74 3.514H0v6.236h4.702L0 18.722V21h3.11l6.128-4.606V21h5.507v-4.687L21.075 21H24v-2.253l-4.817-3.564H24V8.947h-4.793L24 5.347V3z", fill: "#fff" }, void 0), jsxRuntime.jsx("path", { d: "M7.726 8.947L0 3v1.57l5.772 4.378h1.954zM16.285 15.184L24 21v-1.46l-5.761-4.356h-1.954zM9.238 15.184H7.65L0 21h1.832l7.406-5.531v-.286zM14.745 8.947h1.48L24 3.146V3h-1.75l-7.505 5.58v.367z", fill: "#FF4B4B" }, void 0), jsxRuntime.jsx("path", { d: "M24 10.27H13.565V3h-3.147v7.27H0v3.59h10.418V21h3.147v-7.14H24v-3.59z", fill: "#FF4B4B" }, void 0)] }), void 0)),
|
|
396
|
+
FR: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#148cc6" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M7 0H15V18H7z" }, void 0), jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#e62743" }, void 0)] }), void 0)),
|
|
397
|
+
DE: (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: "#000" }, void 0), jsxRuntime.jsx("path", { fill: "#e62743", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#ffd800" }, void 0)] }), void 0)),
|
|
371
398
|
};
|
|
372
|
-
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
399
|
+
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
373
400
|
|
|
374
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
401
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$C || (templateObject_1$C = __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) {
|
|
375
402
|
var type = _a.type;
|
|
376
403
|
return theme.heading[type].fontSize;
|
|
377
404
|
}, function (_a) {
|
|
@@ -395,14 +422,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$z || (templ
|
|
|
395
422
|
var align = _a.align;
|
|
396
423
|
return align;
|
|
397
424
|
});
|
|
398
|
-
var templateObject_1$
|
|
425
|
+
var templateObject_1$C;
|
|
399
426
|
|
|
400
427
|
var Heading = function (props) {
|
|
401
428
|
var element = !!props.as ? props.as : props.type;
|
|
402
429
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
403
430
|
};
|
|
404
431
|
|
|
405
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
432
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
406
433
|
var size = _a.size;
|
|
407
434
|
return theme.icon[size] || theme.icon.medium;
|
|
408
435
|
}, function (_a) {
|
|
@@ -432,7 +459,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$y || (templateOb
|
|
|
432
459
|
return theme.colors.lightGray.light;
|
|
433
460
|
}
|
|
434
461
|
});
|
|
435
|
-
var templateObject_1$
|
|
462
|
+
var templateObject_1$B;
|
|
436
463
|
|
|
437
464
|
var icons = {
|
|
438
465
|
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)),
|
|
@@ -456,7 +483,7 @@ var icons = {
|
|
|
456
483
|
};
|
|
457
484
|
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)); };
|
|
458
485
|
|
|
459
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
486
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
460
487
|
var size = _a.size;
|
|
461
488
|
switch (size) {
|
|
462
489
|
default:
|
|
@@ -468,7 +495,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$x || (templateOb
|
|
|
468
495
|
return "118px";
|
|
469
496
|
}
|
|
470
497
|
});
|
|
471
|
-
var templateObject_1$
|
|
498
|
+
var templateObject_1$A;
|
|
472
499
|
|
|
473
500
|
var illustrations = {
|
|
474
501
|
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)),
|
|
@@ -483,14 +510,14 @@ var illustrations = {
|
|
|
483
510
|
};
|
|
484
511
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
485
512
|
|
|
486
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
487
|
-
var
|
|
488
|
-
return
|
|
513
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
514
|
+
var value = _a.value;
|
|
515
|
+
return !value ? theme.colors.lightGray.darker : "";
|
|
489
516
|
}, function (_a) {
|
|
490
517
|
var disabled = _a.disabled;
|
|
491
518
|
return (disabled ? "not-allowed" : "pointer");
|
|
492
519
|
});
|
|
493
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
520
|
+
var StyledInput = styled__default["default"].input(templateObject_2$n || (templateObject_2$n = __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) {
|
|
494
521
|
var disabled = _a.disabled;
|
|
495
522
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
496
523
|
}, function (_a) {
|
|
@@ -503,7 +530,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$j || (templa
|
|
|
503
530
|
var disabled = _a.disabled;
|
|
504
531
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
505
532
|
}, 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));
|
|
506
|
-
var templateObject_1$
|
|
533
|
+
var templateObject_1$z, templateObject_2$n;
|
|
507
534
|
|
|
508
535
|
var PasswordInput = function (props) {
|
|
509
536
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -527,6 +554,124 @@ var PasswordInput = function (props) {
|
|
|
527
554
|
return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
|
|
528
555
|
};
|
|
529
556
|
|
|
557
|
+
function requiredArgs(required, args) {
|
|
558
|
+
if (args.length < required) {
|
|
559
|
+
throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
/**
|
|
564
|
+
* @name toDate
|
|
565
|
+
* @category Common Helpers
|
|
566
|
+
* @summary Convert the given argument to an instance of Date.
|
|
567
|
+
*
|
|
568
|
+
* @description
|
|
569
|
+
* Convert the given argument to an instance of Date.
|
|
570
|
+
*
|
|
571
|
+
* If the argument is an instance of Date, the function returns its clone.
|
|
572
|
+
*
|
|
573
|
+
* If the argument is a number, it is treated as a timestamp.
|
|
574
|
+
*
|
|
575
|
+
* If the argument is none of the above, the function returns Invalid Date.
|
|
576
|
+
*
|
|
577
|
+
* **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
|
|
578
|
+
*
|
|
579
|
+
* @param {Date|Number} argument - the value to convert
|
|
580
|
+
* @returns {Date} the parsed date in the local time zone
|
|
581
|
+
* @throws {TypeError} 1 argument required
|
|
582
|
+
*
|
|
583
|
+
* @example
|
|
584
|
+
* // Clone the date:
|
|
585
|
+
* const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
|
|
586
|
+
* //=> Tue Feb 11 2014 11:30:30
|
|
587
|
+
*
|
|
588
|
+
* @example
|
|
589
|
+
* // Convert the timestamp to date:
|
|
590
|
+
* const result = toDate(1392098430000)
|
|
591
|
+
* //=> Tue Feb 11 2014 11:30:30
|
|
592
|
+
*/
|
|
593
|
+
|
|
594
|
+
function toDate(argument) {
|
|
595
|
+
requiredArgs(1, arguments);
|
|
596
|
+
var argStr = Object.prototype.toString.call(argument); // Clone the date
|
|
597
|
+
|
|
598
|
+
if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
|
|
599
|
+
// Prevent the date to lose the milliseconds when passed to new Date() in IE10
|
|
600
|
+
return new Date(argument.getTime());
|
|
601
|
+
} else if (typeof argument === 'number' || argStr === '[object Number]') {
|
|
602
|
+
return new Date(argument);
|
|
603
|
+
} else {
|
|
604
|
+
if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
|
|
605
|
+
// eslint-disable-next-line no-console
|
|
606
|
+
console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://git.io/fjule"); // eslint-disable-next-line no-console
|
|
607
|
+
|
|
608
|
+
console.warn(new Error().stack);
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
return new Date(NaN);
|
|
612
|
+
}
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
/**
|
|
616
|
+
* @name isAfter
|
|
617
|
+
* @category Common Helpers
|
|
618
|
+
* @summary Is the first date after the second one?
|
|
619
|
+
*
|
|
620
|
+
* @description
|
|
621
|
+
* Is the first date after the second one?
|
|
622
|
+
*
|
|
623
|
+
* ### v2.0.0 breaking changes:
|
|
624
|
+
*
|
|
625
|
+
* - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
|
|
626
|
+
*
|
|
627
|
+
* @param {Date|Number} date - the date that should be after the other one to return true
|
|
628
|
+
* @param {Date|Number} dateToCompare - the date to compare with
|
|
629
|
+
* @returns {Boolean} the first date is after the second date
|
|
630
|
+
* @throws {TypeError} 2 arguments required
|
|
631
|
+
*
|
|
632
|
+
* @example
|
|
633
|
+
* // Is 10 July 1989 after 11 February 1987?
|
|
634
|
+
* var result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
|
|
635
|
+
* //=> true
|
|
636
|
+
*/
|
|
637
|
+
|
|
638
|
+
function isAfter(dirtyDate, dirtyDateToCompare) {
|
|
639
|
+
requiredArgs(2, arguments);
|
|
640
|
+
var date = toDate(dirtyDate);
|
|
641
|
+
var dateToCompare = toDate(dirtyDateToCompare);
|
|
642
|
+
return date.getTime() > dateToCompare.getTime();
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
/**
|
|
646
|
+
* @name isBefore
|
|
647
|
+
* @category Common Helpers
|
|
648
|
+
* @summary Is the first date before the second one?
|
|
649
|
+
*
|
|
650
|
+
* @description
|
|
651
|
+
* Is the first date before the second one?
|
|
652
|
+
*
|
|
653
|
+
* ### v2.0.0 breaking changes:
|
|
654
|
+
*
|
|
655
|
+
* - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
|
|
656
|
+
*
|
|
657
|
+
* @param {Date|Number} date - the date that should be before the other one to return true
|
|
658
|
+
* @param {Date|Number} dateToCompare - the date to compare with
|
|
659
|
+
* @returns {Boolean} the first date is before the second date
|
|
660
|
+
* @throws {TypeError} 2 arguments required
|
|
661
|
+
*
|
|
662
|
+
* @example
|
|
663
|
+
* // Is 10 July 1989 before 11 February 1987?
|
|
664
|
+
* var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
|
|
665
|
+
* //=> false
|
|
666
|
+
*/
|
|
667
|
+
|
|
668
|
+
function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
669
|
+
requiredArgs(2, arguments);
|
|
670
|
+
var date = toDate(dirtyDate);
|
|
671
|
+
var dateToCompare = toDate(dirtyDateToCompare);
|
|
672
|
+
return date.getTime() < dateToCompare.getTime();
|
|
673
|
+
}
|
|
674
|
+
|
|
530
675
|
var DateInput = function (props) {
|
|
531
676
|
var inputRef = React.useRef(null);
|
|
532
677
|
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -547,7 +692,13 @@ var DateInput = function (props) {
|
|
|
547
692
|
props.onChange(value_1);
|
|
548
693
|
}
|
|
549
694
|
};
|
|
550
|
-
|
|
695
|
+
var onBlur = function () {
|
|
696
|
+
if (isAfter(new Date(value), new Date(props.max)))
|
|
697
|
+
setValue(props.max);
|
|
698
|
+
if (isBefore(new Date(value), new Date(props.min)))
|
|
699
|
+
setValue(props.min);
|
|
700
|
+
};
|
|
701
|
+
return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsxRuntime.jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
|
|
551
702
|
};
|
|
552
703
|
|
|
553
704
|
var Input = function (props) {
|
|
@@ -567,7 +718,7 @@ Input.Date = DateInput;
|
|
|
567
718
|
|
|
568
719
|
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)); };
|
|
569
720
|
|
|
570
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
721
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
571
722
|
var size = _a.size;
|
|
572
723
|
switch (size) {
|
|
573
724
|
default:
|
|
@@ -577,7 +728,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$v || (templateOb
|
|
|
577
728
|
return "116px";
|
|
578
729
|
}
|
|
579
730
|
});
|
|
580
|
-
var templateObject_1$
|
|
731
|
+
var templateObject_1$y;
|
|
581
732
|
|
|
582
733
|
var medals = {
|
|
583
734
|
small: {
|
|
@@ -593,11 +744,11 @@ var medals = {
|
|
|
593
744
|
};
|
|
594
745
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
595
746
|
|
|
596
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
747
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
597
748
|
var disabled = _a.disabled;
|
|
598
749
|
return (disabled ? "49.5px" : "");
|
|
599
750
|
});
|
|
600
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
751
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$m || (templateObject_2$m = __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\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\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) {
|
|
601
752
|
var disabled = _a.disabled;
|
|
602
753
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
603
754
|
}, function (_a) {
|
|
@@ -610,7 +761,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$i || (
|
|
|
610
761
|
var disabled = _a.disabled;
|
|
611
762
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
612
763
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
613
|
-
var templateObject_1$
|
|
764
|
+
var templateObject_1$x, templateObject_2$m;
|
|
614
765
|
|
|
615
766
|
var Number = function (props) {
|
|
616
767
|
var ref = React.useRef(null);
|
|
@@ -652,7 +803,7 @@ var Number = function (props) {
|
|
|
652
803
|
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, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
653
804
|
};
|
|
654
805
|
|
|
655
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
806
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$w || (templateObject_1$w = __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) {
|
|
656
807
|
var size = _a.size;
|
|
657
808
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
658
809
|
}, function (_a) {
|
|
@@ -684,11 +835,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$t || (templa
|
|
|
684
835
|
var align = _a.align;
|
|
685
836
|
return align;
|
|
686
837
|
});
|
|
687
|
-
var templateObject_1$
|
|
838
|
+
var templateObject_1$w;
|
|
688
839
|
|
|
689
840
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
690
841
|
|
|
691
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
842
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n height: 25px;\n 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 height: 25px;\n 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) {
|
|
692
843
|
var checked = _a.checked, disabled = _a.disabled;
|
|
693
844
|
if (disabled)
|
|
694
845
|
return theme.colors.lightGray.darker;
|
|
@@ -716,7 +867,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$s || (template
|
|
|
716
867
|
return theme.colors.green.base;
|
|
717
868
|
return "";
|
|
718
869
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
719
|
-
var templateObject_1$
|
|
870
|
+
var templateObject_1$v;
|
|
720
871
|
|
|
721
872
|
var Radio = function (props) {
|
|
722
873
|
var _a;
|
|
@@ -745,11 +896,11 @@ var Radio = function (props) {
|
|
|
745
896
|
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));
|
|
746
897
|
};
|
|
747
898
|
|
|
748
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
899
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
749
900
|
var disabled = _a.disabled;
|
|
750
901
|
return (disabled ? "not-allowed" : "pointer");
|
|
751
902
|
});
|
|
752
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
903
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$l || (templateObject_2$l = __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) {
|
|
753
904
|
var disabled = _a.disabled;
|
|
754
905
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
755
906
|
}, function (_a) {
|
|
@@ -762,7 +913,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$h || (temp
|
|
|
762
913
|
var isChanged = _a.isChanged;
|
|
763
914
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
764
915
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
765
|
-
var templateObject_1$
|
|
916
|
+
var templateObject_1$u, templateObject_2$l;
|
|
766
917
|
|
|
767
918
|
var Select = function (props) {
|
|
768
919
|
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -779,18 +930,18 @@ var Select = function (props) {
|
|
|
779
930
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
780
931
|
};
|
|
781
932
|
|
|
782
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
933
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
783
934
|
var horizontal = _a.horizontal;
|
|
784
935
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
785
936
|
}, function (_a) {
|
|
786
937
|
var vertical = _a.vertical;
|
|
787
938
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
788
939
|
});
|
|
789
|
-
var templateObject_1$
|
|
940
|
+
var templateObject_1$t;
|
|
790
941
|
|
|
791
942
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
792
943
|
|
|
793
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
944
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$s || (templateObject_1$s = __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) {
|
|
794
945
|
var size = _a.size;
|
|
795
946
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
796
947
|
}, function (_a) {
|
|
@@ -818,11 +969,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$p || (templ
|
|
|
818
969
|
return theme.colors.darkGray.dark;
|
|
819
970
|
}
|
|
820
971
|
});
|
|
821
|
-
var templateObject_1$
|
|
972
|
+
var templateObject_1$s;
|
|
822
973
|
|
|
823
974
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
824
975
|
|
|
825
|
-
var Container$
|
|
976
|
+
var Container$d = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
826
977
|
var disabled = _a.disabled;
|
|
827
978
|
return (disabled ? "not-allowed" : "pointer");
|
|
828
979
|
}, function (_a) {
|
|
@@ -840,7 +991,7 @@ var Container$a = styled__default["default"].div(templateObject_1$o || (template
|
|
|
840
991
|
var disabled = _a.disabled;
|
|
841
992
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
842
993
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
843
|
-
var templateObject_1$
|
|
994
|
+
var templateObject_1$r;
|
|
844
995
|
|
|
845
996
|
var Toggle = function (props) {
|
|
846
997
|
var _a;
|
|
@@ -868,10 +1019,10 @@ var Toggle = function (props) {
|
|
|
868
1019
|
props.onChange(newValue);
|
|
869
1020
|
}
|
|
870
1021
|
};
|
|
871
|
-
return (jsxRuntime.jsx(Container$
|
|
1022
|
+
return (jsxRuntime.jsx(Container$d, __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));
|
|
872
1023
|
};
|
|
873
1024
|
|
|
874
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
1025
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
875
1026
|
var level = _a.level;
|
|
876
1027
|
switch (level) {
|
|
877
1028
|
case 1:
|
|
@@ -882,7 +1033,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$n || (templateOb
|
|
|
882
1033
|
return "70px";
|
|
883
1034
|
}
|
|
884
1035
|
});
|
|
885
|
-
var templateObject_1$
|
|
1036
|
+
var templateObject_1$q;
|
|
886
1037
|
|
|
887
1038
|
var trophies = {
|
|
888
1039
|
1: {
|
|
@@ -918,7 +1069,7 @@ var trophies = {
|
|
|
918
1069
|
};
|
|
919
1070
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
920
1071
|
|
|
921
|
-
var Container$
|
|
1072
|
+
var Container$c = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
922
1073
|
var type = _a.type;
|
|
923
1074
|
switch (type) {
|
|
924
1075
|
case "success":
|
|
@@ -935,11 +1086,11 @@ var Container$9 = styled__default["default"].div(templateObject_1$m || (template
|
|
|
935
1086
|
return theme.colors.red.base;
|
|
936
1087
|
}
|
|
937
1088
|
});
|
|
938
|
-
var templateObject_1$
|
|
1089
|
+
var templateObject_1$p;
|
|
939
1090
|
|
|
940
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1091
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$c, __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)); };
|
|
941
1092
|
|
|
942
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
1093
|
+
var StyledCard = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __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) {
|
|
943
1094
|
var ellipse = _a.ellipse;
|
|
944
1095
|
return ellipse
|
|
945
1096
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -948,23 +1099,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$l || (templateO
|
|
|
948
1099
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
949
1100
|
: "";
|
|
950
1101
|
});
|
|
951
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
1102
|
+
var Ellipse = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __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) {
|
|
952
1103
|
var color = _a.color;
|
|
953
1104
|
return color ? theme.colors[color].light : "";
|
|
954
1105
|
});
|
|
955
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
956
|
-
var templateObject_1$
|
|
1106
|
+
var Content = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
1107
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$6;
|
|
957
1108
|
|
|
958
1109
|
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)); };
|
|
959
1110
|
|
|
960
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
961
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
962
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
963
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_4$
|
|
1111
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1112
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1113
|
+
var CheckboxWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
1114
|
+
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __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) {
|
|
964
1115
|
var weight = _a.weight;
|
|
965
1116
|
return weight || 500;
|
|
966
1117
|
}, theme.colors.darkGray.base);
|
|
967
|
-
var templateObject_1$
|
|
1118
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$5, templateObject_4$4;
|
|
968
1119
|
|
|
969
1120
|
var Checkboxes = function (props) {
|
|
970
1121
|
var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -983,13 +1134,13 @@ var Checkboxes = function (props) {
|
|
|
983
1134
|
};
|
|
984
1135
|
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$7, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
985
1136
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
986
|
-
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$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] },
|
|
1137
|
+
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$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
987
1138
|
}) }, void 0)] }, void 0));
|
|
988
1139
|
};
|
|
989
1140
|
|
|
990
|
-
var Container$
|
|
991
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
992
|
-
var templateObject_1$
|
|
1141
|
+
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"])));
|
|
1142
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1143
|
+
var templateObject_1$m, templateObject_2$i;
|
|
993
1144
|
|
|
994
1145
|
var DateInputField = function (props) {
|
|
995
1146
|
var onChange = function (value) {
|
|
@@ -1000,12 +1151,12 @@ var DateInputField = function (props) {
|
|
|
1000
1151
|
if (props.onBlur)
|
|
1001
1152
|
props.onBlur(props.name);
|
|
1002
1153
|
};
|
|
1003
|
-
return (jsxRuntime.jsxs(Container$
|
|
1154
|
+
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.Date, { initialValue: props.initialValue, 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));
|
|
1004
1155
|
};
|
|
1005
1156
|
|
|
1006
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
1007
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
1008
|
-
var templateObject_1$
|
|
1157
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > 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"])));
|
|
1158
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
1159
|
+
var templateObject_1$l, templateObject_2$h;
|
|
1009
1160
|
|
|
1010
1161
|
var IconButton = function (props) {
|
|
1011
1162
|
if (props.color === "white")
|
|
@@ -1013,9 +1164,9 @@ var IconButton = function (props) {
|
|
|
1013
1164
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1014
1165
|
};
|
|
1015
1166
|
|
|
1016
|
-
var Container$
|
|
1017
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1018
|
-
var templateObject_1$
|
|
1167
|
+
var Container$a = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
1168
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1169
|
+
var templateObject_1$k, templateObject_2$g;
|
|
1019
1170
|
|
|
1020
1171
|
var InputField = function (props) {
|
|
1021
1172
|
var onChange = function (value) {
|
|
@@ -1026,18 +1177,18 @@ var InputField = function (props) {
|
|
|
1026
1177
|
if (props.onBlur)
|
|
1027
1178
|
props.onBlur(props.name);
|
|
1028
1179
|
};
|
|
1029
|
-
return (jsxRuntime.jsxs(Container$
|
|
1180
|
+
return (jsxRuntime.jsxs(Container$a, { 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(Input, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1030
1181
|
};
|
|
1031
1182
|
|
|
1032
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
1183
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$j || (templateObject_1$j = __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) {
|
|
1033
1184
|
var chevron = _a.chevron;
|
|
1034
1185
|
return (chevron === "left" ? "4px" : "");
|
|
1035
1186
|
}, function (_a) {
|
|
1036
1187
|
var chevron = _a.chevron;
|
|
1037
1188
|
return (chevron === "right" ? "4px" : "");
|
|
1038
1189
|
});
|
|
1039
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1040
|
-
var templateObject_1$
|
|
1190
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$f || (templateObject_2$f = __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);
|
|
1191
|
+
var templateObject_1$j, templateObject_2$f;
|
|
1041
1192
|
|
|
1042
1193
|
var Link = function (props) {
|
|
1043
1194
|
var onClick = function (e) {
|
|
@@ -1049,34 +1200,74 @@ var Link = function (props) {
|
|
|
1049
1200
|
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));
|
|
1050
1201
|
};
|
|
1051
1202
|
|
|
1052
|
-
var Container$
|
|
1203
|
+
var Container$9 = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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) {
|
|
1053
1204
|
var text = _a.text;
|
|
1054
1205
|
return (text ? "20px" : "");
|
|
1055
1206
|
});
|
|
1056
|
-
var templateObject_1$
|
|
1057
|
-
|
|
1058
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1207
|
+
var templateObject_1$i;
|
|
1208
|
+
|
|
1209
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$9, __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)); };
|
|
1210
|
+
|
|
1211
|
+
var Container$8 = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
1212
|
+
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1213
|
+
if (dropdownIsVisible) {
|
|
1214
|
+
switch (color) {
|
|
1215
|
+
default:
|
|
1216
|
+
case "light":
|
|
1217
|
+
return theme.colors.lightGray.light;
|
|
1218
|
+
case "dark":
|
|
1219
|
+
return theme.colors.lightGray.dark;
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
return "";
|
|
1223
|
+
});
|
|
1224
|
+
var SelectedTranslationWrapper = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1225
|
+
var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: calc(100% + 20px);\n background-color: ", ";\n border-radius: 6px 0 6px 6px;\n overflow: hidden;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 100%;\n right: 0;\n"], ["\n width: calc(100% + 20px);\n background-color: ", ";\n border-radius: 6px 0 6px 6px;\n overflow: hidden;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 100%;\n right: 0;\n"])), function (_a) {
|
|
1226
|
+
var color = _a.color;
|
|
1227
|
+
switch (color) {
|
|
1228
|
+
default:
|
|
1229
|
+
case "light":
|
|
1230
|
+
return theme.colors.lightGray.light;
|
|
1231
|
+
case "dark":
|
|
1232
|
+
return theme.colors.lightGray.dark;
|
|
1233
|
+
}
|
|
1234
|
+
});
|
|
1235
|
+
var Locale = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __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 }\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 }\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);
|
|
1236
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
1237
|
+
|
|
1238
|
+
var LocaleSelect = function (props) {
|
|
1239
|
+
var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
1240
|
+
var _b = React.useState(props.initialValue), locale = _b[0], setLocale = _b[1];
|
|
1241
|
+
var onSelectLocale = function (locale) {
|
|
1242
|
+
setLocale(locale);
|
|
1243
|
+
props.onChange(locale);
|
|
1244
|
+
};
|
|
1245
|
+
return (jsxRuntime.jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedTranslationWrapper, { 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), jsxRuntime.jsx(Spacer, { horizontal: 10 }, 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
|
|
1246
|
+
.filter(function (l) { return l !== locale; })
|
|
1247
|
+
.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));
|
|
1248
|
+
};
|
|
1059
1249
|
|
|
1060
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1061
|
-
var templateObject_1$
|
|
1250
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
1251
|
+
var templateObject_1$g;
|
|
1062
1252
|
|
|
1063
1253
|
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)); };
|
|
1064
1254
|
|
|
1065
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1255
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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) {
|
|
1066
1256
|
var contrast = _a.contrast;
|
|
1067
1257
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1068
1258
|
});
|
|
1069
|
-
var
|
|
1259
|
+
var ButtonContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
1260
|
+
var templateObject_1$f, templateObject_2$d;
|
|
1070
1261
|
|
|
1071
1262
|
var Notification = function (props) {
|
|
1072
1263
|
if (!props.isVisible)
|
|
1073
1264
|
return null;
|
|
1074
|
-
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.
|
|
1265
|
+
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));
|
|
1075
1266
|
};
|
|
1076
1267
|
|
|
1077
|
-
var Container$
|
|
1078
|
-
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1079
|
-
var templateObject_1$
|
|
1268
|
+
var Container$7 = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
1269
|
+
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);
|
|
1270
|
+
var templateObject_1$e, templateObject_2$c;
|
|
1080
1271
|
|
|
1081
1272
|
var NumberField = function (props) {
|
|
1082
1273
|
var onChange = function (value) {
|
|
@@ -1087,12 +1278,12 @@ var NumberField = function (props) {
|
|
|
1087
1278
|
if (props.onBlur)
|
|
1088
1279
|
props.onBlur(props.name);
|
|
1089
1280
|
};
|
|
1090
|
-
return (jsxRuntime.jsxs(Container$
|
|
1281
|
+
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(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1091
1282
|
};
|
|
1092
1283
|
|
|
1093
|
-
var Container$
|
|
1094
|
-
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1095
|
-
var templateObject_1$
|
|
1284
|
+
var Container$6 = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
1285
|
+
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1286
|
+
var templateObject_1$d, templateObject_2$b;
|
|
1096
1287
|
|
|
1097
1288
|
var PasswordInputField = function (props) {
|
|
1098
1289
|
var onChange = function (value) {
|
|
@@ -1108,7 +1299,7 @@ var PasswordInputField = function (props) {
|
|
|
1108
1299
|
if (props.onBlur)
|
|
1109
1300
|
props.onBlur(props.name);
|
|
1110
1301
|
};
|
|
1111
|
-
return (jsxRuntime.jsxs(Container$
|
|
1302
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Input.Password, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }, void 0)] }, void 0));
|
|
1112
1303
|
};
|
|
1113
1304
|
|
|
1114
1305
|
var generateRandomString = function (length) {
|
|
@@ -1121,7 +1312,7 @@ var generateRandomString = function (length) {
|
|
|
1121
1312
|
return string;
|
|
1122
1313
|
};
|
|
1123
1314
|
|
|
1124
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1315
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
1125
1316
|
var isVisible = _a.isVisible;
|
|
1126
1317
|
return (isVisible ? "100%" : "0%");
|
|
1127
1318
|
}, function (_a) {
|
|
@@ -1134,7 +1325,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$a || (templ
|
|
|
1134
1325
|
var contrast = _a.contrast;
|
|
1135
1326
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1136
1327
|
});
|
|
1137
|
-
var templateObject_1$
|
|
1328
|
+
var templateObject_1$c;
|
|
1138
1329
|
|
|
1139
1330
|
var Popup = function (props) {
|
|
1140
1331
|
var popupRef = React.useRef(null);
|
|
@@ -1170,8 +1361,8 @@ var Popup = function (props) {
|
|
|
1170
1361
|
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));
|
|
1171
1362
|
};
|
|
1172
1363
|
|
|
1173
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1174
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1364
|
+
var Wrapper = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1365
|
+
var StyledProgressBar = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __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) {
|
|
1175
1366
|
var showInfo = _a.showInfo;
|
|
1176
1367
|
return (showInfo ? "10px" : "");
|
|
1177
1368
|
});
|
|
@@ -1182,10 +1373,88 @@ var Indicator = styled__default["default"].div(templateObject_3$3 || (templateOb
|
|
|
1182
1373
|
var color = _a.color;
|
|
1183
1374
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1184
1375
|
});
|
|
1185
|
-
var templateObject_1$
|
|
1376
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$3;
|
|
1186
1377
|
|
|
1187
1378
|
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)); };
|
|
1188
1379
|
|
|
1380
|
+
var Container$5 = styled__default["default"].ol(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
1381
|
+
var Step$1 = styled__default["default"].li(templateObject_2$9 || (templateObject_2$9 = __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 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: 30%;\n left: 50%;\n background-color: ", ";\n order: -1;\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 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: 30%;\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n"])), function (_a) {
|
|
1382
|
+
var status = _a.status;
|
|
1383
|
+
return (!!status ? "pointer" : "not-allowed");
|
|
1384
|
+
}, function (_a) {
|
|
1385
|
+
var status = _a.status;
|
|
1386
|
+
switch (status) {
|
|
1387
|
+
case "passed":
|
|
1388
|
+
return theme.colors.green.base;
|
|
1389
|
+
case "active":
|
|
1390
|
+
return theme.colors.blue.base;
|
|
1391
|
+
default:
|
|
1392
|
+
return theme.colors.lightGray.dark;
|
|
1393
|
+
}
|
|
1394
|
+
}, theme.colors.lightGray.light, function (_a) {
|
|
1395
|
+
var status = _a.status;
|
|
1396
|
+
return status === "active"
|
|
1397
|
+
? theme.colors.lightGray.light
|
|
1398
|
+
: theme.colors.darkGray.light;
|
|
1399
|
+
}, theme.colors.darkGray.base, theme.colors.lightGray.dark);
|
|
1400
|
+
var templateObject_1$a, templateObject_2$9;
|
|
1401
|
+
|
|
1402
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children: props.steps.map(function (_a, index) {
|
|
1403
|
+
var title = _a.title, onClick = _a.onClick;
|
|
1404
|
+
var step = index + 1;
|
|
1405
|
+
var status = props.current > step
|
|
1406
|
+
? "passed"
|
|
1407
|
+
: props.current === step
|
|
1408
|
+
? "active"
|
|
1409
|
+
: "";
|
|
1410
|
+
var onClickStep = function () {
|
|
1411
|
+
if (onClick && props.current >= step)
|
|
1412
|
+
onClick(step);
|
|
1413
|
+
};
|
|
1414
|
+
return (jsxRuntime.jsxs(Step$1, __assign({ status: status }, { 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), jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1415
|
+
}) }, void 0)); };
|
|
1416
|
+
|
|
1417
|
+
var Container$4 = styled__default["default"].ol(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
1418
|
+
var Step = styled__default["default"].li(templateObject_2$8 || (templateObject_2$8 = __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 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 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) {
|
|
1419
|
+
var status = _a.status;
|
|
1420
|
+
return (!!status ? "pointer" : "not-allowed");
|
|
1421
|
+
}, function (_a) {
|
|
1422
|
+
var status = _a.status;
|
|
1423
|
+
switch (status) {
|
|
1424
|
+
case "passed":
|
|
1425
|
+
return theme.colors.green.base;
|
|
1426
|
+
case "active":
|
|
1427
|
+
return theme.colors.blue.base;
|
|
1428
|
+
default:
|
|
1429
|
+
return theme.colors.lightGray.dark;
|
|
1430
|
+
}
|
|
1431
|
+
}, function (_a) {
|
|
1432
|
+
var status = _a.status;
|
|
1433
|
+
return status === "active"
|
|
1434
|
+
? theme.colors.lightGray.light
|
|
1435
|
+
: theme.colors.darkGray.light;
|
|
1436
|
+
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1437
|
+
var templateObject_1$9, templateObject_2$8;
|
|
1438
|
+
|
|
1439
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$4, { children: props.steps.map(function (_a, index) {
|
|
1440
|
+
var title = _a.title, onClick = _a.onClick;
|
|
1441
|
+
var step = index + 1;
|
|
1442
|
+
var status = props.current > step
|
|
1443
|
+
? "passed"
|
|
1444
|
+
: props.current === step
|
|
1445
|
+
? "active"
|
|
1446
|
+
: "";
|
|
1447
|
+
var onClickStep = function () {
|
|
1448
|
+
if (onClick && props.current >= step)
|
|
1449
|
+
onClick(step);
|
|
1450
|
+
};
|
|
1451
|
+
return (jsxRuntime.jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsxRuntime.jsx("div", { 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), jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1452
|
+
}) }, void 0)); };
|
|
1453
|
+
|
|
1454
|
+
var Steps = function (props) {
|
|
1455
|
+
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign({}, props), void 0)) : (jsxRuntime.jsx(Steps$2, __assign({}, props), void 0));
|
|
1456
|
+
};
|
|
1457
|
+
|
|
1189
1458
|
var Fieldset = styled__default["default"].fieldset(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1190
1459
|
var RadioContainer = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1191
1460
|
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"])));
|
|
@@ -1206,7 +1475,7 @@ var RadioGroup = function (props) {
|
|
|
1206
1475
|
};
|
|
1207
1476
|
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1208
1477
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1209
|
-
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.jsx(Radio, { id: id, name: props.name, value: value, defaultChecked: props.initialValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] },
|
|
1478
|
+
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.jsx(Radio, { id: id, name: props.name, value: value, defaultChecked: props.initialValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1210
1479
|
}) }, void 0)] }, void 0));
|
|
1211
1480
|
};
|
|
1212
1481
|
|
|
@@ -1223,9 +1492,9 @@ var SelectField = function (props) {
|
|
|
1223
1492
|
if (props.onBlur)
|
|
1224
1493
|
props.onBlur(props.name);
|
|
1225
1494
|
};
|
|
1226
|
-
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(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, initialValue: props.initialValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a) {
|
|
1495
|
+
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(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, initialValue: props.initialValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
1227
1496
|
var value = _a.value, label = _a.label;
|
|
1228
|
-
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1497
|
+
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1229
1498
|
}) }), void 0)] }, void 0));
|
|
1230
1499
|
};
|
|
1231
1500
|
|
|
@@ -1303,7 +1572,7 @@ var FeedbackColors = {
|
|
|
1303
1572
|
success: theme.colors.green.base,
|
|
1304
1573
|
error: theme.colors.red.base,
|
|
1305
1574
|
};
|
|
1306
|
-
var FieldWrapper = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom:
|
|
1575
|
+
var FieldWrapper = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
|
|
1307
1576
|
var status = _a.status;
|
|
1308
1577
|
return FeedbackColors[status];
|
|
1309
1578
|
});
|
|
@@ -1412,19 +1681,22 @@ var Form = function (props) {
|
|
|
1412
1681
|
}) }, void 0), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1413
1682
|
};
|
|
1414
1683
|
|
|
1415
|
-
var Container$1 = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width:
|
|
1416
|
-
var active = _a.active, color = _a.color;
|
|
1417
|
-
return active ? theme.colors[color].light : theme.colors.lightGray.light;
|
|
1418
|
-
}, function (_a) {
|
|
1684
|
+
var Container$1 = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"])), function (_a) {
|
|
1419
1685
|
var color = _a.color, active = _a.active;
|
|
1420
1686
|
if (active)
|
|
1421
1687
|
return theme.colors[color].dark;
|
|
1422
1688
|
if (color)
|
|
1423
1689
|
return theme.colors[color].base;
|
|
1424
1690
|
return "";
|
|
1691
|
+
}, function (_a) {
|
|
1692
|
+
var active = _a.active, color = _a.color;
|
|
1693
|
+
return active ? theme.colors[color].light : theme.colors.lightGray.light;
|
|
1425
1694
|
}, function (_a) {
|
|
1426
1695
|
var color = _a.color;
|
|
1427
1696
|
return (color ? "2px" : "0");
|
|
1697
|
+
}, function (_a) {
|
|
1698
|
+
var color = _a.color;
|
|
1699
|
+
return (color ? theme.colors[color].dark : "");
|
|
1428
1700
|
}, function (_a) {
|
|
1429
1701
|
var color = _a.color, active = _a.active;
|
|
1430
1702
|
if (active)
|
|
@@ -1435,32 +1707,86 @@ var Container$1 = styled__default["default"].div(templateObject_1$2 || (template
|
|
|
1435
1707
|
});
|
|
1436
1708
|
var templateObject_1$2;
|
|
1437
1709
|
|
|
1438
|
-
var Key = function (props) {
|
|
1710
|
+
var Key = function (props) {
|
|
1711
|
+
var _a;
|
|
1712
|
+
return (jsxRuntime.jsx(Container$1, __assign({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsxRuntime.jsx("svg", __assign({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }, void 0) }), void 0)) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) }), void 0));
|
|
1713
|
+
};
|
|
1439
1714
|
|
|
1440
|
-
var Container = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width:
|
|
1715
|
+
var Container = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 720px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"], ["\n width: 720px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"])));
|
|
1441
1716
|
var SpecialRow = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"])));
|
|
1442
|
-
var TopRow = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width:
|
|
1443
|
-
var StartRow = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width:
|
|
1717
|
+
var TopRow = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"])));
|
|
1718
|
+
var StartRow = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"])));
|
|
1444
1719
|
var BottomRow = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"])));
|
|
1445
|
-
var SpacebarRow = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width:
|
|
1720
|
+
var SpacebarRow = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"])));
|
|
1446
1721
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
1447
1722
|
|
|
1448
1723
|
var Keyboard = function (props) {
|
|
1449
1724
|
var _a = React.useState(), keys = _a[0], setKeys = _a[1];
|
|
1725
|
+
var _b = React.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
1450
1726
|
React.useEffect(function () {
|
|
1451
1727
|
if (!!props.keys) {
|
|
1452
1728
|
var keys_1 = {};
|
|
1729
|
+
var shiftKeys_1 = {
|
|
1730
|
+
left: [],
|
|
1731
|
+
right: [],
|
|
1732
|
+
};
|
|
1453
1733
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1454
1734
|
var k = _a[_i];
|
|
1455
|
-
var index = k.index, key = k.key, color = k.color;
|
|
1735
|
+
var index = k.index, key = k.key, color = k.color, shiftKey = k.shiftKey;
|
|
1456
1736
|
keys_1[index] = { character: key, color: color };
|
|
1737
|
+
if (shiftKey) {
|
|
1738
|
+
shiftKeys_1[k.hand].push(key);
|
|
1739
|
+
}
|
|
1457
1740
|
}
|
|
1458
1741
|
setKeys(keys_1);
|
|
1742
|
+
setShiftKeys(shiftKeys_1);
|
|
1459
1743
|
}
|
|
1460
1744
|
}, [props.keys]);
|
|
1461
1745
|
if (!keys)
|
|
1462
1746
|
return null;
|
|
1463
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key,
|
|
1747
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[41].character, keys[83].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
1748
|
+
keys[83].character === props.activeKey }, 41), jsxRuntime.jsx(Key, { characters: [keys[39].character, keys[81].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
1749
|
+
keys[81].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[37].character, keys[79].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
1750
|
+
keys[79].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[35].character, keys[77].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
1751
|
+
keys[77].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[33].character, keys[75].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
1752
|
+
keys[75].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[43].character, keys[85].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
1753
|
+
keys[85].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[42].character, keys[84].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
1754
|
+
keys[84].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[32].character, keys[74].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
1755
|
+
keys[74].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[34].character, keys[76].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
1756
|
+
keys[76].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[36].character, keys[78].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
1757
|
+
keys[78].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[38].character, keys[80].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
1758
|
+
keys[80].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[40].character, keys[82].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
1759
|
+
keys[82].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[61].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
1760
|
+
keys[61].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[59].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
1761
|
+
keys[59].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[57].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
1762
|
+
keys[57].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[55].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
1763
|
+
keys[55].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[63].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
1764
|
+
keys[63].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[62].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
1765
|
+
keys[62].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[54].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
1766
|
+
keys[54].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[56].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
1767
|
+
keys[56].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[58].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
1768
|
+
keys[58].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[60].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
1769
|
+
keys[60].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(StartRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[51].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
1770
|
+
keys[51].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[49].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
1771
|
+
keys[49].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[47].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
1772
|
+
keys[47].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[45].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
1773
|
+
keys[45].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[53].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
1774
|
+
keys[53].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[52].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
1775
|
+
keys[52].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[44].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
1776
|
+
keys[44].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[46].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
1777
|
+
keys[46].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[48].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
1778
|
+
keys[48].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[8].character, keys[50].character].filter(function (k) { return k !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
|
|
1779
|
+
keys[50].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(BottomRow, { children: [jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[29].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsxRuntime.jsx(Key, { characters: [keys[71].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
1780
|
+
keys[71].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[69].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
1781
|
+
keys[69].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[67].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
1782
|
+
keys[67].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[65].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
1783
|
+
keys[65].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[73].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
1784
|
+
keys[73].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[72].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
1785
|
+
keys[72].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[64].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
1786
|
+
keys[64].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[24].character, keys[66].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
1787
|
+
keys[66].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[26].character, keys[68].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
1788
|
+
keys[68].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[28].character, keys[70].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
1789
|
+
keys[70].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[28].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));
|
|
1464
1790
|
};
|
|
1465
1791
|
|
|
1466
1792
|
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"])));
|
|
@@ -1503,6 +1829,7 @@ exports.InputField = InputField;
|
|
|
1503
1829
|
exports.Keyboard = Keyboard;
|
|
1504
1830
|
exports.Link = Link;
|
|
1505
1831
|
exports.Loading = Loading;
|
|
1832
|
+
exports.LocaleSelect = LocaleSelect;
|
|
1506
1833
|
exports.Logo = Logo;
|
|
1507
1834
|
exports.Medal = Medal;
|
|
1508
1835
|
exports.Medals = Medals;
|
|
@@ -1519,6 +1846,7 @@ exports.RadioGroup = RadioGroup;
|
|
|
1519
1846
|
exports.Select = Select;
|
|
1520
1847
|
exports.SelectField = SelectField;
|
|
1521
1848
|
exports.Spacer = Spacer;
|
|
1849
|
+
exports.Steps = Steps;
|
|
1522
1850
|
exports.Subheading = Subheading;
|
|
1523
1851
|
exports.Toggle = Toggle;
|
|
1524
1852
|
exports.ToggleField = ToggleField;
|