@typeolymp/ui-components 1.9.9 → 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 +195 -129
- package/build/index.es.js.map +1 -1
- package/build/index.js +195 -128
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -200,7 +200,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
200
200
|
return cooked;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
203
|
+
var StyledButton = styled__default["default"].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) {
|
|
204
204
|
var fluid = _a.fluid;
|
|
205
205
|
return (fluid ? "100%" : "fit-content");
|
|
206
206
|
}, function (_a) {
|
|
@@ -250,7 +250,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$L || (temp
|
|
|
250
250
|
? theme.button.medium.heightActive
|
|
251
251
|
: theme.button[size].heightActive;
|
|
252
252
|
});
|
|
253
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
253
|
+
var DisabledButton = styled__default["default"](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) {
|
|
254
254
|
var size = _a.size;
|
|
255
255
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
256
256
|
});
|
|
@@ -270,7 +270,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$a ||
|
|
|
270
270
|
? theme.button.medium.marginTopActive
|
|
271
271
|
: theme.button[size].marginTopActive;
|
|
272
272
|
});
|
|
273
|
-
var templateObject_1$
|
|
273
|
+
var templateObject_1$N, templateObject_2$t, templateObject_3$a;
|
|
274
274
|
|
|
275
275
|
var Button = React.forwardRef(function (_a, ref) {
|
|
276
276
|
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;
|
|
@@ -283,7 +283,7 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
283
283
|
return (jsxRuntime.jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: label }) })));
|
|
284
284
|
});
|
|
285
285
|
|
|
286
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
286
|
+
var StyledCheckbox = styled__default["default"].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) {
|
|
287
287
|
var checked = _a.checked, disabled = _a.disabled;
|
|
288
288
|
if (disabled)
|
|
289
289
|
return theme.colors.lightGray.darker;
|
|
@@ -304,7 +304,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$K || (templ
|
|
|
304
304
|
return theme.colors.green.base;
|
|
305
305
|
return theme.colors.lightGray.darker;
|
|
306
306
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
307
|
-
var templateObject_1$
|
|
307
|
+
var templateObject_1$M;
|
|
308
308
|
|
|
309
309
|
var Checkbox = function (props) {
|
|
310
310
|
var _a;
|
|
@@ -337,7 +337,7 @@ var Checkbox = function (props) {
|
|
|
337
337
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
338
338
|
};
|
|
339
339
|
|
|
340
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
340
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
341
341
|
var size = _a.size;
|
|
342
342
|
switch (size) {
|
|
343
343
|
case "small":
|
|
@@ -360,7 +360,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$J || (templateOb
|
|
|
360
360
|
return "27px";
|
|
361
361
|
}
|
|
362
362
|
});
|
|
363
|
-
var templateObject_1$
|
|
363
|
+
var templateObject_1$L;
|
|
364
364
|
|
|
365
365
|
var parsers = {};
|
|
366
366
|
|
|
@@ -408,7 +408,7 @@ var flags = {
|
|
|
408
408
|
};
|
|
409
409
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
410
410
|
|
|
411
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
411
|
+
var StyledHeading = styled__default["default"].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) {
|
|
412
412
|
var type = _a.type;
|
|
413
413
|
return theme.heading[type].fontSize;
|
|
414
414
|
}, function (_a) {
|
|
@@ -432,14 +432,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$I || (templ
|
|
|
432
432
|
var align = _a.align;
|
|
433
433
|
return align;
|
|
434
434
|
});
|
|
435
|
-
var templateObject_1$
|
|
435
|
+
var templateObject_1$K;
|
|
436
436
|
|
|
437
437
|
var Heading = function (props) {
|
|
438
438
|
var element = !!props.as ? props.as : props.type;
|
|
439
439
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children })));
|
|
440
440
|
};
|
|
441
441
|
|
|
442
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
442
|
+
var Wrapper$8 = styled__default["default"].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) {
|
|
443
443
|
var size = _a.size;
|
|
444
444
|
return theme.icon[size] || theme.icon.medium;
|
|
445
445
|
}, function (_a) {
|
|
@@ -469,7 +469,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$H || (templateOb
|
|
|
469
469
|
return theme.colors.lightGray.light;
|
|
470
470
|
}
|
|
471
471
|
});
|
|
472
|
-
var templateObject_1$
|
|
472
|
+
var templateObject_1$J;
|
|
473
473
|
|
|
474
474
|
var icons = {
|
|
475
475
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -498,7 +498,7 @@ var icons = {
|
|
|
498
498
|
};
|
|
499
499
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
500
500
|
|
|
501
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
501
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
502
502
|
var size = _a.size;
|
|
503
503
|
switch (size) {
|
|
504
504
|
default:
|
|
@@ -510,7 +510,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$G || (templateOb
|
|
|
510
510
|
return "118px";
|
|
511
511
|
}
|
|
512
512
|
});
|
|
513
|
-
var templateObject_1$
|
|
513
|
+
var templateObject_1$I;
|
|
514
514
|
|
|
515
515
|
var illustrations = {
|
|
516
516
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -526,14 +526,14 @@ var illustrations = {
|
|
|
526
526
|
};
|
|
527
527
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }))); };
|
|
528
528
|
|
|
529
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
529
|
+
var InputIconWrapper = styled__default["default"].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) {
|
|
530
530
|
var isChanged = _a.isChanged;
|
|
531
531
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
532
532
|
}, function (_a) {
|
|
533
533
|
var disabled = _a.disabled;
|
|
534
534
|
return (disabled ? "not-allowed" : "pointer");
|
|
535
535
|
});
|
|
536
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
536
|
+
var StyledInput = styled__default["default"].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) {
|
|
537
537
|
var disabled = _a.disabled;
|
|
538
538
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
539
539
|
}, function (_a) {
|
|
@@ -546,7 +546,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$r || (templa
|
|
|
546
546
|
var disabled = _a.disabled;
|
|
547
547
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
548
548
|
}, 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));
|
|
549
|
-
var templateObject_1$
|
|
549
|
+
var templateObject_1$H, templateObject_2$s;
|
|
550
550
|
|
|
551
551
|
var PasswordInput = function (props) {
|
|
552
552
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -726,7 +726,7 @@ Input.Date = DateInput;
|
|
|
726
726
|
|
|
727
727
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }), jsxRuntime.jsxs("g", __assign({ fill: "#23292f" }, { children: [jsxRuntime.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" }), jsxRuntime.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" })] }))] }))); };
|
|
728
728
|
|
|
729
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
729
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
730
730
|
var size = _a.size;
|
|
731
731
|
switch (size) {
|
|
732
732
|
default:
|
|
@@ -736,7 +736,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$E || (templateOb
|
|
|
736
736
|
return "116px";
|
|
737
737
|
}
|
|
738
738
|
});
|
|
739
|
-
var templateObject_1$
|
|
739
|
+
var templateObject_1$G;
|
|
740
740
|
|
|
741
741
|
var medals = {
|
|
742
742
|
small: {
|
|
@@ -752,11 +752,11 @@ var medals = {
|
|
|
752
752
|
};
|
|
753
753
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
754
754
|
|
|
755
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
755
|
+
var Wrapper$5 = styled__default["default"].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) {
|
|
756
756
|
var disabled = _a.disabled;
|
|
757
757
|
return (disabled ? "49.5px" : "");
|
|
758
758
|
});
|
|
759
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
759
|
+
var StyledInputNumber = styled__default["default"].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) {
|
|
760
760
|
var disabled = _a.disabled;
|
|
761
761
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
762
762
|
}, function (_a) {
|
|
@@ -769,7 +769,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$q || (
|
|
|
769
769
|
var disabled = _a.disabled;
|
|
770
770
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
771
771
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
772
|
-
var templateObject_1$
|
|
772
|
+
var templateObject_1$F, templateObject_2$r;
|
|
773
773
|
|
|
774
774
|
var Number = function (props) {
|
|
775
775
|
var inputRef = React.useRef(null);
|
|
@@ -806,7 +806,7 @@ var Number = function (props) {
|
|
|
806
806
|
return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
807
807
|
};
|
|
808
808
|
|
|
809
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
809
|
+
var StyledParagraph = styled__default["default"].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) {
|
|
810
810
|
var size = _a.size;
|
|
811
811
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
812
812
|
}, function (_a) {
|
|
@@ -838,11 +838,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$C || (templa
|
|
|
838
838
|
var align = _a.align;
|
|
839
839
|
return align;
|
|
840
840
|
});
|
|
841
|
-
var templateObject_1$
|
|
841
|
+
var templateObject_1$E;
|
|
842
842
|
|
|
843
843
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }))); };
|
|
844
844
|
|
|
845
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
845
|
+
var StyledRadio = styled__default["default"].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) {
|
|
846
846
|
var checked = _a.checked, disabled = _a.disabled;
|
|
847
847
|
if (disabled)
|
|
848
848
|
return theme.colors.lightGray.darker;
|
|
@@ -870,7 +870,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$B || (template
|
|
|
870
870
|
return theme.colors.green.base;
|
|
871
871
|
return "";
|
|
872
872
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
873
|
-
var templateObject_1$
|
|
873
|
+
var templateObject_1$D;
|
|
874
874
|
|
|
875
875
|
var Radio = function (props) {
|
|
876
876
|
var _a, _b;
|
|
@@ -902,11 +902,50 @@ var Radio = function (props) {
|
|
|
902
902
|
return (jsxRuntime.jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
903
903
|
};
|
|
904
904
|
|
|
905
|
-
var
|
|
905
|
+
var StyledRange = styled__default["default"].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) {
|
|
906
|
+
var value = _a.value, disabled = _a.disabled;
|
|
907
|
+
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 )");
|
|
908
|
+
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
909
|
+
var disabled = _a.disabled;
|
|
910
|
+
return "7px solid ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base);
|
|
911
|
+
}, function (_a) {
|
|
912
|
+
var disabled = _a.disabled;
|
|
913
|
+
return disabled ? "not-allowed" : "pointer";
|
|
914
|
+
});
|
|
915
|
+
var templateObject_1$C;
|
|
916
|
+
|
|
917
|
+
var Range = function (props) {
|
|
918
|
+
var _a;
|
|
919
|
+
var rangeRef = React.useRef(null);
|
|
920
|
+
var _b = React.useState(props.defaultValue || 0), value = _b[0], setValue = _b[1];
|
|
921
|
+
React.useEffect(function () {
|
|
922
|
+
if (props.autoFocus)
|
|
923
|
+
rangeRef.current.focus();
|
|
924
|
+
}, []);
|
|
925
|
+
React.useEffect(function () {
|
|
926
|
+
var value = parseInt(rangeRef.current.value);
|
|
927
|
+
setValue(value);
|
|
928
|
+
}, [(_a = rangeRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
929
|
+
React.useEffect(function () {
|
|
930
|
+
rangeRef.current.value = "".concat(value);
|
|
931
|
+
}, [value]);
|
|
932
|
+
var onChange = function () {
|
|
933
|
+
if (!props.disabled) {
|
|
934
|
+
var value_1 = parseInt(rangeRef.current.value);
|
|
935
|
+
if (!!props.onChange) {
|
|
936
|
+
props.onChange(value_1);
|
|
937
|
+
setValue(value_1);
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
};
|
|
941
|
+
return (jsxRuntime.jsx(StyledRange, __assign({ value: value, disabled: props.disabled }, { children: jsxRuntime.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 }) })));
|
|
942
|
+
};
|
|
943
|
+
|
|
944
|
+
var Wrapper$4 = styled__default["default"].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) {
|
|
906
945
|
var disabled = _a.disabled;
|
|
907
946
|
return (disabled ? "not-allowed" : "pointer");
|
|
908
947
|
});
|
|
909
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
948
|
+
var StyledSelect = styled__default["default"].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) {
|
|
910
949
|
var disabled = _a.disabled;
|
|
911
950
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
912
951
|
}, function (_a) {
|
|
@@ -919,7 +958,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$p || (temp
|
|
|
919
958
|
var isChanged = _a.isChanged;
|
|
920
959
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
921
960
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
922
|
-
var templateObject_1$
|
|
961
|
+
var templateObject_1$B, templateObject_2$q;
|
|
923
962
|
|
|
924
963
|
var Select = function (props) {
|
|
925
964
|
var _a;
|
|
@@ -941,18 +980,18 @@ var Select = function (props) {
|
|
|
941
980
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
942
981
|
};
|
|
943
982
|
|
|
944
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
983
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
945
984
|
var horizontal = _a.horizontal;
|
|
946
985
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
947
986
|
}, function (_a) {
|
|
948
987
|
var vertical = _a.vertical;
|
|
949
988
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
950
989
|
});
|
|
951
|
-
var templateObject_1$
|
|
990
|
+
var templateObject_1$A;
|
|
952
991
|
|
|
953
992
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props))); };
|
|
954
993
|
|
|
955
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
994
|
+
var StyledSubheading = styled__default["default"].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) {
|
|
956
995
|
var size = _a.size;
|
|
957
996
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
958
997
|
}, function (_a) {
|
|
@@ -980,18 +1019,18 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$y || (templ
|
|
|
980
1019
|
return theme.colors.darkGray.dark;
|
|
981
1020
|
}
|
|
982
1021
|
});
|
|
983
|
-
var templateObject_1$
|
|
1022
|
+
var templateObject_1$z;
|
|
984
1023
|
|
|
985
1024
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }))); };
|
|
986
1025
|
|
|
987
|
-
var Container$
|
|
988
|
-
var templateObject_1$
|
|
1026
|
+
var Container$j = styled__default["default"].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);
|
|
1027
|
+
var templateObject_1$y;
|
|
989
1028
|
|
|
990
1029
|
var Tag = function (props) {
|
|
991
|
-
return jsxRuntime.jsx(Container$
|
|
1030
|
+
return jsxRuntime.jsx(Container$j, { children: props.children });
|
|
992
1031
|
};
|
|
993
1032
|
|
|
994
|
-
var Container$
|
|
1033
|
+
var Container$i = styled__default["default"].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) {
|
|
995
1034
|
var disabled = _a.disabled;
|
|
996
1035
|
return (disabled ? "not-allowed" : "pointer");
|
|
997
1036
|
}, function (_a) {
|
|
@@ -1009,7 +1048,7 @@ var Container$h = styled__default["default"].div(templateObject_1$w || (template
|
|
|
1009
1048
|
var disabled = _a.disabled;
|
|
1010
1049
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
1011
1050
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
1012
|
-
var templateObject_1$
|
|
1051
|
+
var templateObject_1$x;
|
|
1013
1052
|
|
|
1014
1053
|
var Toggle = function (props) {
|
|
1015
1054
|
var _a;
|
|
@@ -1037,10 +1076,10 @@ var Toggle = function (props) {
|
|
|
1037
1076
|
props.onChange(newValue);
|
|
1038
1077
|
}
|
|
1039
1078
|
};
|
|
1040
|
-
return (jsxRuntime.jsx(Container$
|
|
1079
|
+
return (jsxRuntime.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: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
1041
1080
|
};
|
|
1042
1081
|
|
|
1043
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
1082
|
+
var Wrapper$3 = styled__default["default"].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) {
|
|
1044
1083
|
var level = _a.level;
|
|
1045
1084
|
switch (level) {
|
|
1046
1085
|
case 1:
|
|
@@ -1051,7 +1090,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$v || (templateOb
|
|
|
1051
1090
|
return "70px";
|
|
1052
1091
|
}
|
|
1053
1092
|
});
|
|
1054
|
-
var templateObject_1$
|
|
1093
|
+
var templateObject_1$w;
|
|
1055
1094
|
|
|
1056
1095
|
var trophies = {
|
|
1057
1096
|
1: {
|
|
@@ -1087,7 +1126,7 @@ var trophies = {
|
|
|
1087
1126
|
};
|
|
1088
1127
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
1089
1128
|
|
|
1090
|
-
var Container$
|
|
1129
|
+
var Container$h = styled__default["default"].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) {
|
|
1091
1130
|
var type = _a.type;
|
|
1092
1131
|
switch (type) {
|
|
1093
1132
|
case "success":
|
|
@@ -1104,11 +1143,11 @@ var Container$g = styled__default["default"].div(templateObject_1$u || (template
|
|
|
1104
1143
|
return theme.colors.red.base;
|
|
1105
1144
|
}
|
|
1106
1145
|
});
|
|
1107
|
-
var templateObject_1$
|
|
1146
|
+
var templateObject_1$v;
|
|
1108
1147
|
|
|
1109
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1148
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$h, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
|
|
1110
1149
|
|
|
1111
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
1150
|
+
var StyledCard = styled__default["default"].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) {
|
|
1112
1151
|
var ellipse = _a.ellipse;
|
|
1113
1152
|
return ellipse
|
|
1114
1153
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1117,23 +1156,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$t || (templateO
|
|
|
1117
1156
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1118
1157
|
: "";
|
|
1119
1158
|
});
|
|
1120
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
1159
|
+
var Ellipse = styled__default["default"].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) {
|
|
1121
1160
|
var color = _a.color;
|
|
1122
1161
|
return color ? theme.colors[color].light : "";
|
|
1123
1162
|
});
|
|
1124
1163
|
var Content = styled__default["default"].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"])));
|
|
1125
|
-
var templateObject_1$
|
|
1164
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9;
|
|
1126
1165
|
|
|
1127
1166
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
1128
1167
|
|
|
1129
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
1130
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
1168
|
+
var Fieldset$1 = styled__default["default"].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"])));
|
|
1169
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1131
1170
|
var CheckboxWrapper = styled__default["default"].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"])));
|
|
1132
|
-
var Label$
|
|
1171
|
+
var Label$9 = styled__default["default"](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) {
|
|
1133
1172
|
var weight = _a.weight;
|
|
1134
1173
|
return weight || 500;
|
|
1135
1174
|
}, theme.colors.darkGray.base);
|
|
1136
|
-
var templateObject_1$
|
|
1175
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$8, templateObject_4$6;
|
|
1137
1176
|
|
|
1138
1177
|
var Checkboxes = function (props) {
|
|
1139
1178
|
var _a = React.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1150,18 +1189,18 @@ var Checkboxes = function (props) {
|
|
|
1150
1189
|
if (props.onBlur)
|
|
1151
1190
|
props.onBlur(props.name);
|
|
1152
1191
|
};
|
|
1153
|
-
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1192
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$9, __assign({ as: "legend" }, { children: props.legend })), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1154
1193
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1155
|
-
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsxRuntime.jsx(Label$
|
|
1194
|
+
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsxRuntime.jsx(Label$9, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1156
1195
|
}) })] }));
|
|
1157
1196
|
};
|
|
1158
1197
|
|
|
1159
|
-
var Container$
|
|
1160
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
1198
|
+
var Container$g = styled__default["default"].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);
|
|
1199
|
+
var Item = styled__default["default"].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) {
|
|
1161
1200
|
var isOpen = _a.isOpen;
|
|
1162
1201
|
return (isOpen ? "" : "none");
|
|
1163
1202
|
}, theme.colors.lightGray.darker);
|
|
1164
|
-
var templateObject_1$
|
|
1203
|
+
var templateObject_1$s, templateObject_2$n;
|
|
1165
1204
|
|
|
1166
1205
|
var Collapse = function (props) {
|
|
1167
1206
|
var _a = React.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -1173,15 +1212,15 @@ var Collapse = function (props) {
|
|
|
1173
1212
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1174
1213
|
}
|
|
1175
1214
|
};
|
|
1176
|
-
return (jsxRuntime.jsx(Container$
|
|
1215
|
+
return (jsxRuntime.jsx(Container$g, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1177
1216
|
var isOpen = openItems.includes(index);
|
|
1178
1217
|
return (jsxRuntime.jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
1179
1218
|
}) })));
|
|
1180
1219
|
};
|
|
1181
1220
|
|
|
1182
|
-
var Container$
|
|
1183
|
-
var Label$
|
|
1184
|
-
var templateObject_1$
|
|
1221
|
+
var Container$f = styled__default["default"].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"])));
|
|
1222
|
+
var Label$8 = styled__default["default"](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);
|
|
1223
|
+
var templateObject_1$r, templateObject_2$m;
|
|
1185
1224
|
|
|
1186
1225
|
var DateInputField = function (props) {
|
|
1187
1226
|
var onChange = function (value) {
|
|
@@ -1192,12 +1231,12 @@ var DateInputField = function (props) {
|
|
|
1192
1231
|
if (props.onBlur)
|
|
1193
1232
|
props.onBlur(props.name);
|
|
1194
1233
|
};
|
|
1195
|
-
return (jsxRuntime.jsxs(Container$
|
|
1234
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$8, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1196
1235
|
};
|
|
1197
1236
|
|
|
1198
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
1199
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
1200
|
-
var templateObject_1$
|
|
1237
|
+
var StyledIconButton = styled__default["default"](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"])));
|
|
1238
|
+
var GhostIconButton = styled__default["default"](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"])));
|
|
1239
|
+
var templateObject_1$q, templateObject_2$l;
|
|
1201
1240
|
|
|
1202
1241
|
var IconButton = function (props) {
|
|
1203
1242
|
if (props.color === "white")
|
|
@@ -1205,9 +1244,9 @@ var IconButton = function (props) {
|
|
|
1205
1244
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
1206
1245
|
};
|
|
1207
1246
|
|
|
1208
|
-
var Container$
|
|
1209
|
-
var Label$
|
|
1210
|
-
var templateObject_1$
|
|
1247
|
+
var Container$e = styled__default["default"].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"])));
|
|
1248
|
+
var Label$7 = styled__default["default"](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);
|
|
1249
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1211
1250
|
|
|
1212
1251
|
var InputField = function (props) {
|
|
1213
1252
|
var onChange = function (value) {
|
|
@@ -1218,10 +1257,10 @@ var InputField = function (props) {
|
|
|
1218
1257
|
if (props.onBlur)
|
|
1219
1258
|
props.onBlur(props.name);
|
|
1220
1259
|
};
|
|
1221
|
-
return (jsxRuntime.jsxs(Container$
|
|
1260
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1222
1261
|
};
|
|
1223
1262
|
|
|
1224
|
-
var Container$
|
|
1263
|
+
var Container$d = styled__default["default"].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) {
|
|
1225
1264
|
var status = _a.status, color = _a.color;
|
|
1226
1265
|
switch (status) {
|
|
1227
1266
|
case "passed":
|
|
@@ -1265,23 +1304,23 @@ var Container$c = styled__default["default"].div(templateObject_1$n || (template
|
|
|
1265
1304
|
return theme.colors.darkGray.light;
|
|
1266
1305
|
}
|
|
1267
1306
|
});
|
|
1268
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
1269
|
-
var templateObject_1$
|
|
1307
|
+
var CheckIconWrapper = styled__default["default"].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"])));
|
|
1308
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1270
1309
|
|
|
1271
|
-
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1310
|
+
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$d, __assign({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
1272
1311
|
marginTop: "13px",
|
|
1273
1312
|
transform: "scale(2)",
|
|
1274
1313
|
} }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsxRuntime.jsx(Heading, __assign({ type: "h1" }, { children: props.char })))] }))); };
|
|
1275
1314
|
|
|
1276
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
1315
|
+
var Wrapper$2 = styled__default["default"].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) {
|
|
1277
1316
|
var chevron = _a.chevron;
|
|
1278
1317
|
return (chevron === "left" ? "4px" : "");
|
|
1279
1318
|
}, function (_a) {
|
|
1280
1319
|
var chevron = _a.chevron;
|
|
1281
1320
|
return (chevron === "right" ? "4px" : "");
|
|
1282
1321
|
});
|
|
1283
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1284
|
-
var templateObject_1$
|
|
1322
|
+
var StyledLink = styled__default["default"](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);
|
|
1323
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1285
1324
|
|
|
1286
1325
|
var Link = function (props) {
|
|
1287
1326
|
var onClick = function (e) {
|
|
@@ -1293,15 +1332,15 @@ var Link = function (props) {
|
|
|
1293
1332
|
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }), jsxRuntime.jsx(StyledLink, __assign({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
1294
1333
|
};
|
|
1295
1334
|
|
|
1296
|
-
var Container$
|
|
1335
|
+
var Container$c = styled__default["default"].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) {
|
|
1297
1336
|
var text = _a.text;
|
|
1298
1337
|
return (text ? "20px" : "");
|
|
1299
1338
|
});
|
|
1300
|
-
var templateObject_1$
|
|
1339
|
+
var templateObject_1$m;
|
|
1301
1340
|
|
|
1302
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1341
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$c, __assign({}, props, { children: [jsxRuntime.jsx(BeatLoader__default["default"], { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
1303
1342
|
|
|
1304
|
-
var Container$
|
|
1343
|
+
var Container$b = styled__default["default"].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) {
|
|
1305
1344
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1306
1345
|
if (dropdownIsVisible) {
|
|
1307
1346
|
switch (color) {
|
|
@@ -1314,7 +1353,7 @@ var Container$a = styled__default["default"].div(templateObject_1$k || (template
|
|
|
1314
1353
|
}
|
|
1315
1354
|
return "";
|
|
1316
1355
|
});
|
|
1317
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
1356
|
+
var SelectedLocaleWrapper = styled__default["default"].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"])));
|
|
1318
1357
|
var DropdownContainer = styled__default["default"].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) {
|
|
1319
1358
|
var color = _a.color;
|
|
1320
1359
|
switch (color) {
|
|
@@ -1326,7 +1365,7 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$7 || (te
|
|
|
1326
1365
|
}
|
|
1327
1366
|
});
|
|
1328
1367
|
var Locale = styled__default["default"].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);
|
|
1329
|
-
var templateObject_1$
|
|
1368
|
+
var templateObject_1$l, templateObject_2$h, templateObject_3$7, templateObject_4$5;
|
|
1330
1369
|
|
|
1331
1370
|
var LocaleSelect = function (props) {
|
|
1332
1371
|
var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1335,22 +1374,22 @@ var LocaleSelect = function (props) {
|
|
|
1335
1374
|
setLocale(locale);
|
|
1336
1375
|
props.onChange(locale);
|
|
1337
1376
|
};
|
|
1338
|
-
return (jsxRuntime.jsxs(Container$
|
|
1377
|
+
return (jsxRuntime.jsxs(Container$b, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1339
1378
|
.filter(function (l) { return l !== locale; })
|
|
1340
1379
|
.map(function (locale) { return (jsxRuntime.jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
1341
1380
|
};
|
|
1342
1381
|
|
|
1343
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1344
|
-
var templateObject_1$
|
|
1382
|
+
var Wrapper$1 = styled__default["default"].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"])));
|
|
1383
|
+
var templateObject_1$k;
|
|
1345
1384
|
|
|
1346
1385
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
1347
1386
|
|
|
1348
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1387
|
+
var NotificationContainer = styled__default["default"].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) {
|
|
1349
1388
|
var contrast = _a.contrast;
|
|
1350
1389
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1351
1390
|
});
|
|
1352
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
1353
|
-
var templateObject_1$
|
|
1391
|
+
var ButtonContainer = styled__default["default"].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"])));
|
|
1392
|
+
var templateObject_1$j, templateObject_2$g;
|
|
1354
1393
|
|
|
1355
1394
|
var Notification = function (props) {
|
|
1356
1395
|
if (!props.isVisible)
|
|
@@ -1358,9 +1397,9 @@ var Notification = function (props) {
|
|
|
1358
1397
|
return (jsxRuntime.jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React.createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
1359
1398
|
};
|
|
1360
1399
|
|
|
1361
|
-
var Container$
|
|
1362
|
-
var Label$
|
|
1363
|
-
var templateObject_1$
|
|
1400
|
+
var Container$a = styled__default["default"].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"])));
|
|
1401
|
+
var Label$6 = styled__default["default"](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);
|
|
1402
|
+
var templateObject_1$i, templateObject_2$f;
|
|
1364
1403
|
|
|
1365
1404
|
var NumberField = function (props) {
|
|
1366
1405
|
var onChange = function (value) {
|
|
@@ -1371,7 +1410,7 @@ var NumberField = function (props) {
|
|
|
1371
1410
|
if (props.onBlur)
|
|
1372
1411
|
props.onBlur(props.name);
|
|
1373
1412
|
};
|
|
1374
|
-
return (jsxRuntime.jsxs(Container$
|
|
1413
|
+
return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Number, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1375
1414
|
};
|
|
1376
1415
|
|
|
1377
1416
|
var expressions = {};
|
|
@@ -1422,15 +1461,15 @@ var isStrongPassword = function (password) {
|
|
|
1422
1461
|
exports.isStrongPassword = isStrongPassword;
|
|
1423
1462
|
}(expressions));
|
|
1424
1463
|
|
|
1425
|
-
var Container$
|
|
1426
|
-
var Label$
|
|
1464
|
+
var Container$9 = styled__default["default"].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"])));
|
|
1465
|
+
var Label$5 = styled__default["default"](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);
|
|
1427
1466
|
var HelperContainer = styled__default["default"].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"])));
|
|
1428
1467
|
var fadeIn = styled.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"])));
|
|
1429
1468
|
var Helper = styled__default["default"](StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
1430
1469
|
var isOk = _a.isOk;
|
|
1431
1470
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1432
1471
|
}, fadeIn);
|
|
1433
|
-
var templateObject_1$
|
|
1472
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$6, templateObject_4$4, templateObject_5$2;
|
|
1434
1473
|
|
|
1435
1474
|
var translations = {
|
|
1436
1475
|
"nl-NL": {
|
|
@@ -1487,7 +1526,7 @@ var PasswordInputField = function (props) {
|
|
|
1487
1526
|
if (props.onBlur)
|
|
1488
1527
|
props.onBlur(props.name);
|
|
1489
1528
|
};
|
|
1490
|
-
return (jsxRuntime.jsxs(Container$
|
|
1529
|
+
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxRuntime.jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
1491
1530
|
};
|
|
1492
1531
|
|
|
1493
1532
|
var generateRandomString = function (length) {
|
|
@@ -1500,7 +1539,7 @@ var generateRandomString = function (length) {
|
|
|
1500
1539
|
return string;
|
|
1501
1540
|
};
|
|
1502
1541
|
|
|
1503
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1542
|
+
var PopupContainer = styled__default["default"].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) {
|
|
1504
1543
|
var isVisible = _a.isVisible;
|
|
1505
1544
|
return (isVisible ? "100%" : "0%");
|
|
1506
1545
|
}, function (_a) {
|
|
@@ -1513,7 +1552,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$f || (templ
|
|
|
1513
1552
|
var contrast = _a.contrast;
|
|
1514
1553
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1515
1554
|
});
|
|
1516
|
-
var templateObject_1$
|
|
1555
|
+
var templateObject_1$g;
|
|
1517
1556
|
|
|
1518
1557
|
var Popup = function (props) {
|
|
1519
1558
|
var popupRef = React.useRef(null);
|
|
@@ -1549,8 +1588,8 @@ var Popup = function (props) {
|
|
|
1549
1588
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
1550
1589
|
};
|
|
1551
1590
|
|
|
1552
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1553
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1591
|
+
var Wrapper = styled__default["default"].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"])));
|
|
1592
|
+
var StyledProgressBar = styled__default["default"].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) {
|
|
1554
1593
|
var showInfo = _a.showInfo;
|
|
1555
1594
|
return (showInfo ? "10px" : "");
|
|
1556
1595
|
});
|
|
@@ -1561,12 +1600,12 @@ var Indicator$1 = styled__default["default"].div(templateObject_3$5 || (template
|
|
|
1561
1600
|
var color = _a.color;
|
|
1562
1601
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1563
1602
|
});
|
|
1564
|
-
var templateObject_1$
|
|
1603
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$5;
|
|
1565
1604
|
|
|
1566
1605
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
1567
1606
|
|
|
1568
|
-
var Container$
|
|
1569
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
1607
|
+
var Container$8 = styled__default["default"].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"])));
|
|
1608
|
+
var Step$1 = styled__default["default"].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) {
|
|
1570
1609
|
var status = _a.status;
|
|
1571
1610
|
return (!!status ? "pointer" : "not-allowed");
|
|
1572
1611
|
}, function (_a) {
|
|
@@ -1588,9 +1627,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$b || (templateObject
|
|
|
1588
1627
|
var hasTitle = _a.hasTitle;
|
|
1589
1628
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1590
1629
|
}, theme.colors.lightGray.dark);
|
|
1591
|
-
var templateObject_1$
|
|
1630
|
+
var templateObject_1$e, templateObject_2$c;
|
|
1592
1631
|
|
|
1593
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1632
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
1594
1633
|
var title = _a.title, onClick = _a.onClick;
|
|
1595
1634
|
var step = index + 1;
|
|
1596
1635
|
var status = props.current > step
|
|
@@ -1605,8 +1644,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$7, { children:
|
|
|
1605
1644
|
return (jsxRuntime.jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
1606
1645
|
}) })); };
|
|
1607
1646
|
|
|
1608
|
-
var Container$
|
|
1609
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
1647
|
+
var Container$7 = styled__default["default"].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"])));
|
|
1648
|
+
var Step = styled__default["default"].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) {
|
|
1610
1649
|
var status = _a.status;
|
|
1611
1650
|
return (!!status ? "pointer" : "not-allowed");
|
|
1612
1651
|
}, function (_a) {
|
|
@@ -1625,9 +1664,9 @@ var Step = styled__default["default"].li(templateObject_2$a || (templateObject_2
|
|
|
1625
1664
|
? theme.colors.lightGray.light
|
|
1626
1665
|
: theme.colors.darkGray.light;
|
|
1627
1666
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1628
|
-
var templateObject_1$
|
|
1667
|
+
var templateObject_1$d, templateObject_2$b;
|
|
1629
1668
|
|
|
1630
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1669
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$7, { children: props.steps.map(function (_a, index) {
|
|
1631
1670
|
var title = _a.title, onClick = _a.onClick;
|
|
1632
1671
|
var step = index + 1;
|
|
1633
1672
|
var status = props.current > step
|
|
@@ -1646,14 +1685,14 @@ var Steps = function (props) {
|
|
|
1646
1685
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign({}, props))) : (jsxRuntime.jsx(Steps$2, __assign({}, props)));
|
|
1647
1686
|
};
|
|
1648
1687
|
|
|
1649
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
1650
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
1688
|
+
var Fieldset = styled__default["default"].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"])));
|
|
1689
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1651
1690
|
var RadioWrapper = styled__default["default"].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"])));
|
|
1652
|
-
var Label$
|
|
1691
|
+
var Label$4 = styled__default["default"](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) {
|
|
1653
1692
|
var weight = _a.weight;
|
|
1654
1693
|
return weight || 500;
|
|
1655
1694
|
}, theme.colors.darkGray.base);
|
|
1656
|
-
var templateObject_1$
|
|
1695
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$4, templateObject_4$3;
|
|
1657
1696
|
|
|
1658
1697
|
var RadioGroup = function (props) {
|
|
1659
1698
|
var onChange = function (value) {
|
|
@@ -1664,15 +1703,15 @@ var RadioGroup = function (props) {
|
|
|
1664
1703
|
if (props.onBlur)
|
|
1665
1704
|
props.onBlur(props.name);
|
|
1666
1705
|
};
|
|
1667
|
-
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1706
|
+
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$4, __assign({ as: "legend" }, { children: props.legend })), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1668
1707
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1669
|
-
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsxRuntime.jsx(Label$
|
|
1708
|
+
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1670
1709
|
}) })] }));
|
|
1671
1710
|
};
|
|
1672
1711
|
|
|
1673
|
-
var Container$
|
|
1674
|
-
var Label$
|
|
1675
|
-
var templateObject_1$
|
|
1712
|
+
var Container$6 = styled__default["default"].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"])));
|
|
1713
|
+
var Label$3 = styled__default["default"](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);
|
|
1714
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1676
1715
|
|
|
1677
1716
|
var SelectField = function (props) {
|
|
1678
1717
|
var onChange = function (value) {
|
|
@@ -1683,15 +1722,15 @@ var SelectField = function (props) {
|
|
|
1683
1722
|
if (props.onBlur)
|
|
1684
1723
|
props.onBlur(props.name);
|
|
1685
1724
|
};
|
|
1686
|
-
return (jsxRuntime.jsxs(Container$
|
|
1725
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
1687
1726
|
var value = _a.value, label = _a.label;
|
|
1688
1727
|
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1689
1728
|
}) }))] }));
|
|
1690
1729
|
};
|
|
1691
1730
|
|
|
1692
|
-
var Container$
|
|
1693
|
-
var Label$
|
|
1694
|
-
var templateObject_1$
|
|
1731
|
+
var Container$5 = styled__default["default"].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"])));
|
|
1732
|
+
var Label$2 = styled__default["default"](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);
|
|
1733
|
+
var templateObject_1$a, templateObject_2$8;
|
|
1695
1734
|
|
|
1696
1735
|
var ToggleField = function (props) {
|
|
1697
1736
|
var onChange = function (value) {
|
|
@@ -1702,10 +1741,10 @@ var ToggleField = function (props) {
|
|
|
1702
1741
|
if (props.onBlur)
|
|
1703
1742
|
props.onBlur(props.name);
|
|
1704
1743
|
};
|
|
1705
|
-
return (jsxRuntime.jsxs(Container$
|
|
1744
|
+
return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
1706
1745
|
};
|
|
1707
1746
|
|
|
1708
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
1747
|
+
var TooltipContainer = styled__default["default"].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) {
|
|
1709
1748
|
var isVisible = _a.isVisible;
|
|
1710
1749
|
return (isVisible ? "100%" : "0%");
|
|
1711
1750
|
}, function (_a) {
|
|
@@ -1715,7 +1754,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$8 || (tem
|
|
|
1715
1754
|
var x = _a.x;
|
|
1716
1755
|
return (x ? "".concat(x, "px") : "");
|
|
1717
1756
|
});
|
|
1718
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
1757
|
+
var TooltipTitle = styled__default["default"].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) {
|
|
1719
1758
|
var color = _a.color;
|
|
1720
1759
|
switch (color) {
|
|
1721
1760
|
default:
|
|
@@ -1725,7 +1764,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$6 || (templat
|
|
|
1725
1764
|
return theme.colors.lightGray.dark;
|
|
1726
1765
|
}
|
|
1727
1766
|
});
|
|
1728
|
-
var templateObject_1$
|
|
1767
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1729
1768
|
|
|
1730
1769
|
var Tooltip = function (props) {
|
|
1731
1770
|
var tooltipRef = React.useRef(null);
|
|
@@ -1759,7 +1798,7 @@ var Tooltip = function (props) {
|
|
|
1759
1798
|
theme.colors.lightGray.light }) })), jsxRuntime.jsx(TooltipTitle, __assign({ color: props.color }, { children: jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title })) }))] }))] }));
|
|
1760
1799
|
};
|
|
1761
1800
|
|
|
1762
|
-
var StyledTextarea = styled__default["default"].textarea(templateObject_1$
|
|
1801
|
+
var StyledTextarea = styled__default["default"].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) {
|
|
1763
1802
|
var disabled = _a.disabled;
|
|
1764
1803
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1765
1804
|
}, function (_a) {
|
|
@@ -1772,7 +1811,7 @@ var StyledTextarea = styled__default["default"].textarea(templateObject_1$7 || (
|
|
|
1772
1811
|
var disabled = _a.disabled;
|
|
1773
1812
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1774
1813
|
}, 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));
|
|
1775
|
-
var templateObject_1$
|
|
1814
|
+
var templateObject_1$8;
|
|
1776
1815
|
|
|
1777
1816
|
var Textarea = function (props) {
|
|
1778
1817
|
var onChange = function (e) {
|
|
@@ -1782,11 +1821,27 @@ var Textarea = function (props) {
|
|
|
1782
1821
|
return jsxRuntime.jsx(StyledTextarea, __assign({}, props, { onChange: onChange }));
|
|
1783
1822
|
};
|
|
1784
1823
|
|
|
1824
|
+
var Container$4 = styled__default["default"].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"])));
|
|
1825
|
+
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1826
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1827
|
+
|
|
1828
|
+
var TextareaField = function (props) {
|
|
1829
|
+
var onChange = function (value) {
|
|
1830
|
+
if (props.onChange)
|
|
1831
|
+
props.onChange(props.name, value);
|
|
1832
|
+
};
|
|
1833
|
+
var onBlur = function () {
|
|
1834
|
+
if (props.onBlur)
|
|
1835
|
+
props.onBlur(props.name);
|
|
1836
|
+
};
|
|
1837
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1838
|
+
};
|
|
1839
|
+
|
|
1785
1840
|
var Container$3 = styled__default["default"].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"])));
|
|
1786
1841
|
var Label = styled__default["default"](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);
|
|
1787
1842
|
var templateObject_1$6, templateObject_2$5;
|
|
1788
1843
|
|
|
1789
|
-
var
|
|
1844
|
+
var RangeField = function (props) {
|
|
1790
1845
|
var onChange = function (value) {
|
|
1791
1846
|
if (props.onChange)
|
|
1792
1847
|
props.onChange(props.name, value);
|
|
@@ -1795,7 +1850,7 @@ var TextareaField = function (props) {
|
|
|
1795
1850
|
if (props.onBlur)
|
|
1796
1851
|
props.onBlur(props.name);
|
|
1797
1852
|
};
|
|
1798
|
-
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(
|
|
1853
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1799
1854
|
};
|
|
1800
1855
|
|
|
1801
1856
|
var FeedbackColors = {
|
|
@@ -1921,6 +1976,14 @@ var Form = React.forwardRef(function (props, ref) {
|
|
|
1921
1976
|
}
|
|
1922
1977
|
break;
|
|
1923
1978
|
}
|
|
1979
|
+
case "range": {
|
|
1980
|
+
var element = document.getElementById(field.name);
|
|
1981
|
+
if (!field.defaultValue)
|
|
1982
|
+
element.value = "0";
|
|
1983
|
+
else
|
|
1984
|
+
element.value = "".concat(field.defaultValue);
|
|
1985
|
+
break;
|
|
1986
|
+
}
|
|
1924
1987
|
}
|
|
1925
1988
|
};
|
|
1926
1989
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1997,6 +2060,9 @@ var Form = React.forwardRef(function (props, ref) {
|
|
|
1997
2060
|
case "toggle":
|
|
1998
2061
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1999
2062
|
jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
2063
|
+
case "range":
|
|
2064
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
2065
|
+
jsxRuntime.jsx(RangeField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
2000
2066
|
}
|
|
2001
2067
|
}) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
2002
2068
|
});
|
|
@@ -2193,6 +2259,7 @@ exports.Popup = Popup;
|
|
|
2193
2259
|
exports.ProgressBar = ProgressBar;
|
|
2194
2260
|
exports.Radio = Radio;
|
|
2195
2261
|
exports.RadioGroup = RadioGroup;
|
|
2262
|
+
exports.Range = Range;
|
|
2196
2263
|
exports.Result = Result;
|
|
2197
2264
|
exports.Select = Select;
|
|
2198
2265
|
exports.SelectField = SelectField;
|