@typeolymp/ui-components 1.2.2 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/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/molecules/InputField/index.d.ts +0 -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 +97 -72
- package/build/index.es.js.map +1 -1
- package/build/index.js +97 -71
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -188,7 +188,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
188
188
|
return cooked;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
var StyledButton = styled.button(templateObject_1$
|
|
191
|
+
var StyledButton = styled.button(templateObject_1$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) {
|
|
192
192
|
var fluid = _a.fluid;
|
|
193
193
|
return (fluid ? "100%" : "fit-content");
|
|
194
194
|
}, function (_a) {
|
|
@@ -238,7 +238,7 @@ var StyledButton = styled.button(templateObject_1$A || (templateObject_1$A = __m
|
|
|
238
238
|
? theme.button.medium.heightActive
|
|
239
239
|
: theme.button[size].heightActive;
|
|
240
240
|
});
|
|
241
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
241
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$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) {
|
|
242
242
|
var size = _a.size;
|
|
243
243
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
244
244
|
});
|
|
@@ -258,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$6 || (templateObject_3$6
|
|
|
258
258
|
? theme.button.medium.marginTopActive
|
|
259
259
|
: theme.button[size].marginTopActive;
|
|
260
260
|
});
|
|
261
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$B, templateObject_2$j, templateObject_3$6;
|
|
262
262
|
|
|
263
263
|
var Button = function (props) {
|
|
264
264
|
var onClick = function () {
|
|
@@ -275,7 +275,7 @@ var Button = function (props) {
|
|
|
275
275
|
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
276
276
|
};
|
|
277
277
|
|
|
278
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
278
|
+
var StyledCheckbox = styled.div(templateObject_1$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) {
|
|
279
279
|
var checked = _a.checked, disabled = _a.disabled;
|
|
280
280
|
if (disabled)
|
|
281
281
|
return theme.colors.lightGray.darker;
|
|
@@ -296,7 +296,7 @@ var StyledCheckbox = styled.div(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
296
296
|
return theme.colors.green.base;
|
|
297
297
|
return theme.colors.lightGray.darker;
|
|
298
298
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
299
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$A;
|
|
300
300
|
|
|
301
301
|
var Checkbox = function (props) {
|
|
302
302
|
var _a;
|
|
@@ -329,7 +329,7 @@ var Checkbox = function (props) {
|
|
|
329
329
|
return (jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
332
|
+
var Wrapper$9 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
333
333
|
var size = _a.size;
|
|
334
334
|
switch (size) {
|
|
335
335
|
case "small":
|
|
@@ -352,7 +352,7 @@ var Wrapper$9 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTem
|
|
|
352
352
|
return "27px";
|
|
353
353
|
}
|
|
354
354
|
});
|
|
355
|
-
var templateObject_1$
|
|
355
|
+
var templateObject_1$z;
|
|
356
356
|
|
|
357
357
|
var flags = {
|
|
358
358
|
"nl-NL": (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -361,7 +361,7 @@ var flags = {
|
|
|
361
361
|
};
|
|
362
362
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
363
363
|
|
|
364
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
364
|
+
var StyledHeading = styled.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) {
|
|
365
365
|
var type = _a.type;
|
|
366
366
|
return theme.heading[type].fontSize;
|
|
367
367
|
}, function (_a) {
|
|
@@ -385,14 +385,14 @@ var StyledHeading = styled.span(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
385
385
|
var align = _a.align;
|
|
386
386
|
return align;
|
|
387
387
|
});
|
|
388
|
-
var templateObject_1$
|
|
388
|
+
var templateObject_1$y;
|
|
389
389
|
|
|
390
390
|
var Heading = function (props) {
|
|
391
391
|
var element = !!props.as ? props.as : props.type;
|
|
392
392
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
393
393
|
};
|
|
394
394
|
|
|
395
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
395
|
+
var Wrapper$8 = styled.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) {
|
|
396
396
|
var size = _a.size;
|
|
397
397
|
return theme.icon[size] || theme.icon.medium;
|
|
398
398
|
}, function (_a) {
|
|
@@ -422,7 +422,7 @@ var Wrapper$8 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTem
|
|
|
422
422
|
return theme.colors.lightGray.light;
|
|
423
423
|
}
|
|
424
424
|
});
|
|
425
|
-
var templateObject_1$
|
|
425
|
+
var templateObject_1$x;
|
|
426
426
|
|
|
427
427
|
var icons = {
|
|
428
428
|
check: (jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -445,7 +445,7 @@ var icons = {
|
|
|
445
445
|
};
|
|
446
446
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
447
447
|
|
|
448
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
448
|
+
var Wrapper$7 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
449
449
|
var size = _a.size;
|
|
450
450
|
switch (size) {
|
|
451
451
|
default:
|
|
@@ -457,7 +457,7 @@ var Wrapper$7 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTem
|
|
|
457
457
|
return "118px";
|
|
458
458
|
}
|
|
459
459
|
});
|
|
460
|
-
var templateObject_1$
|
|
460
|
+
var templateObject_1$w;
|
|
461
461
|
|
|
462
462
|
var illustrations = {
|
|
463
463
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -472,11 +472,11 @@ var illustrations = {
|
|
|
472
472
|
};
|
|
473
473
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
474
474
|
|
|
475
|
-
var PasswordInputWrapper = styled.div(templateObject_1$
|
|
475
|
+
var PasswordInputWrapper = styled.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) {
|
|
476
476
|
var disabled = _a.disabled;
|
|
477
477
|
return (disabled ? "not-allowed" : "pointer");
|
|
478
478
|
});
|
|
479
|
-
var StyledInput = styled.input(templateObject_2$
|
|
479
|
+
var StyledInput = styled.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) {
|
|
480
480
|
var disabled = _a.disabled;
|
|
481
481
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
482
482
|
}, function (_a) {
|
|
@@ -489,7 +489,7 @@ var StyledInput = styled.input(templateObject_2$h || (templateObject_2$h = __mak
|
|
|
489
489
|
var disabled = _a.disabled;
|
|
490
490
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
491
491
|
}, 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));
|
|
492
|
-
var templateObject_1$
|
|
492
|
+
var templateObject_1$v, templateObject_2$i;
|
|
493
493
|
|
|
494
494
|
var PasswordInput = function (props) {
|
|
495
495
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -506,7 +506,11 @@ var PasswordInput = function (props) {
|
|
|
506
506
|
props.onChange(value_1);
|
|
507
507
|
}
|
|
508
508
|
};
|
|
509
|
-
|
|
509
|
+
var onKeyPress = function (e) {
|
|
510
|
+
if (props.onKeyPress)
|
|
511
|
+
props.onKeyPress(e);
|
|
512
|
+
};
|
|
513
|
+
return (jsxs(PasswordInputWrapper, __assign({ disabled: props.disabled }, { children: [jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
|
|
510
514
|
};
|
|
511
515
|
|
|
512
516
|
var Input = function (props) {
|
|
@@ -525,7 +529,7 @@ Input.Password = PasswordInput;
|
|
|
525
529
|
|
|
526
530
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
527
531
|
|
|
528
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
532
|
+
var Wrapper$6 = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
529
533
|
var size = _a.size;
|
|
530
534
|
switch (size) {
|
|
531
535
|
default:
|
|
@@ -535,7 +539,7 @@ var Wrapper$6 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTem
|
|
|
535
539
|
return "116px";
|
|
536
540
|
}
|
|
537
541
|
});
|
|
538
|
-
var templateObject_1$
|
|
542
|
+
var templateObject_1$u;
|
|
539
543
|
|
|
540
544
|
var medals = {
|
|
541
545
|
small: {
|
|
@@ -551,11 +555,11 @@ var medals = {
|
|
|
551
555
|
};
|
|
552
556
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
553
557
|
|
|
554
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
558
|
+
var Wrapper$5 = styled.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) {
|
|
555
559
|
var disabled = _a.disabled;
|
|
556
560
|
return (disabled ? "49.5px" : "");
|
|
557
561
|
});
|
|
558
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
562
|
+
var StyledInputNumber = styled.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) {
|
|
559
563
|
var disabled = _a.disabled;
|
|
560
564
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
561
565
|
}, function (_a) {
|
|
@@ -568,7 +572,7 @@ var StyledInputNumber = styled.input(templateObject_2$g || (templateObject_2$g =
|
|
|
568
572
|
var disabled = _a.disabled;
|
|
569
573
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
570
574
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
571
|
-
var templateObject_1$
|
|
575
|
+
var templateObject_1$t, templateObject_2$h;
|
|
572
576
|
|
|
573
577
|
var Number = function (props) {
|
|
574
578
|
var ref = useRef(null);
|
|
@@ -610,7 +614,7 @@ var Number = function (props) {
|
|
|
610
614
|
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
611
615
|
};
|
|
612
616
|
|
|
613
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
617
|
+
var StyledParagraph = styled.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) {
|
|
614
618
|
var size = _a.size;
|
|
615
619
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
616
620
|
}, function (_a) {
|
|
@@ -642,11 +646,11 @@ var StyledParagraph = styled.p(templateObject_1$r || (templateObject_1$r = __mak
|
|
|
642
646
|
var align = _a.align;
|
|
643
647
|
return align;
|
|
644
648
|
});
|
|
645
|
-
var templateObject_1$
|
|
649
|
+
var templateObject_1$s;
|
|
646
650
|
|
|
647
651
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
648
652
|
|
|
649
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
653
|
+
var StyledRadio = styled.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) {
|
|
650
654
|
var checked = _a.checked, disabled = _a.disabled;
|
|
651
655
|
if (disabled)
|
|
652
656
|
return theme.colors.lightGray.darker;
|
|
@@ -674,7 +678,7 @@ var StyledRadio = styled.div(templateObject_1$q || (templateObject_1$q = __makeT
|
|
|
674
678
|
return theme.colors.green.base;
|
|
675
679
|
return "";
|
|
676
680
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
677
|
-
var templateObject_1$
|
|
681
|
+
var templateObject_1$r;
|
|
678
682
|
|
|
679
683
|
var Radio = function (props) {
|
|
680
684
|
var _a;
|
|
@@ -703,11 +707,11 @@ var Radio = function (props) {
|
|
|
703
707
|
return (jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
704
708
|
};
|
|
705
709
|
|
|
706
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
710
|
+
var Wrapper$4 = styled.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) {
|
|
707
711
|
var disabled = _a.disabled;
|
|
708
712
|
return (disabled ? "not-allowed" : "pointer");
|
|
709
713
|
});
|
|
710
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
714
|
+
var StyledSelect = styled.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) {
|
|
711
715
|
var disabled = _a.disabled;
|
|
712
716
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
713
717
|
}, function (_a) {
|
|
@@ -720,7 +724,7 @@ var StyledSelect = styled.select(templateObject_2$f || (templateObject_2$f = __m
|
|
|
720
724
|
var isChanged = _a.isChanged;
|
|
721
725
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
722
726
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
723
|
-
var templateObject_1$
|
|
727
|
+
var templateObject_1$q, templateObject_2$g;
|
|
724
728
|
|
|
725
729
|
var Select = function (props) {
|
|
726
730
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -737,18 +741,18 @@ var Select = function (props) {
|
|
|
737
741
|
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
738
742
|
};
|
|
739
743
|
|
|
740
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
744
|
+
var StyledSpacer = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
741
745
|
var horizontal = _a.horizontal;
|
|
742
746
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
743
747
|
}, function (_a) {
|
|
744
748
|
var vertical = _a.vertical;
|
|
745
749
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
746
750
|
});
|
|
747
|
-
var templateObject_1$
|
|
751
|
+
var templateObject_1$p;
|
|
748
752
|
|
|
749
753
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
750
754
|
|
|
751
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
755
|
+
var StyledSubheading = styled.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) {
|
|
752
756
|
var size = _a.size;
|
|
753
757
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
754
758
|
}, function (_a) {
|
|
@@ -776,11 +780,11 @@ var StyledSubheading = styled.p(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
776
780
|
return theme.colors.darkGray.dark;
|
|
777
781
|
}
|
|
778
782
|
});
|
|
779
|
-
var templateObject_1$
|
|
783
|
+
var templateObject_1$o;
|
|
780
784
|
|
|
781
785
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
782
786
|
|
|
783
|
-
var Container$
|
|
787
|
+
var Container$9 = styled.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) {
|
|
784
788
|
var disabled = _a.disabled;
|
|
785
789
|
return (disabled ? "not-allowed" : "pointer");
|
|
786
790
|
}, function (_a) {
|
|
@@ -798,7 +802,7 @@ var Container$8 = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
|
|
|
798
802
|
var disabled = _a.disabled;
|
|
799
803
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
800
804
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
801
|
-
var templateObject_1$
|
|
805
|
+
var templateObject_1$n;
|
|
802
806
|
|
|
803
807
|
var Toggle = function (props) {
|
|
804
808
|
var _a;
|
|
@@ -826,10 +830,10 @@ var Toggle = function (props) {
|
|
|
826
830
|
props.onChange(newValue);
|
|
827
831
|
}
|
|
828
832
|
};
|
|
829
|
-
return (jsx(Container$
|
|
833
|
+
return (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: jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
830
834
|
};
|
|
831
835
|
|
|
832
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
836
|
+
var Wrapper$3 = styled.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) {
|
|
833
837
|
var level = _a.level;
|
|
834
838
|
switch (level) {
|
|
835
839
|
case 1:
|
|
@@ -840,7 +844,7 @@ var Wrapper$3 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTem
|
|
|
840
844
|
return "70px";
|
|
841
845
|
}
|
|
842
846
|
});
|
|
843
|
-
var templateObject_1$
|
|
847
|
+
var templateObject_1$m;
|
|
844
848
|
|
|
845
849
|
var trophies = {
|
|
846
850
|
1: {
|
|
@@ -876,7 +880,7 @@ var trophies = {
|
|
|
876
880
|
};
|
|
877
881
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
878
882
|
|
|
879
|
-
var Container$
|
|
883
|
+
var Container$8 = styled.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) {
|
|
880
884
|
var type = _a.type;
|
|
881
885
|
switch (type) {
|
|
882
886
|
case "success":
|
|
@@ -893,11 +897,11 @@ var Container$7 = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
893
897
|
return theme.colors.red.base;
|
|
894
898
|
}
|
|
895
899
|
});
|
|
896
|
-
var templateObject_1$
|
|
900
|
+
var templateObject_1$l;
|
|
897
901
|
|
|
898
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
902
|
+
var Alert = function (props) { return (jsxs(Container$8, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
899
903
|
|
|
900
|
-
var StyledCard = styled.div(templateObject_1$
|
|
904
|
+
var StyledCard = styled.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) {
|
|
901
905
|
var ellipse = _a.ellipse;
|
|
902
906
|
return ellipse
|
|
903
907
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -906,23 +910,23 @@ var StyledCard = styled.div(templateObject_1$j || (templateObject_1$j = __makeTe
|
|
|
906
910
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
907
911
|
: "";
|
|
908
912
|
});
|
|
909
|
-
var Ellipse = styled.div(templateObject_2$
|
|
913
|
+
var Ellipse = styled.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) {
|
|
910
914
|
var color = _a.color;
|
|
911
915
|
return color ? theme.colors[color].light : "";
|
|
912
916
|
});
|
|
913
917
|
var Content = styled.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"])));
|
|
914
|
-
var templateObject_1$
|
|
918
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$5;
|
|
915
919
|
|
|
916
920
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
917
921
|
|
|
918
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
919
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
922
|
+
var Fieldset$1 = styled.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"])));
|
|
923
|
+
var CheckboxContainer = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
920
924
|
var CheckboxWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
921
|
-
var Label$
|
|
925
|
+
var Label$6 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
922
926
|
var weight = _a.weight;
|
|
923
927
|
return weight || 500;
|
|
924
928
|
}, theme.colors.darkGray.base);
|
|
925
|
-
var templateObject_1$
|
|
929
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
926
930
|
|
|
927
931
|
var Checkboxes = function (props) {
|
|
928
932
|
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -939,15 +943,15 @@ var Checkboxes = function (props) {
|
|
|
939
943
|
if (props.onBlur)
|
|
940
944
|
props.onBlur(props.name);
|
|
941
945
|
};
|
|
942
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
946
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$6, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
943
947
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
944
|
-
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$
|
|
948
|
+
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$6, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
945
949
|
}) }, void 0)] }, void 0));
|
|
946
950
|
};
|
|
947
951
|
|
|
948
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
949
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
950
|
-
var templateObject_1$
|
|
952
|
+
var StyledIconButton = styled(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"])));
|
|
953
|
+
var GhostIconButton = styled(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"])));
|
|
954
|
+
var templateObject_1$i, templateObject_2$d;
|
|
951
955
|
|
|
952
956
|
var IconButton = function (props) {
|
|
953
957
|
if (props.color === "white")
|
|
@@ -955,9 +959,9 @@ var IconButton = function (props) {
|
|
|
955
959
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
956
960
|
};
|
|
957
961
|
|
|
958
|
-
var Container$
|
|
959
|
-
var Label$
|
|
960
|
-
var templateObject_1$
|
|
962
|
+
var Container$7 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
963
|
+
var Label$5 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
964
|
+
var templateObject_1$h, templateObject_2$c;
|
|
961
965
|
|
|
962
966
|
var InputField = function (props) {
|
|
963
967
|
var onChange = function (value) {
|
|
@@ -968,19 +972,18 @@ var InputField = function (props) {
|
|
|
968
972
|
if (props.onBlur)
|
|
969
973
|
props.onBlur(props.name);
|
|
970
974
|
};
|
|
971
|
-
|
|
972
|
-
return (jsxs(Container$6, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), 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));
|
|
975
|
+
return (jsxs(Container$7, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
973
976
|
};
|
|
974
977
|
|
|
975
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
978
|
+
var Wrapper$2 = styled.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) {
|
|
976
979
|
var chevron = _a.chevron;
|
|
977
980
|
return (chevron === "left" ? "4px" : "");
|
|
978
981
|
}, function (_a) {
|
|
979
982
|
var chevron = _a.chevron;
|
|
980
983
|
return (chevron === "right" ? "4px" : "");
|
|
981
984
|
});
|
|
982
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
983
|
-
var templateObject_1$
|
|
985
|
+
var StyledLink = styled(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);
|
|
986
|
+
var templateObject_1$g, templateObject_2$b;
|
|
984
987
|
|
|
985
988
|
var Link = function (props) {
|
|
986
989
|
var onClick = function (e) {
|
|
@@ -992,24 +995,24 @@ var Link = function (props) {
|
|
|
992
995
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
993
996
|
};
|
|
994
997
|
|
|
995
|
-
var Container$
|
|
998
|
+
var Container$6 = styled.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) {
|
|
996
999
|
var text = _a.text;
|
|
997
1000
|
return (text ? "20px" : "");
|
|
998
1001
|
});
|
|
999
|
-
var templateObject_1$
|
|
1002
|
+
var templateObject_1$f;
|
|
1000
1003
|
|
|
1001
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1004
|
+
var Loading = function (props) { return (jsxs(Container$6, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1002
1005
|
|
|
1003
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1004
|
-
var templateObject_1$
|
|
1006
|
+
var Wrapper$1 = styled.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"])));
|
|
1007
|
+
var templateObject_1$e;
|
|
1005
1008
|
|
|
1006
1009
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1007
1010
|
|
|
1008
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1011
|
+
var NotificationContainer = styled.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) {
|
|
1009
1012
|
var contrast = _a.contrast;
|
|
1010
1013
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1011
1014
|
});
|
|
1012
|
-
var templateObject_1$
|
|
1015
|
+
var templateObject_1$d;
|
|
1013
1016
|
|
|
1014
1017
|
var Notification = function (props) {
|
|
1015
1018
|
if (!props.isVisible)
|
|
@@ -1017,20 +1020,41 @@ var Notification = function (props) {
|
|
|
1017
1020
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.button && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Button, __assign({}, props.button, { size: "small" }), void 0)] }, void 0))] }), void 0));
|
|
1018
1021
|
};
|
|
1019
1022
|
|
|
1023
|
+
var Container$5 = styled.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"])));
|
|
1024
|
+
var Label$4 = styled(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);
|
|
1025
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1026
|
+
|
|
1027
|
+
var NumberField = function (props) {
|
|
1028
|
+
var onChange = function (value) {
|
|
1029
|
+
if (props.onChange)
|
|
1030
|
+
props.onChange(props.name, value);
|
|
1031
|
+
};
|
|
1032
|
+
var onBlur = function () {
|
|
1033
|
+
if (props.onBlur)
|
|
1034
|
+
props.onBlur(props.name);
|
|
1035
|
+
};
|
|
1036
|
+
return (jsxs(Container$5, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1037
|
+
};
|
|
1038
|
+
|
|
1020
1039
|
var Container$4 = styled.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"])));
|
|
1021
1040
|
var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1022
1041
|
var templateObject_1$b, templateObject_2$9;
|
|
1023
1042
|
|
|
1024
|
-
var
|
|
1043
|
+
var PasswordInputField = function (props) {
|
|
1025
1044
|
var onChange = function (value) {
|
|
1026
1045
|
if (props.onChange)
|
|
1027
1046
|
props.onChange(props.name, value);
|
|
1028
1047
|
};
|
|
1048
|
+
var onKeyPress = function (e) {
|
|
1049
|
+
if (e.key === "Enter" && props.onKeyPress) {
|
|
1050
|
+
props.onKeyPress(e);
|
|
1051
|
+
}
|
|
1052
|
+
};
|
|
1029
1053
|
var onBlur = function () {
|
|
1030
1054
|
if (props.onBlur)
|
|
1031
1055
|
props.onBlur(props.name);
|
|
1032
1056
|
};
|
|
1033
|
-
return (jsxs(Container$4, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(
|
|
1057
|
+
return (jsxs(Container$4, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Password, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }, void 0)] }, void 0));
|
|
1034
1058
|
};
|
|
1035
1059
|
|
|
1036
1060
|
var generateRandomString = function (length) {
|
|
@@ -1286,6 +1310,7 @@ var Form = function (props) {
|
|
|
1286
1310
|
}
|
|
1287
1311
|
};
|
|
1288
1312
|
var onSubmit = function () {
|
|
1313
|
+
console.log("submit");
|
|
1289
1314
|
var isValid = true;
|
|
1290
1315
|
var feedback = {};
|
|
1291
1316
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1311,7 +1336,7 @@ var Form = function (props) {
|
|
|
1311
1336
|
jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1312
1337
|
case "password":
|
|
1313
1338
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1314
|
-
jsx(
|
|
1339
|
+
jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPress: field.submitOnEnter && onSubmit }), void 0)));
|
|
1315
1340
|
case "radio":
|
|
1316
1341
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1317
1342
|
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1405,5 +1430,5 @@ var Modal = function (props) {
|
|
|
1405
1430
|
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1406
1431
|
};
|
|
1407
1432
|
|
|
1408
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1433
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1409
1434
|
//# sourceMappingURL=index.es.js.map
|