@typeolymp/ui-components 1.9.8 → 1.9.10
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/Range/index.d.ts +13 -0
- package/build/components/atoms/Range/stories.d.ts +7 -0
- package/build/components/atoms/Range/styles.d.ts +1 -0
- package/build/components/molecules/RangeField/index.d.ts +12 -0
- package/build/components/molecules/RangeField/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +5 -1
- package/build/components/organisms/Form/stories.d.ts +1 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +205 -133
- package/build/index.es.js.map +1 -1
- package/build/index.js +205 -132
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -189,7 +189,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
189
189
|
return cooked;
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
var StyledButton = styled.button(templateObject_1$
|
|
192
|
+
var StyledButton = styled.button(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
193
193
|
var fluid = _a.fluid;
|
|
194
194
|
return (fluid ? "100%" : "fit-content");
|
|
195
195
|
}, function (_a) {
|
|
@@ -239,7 +239,7 @@ var StyledButton = styled.button(templateObject_1$L || (templateObject_1$L = __m
|
|
|
239
239
|
? theme.button.medium.heightActive
|
|
240
240
|
: theme.button[size].heightActive;
|
|
241
241
|
});
|
|
242
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
242
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$t || (templateObject_2$t = __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) {
|
|
243
243
|
var size = _a.size;
|
|
244
244
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
245
245
|
});
|
|
@@ -259,7 +259,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$a || (templateObject_3$a
|
|
|
259
259
|
? theme.button.medium.marginTopActive
|
|
260
260
|
: theme.button[size].marginTopActive;
|
|
261
261
|
});
|
|
262
|
-
var templateObject_1$
|
|
262
|
+
var templateObject_1$N, templateObject_2$t, templateObject_3$a;
|
|
263
263
|
|
|
264
264
|
var Button = forwardRef(function (_a, ref) {
|
|
265
265
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, onClick = _a.onClick;
|
|
@@ -272,7 +272,7 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
272
272
|
return (jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsx("span", { children: label }) })));
|
|
273
273
|
});
|
|
274
274
|
|
|
275
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
275
|
+
var StyledCheckbox = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
276
276
|
var checked = _a.checked, disabled = _a.disabled;
|
|
277
277
|
if (disabled)
|
|
278
278
|
return theme.colors.lightGray.darker;
|
|
@@ -293,7 +293,7 @@ var StyledCheckbox = styled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
293
293
|
return theme.colors.green.base;
|
|
294
294
|
return theme.colors.lightGray.darker;
|
|
295
295
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
296
|
-
var templateObject_1$
|
|
296
|
+
var templateObject_1$M;
|
|
297
297
|
|
|
298
298
|
var Checkbox = function (props) {
|
|
299
299
|
var _a;
|
|
@@ -326,7 +326,7 @@ var Checkbox = function (props) {
|
|
|
326
326
|
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" }) }))), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
327
327
|
};
|
|
328
328
|
|
|
329
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
329
|
+
var Wrapper$9 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
330
330
|
var size = _a.size;
|
|
331
331
|
switch (size) {
|
|
332
332
|
case "small":
|
|
@@ -349,7 +349,7 @@ var Wrapper$9 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
349
349
|
return "27px";
|
|
350
350
|
}
|
|
351
351
|
});
|
|
352
|
-
var templateObject_1$
|
|
352
|
+
var templateObject_1$L;
|
|
353
353
|
|
|
354
354
|
var parsers = {};
|
|
355
355
|
|
|
@@ -397,7 +397,7 @@ var flags = {
|
|
|
397
397
|
};
|
|
398
398
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
399
399
|
|
|
400
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
400
|
+
var StyledHeading = styled.span(templateObject_1$K || (templateObject_1$K = __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) {
|
|
401
401
|
var type = _a.type;
|
|
402
402
|
return theme.heading[type].fontSize;
|
|
403
403
|
}, function (_a) {
|
|
@@ -421,14 +421,14 @@ var StyledHeading = styled.span(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
421
421
|
var align = _a.align;
|
|
422
422
|
return align;
|
|
423
423
|
});
|
|
424
|
-
var templateObject_1$
|
|
424
|
+
var templateObject_1$K;
|
|
425
425
|
|
|
426
426
|
var Heading = function (props) {
|
|
427
427
|
var element = !!props.as ? props.as : props.type;
|
|
428
428
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children })));
|
|
429
429
|
};
|
|
430
430
|
|
|
431
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
431
|
+
var Wrapper$8 = styled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
432
432
|
var size = _a.size;
|
|
433
433
|
return theme.icon[size] || theme.icon.medium;
|
|
434
434
|
}, function (_a) {
|
|
@@ -458,7 +458,7 @@ var Wrapper$8 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTem
|
|
|
458
458
|
return theme.colors.lightGray.light;
|
|
459
459
|
}
|
|
460
460
|
});
|
|
461
|
-
var templateObject_1$
|
|
461
|
+
var templateObject_1$J;
|
|
462
462
|
|
|
463
463
|
var icons = {
|
|
464
464
|
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" })),
|
|
@@ -487,7 +487,7 @@ var icons = {
|
|
|
487
487
|
};
|
|
488
488
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
489
489
|
|
|
490
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
490
|
+
var Wrapper$7 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
491
491
|
var size = _a.size;
|
|
492
492
|
switch (size) {
|
|
493
493
|
default:
|
|
@@ -499,7 +499,7 @@ var Wrapper$7 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTem
|
|
|
499
499
|
return "118px";
|
|
500
500
|
}
|
|
501
501
|
});
|
|
502
|
-
var templateObject_1$
|
|
502
|
+
var templateObject_1$I;
|
|
503
503
|
|
|
504
504
|
var illustrations = {
|
|
505
505
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), 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" }), 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" }), 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" }), 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" }), 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" })] }))),
|
|
@@ -515,14 +515,14 @@ var illustrations = {
|
|
|
515
515
|
};
|
|
516
516
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }))); };
|
|
517
517
|
|
|
518
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
518
|
+
var InputIconWrapper = styled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
519
519
|
var isChanged = _a.isChanged;
|
|
520
520
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
521
521
|
}, function (_a) {
|
|
522
522
|
var disabled = _a.disabled;
|
|
523
523
|
return (disabled ? "not-allowed" : "pointer");
|
|
524
524
|
});
|
|
525
|
-
var StyledInput = styled.input(templateObject_2$
|
|
525
|
+
var StyledInput = styled.input(templateObject_2$s || (templateObject_2$s = __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) {
|
|
526
526
|
var disabled = _a.disabled;
|
|
527
527
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
528
528
|
}, function (_a) {
|
|
@@ -535,7 +535,7 @@ var StyledInput = styled.input(templateObject_2$r || (templateObject_2$r = __mak
|
|
|
535
535
|
var disabled = _a.disabled;
|
|
536
536
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
537
537
|
}, 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));
|
|
538
|
-
var templateObject_1$
|
|
538
|
+
var templateObject_1$H, templateObject_2$s;
|
|
539
539
|
|
|
540
540
|
var PasswordInput = function (props) {
|
|
541
541
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -715,7 +715,7 @@ Input.Date = DateInput;
|
|
|
715
715
|
|
|
716
716
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxs("g", __assign({ fill: "#23292f" }, { children: [jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
717
717
|
|
|
718
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
718
|
+
var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
719
719
|
var size = _a.size;
|
|
720
720
|
switch (size) {
|
|
721
721
|
default:
|
|
@@ -725,7 +725,7 @@ var Wrapper$6 = styled.div(templateObject_1$E || (templateObject_1$E = __makeTem
|
|
|
725
725
|
return "116px";
|
|
726
726
|
}
|
|
727
727
|
});
|
|
728
|
-
var templateObject_1$
|
|
728
|
+
var templateObject_1$G;
|
|
729
729
|
|
|
730
730
|
var medals = {
|
|
731
731
|
small: {
|
|
@@ -741,11 +741,11 @@ var medals = {
|
|
|
741
741
|
};
|
|
742
742
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
743
743
|
|
|
744
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
744
|
+
var Wrapper$5 = styled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
745
745
|
var disabled = _a.disabled;
|
|
746
746
|
return (disabled ? "49.5px" : "");
|
|
747
747
|
});
|
|
748
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
748
|
+
var StyledInputNumber = styled.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
749
749
|
var disabled = _a.disabled;
|
|
750
750
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
751
751
|
}, function (_a) {
|
|
@@ -758,7 +758,7 @@ var StyledInputNumber = styled.input(templateObject_2$q || (templateObject_2$q =
|
|
|
758
758
|
var disabled = _a.disabled;
|
|
759
759
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
760
760
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
761
|
-
var templateObject_1$
|
|
761
|
+
var templateObject_1$F, templateObject_2$r;
|
|
762
762
|
|
|
763
763
|
var Number = function (props) {
|
|
764
764
|
var inputRef = useRef(null);
|
|
@@ -795,7 +795,7 @@ var Number = function (props) {
|
|
|
795
795
|
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
796
796
|
};
|
|
797
797
|
|
|
798
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
798
|
+
var StyledParagraph = styled.p(templateObject_1$E || (templateObject_1$E = __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) {
|
|
799
799
|
var size = _a.size;
|
|
800
800
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
801
801
|
}, function (_a) {
|
|
@@ -827,11 +827,11 @@ var StyledParagraph = styled.p(templateObject_1$C || (templateObject_1$C = __mak
|
|
|
827
827
|
var align = _a.align;
|
|
828
828
|
return align;
|
|
829
829
|
});
|
|
830
|
-
var templateObject_1$
|
|
830
|
+
var templateObject_1$E;
|
|
831
831
|
|
|
832
832
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }))); };
|
|
833
833
|
|
|
834
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
834
|
+
var StyledRadio = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
835
835
|
var checked = _a.checked, disabled = _a.disabled;
|
|
836
836
|
if (disabled)
|
|
837
837
|
return theme.colors.lightGray.darker;
|
|
@@ -859,7 +859,7 @@ var StyledRadio = styled.div(templateObject_1$B || (templateObject_1$B = __makeT
|
|
|
859
859
|
return theme.colors.green.base;
|
|
860
860
|
return "";
|
|
861
861
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
862
|
-
var templateObject_1$
|
|
862
|
+
var templateObject_1$D;
|
|
863
863
|
|
|
864
864
|
var Radio = function (props) {
|
|
865
865
|
var _a, _b;
|
|
@@ -891,11 +891,50 @@ var Radio = function (props) {
|
|
|
891
891
|
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 }) })));
|
|
892
892
|
};
|
|
893
893
|
|
|
894
|
-
var
|
|
894
|
+
var StyledRange = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
|
|
895
|
+
var value = _a.value, disabled = _a.disabled;
|
|
896
|
+
return "linear-gradient(90deg,\n ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " 100%\n )");
|
|
897
|
+
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
898
|
+
var disabled = _a.disabled;
|
|
899
|
+
return "7px solid ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base);
|
|
900
|
+
}, function (_a) {
|
|
901
|
+
var disabled = _a.disabled;
|
|
902
|
+
return disabled ? "not-allowed" : "pointer";
|
|
903
|
+
});
|
|
904
|
+
var templateObject_1$C;
|
|
905
|
+
|
|
906
|
+
var Range = function (props) {
|
|
907
|
+
var _a;
|
|
908
|
+
var rangeRef = useRef(null);
|
|
909
|
+
var _b = useState(props.defaultValue || 0), value = _b[0], setValue = _b[1];
|
|
910
|
+
useEffect(function () {
|
|
911
|
+
if (props.autoFocus)
|
|
912
|
+
rangeRef.current.focus();
|
|
913
|
+
}, []);
|
|
914
|
+
useEffect(function () {
|
|
915
|
+
var value = parseInt(rangeRef.current.value);
|
|
916
|
+
setValue(value);
|
|
917
|
+
}, [(_a = rangeRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
918
|
+
useEffect(function () {
|
|
919
|
+
rangeRef.current.value = "".concat(value);
|
|
920
|
+
}, [value]);
|
|
921
|
+
var onChange = function () {
|
|
922
|
+
if (!props.disabled) {
|
|
923
|
+
var value_1 = parseInt(rangeRef.current.value);
|
|
924
|
+
if (!!props.onChange) {
|
|
925
|
+
props.onChange(value_1);
|
|
926
|
+
setValue(value_1);
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
};
|
|
930
|
+
return (jsx(StyledRange, __assign({ value: value, disabled: props.disabled }, { children: jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
931
|
+
};
|
|
932
|
+
|
|
933
|
+
var Wrapper$4 = styled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
895
934
|
var disabled = _a.disabled;
|
|
896
935
|
return (disabled ? "not-allowed" : "pointer");
|
|
897
936
|
});
|
|
898
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
937
|
+
var StyledSelect = styled.select(templateObject_2$q || (templateObject_2$q = __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) {
|
|
899
938
|
var disabled = _a.disabled;
|
|
900
939
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
901
940
|
}, function (_a) {
|
|
@@ -908,7 +947,7 @@ var StyledSelect = styled.select(templateObject_2$p || (templateObject_2$p = __m
|
|
|
908
947
|
var isChanged = _a.isChanged;
|
|
909
948
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
910
949
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
911
|
-
var templateObject_1$
|
|
950
|
+
var templateObject_1$B, templateObject_2$q;
|
|
912
951
|
|
|
913
952
|
var Select = function (props) {
|
|
914
953
|
var _a;
|
|
@@ -930,18 +969,18 @@ var Select = function (props) {
|
|
|
930
969
|
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
931
970
|
};
|
|
932
971
|
|
|
933
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
972
|
+
var StyledSpacer = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
934
973
|
var horizontal = _a.horizontal;
|
|
935
974
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
936
975
|
}, function (_a) {
|
|
937
976
|
var vertical = _a.vertical;
|
|
938
977
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
939
978
|
});
|
|
940
|
-
var templateObject_1$
|
|
979
|
+
var templateObject_1$A;
|
|
941
980
|
|
|
942
981
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props))); };
|
|
943
982
|
|
|
944
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
983
|
+
var StyledSubheading = styled.p(templateObject_1$z || (templateObject_1$z = __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) {
|
|
945
984
|
var size = _a.size;
|
|
946
985
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
947
986
|
}, function (_a) {
|
|
@@ -969,18 +1008,18 @@ var StyledSubheading = styled.p(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
969
1008
|
return theme.colors.darkGray.dark;
|
|
970
1009
|
}
|
|
971
1010
|
});
|
|
972
|
-
var templateObject_1$
|
|
1011
|
+
var templateObject_1$z;
|
|
973
1012
|
|
|
974
1013
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }))); };
|
|
975
1014
|
|
|
976
|
-
var Container$
|
|
977
|
-
var templateObject_1$
|
|
1015
|
+
var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
1016
|
+
var templateObject_1$y;
|
|
978
1017
|
|
|
979
1018
|
var Tag = function (props) {
|
|
980
|
-
return jsx(Container$
|
|
1019
|
+
return jsx(Container$j, { children: props.children });
|
|
981
1020
|
};
|
|
982
1021
|
|
|
983
|
-
var Container$
|
|
1022
|
+
var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-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 min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-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) {
|
|
984
1023
|
var disabled = _a.disabled;
|
|
985
1024
|
return (disabled ? "not-allowed" : "pointer");
|
|
986
1025
|
}, function (_a) {
|
|
@@ -998,7 +1037,7 @@ var Container$h = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
|
|
|
998
1037
|
var disabled = _a.disabled;
|
|
999
1038
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
1000
1039
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
1001
|
-
var templateObject_1$
|
|
1040
|
+
var templateObject_1$x;
|
|
1002
1041
|
|
|
1003
1042
|
var Toggle = function (props) {
|
|
1004
1043
|
var _a;
|
|
@@ -1026,10 +1065,10 @@ var Toggle = function (props) {
|
|
|
1026
1065
|
props.onChange(newValue);
|
|
1027
1066
|
}
|
|
1028
1067
|
};
|
|
1029
|
-
return (jsx(Container$
|
|
1068
|
+
return (jsx(Container$i, __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 }) })));
|
|
1030
1069
|
};
|
|
1031
1070
|
|
|
1032
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
1071
|
+
var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
1033
1072
|
var level = _a.level;
|
|
1034
1073
|
switch (level) {
|
|
1035
1074
|
case 1:
|
|
@@ -1040,7 +1079,7 @@ var Wrapper$3 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTem
|
|
|
1040
1079
|
return "70px";
|
|
1041
1080
|
}
|
|
1042
1081
|
});
|
|
1043
|
-
var templateObject_1$
|
|
1082
|
+
var templateObject_1$w;
|
|
1044
1083
|
|
|
1045
1084
|
var trophies = {
|
|
1046
1085
|
1: {
|
|
@@ -1076,7 +1115,7 @@ var trophies = {
|
|
|
1076
1115
|
};
|
|
1077
1116
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
1078
1117
|
|
|
1079
|
-
var Container$
|
|
1118
|
+
var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
1080
1119
|
var type = _a.type;
|
|
1081
1120
|
switch (type) {
|
|
1082
1121
|
case "success":
|
|
@@ -1093,11 +1132,11 @@ var Container$g = styled.div(templateObject_1$u || (templateObject_1$u = __makeT
|
|
|
1093
1132
|
return theme.colors.red.base;
|
|
1094
1133
|
}
|
|
1095
1134
|
});
|
|
1096
|
-
var templateObject_1$
|
|
1135
|
+
var templateObject_1$v;
|
|
1097
1136
|
|
|
1098
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
1137
|
+
var Alert = function (props) { return (jsxs(Container$h, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx(Spacer, { horizontal: 10 }), jsx(Paragraph, { children: props.message })] }))); };
|
|
1099
1138
|
|
|
1100
|
-
var StyledCard = styled.div(templateObject_1$
|
|
1139
|
+
var StyledCard = styled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
1101
1140
|
var ellipse = _a.ellipse;
|
|
1102
1141
|
return ellipse
|
|
1103
1142
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1106,23 +1145,23 @@ var StyledCard = styled.div(templateObject_1$t || (templateObject_1$t = __makeTe
|
|
|
1106
1145
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1107
1146
|
: "";
|
|
1108
1147
|
});
|
|
1109
|
-
var Ellipse = styled.div(templateObject_2$
|
|
1148
|
+
var Ellipse = styled.div(templateObject_2$p || (templateObject_2$p = __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) {
|
|
1110
1149
|
var color = _a.color;
|
|
1111
1150
|
return color ? theme.colors[color].light : "";
|
|
1112
1151
|
});
|
|
1113
1152
|
var Content = styled.div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
1114
|
-
var templateObject_1$
|
|
1153
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9;
|
|
1115
1154
|
|
|
1116
1155
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }), jsx(Content, { children: props.children })] }))); };
|
|
1117
1156
|
|
|
1118
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
1119
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
1157
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1158
|
+
var CheckboxContainer = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1120
1159
|
var CheckboxWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
1121
|
-
var Label$
|
|
1160
|
+
var Label$9 = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
1122
1161
|
var weight = _a.weight;
|
|
1123
1162
|
return weight || 500;
|
|
1124
1163
|
}, theme.colors.darkGray.base);
|
|
1125
|
-
var templateObject_1$
|
|
1164
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$8, templateObject_4$6;
|
|
1126
1165
|
|
|
1127
1166
|
var Checkboxes = function (props) {
|
|
1128
1167
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1139,18 +1178,18 @@ var Checkboxes = function (props) {
|
|
|
1139
1178
|
if (props.onBlur)
|
|
1140
1179
|
props.onBlur(props.name);
|
|
1141
1180
|
};
|
|
1142
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
1181
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$9, __assign({ as: "legend" }, { children: props.legend })), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1143
1182
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1144
|
-
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 }), jsx(Label$
|
|
1183
|
+
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 }), jsx(Label$9, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1145
1184
|
}) })] }));
|
|
1146
1185
|
};
|
|
1147
1186
|
|
|
1148
|
-
var Container$
|
|
1149
|
-
var Item = styled.div(templateObject_2$
|
|
1187
|
+
var Container$g = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
1188
|
+
var Item = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
1150
1189
|
var isOpen = _a.isOpen;
|
|
1151
1190
|
return (isOpen ? "" : "none");
|
|
1152
1191
|
}, theme.colors.lightGray.darker);
|
|
1153
|
-
var templateObject_1$
|
|
1192
|
+
var templateObject_1$s, templateObject_2$n;
|
|
1154
1193
|
|
|
1155
1194
|
var Collapse = function (props) {
|
|
1156
1195
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -1162,15 +1201,15 @@ var Collapse = function (props) {
|
|
|
1162
1201
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1163
1202
|
}
|
|
1164
1203
|
};
|
|
1165
|
-
return (jsx(Container$
|
|
1204
|
+
return (jsx(Container$g, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1166
1205
|
var isOpen = openItems.includes(index);
|
|
1167
1206
|
return (jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h6" }, { children: item.title })), jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
1168
1207
|
}) })));
|
|
1169
1208
|
};
|
|
1170
1209
|
|
|
1171
|
-
var Container$
|
|
1172
|
-
var Label$
|
|
1173
|
-
var templateObject_1$
|
|
1210
|
+
var Container$f = styled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
1211
|
+
var Label$8 = styled(StyledParagraph)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1212
|
+
var templateObject_1$r, templateObject_2$m;
|
|
1174
1213
|
|
|
1175
1214
|
var DateInputField = function (props) {
|
|
1176
1215
|
var onChange = function (value) {
|
|
@@ -1181,12 +1220,12 @@ var DateInputField = function (props) {
|
|
|
1181
1220
|
if (props.onBlur)
|
|
1182
1221
|
props.onBlur(props.name);
|
|
1183
1222
|
};
|
|
1184
|
-
return (jsxs(Container$
|
|
1223
|
+
return (jsxs(Container$f, { children: [jsx(Label$8, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1185
1224
|
};
|
|
1186
1225
|
|
|
1187
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
1188
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
1189
|
-
var templateObject_1$
|
|
1226
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
1227
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$l || (templateObject_2$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 :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"])));
|
|
1228
|
+
var templateObject_1$q, templateObject_2$l;
|
|
1190
1229
|
|
|
1191
1230
|
var IconButton = function (props) {
|
|
1192
1231
|
if (props.color === "white")
|
|
@@ -1194,9 +1233,9 @@ var IconButton = function (props) {
|
|
|
1194
1233
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
1195
1234
|
};
|
|
1196
1235
|
|
|
1197
|
-
var Container$
|
|
1198
|
-
var Label$
|
|
1199
|
-
var templateObject_1$
|
|
1236
|
+
var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
1237
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1238
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1200
1239
|
|
|
1201
1240
|
var InputField = function (props) {
|
|
1202
1241
|
var onChange = function (value) {
|
|
@@ -1207,10 +1246,10 @@ var InputField = function (props) {
|
|
|
1207
1246
|
if (props.onBlur)
|
|
1208
1247
|
props.onBlur(props.name);
|
|
1209
1248
|
};
|
|
1210
|
-
return (jsxs(Container$
|
|
1249
|
+
return (jsxs(Container$e, { children: [jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1211
1250
|
};
|
|
1212
1251
|
|
|
1213
|
-
var Container$
|
|
1252
|
+
var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
1214
1253
|
var status = _a.status, color = _a.color;
|
|
1215
1254
|
switch (status) {
|
|
1216
1255
|
case "passed":
|
|
@@ -1254,23 +1293,23 @@ var Container$c = styled.div(templateObject_1$n || (templateObject_1$n = __makeT
|
|
|
1254
1293
|
return theme.colors.darkGray.light;
|
|
1255
1294
|
}
|
|
1256
1295
|
});
|
|
1257
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
1258
|
-
var templateObject_1$
|
|
1296
|
+
var CheckIconWrapper = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
1297
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1259
1298
|
|
|
1260
|
-
var Key$1 = function (props) { return (jsxs(Container$
|
|
1299
|
+
var Key$1 = function (props) { return (jsxs(Container$d, __assign({}, props, { children: [props.status === "passed" && (jsx(CheckIconWrapper, { children: jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx("svg", __assign({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
1261
1300
|
marginTop: "13px",
|
|
1262
1301
|
transform: "scale(2)",
|
|
1263
1302
|
} }, { 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" }) }))) : (jsx(Heading, __assign({ type: "h1" }, { children: props.char })))] }))); };
|
|
1264
1303
|
|
|
1265
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
1304
|
+
var Wrapper$2 = styled.a(templateObject_1$n || (templateObject_1$n = __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-top: 3px;\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-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
1266
1305
|
var chevron = _a.chevron;
|
|
1267
1306
|
return (chevron === "left" ? "4px" : "");
|
|
1268
1307
|
}, function (_a) {
|
|
1269
1308
|
var chevron = _a.chevron;
|
|
1270
1309
|
return (chevron === "right" ? "4px" : "");
|
|
1271
1310
|
});
|
|
1272
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
1273
|
-
var templateObject_1$
|
|
1311
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$i || (templateObject_2$i = __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);
|
|
1312
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1274
1313
|
|
|
1275
1314
|
var Link = function (props) {
|
|
1276
1315
|
var onClick = function (e) {
|
|
@@ -1282,15 +1321,15 @@ var Link = function (props) {
|
|
|
1282
1321
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }), jsx(StyledLink, __assign({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
1283
1322
|
};
|
|
1284
1323
|
|
|
1285
|
-
var Container$
|
|
1324
|
+
var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
1286
1325
|
var text = _a.text;
|
|
1287
1326
|
return (text ? "20px" : "");
|
|
1288
1327
|
});
|
|
1289
|
-
var templateObject_1$
|
|
1328
|
+
var templateObject_1$m;
|
|
1290
1329
|
|
|
1291
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1330
|
+
var Loading = function (props) { return (jsxs(Container$c, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
1292
1331
|
|
|
1293
|
-
var Container$
|
|
1332
|
+
var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
1294
1333
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1295
1334
|
if (dropdownIsVisible) {
|
|
1296
1335
|
switch (color) {
|
|
@@ -1303,7 +1342,7 @@ var Container$a = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
1303
1342
|
}
|
|
1304
1343
|
return "";
|
|
1305
1344
|
});
|
|
1306
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
1345
|
+
var SelectedLocaleWrapper = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
1307
1346
|
var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
1308
1347
|
var color = _a.color;
|
|
1309
1348
|
switch (color) {
|
|
@@ -1315,7 +1354,7 @@ var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = _
|
|
|
1315
1354
|
}
|
|
1316
1355
|
});
|
|
1317
1356
|
var Locale = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
1318
|
-
var templateObject_1$
|
|
1357
|
+
var templateObject_1$l, templateObject_2$h, templateObject_3$7, templateObject_4$5;
|
|
1319
1358
|
|
|
1320
1359
|
var LocaleSelect = function (props) {
|
|
1321
1360
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1324,22 +1363,22 @@ var LocaleSelect = function (props) {
|
|
|
1324
1363
|
setLocale(locale);
|
|
1325
1364
|
props.onChange(locale);
|
|
1326
1365
|
};
|
|
1327
|
-
return (jsxs(Container$
|
|
1366
|
+
return (jsxs(Container$b, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }), jsx(Spacer, { horizontal: 10 }), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1328
1367
|
.filter(function (l) { return l !== locale; })
|
|
1329
1368
|
.map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }), jsx(Spacer, { horizontal: 10 }), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
1330
1369
|
};
|
|
1331
1370
|
|
|
1332
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1333
|
-
var templateObject_1$
|
|
1371
|
+
var Wrapper$1 = styled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
1372
|
+
var templateObject_1$k;
|
|
1334
1373
|
|
|
1335
1374
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }), jsx(Spacer, { horizontal: 5 }), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx(Medal, { type: "silver" }), jsx(Spacer, { horizontal: 5 }), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx(Medal, { type: "bronze" }), jsx(Spacer, { horizontal: 5 }), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
1336
1375
|
|
|
1337
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1376
|
+
var NotificationContainer = styled.div(templateObject_1$j || (templateObject_1$j = __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) {
|
|
1338
1377
|
var contrast = _a.contrast;
|
|
1339
1378
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1340
1379
|
});
|
|
1341
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
1342
|
-
var templateObject_1$
|
|
1380
|
+
var ButtonContainer = styled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
1381
|
+
var templateObject_1$j, templateObject_2$g;
|
|
1343
1382
|
|
|
1344
1383
|
var Notification = function (props) {
|
|
1345
1384
|
if (!props.isVisible)
|
|
@@ -1347,9 +1386,9 @@ var Notification = function (props) {
|
|
|
1347
1386
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), 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) }))); }) }))] })));
|
|
1348
1387
|
};
|
|
1349
1388
|
|
|
1350
|
-
var Container$
|
|
1351
|
-
var Label$
|
|
1352
|
-
var templateObject_1$
|
|
1389
|
+
var Container$a = styled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
1390
|
+
var Label$6 = styled(StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1391
|
+
var templateObject_1$i, templateObject_2$f;
|
|
1353
1392
|
|
|
1354
1393
|
var NumberField = function (props) {
|
|
1355
1394
|
var onChange = function (value) {
|
|
@@ -1360,7 +1399,7 @@ var NumberField = function (props) {
|
|
|
1360
1399
|
if (props.onBlur)
|
|
1361
1400
|
props.onBlur(props.name);
|
|
1362
1401
|
};
|
|
1363
|
-
return (jsxs(Container$
|
|
1402
|
+
return (jsxs(Container$a, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Number, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1364
1403
|
};
|
|
1365
1404
|
|
|
1366
1405
|
var expressions = {};
|
|
@@ -1411,15 +1450,15 @@ var isStrongPassword = function (password) {
|
|
|
1411
1450
|
exports.isStrongPassword = isStrongPassword;
|
|
1412
1451
|
}(expressions));
|
|
1413
1452
|
|
|
1414
|
-
var Container$
|
|
1415
|
-
var Label$
|
|
1453
|
+
var Container$9 = styled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
1454
|
+
var Label$5 = styled(StyledParagraph)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1416
1455
|
var HelperContainer = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
1417
1456
|
var fadeIn = keyframes(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
1418
1457
|
var Helper = styled(StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
1419
1458
|
var isOk = _a.isOk;
|
|
1420
1459
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1421
1460
|
}, fadeIn);
|
|
1422
|
-
var templateObject_1$
|
|
1461
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$6, templateObject_4$4, templateObject_5$2;
|
|
1423
1462
|
|
|
1424
1463
|
var translations = {
|
|
1425
1464
|
"nl-NL": {
|
|
@@ -1476,7 +1515,7 @@ var PasswordInputField = function (props) {
|
|
|
1476
1515
|
if (props.onBlur)
|
|
1477
1516
|
props.onBlur(props.name);
|
|
1478
1517
|
};
|
|
1479
|
-
return (jsxs(Container$
|
|
1518
|
+
return (jsxs(Container$9, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
1480
1519
|
};
|
|
1481
1520
|
|
|
1482
1521
|
var generateRandomString = function (length) {
|
|
@@ -1489,7 +1528,7 @@ var generateRandomString = function (length) {
|
|
|
1489
1528
|
return string;
|
|
1490
1529
|
};
|
|
1491
1530
|
|
|
1492
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1531
|
+
var PopupContainer = styled.div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
1493
1532
|
var isVisible = _a.isVisible;
|
|
1494
1533
|
return (isVisible ? "100%" : "0%");
|
|
1495
1534
|
}, function (_a) {
|
|
@@ -1502,7 +1541,7 @@ var PopupContainer = styled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
1502
1541
|
var contrast = _a.contrast;
|
|
1503
1542
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1504
1543
|
});
|
|
1505
|
-
var templateObject_1$
|
|
1544
|
+
var templateObject_1$g;
|
|
1506
1545
|
|
|
1507
1546
|
var Popup = function (props) {
|
|
1508
1547
|
var popupRef = useRef(null);
|
|
@@ -1538,8 +1577,8 @@ var Popup = function (props) {
|
|
|
1538
1577
|
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 })), jsx(Spacer, { vertical: 10 })] })), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
1539
1578
|
};
|
|
1540
1579
|
|
|
1541
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1542
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1580
|
+
var Wrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1581
|
+
var StyledProgressBar = styled.div(templateObject_2$d || (templateObject_2$d = __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) {
|
|
1543
1582
|
var showInfo = _a.showInfo;
|
|
1544
1583
|
return (showInfo ? "10px" : "");
|
|
1545
1584
|
});
|
|
@@ -1550,12 +1589,12 @@ var Indicator$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeT
|
|
|
1550
1589
|
var color = _a.color;
|
|
1551
1590
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1552
1591
|
});
|
|
1553
|
-
var templateObject_1$
|
|
1592
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$5;
|
|
1554
1593
|
|
|
1555
1594
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator$1, __assign({}, props)) })), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
1556
1595
|
|
|
1557
|
-
var Container$
|
|
1558
|
-
var Step$1 = styled.li(templateObject_2$
|
|
1596
|
+
var Container$8 = styled.ol(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
1597
|
+
var Step$1 = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
|
|
1559
1598
|
var status = _a.status;
|
|
1560
1599
|
return (!!status ? "pointer" : "not-allowed");
|
|
1561
1600
|
}, function (_a) {
|
|
@@ -1577,9 +1616,9 @@ var Step$1 = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplat
|
|
|
1577
1616
|
var hasTitle = _a.hasTitle;
|
|
1578
1617
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1579
1618
|
}, theme.colors.lightGray.dark);
|
|
1580
|
-
var templateObject_1$
|
|
1619
|
+
var templateObject_1$e, templateObject_2$c;
|
|
1581
1620
|
|
|
1582
|
-
var Steps$2 = function (props) { return (jsx(Container$
|
|
1621
|
+
var Steps$2 = function (props) { return (jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
1583
1622
|
var title = _a.title, onClick = _a.onClick;
|
|
1584
1623
|
var step = index + 1;
|
|
1585
1624
|
var status = props.current > step
|
|
@@ -1594,8 +1633,8 @@ var Steps$2 = function (props) { return (jsx(Container$7, { children: props.step
|
|
|
1594
1633
|
return (jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsx(Heading, __assign({ type: "h6" }, { children: step }))) })), title && jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
1595
1634
|
}) })); };
|
|
1596
1635
|
|
|
1597
|
-
var Container$
|
|
1598
|
-
var Step = styled.li(templateObject_2$
|
|
1636
|
+
var Container$7 = styled.ol(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
1637
|
+
var Step = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
1599
1638
|
var status = _a.status;
|
|
1600
1639
|
return (!!status ? "pointer" : "not-allowed");
|
|
1601
1640
|
}, function (_a) {
|
|
@@ -1614,9 +1653,9 @@ var Step = styled.li(templateObject_2$a || (templateObject_2$a = __makeTemplateO
|
|
|
1614
1653
|
? theme.colors.lightGray.light
|
|
1615
1654
|
: theme.colors.darkGray.light;
|
|
1616
1655
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1617
|
-
var templateObject_1$
|
|
1656
|
+
var templateObject_1$d, templateObject_2$b;
|
|
1618
1657
|
|
|
1619
|
-
var Steps$1 = function (props) { return (jsx(Container$
|
|
1658
|
+
var Steps$1 = function (props) { return (jsx(Container$7, { children: props.steps.map(function (_a, index) {
|
|
1620
1659
|
var title = _a.title, onClick = _a.onClick;
|
|
1621
1660
|
var step = index + 1;
|
|
1622
1661
|
var status = props.current > step
|
|
@@ -1635,14 +1674,14 @@ var Steps = function (props) {
|
|
|
1635
1674
|
return props.alignment === "vertical" ? (jsx(Steps$1, __assign({}, props))) : (jsx(Steps$2, __assign({}, props)));
|
|
1636
1675
|
};
|
|
1637
1676
|
|
|
1638
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
1639
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
1677
|
+
var Fieldset = styled.fieldset(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1678
|
+
var RadioContainer = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1640
1679
|
var RadioWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
1641
|
-
var Label$
|
|
1680
|
+
var Label$4 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __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) {
|
|
1642
1681
|
var weight = _a.weight;
|
|
1643
1682
|
return weight || 500;
|
|
1644
1683
|
}, theme.colors.darkGray.base);
|
|
1645
|
-
var templateObject_1$
|
|
1684
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$4, templateObject_4$3;
|
|
1646
1685
|
|
|
1647
1686
|
var RadioGroup = function (props) {
|
|
1648
1687
|
var onChange = function (value) {
|
|
@@ -1653,15 +1692,15 @@ var RadioGroup = function (props) {
|
|
|
1653
1692
|
if (props.onBlur)
|
|
1654
1693
|
props.onBlur(props.name);
|
|
1655
1694
|
};
|
|
1656
|
-
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$
|
|
1695
|
+
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$4, __assign({ as: "legend" }, { children: props.legend })), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1657
1696
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1658
|
-
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsx(Label$
|
|
1697
|
+
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsx(Label$4, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1659
1698
|
}) })] }));
|
|
1660
1699
|
};
|
|
1661
1700
|
|
|
1662
|
-
var Container$
|
|
1663
|
-
var Label$
|
|
1664
|
-
var templateObject_1$
|
|
1701
|
+
var Container$6 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1702
|
+
var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1703
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1665
1704
|
|
|
1666
1705
|
var SelectField = function (props) {
|
|
1667
1706
|
var onChange = function (value) {
|
|
@@ -1672,15 +1711,15 @@ var SelectField = function (props) {
|
|
|
1672
1711
|
if (props.onBlur)
|
|
1673
1712
|
props.onBlur(props.name);
|
|
1674
1713
|
};
|
|
1675
|
-
return (jsxs(Container$
|
|
1714
|
+
return (jsxs(Container$6, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
1676
1715
|
var value = _a.value, label = _a.label;
|
|
1677
1716
|
return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1678
1717
|
}) }))] }));
|
|
1679
1718
|
};
|
|
1680
1719
|
|
|
1681
|
-
var Container$
|
|
1682
|
-
var Label$
|
|
1683
|
-
var templateObject_1$
|
|
1720
|
+
var Container$5 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1721
|
+
var Label$2 = styled(StyledParagraph)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1722
|
+
var templateObject_1$a, templateObject_2$8;
|
|
1684
1723
|
|
|
1685
1724
|
var ToggleField = function (props) {
|
|
1686
1725
|
var onChange = function (value) {
|
|
@@ -1691,10 +1730,10 @@ var ToggleField = function (props) {
|
|
|
1691
1730
|
if (props.onBlur)
|
|
1692
1731
|
props.onBlur(props.name);
|
|
1693
1732
|
};
|
|
1694
|
-
return (jsxs(Container$
|
|
1733
|
+
return (jsxs(Container$5, { children: [jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
1695
1734
|
};
|
|
1696
1735
|
|
|
1697
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
1736
|
+
var TooltipContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
1698
1737
|
var isVisible = _a.isVisible;
|
|
1699
1738
|
return (isVisible ? "100%" : "0%");
|
|
1700
1739
|
}, function (_a) {
|
|
@@ -1704,7 +1743,7 @@ var TooltipContainer = styled.div(templateObject_1$8 || (templateObject_1$8 = __
|
|
|
1704
1743
|
var x = _a.x;
|
|
1705
1744
|
return (x ? "".concat(x, "px") : "");
|
|
1706
1745
|
});
|
|
1707
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1746
|
+
var TooltipTitle = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
1708
1747
|
var color = _a.color;
|
|
1709
1748
|
switch (color) {
|
|
1710
1749
|
default:
|
|
@@ -1714,7 +1753,7 @@ var TooltipTitle = styled.div(templateObject_2$6 || (templateObject_2$6 = __make
|
|
|
1714
1753
|
return theme.colors.lightGray.dark;
|
|
1715
1754
|
}
|
|
1716
1755
|
});
|
|
1717
|
-
var templateObject_1$
|
|
1756
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1718
1757
|
|
|
1719
1758
|
var Tooltip = function (props) {
|
|
1720
1759
|
var tooltipRef = useRef(null);
|
|
@@ -1748,7 +1787,7 @@ var Tooltip = function (props) {
|
|
|
1748
1787
|
theme.colors.lightGray.light }) })), jsx(TooltipTitle, __assign({ color: props.color }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.title })) }))] }))] }));
|
|
1749
1788
|
};
|
|
1750
1789
|
|
|
1751
|
-
var StyledTextarea = styled.textarea(templateObject_1$
|
|
1790
|
+
var StyledTextarea = styled.textarea(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
1752
1791
|
var disabled = _a.disabled;
|
|
1753
1792
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1754
1793
|
}, function (_a) {
|
|
@@ -1761,7 +1800,7 @@ var StyledTextarea = styled.textarea(templateObject_1$7 || (templateObject_1$7 =
|
|
|
1761
1800
|
var disabled = _a.disabled;
|
|
1762
1801
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1763
1802
|
}, 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));
|
|
1764
|
-
var templateObject_1$
|
|
1803
|
+
var templateObject_1$8;
|
|
1765
1804
|
|
|
1766
1805
|
var Textarea = function (props) {
|
|
1767
1806
|
var onChange = function (e) {
|
|
@@ -1771,11 +1810,27 @@ var Textarea = function (props) {
|
|
|
1771
1810
|
return jsx(StyledTextarea, __assign({}, props, { onChange: onChange }));
|
|
1772
1811
|
};
|
|
1773
1812
|
|
|
1813
|
+
var Container$4 = styled.div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
1814
|
+
var Label$1 = styled(StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1815
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1816
|
+
|
|
1817
|
+
var TextareaField = function (props) {
|
|
1818
|
+
var onChange = function (value) {
|
|
1819
|
+
if (props.onChange)
|
|
1820
|
+
props.onChange(props.name, value);
|
|
1821
|
+
};
|
|
1822
|
+
var onBlur = function () {
|
|
1823
|
+
if (props.onBlur)
|
|
1824
|
+
props.onBlur(props.name);
|
|
1825
|
+
};
|
|
1826
|
+
return (jsxs(Container$4, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1827
|
+
};
|
|
1828
|
+
|
|
1774
1829
|
var Container$3 = styled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
1775
1830
|
var Label = styled(StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1776
1831
|
var templateObject_1$6, templateObject_2$5;
|
|
1777
1832
|
|
|
1778
|
-
var
|
|
1833
|
+
var RangeField = function (props) {
|
|
1779
1834
|
var onChange = function (value) {
|
|
1780
1835
|
if (props.onChange)
|
|
1781
1836
|
props.onChange(props.name, value);
|
|
@@ -1784,7 +1839,7 @@ var TextareaField = function (props) {
|
|
|
1784
1839
|
if (props.onBlur)
|
|
1785
1840
|
props.onBlur(props.name);
|
|
1786
1841
|
};
|
|
1787
|
-
return (jsxs(Container$3, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(
|
|
1842
|
+
return (jsxs(Container$3, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsx(Spacer, { vertical: 5 }), jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1788
1843
|
};
|
|
1789
1844
|
|
|
1790
1845
|
var FeedbackColors = {
|
|
@@ -1910,6 +1965,14 @@ var Form = forwardRef(function (props, ref) {
|
|
|
1910
1965
|
}
|
|
1911
1966
|
break;
|
|
1912
1967
|
}
|
|
1968
|
+
case "range": {
|
|
1969
|
+
var element = document.getElementById(field.name);
|
|
1970
|
+
if (!field.defaultValue)
|
|
1971
|
+
element.value = "0";
|
|
1972
|
+
else
|
|
1973
|
+
element.value = "".concat(field.defaultValue);
|
|
1974
|
+
break;
|
|
1975
|
+
}
|
|
1913
1976
|
}
|
|
1914
1977
|
};
|
|
1915
1978
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1986,6 +2049,9 @@ var Form = forwardRef(function (props, ref) {
|
|
|
1986
2049
|
case "toggle":
|
|
1987
2050
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1988
2051
|
jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
2052
|
+
case "range":
|
|
2053
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
2054
|
+
jsx(RangeField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
1989
2055
|
}
|
|
1990
2056
|
}) }), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
1991
2057
|
});
|
|
@@ -2132,16 +2198,22 @@ var Indicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplat
|
|
|
2132
2198
|
var value = _a.value;
|
|
2133
2199
|
return "".concat(value, "%");
|
|
2134
2200
|
});
|
|
2135
|
-
var Target = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width:
|
|
2136
|
-
var value = _a.value;
|
|
2137
|
-
return "calc(".concat(value, "% -
|
|
2201
|
+
var Target = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: max-content;\n position: absolute;\n left: ", ";\n bottom: 40px;\n\n p {\n color: ", ";\n }\n"], ["\n width: max-content;\n position: absolute;\n left: ", ";\n bottom: 40px;\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
2202
|
+
var value = _a.value, width = _a.width;
|
|
2203
|
+
return "calc(".concat(value, "% - ").concat(width / 2, "px)");
|
|
2138
2204
|
}, theme.colors.blue.darker);
|
|
2139
2205
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
2140
2206
|
|
|
2141
2207
|
var Result = function (props) {
|
|
2208
|
+
var ref = useRef(null);
|
|
2209
|
+
var _a = useState(0), targetWidth = _a[0], setTargetWidth = _a[1];
|
|
2142
2210
|
var isPassed = props.value >= props.target;
|
|
2143
|
-
|
|
2211
|
+
useEffect(function () {
|
|
2212
|
+
var _a;
|
|
2213
|
+
setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
2214
|
+
}, [ref]);
|
|
2215
|
+
return (jsxs(Container, __assign({ passed: isPassed }, { children: [jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsx(Spacer, { horizontal: 15 }), jsxs("div", { children: [jsx(Heading, __assign({ type: "h5" }, { children: props.title })), jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxs(ProgressBarWrapper, { children: [jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsx(Target, __assign({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxs(Paragraph, __assign({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxs("div", { children: [jsxs(Paragraph, __assign({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxs(Paragraph, __assign({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
2144
2216
|
};
|
|
2145
2217
|
|
|
2146
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Result, Select, SelectField, Spacer, Steps, Subheading, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
2218
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
2147
2219
|
//# sourceMappingURL=index.es.js.map
|