@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.es.js
CHANGED
|
@@ -3381,14 +3381,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3381
3381
|
var React$2 = __importStar$2(React__default);
|
|
3382
3382
|
var react_1 = require$$1;
|
|
3383
3383
|
var helpers_1 = helpers$1;
|
|
3384
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3384
|
+
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"])));
|
|
3385
3385
|
var Loader = /** @class */ (function (_super) {
|
|
3386
3386
|
__extends$1(Loader, _super);
|
|
3387
3387
|
function Loader() {
|
|
3388
3388
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3389
3389
|
_this.style = function (i) {
|
|
3390
3390
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3391
|
-
return react_1.css(templateObject_2$
|
|
3391
|
+
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");
|
|
3392
3392
|
};
|
|
3393
3393
|
return _this;
|
|
3394
3394
|
}
|
|
@@ -3403,9 +3403,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3403
3403
|
return Loader;
|
|
3404
3404
|
}(React$2.PureComponent));
|
|
3405
3405
|
var _default = BeatLoader.default = Loader;
|
|
3406
|
-
var templateObject_1$
|
|
3406
|
+
var templateObject_1$R, templateObject_2$x;
|
|
3407
3407
|
|
|
3408
|
-
var StyledButton = styled.button(templateObject_1$
|
|
3408
|
+
var StyledButton = styled.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) {
|
|
3409
3409
|
var fluid = _a.fluid;
|
|
3410
3410
|
return (fluid ? "100%" : "fit-content");
|
|
3411
3411
|
}, function (_a) {
|
|
@@ -3419,6 +3419,8 @@ var StyledButton = styled.button(templateObject_1$O || (templateObject_1$O = __m
|
|
|
3419
3419
|
return theme.colors.blue.base;
|
|
3420
3420
|
case "green":
|
|
3421
3421
|
return theme.colors.green.base;
|
|
3422
|
+
case "red":
|
|
3423
|
+
return theme.colors.red.base;
|
|
3422
3424
|
case "white":
|
|
3423
3425
|
return theme.colors.lightGray.light;
|
|
3424
3426
|
}
|
|
@@ -3430,6 +3432,8 @@ var StyledButton = styled.button(templateObject_1$O || (templateObject_1$O = __m
|
|
|
3430
3432
|
return "inset 0 -3px 0 ".concat(theme.colors.blue.dark);
|
|
3431
3433
|
case "green":
|
|
3432
3434
|
return "inset 0 -3px 0 ".concat(theme.colors.green.dark);
|
|
3435
|
+
case "red":
|
|
3436
|
+
return "inset 0 -3px 0 ".concat(theme.colors.red.dark);
|
|
3433
3437
|
case "white":
|
|
3434
3438
|
return "0 3px 0 ".concat(theme.colors.darkGray.light);
|
|
3435
3439
|
}
|
|
@@ -3455,7 +3459,7 @@ var StyledButton = styled.button(templateObject_1$O || (templateObject_1$O = __m
|
|
|
3455
3459
|
? theme.button.medium.heightActive
|
|
3456
3460
|
: theme.button[size].heightActive;
|
|
3457
3461
|
});
|
|
3458
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3462
|
+
var DisabledButton = styled(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) {
|
|
3459
3463
|
var size = _a.size;
|
|
3460
3464
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3461
3465
|
});
|
|
@@ -3482,7 +3486,7 @@ var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __mak
|
|
|
3482
3486
|
var size = _a.size;
|
|
3483
3487
|
return (size === "small" ? "3px" : "");
|
|
3484
3488
|
});
|
|
3485
|
-
var templateObject_1$
|
|
3489
|
+
var templateObject_1$Q, templateObject_2$w, templateObject_3$b, templateObject_4$8;
|
|
3486
3490
|
|
|
3487
3491
|
var Button = forwardRef(function (_a, ref) {
|
|
3488
3492
|
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"]);
|
|
@@ -3518,7 +3522,7 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
3518
3522
|
return (jsx$1(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 ? jsx$1(Loader, {}) : jsx$1("span", { children: label }) })));
|
|
3519
3523
|
});
|
|
3520
3524
|
|
|
3521
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
3525
|
+
var StyledCheckbox = styled.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) {
|
|
3522
3526
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3523
3527
|
if (disabled)
|
|
3524
3528
|
return theme.colors.lightGray.darker;
|
|
@@ -3539,7 +3543,7 @@ var StyledCheckbox = styled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
3539
3543
|
return theme.colors.green.base;
|
|
3540
3544
|
return theme.colors.lightGray.darker;
|
|
3541
3545
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3542
|
-
var templateObject_1$
|
|
3546
|
+
var templateObject_1$P;
|
|
3543
3547
|
|
|
3544
3548
|
var Checkbox = function (props) {
|
|
3545
3549
|
var _a;
|
|
@@ -3572,7 +3576,7 @@ var Checkbox = function (props) {
|
|
|
3572
3576
|
return (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 && (jsx$1("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx$1("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" }) }))), jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3573
3577
|
};
|
|
3574
3578
|
|
|
3575
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
3579
|
+
var Wrapper$9 = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3576
3580
|
var size = _a.size;
|
|
3577
3581
|
switch (size) {
|
|
3578
3582
|
case "small":
|
|
@@ -3595,7 +3599,7 @@ var Wrapper$9 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
|
|
|
3595
3599
|
return "27px";
|
|
3596
3600
|
}
|
|
3597
3601
|
});
|
|
3598
|
-
var templateObject_1$
|
|
3602
|
+
var templateObject_1$O;
|
|
3599
3603
|
|
|
3600
3604
|
var parsers = {};
|
|
3601
3605
|
|
|
@@ -3863,7 +3867,7 @@ var flags = {
|
|
|
3863
3867
|
};
|
|
3864
3868
|
var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3865
3869
|
|
|
3866
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
3870
|
+
var StyledHeading = styled.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) {
|
|
3867
3871
|
var type = _a.type;
|
|
3868
3872
|
return theme.heading[type].fontSize;
|
|
3869
3873
|
}, function (_a) {
|
|
@@ -3887,14 +3891,14 @@ var StyledHeading = styled.span(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
3887
3891
|
var align = _a.align;
|
|
3888
3892
|
return align;
|
|
3889
3893
|
});
|
|
3890
|
-
var templateObject_1$
|
|
3894
|
+
var templateObject_1$N;
|
|
3891
3895
|
|
|
3892
3896
|
var Heading = function (props) {
|
|
3893
3897
|
var element = !!props.as ? props.as : props.type;
|
|
3894
3898
|
return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3895
3899
|
};
|
|
3896
3900
|
|
|
3897
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
3901
|
+
var Wrapper$8 = styled.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) {
|
|
3898
3902
|
var size = _a.size;
|
|
3899
3903
|
return theme.icon[size] || theme.icon.medium;
|
|
3900
3904
|
}, function (_a) {
|
|
@@ -3924,7 +3928,7 @@ var Wrapper$8 = styled.div(templateObject_1$K || (templateObject_1$K = __makeTem
|
|
|
3924
3928
|
return theme.colors.lightGray.light;
|
|
3925
3929
|
}
|
|
3926
3930
|
});
|
|
3927
|
-
var templateObject_1$
|
|
3931
|
+
var templateObject_1$M;
|
|
3928
3932
|
|
|
3929
3933
|
var icons = {
|
|
3930
3934
|
check: (jsx$1("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" })),
|
|
@@ -3954,7 +3958,7 @@ var icons = {
|
|
|
3954
3958
|
};
|
|
3955
3959
|
var Icon = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3956
3960
|
|
|
3957
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
3961
|
+
var Wrapper$7 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3958
3962
|
var size = _a.size;
|
|
3959
3963
|
switch (size) {
|
|
3960
3964
|
default:
|
|
@@ -3966,7 +3970,7 @@ var Wrapper$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
3966
3970
|
return "118px";
|
|
3967
3971
|
}
|
|
3968
3972
|
});
|
|
3969
|
-
var templateObject_1$
|
|
3973
|
+
var templateObject_1$L;
|
|
3970
3974
|
|
|
3971
3975
|
var illustrations = {
|
|
3972
3976
|
keyboard: (jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" })] }))),
|
|
@@ -3979,17 +3983,57 @@ var illustrations = {
|
|
|
3979
3983
|
lockOpen: (jsxs("svg", __assign$2({ viewBox: "0 0 294 483" }, { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" })] }))),
|
|
3980
3984
|
idCard: (jsxs("svg", __assign$2({ viewBox: "0 0 424 304" }, { children: [jsx$1("path", { d: "M0 82h424v182c0 22.091-17.909 40-40 40H40c-22.091 0-40-17.909-40-40V82z", fill: "#EDEDED" }), jsx$1("rect", { x: 242, y: 131, width: 149, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("rect", { x: 242, y: 179, width: 89, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("rect", { x: 242, y: 227, width: 119, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("path", { d: "M0 40C0 17.909 17.909 0 40 0h344c22.091 0 40 17.909 40 40v42H0V40z", fill: "#FF9D00" }), jsxs("g", __assign$2({ clipPath: "url(#clip0_894_47510)" }, { children: [jsx$1("path", { d: "M121 240c-18.778 0-34 15.457-34 34.523V304h68v-29.477C155 255.457 139.777 240 121 240z", fill: "#3DC478" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("path", { d: "M152.288 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053z", fill: "#fff" }), jsx$1("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" }), jsx$1("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" })] })), jsx$1("defs", { children: jsx$1("clipPath", __assign$2({ id: "clip0_894_47510" }, { children: jsx$1("path", { fill: "#fff", transform: "translate(41 103)", d: "M0 0H160V201H0z" }) })) })] }))),
|
|
3981
3985
|
cookie: (jsxs("svg", __assign$2({ viewBox: "0 0 867.3 871.1" }, { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsxs("g", __assign$2({ fill: "#9e1827" }, { children: [jsx$1("circle", { cx: 277.7, cy: 259.3, r: 65 }), jsx$1("circle", { cx: 261.5, cy: 584.3, r: 81.2 }), jsx$1("circle", { cx: 624.3, cy: 543.8, r: 76.8 }), jsx$1("circle", { cx: 477, cy: 714.1, r: 32.9 }), jsx$1("circle", { cx: 415.3, cy: 443.9, r: 38.7 }), jsx$1("circle", { cx: 677.3, cy: 74.1, r: 33.1 }), jsx$1("circle", { cx: 838.9, cy: 192.3, r: 28.4 }), jsx$1("circle", { cx: 732.8, cy: 244.1, r: 51.9 })] }))] }))),
|
|
3986
|
+
classroom: (jsxs("svg", __assign$2({ viewBox: "0 0 165.4 116.8" }, { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("path", { fill: "#c4c4c4", d: "M103.1 90.7H135.39999999999998V101.8H103.1z" }), jsx$1("g", { children: jsx$1("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" }) })] }))),
|
|
3987
|
+
student: (jsxs("svg", __assign$2({ viewBox: "0 0 160 201" }, { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" })] }))),
|
|
3982
3988
|
};
|
|
3983
3989
|
var Illustration = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
3984
3990
|
|
|
3985
|
-
var
|
|
3991
|
+
var StyledParagraph = styled.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) {
|
|
3992
|
+
var size = _a.size;
|
|
3993
|
+
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
3994
|
+
}, function (_a) {
|
|
3995
|
+
var weight = _a.weight;
|
|
3996
|
+
switch (weight) {
|
|
3997
|
+
case "regular":
|
|
3998
|
+
return 400;
|
|
3999
|
+
default:
|
|
4000
|
+
case "medium":
|
|
4001
|
+
return 500;
|
|
4002
|
+
}
|
|
4003
|
+
}, function (_a) {
|
|
4004
|
+
var size = _a.size;
|
|
4005
|
+
return size
|
|
4006
|
+
? theme.paragraph[size].lineHeight
|
|
4007
|
+
: theme.paragraph.medium.lineHeight;
|
|
4008
|
+
}, function (_a) {
|
|
4009
|
+
var color = _a.color;
|
|
4010
|
+
switch (color) {
|
|
4011
|
+
case "white":
|
|
4012
|
+
return theme.colors.lightGray.light;
|
|
4013
|
+
default:
|
|
4014
|
+
case "lightGray":
|
|
4015
|
+
return theme.colors.darkGray.light;
|
|
4016
|
+
case "darkGray":
|
|
4017
|
+
return theme.colors.darkGray.dark;
|
|
4018
|
+
}
|
|
4019
|
+
}, function (_a) {
|
|
4020
|
+
var align = _a.align;
|
|
4021
|
+
return align;
|
|
4022
|
+
}, function (_a) {
|
|
4023
|
+
var transform = _a.transform;
|
|
4024
|
+
return transform;
|
|
4025
|
+
});
|
|
4026
|
+
var templateObject_1$K;
|
|
4027
|
+
|
|
4028
|
+
var Container$l = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4029
|
+
var InputIconWrapper = styled.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) {
|
|
3986
4030
|
var isChanged = _a.isChanged;
|
|
3987
4031
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
3988
4032
|
}, function (_a) {
|
|
3989
4033
|
var disabled = _a.disabled;
|
|
3990
4034
|
return (disabled ? "not-allowed" : "pointer");
|
|
3991
4035
|
});
|
|
3992
|
-
var StyledInput = styled.input(
|
|
4036
|
+
var StyledInput = styled.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) {
|
|
3993
4037
|
var disabled = _a.disabled;
|
|
3994
4038
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
3995
4039
|
}, function (_a) {
|
|
@@ -4002,15 +4046,103 @@ var StyledInput = styled.input(templateObject_2$t || (templateObject_2$t = __mak
|
|
|
4002
4046
|
var disabled = _a.disabled;
|
|
4003
4047
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4004
4048
|
}, 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));
|
|
4005
|
-
var
|
|
4049
|
+
var HelperContainer = styled.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"])));
|
|
4050
|
+
var fadeIn = keyframes$1(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"])));
|
|
4051
|
+
var Helper = styled(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) {
|
|
4052
|
+
var isOk = _a.isOk;
|
|
4053
|
+
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4054
|
+
}, fadeIn);
|
|
4055
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4056
|
+
|
|
4057
|
+
var expressions = {};
|
|
4058
|
+
|
|
4059
|
+
(function (exports) {
|
|
4060
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4061
|
+
exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
|
|
4062
|
+
var hasNumber = function (input) {
|
|
4063
|
+
var regex = new RegExp(/\d/g);
|
|
4064
|
+
return regex.test(input);
|
|
4065
|
+
};
|
|
4066
|
+
exports.hasNumber = hasNumber;
|
|
4067
|
+
var hasSpecialCharacter = function (input) {
|
|
4068
|
+
var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
|
|
4069
|
+
return regex.test(input);
|
|
4070
|
+
};
|
|
4071
|
+
exports.hasSpecialCharacter = hasSpecialCharacter;
|
|
4072
|
+
var hasCapitalLetter = function (input) {
|
|
4073
|
+
var regex = new RegExp(/[A-Z]/g);
|
|
4074
|
+
return regex.test(input);
|
|
4075
|
+
};
|
|
4076
|
+
exports.hasCapitalLetter = hasCapitalLetter;
|
|
4077
|
+
var isValidEmail = function (email) {
|
|
4078
|
+
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,}))$/);
|
|
4079
|
+
return regex.test(email);
|
|
4080
|
+
};
|
|
4081
|
+
exports.isValidEmail = isValidEmail;
|
|
4082
|
+
var isValidUsername = function (username) {
|
|
4083
|
+
return username.length > 5 &&
|
|
4084
|
+
username.length <= 15 &&
|
|
4085
|
+
username.indexOf(" ") < 0 &&
|
|
4086
|
+
!(0, exports.isValidEmail)(username);
|
|
4087
|
+
};
|
|
4088
|
+
exports.isValidUsername = isValidUsername;
|
|
4089
|
+
var isStrongPassword = function (password) {
|
|
4090
|
+
return password.length >= 8 &&
|
|
4091
|
+
(0, exports.hasNumber)(password) &&
|
|
4092
|
+
(0, exports.hasSpecialCharacter)(password) &&
|
|
4093
|
+
(0, exports.hasCapitalLetter)(password);
|
|
4094
|
+
};
|
|
4095
|
+
exports.isStrongPassword = isStrongPassword;
|
|
4096
|
+
}(expressions));
|
|
4097
|
+
|
|
4098
|
+
var translations = {
|
|
4099
|
+
"nl-NL": {
|
|
4100
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4101
|
+
number: "Minimaal 1 getal",
|
|
4102
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
4103
|
+
length: "Minimaal 8 karakters",
|
|
4104
|
+
},
|
|
4105
|
+
"nl-BE": {
|
|
4106
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4107
|
+
number: "Minimaal 1 getal",
|
|
4108
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
4109
|
+
length: "Minimaal 8 karakters",
|
|
4110
|
+
},
|
|
4111
|
+
// "en-GB": {
|
|
4112
|
+
// capitalLetter: "At least 1 capital letter",
|
|
4113
|
+
// number: "At least 1 number",
|
|
4114
|
+
// specialCharacter: "At least 1 special character",
|
|
4115
|
+
// length: "At least 8 characters",
|
|
4116
|
+
// },
|
|
4117
|
+
// "fr-FR": {
|
|
4118
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
4119
|
+
// number: "Au moins un chiffre",
|
|
4120
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
4121
|
+
// length: "Au moins 8 caractères",
|
|
4122
|
+
// },
|
|
4123
|
+
// "fr-BE": {
|
|
4124
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
4125
|
+
// number: "Au moins un chiffre",
|
|
4126
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
4127
|
+
// length: "Au moins 8 caractères",
|
|
4128
|
+
// },
|
|
4129
|
+
// "de-DE": {
|
|
4130
|
+
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
4131
|
+
// number: "Mindestens 1 Zahl",
|
|
4132
|
+
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
4133
|
+
// length: "Mindestens 8 Zeichen",
|
|
4134
|
+
// },
|
|
4135
|
+
};
|
|
4006
4136
|
|
|
4007
4137
|
var PasswordInput = function (props) {
|
|
4008
|
-
var _a = useState(
|
|
4138
|
+
var _a = useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
|
|
4139
|
+
var _b = useState(false), isVisible = _b[0], setIsVisible = _b[1];
|
|
4009
4140
|
var toggle = function () {
|
|
4010
4141
|
if (!props.disabled)
|
|
4011
4142
|
setIsVisible(!isVisible);
|
|
4012
4143
|
};
|
|
4013
4144
|
var onChange = function (e) {
|
|
4145
|
+
setValue(e.target.value);
|
|
4014
4146
|
if (!props.disabled && !!props.onChange)
|
|
4015
4147
|
props.onChange(e.target.value);
|
|
4016
4148
|
};
|
|
@@ -4018,7 +4150,7 @@ var PasswordInput = function (props) {
|
|
|
4018
4150
|
if (props.onKeyPress)
|
|
4019
4151
|
props.onKeyPress(e);
|
|
4020
4152
|
};
|
|
4021
|
-
return (jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })));
|
|
4153
|
+
return (jsxs(Container$l, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
4022
4154
|
};
|
|
4023
4155
|
|
|
4024
4156
|
function requiredArgs(required, args) {
|
|
@@ -4182,7 +4314,7 @@ Input.Date = DateInput;
|
|
|
4182
4314
|
|
|
4183
4315
|
var Logo = function (props) { return (jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxs("g", { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" })] }), jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsx$1("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" }), jsx$1("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" })] }))] }))); };
|
|
4184
4316
|
|
|
4185
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
4317
|
+
var Wrapper$6 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4186
4318
|
var size = _a.size;
|
|
4187
4319
|
switch (size) {
|
|
4188
4320
|
default:
|
|
@@ -4192,7 +4324,7 @@ var Wrapper$6 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTem
|
|
|
4192
4324
|
return "116px";
|
|
4193
4325
|
}
|
|
4194
4326
|
});
|
|
4195
|
-
var templateObject_1$
|
|
4327
|
+
var templateObject_1$I;
|
|
4196
4328
|
|
|
4197
4329
|
var medals = {
|
|
4198
4330
|
small: {
|
|
@@ -4208,11 +4340,11 @@ var medals = {
|
|
|
4208
4340
|
};
|
|
4209
4341
|
var Medal = function (props) { return (jsx$1(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4210
4342
|
|
|
4211
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
4343
|
+
var Wrapper$5 = styled.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) {
|
|
4212
4344
|
var disabled = _a.disabled;
|
|
4213
4345
|
return (disabled ? "49.5px" : "");
|
|
4214
4346
|
});
|
|
4215
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
4347
|
+
var StyledInputNumber = styled.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) {
|
|
4216
4348
|
var disabled = _a.disabled;
|
|
4217
4349
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4218
4350
|
}, function (_a) {
|
|
@@ -4225,7 +4357,7 @@ var StyledInputNumber = styled.input(templateObject_2$s || (templateObject_2$s =
|
|
|
4225
4357
|
var disabled = _a.disabled;
|
|
4226
4358
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4227
4359
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4228
|
-
var templateObject_1$
|
|
4360
|
+
var templateObject_1$H, templateObject_2$u;
|
|
4229
4361
|
|
|
4230
4362
|
var Number$1 = function (props) {
|
|
4231
4363
|
var inputRef = useRef(null);
|
|
@@ -4262,43 +4394,9 @@ var Number$1 = function (props) {
|
|
|
4262
4394
|
return (jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx$1(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsx$1(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
4263
4395
|
};
|
|
4264
4396
|
|
|
4265
|
-
var StyledParagraph = styled.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) {
|
|
4266
|
-
var size = _a.size;
|
|
4267
|
-
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4268
|
-
}, function (_a) {
|
|
4269
|
-
var weight = _a.weight;
|
|
4270
|
-
switch (weight) {
|
|
4271
|
-
case "regular":
|
|
4272
|
-
return 400;
|
|
4273
|
-
default:
|
|
4274
|
-
case "medium":
|
|
4275
|
-
return 500;
|
|
4276
|
-
}
|
|
4277
|
-
}, function (_a) {
|
|
4278
|
-
var size = _a.size;
|
|
4279
|
-
return size
|
|
4280
|
-
? theme.paragraph[size].lineHeight
|
|
4281
|
-
: theme.paragraph.medium.lineHeight;
|
|
4282
|
-
}, function (_a) {
|
|
4283
|
-
var color = _a.color;
|
|
4284
|
-
switch (color) {
|
|
4285
|
-
case "white":
|
|
4286
|
-
return theme.colors.lightGray.light;
|
|
4287
|
-
default:
|
|
4288
|
-
case "lightGray":
|
|
4289
|
-
return theme.colors.darkGray.light;
|
|
4290
|
-
case "darkGray":
|
|
4291
|
-
return theme.colors.darkGray.dark;
|
|
4292
|
-
}
|
|
4293
|
-
}, function (_a) {
|
|
4294
|
-
var align = _a.align;
|
|
4295
|
-
return align;
|
|
4296
|
-
});
|
|
4297
|
-
var templateObject_1$F;
|
|
4298
|
-
|
|
4299
4397
|
var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4300
4398
|
|
|
4301
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
4399
|
+
var StyledRadio = styled.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) {
|
|
4302
4400
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4303
4401
|
if (disabled)
|
|
4304
4402
|
return theme.colors.lightGray.darker;
|
|
@@ -4326,7 +4424,7 @@ var StyledRadio = styled.div(templateObject_1$E || (templateObject_1$E = __makeT
|
|
|
4326
4424
|
return theme.colors.green.base;
|
|
4327
4425
|
return "";
|
|
4328
4426
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4329
|
-
var templateObject_1$
|
|
4427
|
+
var templateObject_1$G;
|
|
4330
4428
|
|
|
4331
4429
|
var Radio = function (props) {
|
|
4332
4430
|
var _a, _b;
|
|
@@ -4358,7 +4456,7 @@ var Radio = function (props) {
|
|
|
4358
4456
|
return (jsx$1(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: jsx$1("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
4359
4457
|
};
|
|
4360
4458
|
|
|
4361
|
-
var StyledRange = styled.div(templateObject_1$
|
|
4459
|
+
var StyledRange = styled.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) {
|
|
4362
4460
|
var value = _a.value, disabled = _a.disabled;
|
|
4363
4461
|
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 )");
|
|
4364
4462
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4368,7 +4466,7 @@ var StyledRange = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
4368
4466
|
var disabled = _a.disabled;
|
|
4369
4467
|
return disabled ? "not-allowed" : "pointer";
|
|
4370
4468
|
});
|
|
4371
|
-
var templateObject_1$
|
|
4469
|
+
var templateObject_1$F;
|
|
4372
4470
|
|
|
4373
4471
|
var Range = function (props) {
|
|
4374
4472
|
var _a;
|
|
@@ -4397,11 +4495,11 @@ var Range = function (props) {
|
|
|
4397
4495
|
return (jsx$1(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsx$1("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 }) })));
|
|
4398
4496
|
};
|
|
4399
4497
|
|
|
4400
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
4498
|
+
var Wrapper$4 = styled.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) {
|
|
4401
4499
|
var disabled = _a.disabled;
|
|
4402
4500
|
return (disabled ? "not-allowed" : "pointer");
|
|
4403
4501
|
});
|
|
4404
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
4502
|
+
var StyledSelect = styled.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) {
|
|
4405
4503
|
var disabled = _a.disabled;
|
|
4406
4504
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4407
4505
|
}, function (_a) {
|
|
@@ -4414,7 +4512,7 @@ var StyledSelect = styled.select(templateObject_2$r || (templateObject_2$r = __m
|
|
|
4414
4512
|
var isChanged = _a.isChanged;
|
|
4415
4513
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4416
4514
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4417
|
-
var templateObject_1$
|
|
4515
|
+
var templateObject_1$E, templateObject_2$t;
|
|
4418
4516
|
|
|
4419
4517
|
var Select = function (props) {
|
|
4420
4518
|
var _a;
|
|
@@ -4436,18 +4534,18 @@ var Select = function (props) {
|
|
|
4436
4534
|
return (jsxs(Wrapper$4, { children: [jsx$1(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx$1("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
4437
4535
|
};
|
|
4438
4536
|
|
|
4439
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
4537
|
+
var StyledSpacer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4440
4538
|
var horizontal = _a.horizontal;
|
|
4441
4539
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4442
4540
|
}, function (_a) {
|
|
4443
4541
|
var vertical = _a.vertical;
|
|
4444
4542
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4445
4543
|
});
|
|
4446
|
-
var templateObject_1$
|
|
4544
|
+
var templateObject_1$D;
|
|
4447
4545
|
|
|
4448
4546
|
var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
|
|
4449
4547
|
|
|
4450
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
4548
|
+
var StyledSubheading = styled.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) {
|
|
4451
4549
|
var size = _a.size;
|
|
4452
4550
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4453
4551
|
}, function (_a) {
|
|
@@ -4475,18 +4573,18 @@ var StyledSubheading = styled.p(templateObject_1$A || (templateObject_1$A = __ma
|
|
|
4475
4573
|
return theme.colors.darkGray.dark;
|
|
4476
4574
|
}
|
|
4477
4575
|
});
|
|
4478
|
-
var templateObject_1$
|
|
4576
|
+
var templateObject_1$C;
|
|
4479
4577
|
|
|
4480
4578
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4481
4579
|
|
|
4482
|
-
var Container$k = styled.div(templateObject_1$
|
|
4483
|
-
var templateObject_1$
|
|
4580
|
+
var Container$k = styled.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);
|
|
4581
|
+
var templateObject_1$B;
|
|
4484
4582
|
|
|
4485
4583
|
var Tag = function (props) {
|
|
4486
4584
|
return jsx$1(Container$k, { children: props.children });
|
|
4487
4585
|
};
|
|
4488
4586
|
|
|
4489
|
-
var Container$j = styled.div(templateObject_1$
|
|
4587
|
+
var Container$j = styled.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) {
|
|
4490
4588
|
var disabled = _a.disabled;
|
|
4491
4589
|
return (disabled ? "not-allowed" : "pointer");
|
|
4492
4590
|
}, function (_a) {
|
|
@@ -4504,7 +4602,7 @@ var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeT
|
|
|
4504
4602
|
var disabled = _a.disabled;
|
|
4505
4603
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4506
4604
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4507
|
-
var templateObject_1$
|
|
4605
|
+
var templateObject_1$A;
|
|
4508
4606
|
|
|
4509
4607
|
var Toggle = function (props) {
|
|
4510
4608
|
var _a;
|
|
@@ -4535,7 +4633,7 @@ var Toggle = function (props) {
|
|
|
4535
4633
|
return (jsx$1(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: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
4536
4634
|
};
|
|
4537
4635
|
|
|
4538
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
4636
|
+
var Wrapper$3 = styled.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) {
|
|
4539
4637
|
var level = _a.level;
|
|
4540
4638
|
switch (level) {
|
|
4541
4639
|
case 1:
|
|
@@ -4546,7 +4644,7 @@ var Wrapper$3 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTem
|
|
|
4546
4644
|
return "70px";
|
|
4547
4645
|
}
|
|
4548
4646
|
});
|
|
4549
|
-
var templateObject_1$
|
|
4647
|
+
var templateObject_1$z;
|
|
4550
4648
|
|
|
4551
4649
|
var trophies = {
|
|
4552
4650
|
1: {
|
|
@@ -4582,7 +4680,7 @@ var trophies = {
|
|
|
4582
4680
|
};
|
|
4583
4681
|
var Trophy = function (props) { return (jsx$1(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4584
4682
|
|
|
4585
|
-
var Container$i = styled.div(templateObject_1$
|
|
4683
|
+
var Container$i = styled.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) {
|
|
4586
4684
|
var type = _a.type;
|
|
4587
4685
|
switch (type) {
|
|
4588
4686
|
case "success":
|
|
@@ -4599,11 +4697,11 @@ var Container$i = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
|
|
|
4599
4697
|
return theme.colors.red.base;
|
|
4600
4698
|
}
|
|
4601
4699
|
});
|
|
4602
|
-
var templateObject_1$
|
|
4700
|
+
var templateObject_1$y;
|
|
4603
4701
|
|
|
4604
4702
|
var Alert = function (props) { return (jsxs(Container$i, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, { children: props.message })] }))); };
|
|
4605
4703
|
|
|
4606
|
-
var StyledCard = styled.div(templateObject_1$
|
|
4704
|
+
var StyledCard = styled.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) {
|
|
4607
4705
|
var bordered = _a.bordered;
|
|
4608
4706
|
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4609
4707
|
}, function (_a) {
|
|
@@ -4615,23 +4713,23 @@ var StyledCard = styled.div(templateObject_1$v || (templateObject_1$v = __makeTe
|
|
|
4615
4713
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4616
4714
|
: "";
|
|
4617
4715
|
});
|
|
4618
|
-
var Ellipse = styled.div(templateObject_2$
|
|
4716
|
+
var Ellipse = styled.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) {
|
|
4619
4717
|
var color = _a.color;
|
|
4620
4718
|
return color ? theme.colors[color].light : "";
|
|
4621
4719
|
});
|
|
4622
|
-
var Content = styled.div(templateObject_3$
|
|
4623
|
-
var templateObject_1$
|
|
4720
|
+
var Content = styled.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"])));
|
|
4721
|
+
var templateObject_1$x, templateObject_2$s, templateObject_3$9;
|
|
4624
4722
|
|
|
4625
4723
|
var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
|
|
4626
4724
|
|
|
4627
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
4628
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
4629
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
4630
|
-
var Label$9 = styled(StyledParagraph)(templateObject_4$
|
|
4725
|
+
var Fieldset$1 = styled.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"])));
|
|
4726
|
+
var CheckboxContainer = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4727
|
+
var CheckboxWrapper = styled.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"])));
|
|
4728
|
+
var Label$9 = styled(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) {
|
|
4631
4729
|
var weight = _a.weight;
|
|
4632
4730
|
return weight || 500;
|
|
4633
|
-
}, theme.colors.darkGray.base);
|
|
4634
|
-
var templateObject_1$
|
|
4731
|
+
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
4732
|
+
var templateObject_1$w, templateObject_2$r, templateObject_3$8, templateObject_4$6;
|
|
4635
4733
|
|
|
4636
4734
|
var Checkboxes = function (props) {
|
|
4637
4735
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4654,12 +4752,12 @@ var Checkboxes = function (props) {
|
|
|
4654
4752
|
}) })] }));
|
|
4655
4753
|
};
|
|
4656
4754
|
|
|
4657
|
-
var Container$h = styled.div(templateObject_1$
|
|
4658
|
-
var Item = styled.div(templateObject_2$
|
|
4755
|
+
var Container$h = styled.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);
|
|
4756
|
+
var Item = styled.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) {
|
|
4659
4757
|
var isOpen = _a.isOpen;
|
|
4660
4758
|
return (isOpen ? "" : "none");
|
|
4661
|
-
}, theme.colors.lightGray.
|
|
4662
|
-
var templateObject_1$
|
|
4759
|
+
}, theme.colors.lightGray.dark);
|
|
4760
|
+
var templateObject_1$v, templateObject_2$q;
|
|
4663
4761
|
|
|
4664
4762
|
var Collapse = function (props) {
|
|
4665
4763
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4677,9 +4775,9 @@ var Collapse = function (props) {
|
|
|
4677
4775
|
}) })));
|
|
4678
4776
|
};
|
|
4679
4777
|
|
|
4680
|
-
var Container$g = styled.div(templateObject_1$
|
|
4681
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
4682
|
-
var templateObject_1$
|
|
4778
|
+
var Container$g = styled.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"])));
|
|
4779
|
+
var Label$8 = styled(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);
|
|
4780
|
+
var templateObject_1$u, templateObject_2$p;
|
|
4683
4781
|
|
|
4684
4782
|
var DateInputField = function (props) {
|
|
4685
4783
|
var onChange = function (value) {
|
|
@@ -4693,19 +4791,55 @@ var DateInputField = function (props) {
|
|
|
4693
4791
|
return (jsxs(Container$g, { children: [jsx$1(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 })] }));
|
|
4694
4792
|
};
|
|
4695
4793
|
|
|
4696
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
4697
|
-
var
|
|
4698
|
-
|
|
4794
|
+
var StyledIconButton = styled(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) {
|
|
4795
|
+
var size = _a.size;
|
|
4796
|
+
return (size === "small" ? "30px" : "40px");
|
|
4797
|
+
}, function (_a) {
|
|
4798
|
+
var size = _a.size;
|
|
4799
|
+
return (size === "small" ? "30px" : "40px");
|
|
4800
|
+
}, function (_a) {
|
|
4801
|
+
var size = _a.size;
|
|
4802
|
+
return (size === "small" ? "30px" : "40px");
|
|
4803
|
+
}, function (_a) {
|
|
4804
|
+
var size = _a.size;
|
|
4805
|
+
return (size === "small" ? "30px" : "40px");
|
|
4806
|
+
}, function (_a) {
|
|
4807
|
+
var size = _a.size;
|
|
4808
|
+
return (size === "small" ? "28px" : "38px");
|
|
4809
|
+
}, function (_a) {
|
|
4810
|
+
var size = _a.size;
|
|
4811
|
+
return (size === "small" ? "28px" : "38px");
|
|
4812
|
+
});
|
|
4813
|
+
var GhostIconButton = styled(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) {
|
|
4814
|
+
var size = _a.size;
|
|
4815
|
+
return (size === "small" ? "30px" : "40px");
|
|
4816
|
+
}, function (_a) {
|
|
4817
|
+
var size = _a.size;
|
|
4818
|
+
return (size === "small" ? "30px" : "40px");
|
|
4819
|
+
}, function (_a) {
|
|
4820
|
+
var size = _a.size;
|
|
4821
|
+
return (size === "small" ? "30px" : "40px");
|
|
4822
|
+
}, function (_a) {
|
|
4823
|
+
var size = _a.size;
|
|
4824
|
+
return (size === "small" ? "30px" : "40px");
|
|
4825
|
+
}, function (_a) {
|
|
4826
|
+
var size = _a.size;
|
|
4827
|
+
return (size === "small" ? "32px" : "40px");
|
|
4828
|
+
}, function (_a) {
|
|
4829
|
+
var size = _a.size;
|
|
4830
|
+
return (size === "small" ? "32px" : "40px");
|
|
4831
|
+
});
|
|
4832
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4699
4833
|
|
|
4700
4834
|
var IconButton = function (props) {
|
|
4701
4835
|
if (props.color === "white")
|
|
4702
|
-
return (jsx$1(GhostIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: "small", color: "gray" }) })));
|
|
4703
|
-
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4836
|
+
return (jsx$1(GhostIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "gray" }) })));
|
|
4837
|
+
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
4704
4838
|
};
|
|
4705
4839
|
|
|
4706
|
-
var Container$f = styled.div(templateObject_1$
|
|
4707
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
4708
|
-
var templateObject_1$
|
|
4840
|
+
var Container$f = styled.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"])));
|
|
4841
|
+
var Label$7 = styled(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);
|
|
4842
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4709
4843
|
|
|
4710
4844
|
var InputField = function (props) {
|
|
4711
4845
|
var onChange = function (value) {
|
|
@@ -4719,7 +4853,7 @@ var InputField = function (props) {
|
|
|
4719
4853
|
return (jsxs(Container$f, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
4720
4854
|
};
|
|
4721
4855
|
|
|
4722
|
-
var Container$e = styled.div(templateObject_1$
|
|
4856
|
+
var Container$e = styled.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) {
|
|
4723
4857
|
var status = _a.status, color = _a.color;
|
|
4724
4858
|
switch (status) {
|
|
4725
4859
|
case "passed":
|
|
@@ -4763,23 +4897,23 @@ var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
4763
4897
|
return theme.colors.darkGray.light;
|
|
4764
4898
|
}
|
|
4765
4899
|
});
|
|
4766
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
4767
|
-
var templateObject_1$
|
|
4900
|
+
var CheckIconWrapper = styled.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"])));
|
|
4901
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4768
4902
|
|
|
4769
4903
|
var Key$1 = function (props) { return (jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
4770
4904
|
marginTop: "13px",
|
|
4771
4905
|
transform: "scale(2)",
|
|
4772
4906
|
} }, { children: jsx$1("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" }) }))) : (jsx$1(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
4773
4907
|
|
|
4774
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
4908
|
+
var Wrapper$2 = styled.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) {
|
|
4775
4909
|
var chevron = _a.chevron;
|
|
4776
4910
|
return (chevron === "left" ? "4px" : "");
|
|
4777
4911
|
}, function (_a) {
|
|
4778
4912
|
var chevron = _a.chevron;
|
|
4779
4913
|
return (chevron === "right" ? "4px" : "");
|
|
4780
4914
|
});
|
|
4781
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
4782
|
-
var templateObject_1$
|
|
4915
|
+
var StyledLink = styled(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);
|
|
4916
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4783
4917
|
|
|
4784
4918
|
var Link = function (props) {
|
|
4785
4919
|
var onClick = function (e) {
|
|
@@ -4791,15 +4925,15 @@ var Link = function (props) {
|
|
|
4791
4925
|
return (jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx$1(Icon, { type: "chevronLeft", color: "green" }), jsx$1(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx$1(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
4792
4926
|
};
|
|
4793
4927
|
|
|
4794
|
-
var Container$d = styled.div(templateObject_1$
|
|
4928
|
+
var Container$d = styled.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) {
|
|
4795
4929
|
var text = _a.text;
|
|
4796
4930
|
return (text ? "20px" : "");
|
|
4797
4931
|
});
|
|
4798
|
-
var templateObject_1$
|
|
4932
|
+
var templateObject_1$p;
|
|
4799
4933
|
|
|
4800
4934
|
var Loading = function (props) { return (jsxs(Container$d, __assign$2({}, props, { children: [jsx$1(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
4801
4935
|
|
|
4802
|
-
var Container$c = styled.div(templateObject_1$
|
|
4936
|
+
var Container$c = styled.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) {
|
|
4803
4937
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4804
4938
|
if (dropdownIsVisible) {
|
|
4805
4939
|
switch (color) {
|
|
@@ -4812,8 +4946,8 @@ var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
|
|
|
4812
4946
|
}
|
|
4813
4947
|
return "";
|
|
4814
4948
|
});
|
|
4815
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
4816
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
4949
|
+
var SelectedLocaleWrapper = styled.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"])));
|
|
4950
|
+
var DropdownContainer = styled.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) {
|
|
4817
4951
|
var color = _a.color;
|
|
4818
4952
|
switch (color) {
|
|
4819
4953
|
default:
|
|
@@ -4823,8 +4957,8 @@ var DropdownContainer = styled.div(templateObject_3$8 || (templateObject_3$8 = _
|
|
|
4823
4957
|
return theme.colors.lightGray.dark;
|
|
4824
4958
|
}
|
|
4825
4959
|
});
|
|
4826
|
-
var LocaleWrapper = styled.div(templateObject_4$
|
|
4827
|
-
var templateObject_1$
|
|
4960
|
+
var LocaleWrapper = styled.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);
|
|
4961
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$7, templateObject_4$5;
|
|
4828
4962
|
|
|
4829
4963
|
var LocaleSelect = function (props) {
|
|
4830
4964
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4838,17 +4972,17 @@ var LocaleSelect = function (props) {
|
|
|
4838
4972
|
.map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
4839
4973
|
};
|
|
4840
4974
|
|
|
4841
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
4842
|
-
var templateObject_1$
|
|
4975
|
+
var Wrapper$1 = styled.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"])));
|
|
4976
|
+
var templateObject_1$n;
|
|
4843
4977
|
|
|
4844
4978
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
4845
4979
|
|
|
4846
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
4980
|
+
var NotificationContainer = styled.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) {
|
|
4847
4981
|
var contrast = _a.contrast;
|
|
4848
4982
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4849
4983
|
});
|
|
4850
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
4851
|
-
var templateObject_1$
|
|
4984
|
+
var ButtonContainer = styled.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"])));
|
|
4985
|
+
var templateObject_1$m, templateObject_2$j;
|
|
4852
4986
|
|
|
4853
4987
|
var Notification = function (props) {
|
|
4854
4988
|
if (!props.isVisible)
|
|
@@ -4856,9 +4990,9 @@ var Notification = function (props) {
|
|
|
4856
4990
|
return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
4857
4991
|
};
|
|
4858
4992
|
|
|
4859
|
-
var Container$b = styled.div(templateObject_1$
|
|
4860
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
4861
|
-
var templateObject_1$
|
|
4993
|
+
var Container$b = styled.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"])));
|
|
4994
|
+
var Label$6 = styled(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);
|
|
4995
|
+
var templateObject_1$l, templateObject_2$i;
|
|
4862
4996
|
|
|
4863
4997
|
var NumberField = function (props) {
|
|
4864
4998
|
var onChange = function (value) {
|
|
@@ -4872,100 +5006,12 @@ var NumberField = function (props) {
|
|
|
4872
5006
|
return (jsxs(Container$b, { children: [jsx$1(Label$6, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 })] }));
|
|
4873
5007
|
};
|
|
4874
5008
|
|
|
4875
|
-
var
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4879
|
-
exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
|
|
4880
|
-
var hasNumber = function (input) {
|
|
4881
|
-
var regex = new RegExp(/\d/g);
|
|
4882
|
-
return regex.test(input);
|
|
4883
|
-
};
|
|
4884
|
-
exports.hasNumber = hasNumber;
|
|
4885
|
-
var hasSpecialCharacter = function (input) {
|
|
4886
|
-
var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
|
|
4887
|
-
return regex.test(input);
|
|
4888
|
-
};
|
|
4889
|
-
exports.hasSpecialCharacter = hasSpecialCharacter;
|
|
4890
|
-
var hasCapitalLetter = function (input) {
|
|
4891
|
-
var regex = new RegExp(/[A-Z]/g);
|
|
4892
|
-
return regex.test(input);
|
|
4893
|
-
};
|
|
4894
|
-
exports.hasCapitalLetter = hasCapitalLetter;
|
|
4895
|
-
var isValidEmail = function (email) {
|
|
4896
|
-
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,}))$/);
|
|
4897
|
-
return regex.test(email);
|
|
4898
|
-
};
|
|
4899
|
-
exports.isValidEmail = isValidEmail;
|
|
4900
|
-
var isValidUsername = function (username) {
|
|
4901
|
-
return username.length > 5 &&
|
|
4902
|
-
username.length <= 15 &&
|
|
4903
|
-
username.indexOf(" ") < 0 &&
|
|
4904
|
-
!(0, exports.isValidEmail)(username);
|
|
4905
|
-
};
|
|
4906
|
-
exports.isValidUsername = isValidUsername;
|
|
4907
|
-
var isStrongPassword = function (password) {
|
|
4908
|
-
return password.length >= 8 &&
|
|
4909
|
-
(0, exports.hasNumber)(password) &&
|
|
4910
|
-
(0, exports.hasSpecialCharacter)(password) &&
|
|
4911
|
-
(0, exports.hasCapitalLetter)(password);
|
|
4912
|
-
};
|
|
4913
|
-
exports.isStrongPassword = isStrongPassword;
|
|
4914
|
-
}(expressions));
|
|
4915
|
-
|
|
4916
|
-
var Container$a = styled.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"])));
|
|
4917
|
-
var Label$5 = styled(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);
|
|
4918
|
-
var HelperContainer = styled.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"])));
|
|
4919
|
-
var fadeIn = keyframes$1(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"])));
|
|
4920
|
-
var Helper = styled(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) {
|
|
4921
|
-
var isOk = _a.isOk;
|
|
4922
|
-
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4923
|
-
}, fadeIn);
|
|
4924
|
-
var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4925
|
-
|
|
4926
|
-
var translations = {
|
|
4927
|
-
"nl-NL": {
|
|
4928
|
-
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4929
|
-
number: "Minimaal 1 getal",
|
|
4930
|
-
specialCharacter: "Minimaal 1 leesteken",
|
|
4931
|
-
length: "Minimaal 8 karakters",
|
|
4932
|
-
},
|
|
4933
|
-
"nl-BE": {
|
|
4934
|
-
capitalLetter: "Minimaal 1 hoofdletter",
|
|
4935
|
-
number: "Minimaal 1 getal",
|
|
4936
|
-
specialCharacter: "Minimaal 1 leesteken",
|
|
4937
|
-
length: "Minimaal 8 karakters",
|
|
4938
|
-
},
|
|
4939
|
-
// "en-GB": {
|
|
4940
|
-
// capitalLetter: "At least 1 capital letter",
|
|
4941
|
-
// number: "At least 1 number",
|
|
4942
|
-
// specialCharacter: "At least 1 special character",
|
|
4943
|
-
// length: "At least 8 characters",
|
|
4944
|
-
// },
|
|
4945
|
-
// "fr-FR": {
|
|
4946
|
-
// capitalLetter: "Au moins une lettre majuscule",
|
|
4947
|
-
// number: "Au moins un chiffre",
|
|
4948
|
-
// specialCharacter: "Au moins un caractère spécial",
|
|
4949
|
-
// length: "Au moins 8 caractères",
|
|
4950
|
-
// },
|
|
4951
|
-
// "fr-BE": {
|
|
4952
|
-
// capitalLetter: "Au moins une lettre majuscule",
|
|
4953
|
-
// number: "Au moins un chiffre",
|
|
4954
|
-
// specialCharacter: "Au moins un caractère spécial",
|
|
4955
|
-
// length: "Au moins 8 caractères",
|
|
4956
|
-
// },
|
|
4957
|
-
// "de-DE": {
|
|
4958
|
-
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
4959
|
-
// number: "Mindestens 1 Zahl",
|
|
4960
|
-
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
4961
|
-
// length: "Mindestens 8 Zeichen",
|
|
4962
|
-
// },
|
|
4963
|
-
};
|
|
5009
|
+
var Container$a = styled.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"])));
|
|
5010
|
+
var Label$5 = styled(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);
|
|
5011
|
+
var templateObject_1$k, templateObject_2$h;
|
|
4964
5012
|
|
|
4965
5013
|
var PasswordInputField = function (props) {
|
|
4966
|
-
var _a = useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
|
|
4967
5014
|
var onChange = function (value) {
|
|
4968
|
-
setValue(value);
|
|
4969
5015
|
if (props.onChange)
|
|
4970
5016
|
props.onChange(props.name, value);
|
|
4971
5017
|
};
|
|
@@ -4978,7 +5024,7 @@ var PasswordInputField = function (props) {
|
|
|
4978
5024
|
if (props.onBlur)
|
|
4979
5025
|
props.onBlur(props.name);
|
|
4980
5026
|
};
|
|
4981
|
-
return (jsxs(Container$a, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 })
|
|
5027
|
+
return (jsxs(Container$a, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 })] }));
|
|
4982
5028
|
};
|
|
4983
5029
|
|
|
4984
5030
|
var generateRandomString = function (length) {
|
|
@@ -4991,7 +5037,7 @@ var generateRandomString = function (length) {
|
|
|
4991
5037
|
return string;
|
|
4992
5038
|
};
|
|
4993
5039
|
|
|
4994
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
5040
|
+
var PopupContainer = styled.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) {
|
|
4995
5041
|
var isVisible = _a.isVisible;
|
|
4996
5042
|
return (isVisible ? "100%" : "0%");
|
|
4997
5043
|
}, function (_a) {
|
|
@@ -5004,7 +5050,7 @@ var PopupContainer = styled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
5004
5050
|
var contrast = _a.contrast;
|
|
5005
5051
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5006
5052
|
});
|
|
5007
|
-
var templateObject_1$
|
|
5053
|
+
var templateObject_1$j;
|
|
5008
5054
|
|
|
5009
5055
|
var Popup = function (props) {
|
|
5010
5056
|
var popupRef = useRef(null);
|
|
@@ -5040,8 +5086,8 @@ var Popup = function (props) {
|
|
|
5040
5086
|
return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
5041
5087
|
};
|
|
5042
5088
|
|
|
5043
|
-
var Wrapper = styled.div(templateObject_1$
|
|
5044
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
5089
|
+
var Wrapper = styled.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"])));
|
|
5090
|
+
var StyledProgressBar = styled.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) {
|
|
5045
5091
|
var showInfo = _a.showInfo;
|
|
5046
5092
|
return (showInfo ? "10px" : "");
|
|
5047
5093
|
});
|
|
@@ -5052,12 +5098,12 @@ var Indicator$1 = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeT
|
|
|
5052
5098
|
var color = _a.color;
|
|
5053
5099
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5054
5100
|
});
|
|
5055
|
-
var templateObject_1$
|
|
5101
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$6;
|
|
5056
5102
|
|
|
5057
5103
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
5058
5104
|
|
|
5059
|
-
var Container$9 = styled.ol(templateObject_1$
|
|
5060
|
-
var Step$1 = styled.li(templateObject_2$
|
|
5105
|
+
var Container$9 = styled.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"])));
|
|
5106
|
+
var Step$1 = styled.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) {
|
|
5061
5107
|
var status = _a.status;
|
|
5062
5108
|
return (!!status ? "pointer" : "not-allowed");
|
|
5063
5109
|
}, function (_a) {
|
|
@@ -5079,7 +5125,7 @@ var Step$1 = styled.li(templateObject_2$d || (templateObject_2$d = __makeTemplat
|
|
|
5079
5125
|
var hasTitle = _a.hasTitle;
|
|
5080
5126
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5081
5127
|
}, theme.colors.lightGray.dark);
|
|
5082
|
-
var templateObject_1$
|
|
5128
|
+
var templateObject_1$h, templateObject_2$f;
|
|
5083
5129
|
|
|
5084
5130
|
var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5085
5131
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5096,8 +5142,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.st
|
|
|
5096
5142
|
return (jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsx$1("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
5097
5143
|
}) })); };
|
|
5098
5144
|
|
|
5099
|
-
var Container$8 = styled.ol(templateObject_1$
|
|
5100
|
-
var Step = styled.li(templateObject_2$
|
|
5145
|
+
var Container$8 = styled.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"])));
|
|
5146
|
+
var Step = styled.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) {
|
|
5101
5147
|
var status = _a.status;
|
|
5102
5148
|
return (!!status ? "pointer" : "not-allowed");
|
|
5103
5149
|
}, function (_a) {
|
|
@@ -5116,7 +5162,7 @@ var Step = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateO
|
|
|
5116
5162
|
? theme.colors.lightGray.light
|
|
5117
5163
|
: theme.colors.darkGray.light;
|
|
5118
5164
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5119
|
-
var templateObject_1$
|
|
5165
|
+
var templateObject_1$g, templateObject_2$e;
|
|
5120
5166
|
|
|
5121
5167
|
var Steps$1 = function (props) { return (jsx$1(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5122
5168
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5137,6 +5183,56 @@ var Steps = function (props) {
|
|
|
5137
5183
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
5138
5184
|
};
|
|
5139
5185
|
|
|
5186
|
+
var TabsContainer$1 = styled.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);
|
|
5187
|
+
var Tab$1 = styled.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) {
|
|
5188
|
+
var isActive = _a.isActive;
|
|
5189
|
+
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
5190
|
+
}, function (_a) {
|
|
5191
|
+
var isActive = _a.isActive;
|
|
5192
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5193
|
+
}, theme.colors.blue.base);
|
|
5194
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5195
|
+
|
|
5196
|
+
var Tabs$2 = function (props) {
|
|
5197
|
+
var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5198
|
+
var onChangeTab = function (key) {
|
|
5199
|
+
setActiveTab(key);
|
|
5200
|
+
if (props.onChange)
|
|
5201
|
+
props.onChange(key);
|
|
5202
|
+
};
|
|
5203
|
+
return (jsx$1(TabsContainer$1, { children: props.items.map(function (_a) {
|
|
5204
|
+
var key = _a.key, label = _a.label;
|
|
5205
|
+
return (jsx$1(Tab$1, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsx$1(Paragraph, { children: label }) }), key));
|
|
5206
|
+
}) }));
|
|
5207
|
+
};
|
|
5208
|
+
|
|
5209
|
+
var TabsContainer = styled.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);
|
|
5210
|
+
var Tab = styled.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) {
|
|
5211
|
+
var isActive = _a.isActive;
|
|
5212
|
+
return (isActive ? "block" : "none");
|
|
5213
|
+
}, theme.colors.blue.base, function (_a) {
|
|
5214
|
+
var isActive = _a.isActive;
|
|
5215
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5216
|
+
}, theme.colors.blue.base);
|
|
5217
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5218
|
+
|
|
5219
|
+
var Tabs$1 = function (props) {
|
|
5220
|
+
var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5221
|
+
var onChangeTab = function (key) {
|
|
5222
|
+
setActiveTab(key);
|
|
5223
|
+
if (props.onChange)
|
|
5224
|
+
props.onChange(key);
|
|
5225
|
+
};
|
|
5226
|
+
return (jsx$1(TabsContainer, { children: props.items.map(function (_a) {
|
|
5227
|
+
var key = _a.key, label = _a.label;
|
|
5228
|
+
return (jsx$1(Tab, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsx$1(Paragraph, { children: label }) }), key));
|
|
5229
|
+
}) }));
|
|
5230
|
+
};
|
|
5231
|
+
|
|
5232
|
+
var Tabs = function (props) {
|
|
5233
|
+
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
5234
|
+
};
|
|
5235
|
+
|
|
5140
5236
|
var Fieldset = styled.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"])));
|
|
5141
5237
|
var RadioContainer = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5142
5238
|
var RadioWrapper = styled.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"])));
|
|
@@ -11373,8 +11469,8 @@ var SpecialRow = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTe
|
|
|
11373
11469
|
var TopRow = styled.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"])));
|
|
11374
11470
|
var StartRow = styled.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"])));
|
|
11375
11471
|
var BottomRow = styled.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"])));
|
|
11376
|
-
var SpacebarRow = styled.div(templateObject_6$
|
|
11377
|
-
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$
|
|
11472
|
+
var SpacebarRow = styled.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"])));
|
|
11473
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
11378
11474
|
|
|
11379
11475
|
var Keyboard = function (props) {
|
|
11380
11476
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11447,27 +11543,33 @@ var Keyboard = function (props) {
|
|
|
11447
11543
|
};
|
|
11448
11544
|
|
|
11449
11545
|
var Mask = styled.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"])));
|
|
11450
|
-
var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n
|
|
11546
|
+
var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
11451
11547
|
var width = _a.width;
|
|
11452
|
-
|
|
11548
|
+
if (!width)
|
|
11549
|
+
return "720px";
|
|
11550
|
+
if (typeof width === "number")
|
|
11551
|
+
return "".concat(width, "px");
|
|
11552
|
+
return width;
|
|
11453
11553
|
});
|
|
11454
|
-
var
|
|
11455
|
-
var
|
|
11456
|
-
var
|
|
11457
|
-
var
|
|
11554
|
+
var TitleWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n margin: 0 25px 20px 0;\n"], ["\n margin: 0 25px 20px 0;\n"])));
|
|
11555
|
+
var CloseIconWrapper = styled.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);
|
|
11556
|
+
var ChildrenWrapper = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n padding: 20px 35px;\n"], ["\n padding: 20px 35px;\n"])));
|
|
11557
|
+
var FooterContainer = styled.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);
|
|
11558
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1;
|
|
11458
11559
|
|
|
11459
11560
|
var Modal = function (props) {
|
|
11460
|
-
var _a = useState(props.
|
|
11561
|
+
var _a = useState(props.isOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
11461
11562
|
var isClosable = useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
|
|
11462
|
-
useEffect(function () {
|
|
11463
|
-
|
|
11563
|
+
useEffect(function () {
|
|
11564
|
+
setIsOpen(props.isOpen);
|
|
11565
|
+
}, [props.isOpen]);
|
|
11566
|
+
useEffect(function () {
|
|
11567
|
+
if (!isOpen && props.afterClose)
|
|
11568
|
+
props.afterClose();
|
|
11569
|
+
}, [isOpen]);
|
|
11570
|
+
if (!isOpen)
|
|
11464
11571
|
return null;
|
|
11465
|
-
|
|
11466
|
-
if (props.onClose)
|
|
11467
|
-
props.onClose();
|
|
11468
|
-
setIsVisible(false);
|
|
11469
|
-
};
|
|
11470
|
-
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: onClose }) })), jsx$1(ChildrenWrapper, { children: props.children }), props.footer && jsx$1(FooterContainer, { children: props.footer })] }) })) }));
|
|
11572
|
+
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxs(ChildrenWrapper, { children: [props.title && (jsx$1(TitleWrapper, { children: jsx$1(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxs(FooterContainer, { children: [props.closeButton && (jsx$1(Button, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsx$1(Button, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
|
|
11471
11573
|
};
|
|
11472
11574
|
|
|
11473
11575
|
var Container$1 = styled.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) {
|
|
@@ -11502,22 +11604,34 @@ var TableBody = styled.tbody(templateObject_3 || (templateObject_3 = __makeTempl
|
|
|
11502
11604
|
styled.tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11503
11605
|
var ColumnTitle = styled.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"])));
|
|
11504
11606
|
var TableRow = styled.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);
|
|
11505
|
-
var TableCell = styled.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
|
|
11506
|
-
var
|
|
11607
|
+
var TableCell = styled.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) {
|
|
11608
|
+
var align = _a.align;
|
|
11609
|
+
switch (align) {
|
|
11610
|
+
default:
|
|
11611
|
+
case "left":
|
|
11612
|
+
return "-webkit-left";
|
|
11613
|
+
case "right":
|
|
11614
|
+
return "-webkit-right";
|
|
11615
|
+
case "center":
|
|
11616
|
+
return "-webkit-center";
|
|
11617
|
+
}
|
|
11618
|
+
});
|
|
11619
|
+
var EmptyTableCell = styled.td(templateObject_8 || (templateObject_8 = __makeTemplateObject$1(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.colors.lightGray.darker);
|
|
11620
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
11507
11621
|
|
|
11508
11622
|
var Table = function (_a) {
|
|
11509
|
-
var columns = _a.columns, data = _a.data;
|
|
11510
|
-
return (jsxs(Container, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a) {
|
|
11623
|
+
var columns = _a.columns, data = _a.data, empytText = _a.empytText;
|
|
11624
|
+
return (jsxs(Container, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a, index) {
|
|
11511
11625
|
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11512
|
-
return (jsx$1(ColumnTitle, { children: jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
|
|
11513
|
-
}) }) }), jsx$1(TableBody, { children: data.map(function (row, index) {
|
|
11626
|
+
return (jsx$1(ColumnTitle, { children: title && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title }))) }, "".concat(dataIndex, "-").concat(index)));
|
|
11627
|
+
}) }) }), jsx$1(TableBody, { children: data.length === 0 ? (jsx$1(TableRow, { children: jsx$1(EmptyTableCell, __assign$2({ colSpan: columns.length }, { children: jsx$1(Paragraph, __assign$2({ align: "center", size: "small", weight: "regular" }, { children: empytText || "No data" })) })) })) : (data.map(function (row, index) {
|
|
11514
11628
|
return (jsx$1(TableRow, { children: columns.map(function (_a, index) {
|
|
11515
|
-
var dataIndex = _a.dataIndex, render = _a.render;
|
|
11629
|
+
var dataIndex = _a.dataIndex, render = _a.render, align = _a.align;
|
|
11516
11630
|
var data = row[dataIndex];
|
|
11517
|
-
return (jsx$1(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
|
|
11631
|
+
return (jsx$1(TableCell, __assign$2({ align: align }, { children: render ? render(data, row) : data }), "col-".concat(index)));
|
|
11518
11632
|
}) }, "row-".concat(index)));
|
|
11519
|
-
}) })] }));
|
|
11633
|
+
})) })] }));
|
|
11520
11634
|
};
|
|
11521
11635
|
|
|
11522
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
11636
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
11523
11637
|
//# sourceMappingURL=index.es.js.map
|