@typeolymp/ui-components 1.5.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 +1 -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/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 +2 -1
- package/build/index.es.js +387 -109
- package/build/index.es.js.map +1 -1
- package/build/index.js +387 -108
- package/build/index.js.map +1 -1
- package/package.json +2 -1
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,7 +248,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$D || (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
|
});
|
|
@@ -268,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$7 ||
|
|
|
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$C || (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,7 +362,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$B || (templateOb
|
|
|
362
362
|
return "27px";
|
|
363
363
|
}
|
|
364
364
|
});
|
|
365
|
-
var templateObject_1$
|
|
365
|
+
var templateObject_1$D;
|
|
366
366
|
|
|
367
367
|
var parsers = {};
|
|
368
368
|
|
|
@@ -398,7 +398,7 @@ var flags = {
|
|
|
398
398
|
};
|
|
399
399
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
400
400
|
|
|
401
|
-
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) {
|
|
402
402
|
var type = _a.type;
|
|
403
403
|
return theme.heading[type].fontSize;
|
|
404
404
|
}, function (_a) {
|
|
@@ -422,14 +422,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$A || (templ
|
|
|
422
422
|
var align = _a.align;
|
|
423
423
|
return align;
|
|
424
424
|
});
|
|
425
|
-
var templateObject_1$
|
|
425
|
+
var templateObject_1$C;
|
|
426
426
|
|
|
427
427
|
var Heading = function (props) {
|
|
428
428
|
var element = !!props.as ? props.as : props.type;
|
|
429
429
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
430
430
|
};
|
|
431
431
|
|
|
432
|
-
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) {
|
|
433
433
|
var size = _a.size;
|
|
434
434
|
return theme.icon[size] || theme.icon.medium;
|
|
435
435
|
}, function (_a) {
|
|
@@ -459,7 +459,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$z || (templateOb
|
|
|
459
459
|
return theme.colors.lightGray.light;
|
|
460
460
|
}
|
|
461
461
|
});
|
|
462
|
-
var templateObject_1$
|
|
462
|
+
var templateObject_1$B;
|
|
463
463
|
|
|
464
464
|
var icons = {
|
|
465
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)),
|
|
@@ -483,7 +483,7 @@ var icons = {
|
|
|
483
483
|
};
|
|
484
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)); };
|
|
485
485
|
|
|
486
|
-
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) {
|
|
487
487
|
var size = _a.size;
|
|
488
488
|
switch (size) {
|
|
489
489
|
default:
|
|
@@ -495,7 +495,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$y || (templateOb
|
|
|
495
495
|
return "118px";
|
|
496
496
|
}
|
|
497
497
|
});
|
|
498
|
-
var templateObject_1$
|
|
498
|
+
var templateObject_1$A;
|
|
499
499
|
|
|
500
500
|
var illustrations = {
|
|
501
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)),
|
|
@@ -510,14 +510,14 @@ var illustrations = {
|
|
|
510
510
|
};
|
|
511
511
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
512
512
|
|
|
513
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
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
514
|
var value = _a.value;
|
|
515
515
|
return !value ? theme.colors.lightGray.darker : "";
|
|
516
516
|
}, function (_a) {
|
|
517
517
|
var disabled = _a.disabled;
|
|
518
518
|
return (disabled ? "not-allowed" : "pointer");
|
|
519
519
|
});
|
|
520
|
-
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) {
|
|
521
521
|
var disabled = _a.disabled;
|
|
522
522
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
523
523
|
}, function (_a) {
|
|
@@ -530,7 +530,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$k || (templa
|
|
|
530
530
|
var disabled = _a.disabled;
|
|
531
531
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
532
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));
|
|
533
|
-
var templateObject_1$
|
|
533
|
+
var templateObject_1$z, templateObject_2$n;
|
|
534
534
|
|
|
535
535
|
var PasswordInput = function (props) {
|
|
536
536
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -554,6 +554,124 @@ var PasswordInput = function (props) {
|
|
|
554
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));
|
|
555
555
|
};
|
|
556
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
|
+
|
|
557
675
|
var DateInput = function (props) {
|
|
558
676
|
var inputRef = React.useRef(null);
|
|
559
677
|
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -574,7 +692,13 @@ var DateInput = function (props) {
|
|
|
574
692
|
props.onChange(value_1);
|
|
575
693
|
}
|
|
576
694
|
};
|
|
577
|
-
|
|
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));
|
|
578
702
|
};
|
|
579
703
|
|
|
580
704
|
var Input = function (props) {
|
|
@@ -594,7 +718,7 @@ Input.Date = DateInput;
|
|
|
594
718
|
|
|
595
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)); };
|
|
596
720
|
|
|
597
|
-
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) {
|
|
598
722
|
var size = _a.size;
|
|
599
723
|
switch (size) {
|
|
600
724
|
default:
|
|
@@ -604,7 +728,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$w || (templateOb
|
|
|
604
728
|
return "116px";
|
|
605
729
|
}
|
|
606
730
|
});
|
|
607
|
-
var templateObject_1$
|
|
731
|
+
var templateObject_1$y;
|
|
608
732
|
|
|
609
733
|
var medals = {
|
|
610
734
|
small: {
|
|
@@ -620,11 +744,11 @@ var medals = {
|
|
|
620
744
|
};
|
|
621
745
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
622
746
|
|
|
623
|
-
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) {
|
|
624
748
|
var disabled = _a.disabled;
|
|
625
749
|
return (disabled ? "49.5px" : "");
|
|
626
750
|
});
|
|
627
|
-
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) {
|
|
628
752
|
var disabled = _a.disabled;
|
|
629
753
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
630
754
|
}, function (_a) {
|
|
@@ -637,7 +761,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$j || (
|
|
|
637
761
|
var disabled = _a.disabled;
|
|
638
762
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
639
763
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
640
|
-
var templateObject_1$
|
|
764
|
+
var templateObject_1$x, templateObject_2$m;
|
|
641
765
|
|
|
642
766
|
var Number = function (props) {
|
|
643
767
|
var ref = React.useRef(null);
|
|
@@ -679,7 +803,7 @@ var Number = function (props) {
|
|
|
679
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));
|
|
680
804
|
};
|
|
681
805
|
|
|
682
|
-
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) {
|
|
683
807
|
var size = _a.size;
|
|
684
808
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
685
809
|
}, function (_a) {
|
|
@@ -711,11 +835,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$u || (templa
|
|
|
711
835
|
var align = _a.align;
|
|
712
836
|
return align;
|
|
713
837
|
});
|
|
714
|
-
var templateObject_1$
|
|
838
|
+
var templateObject_1$w;
|
|
715
839
|
|
|
716
840
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
717
841
|
|
|
718
|
-
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) {
|
|
719
843
|
var checked = _a.checked, disabled = _a.disabled;
|
|
720
844
|
if (disabled)
|
|
721
845
|
return theme.colors.lightGray.darker;
|
|
@@ -743,7 +867,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$t || (template
|
|
|
743
867
|
return theme.colors.green.base;
|
|
744
868
|
return "";
|
|
745
869
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
746
|
-
var templateObject_1$
|
|
870
|
+
var templateObject_1$v;
|
|
747
871
|
|
|
748
872
|
var Radio = function (props) {
|
|
749
873
|
var _a;
|
|
@@ -772,11 +896,11 @@ var Radio = function (props) {
|
|
|
772
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));
|
|
773
897
|
};
|
|
774
898
|
|
|
775
|
-
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) {
|
|
776
900
|
var disabled = _a.disabled;
|
|
777
901
|
return (disabled ? "not-allowed" : "pointer");
|
|
778
902
|
});
|
|
779
|
-
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) {
|
|
780
904
|
var disabled = _a.disabled;
|
|
781
905
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
782
906
|
}, function (_a) {
|
|
@@ -789,7 +913,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$i || (temp
|
|
|
789
913
|
var isChanged = _a.isChanged;
|
|
790
914
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
791
915
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
792
|
-
var templateObject_1$
|
|
916
|
+
var templateObject_1$u, templateObject_2$l;
|
|
793
917
|
|
|
794
918
|
var Select = function (props) {
|
|
795
919
|
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -806,18 +930,18 @@ var Select = function (props) {
|
|
|
806
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));
|
|
807
931
|
};
|
|
808
932
|
|
|
809
|
-
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) {
|
|
810
934
|
var horizontal = _a.horizontal;
|
|
811
935
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
812
936
|
}, function (_a) {
|
|
813
937
|
var vertical = _a.vertical;
|
|
814
938
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
815
939
|
});
|
|
816
|
-
var templateObject_1$
|
|
940
|
+
var templateObject_1$t;
|
|
817
941
|
|
|
818
942
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
819
943
|
|
|
820
|
-
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) {
|
|
821
945
|
var size = _a.size;
|
|
822
946
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
823
947
|
}, function (_a) {
|
|
@@ -845,11 +969,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$q || (templ
|
|
|
845
969
|
return theme.colors.darkGray.dark;
|
|
846
970
|
}
|
|
847
971
|
});
|
|
848
|
-
var templateObject_1$
|
|
972
|
+
var templateObject_1$s;
|
|
849
973
|
|
|
850
974
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
851
975
|
|
|
852
|
-
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) {
|
|
853
977
|
var disabled = _a.disabled;
|
|
854
978
|
return (disabled ? "not-allowed" : "pointer");
|
|
855
979
|
}, function (_a) {
|
|
@@ -867,7 +991,7 @@ var Container$b = styled__default["default"].div(templateObject_1$p || (template
|
|
|
867
991
|
var disabled = _a.disabled;
|
|
868
992
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
869
993
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
870
|
-
var templateObject_1$
|
|
994
|
+
var templateObject_1$r;
|
|
871
995
|
|
|
872
996
|
var Toggle = function (props) {
|
|
873
997
|
var _a;
|
|
@@ -895,10 +1019,10 @@ var Toggle = function (props) {
|
|
|
895
1019
|
props.onChange(newValue);
|
|
896
1020
|
}
|
|
897
1021
|
};
|
|
898
|
-
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));
|
|
899
1023
|
};
|
|
900
1024
|
|
|
901
|
-
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) {
|
|
902
1026
|
var level = _a.level;
|
|
903
1027
|
switch (level) {
|
|
904
1028
|
case 1:
|
|
@@ -909,7 +1033,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$o || (templateOb
|
|
|
909
1033
|
return "70px";
|
|
910
1034
|
}
|
|
911
1035
|
});
|
|
912
|
-
var templateObject_1$
|
|
1036
|
+
var templateObject_1$q;
|
|
913
1037
|
|
|
914
1038
|
var trophies = {
|
|
915
1039
|
1: {
|
|
@@ -945,7 +1069,7 @@ var trophies = {
|
|
|
945
1069
|
};
|
|
946
1070
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
947
1071
|
|
|
948
|
-
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) {
|
|
949
1073
|
var type = _a.type;
|
|
950
1074
|
switch (type) {
|
|
951
1075
|
case "success":
|
|
@@ -962,11 +1086,11 @@ var Container$a = styled__default["default"].div(templateObject_1$n || (template
|
|
|
962
1086
|
return theme.colors.red.base;
|
|
963
1087
|
}
|
|
964
1088
|
});
|
|
965
|
-
var templateObject_1$
|
|
1089
|
+
var templateObject_1$p;
|
|
966
1090
|
|
|
967
|
-
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)); };
|
|
968
1092
|
|
|
969
|
-
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) {
|
|
970
1094
|
var ellipse = _a.ellipse;
|
|
971
1095
|
return ellipse
|
|
972
1096
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -975,23 +1099,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$m || (templateO
|
|
|
975
1099
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
976
1100
|
: "";
|
|
977
1101
|
});
|
|
978
|
-
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) {
|
|
979
1103
|
var color = _a.color;
|
|
980
1104
|
return color ? theme.colors[color].light : "";
|
|
981
1105
|
});
|
|
982
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"])));
|
|
983
|
-
var templateObject_1$
|
|
1107
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$6;
|
|
984
1108
|
|
|
985
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)); };
|
|
986
1110
|
|
|
987
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
988
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
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"])));
|
|
989
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"])));
|
|
990
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) {
|
|
991
1115
|
var weight = _a.weight;
|
|
992
1116
|
return weight || 500;
|
|
993
1117
|
}, theme.colors.darkGray.base);
|
|
994
|
-
var templateObject_1$
|
|
1118
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$5, templateObject_4$4;
|
|
995
1119
|
|
|
996
1120
|
var Checkboxes = function (props) {
|
|
997
1121
|
var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1010,13 +1134,13 @@ var Checkboxes = function (props) {
|
|
|
1010
1134
|
};
|
|
1011
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) {
|
|
1012
1136
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1013
|
-
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)));
|
|
1014
1138
|
}) }, void 0)] }, void 0));
|
|
1015
1139
|
};
|
|
1016
1140
|
|
|
1017
|
-
var Container$
|
|
1018
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1019
|
-
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;
|
|
1020
1144
|
|
|
1021
1145
|
var DateInputField = function (props) {
|
|
1022
1146
|
var onChange = function (value) {
|
|
@@ -1027,12 +1151,12 @@ var DateInputField = function (props) {
|
|
|
1027
1151
|
if (props.onBlur)
|
|
1028
1152
|
props.onBlur(props.name);
|
|
1029
1153
|
};
|
|
1030
|
-
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));
|
|
1031
1155
|
};
|
|
1032
1156
|
|
|
1033
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
1034
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
1035
|
-
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;
|
|
1036
1160
|
|
|
1037
1161
|
var IconButton = function (props) {
|
|
1038
1162
|
if (props.color === "white")
|
|
@@ -1040,9 +1164,9 @@ var IconButton = function (props) {
|
|
|
1040
1164
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1041
1165
|
};
|
|
1042
1166
|
|
|
1043
|
-
var Container$
|
|
1044
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1045
|
-
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;
|
|
1046
1170
|
|
|
1047
1171
|
var InputField = function (props) {
|
|
1048
1172
|
var onChange = function (value) {
|
|
@@ -1053,18 +1177,18 @@ var InputField = function (props) {
|
|
|
1053
1177
|
if (props.onBlur)
|
|
1054
1178
|
props.onBlur(props.name);
|
|
1055
1179
|
};
|
|
1056
|
-
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));
|
|
1057
1181
|
};
|
|
1058
1182
|
|
|
1059
|
-
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) {
|
|
1060
1184
|
var chevron = _a.chevron;
|
|
1061
1185
|
return (chevron === "left" ? "4px" : "");
|
|
1062
1186
|
}, function (_a) {
|
|
1063
1187
|
var chevron = _a.chevron;
|
|
1064
1188
|
return (chevron === "right" ? "4px" : "");
|
|
1065
1189
|
});
|
|
1066
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1067
|
-
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;
|
|
1068
1192
|
|
|
1069
1193
|
var Link = function (props) {
|
|
1070
1194
|
var onClick = function (e) {
|
|
@@ -1076,22 +1200,40 @@ var Link = function (props) {
|
|
|
1076
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));
|
|
1077
1201
|
};
|
|
1078
1202
|
|
|
1079
|
-
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) {
|
|
1080
1204
|
var text = _a.text;
|
|
1081
1205
|
return (text ? "20px" : "");
|
|
1082
1206
|
});
|
|
1083
|
-
var templateObject_1$
|
|
1084
|
-
|
|
1085
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1086
|
-
|
|
1087
|
-
var Container$
|
|
1088
|
-
var dropdownIsVisible = _a.dropdownIsVisible;
|
|
1089
|
-
|
|
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
|
+
}
|
|
1090
1234
|
});
|
|
1091
|
-
var SelectedTranslationWrapper = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1092
|
-
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"])), theme.colors.lightGray.light);
|
|
1093
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);
|
|
1094
|
-
var templateObject_1$
|
|
1236
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
1095
1237
|
|
|
1096
1238
|
var LocaleSelect = function (props) {
|
|
1097
1239
|
var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1100,31 +1242,32 @@ var LocaleSelect = function (props) {
|
|
|
1100
1242
|
setLocale(locale);
|
|
1101
1243
|
props.onChange(locale);
|
|
1102
1244
|
};
|
|
1103
|
-
return (jsxRuntime.jsxs(Container$
|
|
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
|
|
1104
1246
|
.filter(function (l) { return l !== locale; })
|
|
1105
|
-
.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));
|
|
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));
|
|
1106
1248
|
};
|
|
1107
1249
|
|
|
1108
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1109
|
-
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;
|
|
1110
1252
|
|
|
1111
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)); };
|
|
1112
1254
|
|
|
1113
|
-
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) {
|
|
1114
1256
|
var contrast = _a.contrast;
|
|
1115
1257
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1116
1258
|
});
|
|
1117
|
-
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;
|
|
1118
1261
|
|
|
1119
1262
|
var Notification = function (props) {
|
|
1120
1263
|
if (!props.isVisible)
|
|
1121
1264
|
return null;
|
|
1122
|
-
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));
|
|
1123
1266
|
};
|
|
1124
1267
|
|
|
1125
|
-
var Container$
|
|
1126
|
-
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1127
|
-
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;
|
|
1128
1271
|
|
|
1129
1272
|
var NumberField = function (props) {
|
|
1130
1273
|
var onChange = function (value) {
|
|
@@ -1135,12 +1278,12 @@ var NumberField = function (props) {
|
|
|
1135
1278
|
if (props.onBlur)
|
|
1136
1279
|
props.onBlur(props.name);
|
|
1137
1280
|
};
|
|
1138
|
-
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));
|
|
1139
1282
|
};
|
|
1140
1283
|
|
|
1141
|
-
var Container$
|
|
1142
|
-
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1143
|
-
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;
|
|
1144
1287
|
|
|
1145
1288
|
var PasswordInputField = function (props) {
|
|
1146
1289
|
var onChange = function (value) {
|
|
@@ -1156,7 +1299,7 @@ var PasswordInputField = function (props) {
|
|
|
1156
1299
|
if (props.onBlur)
|
|
1157
1300
|
props.onBlur(props.name);
|
|
1158
1301
|
};
|
|
1159
|
-
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));
|
|
1160
1303
|
};
|
|
1161
1304
|
|
|
1162
1305
|
var generateRandomString = function (length) {
|
|
@@ -1169,7 +1312,7 @@ var generateRandomString = function (length) {
|
|
|
1169
1312
|
return string;
|
|
1170
1313
|
};
|
|
1171
1314
|
|
|
1172
|
-
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) {
|
|
1173
1316
|
var isVisible = _a.isVisible;
|
|
1174
1317
|
return (isVisible ? "100%" : "0%");
|
|
1175
1318
|
}, function (_a) {
|
|
@@ -1182,7 +1325,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$a || (templ
|
|
|
1182
1325
|
var contrast = _a.contrast;
|
|
1183
1326
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1184
1327
|
});
|
|
1185
|
-
var templateObject_1$
|
|
1328
|
+
var templateObject_1$c;
|
|
1186
1329
|
|
|
1187
1330
|
var Popup = function (props) {
|
|
1188
1331
|
var popupRef = React.useRef(null);
|
|
@@ -1218,8 +1361,8 @@ var Popup = function (props) {
|
|
|
1218
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));
|
|
1219
1362
|
};
|
|
1220
1363
|
|
|
1221
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1222
|
-
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) {
|
|
1223
1366
|
var showInfo = _a.showInfo;
|
|
1224
1367
|
return (showInfo ? "10px" : "");
|
|
1225
1368
|
});
|
|
@@ -1230,10 +1373,88 @@ var Indicator = styled__default["default"].div(templateObject_3$3 || (templateOb
|
|
|
1230
1373
|
var color = _a.color;
|
|
1231
1374
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1232
1375
|
});
|
|
1233
|
-
var templateObject_1$
|
|
1376
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$3;
|
|
1234
1377
|
|
|
1235
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)); };
|
|
1236
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
|
+
|
|
1237
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"])));
|
|
1238
1459
|
var RadioContainer = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1239
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"])));
|
|
@@ -1254,7 +1475,7 @@ var RadioGroup = function (props) {
|
|
|
1254
1475
|
};
|
|
1255
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) {
|
|
1256
1477
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1257
|
-
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)));
|
|
1258
1479
|
}) }, void 0)] }, void 0));
|
|
1259
1480
|
};
|
|
1260
1481
|
|
|
@@ -1271,9 +1492,9 @@ var SelectField = function (props) {
|
|
|
1271
1492
|
if (props.onBlur)
|
|
1272
1493
|
props.onBlur(props.name);
|
|
1273
1494
|
};
|
|
1274
|
-
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) {
|
|
1275
1496
|
var value = _a.value, label = _a.label;
|
|
1276
|
-
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1497
|
+
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1277
1498
|
}) }), void 0)] }, void 0));
|
|
1278
1499
|
};
|
|
1279
1500
|
|
|
@@ -1351,7 +1572,7 @@ var FeedbackColors = {
|
|
|
1351
1572
|
success: theme.colors.green.base,
|
|
1352
1573
|
error: theme.colors.red.base,
|
|
1353
1574
|
};
|
|
1354
|
-
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) {
|
|
1355
1576
|
var status = _a.status;
|
|
1356
1577
|
return FeedbackColors[status];
|
|
1357
1578
|
});
|
|
@@ -1460,19 +1681,22 @@ var Form = function (props) {
|
|
|
1460
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));
|
|
1461
1682
|
};
|
|
1462
1683
|
|
|
1463
|
-
var Container$1 = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width:
|
|
1464
|
-
var active = _a.active, color = _a.color;
|
|
1465
|
-
return active ? theme.colors[color].light : theme.colors.lightGray.light;
|
|
1466
|
-
}, 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) {
|
|
1467
1685
|
var color = _a.color, active = _a.active;
|
|
1468
1686
|
if (active)
|
|
1469
1687
|
return theme.colors[color].dark;
|
|
1470
1688
|
if (color)
|
|
1471
1689
|
return theme.colors[color].base;
|
|
1472
1690
|
return "";
|
|
1691
|
+
}, function (_a) {
|
|
1692
|
+
var active = _a.active, color = _a.color;
|
|
1693
|
+
return active ? theme.colors[color].light : theme.colors.lightGray.light;
|
|
1473
1694
|
}, function (_a) {
|
|
1474
1695
|
var color = _a.color;
|
|
1475
1696
|
return (color ? "2px" : "0");
|
|
1697
|
+
}, function (_a) {
|
|
1698
|
+
var color = _a.color;
|
|
1699
|
+
return (color ? theme.colors[color].dark : "");
|
|
1476
1700
|
}, function (_a) {
|
|
1477
1701
|
var color = _a.color, active = _a.active;
|
|
1478
1702
|
if (active)
|
|
@@ -1483,32 +1707,86 @@ var Container$1 = styled__default["default"].div(templateObject_1$2 || (template
|
|
|
1483
1707
|
});
|
|
1484
1708
|
var templateObject_1$2;
|
|
1485
1709
|
|
|
1486
|
-
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
|
+
};
|
|
1487
1714
|
|
|
1488
|
-
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"])));
|
|
1489
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"])));
|
|
1490
|
-
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:
|
|
1491
|
-
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"])));
|
|
1492
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"])));
|
|
1493
|
-
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"])));
|
|
1494
1721
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
1495
1722
|
|
|
1496
1723
|
var Keyboard = function (props) {
|
|
1497
1724
|
var _a = React.useState(), keys = _a[0], setKeys = _a[1];
|
|
1725
|
+
var _b = React.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
1498
1726
|
React.useEffect(function () {
|
|
1499
1727
|
if (!!props.keys) {
|
|
1500
1728
|
var keys_1 = {};
|
|
1729
|
+
var shiftKeys_1 = {
|
|
1730
|
+
left: [],
|
|
1731
|
+
right: [],
|
|
1732
|
+
};
|
|
1501
1733
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1502
1734
|
var k = _a[_i];
|
|
1503
|
-
var index = k.index, key = k.key, color = k.color;
|
|
1735
|
+
var index = k.index, key = k.key, color = k.color, shiftKey = k.shiftKey;
|
|
1504
1736
|
keys_1[index] = { character: key, color: color };
|
|
1737
|
+
if (shiftKey) {
|
|
1738
|
+
shiftKeys_1[k.hand].push(key);
|
|
1739
|
+
}
|
|
1505
1740
|
}
|
|
1506
1741
|
setKeys(keys_1);
|
|
1742
|
+
setShiftKeys(shiftKeys_1);
|
|
1507
1743
|
}
|
|
1508
1744
|
}, [props.keys]);
|
|
1509
1745
|
if (!keys)
|
|
1510
1746
|
return null;
|
|
1511
|
-
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));
|
|
1512
1790
|
};
|
|
1513
1791
|
|
|
1514
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"])));
|
|
@@ -1568,6 +1846,7 @@ exports.RadioGroup = RadioGroup;
|
|
|
1568
1846
|
exports.Select = Select;
|
|
1569
1847
|
exports.SelectField = SelectField;
|
|
1570
1848
|
exports.Spacer = Spacer;
|
|
1849
|
+
exports.Steps = Steps;
|
|
1571
1850
|
exports.Subheading = Subheading;
|
|
1572
1851
|
exports.Toggle = Toggle;
|
|
1573
1852
|
exports.ToggleField = ToggleField;
|