@typeolymp/ui-components 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Flag/index.d.ts +1 -1
- package/build/components/atoms/Flag/stories.d.ts +1 -1
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/atoms/Input/Password.d.ts +4 -1
- package/build/components/atoms/Input/index.d.ts +2 -1
- package/build/components/atoms/Input/stories.d.ts +1 -1
- package/build/components/atoms/Medal/index.d.ts +1 -1
- package/build/components/atoms/Medal/stories.d.ts +1 -1
- package/build/components/molecules/Card/index.d.ts +1 -1
- package/build/components/molecules/InputField/index.d.ts +0 -1
- package/build/components/molecules/Loading/index.d.ts +1 -1
- package/build/components/molecules/PasswordInputField/index.d.ts +15 -0
- package/build/components/molecules/PasswordInputField/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +7 -2
- package/build/index.d.ts +2 -1
- package/build/index.es.js +100 -72
- package/build/index.es.js.map +1 -1
- package/build/index.js +100 -71
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/build/index.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) {
|
|
@@ -416,11 +416,13 @@ var Wrapper$8 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTem
|
|
|
416
416
|
return theme.colors.orange.base;
|
|
417
417
|
case "red":
|
|
418
418
|
return theme.colors.red.base;
|
|
419
|
+
case "purple":
|
|
420
|
+
return theme.colors.purple.base;
|
|
419
421
|
case "white":
|
|
420
422
|
return theme.colors.lightGray.light;
|
|
421
423
|
}
|
|
422
424
|
});
|
|
423
|
-
var templateObject_1$
|
|
425
|
+
var templateObject_1$x;
|
|
424
426
|
|
|
425
427
|
var icons = {
|
|
426
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)),
|
|
@@ -443,7 +445,7 @@ var icons = {
|
|
|
443
445
|
};
|
|
444
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)); };
|
|
445
447
|
|
|
446
|
-
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) {
|
|
447
449
|
var size = _a.size;
|
|
448
450
|
switch (size) {
|
|
449
451
|
default:
|
|
@@ -455,7 +457,7 @@ var Wrapper$7 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTem
|
|
|
455
457
|
return "118px";
|
|
456
458
|
}
|
|
457
459
|
});
|
|
458
|
-
var templateObject_1$
|
|
460
|
+
var templateObject_1$w;
|
|
459
461
|
|
|
460
462
|
var illustrations = {
|
|
461
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)),
|
|
@@ -470,11 +472,11 @@ var illustrations = {
|
|
|
470
472
|
};
|
|
471
473
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
472
474
|
|
|
473
|
-
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) {
|
|
474
476
|
var disabled = _a.disabled;
|
|
475
477
|
return (disabled ? "not-allowed" : "pointer");
|
|
476
478
|
});
|
|
477
|
-
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) {
|
|
478
480
|
var disabled = _a.disabled;
|
|
479
481
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
480
482
|
}, function (_a) {
|
|
@@ -487,7 +489,7 @@ var StyledInput = styled.input(templateObject_2$h || (templateObject_2$h = __mak
|
|
|
487
489
|
var disabled = _a.disabled;
|
|
488
490
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
489
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));
|
|
490
|
-
var templateObject_1$
|
|
492
|
+
var templateObject_1$v, templateObject_2$i;
|
|
491
493
|
|
|
492
494
|
var PasswordInput = function (props) {
|
|
493
495
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -504,7 +506,13 @@ var PasswordInput = function (props) {
|
|
|
504
506
|
props.onChange(value_1);
|
|
505
507
|
}
|
|
506
508
|
};
|
|
507
|
-
|
|
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));
|
|
508
516
|
};
|
|
509
517
|
|
|
510
518
|
var Input = function (props) {
|
|
@@ -523,7 +531,7 @@ Input.Password = PasswordInput;
|
|
|
523
531
|
|
|
524
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)); };
|
|
525
533
|
|
|
526
|
-
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) {
|
|
527
535
|
var size = _a.size;
|
|
528
536
|
switch (size) {
|
|
529
537
|
default:
|
|
@@ -533,7 +541,7 @@ var Wrapper$6 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTem
|
|
|
533
541
|
return "116px";
|
|
534
542
|
}
|
|
535
543
|
});
|
|
536
|
-
var templateObject_1$
|
|
544
|
+
var templateObject_1$u;
|
|
537
545
|
|
|
538
546
|
var medals = {
|
|
539
547
|
small: {
|
|
@@ -549,11 +557,11 @@ var medals = {
|
|
|
549
557
|
};
|
|
550
558
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
551
559
|
|
|
552
|
-
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) {
|
|
553
561
|
var disabled = _a.disabled;
|
|
554
562
|
return (disabled ? "49.5px" : "");
|
|
555
563
|
});
|
|
556
|
-
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) {
|
|
557
565
|
var disabled = _a.disabled;
|
|
558
566
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
559
567
|
}, function (_a) {
|
|
@@ -566,7 +574,7 @@ var StyledInputNumber = styled.input(templateObject_2$g || (templateObject_2$g =
|
|
|
566
574
|
var disabled = _a.disabled;
|
|
567
575
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
568
576
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
569
|
-
var templateObject_1$
|
|
577
|
+
var templateObject_1$t, templateObject_2$h;
|
|
570
578
|
|
|
571
579
|
var Number = function (props) {
|
|
572
580
|
var ref = useRef(null);
|
|
@@ -608,7 +616,7 @@ var Number = function (props) {
|
|
|
608
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));
|
|
609
617
|
};
|
|
610
618
|
|
|
611
|
-
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) {
|
|
612
620
|
var size = _a.size;
|
|
613
621
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
614
622
|
}, function (_a) {
|
|
@@ -640,11 +648,11 @@ var StyledParagraph = styled.p(templateObject_1$r || (templateObject_1$r = __mak
|
|
|
640
648
|
var align = _a.align;
|
|
641
649
|
return align;
|
|
642
650
|
});
|
|
643
|
-
var templateObject_1$
|
|
651
|
+
var templateObject_1$s;
|
|
644
652
|
|
|
645
653
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
646
654
|
|
|
647
|
-
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) {
|
|
648
656
|
var checked = _a.checked, disabled = _a.disabled;
|
|
649
657
|
if (disabled)
|
|
650
658
|
return theme.colors.lightGray.darker;
|
|
@@ -672,7 +680,7 @@ var StyledRadio = styled.div(templateObject_1$q || (templateObject_1$q = __makeT
|
|
|
672
680
|
return theme.colors.green.base;
|
|
673
681
|
return "";
|
|
674
682
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
675
|
-
var templateObject_1$
|
|
683
|
+
var templateObject_1$r;
|
|
676
684
|
|
|
677
685
|
var Radio = function (props) {
|
|
678
686
|
var _a;
|
|
@@ -701,11 +709,11 @@ var Radio = function (props) {
|
|
|
701
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));
|
|
702
710
|
};
|
|
703
711
|
|
|
704
|
-
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) {
|
|
705
713
|
var disabled = _a.disabled;
|
|
706
714
|
return (disabled ? "not-allowed" : "pointer");
|
|
707
715
|
});
|
|
708
|
-
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) {
|
|
709
717
|
var disabled = _a.disabled;
|
|
710
718
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
711
719
|
}, function (_a) {
|
|
@@ -718,7 +726,7 @@ var StyledSelect = styled.select(templateObject_2$f || (templateObject_2$f = __m
|
|
|
718
726
|
var isChanged = _a.isChanged;
|
|
719
727
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
720
728
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
721
|
-
var templateObject_1$
|
|
729
|
+
var templateObject_1$q, templateObject_2$g;
|
|
722
730
|
|
|
723
731
|
var Select = function (props) {
|
|
724
732
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -735,18 +743,18 @@ var Select = function (props) {
|
|
|
735
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));
|
|
736
744
|
};
|
|
737
745
|
|
|
738
|
-
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) {
|
|
739
747
|
var horizontal = _a.horizontal;
|
|
740
748
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
741
749
|
}, function (_a) {
|
|
742
750
|
var vertical = _a.vertical;
|
|
743
751
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
744
752
|
});
|
|
745
|
-
var templateObject_1$
|
|
753
|
+
var templateObject_1$p;
|
|
746
754
|
|
|
747
755
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
748
756
|
|
|
749
|
-
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) {
|
|
750
758
|
var size = _a.size;
|
|
751
759
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
752
760
|
}, function (_a) {
|
|
@@ -774,11 +782,11 @@ var StyledSubheading = styled.p(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
774
782
|
return theme.colors.darkGray.dark;
|
|
775
783
|
}
|
|
776
784
|
});
|
|
777
|
-
var templateObject_1$
|
|
785
|
+
var templateObject_1$o;
|
|
778
786
|
|
|
779
787
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
780
788
|
|
|
781
|
-
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) {
|
|
782
790
|
var disabled = _a.disabled;
|
|
783
791
|
return (disabled ? "not-allowed" : "pointer");
|
|
784
792
|
}, function (_a) {
|
|
@@ -796,7 +804,7 @@ var Container$8 = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
|
|
|
796
804
|
var disabled = _a.disabled;
|
|
797
805
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
798
806
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
799
|
-
var templateObject_1$
|
|
807
|
+
var templateObject_1$n;
|
|
800
808
|
|
|
801
809
|
var Toggle = function (props) {
|
|
802
810
|
var _a;
|
|
@@ -824,10 +832,10 @@ var Toggle = function (props) {
|
|
|
824
832
|
props.onChange(newValue);
|
|
825
833
|
}
|
|
826
834
|
};
|
|
827
|
-
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));
|
|
828
836
|
};
|
|
829
837
|
|
|
830
|
-
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) {
|
|
831
839
|
var level = _a.level;
|
|
832
840
|
switch (level) {
|
|
833
841
|
case 1:
|
|
@@ -838,7 +846,7 @@ var Wrapper$3 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTem
|
|
|
838
846
|
return "70px";
|
|
839
847
|
}
|
|
840
848
|
});
|
|
841
|
-
var templateObject_1$
|
|
849
|
+
var templateObject_1$m;
|
|
842
850
|
|
|
843
851
|
var trophies = {
|
|
844
852
|
1: {
|
|
@@ -874,7 +882,7 @@ var trophies = {
|
|
|
874
882
|
};
|
|
875
883
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
876
884
|
|
|
877
|
-
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) {
|
|
878
886
|
var type = _a.type;
|
|
879
887
|
switch (type) {
|
|
880
888
|
case "success":
|
|
@@ -891,11 +899,11 @@ var Container$7 = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
891
899
|
return theme.colors.red.base;
|
|
892
900
|
}
|
|
893
901
|
});
|
|
894
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$l;
|
|
895
903
|
|
|
896
|
-
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)); };
|
|
897
905
|
|
|
898
|
-
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) {
|
|
899
907
|
var ellipse = _a.ellipse;
|
|
900
908
|
return ellipse
|
|
901
909
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -904,23 +912,23 @@ var StyledCard = styled.div(templateObject_1$j || (templateObject_1$j = __makeTe
|
|
|
904
912
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
905
913
|
: "";
|
|
906
914
|
});
|
|
907
|
-
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) {
|
|
908
916
|
var color = _a.color;
|
|
909
917
|
return color ? theme.colors[color].light : "";
|
|
910
918
|
});
|
|
911
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"])));
|
|
912
|
-
var templateObject_1$
|
|
920
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$5;
|
|
913
921
|
|
|
914
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)); };
|
|
915
923
|
|
|
916
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
917
|
-
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"])));
|
|
918
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"])));
|
|
919
|
-
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) {
|
|
920
928
|
var weight = _a.weight;
|
|
921
929
|
return weight || 500;
|
|
922
930
|
}, theme.colors.darkGray.base);
|
|
923
|
-
var templateObject_1$
|
|
931
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
924
932
|
|
|
925
933
|
var Checkboxes = function (props) {
|
|
926
934
|
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -937,15 +945,15 @@ var Checkboxes = function (props) {
|
|
|
937
945
|
if (props.onBlur)
|
|
938
946
|
props.onBlur(props.name);
|
|
939
947
|
};
|
|
940
|
-
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) {
|
|
941
949
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
942
|
-
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));
|
|
943
951
|
}) }, void 0)] }, void 0));
|
|
944
952
|
};
|
|
945
953
|
|
|
946
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
947
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
948
|
-
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;
|
|
949
957
|
|
|
950
958
|
var IconButton = function (props) {
|
|
951
959
|
if (props.color === "white")
|
|
@@ -953,9 +961,9 @@ var IconButton = function (props) {
|
|
|
953
961
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
954
962
|
};
|
|
955
963
|
|
|
956
|
-
var Container$
|
|
957
|
-
var Label$
|
|
958
|
-
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;
|
|
959
967
|
|
|
960
968
|
var InputField = function (props) {
|
|
961
969
|
var onChange = function (value) {
|
|
@@ -966,19 +974,18 @@ var InputField = function (props) {
|
|
|
966
974
|
if (props.onBlur)
|
|
967
975
|
props.onBlur(props.name);
|
|
968
976
|
};
|
|
969
|
-
|
|
970
|
-
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));
|
|
971
978
|
};
|
|
972
979
|
|
|
973
|
-
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) {
|
|
974
981
|
var chevron = _a.chevron;
|
|
975
982
|
return (chevron === "left" ? "4px" : "");
|
|
976
983
|
}, function (_a) {
|
|
977
984
|
var chevron = _a.chevron;
|
|
978
985
|
return (chevron === "right" ? "4px" : "");
|
|
979
986
|
});
|
|
980
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
981
|
-
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;
|
|
982
989
|
|
|
983
990
|
var Link = function (props) {
|
|
984
991
|
var onClick = function (e) {
|
|
@@ -990,24 +997,24 @@ var Link = function (props) {
|
|
|
990
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));
|
|
991
998
|
};
|
|
992
999
|
|
|
993
|
-
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) {
|
|
994
1001
|
var text = _a.text;
|
|
995
1002
|
return (text ? "20px" : "");
|
|
996
1003
|
});
|
|
997
|
-
var templateObject_1$
|
|
1004
|
+
var templateObject_1$f;
|
|
998
1005
|
|
|
999
|
-
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)); };
|
|
1000
1007
|
|
|
1001
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1002
|
-
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;
|
|
1003
1010
|
|
|
1004
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)); };
|
|
1005
1012
|
|
|
1006
|
-
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) {
|
|
1007
1014
|
var contrast = _a.contrast;
|
|
1008
1015
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1009
1016
|
});
|
|
1010
|
-
var templateObject_1$
|
|
1017
|
+
var templateObject_1$d;
|
|
1011
1018
|
|
|
1012
1019
|
var Notification = function (props) {
|
|
1013
1020
|
if (!props.isVisible)
|
|
@@ -1015,20 +1022,40 @@ var Notification = function (props) {
|
|
|
1015
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));
|
|
1016
1023
|
};
|
|
1017
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
|
+
|
|
1018
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"])));
|
|
1019
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);
|
|
1020
1043
|
var templateObject_1$b, templateObject_2$9;
|
|
1021
1044
|
|
|
1022
|
-
var
|
|
1045
|
+
var PasswordInputField = function (props) {
|
|
1023
1046
|
var onChange = function (value) {
|
|
1024
1047
|
if (props.onChange)
|
|
1025
1048
|
props.onChange(props.name, value);
|
|
1026
1049
|
};
|
|
1050
|
+
var onKeyPressEnter = function () {
|
|
1051
|
+
if (props.onKeyPressEnter)
|
|
1052
|
+
props.onKeyPressEnter();
|
|
1053
|
+
};
|
|
1027
1054
|
var onBlur = function () {
|
|
1028
1055
|
if (props.onBlur)
|
|
1029
1056
|
props.onBlur(props.name);
|
|
1030
1057
|
};
|
|
1031
|
-
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));
|
|
1032
1059
|
};
|
|
1033
1060
|
|
|
1034
1061
|
var generateRandomString = function (length) {
|
|
@@ -1284,6 +1311,7 @@ var Form = function (props) {
|
|
|
1284
1311
|
}
|
|
1285
1312
|
};
|
|
1286
1313
|
var onSubmit = function () {
|
|
1314
|
+
console.log("submit");
|
|
1287
1315
|
var isValid = true;
|
|
1288
1316
|
var feedback = {};
|
|
1289
1317
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1309,7 +1337,7 @@ var Form = function (props) {
|
|
|
1309
1337
|
jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1310
1338
|
case "password":
|
|
1311
1339
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1312
|
-
jsx(
|
|
1340
|
+
jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPressEnter: field.submitOnEnter && onSubmit }), void 0)));
|
|
1313
1341
|
case "radio":
|
|
1314
1342
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1315
1343
|
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1403,5 +1431,5 @@ var Modal = function (props) {
|
|
|
1403
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));
|
|
1404
1432
|
};
|
|
1405
1433
|
|
|
1406
|
-
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 };
|
|
1407
1435
|
//# sourceMappingURL=index.es.js.map
|