@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.es.js
CHANGED
|
@@ -188,7 +188,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
188
188
|
return cooked;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
var StyledButton = styled.button(templateObject_1$
|
|
191
|
+
var StyledButton = styled.button(templateObject_1$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) {
|
|
192
192
|
var fluid = _a.fluid;
|
|
193
193
|
return (fluid ? "100%" : "fit-content");
|
|
194
194
|
}, function (_a) {
|
|
@@ -238,7 +238,7 @@ var StyledButton = styled.button(templateObject_1$D || (templateObject_1$D = __m
|
|
|
238
238
|
? theme.button.medium.heightActive
|
|
239
239
|
: theme.button[size].heightActive;
|
|
240
240
|
});
|
|
241
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
241
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$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) {
|
|
242
242
|
var size = _a.size;
|
|
243
243
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
244
244
|
});
|
|
@@ -258,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$7 || (templateObject_3$7
|
|
|
258
258
|
? theme.button.medium.marginTopActive
|
|
259
259
|
: theme.button[size].marginTopActive;
|
|
260
260
|
});
|
|
261
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$F, templateObject_2$o, templateObject_3$7;
|
|
262
262
|
|
|
263
263
|
var Button = function (props) {
|
|
264
264
|
var onClick = function () {
|
|
@@ -275,7 +275,7 @@ var Button = function (props) {
|
|
|
275
275
|
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
276
276
|
};
|
|
277
277
|
|
|
278
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
278
|
+
var StyledCheckbox = styled.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) {
|
|
279
279
|
var checked = _a.checked, disabled = _a.disabled;
|
|
280
280
|
if (disabled)
|
|
281
281
|
return theme.colors.lightGray.darker;
|
|
@@ -296,7 +296,7 @@ var StyledCheckbox = styled.div(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
296
296
|
return theme.colors.green.base;
|
|
297
297
|
return theme.colors.lightGray.darker;
|
|
298
298
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
299
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$E;
|
|
300
300
|
|
|
301
301
|
var Checkbox = function (props) {
|
|
302
302
|
var _a;
|
|
@@ -329,7 +329,7 @@ var Checkbox = function (props) {
|
|
|
329
329
|
return (jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
332
|
+
var Wrapper$9 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
333
333
|
var size = _a.size;
|
|
334
334
|
switch (size) {
|
|
335
335
|
case "small":
|
|
@@ -352,7 +352,7 @@ var Wrapper$9 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTem
|
|
|
352
352
|
return "27px";
|
|
353
353
|
}
|
|
354
354
|
});
|
|
355
|
-
var templateObject_1$
|
|
355
|
+
var templateObject_1$D;
|
|
356
356
|
|
|
357
357
|
var parsers = {};
|
|
358
358
|
|
|
@@ -388,7 +388,7 @@ var flags = {
|
|
|
388
388
|
};
|
|
389
389
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
390
390
|
|
|
391
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
391
|
+
var StyledHeading = styled.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) {
|
|
392
392
|
var type = _a.type;
|
|
393
393
|
return theme.heading[type].fontSize;
|
|
394
394
|
}, function (_a) {
|
|
@@ -412,14 +412,14 @@ var StyledHeading = styled.span(templateObject_1$A || (templateObject_1$A = __ma
|
|
|
412
412
|
var align = _a.align;
|
|
413
413
|
return align;
|
|
414
414
|
});
|
|
415
|
-
var templateObject_1$
|
|
415
|
+
var templateObject_1$C;
|
|
416
416
|
|
|
417
417
|
var Heading = function (props) {
|
|
418
418
|
var element = !!props.as ? props.as : props.type;
|
|
419
419
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
420
420
|
};
|
|
421
421
|
|
|
422
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
422
|
+
var Wrapper$8 = styled.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) {
|
|
423
423
|
var size = _a.size;
|
|
424
424
|
return theme.icon[size] || theme.icon.medium;
|
|
425
425
|
}, function (_a) {
|
|
@@ -449,7 +449,7 @@ var Wrapper$8 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTem
|
|
|
449
449
|
return theme.colors.lightGray.light;
|
|
450
450
|
}
|
|
451
451
|
});
|
|
452
|
-
var templateObject_1$
|
|
452
|
+
var templateObject_1$B;
|
|
453
453
|
|
|
454
454
|
var icons = {
|
|
455
455
|
check: (jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -473,7 +473,7 @@ var icons = {
|
|
|
473
473
|
};
|
|
474
474
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
475
475
|
|
|
476
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
476
|
+
var Wrapper$7 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
477
477
|
var size = _a.size;
|
|
478
478
|
switch (size) {
|
|
479
479
|
default:
|
|
@@ -485,7 +485,7 @@ var Wrapper$7 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTem
|
|
|
485
485
|
return "118px";
|
|
486
486
|
}
|
|
487
487
|
});
|
|
488
|
-
var templateObject_1$
|
|
488
|
+
var templateObject_1$A;
|
|
489
489
|
|
|
490
490
|
var illustrations = {
|
|
491
491
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -500,14 +500,14 @@ var illustrations = {
|
|
|
500
500
|
};
|
|
501
501
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
502
502
|
|
|
503
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
503
|
+
var InputIconWrapper = styled.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) {
|
|
504
504
|
var value = _a.value;
|
|
505
505
|
return !value ? theme.colors.lightGray.darker : "";
|
|
506
506
|
}, function (_a) {
|
|
507
507
|
var disabled = _a.disabled;
|
|
508
508
|
return (disabled ? "not-allowed" : "pointer");
|
|
509
509
|
});
|
|
510
|
-
var StyledInput = styled.input(templateObject_2$
|
|
510
|
+
var StyledInput = styled.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) {
|
|
511
511
|
var disabled = _a.disabled;
|
|
512
512
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
513
513
|
}, function (_a) {
|
|
@@ -520,7 +520,7 @@ var StyledInput = styled.input(templateObject_2$k || (templateObject_2$k = __mak
|
|
|
520
520
|
var disabled = _a.disabled;
|
|
521
521
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
522
522
|
}, 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));
|
|
523
|
-
var templateObject_1$
|
|
523
|
+
var templateObject_1$z, templateObject_2$n;
|
|
524
524
|
|
|
525
525
|
var PasswordInput = function (props) {
|
|
526
526
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -544,6 +544,124 @@ var PasswordInput = function (props) {
|
|
|
544
544
|
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
|
|
545
545
|
};
|
|
546
546
|
|
|
547
|
+
function requiredArgs(required, args) {
|
|
548
|
+
if (args.length < required) {
|
|
549
|
+
throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* @name toDate
|
|
555
|
+
* @category Common Helpers
|
|
556
|
+
* @summary Convert the given argument to an instance of Date.
|
|
557
|
+
*
|
|
558
|
+
* @description
|
|
559
|
+
* Convert the given argument to an instance of Date.
|
|
560
|
+
*
|
|
561
|
+
* If the argument is an instance of Date, the function returns its clone.
|
|
562
|
+
*
|
|
563
|
+
* If the argument is a number, it is treated as a timestamp.
|
|
564
|
+
*
|
|
565
|
+
* If the argument is none of the above, the function returns Invalid Date.
|
|
566
|
+
*
|
|
567
|
+
* **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
|
|
568
|
+
*
|
|
569
|
+
* @param {Date|Number} argument - the value to convert
|
|
570
|
+
* @returns {Date} the parsed date in the local time zone
|
|
571
|
+
* @throws {TypeError} 1 argument required
|
|
572
|
+
*
|
|
573
|
+
* @example
|
|
574
|
+
* // Clone the date:
|
|
575
|
+
* const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
|
|
576
|
+
* //=> Tue Feb 11 2014 11:30:30
|
|
577
|
+
*
|
|
578
|
+
* @example
|
|
579
|
+
* // Convert the timestamp to date:
|
|
580
|
+
* const result = toDate(1392098430000)
|
|
581
|
+
* //=> Tue Feb 11 2014 11:30:30
|
|
582
|
+
*/
|
|
583
|
+
|
|
584
|
+
function toDate(argument) {
|
|
585
|
+
requiredArgs(1, arguments);
|
|
586
|
+
var argStr = Object.prototype.toString.call(argument); // Clone the date
|
|
587
|
+
|
|
588
|
+
if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
|
|
589
|
+
// Prevent the date to lose the milliseconds when passed to new Date() in IE10
|
|
590
|
+
return new Date(argument.getTime());
|
|
591
|
+
} else if (typeof argument === 'number' || argStr === '[object Number]') {
|
|
592
|
+
return new Date(argument);
|
|
593
|
+
} else {
|
|
594
|
+
if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
|
|
595
|
+
// eslint-disable-next-line no-console
|
|
596
|
+
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
|
|
597
|
+
|
|
598
|
+
console.warn(new Error().stack);
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
return new Date(NaN);
|
|
602
|
+
}
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
/**
|
|
606
|
+
* @name isAfter
|
|
607
|
+
* @category Common Helpers
|
|
608
|
+
* @summary Is the first date after the second one?
|
|
609
|
+
*
|
|
610
|
+
* @description
|
|
611
|
+
* Is the first date after the second one?
|
|
612
|
+
*
|
|
613
|
+
* ### v2.0.0 breaking changes:
|
|
614
|
+
*
|
|
615
|
+
* - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
|
|
616
|
+
*
|
|
617
|
+
* @param {Date|Number} date - the date that should be after the other one to return true
|
|
618
|
+
* @param {Date|Number} dateToCompare - the date to compare with
|
|
619
|
+
* @returns {Boolean} the first date is after the second date
|
|
620
|
+
* @throws {TypeError} 2 arguments required
|
|
621
|
+
*
|
|
622
|
+
* @example
|
|
623
|
+
* // Is 10 July 1989 after 11 February 1987?
|
|
624
|
+
* var result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
|
|
625
|
+
* //=> true
|
|
626
|
+
*/
|
|
627
|
+
|
|
628
|
+
function isAfter(dirtyDate, dirtyDateToCompare) {
|
|
629
|
+
requiredArgs(2, arguments);
|
|
630
|
+
var date = toDate(dirtyDate);
|
|
631
|
+
var dateToCompare = toDate(dirtyDateToCompare);
|
|
632
|
+
return date.getTime() > dateToCompare.getTime();
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
/**
|
|
636
|
+
* @name isBefore
|
|
637
|
+
* @category Common Helpers
|
|
638
|
+
* @summary Is the first date before the second one?
|
|
639
|
+
*
|
|
640
|
+
* @description
|
|
641
|
+
* Is the first date before the second one?
|
|
642
|
+
*
|
|
643
|
+
* ### v2.0.0 breaking changes:
|
|
644
|
+
*
|
|
645
|
+
* - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
|
|
646
|
+
*
|
|
647
|
+
* @param {Date|Number} date - the date that should be before the other one to return true
|
|
648
|
+
* @param {Date|Number} dateToCompare - the date to compare with
|
|
649
|
+
* @returns {Boolean} the first date is before the second date
|
|
650
|
+
* @throws {TypeError} 2 arguments required
|
|
651
|
+
*
|
|
652
|
+
* @example
|
|
653
|
+
* // Is 10 July 1989 before 11 February 1987?
|
|
654
|
+
* var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
|
|
655
|
+
* //=> false
|
|
656
|
+
*/
|
|
657
|
+
|
|
658
|
+
function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
659
|
+
requiredArgs(2, arguments);
|
|
660
|
+
var date = toDate(dirtyDate);
|
|
661
|
+
var dateToCompare = toDate(dirtyDateToCompare);
|
|
662
|
+
return date.getTime() < dateToCompare.getTime();
|
|
663
|
+
}
|
|
664
|
+
|
|
547
665
|
var DateInput = function (props) {
|
|
548
666
|
var inputRef = useRef(null);
|
|
549
667
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -564,7 +682,13 @@ var DateInput = function (props) {
|
|
|
564
682
|
props.onChange(value_1);
|
|
565
683
|
}
|
|
566
684
|
};
|
|
567
|
-
|
|
685
|
+
var onBlur = function () {
|
|
686
|
+
if (isAfter(new Date(value), new Date(props.max)))
|
|
687
|
+
setValue(props.max);
|
|
688
|
+
if (isBefore(new Date(value), new Date(props.min)))
|
|
689
|
+
setValue(props.min);
|
|
690
|
+
};
|
|
691
|
+
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
|
|
568
692
|
};
|
|
569
693
|
|
|
570
694
|
var Input = function (props) {
|
|
@@ -584,7 +708,7 @@ Input.Date = DateInput;
|
|
|
584
708
|
|
|
585
709
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
586
710
|
|
|
587
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
711
|
+
var Wrapper$6 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
588
712
|
var size = _a.size;
|
|
589
713
|
switch (size) {
|
|
590
714
|
default:
|
|
@@ -594,7 +718,7 @@ var Wrapper$6 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTem
|
|
|
594
718
|
return "116px";
|
|
595
719
|
}
|
|
596
720
|
});
|
|
597
|
-
var templateObject_1$
|
|
721
|
+
var templateObject_1$y;
|
|
598
722
|
|
|
599
723
|
var medals = {
|
|
600
724
|
small: {
|
|
@@ -610,11 +734,11 @@ var medals = {
|
|
|
610
734
|
};
|
|
611
735
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
612
736
|
|
|
613
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
737
|
+
var Wrapper$5 = styled.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) {
|
|
614
738
|
var disabled = _a.disabled;
|
|
615
739
|
return (disabled ? "49.5px" : "");
|
|
616
740
|
});
|
|
617
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
741
|
+
var StyledInputNumber = styled.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) {
|
|
618
742
|
var disabled = _a.disabled;
|
|
619
743
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
620
744
|
}, function (_a) {
|
|
@@ -627,7 +751,7 @@ var StyledInputNumber = styled.input(templateObject_2$j || (templateObject_2$j =
|
|
|
627
751
|
var disabled = _a.disabled;
|
|
628
752
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
629
753
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
630
|
-
var templateObject_1$
|
|
754
|
+
var templateObject_1$x, templateObject_2$m;
|
|
631
755
|
|
|
632
756
|
var Number = function (props) {
|
|
633
757
|
var ref = useRef(null);
|
|
@@ -669,7 +793,7 @@ var Number = function (props) {
|
|
|
669
793
|
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
670
794
|
};
|
|
671
795
|
|
|
672
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
796
|
+
var StyledParagraph = styled.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) {
|
|
673
797
|
var size = _a.size;
|
|
674
798
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
675
799
|
}, function (_a) {
|
|
@@ -701,11 +825,11 @@ var StyledParagraph = styled.p(templateObject_1$u || (templateObject_1$u = __mak
|
|
|
701
825
|
var align = _a.align;
|
|
702
826
|
return align;
|
|
703
827
|
});
|
|
704
|
-
var templateObject_1$
|
|
828
|
+
var templateObject_1$w;
|
|
705
829
|
|
|
706
830
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
707
831
|
|
|
708
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
832
|
+
var StyledRadio = styled.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) {
|
|
709
833
|
var checked = _a.checked, disabled = _a.disabled;
|
|
710
834
|
if (disabled)
|
|
711
835
|
return theme.colors.lightGray.darker;
|
|
@@ -733,7 +857,7 @@ var StyledRadio = styled.div(templateObject_1$t || (templateObject_1$t = __makeT
|
|
|
733
857
|
return theme.colors.green.base;
|
|
734
858
|
return "";
|
|
735
859
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
736
|
-
var templateObject_1$
|
|
860
|
+
var templateObject_1$v;
|
|
737
861
|
|
|
738
862
|
var Radio = function (props) {
|
|
739
863
|
var _a;
|
|
@@ -762,11 +886,11 @@ var Radio = function (props) {
|
|
|
762
886
|
return (jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
763
887
|
};
|
|
764
888
|
|
|
765
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
889
|
+
var Wrapper$4 = styled.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) {
|
|
766
890
|
var disabled = _a.disabled;
|
|
767
891
|
return (disabled ? "not-allowed" : "pointer");
|
|
768
892
|
});
|
|
769
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
893
|
+
var StyledSelect = styled.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) {
|
|
770
894
|
var disabled = _a.disabled;
|
|
771
895
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
772
896
|
}, function (_a) {
|
|
@@ -779,7 +903,7 @@ var StyledSelect = styled.select(templateObject_2$i || (templateObject_2$i = __m
|
|
|
779
903
|
var isChanged = _a.isChanged;
|
|
780
904
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
781
905
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
782
|
-
var templateObject_1$
|
|
906
|
+
var templateObject_1$u, templateObject_2$l;
|
|
783
907
|
|
|
784
908
|
var Select = function (props) {
|
|
785
909
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -796,18 +920,18 @@ var Select = function (props) {
|
|
|
796
920
|
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
797
921
|
};
|
|
798
922
|
|
|
799
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
923
|
+
var StyledSpacer = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
800
924
|
var horizontal = _a.horizontal;
|
|
801
925
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
802
926
|
}, function (_a) {
|
|
803
927
|
var vertical = _a.vertical;
|
|
804
928
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
805
929
|
});
|
|
806
|
-
var templateObject_1$
|
|
930
|
+
var templateObject_1$t;
|
|
807
931
|
|
|
808
932
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
809
933
|
|
|
810
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
934
|
+
var StyledSubheading = styled.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) {
|
|
811
935
|
var size = _a.size;
|
|
812
936
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
813
937
|
}, function (_a) {
|
|
@@ -835,11 +959,11 @@ var StyledSubheading = styled.p(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
835
959
|
return theme.colors.darkGray.dark;
|
|
836
960
|
}
|
|
837
961
|
});
|
|
838
|
-
var templateObject_1$
|
|
962
|
+
var templateObject_1$s;
|
|
839
963
|
|
|
840
964
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
841
965
|
|
|
842
|
-
var Container$
|
|
966
|
+
var Container$d = styled.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) {
|
|
843
967
|
var disabled = _a.disabled;
|
|
844
968
|
return (disabled ? "not-allowed" : "pointer");
|
|
845
969
|
}, function (_a) {
|
|
@@ -857,7 +981,7 @@ var Container$b = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
857
981
|
var disabled = _a.disabled;
|
|
858
982
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
859
983
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
860
|
-
var templateObject_1$
|
|
984
|
+
var templateObject_1$r;
|
|
861
985
|
|
|
862
986
|
var Toggle = function (props) {
|
|
863
987
|
var _a;
|
|
@@ -885,10 +1009,10 @@ var Toggle = function (props) {
|
|
|
885
1009
|
props.onChange(newValue);
|
|
886
1010
|
}
|
|
887
1011
|
};
|
|
888
|
-
return (jsx(Container$
|
|
1012
|
+
return (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: jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
889
1013
|
};
|
|
890
1014
|
|
|
891
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
1015
|
+
var Wrapper$3 = styled.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) {
|
|
892
1016
|
var level = _a.level;
|
|
893
1017
|
switch (level) {
|
|
894
1018
|
case 1:
|
|
@@ -899,7 +1023,7 @@ var Wrapper$3 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTem
|
|
|
899
1023
|
return "70px";
|
|
900
1024
|
}
|
|
901
1025
|
});
|
|
902
|
-
var templateObject_1$
|
|
1026
|
+
var templateObject_1$q;
|
|
903
1027
|
|
|
904
1028
|
var trophies = {
|
|
905
1029
|
1: {
|
|
@@ -935,7 +1059,7 @@ var trophies = {
|
|
|
935
1059
|
};
|
|
936
1060
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
937
1061
|
|
|
938
|
-
var Container$
|
|
1062
|
+
var Container$c = styled.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) {
|
|
939
1063
|
var type = _a.type;
|
|
940
1064
|
switch (type) {
|
|
941
1065
|
case "success":
|
|
@@ -952,11 +1076,11 @@ var Container$a = styled.div(templateObject_1$n || (templateObject_1$n = __makeT
|
|
|
952
1076
|
return theme.colors.red.base;
|
|
953
1077
|
}
|
|
954
1078
|
});
|
|
955
|
-
var templateObject_1$
|
|
1079
|
+
var templateObject_1$p;
|
|
956
1080
|
|
|
957
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
1081
|
+
var Alert = function (props) { return (jsxs(Container$c, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
958
1082
|
|
|
959
|
-
var StyledCard = styled.div(templateObject_1$
|
|
1083
|
+
var StyledCard = styled.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) {
|
|
960
1084
|
var ellipse = _a.ellipse;
|
|
961
1085
|
return ellipse
|
|
962
1086
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -965,23 +1089,23 @@ var StyledCard = styled.div(templateObject_1$m || (templateObject_1$m = __makeTe
|
|
|
965
1089
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
966
1090
|
: "";
|
|
967
1091
|
});
|
|
968
|
-
var Ellipse = styled.div(templateObject_2$
|
|
1092
|
+
var Ellipse = styled.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) {
|
|
969
1093
|
var color = _a.color;
|
|
970
1094
|
return color ? theme.colors[color].light : "";
|
|
971
1095
|
});
|
|
972
1096
|
var Content = styled.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"])));
|
|
973
|
-
var templateObject_1$
|
|
1097
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$6;
|
|
974
1098
|
|
|
975
1099
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
976
1100
|
|
|
977
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
978
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
1101
|
+
var Fieldset$1 = styled.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"])));
|
|
1102
|
+
var CheckboxContainer = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
979
1103
|
var CheckboxWrapper = styled.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"])));
|
|
980
1104
|
var Label$7 = styled(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) {
|
|
981
1105
|
var weight = _a.weight;
|
|
982
1106
|
return weight || 500;
|
|
983
1107
|
}, theme.colors.darkGray.base);
|
|
984
|
-
var templateObject_1$
|
|
1108
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$5, templateObject_4$4;
|
|
985
1109
|
|
|
986
1110
|
var Checkboxes = function (props) {
|
|
987
1111
|
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1000,13 +1124,13 @@ var Checkboxes = function (props) {
|
|
|
1000
1124
|
};
|
|
1001
1125
|
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$7, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1002
1126
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1003
|
-
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] },
|
|
1127
|
+
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1004
1128
|
}) }, void 0)] }, void 0));
|
|
1005
1129
|
};
|
|
1006
1130
|
|
|
1007
|
-
var Container$
|
|
1008
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
1009
|
-
var templateObject_1$
|
|
1131
|
+
var Container$b = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1132
|
+
var Label$6 = styled(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);
|
|
1133
|
+
var templateObject_1$m, templateObject_2$i;
|
|
1010
1134
|
|
|
1011
1135
|
var DateInputField = function (props) {
|
|
1012
1136
|
var onChange = function (value) {
|
|
@@ -1017,12 +1141,12 @@ var DateInputField = function (props) {
|
|
|
1017
1141
|
if (props.onBlur)
|
|
1018
1142
|
props.onBlur(props.name);
|
|
1019
1143
|
};
|
|
1020
|
-
return (jsxs(Container$
|
|
1144
|
+
return (jsxs(Container$b, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.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));
|
|
1021
1145
|
};
|
|
1022
1146
|
|
|
1023
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
1024
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
1025
|
-
var templateObject_1$
|
|
1147
|
+
var StyledIconButton = styled(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"])));
|
|
1148
|
+
var GhostIconButton = styled(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"])));
|
|
1149
|
+
var templateObject_1$l, templateObject_2$h;
|
|
1026
1150
|
|
|
1027
1151
|
var IconButton = function (props) {
|
|
1028
1152
|
if (props.color === "white")
|
|
@@ -1030,9 +1154,9 @@ var IconButton = function (props) {
|
|
|
1030
1154
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1031
1155
|
};
|
|
1032
1156
|
|
|
1033
|
-
var Container$
|
|
1034
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
1035
|
-
var templateObject_1$
|
|
1157
|
+
var Container$a = styled.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"])));
|
|
1158
|
+
var Label$5 = styled(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);
|
|
1159
|
+
var templateObject_1$k, templateObject_2$g;
|
|
1036
1160
|
|
|
1037
1161
|
var InputField = function (props) {
|
|
1038
1162
|
var onChange = function (value) {
|
|
@@ -1043,18 +1167,18 @@ var InputField = function (props) {
|
|
|
1043
1167
|
if (props.onBlur)
|
|
1044
1168
|
props.onBlur(props.name);
|
|
1045
1169
|
};
|
|
1046
|
-
return (jsxs(Container$
|
|
1170
|
+
return (jsxs(Container$a, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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));
|
|
1047
1171
|
};
|
|
1048
1172
|
|
|
1049
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
1173
|
+
var Wrapper$2 = styled.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) {
|
|
1050
1174
|
var chevron = _a.chevron;
|
|
1051
1175
|
return (chevron === "left" ? "4px" : "");
|
|
1052
1176
|
}, function (_a) {
|
|
1053
1177
|
var chevron = _a.chevron;
|
|
1054
1178
|
return (chevron === "right" ? "4px" : "");
|
|
1055
1179
|
});
|
|
1056
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
1057
|
-
var templateObject_1$
|
|
1180
|
+
var StyledLink = styled(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);
|
|
1181
|
+
var templateObject_1$j, templateObject_2$f;
|
|
1058
1182
|
|
|
1059
1183
|
var Link = function (props) {
|
|
1060
1184
|
var onClick = function (e) {
|
|
@@ -1066,22 +1190,40 @@ var Link = function (props) {
|
|
|
1066
1190
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
1067
1191
|
};
|
|
1068
1192
|
|
|
1069
|
-
var Container$
|
|
1193
|
+
var Container$9 = styled.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) {
|
|
1070
1194
|
var text = _a.text;
|
|
1071
1195
|
return (text ? "20px" : "");
|
|
1072
1196
|
});
|
|
1073
|
-
var templateObject_1$
|
|
1074
|
-
|
|
1075
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1076
|
-
|
|
1077
|
-
var Container$
|
|
1078
|
-
var dropdownIsVisible = _a.dropdownIsVisible;
|
|
1079
|
-
|
|
1197
|
+
var templateObject_1$i;
|
|
1198
|
+
|
|
1199
|
+
var Loading = function (props) { return (jsxs(Container$9, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1200
|
+
|
|
1201
|
+
var Container$8 = styled.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) {
|
|
1202
|
+
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1203
|
+
if (dropdownIsVisible) {
|
|
1204
|
+
switch (color) {
|
|
1205
|
+
default:
|
|
1206
|
+
case "light":
|
|
1207
|
+
return theme.colors.lightGray.light;
|
|
1208
|
+
case "dark":
|
|
1209
|
+
return theme.colors.lightGray.dark;
|
|
1210
|
+
}
|
|
1211
|
+
}
|
|
1212
|
+
return "";
|
|
1213
|
+
});
|
|
1214
|
+
var SelectedTranslationWrapper = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1215
|
+
var DropdownContainer = styled.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) {
|
|
1216
|
+
var color = _a.color;
|
|
1217
|
+
switch (color) {
|
|
1218
|
+
default:
|
|
1219
|
+
case "light":
|
|
1220
|
+
return theme.colors.lightGray.light;
|
|
1221
|
+
case "dark":
|
|
1222
|
+
return theme.colors.lightGray.dark;
|
|
1223
|
+
}
|
|
1080
1224
|
});
|
|
1081
|
-
var SelectedTranslationWrapper = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1082
|
-
var DropdownContainer = styled.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);
|
|
1083
1225
|
var Locale = styled.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);
|
|
1084
|
-
var templateObject_1$
|
|
1226
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
1085
1227
|
|
|
1086
1228
|
var LocaleSelect = function (props) {
|
|
1087
1229
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1090,31 +1232,32 @@ var LocaleSelect = function (props) {
|
|
|
1090
1232
|
setLocale(locale);
|
|
1091
1233
|
props.onChange(locale);
|
|
1092
1234
|
};
|
|
1093
|
-
return (jsxs(Container$
|
|
1235
|
+
return (jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedTranslationWrapper, { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0), jsx(Spacer, { horizontal: 10 }, void 0), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1094
1236
|
.filter(function (l) { return l !== locale; })
|
|
1095
|
-
.map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }, void 0))] }), void 0));
|
|
1237
|
+
.map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
|
|
1096
1238
|
};
|
|
1097
1239
|
|
|
1098
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1099
|
-
var templateObject_1$
|
|
1240
|
+
var Wrapper$1 = styled.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"])));
|
|
1241
|
+
var templateObject_1$g;
|
|
1100
1242
|
|
|
1101
1243
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1102
1244
|
|
|
1103
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1245
|
+
var NotificationContainer = styled.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) {
|
|
1104
1246
|
var contrast = _a.contrast;
|
|
1105
1247
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1106
1248
|
});
|
|
1107
|
-
var
|
|
1249
|
+
var ButtonContainer = styled.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"])));
|
|
1250
|
+
var templateObject_1$f, templateObject_2$d;
|
|
1108
1251
|
|
|
1109
1252
|
var Notification = function (props) {
|
|
1110
1253
|
if (!props.isVisible)
|
|
1111
1254
|
return null;
|
|
1112
|
-
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.
|
|
1255
|
+
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.buttons && (jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }, void 0))] }), void 0));
|
|
1113
1256
|
};
|
|
1114
1257
|
|
|
1115
|
-
var Container$
|
|
1116
|
-
var Label$4 = styled(StyledParagraph)(templateObject_2$
|
|
1117
|
-
var templateObject_1$
|
|
1258
|
+
var Container$7 = styled.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"])));
|
|
1259
|
+
var Label$4 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1260
|
+
var templateObject_1$e, templateObject_2$c;
|
|
1118
1261
|
|
|
1119
1262
|
var NumberField = function (props) {
|
|
1120
1263
|
var onChange = function (value) {
|
|
@@ -1125,12 +1268,12 @@ var NumberField = function (props) {
|
|
|
1125
1268
|
if (props.onBlur)
|
|
1126
1269
|
props.onBlur(props.name);
|
|
1127
1270
|
};
|
|
1128
|
-
return (jsxs(Container$
|
|
1271
|
+
return (jsxs(Container$7, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(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));
|
|
1129
1272
|
};
|
|
1130
1273
|
|
|
1131
|
-
var Container$
|
|
1132
|
-
var Label$3 = styled(StyledParagraph)(templateObject_2$
|
|
1133
|
-
var templateObject_1$
|
|
1274
|
+
var Container$6 = styled.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"])));
|
|
1275
|
+
var Label$3 = styled(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);
|
|
1276
|
+
var templateObject_1$d, templateObject_2$b;
|
|
1134
1277
|
|
|
1135
1278
|
var PasswordInputField = function (props) {
|
|
1136
1279
|
var onChange = function (value) {
|
|
@@ -1146,7 +1289,7 @@ var PasswordInputField = function (props) {
|
|
|
1146
1289
|
if (props.onBlur)
|
|
1147
1290
|
props.onBlur(props.name);
|
|
1148
1291
|
};
|
|
1149
|
-
return (jsxs(Container$
|
|
1292
|
+
return (jsxs(Container$6, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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));
|
|
1150
1293
|
};
|
|
1151
1294
|
|
|
1152
1295
|
var generateRandomString = function (length) {
|
|
@@ -1159,7 +1302,7 @@ var generateRandomString = function (length) {
|
|
|
1159
1302
|
return string;
|
|
1160
1303
|
};
|
|
1161
1304
|
|
|
1162
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1305
|
+
var PopupContainer = styled.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) {
|
|
1163
1306
|
var isVisible = _a.isVisible;
|
|
1164
1307
|
return (isVisible ? "100%" : "0%");
|
|
1165
1308
|
}, function (_a) {
|
|
@@ -1172,7 +1315,7 @@ var PopupContainer = styled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
1172
1315
|
var contrast = _a.contrast;
|
|
1173
1316
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1174
1317
|
});
|
|
1175
|
-
var templateObject_1$
|
|
1318
|
+
var templateObject_1$c;
|
|
1176
1319
|
|
|
1177
1320
|
var Popup = function (props) {
|
|
1178
1321
|
var popupRef = useRef(null);
|
|
@@ -1208,8 +1351,8 @@ var Popup = function (props) {
|
|
|
1208
1351
|
return (jsxs(Fragment, { children: [children, jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
1209
1352
|
};
|
|
1210
1353
|
|
|
1211
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1212
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1354
|
+
var Wrapper = styled.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"])));
|
|
1355
|
+
var StyledProgressBar = styled.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) {
|
|
1213
1356
|
var showInfo = _a.showInfo;
|
|
1214
1357
|
return (showInfo ? "10px" : "");
|
|
1215
1358
|
});
|
|
@@ -1220,10 +1363,88 @@ var Indicator = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTem
|
|
|
1220
1363
|
var color = _a.color;
|
|
1221
1364
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1222
1365
|
});
|
|
1223
|
-
var templateObject_1$
|
|
1366
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$3;
|
|
1224
1367
|
|
|
1225
1368
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
1226
1369
|
|
|
1370
|
+
var Container$5 = styled.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"])));
|
|
1371
|
+
var Step$1 = styled.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) {
|
|
1372
|
+
var status = _a.status;
|
|
1373
|
+
return (!!status ? "pointer" : "not-allowed");
|
|
1374
|
+
}, function (_a) {
|
|
1375
|
+
var status = _a.status;
|
|
1376
|
+
switch (status) {
|
|
1377
|
+
case "passed":
|
|
1378
|
+
return theme.colors.green.base;
|
|
1379
|
+
case "active":
|
|
1380
|
+
return theme.colors.blue.base;
|
|
1381
|
+
default:
|
|
1382
|
+
return theme.colors.lightGray.dark;
|
|
1383
|
+
}
|
|
1384
|
+
}, theme.colors.lightGray.light, function (_a) {
|
|
1385
|
+
var status = _a.status;
|
|
1386
|
+
return status === "active"
|
|
1387
|
+
? theme.colors.lightGray.light
|
|
1388
|
+
: theme.colors.darkGray.light;
|
|
1389
|
+
}, theme.colors.darkGray.base, theme.colors.lightGray.dark);
|
|
1390
|
+
var templateObject_1$a, templateObject_2$9;
|
|
1391
|
+
|
|
1392
|
+
var Steps$2 = function (props) { return (jsx(Container$5, { children: props.steps.map(function (_a, index) {
|
|
1393
|
+
var title = _a.title, onClick = _a.onClick;
|
|
1394
|
+
var step = index + 1;
|
|
1395
|
+
var status = props.current > step
|
|
1396
|
+
? "passed"
|
|
1397
|
+
: props.current === step
|
|
1398
|
+
? "active"
|
|
1399
|
+
: "";
|
|
1400
|
+
var onClickStep = function () {
|
|
1401
|
+
if (onClick && props.current >= step)
|
|
1402
|
+
onClick(step);
|
|
1403
|
+
};
|
|
1404
|
+
return (jsxs(Step$1, __assign({ status: status }, { children: [jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1405
|
+
}) }, void 0)); };
|
|
1406
|
+
|
|
1407
|
+
var Container$4 = styled.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"])));
|
|
1408
|
+
var Step = styled.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) {
|
|
1409
|
+
var status = _a.status;
|
|
1410
|
+
return (!!status ? "pointer" : "not-allowed");
|
|
1411
|
+
}, function (_a) {
|
|
1412
|
+
var status = _a.status;
|
|
1413
|
+
switch (status) {
|
|
1414
|
+
case "passed":
|
|
1415
|
+
return theme.colors.green.base;
|
|
1416
|
+
case "active":
|
|
1417
|
+
return theme.colors.blue.base;
|
|
1418
|
+
default:
|
|
1419
|
+
return theme.colors.lightGray.dark;
|
|
1420
|
+
}
|
|
1421
|
+
}, function (_a) {
|
|
1422
|
+
var status = _a.status;
|
|
1423
|
+
return status === "active"
|
|
1424
|
+
? theme.colors.lightGray.light
|
|
1425
|
+
: theme.colors.darkGray.light;
|
|
1426
|
+
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1427
|
+
var templateObject_1$9, templateObject_2$8;
|
|
1428
|
+
|
|
1429
|
+
var Steps$1 = function (props) { return (jsx(Container$4, { children: props.steps.map(function (_a, index) {
|
|
1430
|
+
var title = _a.title, onClick = _a.onClick;
|
|
1431
|
+
var step = index + 1;
|
|
1432
|
+
var status = props.current > step
|
|
1433
|
+
? "passed"
|
|
1434
|
+
: props.current === step
|
|
1435
|
+
? "active"
|
|
1436
|
+
: "";
|
|
1437
|
+
var onClickStep = function () {
|
|
1438
|
+
if (onClick && props.current >= step)
|
|
1439
|
+
onClick(step);
|
|
1440
|
+
};
|
|
1441
|
+
return (jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsx("div", { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }, void 0), jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1442
|
+
}) }, void 0)); };
|
|
1443
|
+
|
|
1444
|
+
var Steps = function (props) {
|
|
1445
|
+
return props.alignment === "vertical" ? (jsx(Steps$1, __assign({}, props), void 0)) : (jsx(Steps$2, __assign({}, props), void 0));
|
|
1446
|
+
};
|
|
1447
|
+
|
|
1227
1448
|
var Fieldset = styled.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"])));
|
|
1228
1449
|
var RadioContainer = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1229
1450
|
var RadioWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
@@ -1244,7 +1465,7 @@ var RadioGroup = function (props) {
|
|
|
1244
1465
|
};
|
|
1245
1466
|
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1246
1467
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1247
|
-
return (jsxs(RadioWrapper, { children: [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), jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] },
|
|
1468
|
+
return (jsxs(RadioWrapper, { children: [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), jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1248
1469
|
}) }, void 0)] }, void 0));
|
|
1249
1470
|
};
|
|
1250
1471
|
|
|
@@ -1261,9 +1482,9 @@ var SelectField = function (props) {
|
|
|
1261
1482
|
if (props.onBlur)
|
|
1262
1483
|
props.onBlur(props.name);
|
|
1263
1484
|
};
|
|
1264
|
-
return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(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) {
|
|
1485
|
+
return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(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) {
|
|
1265
1486
|
var value = _a.value, label = _a.label;
|
|
1266
|
-
return (jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1487
|
+
return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1267
1488
|
}) }), void 0)] }, void 0));
|
|
1268
1489
|
};
|
|
1269
1490
|
|
|
@@ -1341,7 +1562,7 @@ var FeedbackColors = {
|
|
|
1341
1562
|
success: theme.colors.green.base,
|
|
1342
1563
|
error: theme.colors.red.base,
|
|
1343
1564
|
};
|
|
1344
|
-
var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom:
|
|
1565
|
+
var FieldWrapper = styled.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) {
|
|
1345
1566
|
var status = _a.status;
|
|
1346
1567
|
return FeedbackColors[status];
|
|
1347
1568
|
});
|
|
@@ -1450,19 +1671,22 @@ var Form = function (props) {
|
|
|
1450
1671
|
}) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1451
1672
|
};
|
|
1452
1673
|
|
|
1453
|
-
var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width:
|
|
1454
|
-
var active = _a.active, color = _a.color;
|
|
1455
|
-
return active ? theme.colors[color].light : theme.colors.lightGray.light;
|
|
1456
|
-
}, function (_a) {
|
|
1674
|
+
var Container$1 = styled.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) {
|
|
1457
1675
|
var color = _a.color, active = _a.active;
|
|
1458
1676
|
if (active)
|
|
1459
1677
|
return theme.colors[color].dark;
|
|
1460
1678
|
if (color)
|
|
1461
1679
|
return theme.colors[color].base;
|
|
1462
1680
|
return "";
|
|
1681
|
+
}, function (_a) {
|
|
1682
|
+
var active = _a.active, color = _a.color;
|
|
1683
|
+
return active ? theme.colors[color].light : theme.colors.lightGray.light;
|
|
1463
1684
|
}, function (_a) {
|
|
1464
1685
|
var color = _a.color;
|
|
1465
1686
|
return (color ? "2px" : "0");
|
|
1687
|
+
}, function (_a) {
|
|
1688
|
+
var color = _a.color;
|
|
1689
|
+
return (color ? theme.colors[color].dark : "");
|
|
1466
1690
|
}, function (_a) {
|
|
1467
1691
|
var color = _a.color, active = _a.active;
|
|
1468
1692
|
if (active)
|
|
@@ -1473,32 +1697,86 @@ var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeT
|
|
|
1473
1697
|
});
|
|
1474
1698
|
var templateObject_1$2;
|
|
1475
1699
|
|
|
1476
|
-
var Key = function (props) {
|
|
1700
|
+
var Key = function (props) {
|
|
1701
|
+
var _a;
|
|
1702
|
+
return (jsx(Container$1, __assign({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsx("svg", __assign({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }, void 0) }), void 0)) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsx(Heading, __assign({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) }), void 0));
|
|
1703
|
+
};
|
|
1477
1704
|
|
|
1478
|
-
var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width:
|
|
1705
|
+
var Container = styled.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"])));
|
|
1479
1706
|
var SpecialRow = styled.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"])));
|
|
1480
|
-
var TopRow = styled.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:
|
|
1481
|
-
var StartRow = styled.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:
|
|
1707
|
+
var TopRow = styled.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"])));
|
|
1708
|
+
var StartRow = styled.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"])));
|
|
1482
1709
|
var BottomRow = styled.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"])));
|
|
1483
|
-
var SpacebarRow = styled.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:
|
|
1710
|
+
var SpacebarRow = styled.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"])));
|
|
1484
1711
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
1485
1712
|
|
|
1486
1713
|
var Keyboard = function (props) {
|
|
1487
1714
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
1715
|
+
var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
1488
1716
|
useEffect(function () {
|
|
1489
1717
|
if (!!props.keys) {
|
|
1490
1718
|
var keys_1 = {};
|
|
1719
|
+
var shiftKeys_1 = {
|
|
1720
|
+
left: [],
|
|
1721
|
+
right: [],
|
|
1722
|
+
};
|
|
1491
1723
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1492
1724
|
var k = _a[_i];
|
|
1493
|
-
var index = k.index, key = k.key, color = k.color;
|
|
1725
|
+
var index = k.index, key = k.key, color = k.color, shiftKey = k.shiftKey;
|
|
1494
1726
|
keys_1[index] = { character: key, color: color };
|
|
1727
|
+
if (shiftKey) {
|
|
1728
|
+
shiftKeys_1[k.hand].push(key);
|
|
1729
|
+
}
|
|
1495
1730
|
}
|
|
1496
1731
|
setKeys(keys_1);
|
|
1732
|
+
setShiftKeys(shiftKeys_1);
|
|
1497
1733
|
}
|
|
1498
1734
|
}, [props.keys]);
|
|
1499
1735
|
if (!keys)
|
|
1500
1736
|
return null;
|
|
1501
|
-
return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key,
|
|
1737
|
+
return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[41].character, keys[83].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
1738
|
+
keys[83].character === props.activeKey }, 41), jsx(Key, { characters: [keys[39].character, keys[81].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
1739
|
+
keys[81].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[37].character, keys[79].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
1740
|
+
keys[79].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[35].character, keys[77].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
1741
|
+
keys[77].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[33].character, keys[75].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
1742
|
+
keys[75].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[43].character, keys[85].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
1743
|
+
keys[85].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[42].character, keys[84].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
1744
|
+
keys[84].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[32].character, keys[74].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
1745
|
+
keys[74].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[34].character, keys[76].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
1746
|
+
keys[76].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[36].character, keys[78].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
1747
|
+
keys[78].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[38].character, keys[80].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
1748
|
+
keys[80].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[40].character, keys[82].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
1749
|
+
keys[82].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(TopRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[61].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
1750
|
+
keys[61].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[59].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
1751
|
+
keys[59].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[57].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
1752
|
+
keys[57].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[55].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
1753
|
+
keys[55].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[63].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
1754
|
+
keys[63].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[62].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
1755
|
+
keys[62].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[54].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
1756
|
+
keys[54].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[56].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
1757
|
+
keys[56].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[58].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
1758
|
+
keys[58].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[60].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
1759
|
+
keys[60].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(StartRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[51].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
1760
|
+
keys[51].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[49].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
1761
|
+
keys[49].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[47].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
1762
|
+
keys[47].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[45].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
1763
|
+
keys[45].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[53].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
1764
|
+
keys[53].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[52].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
1765
|
+
keys[52].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[44].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
1766
|
+
keys[44].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[46].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
1767
|
+
keys[46].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[48].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
1768
|
+
keys[48].character === props.activeKey }, void 0), 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 ||
|
|
1769
|
+
keys[50].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(BottomRow, { children: [jsx(Key, { characters: ["Shift"], color: keys[29].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsx(Key, { characters: [keys[71].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
1770
|
+
keys[71].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[69].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
1771
|
+
keys[69].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[67].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
1772
|
+
keys[67].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[65].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
1773
|
+
keys[65].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[73].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
1774
|
+
keys[73].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[72].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
1775
|
+
keys[72].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[64].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
1776
|
+
keys[64].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[24].character, keys[66].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
1777
|
+
keys[66].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[26].character, keys[68].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
1778
|
+
keys[68].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[28].character, keys[70].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
1779
|
+
keys[70].character === props.activeKey }, void 0), jsx(Key, { characters: ["Shift"], color: keys[28].color, active: shiftKeys.left.includes(props.activeKey) }, void 0)] }, void 0), jsxs(SpacebarRow, { children: [jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0)] }, void 0));
|
|
1502
1780
|
};
|
|
1503
1781
|
|
|
1504
1782
|
var Mask = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
@@ -1524,5 +1802,5 @@ var Modal = function (props) {
|
|
|
1524
1802
|
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1525
1803
|
};
|
|
1526
1804
|
|
|
1527
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1805
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Steps, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1528
1806
|
//# sourceMappingURL=index.es.js.map
|