@typeolymp/ui-components 1.2.2 → 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/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 +98 -72
- package/build/index.es.js.map +1 -1
- package/build/index.js +98 -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,13 @@ var PasswordInput = function (props) {
|
|
|
506
506
|
props.onChange(value_1);
|
|
507
507
|
}
|
|
508
508
|
};
|
|
509
|
-
|
|
509
|
+
var onKeyPressEnter = function () {
|
|
510
|
+
if (props.onKeyPressEnter)
|
|
511
|
+
props.onKeyPressEnter();
|
|
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: function (e) {
|
|
514
|
+
return e.key === "Enter" ? onKeyPressEnter() : null;
|
|
515
|
+
} }), void 0)] }), void 0));
|
|
510
516
|
};
|
|
511
517
|
|
|
512
518
|
var Input = function (props) {
|
|
@@ -525,7 +531,7 @@ Input.Password = PasswordInput;
|
|
|
525
531
|
|
|
526
532
|
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
533
|
|
|
528
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
534
|
+
var Wrapper$6 = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
529
535
|
var size = _a.size;
|
|
530
536
|
switch (size) {
|
|
531
537
|
default:
|
|
@@ -535,7 +541,7 @@ var Wrapper$6 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTem
|
|
|
535
541
|
return "116px";
|
|
536
542
|
}
|
|
537
543
|
});
|
|
538
|
-
var templateObject_1$
|
|
544
|
+
var templateObject_1$u;
|
|
539
545
|
|
|
540
546
|
var medals = {
|
|
541
547
|
small: {
|
|
@@ -551,11 +557,11 @@ var medals = {
|
|
|
551
557
|
};
|
|
552
558
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
553
559
|
|
|
554
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
560
|
+
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
561
|
var disabled = _a.disabled;
|
|
556
562
|
return (disabled ? "49.5px" : "");
|
|
557
563
|
});
|
|
558
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
564
|
+
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
565
|
var disabled = _a.disabled;
|
|
560
566
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
561
567
|
}, function (_a) {
|
|
@@ -568,7 +574,7 @@ var StyledInputNumber = styled.input(templateObject_2$g || (templateObject_2$g =
|
|
|
568
574
|
var disabled = _a.disabled;
|
|
569
575
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
570
576
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
571
|
-
var templateObject_1$
|
|
577
|
+
var templateObject_1$t, templateObject_2$h;
|
|
572
578
|
|
|
573
579
|
var Number = function (props) {
|
|
574
580
|
var ref = useRef(null);
|
|
@@ -610,7 +616,7 @@ var Number = function (props) {
|
|
|
610
616
|
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
617
|
};
|
|
612
618
|
|
|
613
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
619
|
+
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
620
|
var size = _a.size;
|
|
615
621
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
616
622
|
}, function (_a) {
|
|
@@ -642,11 +648,11 @@ var StyledParagraph = styled.p(templateObject_1$r || (templateObject_1$r = __mak
|
|
|
642
648
|
var align = _a.align;
|
|
643
649
|
return align;
|
|
644
650
|
});
|
|
645
|
-
var templateObject_1$
|
|
651
|
+
var templateObject_1$s;
|
|
646
652
|
|
|
647
653
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
648
654
|
|
|
649
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
655
|
+
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
656
|
var checked = _a.checked, disabled = _a.disabled;
|
|
651
657
|
if (disabled)
|
|
652
658
|
return theme.colors.lightGray.darker;
|
|
@@ -674,7 +680,7 @@ var StyledRadio = styled.div(templateObject_1$q || (templateObject_1$q = __makeT
|
|
|
674
680
|
return theme.colors.green.base;
|
|
675
681
|
return "";
|
|
676
682
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
677
|
-
var templateObject_1$
|
|
683
|
+
var templateObject_1$r;
|
|
678
684
|
|
|
679
685
|
var Radio = function (props) {
|
|
680
686
|
var _a;
|
|
@@ -703,11 +709,11 @@ var Radio = function (props) {
|
|
|
703
709
|
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
710
|
};
|
|
705
711
|
|
|
706
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
712
|
+
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
713
|
var disabled = _a.disabled;
|
|
708
714
|
return (disabled ? "not-allowed" : "pointer");
|
|
709
715
|
});
|
|
710
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
716
|
+
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
717
|
var disabled = _a.disabled;
|
|
712
718
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
713
719
|
}, function (_a) {
|
|
@@ -720,7 +726,7 @@ var StyledSelect = styled.select(templateObject_2$f || (templateObject_2$f = __m
|
|
|
720
726
|
var isChanged = _a.isChanged;
|
|
721
727
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
722
728
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
723
|
-
var templateObject_1$
|
|
729
|
+
var templateObject_1$q, templateObject_2$g;
|
|
724
730
|
|
|
725
731
|
var Select = function (props) {
|
|
726
732
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -737,18 +743,18 @@ var Select = function (props) {
|
|
|
737
743
|
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
744
|
};
|
|
739
745
|
|
|
740
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
746
|
+
var StyledSpacer = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
741
747
|
var horizontal = _a.horizontal;
|
|
742
748
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
743
749
|
}, function (_a) {
|
|
744
750
|
var vertical = _a.vertical;
|
|
745
751
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
746
752
|
});
|
|
747
|
-
var templateObject_1$
|
|
753
|
+
var templateObject_1$p;
|
|
748
754
|
|
|
749
755
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
750
756
|
|
|
751
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
757
|
+
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
758
|
var size = _a.size;
|
|
753
759
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
754
760
|
}, function (_a) {
|
|
@@ -776,11 +782,11 @@ var StyledSubheading = styled.p(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
776
782
|
return theme.colors.darkGray.dark;
|
|
777
783
|
}
|
|
778
784
|
});
|
|
779
|
-
var templateObject_1$
|
|
785
|
+
var templateObject_1$o;
|
|
780
786
|
|
|
781
787
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
782
788
|
|
|
783
|
-
var Container$
|
|
789
|
+
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
790
|
var disabled = _a.disabled;
|
|
785
791
|
return (disabled ? "not-allowed" : "pointer");
|
|
786
792
|
}, function (_a) {
|
|
@@ -798,7 +804,7 @@ var Container$8 = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
|
|
|
798
804
|
var disabled = _a.disabled;
|
|
799
805
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
800
806
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
801
|
-
var templateObject_1$
|
|
807
|
+
var templateObject_1$n;
|
|
802
808
|
|
|
803
809
|
var Toggle = function (props) {
|
|
804
810
|
var _a;
|
|
@@ -826,10 +832,10 @@ var Toggle = function (props) {
|
|
|
826
832
|
props.onChange(newValue);
|
|
827
833
|
}
|
|
828
834
|
};
|
|
829
|
-
return (jsx(Container$
|
|
835
|
+
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
836
|
};
|
|
831
837
|
|
|
832
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
838
|
+
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
839
|
var level = _a.level;
|
|
834
840
|
switch (level) {
|
|
835
841
|
case 1:
|
|
@@ -840,7 +846,7 @@ var Wrapper$3 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTem
|
|
|
840
846
|
return "70px";
|
|
841
847
|
}
|
|
842
848
|
});
|
|
843
|
-
var templateObject_1$
|
|
849
|
+
var templateObject_1$m;
|
|
844
850
|
|
|
845
851
|
var trophies = {
|
|
846
852
|
1: {
|
|
@@ -876,7 +882,7 @@ var trophies = {
|
|
|
876
882
|
};
|
|
877
883
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
878
884
|
|
|
879
|
-
var Container$
|
|
885
|
+
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
886
|
var type = _a.type;
|
|
881
887
|
switch (type) {
|
|
882
888
|
case "success":
|
|
@@ -893,11 +899,11 @@ var Container$7 = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
893
899
|
return theme.colors.red.base;
|
|
894
900
|
}
|
|
895
901
|
});
|
|
896
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$l;
|
|
897
903
|
|
|
898
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
904
|
+
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
905
|
|
|
900
|
-
var StyledCard = styled.div(templateObject_1$
|
|
906
|
+
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
907
|
var ellipse = _a.ellipse;
|
|
902
908
|
return ellipse
|
|
903
909
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -906,23 +912,23 @@ var StyledCard = styled.div(templateObject_1$j || (templateObject_1$j = __makeTe
|
|
|
906
912
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
907
913
|
: "";
|
|
908
914
|
});
|
|
909
|
-
var Ellipse = styled.div(templateObject_2$
|
|
915
|
+
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
916
|
var color = _a.color;
|
|
911
917
|
return color ? theme.colors[color].light : "";
|
|
912
918
|
});
|
|
913
919
|
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$
|
|
920
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$5;
|
|
915
921
|
|
|
916
922
|
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
923
|
|
|
918
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
919
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
924
|
+
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"])));
|
|
925
|
+
var CheckboxContainer = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
920
926
|
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$
|
|
927
|
+
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
928
|
var weight = _a.weight;
|
|
923
929
|
return weight || 500;
|
|
924
930
|
}, theme.colors.darkGray.base);
|
|
925
|
-
var templateObject_1$
|
|
931
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
926
932
|
|
|
927
933
|
var Checkboxes = function (props) {
|
|
928
934
|
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -939,15 +945,15 @@ var Checkboxes = function (props) {
|
|
|
939
945
|
if (props.onBlur)
|
|
940
946
|
props.onBlur(props.name);
|
|
941
947
|
};
|
|
942
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
948
|
+
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
949
|
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$
|
|
950
|
+
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
951
|
}) }, void 0)] }, void 0));
|
|
946
952
|
};
|
|
947
953
|
|
|
948
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
949
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
950
|
-
var templateObject_1$
|
|
954
|
+
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"])));
|
|
955
|
+
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"])));
|
|
956
|
+
var templateObject_1$i, templateObject_2$d;
|
|
951
957
|
|
|
952
958
|
var IconButton = function (props) {
|
|
953
959
|
if (props.color === "white")
|
|
@@ -955,9 +961,9 @@ var IconButton = function (props) {
|
|
|
955
961
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
956
962
|
};
|
|
957
963
|
|
|
958
|
-
var Container$
|
|
959
|
-
var Label$
|
|
960
|
-
var templateObject_1$
|
|
964
|
+
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"])));
|
|
965
|
+
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);
|
|
966
|
+
var templateObject_1$h, templateObject_2$c;
|
|
961
967
|
|
|
962
968
|
var InputField = function (props) {
|
|
963
969
|
var onChange = function (value) {
|
|
@@ -968,19 +974,18 @@ var InputField = function (props) {
|
|
|
968
974
|
if (props.onBlur)
|
|
969
975
|
props.onBlur(props.name);
|
|
970
976
|
};
|
|
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));
|
|
977
|
+
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
978
|
};
|
|
974
979
|
|
|
975
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
980
|
+
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
981
|
var chevron = _a.chevron;
|
|
977
982
|
return (chevron === "left" ? "4px" : "");
|
|
978
983
|
}, function (_a) {
|
|
979
984
|
var chevron = _a.chevron;
|
|
980
985
|
return (chevron === "right" ? "4px" : "");
|
|
981
986
|
});
|
|
982
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
983
|
-
var templateObject_1$
|
|
987
|
+
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);
|
|
988
|
+
var templateObject_1$g, templateObject_2$b;
|
|
984
989
|
|
|
985
990
|
var Link = function (props) {
|
|
986
991
|
var onClick = function (e) {
|
|
@@ -992,24 +997,24 @@ var Link = function (props) {
|
|
|
992
997
|
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
998
|
};
|
|
994
999
|
|
|
995
|
-
var Container$
|
|
1000
|
+
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
1001
|
var text = _a.text;
|
|
997
1002
|
return (text ? "20px" : "");
|
|
998
1003
|
});
|
|
999
|
-
var templateObject_1$
|
|
1004
|
+
var templateObject_1$f;
|
|
1000
1005
|
|
|
1001
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1006
|
+
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
1007
|
|
|
1003
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1004
|
-
var templateObject_1$
|
|
1008
|
+
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"])));
|
|
1009
|
+
var templateObject_1$e;
|
|
1005
1010
|
|
|
1006
1011
|
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
1012
|
|
|
1008
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1013
|
+
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
1014
|
var contrast = _a.contrast;
|
|
1010
1015
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1011
1016
|
});
|
|
1012
|
-
var templateObject_1$
|
|
1017
|
+
var templateObject_1$d;
|
|
1013
1018
|
|
|
1014
1019
|
var Notification = function (props) {
|
|
1015
1020
|
if (!props.isVisible)
|
|
@@ -1017,20 +1022,40 @@ var Notification = function (props) {
|
|
|
1017
1022
|
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
1023
|
};
|
|
1019
1024
|
|
|
1025
|
+
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"])));
|
|
1026
|
+
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);
|
|
1027
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1028
|
+
|
|
1029
|
+
var NumberField = function (props) {
|
|
1030
|
+
var onChange = function (value) {
|
|
1031
|
+
if (props.onChange)
|
|
1032
|
+
props.onChange(props.name, value);
|
|
1033
|
+
};
|
|
1034
|
+
var onBlur = function () {
|
|
1035
|
+
if (props.onBlur)
|
|
1036
|
+
props.onBlur(props.name);
|
|
1037
|
+
};
|
|
1038
|
+
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));
|
|
1039
|
+
};
|
|
1040
|
+
|
|
1020
1041
|
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
1042
|
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
1043
|
var templateObject_1$b, templateObject_2$9;
|
|
1023
1044
|
|
|
1024
|
-
var
|
|
1045
|
+
var PasswordInputField = function (props) {
|
|
1025
1046
|
var onChange = function (value) {
|
|
1026
1047
|
if (props.onChange)
|
|
1027
1048
|
props.onChange(props.name, value);
|
|
1028
1049
|
};
|
|
1050
|
+
var onKeyPressEnter = function () {
|
|
1051
|
+
if (props.onKeyPressEnter)
|
|
1052
|
+
props.onKeyPressEnter();
|
|
1053
|
+
};
|
|
1029
1054
|
var onBlur = function () {
|
|
1030
1055
|
if (props.onBlur)
|
|
1031
1056
|
props.onBlur(props.name);
|
|
1032
1057
|
};
|
|
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(
|
|
1058
|
+
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, onKeyPressEnter: onKeyPressEnter, onBlur: onBlur }, void 0)] }, void 0));
|
|
1034
1059
|
};
|
|
1035
1060
|
|
|
1036
1061
|
var generateRandomString = function (length) {
|
|
@@ -1286,6 +1311,7 @@ var Form = function (props) {
|
|
|
1286
1311
|
}
|
|
1287
1312
|
};
|
|
1288
1313
|
var onSubmit = function () {
|
|
1314
|
+
console.log("submit");
|
|
1289
1315
|
var isValid = true;
|
|
1290
1316
|
var feedback = {};
|
|
1291
1317
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1311,7 +1337,7 @@ var Form = function (props) {
|
|
|
1311
1337
|
jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1312
1338
|
case "password":
|
|
1313
1339
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1314
|
-
jsx(
|
|
1340
|
+
jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPressEnter: field.submitOnEnter && onSubmit }), void 0)));
|
|
1315
1341
|
case "radio":
|
|
1316
1342
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1317
1343
|
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1405,5 +1431,5 @@ var Modal = function (props) {
|
|
|
1405
1431
|
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
1432
|
};
|
|
1407
1433
|
|
|
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 };
|
|
1434
|
+
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
1435
|
//# sourceMappingURL=index.es.js.map
|