@typeolymp/ui-components 1.2.0 → 1.3.0
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/Flag/index.d.ts +1 -1
- package/build/components/atoms/Flag/stories.d.ts +1 -1
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/atoms/Input/Password.d.ts +4 -1
- package/build/components/atoms/Input/index.d.ts +2 -1
- package/build/components/atoms/Input/stories.d.ts +1 -1
- package/build/components/atoms/Medal/index.d.ts +1 -1
- package/build/components/atoms/Medal/stories.d.ts +1 -1
- package/build/components/molecules/Card/index.d.ts +1 -1
- package/build/components/molecules/InputField/index.d.ts +0 -1
- package/build/components/molecules/Loading/index.d.ts +1 -1
- package/build/components/molecules/PasswordInputField/index.d.ts +15 -0
- package/build/components/molecules/PasswordInputField/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +7 -2
- package/build/index.d.ts +2 -1
- package/build/index.es.js +100 -72
- package/build/index.es.js.map +1 -1
- package/build/index.js +100 -71
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/build/index.js
CHANGED
|
@@ -198,7 +198,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
198
198
|
return cooked;
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
201
|
+
var StyledButton = styled__default["default"].button(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
202
202
|
var fluid = _a.fluid;
|
|
203
203
|
return (fluid ? "100%" : "fit-content");
|
|
204
204
|
}, function (_a) {
|
|
@@ -248,7 +248,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$A || (temp
|
|
|
248
248
|
? theme.button.medium.heightActive
|
|
249
249
|
: theme.button[size].heightActive;
|
|
250
250
|
});
|
|
251
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
251
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
252
252
|
var size = _a.size;
|
|
253
253
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
254
254
|
});
|
|
@@ -268,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$6 ||
|
|
|
268
268
|
? theme.button.medium.marginTopActive
|
|
269
269
|
: theme.button[size].marginTopActive;
|
|
270
270
|
});
|
|
271
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$B, templateObject_2$j, templateObject_3$6;
|
|
272
272
|
|
|
273
273
|
var Button = function (props) {
|
|
274
274
|
var onClick = function () {
|
|
@@ -285,7 +285,7 @@ var Button = function (props) {
|
|
|
285
285
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
286
286
|
};
|
|
287
287
|
|
|
288
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
288
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
289
289
|
var checked = _a.checked, disabled = _a.disabled;
|
|
290
290
|
if (disabled)
|
|
291
291
|
return theme.colors.lightGray.darker;
|
|
@@ -306,7 +306,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$z || (templ
|
|
|
306
306
|
return theme.colors.green.base;
|
|
307
307
|
return theme.colors.lightGray.darker;
|
|
308
308
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
309
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$A;
|
|
310
310
|
|
|
311
311
|
var Checkbox = function (props) {
|
|
312
312
|
var _a;
|
|
@@ -339,7 +339,7 @@ var Checkbox = function (props) {
|
|
|
339
339
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
340
340
|
};
|
|
341
341
|
|
|
342
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
342
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
343
343
|
var size = _a.size;
|
|
344
344
|
switch (size) {
|
|
345
345
|
case "small":
|
|
@@ -362,7 +362,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$y || (templateOb
|
|
|
362
362
|
return "27px";
|
|
363
363
|
}
|
|
364
364
|
});
|
|
365
|
-
var templateObject_1$
|
|
365
|
+
var templateObject_1$z;
|
|
366
366
|
|
|
367
367
|
var flags = {
|
|
368
368
|
"nl-NL": (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -371,7 +371,7 @@ var flags = {
|
|
|
371
371
|
};
|
|
372
372
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
373
373
|
|
|
374
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
374
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
375
375
|
var type = _a.type;
|
|
376
376
|
return theme.heading[type].fontSize;
|
|
377
377
|
}, function (_a) {
|
|
@@ -395,14 +395,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$x || (templ
|
|
|
395
395
|
var align = _a.align;
|
|
396
396
|
return align;
|
|
397
397
|
});
|
|
398
|
-
var templateObject_1$
|
|
398
|
+
var templateObject_1$y;
|
|
399
399
|
|
|
400
400
|
var Heading = function (props) {
|
|
401
401
|
var element = !!props.as ? props.as : props.type;
|
|
402
402
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
403
403
|
};
|
|
404
404
|
|
|
405
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
405
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
406
406
|
var size = _a.size;
|
|
407
407
|
return theme.icon[size] || theme.icon.medium;
|
|
408
408
|
}, function (_a) {
|
|
@@ -426,11 +426,13 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$w || (templateOb
|
|
|
426
426
|
return theme.colors.orange.base;
|
|
427
427
|
case "red":
|
|
428
428
|
return theme.colors.red.base;
|
|
429
|
+
case "purple":
|
|
430
|
+
return theme.colors.purple.base;
|
|
429
431
|
case "white":
|
|
430
432
|
return theme.colors.lightGray.light;
|
|
431
433
|
}
|
|
432
434
|
});
|
|
433
|
-
var templateObject_1$
|
|
435
|
+
var templateObject_1$x;
|
|
434
436
|
|
|
435
437
|
var icons = {
|
|
436
438
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -453,7 +455,7 @@ var icons = {
|
|
|
453
455
|
};
|
|
454
456
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
455
457
|
|
|
456
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
458
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
457
459
|
var size = _a.size;
|
|
458
460
|
switch (size) {
|
|
459
461
|
default:
|
|
@@ -465,7 +467,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$v || (templateOb
|
|
|
465
467
|
return "118px";
|
|
466
468
|
}
|
|
467
469
|
});
|
|
468
|
-
var templateObject_1$
|
|
470
|
+
var templateObject_1$w;
|
|
469
471
|
|
|
470
472
|
var illustrations = {
|
|
471
473
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -480,11 +482,11 @@ var illustrations = {
|
|
|
480
482
|
};
|
|
481
483
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
482
484
|
|
|
483
|
-
var PasswordInputWrapper = styled__default["default"].div(templateObject_1$
|
|
485
|
+
var PasswordInputWrapper = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\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 div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
484
486
|
var disabled = _a.disabled;
|
|
485
487
|
return (disabled ? "not-allowed" : "pointer");
|
|
486
488
|
});
|
|
487
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
489
|
+
var StyledInput = styled__default["default"].input(templateObject_2$i || (templateObject_2$i = __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 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 :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 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 :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
488
490
|
var disabled = _a.disabled;
|
|
489
491
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
490
492
|
}, function (_a) {
|
|
@@ -497,7 +499,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$h || (templa
|
|
|
497
499
|
var disabled = _a.disabled;
|
|
498
500
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
499
501
|
}, 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));
|
|
500
|
-
var templateObject_1$
|
|
502
|
+
var templateObject_1$v, templateObject_2$i;
|
|
501
503
|
|
|
502
504
|
var PasswordInput = function (props) {
|
|
503
505
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -514,7 +516,13 @@ var PasswordInput = function (props) {
|
|
|
514
516
|
props.onChange(value_1);
|
|
515
517
|
}
|
|
516
518
|
};
|
|
517
|
-
|
|
519
|
+
var onKeyPressEnter = function () {
|
|
520
|
+
if (props.onKeyPressEnter)
|
|
521
|
+
props.onKeyPressEnter();
|
|
522
|
+
};
|
|
523
|
+
return (jsxRuntime.jsxs(PasswordInputWrapper, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: function (e) {
|
|
524
|
+
return e.key === "Enter" ? onKeyPressEnter() : null;
|
|
525
|
+
} }), void 0)] }), void 0));
|
|
518
526
|
};
|
|
519
527
|
|
|
520
528
|
var Input = function (props) {
|
|
@@ -533,7 +541,7 @@ Input.Password = PasswordInput;
|
|
|
533
541
|
|
|
534
542
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsxRuntime.jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsxRuntime.jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsxRuntime.jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsxRuntime.jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsxRuntime.jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
535
543
|
|
|
536
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
544
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
537
545
|
var size = _a.size;
|
|
538
546
|
switch (size) {
|
|
539
547
|
default:
|
|
@@ -543,7 +551,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$t || (templateOb
|
|
|
543
551
|
return "116px";
|
|
544
552
|
}
|
|
545
553
|
});
|
|
546
|
-
var templateObject_1$
|
|
554
|
+
var templateObject_1$u;
|
|
547
555
|
|
|
548
556
|
var medals = {
|
|
549
557
|
small: {
|
|
@@ -559,11 +567,11 @@ var medals = {
|
|
|
559
567
|
};
|
|
560
568
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
561
569
|
|
|
562
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
570
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __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) {
|
|
563
571
|
var disabled = _a.disabled;
|
|
564
572
|
return (disabled ? "49.5px" : "");
|
|
565
573
|
});
|
|
566
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
574
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
567
575
|
var disabled = _a.disabled;
|
|
568
576
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
569
577
|
}, function (_a) {
|
|
@@ -576,7 +584,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$g || (
|
|
|
576
584
|
var disabled = _a.disabled;
|
|
577
585
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
578
586
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
579
|
-
var templateObject_1$
|
|
587
|
+
var templateObject_1$t, templateObject_2$h;
|
|
580
588
|
|
|
581
589
|
var Number = function (props) {
|
|
582
590
|
var ref = React.useRef(null);
|
|
@@ -618,7 +626,7 @@ var Number = function (props) {
|
|
|
618
626
|
return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
619
627
|
};
|
|
620
628
|
|
|
621
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
629
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$s || (templateObject_1$s = __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) {
|
|
622
630
|
var size = _a.size;
|
|
623
631
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
624
632
|
}, function (_a) {
|
|
@@ -650,11 +658,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$r || (templa
|
|
|
650
658
|
var align = _a.align;
|
|
651
659
|
return align;
|
|
652
660
|
});
|
|
653
|
-
var templateObject_1$
|
|
661
|
+
var templateObject_1$s;
|
|
654
662
|
|
|
655
663
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
656
664
|
|
|
657
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
665
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
658
666
|
var checked = _a.checked, disabled = _a.disabled;
|
|
659
667
|
if (disabled)
|
|
660
668
|
return theme.colors.lightGray.darker;
|
|
@@ -682,7 +690,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$q || (template
|
|
|
682
690
|
return theme.colors.green.base;
|
|
683
691
|
return "";
|
|
684
692
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
685
|
-
var templateObject_1$
|
|
693
|
+
var templateObject_1$r;
|
|
686
694
|
|
|
687
695
|
var Radio = function (props) {
|
|
688
696
|
var _a;
|
|
@@ -711,11 +719,11 @@ var Radio = function (props) {
|
|
|
711
719
|
return (jsxRuntime.jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
712
720
|
};
|
|
713
721
|
|
|
714
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
722
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
715
723
|
var disabled = _a.disabled;
|
|
716
724
|
return (disabled ? "not-allowed" : "pointer");
|
|
717
725
|
});
|
|
718
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
726
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$g || (templateObject_2$g = __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) {
|
|
719
727
|
var disabled = _a.disabled;
|
|
720
728
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
721
729
|
}, function (_a) {
|
|
@@ -728,7 +736,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$f || (temp
|
|
|
728
736
|
var isChanged = _a.isChanged;
|
|
729
737
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
730
738
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
731
|
-
var templateObject_1$
|
|
739
|
+
var templateObject_1$q, templateObject_2$g;
|
|
732
740
|
|
|
733
741
|
var Select = function (props) {
|
|
734
742
|
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -745,18 +753,18 @@ var Select = function (props) {
|
|
|
745
753
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
746
754
|
};
|
|
747
755
|
|
|
748
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
756
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
749
757
|
var horizontal = _a.horizontal;
|
|
750
758
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
751
759
|
}, function (_a) {
|
|
752
760
|
var vertical = _a.vertical;
|
|
753
761
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
754
762
|
});
|
|
755
|
-
var templateObject_1$
|
|
763
|
+
var templateObject_1$p;
|
|
756
764
|
|
|
757
765
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
758
766
|
|
|
759
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
767
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$o || (templateObject_1$o = __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) {
|
|
760
768
|
var size = _a.size;
|
|
761
769
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
762
770
|
}, function (_a) {
|
|
@@ -784,11 +792,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$n || (templ
|
|
|
784
792
|
return theme.colors.darkGray.dark;
|
|
785
793
|
}
|
|
786
794
|
});
|
|
787
|
-
var templateObject_1$
|
|
795
|
+
var templateObject_1$o;
|
|
788
796
|
|
|
789
797
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
790
798
|
|
|
791
|
-
var Container$
|
|
799
|
+
var Container$9 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
792
800
|
var disabled = _a.disabled;
|
|
793
801
|
return (disabled ? "not-allowed" : "pointer");
|
|
794
802
|
}, function (_a) {
|
|
@@ -806,7 +814,7 @@ var Container$8 = styled__default["default"].div(templateObject_1$m || (template
|
|
|
806
814
|
var disabled = _a.disabled;
|
|
807
815
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
808
816
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
809
|
-
var templateObject_1$
|
|
817
|
+
var templateObject_1$n;
|
|
810
818
|
|
|
811
819
|
var Toggle = function (props) {
|
|
812
820
|
var _a;
|
|
@@ -834,10 +842,10 @@ var Toggle = function (props) {
|
|
|
834
842
|
props.onChange(newValue);
|
|
835
843
|
}
|
|
836
844
|
};
|
|
837
|
-
return (jsxRuntime.jsx(Container$
|
|
845
|
+
return (jsxRuntime.jsx(Container$9, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
838
846
|
};
|
|
839
847
|
|
|
840
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
848
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
841
849
|
var level = _a.level;
|
|
842
850
|
switch (level) {
|
|
843
851
|
case 1:
|
|
@@ -848,7 +856,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$l || (templateOb
|
|
|
848
856
|
return "70px";
|
|
849
857
|
}
|
|
850
858
|
});
|
|
851
|
-
var templateObject_1$
|
|
859
|
+
var templateObject_1$m;
|
|
852
860
|
|
|
853
861
|
var trophies = {
|
|
854
862
|
1: {
|
|
@@ -884,7 +892,7 @@ var trophies = {
|
|
|
884
892
|
};
|
|
885
893
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
886
894
|
|
|
887
|
-
var Container$
|
|
895
|
+
var Container$8 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
888
896
|
var type = _a.type;
|
|
889
897
|
switch (type) {
|
|
890
898
|
case "success":
|
|
@@ -901,11 +909,11 @@ var Container$7 = styled__default["default"].div(templateObject_1$k || (template
|
|
|
901
909
|
return theme.colors.red.base;
|
|
902
910
|
}
|
|
903
911
|
});
|
|
904
|
-
var templateObject_1$
|
|
912
|
+
var templateObject_1$l;
|
|
905
913
|
|
|
906
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
914
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$8, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
907
915
|
|
|
908
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
916
|
+
var StyledCard = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
909
917
|
var ellipse = _a.ellipse;
|
|
910
918
|
return ellipse
|
|
911
919
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -914,23 +922,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$j || (templateO
|
|
|
914
922
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
915
923
|
: "";
|
|
916
924
|
});
|
|
917
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
925
|
+
var Ellipse = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __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) {
|
|
918
926
|
var color = _a.color;
|
|
919
927
|
return color ? theme.colors[color].light : "";
|
|
920
928
|
});
|
|
921
929
|
var Content = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
922
|
-
var templateObject_1$
|
|
930
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$5;
|
|
923
931
|
|
|
924
932
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }, void 0), jsxRuntime.jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
925
933
|
|
|
926
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
927
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
934
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
935
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
928
936
|
var CheckboxWrapper = 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"])));
|
|
929
|
-
var Label$
|
|
937
|
+
var Label$6 = 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) {
|
|
930
938
|
var weight = _a.weight;
|
|
931
939
|
return weight || 500;
|
|
932
940
|
}, theme.colors.darkGray.base);
|
|
933
|
-
var templateObject_1$
|
|
941
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
934
942
|
|
|
935
943
|
var Checkboxes = function (props) {
|
|
936
944
|
var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -947,15 +955,15 @@ var Checkboxes = function (props) {
|
|
|
947
955
|
if (props.onBlur)
|
|
948
956
|
props.onBlur(props.name);
|
|
949
957
|
};
|
|
950
|
-
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
958
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$6, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
951
959
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
952
|
-
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$
|
|
960
|
+
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
953
961
|
}) }, void 0)] }, void 0));
|
|
954
962
|
};
|
|
955
963
|
|
|
956
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
957
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
958
|
-
var templateObject_1$
|
|
964
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
965
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
966
|
+
var templateObject_1$i, templateObject_2$d;
|
|
959
967
|
|
|
960
968
|
var IconButton = function (props) {
|
|
961
969
|
if (props.color === "white")
|
|
@@ -963,9 +971,9 @@ var IconButton = function (props) {
|
|
|
963
971
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
964
972
|
};
|
|
965
973
|
|
|
966
|
-
var Container$
|
|
967
|
-
var Label$
|
|
968
|
-
var templateObject_1$
|
|
974
|
+
var Container$7 = 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"])));
|
|
975
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
976
|
+
var templateObject_1$h, templateObject_2$c;
|
|
969
977
|
|
|
970
978
|
var InputField = function (props) {
|
|
971
979
|
var onChange = function (value) {
|
|
@@ -976,19 +984,18 @@ var InputField = function (props) {
|
|
|
976
984
|
if (props.onBlur)
|
|
977
985
|
props.onBlur(props.name);
|
|
978
986
|
};
|
|
979
|
-
|
|
980
|
-
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Field, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
987
|
+
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Input, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
981
988
|
};
|
|
982
989
|
|
|
983
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
990
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
984
991
|
var chevron = _a.chevron;
|
|
985
992
|
return (chevron === "left" ? "4px" : "");
|
|
986
993
|
}, function (_a) {
|
|
987
994
|
var chevron = _a.chevron;
|
|
988
995
|
return (chevron === "right" ? "4px" : "");
|
|
989
996
|
});
|
|
990
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
991
|
-
var templateObject_1$
|
|
997
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$b || (templateObject_2$b = __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);
|
|
998
|
+
var templateObject_1$g, templateObject_2$b;
|
|
992
999
|
|
|
993
1000
|
var Link = function (props) {
|
|
994
1001
|
var onClick = function (e) {
|
|
@@ -1000,24 +1007,24 @@ var Link = function (props) {
|
|
|
1000
1007
|
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsxRuntime.jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
1001
1008
|
};
|
|
1002
1009
|
|
|
1003
|
-
var Container$
|
|
1010
|
+
var Container$6 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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) {
|
|
1004
1011
|
var text = _a.text;
|
|
1005
1012
|
return (text ? "20px" : "");
|
|
1006
1013
|
});
|
|
1007
|
-
var templateObject_1$
|
|
1014
|
+
var templateObject_1$f;
|
|
1008
1015
|
|
|
1009
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1016
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$6, __assign({}, props, { children: [jsxRuntime.jsx(BeatLoader__default["default"], { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1010
1017
|
|
|
1011
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1012
|
-
var templateObject_1$
|
|
1018
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
1019
|
+
var templateObject_1$e;
|
|
1013
1020
|
|
|
1014
1021
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1015
1022
|
|
|
1016
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1023
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
1017
1024
|
var contrast = _a.contrast;
|
|
1018
1025
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1019
1026
|
});
|
|
1020
|
-
var templateObject_1$
|
|
1027
|
+
var templateObject_1$d;
|
|
1021
1028
|
|
|
1022
1029
|
var Notification = function (props) {
|
|
1023
1030
|
if (!props.isVisible)
|
|
@@ -1025,20 +1032,40 @@ var Notification = function (props) {
|
|
|
1025
1032
|
return (jsxRuntime.jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }, void 0), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.button && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Button, __assign({}, props.button, { size: "small" }), void 0)] }, void 0))] }), void 0));
|
|
1026
1033
|
};
|
|
1027
1034
|
|
|
1035
|
+
var Container$5 = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
1036
|
+
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1037
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1038
|
+
|
|
1039
|
+
var NumberField = function (props) {
|
|
1040
|
+
var onChange = function (value) {
|
|
1041
|
+
if (props.onChange)
|
|
1042
|
+
props.onChange(props.name, value);
|
|
1043
|
+
};
|
|
1044
|
+
var onBlur = function () {
|
|
1045
|
+
if (props.onBlur)
|
|
1046
|
+
props.onBlur(props.name);
|
|
1047
|
+
};
|
|
1048
|
+
return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1049
|
+
};
|
|
1050
|
+
|
|
1028
1051
|
var Container$4 = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
1029
1052
|
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);
|
|
1030
1053
|
var templateObject_1$b, templateObject_2$9;
|
|
1031
1054
|
|
|
1032
|
-
var
|
|
1055
|
+
var PasswordInputField = function (props) {
|
|
1033
1056
|
var onChange = function (value) {
|
|
1034
1057
|
if (props.onChange)
|
|
1035
1058
|
props.onChange(props.name, value);
|
|
1036
1059
|
};
|
|
1060
|
+
var onKeyPressEnter = function () {
|
|
1061
|
+
if (props.onKeyPressEnter)
|
|
1062
|
+
props.onKeyPressEnter();
|
|
1063
|
+
};
|
|
1037
1064
|
var onBlur = function () {
|
|
1038
1065
|
if (props.onBlur)
|
|
1039
1066
|
props.onBlur(props.name);
|
|
1040
1067
|
};
|
|
1041
|
-
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(
|
|
1068
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Input.Password, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPressEnter: onKeyPressEnter, onBlur: onBlur }, void 0)] }, void 0));
|
|
1042
1069
|
};
|
|
1043
1070
|
|
|
1044
1071
|
var generateRandomString = function (length) {
|
|
@@ -1294,6 +1321,7 @@ var Form = function (props) {
|
|
|
1294
1321
|
}
|
|
1295
1322
|
};
|
|
1296
1323
|
var onSubmit = function () {
|
|
1324
|
+
console.log("submit");
|
|
1297
1325
|
var isValid = true;
|
|
1298
1326
|
var feedback = {};
|
|
1299
1327
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1319,7 +1347,7 @@ var Form = function (props) {
|
|
|
1319
1347
|
jsxRuntime.jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1320
1348
|
case "password":
|
|
1321
1349
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1322
|
-
jsxRuntime.jsx(
|
|
1350
|
+
jsxRuntime.jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPressEnter: field.submitOnEnter && onSubmit }), void 0)));
|
|
1323
1351
|
case "radio":
|
|
1324
1352
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1325
1353
|
jsxRuntime.jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1437,6 +1465,7 @@ exports.Notification = Notification;
|
|
|
1437
1465
|
exports.Number = Number;
|
|
1438
1466
|
exports.NumberField = NumberField;
|
|
1439
1467
|
exports.Paragraph = Paragraph;
|
|
1468
|
+
exports.PasswordInputField = PasswordInputField;
|
|
1440
1469
|
exports.Popup = Popup;
|
|
1441
1470
|
exports.ProgressBar = ProgressBar;
|
|
1442
1471
|
exports.Radio = Radio;
|