@typeolymp/ui-components 1.11.0 → 1.13.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/Button/index.d.ts +1 -1
- package/build/components/atoms/Illustration/index.d.ts +1 -1
- package/build/components/atoms/Input/Password.d.ts +2 -0
- package/build/components/atoms/Input/styles.d.ts +3 -0
- package/build/components/atoms/Input/translations.d.ts +11 -0
- package/build/components/atoms/Paragraph/index.d.ts +1 -0
- package/build/components/molecules/IconButton/index.d.ts +1 -0
- package/build/components/molecules/PasswordInputField/styles.d.ts +0 -2
- package/build/components/molecules/Tabs/Horizontal/index.d.ts +4 -0
- package/build/components/molecules/Tabs/Horizontal/styles.d.ts +2 -0
- package/build/components/molecules/Tabs/Vertical/index.d.ts +4 -0
- package/build/components/molecules/Tabs/Vertical/styles.d.ts +2 -0
- package/build/components/molecules/Tabs/index.d.ts +12 -0
- package/build/components/molecules/Tabs/stories.d.ts +8 -0
- package/build/components/molecules/Tabs/styles.d.ts +2 -0
- package/build/components/organisms/Modal/index.d.ts +10 -4
- package/build/components/organisms/Modal/styles.d.ts +1 -0
- package/build/components/organisms/Table/index.d.ts +4 -2
- package/build/components/organisms/Table/styles.d.ts +1 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +369 -255
- package/build/index.es.js.map +1 -1
- package/build/index.js +369 -254
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3408,14 +3408,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3408
3408
|
var React$2 = __importStar$2(React__default["default"]);
|
|
3409
3409
|
var react_1 = require$$1;
|
|
3410
3410
|
var helpers_1 = helpers$1;
|
|
3411
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3411
|
+
var beat = react_1.keyframes(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"], ["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"])));
|
|
3412
3412
|
var Loader = /** @class */ (function (_super) {
|
|
3413
3413
|
__extends$1(Loader, _super);
|
|
3414
3414
|
function Loader() {
|
|
3415
3415
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3416
3416
|
_this.style = function (i) {
|
|
3417
3417
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3418
|
-
return react_1.css(templateObject_2$
|
|
3418
|
+
return react_1.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
|
|
3419
3419
|
};
|
|
3420
3420
|
return _this;
|
|
3421
3421
|
}
|
|
@@ -3430,9 +3430,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3430
3430
|
return Loader;
|
|
3431
3431
|
}(React$2.PureComponent));
|
|
3432
3432
|
var _default = BeatLoader.default = Loader;
|
|
3433
|
-
var templateObject_1$
|
|
3433
|
+
var templateObject_1$R, templateObject_2$x;
|
|
3434
3434
|
|
|
3435
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
3435
|
+
var StyledButton = styled__default["default"].button(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
3436
3436
|
var fluid = _a.fluid;
|
|
3437
3437
|
return (fluid ? "100%" : "fit-content");
|
|
3438
3438
|
}, function (_a) {
|
|
@@ -3446,6 +3446,8 @@ var StyledButton = styled__default["default"].button(templateObject_1$O || (temp
|
|
|
3446
3446
|
return theme.colors.blue.base;
|
|
3447
3447
|
case "green":
|
|
3448
3448
|
return theme.colors.green.base;
|
|
3449
|
+
case "red":
|
|
3450
|
+
return theme.colors.red.base;
|
|
3449
3451
|
case "white":
|
|
3450
3452
|
return theme.colors.lightGray.light;
|
|
3451
3453
|
}
|
|
@@ -3457,6 +3459,8 @@ var StyledButton = styled__default["default"].button(templateObject_1$O || (temp
|
|
|
3457
3459
|
return "inset 0 -3px 0 ".concat(theme.colors.blue.dark);
|
|
3458
3460
|
case "green":
|
|
3459
3461
|
return "inset 0 -3px 0 ".concat(theme.colors.green.dark);
|
|
3462
|
+
case "red":
|
|
3463
|
+
return "inset 0 -3px 0 ".concat(theme.colors.red.dark);
|
|
3460
3464
|
case "white":
|
|
3461
3465
|
return "0 3px 0 ".concat(theme.colors.darkGray.light);
|
|
3462
3466
|
}
|
|
@@ -3482,7 +3486,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$O || (temp
|
|
|
3482
3486
|
? theme.button.medium.heightActive
|
|
3483
3487
|
: theme.button[size].heightActive;
|
|
3484
3488
|
});
|
|
3485
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3489
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px 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: 1px 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) {
|
|
3486
3490
|
var size = _a.size;
|
|
3487
3491
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3488
3492
|
});
|
|
@@ -3509,7 +3513,7 @@ var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templa
|
|
|
3509
3513
|
var size = _a.size;
|
|
3510
3514
|
return (size === "small" ? "3px" : "");
|
|
3511
3515
|
});
|
|
3512
|
-
var templateObject_1$
|
|
3516
|
+
var templateObject_1$Q, templateObject_2$w, templateObject_3$b, templateObject_4$8;
|
|
3513
3517
|
|
|
3514
3518
|
var Button = React$3.forwardRef(function (_a, ref) {
|
|
3515
3519
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
@@ -3545,7 +3549,7 @@ var Button = React$3.forwardRef(function (_a, ref) {
|
|
|
3545
3549
|
return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx("span", { children: label }) })));
|
|
3546
3550
|
});
|
|
3547
3551
|
|
|
3548
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
3552
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
3549
3553
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3550
3554
|
if (disabled)
|
|
3551
3555
|
return theme.colors.lightGray.darker;
|
|
@@ -3566,7 +3570,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$N || (templ
|
|
|
3566
3570
|
return theme.colors.green.base;
|
|
3567
3571
|
return theme.colors.lightGray.darker;
|
|
3568
3572
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3569
|
-
var templateObject_1$
|
|
3573
|
+
var templateObject_1$P;
|
|
3570
3574
|
|
|
3571
3575
|
var Checkbox = function (props) {
|
|
3572
3576
|
var _a;
|
|
@@ -3599,7 +3603,7 @@ var Checkbox = function (props) {
|
|
|
3599
3603
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3600
3604
|
};
|
|
3601
3605
|
|
|
3602
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
3606
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3603
3607
|
var size = _a.size;
|
|
3604
3608
|
switch (size) {
|
|
3605
3609
|
case "small":
|
|
@@ -3622,7 +3626,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$M || (templateOb
|
|
|
3622
3626
|
return "27px";
|
|
3623
3627
|
}
|
|
3624
3628
|
});
|
|
3625
|
-
var templateObject_1$
|
|
3629
|
+
var templateObject_1$O;
|
|
3626
3630
|
|
|
3627
3631
|
var parsers = {};
|
|
3628
3632
|
|
|
@@ -3890,7 +3894,7 @@ var flags = {
|
|
|
3890
3894
|
};
|
|
3891
3895
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3892
3896
|
|
|
3893
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
3897
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\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) {
|
|
3894
3898
|
var type = _a.type;
|
|
3895
3899
|
return theme.heading[type].fontSize;
|
|
3896
3900
|
}, function (_a) {
|
|
@@ -3914,14 +3918,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$L || (templ
|
|
|
3914
3918
|
var align = _a.align;
|
|
3915
3919
|
return align;
|
|
3916
3920
|
});
|
|
3917
|
-
var templateObject_1$
|
|
3921
|
+
var templateObject_1$N;
|
|
3918
3922
|
|
|
3919
3923
|
var Heading = function (props) {
|
|
3920
3924
|
var element = !!props.as ? props.as : props.type;
|
|
3921
3925
|
return (jsxRuntime.jsx(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3922
3926
|
};
|
|
3923
3927
|
|
|
3924
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
3928
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
3925
3929
|
var size = _a.size;
|
|
3926
3930
|
return theme.icon[size] || theme.icon.medium;
|
|
3927
3931
|
}, function (_a) {
|
|
@@ -3951,7 +3955,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$K || (templateOb
|
|
|
3951
3955
|
return theme.colors.lightGray.light;
|
|
3952
3956
|
}
|
|
3953
3957
|
});
|
|
3954
|
-
var templateObject_1$
|
|
3958
|
+
var templateObject_1$M;
|
|
3955
3959
|
|
|
3956
3960
|
var icons = {
|
|
3957
3961
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -3981,7 +3985,7 @@ var icons = {
|
|
|
3981
3985
|
};
|
|
3982
3986
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3983
3987
|
|
|
3984
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
3988
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3985
3989
|
var size = _a.size;
|
|
3986
3990
|
switch (size) {
|
|
3987
3991
|
default:
|
|
@@ -3993,7 +3997,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$J || (templateOb
|
|
|
3993
3997
|
return "118px";
|
|
3994
3998
|
}
|
|
3995
3999
|
});
|
|
3996
|
-
var templateObject_1$
|
|
4000
|
+
var templateObject_1$L;
|
|
3997
4001
|
|
|
3998
4002
|
var illustrations = {
|
|
3999
4003
|
keyboard: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -4006,17 +4010,57 @@ var illustrations = {
|
|
|
4006
4010
|
lockOpen: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 294 483" }, { children: [jsxRuntime.jsx("path", { d: "M54.519 188.988a19.62 19.62 0 01-19.62-19.617v-57.75a111.53 111.53 0 0118.77-62.01 111.528 111.528 0 01171.674-16.9 19.638 19.638 0 11-27.773 27.773 72.3 72.3 0 00-122.774 51.137v58.412a19.615 19.615 0 01-20.277 18.955z", fill: "#C4C4C4" }), jsxRuntime.jsx("path", { d: "M269.832 190H23.574C10.68 190 .226 200.453.226 213.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V213.348c0-12.895-10.453-23.348-23.348-23.348z", fill: "#995E00" }), jsxRuntime.jsx("path", { d: "M269.832 169.846H23.574c-12.895 0-23.348 10.453-23.348 23.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V193.194c0-12.895-10.453-23.348-23.348-23.348z", fill: "#FF9D00" }), jsxRuntime.jsx("path", { d: "M196.267 289.42a49.555 49.555 0 00-19.381-39.505 49.566 49.566 0 00-43.177-8.512 48.68 48.68 0 00-21.591 12.213 48.682 48.682 0 00-12.766 21.267 47.796 47.796 0 0012.11 48.459 9.265 9.265 0 012.56 4.155 9.243 9.243 0 01.086 4.876l-14.977 53.304a5.952 5.952 0 001.017 5.154 5.943 5.943 0 004.711 2.335h83.917a5.945 5.945 0 005.727-7.269l-14.536-54.186a10.36 10.36 0 012.641-9.03 47.585 47.585 0 0013.659-33.261z", fill: "#000" })] }))),
|
|
4007
4011
|
idCard: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 424 304" }, { children: [jsxRuntime.jsx("path", { d: "M0 82h424v182c0 22.091-17.909 40-40 40H40c-22.091 0-40-17.909-40-40V82z", fill: "#EDEDED" }), jsxRuntime.jsx("rect", { x: 242, y: 131, width: 149, height: 25, rx: 12.5, fill: "#23292F" }), jsxRuntime.jsx("rect", { x: 242, y: 179, width: 89, height: 25, rx: 12.5, fill: "#23292F" }), jsxRuntime.jsx("rect", { x: 242, y: 227, width: 119, height: 25, rx: 12.5, fill: "#23292F" }), jsxRuntime.jsx("path", { d: "M0 40C0 17.909 17.909 0 40 0h344c22.091 0 40 17.909 40 40v42H0V40z", fill: "#FF9D00" }), jsxRuntime.jsxs("g", __assign$2({ clipPath: "url(#clip0_894_47510)" }, { children: [jsxRuntime.jsx("path", { d: "M121 240c-18.778 0-34 15.457-34 34.523V304h68v-29.477C155 255.457 139.777 240 121 240z", fill: "#3DC478" }), jsxRuntime.jsx("path", { d: "M188.866 166.976a32.398 32.398 0 002.716-7.051c4.423-17.307-6.022-34.922-23.33-39.343a32.199 32.199 0 00-20.01 1.306c-3.93-8.569-11.549-15.357-21.394-17.873-14.776-3.777-29.77 3.288-36.594 16.204a32.826 32.826 0 00-2.518-.762c-17.307-4.423-34.923 6.021-39.346 23.328-2.335 9.138-.523 18.359 4.253 25.682a32.182 32.182 0 00-10.628 16.83c-4.423 17.306 6.022 34.922 23.33 39.343 14.077 3.598 28.358-2.642 35.577-14.409a32.237 32.237 0 0012.811 6.576c10.279 2.627 20.665.009 28.334-6.174 4.279 6.183 10.714 10.916 18.573 12.924 17.307 4.423 34.923-6.022 39.346-23.329 3.245-12.697-1.52-25.555-11.12-33.252z", fill: "#75301C" }), jsxRuntime.jsx("path", { d: "M129.851 228.557h-17.753v14.047a7.367 7.367 0 007.367 7.367h3.019a7.367 7.367 0 007.367-7.367v-14.047z", fill: "#FFB68D" }), jsxRuntime.jsx("path", { d: "M171.736 175.935c-.5 0-.987.052-1.464.134-5.422-22.108-25.36-38.514-49.141-38.514s-43.72 16.406-49.141 38.514a8.622 8.622 0 00-1.465-.134 8.606 8.606 0 100 17.213c.084 0 .164-.011.247-.013 2.501 25.61 24.09 45.625 50.359 45.625 26.268 0 47.858-20.015 50.359-45.625.082.002.163.013.246.013a8.606 8.606 0 008.607-8.607 8.606 8.606 0 00-8.607-8.606z", fill: "#FFB68D" }), jsxRuntime.jsx("path", { d: "M155.414 205.187c0-14.961-14.024-6.878-32.706-6.878-18.681 0-34.946-8.083-34.946 6.878 0 14.962 15.145 27.091 33.826 27.091s33.826-12.129 33.826-27.091z", fill: "#230F0B" }), jsxRuntime.jsx("path", { d: "M121.586 232.276c7.308 0 14.068-1.862 19.598-5.017-2.608-3.569-6.88-6.158-11.87-6.853a20.051 20.051 0 00-6.101.08 9.812 9.812 0 01-3.253 0 20.083 20.083 0 00-6.101-.08c-4.99.695-9.263 3.284-11.87 6.853 5.53 3.156 12.29 5.017 19.597 5.017z", fill: "#F21C40" }), jsxRuntime.jsx("path", { opacity: 0.37, d: "M126.804 188.238a5.217 5.217 0 10-10.434 0c0 2.881 2.336 3.523 5.217 3.523s5.217-.642 5.217-3.523z", fill: "#FFB68D" }), jsxRuntime.jsx("path", { d: "M94.656 157.686c-7.962 0-14.476 6.513-14.476 14.475v6.972c0 7.962 6.514 11.014 14.476 11.014 7.962 0 14.476-6.092 14.476-14.053v-3.933c.001-7.961-6.514-14.475-14.476-14.475z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M94.656 165.801a5.023 5.023 0 00-5.009 5.009v9.245c0 2.754 2.255 5.009 5.01 5.009 2.754 0 5.009-2.255 5.009-5.009v-9.245a5.023 5.023 0 00-5.01-5.009z", fill: "#23292F" }), jsxRuntime.jsx("path", { d: "M89.648 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053zM147.279 157.686c7.963 0 14.476 6.513 14.476 14.475v6.972c0 7.962-6.513 11.014-14.476 11.014-7.962 0-14.475-6.092-14.475-14.053v-3.933c0-7.961 6.513-14.475 14.475-14.475z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M147.28 165.801c2.754 0 5.009 2.253 5.009 5.009v9.245c0 2.754-2.255 5.009-5.009 5.009-2.755 0-5.009-2.255-5.009-5.009v-9.245a5.023 5.023 0 015.009-5.009z", fill: "#23292F" }), jsxRuntime.jsx("path", { d: "M152.288 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M148.11 130.102c-8.331 0-15.781 2.196-20.751 5.648a51.514 51.514 0 00-6.346-.392c-3.856 0-7.521.421-10.842 1.176-4.971-3.288-12.43-5.381-20.772-5.381-14.965 0-27.097 6.728-27.097 15.027s12.132 15.027 27.097 15.027c4.564 0 8.861-.628 12.634-1.734 4.889 2.493 11.588 4.032 18.981 4.032 6.294 0 12.081-1.117 16.681-2.987 3.208.781 6.725 1.213 10.418 1.213 14.965 0 27.097-7.081 27.097-15.816-.001-8.733-12.133-15.813-27.1-15.813z", fill: "#75301C" }), jsxRuntime.jsx("path", { opacity: 0.57, d: "M68.7 184.682l.589-.59a1.146 1.146 0 10-1.62-1.62l-.59.59-.59-.59a1.147 1.147 0 00-1.62 1.62l.59.59-.59.589a1.147 1.147 0 001.62 1.621l.589-.59.59.59a1.146 1.146 0 101.618-1.621l-.587-.589zM176.426 184.682l.589-.59a1.144 1.144 0 10-1.62-1.62l-.589.59-.59-.59a1.146 1.146 0 00-1.62 1.62l.589.59-.589.589a1.146 1.146 0 001.619 1.621l.589-.59.59.59a1.144 1.144 0 001.619 0 1.147 1.147 0 000-1.621l-.587-.589z", fill: "#FFB68D" })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign$2({ id: "clip0_894_47510" }, { children: jsxRuntime.jsx("path", { fill: "#fff", transform: "translate(41 103)", d: "M0 0H160V201H0z" }) })) })] }))),
|
|
4008
4012
|
cookie: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 867.3 871.1" }, { children: [jsxRuntime.jsx("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", fill: "#f49500" }), jsxRuntime.jsx("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", opacity: 0.2, fill: "#010202" }), jsxRuntime.jsx("path", { d: "M597.5 276.4c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5C471.1 7.3 468.5.7 463 .4c-6.3-.3-12.6-.4-19-.4C210.4 0 20.9 189.5 20.9 423.2s189.5 423.2 423.2 423.2 423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1-171.9-74.9-173.1-168.9z", fill: "#f49500" }), jsxRuntime.jsxs("g", __assign$2({ fill: "#9e1827" }, { children: [jsxRuntime.jsx("circle", { cx: 277.7, cy: 259.3, r: 65 }), jsxRuntime.jsx("circle", { cx: 261.5, cy: 584.3, r: 81.2 }), jsxRuntime.jsx("circle", { cx: 624.3, cy: 543.8, r: 76.8 }), jsxRuntime.jsx("circle", { cx: 477, cy: 714.1, r: 32.9 }), jsxRuntime.jsx("circle", { cx: 415.3, cy: 443.9, r: 38.7 }), jsxRuntime.jsx("circle", { cx: 677.3, cy: 74.1, r: 33.1 }), jsxRuntime.jsx("circle", { cx: 838.9, cy: 192.3, r: 28.4 }), jsxRuntime.jsx("circle", { cx: 732.8, cy: 244.1, r: 51.9 })] }))] }))),
|
|
4013
|
+
classroom: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 165.4 116.8" }, { children: [jsxRuntime.jsx("path", { d: "M14.4 109.3c-3.8 0-6.9-3.1-6.9-6.9v-88c0-3.8 3.1-6.9 6.9-6.9H151c3.8 0 6.9 3.1 6.9 6.9v88c0 3.8-3.1 6.9-6.9 6.9H14.4z", fill: "#2d9d60" }), jsxRuntime.jsx("path", { d: "M150.4 15v86.8H15V15h135.4m.6-15H14.4C6.5 0 0 6.5 0 14.4v88c0 8 6.5 14.4 14.4 14.4H151c8 0 14.4-6.5 14.4-14.4v-88C165.4 6.5 159 0 151 0z", fill: "#FF9D00" }), jsxRuntime.jsx("path", { fill: "#c4c4c4", d: "M103.1 90.7H135.39999999999998V101.8H103.1z" }), jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M82 81.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5H82c2.8 0 5 2.2 5 5s-2.2 5-5 5zM69.4 63H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h25.7c2.8 0 5 2.2 5 5s-2.2 5-5 5zM93.3 44.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h49.6c2.8 0 5 2.2 5 5s-2.3 5-5 5z", fill: "#fff" }) })] }))),
|
|
4014
|
+
student: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 160 201" }, { children: [jsxRuntime.jsx("path", { d: "M80 137c-18.8 0-34 15.5-34 34.5V201h68v-29.5c0-19-15.2-34.5-34-34.5z", fill: "#53b476" }), jsxRuntime.jsx("path", { d: "M147.9 64c1.2-2.2 2.1-4.5 2.7-7.1 4.4-17.3-6-34.9-23.3-39.3-6.9-1.8-13.9-1.2-20 1.3-4-8.6-11.6-15.4-21.5-17.9-14.7-3.8-29.7 3.3-36.5 16.2-.8-.3-1.7-.5-2.5-.8-17.3-4.4-34.9 6-39.3 23.3-2.3 9.1-.5 18.4 4.3 25.7-5.2 4.3-9 10-10.8 16.9-4.4 17.3 6 34.9 23.3 39.3 14.1 3.6 28.4-2.6 35.6-14.4 3.6 3 7.9 5.3 12.8 6.6 10.3 2.6 20.7 0 28.3-6.2 4.3 6.2 10.7 10.9 18.6 12.9 17.3 4.4 34.9-6 39.3-23.3 3.3-12.7-1.4-25.5-11-33.2z", fill: "#75301c" }), jsxRuntime.jsx("path", { d: "M88.9 125.6H71.1v14c0 4.1 3.3 7.4 7.4 7.4h3c4.1 0 7.4-3.3 7.4-7.4v-14z", fill: "#f7b58e" }), jsxRuntime.jsx("path", { d: "M130.7 72.9c-.5 0-1 .1-1.5.1-5.4-22.1-25.4-38.5-49.1-38.5C56.3 34.6 36.4 51 31 73.1c-.5-.1-1-.1-1.5-.1-4.8 0-8.6 3.9-8.6 8.6 0 4.8 3.9 8.6 8.6 8.6h.2c2.5 25.6 24.1 45.6 50.4 45.6 26.3 0 47.9-20 50.4-45.6h.2c4.8 0 8.6-3.9 8.6-8.6 0-4.8-3.8-8.7-8.6-8.7z", fill: "#f7b58e" }), jsxRuntime.jsx("path", { d: "M114.4 102.2c0-15-14-6.9-32.7-6.9-18.7 0-34.9-8.1-34.9 6.9s15.1 27.1 33.8 27.1 33.8-12.2 33.8-27.1z", fill: "#220f0c" }), jsxRuntime.jsx("path", { d: "M80.6 129.3c7.3 0 14.1-1.9 19.6-5-2.6-3.6-6.9-6.2-11.9-6.9-2.1-.3-4.2-.2-6.1.1-1.1.2-2.2.2-3.3 0-1.9-.3-4-.4-6.1-.1-5 .7-9.3 3.3-11.9 6.9 5.6 3.1 12.4 5 19.7 5z", fill: "#e62743" }), jsxRuntime.jsx("path", { d: "M85.8 85.2c0-2.9-2.3-5.2-5.2-5.2-2.9 0-5.2 2.3-5.2 5.2s2.3 3.5 5.2 3.5c2.9.1 5.2-.6 5.2-3.5z", opacity: 0.37, fill: "#f7b58e" }), jsxRuntime.jsx("path", { d: "M53.7 54.7c-8 0-14.5 6.5-14.5 14.5v7c0 8 6.5 11 14.5 11s14.5-6.1 14.5-14.1v-3.9c-.1-8-6.6-14.5-14.5-14.5z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M53.7 62.8c-2.8 0-5 2.3-5 5V77c0 2.8 2.3 5 5 5s5-2.3 5-5v-9.2c0-2.7-2.3-5-5-5z", fill: "#23292f" }), jsxRuntime.jsx("path", { d: "M48.6 70.9c1.7 0 3-1.4 3-3 0-1.7-1.4-3-3-3-1.7 0-3 1.4-3 3 0 1.7 1.4 3 3 3zM106.3 54.7c8 0 14.5 6.5 14.5 14.5v7c0 8-6.5 11-14.5 11s-14.5-6.1-14.5-14.1v-3.9c0-8 6.5-14.5 14.5-14.5z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M106.3 62.8c2.8 0 5 2.3 5 5V77c0 2.8-2.3 5-5 5-2.8 0-5-2.3-5-5v-9.2c0-2.7 2.2-5 5-5z", fill: "#23292f" }), jsxRuntime.jsx("path", { d: "M111.3 70.9c1.7 0 3-1.4 3-3 0-1.7-1.4-3-3-3-1.7 0-3 1.4-3 3 0 1.7 1.3 3 3 3z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M107.1 27.1c-8.3 0-15.8 2.2-20.8 5.6-2-.3-4.2-.4-6.3-.4-3.9 0-7.5.4-10.8 1.2-5-3.3-12.4-5.4-20.8-5.4-15 0-27.1 6.7-27.1 15s12.1 15 27.1 15c4.6 0 8.9-.6 12.6-1.7 4.9 2.5 11.6 4 19 4 6.3 0 12.1-1.1 16.7-3 3.2.8 6.7 1.2 10.4 1.2 15 0 27.1-7.1 27.1-15.8 0-8.6-12.1-15.7-27.1-15.7z", fill: "#75301c" }), jsxRuntime.jsx("path", { d: "M27.7 81.7l.6-.6c.4-.4.4-1.2 0-1.6-.4-.4-1.2-.4-1.6 0l-.6.6-.6-.6c-.4-.4-1.2-.4-1.6 0-.4.4-.4 1.2 0 1.6l.6.6-.6.6c-.4.4-.4 1.2 0 1.6.2.2.5.3.8.3.3 0 .6-.1.8-.3l.6-.6.6.6c.2.2.5.3.8.3s.6-.1.8-.3c.4-.4.4-1.2 0-1.6l-.6-.6zM135.4 81.7l.6-.6c.4-.4.4-1.2 0-1.6-.4-.4-1.2-.4-1.6 0l-.6.6-.6-.6c-.4-.4-1.2-.4-1.6 0-.4.4-.4 1.2 0 1.6l.6.6-.6.6c-.4.4-.4 1.2 0 1.6.2.2.5.3.8.3.3 0 .6-.1.8-.3l.6-.6.6.6c.2.2.5.3.8.3.3 0 .6-.1.8-.3.4-.4.4-1.2 0-1.6l-.6-.6z", opacity: 0.57, fill: "#f7b58e" })] }))),
|
|
4009
4015
|
};
|
|
4010
4016
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4011
4017
|
|
|
4012
|
-
var
|
|
4018
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\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 text-transform: ", ";\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 text-transform: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4019
|
+
var size = _a.size;
|
|
4020
|
+
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4021
|
+
}, function (_a) {
|
|
4022
|
+
var weight = _a.weight;
|
|
4023
|
+
switch (weight) {
|
|
4024
|
+
case "regular":
|
|
4025
|
+
return 400;
|
|
4026
|
+
default:
|
|
4027
|
+
case "medium":
|
|
4028
|
+
return 500;
|
|
4029
|
+
}
|
|
4030
|
+
}, function (_a) {
|
|
4031
|
+
var size = _a.size;
|
|
4032
|
+
return size
|
|
4033
|
+
? theme.paragraph[size].lineHeight
|
|
4034
|
+
: theme.paragraph.medium.lineHeight;
|
|
4035
|
+
}, function (_a) {
|
|
4036
|
+
var color = _a.color;
|
|
4037
|
+
switch (color) {
|
|
4038
|
+
case "white":
|
|
4039
|
+
return theme.colors.lightGray.light;
|
|
4040
|
+
default:
|
|
4041
|
+
case "lightGray":
|
|
4042
|
+
return theme.colors.darkGray.light;
|
|
4043
|
+
case "darkGray":
|
|
4044
|
+
return theme.colors.darkGray.dark;
|
|
4045
|
+
}
|
|
4046
|
+
}, function (_a) {
|
|
4047
|
+
var align = _a.align;
|
|
4048
|
+
return align;
|
|
4049
|
+
}, function (_a) {
|
|
4050
|
+
var transform = _a.transform;
|
|
4051
|
+
return transform;
|
|
4052
|
+
});
|
|
4053
|
+
var templateObject_1$K;
|
|
4054
|
+
|
|
4055
|
+
var Container$l = styled__default["default"].div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4056
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
4013
4057
|
var isChanged = _a.isChanged;
|
|
4014
4058
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
4015
4059
|
}, function (_a) {
|
|
4016
4060
|
var disabled = _a.disabled;
|
|
4017
4061
|
return (disabled ? "not-allowed" : "pointer");
|
|
4018
4062
|
});
|
|
4019
|
-
var StyledInput = styled__default["default"].input(
|
|
4063
|
+
var StyledInput = styled__default["default"].input(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4020
4064
|
var disabled = _a.disabled;
|
|
4021
4065
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4022
4066
|
}, function (_a) {
|
|
@@ -4029,15 +4073,103 @@ var StyledInput = styled__default["default"].input(templateObject_2$t || (templa
|
|
|
4029
4073
|
var disabled = _a.disabled;
|
|
4030
4074
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4031
4075
|
}, 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));
|
|
4032
|
-
var
|
|
4076
|
+
var HelperContainer = styled__default["default"].div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
4077
|
+
var fadeIn = styled.keyframes(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
4078
|
+
var Helper = styled__default["default"](StyledParagraph)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject$1(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
4079
|
+
var isOk = _a.isOk;
|
|
4080
|
+
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4081
|
+
}, fadeIn);
|
|
4082
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4083
|
+
|
|
4084
|
+
var expressions = {};
|
|
4085
|
+
|
|
4086
|
+
(function (exports) {
|
|
4087
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4088
|
+
exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
|
|
4089
|
+
var hasNumber = function (input) {
|
|
4090
|
+
var regex = new RegExp(/\d/g);
|
|
4091
|
+
return regex.test(input);
|
|
4092
|
+
};
|
|
4093
|
+
exports.hasNumber = hasNumber;
|
|
4094
|
+
var hasSpecialCharacter = function (input) {
|
|
4095
|
+
var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
|
|
4096
|
+
return regex.test(input);
|
|
4097
|
+
};
|
|
4098
|
+
exports.hasSpecialCharacter = hasSpecialCharacter;
|
|
4099
|
+
var hasCapitalLetter = function (input) {
|
|
4100
|
+
var regex = new RegExp(/[A-Z]/g);
|
|
4101
|
+
return regex.test(input);
|
|
4102
|
+
};
|
|
4103
|
+
exports.hasCapitalLetter = hasCapitalLetter;
|
|
4104
|
+
var isValidEmail = function (email) {
|
|
4105
|
+
var regex = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
|
|
4106
|
+
return regex.test(email);
|
|
4107
|
+
};
|
|
4108
|
+
exports.isValidEmail = isValidEmail;
|
|
4109
|
+
var isValidUsername = function (username) {
|
|
4110
|
+
return username.length > 5 &&
|
|
4111
|
+
username.length <= 15 &&
|
|
4112
|
+
username.indexOf(" ") < 0 &&
|
|
4113
|
+
!(0, exports.isValidEmail)(username);
|
|
4114
|
+
};
|
|
4115
|
+
exports.isValidUsername = isValidUsername;
|
|
4116
|
+
var isStrongPassword = function (password) {
|
|
4117
|
+
return password.length >= 8 &&
|
|
4118
|
+
(0, exports.hasNumber)(password) &&
|
|
4119
|
+
(0, exports.hasSpecialCharacter)(password) &&
|
|
4120
|
+
(0, exports.hasCapitalLetter)(password);
|
|
4121
|
+
};
|
|
4122
|
+
exports.isStrongPassword = isStrongPassword;
|
|
4123
|
+
}(expressions));
|
|
4124
|
+
|
|
4125
|
+
var translations = {
|
|
4126
|
+
"nl-NL": {
|
|
4127
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4128
|
+
number: "Minimaal 1 getal",
|
|
4129
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
4130
|
+
length: "Minimaal 8 karakters",
|
|
4131
|
+
},
|
|
4132
|
+
"nl-BE": {
|
|
4133
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4134
|
+
number: "Minimaal 1 getal",
|
|
4135
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
4136
|
+
length: "Minimaal 8 karakters",
|
|
4137
|
+
},
|
|
4138
|
+
// "en-GB": {
|
|
4139
|
+
// capitalLetter: "At least 1 capital letter",
|
|
4140
|
+
// number: "At least 1 number",
|
|
4141
|
+
// specialCharacter: "At least 1 special character",
|
|
4142
|
+
// length: "At least 8 characters",
|
|
4143
|
+
// },
|
|
4144
|
+
// "fr-FR": {
|
|
4145
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
4146
|
+
// number: "Au moins un chiffre",
|
|
4147
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
4148
|
+
// length: "Au moins 8 caractères",
|
|
4149
|
+
// },
|
|
4150
|
+
// "fr-BE": {
|
|
4151
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
4152
|
+
// number: "Au moins un chiffre",
|
|
4153
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
4154
|
+
// length: "Au moins 8 caractères",
|
|
4155
|
+
// },
|
|
4156
|
+
// "de-DE": {
|
|
4157
|
+
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
4158
|
+
// number: "Mindestens 1 Zahl",
|
|
4159
|
+
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
4160
|
+
// length: "Mindestens 8 Zeichen",
|
|
4161
|
+
// },
|
|
4162
|
+
};
|
|
4033
4163
|
|
|
4034
4164
|
var PasswordInput = function (props) {
|
|
4035
|
-
var _a = React$3.useState(
|
|
4165
|
+
var _a = React$3.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
|
|
4166
|
+
var _b = React$3.useState(false), isVisible = _b[0], setIsVisible = _b[1];
|
|
4036
4167
|
var toggle = function () {
|
|
4037
4168
|
if (!props.disabled)
|
|
4038
4169
|
setIsVisible(!isVisible);
|
|
4039
4170
|
};
|
|
4040
4171
|
var onChange = function (e) {
|
|
4172
|
+
setValue(e.target.value);
|
|
4041
4173
|
if (!props.disabled && !!props.onChange)
|
|
4042
4174
|
props.onChange(e.target.value);
|
|
4043
4175
|
};
|
|
@@ -4045,7 +4177,7 @@ var PasswordInput = function (props) {
|
|
|
4045
4177
|
if (props.onKeyPress)
|
|
4046
4178
|
props.onKeyPress(e);
|
|
4047
4179
|
};
|
|
4048
|
-
return (jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsxRuntime.jsx(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })));
|
|
4180
|
+
return (jsxRuntime.jsxs(Container$l, { children: [jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsxRuntime.jsx(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
4049
4181
|
};
|
|
4050
4182
|
|
|
4051
4183
|
function requiredArgs(required, args) {
|
|
@@ -4209,7 +4341,7 @@ Input.Date = DateInput;
|
|
|
4209
4341
|
|
|
4210
4342
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsxRuntime.jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsxRuntime.jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsxRuntime.jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsxRuntime.jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxRuntime.jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsxRuntime.jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsxRuntime.jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
4211
4343
|
|
|
4212
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
4344
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4213
4345
|
var size = _a.size;
|
|
4214
4346
|
switch (size) {
|
|
4215
4347
|
default:
|
|
@@ -4219,7 +4351,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$H || (templateOb
|
|
|
4219
4351
|
return "116px";
|
|
4220
4352
|
}
|
|
4221
4353
|
});
|
|
4222
|
-
var templateObject_1$
|
|
4354
|
+
var templateObject_1$I;
|
|
4223
4355
|
|
|
4224
4356
|
var medals = {
|
|
4225
4357
|
small: {
|
|
@@ -4235,11 +4367,11 @@ var medals = {
|
|
|
4235
4367
|
};
|
|
4236
4368
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4237
4369
|
|
|
4238
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
4370
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\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) {
|
|
4239
4371
|
var disabled = _a.disabled;
|
|
4240
4372
|
return (disabled ? "49.5px" : "");
|
|
4241
4373
|
});
|
|
4242
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
4374
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4243
4375
|
var disabled = _a.disabled;
|
|
4244
4376
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4245
4377
|
}, function (_a) {
|
|
@@ -4252,7 +4384,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$s || (
|
|
|
4252
4384
|
var disabled = _a.disabled;
|
|
4253
4385
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4254
4386
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4255
|
-
var templateObject_1$
|
|
4387
|
+
var templateObject_1$H, templateObject_2$u;
|
|
4256
4388
|
|
|
4257
4389
|
var Number$1 = function (props) {
|
|
4258
4390
|
var inputRef = React$3.useRef(null);
|
|
@@ -4289,43 +4421,9 @@ var Number$1 = function (props) {
|
|
|
4289
4421
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsxRuntime.jsx(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
4290
4422
|
};
|
|
4291
4423
|
|
|
4292
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\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) {
|
|
4293
|
-
var size = _a.size;
|
|
4294
|
-
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4295
|
-
}, function (_a) {
|
|
4296
|
-
var weight = _a.weight;
|
|
4297
|
-
switch (weight) {
|
|
4298
|
-
case "regular":
|
|
4299
|
-
return 400;
|
|
4300
|
-
default:
|
|
4301
|
-
case "medium":
|
|
4302
|
-
return 500;
|
|
4303
|
-
}
|
|
4304
|
-
}, function (_a) {
|
|
4305
|
-
var size = _a.size;
|
|
4306
|
-
return size
|
|
4307
|
-
? theme.paragraph[size].lineHeight
|
|
4308
|
-
: theme.paragraph.medium.lineHeight;
|
|
4309
|
-
}, function (_a) {
|
|
4310
|
-
var color = _a.color;
|
|
4311
|
-
switch (color) {
|
|
4312
|
-
case "white":
|
|
4313
|
-
return theme.colors.lightGray.light;
|
|
4314
|
-
default:
|
|
4315
|
-
case "lightGray":
|
|
4316
|
-
return theme.colors.darkGray.light;
|
|
4317
|
-
case "darkGray":
|
|
4318
|
-
return theme.colors.darkGray.dark;
|
|
4319
|
-
}
|
|
4320
|
-
}, function (_a) {
|
|
4321
|
-
var align = _a.align;
|
|
4322
|
-
return align;
|
|
4323
|
-
});
|
|
4324
|
-
var templateObject_1$F;
|
|
4325
|
-
|
|
4326
4424
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4327
4425
|
|
|
4328
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
4426
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4329
4427
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4330
4428
|
if (disabled)
|
|
4331
4429
|
return theme.colors.lightGray.darker;
|
|
@@ -4353,7 +4451,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$E || (template
|
|
|
4353
4451
|
return theme.colors.green.base;
|
|
4354
4452
|
return "";
|
|
4355
4453
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4356
|
-
var templateObject_1$
|
|
4454
|
+
var templateObject_1$G;
|
|
4357
4455
|
|
|
4358
4456
|
var Radio = function (props) {
|
|
4359
4457
|
var _a, _b;
|
|
@@ -4385,7 +4483,7 @@ var Radio = function (props) {
|
|
|
4385
4483
|
return (jsxRuntime.jsx(StyledRadio, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
4386
4484
|
};
|
|
4387
4485
|
|
|
4388
|
-
var StyledRange = styled__default["default"].div(templateObject_1$
|
|
4486
|
+
var StyledRange = styled__default["default"].div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
|
|
4389
4487
|
var value = _a.value, disabled = _a.disabled;
|
|
4390
4488
|
return "linear-gradient(90deg,\n ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " 100%\n )");
|
|
4391
4489
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4395,7 +4493,7 @@ var StyledRange = styled__default["default"].div(templateObject_1$D || (template
|
|
|
4395
4493
|
var disabled = _a.disabled;
|
|
4396
4494
|
return disabled ? "not-allowed" : "pointer";
|
|
4397
4495
|
});
|
|
4398
|
-
var templateObject_1$
|
|
4496
|
+
var templateObject_1$F;
|
|
4399
4497
|
|
|
4400
4498
|
var Range = function (props) {
|
|
4401
4499
|
var _a;
|
|
@@ -4424,11 +4522,11 @@ var Range = function (props) {
|
|
|
4424
4522
|
return (jsxRuntime.jsx(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsxRuntime.jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
4425
4523
|
};
|
|
4426
4524
|
|
|
4427
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
4525
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\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) {
|
|
4428
4526
|
var disabled = _a.disabled;
|
|
4429
4527
|
return (disabled ? "not-allowed" : "pointer");
|
|
4430
4528
|
});
|
|
4431
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
4529
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\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) {
|
|
4432
4530
|
var disabled = _a.disabled;
|
|
4433
4531
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4434
4532
|
}, function (_a) {
|
|
@@ -4441,7 +4539,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$r || (temp
|
|
|
4441
4539
|
var isChanged = _a.isChanged;
|
|
4442
4540
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4443
4541
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4444
|
-
var templateObject_1$
|
|
4542
|
+
var templateObject_1$E, templateObject_2$t;
|
|
4445
4543
|
|
|
4446
4544
|
var Select = function (props) {
|
|
4447
4545
|
var _a;
|
|
@@ -4463,18 +4561,18 @@ var Select = function (props) {
|
|
|
4463
4561
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxRuntime.jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
4464
4562
|
};
|
|
4465
4563
|
|
|
4466
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
4564
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4467
4565
|
var horizontal = _a.horizontal;
|
|
4468
4566
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4469
4567
|
}, function (_a) {
|
|
4470
4568
|
var vertical = _a.vertical;
|
|
4471
4569
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4472
4570
|
});
|
|
4473
|
-
var templateObject_1$
|
|
4571
|
+
var templateObject_1$D;
|
|
4474
4572
|
|
|
4475
4573
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign$2({}, props))); };
|
|
4476
4574
|
|
|
4477
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
4575
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\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) {
|
|
4478
4576
|
var size = _a.size;
|
|
4479
4577
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4480
4578
|
}, function (_a) {
|
|
@@ -4502,18 +4600,18 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$A || (templ
|
|
|
4502
4600
|
return theme.colors.darkGray.dark;
|
|
4503
4601
|
}
|
|
4504
4602
|
});
|
|
4505
|
-
var templateObject_1$
|
|
4603
|
+
var templateObject_1$C;
|
|
4506
4604
|
|
|
4507
4605
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4508
4606
|
|
|
4509
|
-
var Container$k = styled__default["default"].div(templateObject_1$
|
|
4510
|
-
var templateObject_1$
|
|
4607
|
+
var Container$k = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
4608
|
+
var templateObject_1$B;
|
|
4511
4609
|
|
|
4512
4610
|
var Tag = function (props) {
|
|
4513
4611
|
return jsxRuntime.jsx(Container$k, { children: props.children });
|
|
4514
4612
|
};
|
|
4515
4613
|
|
|
4516
|
-
var Container$j = styled__default["default"].div(templateObject_1$
|
|
4614
|
+
var Container$j = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4517
4615
|
var disabled = _a.disabled;
|
|
4518
4616
|
return (disabled ? "not-allowed" : "pointer");
|
|
4519
4617
|
}, function (_a) {
|
|
@@ -4531,7 +4629,7 @@ var Container$j = styled__default["default"].div(templateObject_1$y || (template
|
|
|
4531
4629
|
var disabled = _a.disabled;
|
|
4532
4630
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4533
4631
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4534
|
-
var templateObject_1$
|
|
4632
|
+
var templateObject_1$A;
|
|
4535
4633
|
|
|
4536
4634
|
var Toggle = function (props) {
|
|
4537
4635
|
var _a;
|
|
@@ -4562,7 +4660,7 @@ var Toggle = function (props) {
|
|
|
4562
4660
|
return (jsxRuntime.jsx(Container$j, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
4563
4661
|
};
|
|
4564
4662
|
|
|
4565
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
4663
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\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) {
|
|
4566
4664
|
var level = _a.level;
|
|
4567
4665
|
switch (level) {
|
|
4568
4666
|
case 1:
|
|
@@ -4573,7 +4671,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$x || (templateOb
|
|
|
4573
4671
|
return "70px";
|
|
4574
4672
|
}
|
|
4575
4673
|
});
|
|
4576
|
-
var templateObject_1$
|
|
4674
|
+
var templateObject_1$z;
|
|
4577
4675
|
|
|
4578
4676
|
var trophies = {
|
|
4579
4677
|
1: {
|
|
@@ -4609,7 +4707,7 @@ var trophies = {
|
|
|
4609
4707
|
};
|
|
4610
4708
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4611
4709
|
|
|
4612
|
-
var Container$i = styled__default["default"].div(templateObject_1$
|
|
4710
|
+
var Container$i = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\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) {
|
|
4613
4711
|
var type = _a.type;
|
|
4614
4712
|
switch (type) {
|
|
4615
4713
|
case "success":
|
|
@@ -4626,11 +4724,11 @@ var Container$i = styled__default["default"].div(templateObject_1$w || (template
|
|
|
4626
4724
|
return theme.colors.red.base;
|
|
4627
4725
|
}
|
|
4628
4726
|
});
|
|
4629
|
-
var templateObject_1$
|
|
4727
|
+
var templateObject_1$y;
|
|
4630
4728
|
|
|
4631
4729
|
var Alert = function (props) { return (jsxRuntime.jsxs(Container$i, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
|
|
4632
4730
|
|
|
4633
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
4731
|
+
var StyledCard = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n background-color: ", ";\n border: ", ";\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 border: ", ";\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) {
|
|
4634
4732
|
var bordered = _a.bordered;
|
|
4635
4733
|
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4636
4734
|
}, function (_a) {
|
|
@@ -4642,23 +4740,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$v || (templateO
|
|
|
4642
4740
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4643
4741
|
: "";
|
|
4644
4742
|
});
|
|
4645
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
4743
|
+
var Ellipse = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\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) {
|
|
4646
4744
|
var color = _a.color;
|
|
4647
4745
|
return color ? theme.colors[color].light : "";
|
|
4648
4746
|
});
|
|
4649
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
4650
|
-
var templateObject_1$
|
|
4747
|
+
var Content = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\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"])));
|
|
4748
|
+
var templateObject_1$x, templateObject_2$s, templateObject_3$9;
|
|
4651
4749
|
|
|
4652
4750
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
4653
4751
|
|
|
4654
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
4655
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
4656
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
4657
|
-
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$
|
|
4752
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
4753
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4754
|
+
var CheckboxWrapper = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\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"])));
|
|
4755
|
+
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
4658
4756
|
var weight = _a.weight;
|
|
4659
4757
|
return weight || 500;
|
|
4660
|
-
}, theme.colors.darkGray.base);
|
|
4661
|
-
var templateObject_1$
|
|
4758
|
+
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
4759
|
+
var templateObject_1$w, templateObject_2$r, templateObject_3$8, templateObject_4$6;
|
|
4662
4760
|
|
|
4663
4761
|
var Checkboxes = function (props) {
|
|
4664
4762
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4681,12 +4779,12 @@ var Checkboxes = function (props) {
|
|
|
4681
4779
|
}) })] }));
|
|
4682
4780
|
};
|
|
4683
4781
|
|
|
4684
|
-
var Container$h = styled__default["default"].div(templateObject_1$
|
|
4685
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
4782
|
+
var Container$h = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
4783
|
+
var Item = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
4686
4784
|
var isOpen = _a.isOpen;
|
|
4687
4785
|
return (isOpen ? "" : "none");
|
|
4688
|
-
}, theme.colors.lightGray.
|
|
4689
|
-
var templateObject_1$
|
|
4786
|
+
}, theme.colors.lightGray.dark);
|
|
4787
|
+
var templateObject_1$v, templateObject_2$q;
|
|
4690
4788
|
|
|
4691
4789
|
var Collapse = function (props) {
|
|
4692
4790
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4704,9 +4802,9 @@ var Collapse = function (props) {
|
|
|
4704
4802
|
}) })));
|
|
4705
4803
|
};
|
|
4706
4804
|
|
|
4707
|
-
var Container$g = styled__default["default"].div(templateObject_1$
|
|
4708
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4709
|
-
var templateObject_1$
|
|
4805
|
+
var Container$g = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\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"])));
|
|
4806
|
+
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4807
|
+
var templateObject_1$u, templateObject_2$p;
|
|
4710
4808
|
|
|
4711
4809
|
var DateInputField = function (props) {
|
|
4712
4810
|
var onChange = function (value) {
|
|
@@ -4720,19 +4818,55 @@ var DateInputField = function (props) {
|
|
|
4720
4818
|
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
4721
4819
|
};
|
|
4722
4820
|
|
|
4723
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
4724
|
-
var
|
|
4725
|
-
|
|
4821
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
4822
|
+
var size = _a.size;
|
|
4823
|
+
return (size === "small" ? "30px" : "40px");
|
|
4824
|
+
}, function (_a) {
|
|
4825
|
+
var size = _a.size;
|
|
4826
|
+
return (size === "small" ? "30px" : "40px");
|
|
4827
|
+
}, function (_a) {
|
|
4828
|
+
var size = _a.size;
|
|
4829
|
+
return (size === "small" ? "30px" : "40px");
|
|
4830
|
+
}, function (_a) {
|
|
4831
|
+
var size = _a.size;
|
|
4832
|
+
return (size === "small" ? "30px" : "40px");
|
|
4833
|
+
}, function (_a) {
|
|
4834
|
+
var size = _a.size;
|
|
4835
|
+
return (size === "small" ? "28px" : "38px");
|
|
4836
|
+
}, function (_a) {
|
|
4837
|
+
var size = _a.size;
|
|
4838
|
+
return (size === "small" ? "28px" : "38px");
|
|
4839
|
+
});
|
|
4840
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
4841
|
+
var size = _a.size;
|
|
4842
|
+
return (size === "small" ? "30px" : "40px");
|
|
4843
|
+
}, function (_a) {
|
|
4844
|
+
var size = _a.size;
|
|
4845
|
+
return (size === "small" ? "30px" : "40px");
|
|
4846
|
+
}, function (_a) {
|
|
4847
|
+
var size = _a.size;
|
|
4848
|
+
return (size === "small" ? "30px" : "40px");
|
|
4849
|
+
}, function (_a) {
|
|
4850
|
+
var size = _a.size;
|
|
4851
|
+
return (size === "small" ? "30px" : "40px");
|
|
4852
|
+
}, function (_a) {
|
|
4853
|
+
var size = _a.size;
|
|
4854
|
+
return (size === "small" ? "32px" : "40px");
|
|
4855
|
+
}, function (_a) {
|
|
4856
|
+
var size = _a.size;
|
|
4857
|
+
return (size === "small" ? "32px" : "40px");
|
|
4858
|
+
});
|
|
4859
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4726
4860
|
|
|
4727
4861
|
var IconButton = function (props) {
|
|
4728
4862
|
if (props.color === "white")
|
|
4729
|
-
return (jsxRuntime.jsx(GhostIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "gray" }) })));
|
|
4730
|
-
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4863
|
+
return (jsxRuntime.jsx(GhostIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "gray" }) })));
|
|
4864
|
+
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
4731
4865
|
};
|
|
4732
4866
|
|
|
4733
|
-
var Container$f = styled__default["default"].div(templateObject_1$
|
|
4734
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4735
|
-
var templateObject_1$
|
|
4867
|
+
var Container$f = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\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"])));
|
|
4868
|
+
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4869
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4736
4870
|
|
|
4737
4871
|
var InputField = function (props) {
|
|
4738
4872
|
var onChange = function (value) {
|
|
@@ -4746,7 +4880,7 @@ var InputField = function (props) {
|
|
|
4746
4880
|
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
4747
4881
|
};
|
|
4748
4882
|
|
|
4749
|
-
var Container$e = styled__default["default"].div(templateObject_1$
|
|
4883
|
+
var Container$e = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
4750
4884
|
var status = _a.status, color = _a.color;
|
|
4751
4885
|
switch (status) {
|
|
4752
4886
|
case "passed":
|
|
@@ -4790,23 +4924,23 @@ var Container$e = styled__default["default"].div(templateObject_1$p || (template
|
|
|
4790
4924
|
return theme.colors.darkGray.light;
|
|
4791
4925
|
}
|
|
4792
4926
|
});
|
|
4793
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4794
|
-
var templateObject_1$
|
|
4927
|
+
var CheckIconWrapper = styled__default["default"].div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
4928
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4795
4929
|
|
|
4796
4930
|
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
4797
4931
|
marginTop: "13px",
|
|
4798
4932
|
transform: "scale(2)",
|
|
4799
4933
|
} }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
4800
4934
|
|
|
4801
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
4935
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\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) {
|
|
4802
4936
|
var chevron = _a.chevron;
|
|
4803
4937
|
return (chevron === "left" ? "4px" : "");
|
|
4804
4938
|
}, function (_a) {
|
|
4805
4939
|
var chevron = _a.chevron;
|
|
4806
4940
|
return (chevron === "right" ? "4px" : "");
|
|
4807
4941
|
});
|
|
4808
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4809
|
-
var templateObject_1$
|
|
4942
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\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);
|
|
4943
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4810
4944
|
|
|
4811
4945
|
var Link = function (props) {
|
|
4812
4946
|
var onClick = function (e) {
|
|
@@ -4818,15 +4952,15 @@ var Link = function (props) {
|
|
|
4818
4952
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }), jsxRuntime.jsx(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
4819
4953
|
};
|
|
4820
4954
|
|
|
4821
|
-
var Container$d = styled__default["default"].div(templateObject_1$
|
|
4955
|
+
var Container$d = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\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) {
|
|
4822
4956
|
var text = _a.text;
|
|
4823
4957
|
return (text ? "20px" : "");
|
|
4824
4958
|
});
|
|
4825
|
-
var templateObject_1$
|
|
4959
|
+
var templateObject_1$p;
|
|
4826
4960
|
|
|
4827
4961
|
var Loading = function (props) { return (jsxRuntime.jsxs(Container$d, __assign$2({}, props, { children: [jsxRuntime.jsx(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
4828
4962
|
|
|
4829
|
-
var Container$c = styled__default["default"].div(templateObject_1$
|
|
4963
|
+
var Container$c = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
|
|
4830
4964
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4831
4965
|
if (dropdownIsVisible) {
|
|
4832
4966
|
switch (color) {
|
|
@@ -4839,8 +4973,8 @@ var Container$c = styled__default["default"].div(templateObject_1$m || (template
|
|
|
4839
4973
|
}
|
|
4840
4974
|
return "";
|
|
4841
4975
|
});
|
|
4842
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
4843
|
-
var DropdownContainer = styled__default["default"].div(templateObject_3$
|
|
4976
|
+
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
4977
|
+
var DropdownContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
4844
4978
|
var color = _a.color;
|
|
4845
4979
|
switch (color) {
|
|
4846
4980
|
default:
|
|
@@ -4850,8 +4984,8 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$8 || (te
|
|
|
4850
4984
|
return theme.colors.lightGray.dark;
|
|
4851
4985
|
}
|
|
4852
4986
|
});
|
|
4853
|
-
var LocaleWrapper = styled__default["default"].div(templateObject_4$
|
|
4854
|
-
var templateObject_1$
|
|
4987
|
+
var LocaleWrapper = styled__default["default"].div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
4988
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$7, templateObject_4$5;
|
|
4855
4989
|
|
|
4856
4990
|
var LocaleSelect = function (props) {
|
|
4857
4991
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4865,17 +4999,17 @@ var LocaleSelect = function (props) {
|
|
|
4865
4999
|
.map(function (locale) { return (jsxRuntime.jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
4866
5000
|
};
|
|
4867
5001
|
|
|
4868
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
4869
|
-
var templateObject_1$
|
|
5002
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\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"])));
|
|
5003
|
+
var templateObject_1$n;
|
|
4870
5004
|
|
|
4871
5005
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.GOLD }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.SILVER }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.BRONZE }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
4872
5006
|
|
|
4873
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
5007
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\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) {
|
|
4874
5008
|
var contrast = _a.contrast;
|
|
4875
5009
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4876
5010
|
});
|
|
4877
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
4878
|
-
var templateObject_1$
|
|
5011
|
+
var ButtonContainer = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
|
|
5012
|
+
var templateObject_1$m, templateObject_2$j;
|
|
4879
5013
|
|
|
4880
5014
|
var Notification = function (props) {
|
|
4881
5015
|
if (!props.isVisible)
|
|
@@ -4883,9 +5017,9 @@ var Notification = function (props) {
|
|
|
4883
5017
|
return (jsxRuntime.jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React$3.createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
4884
5018
|
};
|
|
4885
5019
|
|
|
4886
|
-
var Container$b = styled__default["default"].div(templateObject_1$
|
|
4887
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4888
|
-
var templateObject_1$
|
|
5020
|
+
var Container$b = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\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"])));
|
|
5021
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5022
|
+
var templateObject_1$l, templateObject_2$i;
|
|
4889
5023
|
|
|
4890
5024
|
var NumberField = function (props) {
|
|
4891
5025
|
var onChange = function (value) {
|
|
@@ -4899,100 +5033,12 @@ var NumberField = function (props) {
|
|
|
4899
5033
|
return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsx(Label$6, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Number$1, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
4900
5034
|
};
|
|
4901
5035
|
|
|
4902
|
-
var
|
|
4903
|
-
|
|
4904
|
-
|
|
4905
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4906
|
-
exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
|
|
4907
|
-
var hasNumber = function (input) {
|
|
4908
|
-
var regex = new RegExp(/\d/g);
|
|
4909
|
-
return regex.test(input);
|
|
4910
|
-
};
|
|
4911
|
-
exports.hasNumber = hasNumber;
|
|
4912
|
-
var hasSpecialCharacter = function (input) {
|
|
4913
|
-
var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
|
|
4914
|
-
return regex.test(input);
|
|
4915
|
-
};
|
|
4916
|
-
exports.hasSpecialCharacter = hasSpecialCharacter;
|
|
4917
|
-
var hasCapitalLetter = function (input) {
|
|
4918
|
-
var regex = new RegExp(/[A-Z]/g);
|
|
4919
|
-
return regex.test(input);
|
|
4920
|
-
};
|
|
4921
|
-
exports.hasCapitalLetter = hasCapitalLetter;
|
|
4922
|
-
var isValidEmail = function (email) {
|
|
4923
|
-
var regex = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
|
|
4924
|
-
return regex.test(email);
|
|
4925
|
-
};
|
|
4926
|
-
exports.isValidEmail = isValidEmail;
|
|
4927
|
-
var isValidUsername = function (username) {
|
|
4928
|
-
return username.length > 5 &&
|
|
4929
|
-
username.length <= 15 &&
|
|
4930
|
-
username.indexOf(" ") < 0 &&
|
|
4931
|
-
!(0, exports.isValidEmail)(username);
|
|
4932
|
-
};
|
|
4933
|
-
exports.isValidUsername = isValidUsername;
|
|
4934
|
-
var isStrongPassword = function (password) {
|
|
4935
|
-
return password.length >= 8 &&
|
|
4936
|
-
(0, exports.hasNumber)(password) &&
|
|
4937
|
-
(0, exports.hasSpecialCharacter)(password) &&
|
|
4938
|
-
(0, exports.hasCapitalLetter)(password);
|
|
4939
|
-
};
|
|
4940
|
-
exports.isStrongPassword = isStrongPassword;
|
|
4941
|
-
}(expressions));
|
|
4942
|
-
|
|
4943
|
-
var Container$a = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\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"])));
|
|
4944
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4945
|
-
var HelperContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
4946
|
-
var fadeIn = styled.keyframes(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
4947
|
-
var Helper = styled__default["default"](StyledParagraph)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
4948
|
-
var isOk = _a.isOk;
|
|
4949
|
-
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4950
|
-
}, fadeIn);
|
|
4951
|
-
var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4952
|
-
|
|
4953
|
-
var translations = {
|
|
4954
|
-
"nl-NL": {
|
|
4955
|
-
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4956
|
-
number: "Minimaal 1 getal",
|
|
4957
|
-
specialCharacter: "Minimaal 1 leesteken",
|
|
4958
|
-
length: "Minimaal 8 karakters",
|
|
4959
|
-
},
|
|
4960
|
-
"nl-BE": {
|
|
4961
|
-
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4962
|
-
number: "Minimaal 1 getal",
|
|
4963
|
-
specialCharacter: "Minimaal 1 leesteken",
|
|
4964
|
-
length: "Minimaal 8 karakters",
|
|
4965
|
-
},
|
|
4966
|
-
// "en-GB": {
|
|
4967
|
-
// capitalLetter: "At least 1 capital letter",
|
|
4968
|
-
// number: "At least 1 number",
|
|
4969
|
-
// specialCharacter: "At least 1 special character",
|
|
4970
|
-
// length: "At least 8 characters",
|
|
4971
|
-
// },
|
|
4972
|
-
// "fr-FR": {
|
|
4973
|
-
// capitalLetter: "Au moins une lettre majuscule",
|
|
4974
|
-
// number: "Au moins un chiffre",
|
|
4975
|
-
// specialCharacter: "Au moins un caractère spécial",
|
|
4976
|
-
// length: "Au moins 8 caractères",
|
|
4977
|
-
// },
|
|
4978
|
-
// "fr-BE": {
|
|
4979
|
-
// capitalLetter: "Au moins une lettre majuscule",
|
|
4980
|
-
// number: "Au moins un chiffre",
|
|
4981
|
-
// specialCharacter: "Au moins un caractère spécial",
|
|
4982
|
-
// length: "Au moins 8 caractères",
|
|
4983
|
-
// },
|
|
4984
|
-
// "de-DE": {
|
|
4985
|
-
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
4986
|
-
// number: "Mindestens 1 Zahl",
|
|
4987
|
-
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
4988
|
-
// length: "Mindestens 8 Zeichen",
|
|
4989
|
-
// },
|
|
4990
|
-
};
|
|
5036
|
+
var Container$a = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\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"])));
|
|
5037
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5038
|
+
var templateObject_1$k, templateObject_2$h;
|
|
4991
5039
|
|
|
4992
5040
|
var PasswordInputField = function (props) {
|
|
4993
|
-
var _a = React$3.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
|
|
4994
5041
|
var onChange = function (value) {
|
|
4995
|
-
setValue(value);
|
|
4996
5042
|
if (props.onChange)
|
|
4997
5043
|
props.onChange(props.name, value);
|
|
4998
5044
|
};
|
|
@@ -5005,7 +5051,7 @@ var PasswordInputField = function (props) {
|
|
|
5005
5051
|
if (props.onBlur)
|
|
5006
5052
|
props.onBlur(props.name);
|
|
5007
5053
|
};
|
|
5008
|
-
return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })
|
|
5054
|
+
return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, helperLocale: props.helperLocale, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })] }));
|
|
5009
5055
|
};
|
|
5010
5056
|
|
|
5011
5057
|
var generateRandomString = function (length) {
|
|
@@ -5018,7 +5064,7 @@ var generateRandomString = function (length) {
|
|
|
5018
5064
|
return string;
|
|
5019
5065
|
};
|
|
5020
5066
|
|
|
5021
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
5067
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
5022
5068
|
var isVisible = _a.isVisible;
|
|
5023
5069
|
return (isVisible ? "100%" : "0%");
|
|
5024
5070
|
}, function (_a) {
|
|
@@ -5031,7 +5077,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$h || (templ
|
|
|
5031
5077
|
var contrast = _a.contrast;
|
|
5032
5078
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5033
5079
|
});
|
|
5034
|
-
var templateObject_1$
|
|
5080
|
+
var templateObject_1$j;
|
|
5035
5081
|
|
|
5036
5082
|
var Popup = function (props) {
|
|
5037
5083
|
var popupRef = React$3.useRef(null);
|
|
@@ -5067,8 +5113,8 @@ var Popup = function (props) {
|
|
|
5067
5113
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
5068
5114
|
};
|
|
5069
5115
|
|
|
5070
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
5071
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
5116
|
+
var Wrapper = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
5117
|
+
var StyledProgressBar = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
5072
5118
|
var showInfo = _a.showInfo;
|
|
5073
5119
|
return (showInfo ? "10px" : "");
|
|
5074
5120
|
});
|
|
@@ -5079,12 +5125,12 @@ var Indicator$1 = styled__default["default"].div(templateObject_3$6 || (template
|
|
|
5079
5125
|
var color = _a.color;
|
|
5080
5126
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5081
5127
|
});
|
|
5082
|
-
var templateObject_1$
|
|
5128
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$6;
|
|
5083
5129
|
|
|
5084
5130
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign$2({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
5085
5131
|
|
|
5086
|
-
var Container$9 = styled__default["default"].ol(templateObject_1$
|
|
5087
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
5132
|
+
var Container$9 = styled__default["default"].ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
5133
|
+
var Step$1 = styled__default["default"].li(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
|
|
5088
5134
|
var status = _a.status;
|
|
5089
5135
|
return (!!status ? "pointer" : "not-allowed");
|
|
5090
5136
|
}, function (_a) {
|
|
@@ -5106,7 +5152,7 @@ var Step$1 = styled__default["default"].li(templateObject_2$d || (templateObject
|
|
|
5106
5152
|
var hasTitle = _a.hasTitle;
|
|
5107
5153
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5108
5154
|
}, theme.colors.lightGray.dark);
|
|
5109
|
-
var templateObject_1$
|
|
5155
|
+
var templateObject_1$h, templateObject_2$f;
|
|
5110
5156
|
|
|
5111
5157
|
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5112
5158
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5123,8 +5169,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children:
|
|
|
5123
5169
|
return (jsxRuntime.jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
5124
5170
|
}) })); };
|
|
5125
5171
|
|
|
5126
|
-
var Container$8 = styled__default["default"].ol(templateObject_1$
|
|
5127
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
5172
|
+
var Container$8 = styled__default["default"].ol(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
5173
|
+
var Step = styled__default["default"].li(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
5128
5174
|
var status = _a.status;
|
|
5129
5175
|
return (!!status ? "pointer" : "not-allowed");
|
|
5130
5176
|
}, function (_a) {
|
|
@@ -5143,7 +5189,7 @@ var Step = styled__default["default"].li(templateObject_2$c || (templateObject_2
|
|
|
5143
5189
|
? theme.colors.lightGray.light
|
|
5144
5190
|
: theme.colors.darkGray.light;
|
|
5145
5191
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5146
|
-
var templateObject_1$
|
|
5192
|
+
var templateObject_1$g, templateObject_2$e;
|
|
5147
5193
|
|
|
5148
5194
|
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5149
5195
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5164,6 +5210,56 @@ var Steps = function (props) {
|
|
|
5164
5210
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
5165
5211
|
};
|
|
5166
5212
|
|
|
5213
|
+
var TabsContainer$1 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"], ["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"])), theme.colors.lightGray.dark);
|
|
5214
|
+
var Tab$1 = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5215
|
+
var isActive = _a.isActive;
|
|
5216
|
+
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
5217
|
+
}, function (_a) {
|
|
5218
|
+
var isActive = _a.isActive;
|
|
5219
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5220
|
+
}, theme.colors.blue.base);
|
|
5221
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5222
|
+
|
|
5223
|
+
var Tabs$2 = function (props) {
|
|
5224
|
+
var _a = React$3.useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5225
|
+
var onChangeTab = function (key) {
|
|
5226
|
+
setActiveTab(key);
|
|
5227
|
+
if (props.onChange)
|
|
5228
|
+
props.onChange(key);
|
|
5229
|
+
};
|
|
5230
|
+
return (jsxRuntime.jsx(TabsContainer$1, { children: props.items.map(function (_a) {
|
|
5231
|
+
var key = _a.key, label = _a.label;
|
|
5232
|
+
return (jsxRuntime.jsx(Tab$1, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsxRuntime.jsx(Paragraph, { children: label }) }), key));
|
|
5233
|
+
}) }));
|
|
5234
|
+
};
|
|
5235
|
+
|
|
5236
|
+
var TabsContainer = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"], ["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"])), theme.colors.lightGray.dark);
|
|
5237
|
+
var Tab = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5238
|
+
var isActive = _a.isActive;
|
|
5239
|
+
return (isActive ? "block" : "none");
|
|
5240
|
+
}, theme.colors.blue.base, function (_a) {
|
|
5241
|
+
var isActive = _a.isActive;
|
|
5242
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5243
|
+
}, theme.colors.blue.base);
|
|
5244
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5245
|
+
|
|
5246
|
+
var Tabs$1 = function (props) {
|
|
5247
|
+
var _a = React$3.useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5248
|
+
var onChangeTab = function (key) {
|
|
5249
|
+
setActiveTab(key);
|
|
5250
|
+
if (props.onChange)
|
|
5251
|
+
props.onChange(key);
|
|
5252
|
+
};
|
|
5253
|
+
return (jsxRuntime.jsx(TabsContainer, { children: props.items.map(function (_a) {
|
|
5254
|
+
var key = _a.key, label = _a.label;
|
|
5255
|
+
return (jsxRuntime.jsx(Tab, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsxRuntime.jsx(Paragraph, { children: label }) }), key));
|
|
5256
|
+
}) }));
|
|
5257
|
+
};
|
|
5258
|
+
|
|
5259
|
+
var Tabs = function (props) {
|
|
5260
|
+
return props.alignment === "vertical" ? (jsxRuntime.jsx(Tabs$1, __assign$2({}, props))) : (jsxRuntime.jsx(Tabs$2, __assign$2({}, props)));
|
|
5261
|
+
};
|
|
5262
|
+
|
|
5167
5263
|
var Fieldset = styled__default["default"].fieldset(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
5168
5264
|
var RadioContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5169
5265
|
var RadioWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\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"])));
|
|
@@ -11400,8 +11496,8 @@ var SpecialRow = styled__default["default"].div(templateObject_2$3 || (templateO
|
|
|
11400
11496
|
var TopRow = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"])));
|
|
11401
11497
|
var StartRow = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"])));
|
|
11402
11498
|
var BottomRow = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"])));
|
|
11403
|
-
var SpacebarRow = styled__default["default"].div(templateObject_6$
|
|
11404
|
-
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$
|
|
11499
|
+
var SpacebarRow = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"])));
|
|
11500
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
11405
11501
|
|
|
11406
11502
|
var Keyboard = function (props) {
|
|
11407
11503
|
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11474,27 +11570,33 @@ var Keyboard = function (props) {
|
|
|
11474
11570
|
};
|
|
11475
11571
|
|
|
11476
11572
|
var Mask = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
11477
|
-
var CardWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n
|
|
11573
|
+
var CardWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
11478
11574
|
var width = _a.width;
|
|
11479
|
-
|
|
11575
|
+
if (!width)
|
|
11576
|
+
return "720px";
|
|
11577
|
+
if (typeof width === "number")
|
|
11578
|
+
return "".concat(width, "px");
|
|
11579
|
+
return width;
|
|
11480
11580
|
});
|
|
11481
|
-
var
|
|
11482
|
-
var
|
|
11483
|
-
var
|
|
11484
|
-
var
|
|
11581
|
+
var TitleWrapper = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n margin: 0 25px 20px 0;\n"], ["\n margin: 0 25px 20px 0;\n"])));
|
|
11582
|
+
var CloseIconWrapper = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"])), theme.colors.darkGray.base);
|
|
11583
|
+
var ChildrenWrapper = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n padding: 20px 35px;\n"], ["\n padding: 20px 35px;\n"])));
|
|
11584
|
+
var FooterContainer = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
11585
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1;
|
|
11485
11586
|
|
|
11486
11587
|
var Modal = function (props) {
|
|
11487
|
-
var _a = React$3.useState(props.
|
|
11588
|
+
var _a = React$3.useState(props.isOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
11488
11589
|
var isClosable = React$3.useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
|
|
11489
|
-
React$3.useEffect(function () {
|
|
11490
|
-
|
|
11590
|
+
React$3.useEffect(function () {
|
|
11591
|
+
setIsOpen(props.isOpen);
|
|
11592
|
+
}, [props.isOpen]);
|
|
11593
|
+
React$3.useEffect(function () {
|
|
11594
|
+
if (!isOpen && props.afterClose)
|
|
11595
|
+
props.afterClose();
|
|
11596
|
+
}, [isOpen]);
|
|
11597
|
+
if (!isOpen)
|
|
11491
11598
|
return null;
|
|
11492
|
-
|
|
11493
|
-
if (props.onClose)
|
|
11494
|
-
props.onClose();
|
|
11495
|
-
setIsVisible(false);
|
|
11496
|
-
};
|
|
11497
|
-
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign$2({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }) })), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
11599
|
+
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign$2({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxRuntime.jsxs(ChildrenWrapper, { children: [props.title && (jsxRuntime.jsx(TitleWrapper, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxRuntime.jsxs(FooterContainer, { children: [props.closeButton && (jsxRuntime.jsx(Button, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsxRuntime.jsx(Button, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
|
|
11498
11600
|
};
|
|
11499
11601
|
|
|
11500
11602
|
var Container$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|
|
@@ -11529,21 +11631,33 @@ var TableBody = styled__default["default"].tbody(templateObject_3 || (templateOb
|
|
|
11529
11631
|
styled__default["default"].tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11530
11632
|
var ColumnTitle = styled__default["default"].th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n text-align: left;\n padding-left: 15px;\n"], ["\n text-align: left;\n padding-left: 15px;\n"])));
|
|
11531
11633
|
var TableRow = styled__default["default"].tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
11532
|
-
var TableCell = styled__default["default"].td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n
|
|
11533
|
-
var
|
|
11634
|
+
var TableCell = styled__default["default"].td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.colors.darkGray.light, function (_a) {
|
|
11635
|
+
var align = _a.align;
|
|
11636
|
+
switch (align) {
|
|
11637
|
+
default:
|
|
11638
|
+
case "left":
|
|
11639
|
+
return "-webkit-left";
|
|
11640
|
+
case "right":
|
|
11641
|
+
return "-webkit-right";
|
|
11642
|
+
case "center":
|
|
11643
|
+
return "-webkit-center";
|
|
11644
|
+
}
|
|
11645
|
+
});
|
|
11646
|
+
var EmptyTableCell = styled__default["default"].td(templateObject_8 || (templateObject_8 = __makeTemplateObject$1(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.colors.lightGray.darker);
|
|
11647
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
11534
11648
|
|
|
11535
11649
|
var Table = function (_a) {
|
|
11536
|
-
var columns = _a.columns, data = _a.data;
|
|
11537
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableRow, { children: columns.map(function (_a) {
|
|
11650
|
+
var columns = _a.columns, data = _a.data, empytText = _a.empytText;
|
|
11651
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableRow, { children: columns.map(function (_a, index) {
|
|
11538
11652
|
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11539
|
-
return (jsxRuntime.jsx(ColumnTitle, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
|
|
11540
|
-
}) }) }), jsxRuntime.jsx(TableBody, { children: data.map(function (row, index) {
|
|
11653
|
+
return (jsxRuntime.jsx(ColumnTitle, { children: title && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6", as: "span" }, { children: title }))) }, "".concat(dataIndex, "-").concat(index)));
|
|
11654
|
+
}) }) }), jsxRuntime.jsx(TableBody, { children: data.length === 0 ? (jsxRuntime.jsx(TableRow, { children: jsxRuntime.jsx(EmptyTableCell, __assign$2({ colSpan: columns.length }, { children: jsxRuntime.jsx(Paragraph, __assign$2({ align: "center", size: "small", weight: "regular" }, { children: empytText || "No data" })) })) })) : (data.map(function (row, index) {
|
|
11541
11655
|
return (jsxRuntime.jsx(TableRow, { children: columns.map(function (_a, index) {
|
|
11542
|
-
var dataIndex = _a.dataIndex, render = _a.render;
|
|
11656
|
+
var dataIndex = _a.dataIndex, render = _a.render, align = _a.align;
|
|
11543
11657
|
var data = row[dataIndex];
|
|
11544
|
-
return (jsxRuntime.jsx(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
|
|
11658
|
+
return (jsxRuntime.jsx(TableCell, __assign$2({ align: align }, { children: render ? render(data, row) : data }), "col-".concat(index)));
|
|
11545
11659
|
}) }, "row-".concat(index)));
|
|
11546
|
-
}) })] }));
|
|
11660
|
+
})) })] }));
|
|
11547
11661
|
};
|
|
11548
11662
|
|
|
11549
11663
|
exports.Alert = Alert;
|
|
@@ -11587,6 +11701,7 @@ exports.Spacer = Spacer;
|
|
|
11587
11701
|
exports.Steps = Steps;
|
|
11588
11702
|
exports.Subheading = Subheading;
|
|
11589
11703
|
exports.Table = Table;
|
|
11704
|
+
exports.Tabs = Tabs;
|
|
11590
11705
|
exports.Tag = Tag;
|
|
11591
11706
|
exports.Toggle = Toggle;
|
|
11592
11707
|
exports.ToggleField = ToggleField;
|