@typeolymp/ui-components 1.10.1 → 1.12.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/Illustration/index.d.ts +1 -1
- package/build/components/molecules/Card/index.d.ts +1 -0
- 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 +13 -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/index.d.ts +2 -1
- package/build/index.es.js +178 -118
- package/build/index.es.js.map +1 -1
- package/build/index.js +178 -117
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3408,14 +3408,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3408
3408
|
var React$2 = __importStar$2(React__default["default"]);
|
|
3409
3409
|
var react_1 = require$$1;
|
|
3410
3410
|
var helpers_1 = helpers$1;
|
|
3411
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3411
|
+
var beat = react_1.keyframes(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"], ["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"])));
|
|
3412
3412
|
var Loader = /** @class */ (function (_super) {
|
|
3413
3413
|
__extends$1(Loader, _super);
|
|
3414
3414
|
function Loader() {
|
|
3415
3415
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3416
3416
|
_this.style = function (i) {
|
|
3417
3417
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3418
|
-
return react_1.css(templateObject_2$
|
|
3418
|
+
return react_1.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
|
|
3419
3419
|
};
|
|
3420
3420
|
return _this;
|
|
3421
3421
|
}
|
|
@@ -3430,9 +3430,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3430
3430
|
return Loader;
|
|
3431
3431
|
}(React$2.PureComponent));
|
|
3432
3432
|
var _default = BeatLoader.default = Loader;
|
|
3433
|
-
var templateObject_1$
|
|
3433
|
+
var templateObject_1$R, templateObject_2$x;
|
|
3434
3434
|
|
|
3435
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
3435
|
+
var StyledButton = styled__default["default"].button(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
3436
3436
|
var fluid = _a.fluid;
|
|
3437
3437
|
return (fluid ? "100%" : "fit-content");
|
|
3438
3438
|
}, function (_a) {
|
|
@@ -3482,7 +3482,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$O || (temp
|
|
|
3482
3482
|
? theme.button.medium.heightActive
|
|
3483
3483
|
: theme.button[size].heightActive;
|
|
3484
3484
|
});
|
|
3485
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3485
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
3486
3486
|
var size = _a.size;
|
|
3487
3487
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3488
3488
|
});
|
|
@@ -3509,7 +3509,7 @@ var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templa
|
|
|
3509
3509
|
var size = _a.size;
|
|
3510
3510
|
return (size === "small" ? "3px" : "");
|
|
3511
3511
|
});
|
|
3512
|
-
var templateObject_1$
|
|
3512
|
+
var templateObject_1$Q, templateObject_2$w, templateObject_3$b, templateObject_4$8;
|
|
3513
3513
|
|
|
3514
3514
|
var Button = React$3.forwardRef(function (_a, ref) {
|
|
3515
3515
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
@@ -3545,7 +3545,7 @@ var Button = React$3.forwardRef(function (_a, ref) {
|
|
|
3545
3545
|
return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx("span", { children: label }) })));
|
|
3546
3546
|
});
|
|
3547
3547
|
|
|
3548
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
3548
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
3549
3549
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3550
3550
|
if (disabled)
|
|
3551
3551
|
return theme.colors.lightGray.darker;
|
|
@@ -3566,7 +3566,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$N || (templ
|
|
|
3566
3566
|
return theme.colors.green.base;
|
|
3567
3567
|
return theme.colors.lightGray.darker;
|
|
3568
3568
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3569
|
-
var templateObject_1$
|
|
3569
|
+
var templateObject_1$P;
|
|
3570
3570
|
|
|
3571
3571
|
var Checkbox = function (props) {
|
|
3572
3572
|
var _a;
|
|
@@ -3599,7 +3599,7 @@ var Checkbox = function (props) {
|
|
|
3599
3599
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3600
3600
|
};
|
|
3601
3601
|
|
|
3602
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
3602
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3603
3603
|
var size = _a.size;
|
|
3604
3604
|
switch (size) {
|
|
3605
3605
|
case "small":
|
|
@@ -3622,7 +3622,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$M || (templateOb
|
|
|
3622
3622
|
return "27px";
|
|
3623
3623
|
}
|
|
3624
3624
|
});
|
|
3625
|
-
var templateObject_1$
|
|
3625
|
+
var templateObject_1$O;
|
|
3626
3626
|
|
|
3627
3627
|
var parsers = {};
|
|
3628
3628
|
|
|
@@ -3890,7 +3890,7 @@ var flags = {
|
|
|
3890
3890
|
};
|
|
3891
3891
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3892
3892
|
|
|
3893
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
3893
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
3894
3894
|
var type = _a.type;
|
|
3895
3895
|
return theme.heading[type].fontSize;
|
|
3896
3896
|
}, function (_a) {
|
|
@@ -3914,14 +3914,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$L || (templ
|
|
|
3914
3914
|
var align = _a.align;
|
|
3915
3915
|
return align;
|
|
3916
3916
|
});
|
|
3917
|
-
var templateObject_1$
|
|
3917
|
+
var templateObject_1$N;
|
|
3918
3918
|
|
|
3919
3919
|
var Heading = function (props) {
|
|
3920
3920
|
var element = !!props.as ? props.as : props.type;
|
|
3921
3921
|
return (jsxRuntime.jsx(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3922
3922
|
};
|
|
3923
3923
|
|
|
3924
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
3924
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
3925
3925
|
var size = _a.size;
|
|
3926
3926
|
return theme.icon[size] || theme.icon.medium;
|
|
3927
3927
|
}, function (_a) {
|
|
@@ -3951,7 +3951,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$K || (templateOb
|
|
|
3951
3951
|
return theme.colors.lightGray.light;
|
|
3952
3952
|
}
|
|
3953
3953
|
});
|
|
3954
|
-
var templateObject_1$
|
|
3954
|
+
var templateObject_1$M;
|
|
3955
3955
|
|
|
3956
3956
|
var icons = {
|
|
3957
3957
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -3981,7 +3981,7 @@ var icons = {
|
|
|
3981
3981
|
};
|
|
3982
3982
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3983
3983
|
|
|
3984
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
3984
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3985
3985
|
var size = _a.size;
|
|
3986
3986
|
switch (size) {
|
|
3987
3987
|
default:
|
|
@@ -3993,7 +3993,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$J || (templateOb
|
|
|
3993
3993
|
return "118px";
|
|
3994
3994
|
}
|
|
3995
3995
|
});
|
|
3996
|
-
var templateObject_1$
|
|
3996
|
+
var templateObject_1$L;
|
|
3997
3997
|
|
|
3998
3998
|
var illustrations = {
|
|
3999
3999
|
keyboard: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -4006,17 +4006,18 @@ var illustrations = {
|
|
|
4006
4006
|
lockOpen: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 294 483" }, { children: [jsxRuntime.jsx("path", { d: "M54.519 188.988a19.62 19.62 0 01-19.62-19.617v-57.75a111.53 111.53 0 0118.77-62.01 111.528 111.528 0 01171.674-16.9 19.638 19.638 0 11-27.773 27.773 72.3 72.3 0 00-122.774 51.137v58.412a19.615 19.615 0 01-20.277 18.955z", fill: "#C4C4C4" }), jsxRuntime.jsx("path", { d: "M269.832 190H23.574C10.68 190 .226 200.453.226 213.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V213.348c0-12.895-10.453-23.348-23.348-23.348z", fill: "#995E00" }), jsxRuntime.jsx("path", { d: "M269.832 169.846H23.574c-12.895 0-23.348 10.453-23.348 23.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V193.194c0-12.895-10.453-23.348-23.348-23.348z", fill: "#FF9D00" }), jsxRuntime.jsx("path", { d: "M196.267 289.42a49.555 49.555 0 00-19.381-39.505 49.566 49.566 0 00-43.177-8.512 48.68 48.68 0 00-21.591 12.213 48.682 48.682 0 00-12.766 21.267 47.796 47.796 0 0012.11 48.459 9.265 9.265 0 012.56 4.155 9.243 9.243 0 01.086 4.876l-14.977 53.304a5.952 5.952 0 001.017 5.154 5.943 5.943 0 004.711 2.335h83.917a5.945 5.945 0 005.727-7.269l-14.536-54.186a10.36 10.36 0 012.641-9.03 47.585 47.585 0 0013.659-33.261z", fill: "#000" })] }))),
|
|
4007
4007
|
idCard: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 424 304" }, { children: [jsxRuntime.jsx("path", { d: "M0 82h424v182c0 22.091-17.909 40-40 40H40c-22.091 0-40-17.909-40-40V82z", fill: "#EDEDED" }), jsxRuntime.jsx("rect", { x: 242, y: 131, width: 149, height: 25, rx: 12.5, fill: "#23292F" }), jsxRuntime.jsx("rect", { x: 242, y: 179, width: 89, height: 25, rx: 12.5, fill: "#23292F" }), jsxRuntime.jsx("rect", { x: 242, y: 227, width: 119, height: 25, rx: 12.5, fill: "#23292F" }), jsxRuntime.jsx("path", { d: "M0 40C0 17.909 17.909 0 40 0h344c22.091 0 40 17.909 40 40v42H0V40z", fill: "#FF9D00" }), jsxRuntime.jsxs("g", __assign$2({ clipPath: "url(#clip0_894_47510)" }, { children: [jsxRuntime.jsx("path", { d: "M121 240c-18.778 0-34 15.457-34 34.523V304h68v-29.477C155 255.457 139.777 240 121 240z", fill: "#3DC478" }), jsxRuntime.jsx("path", { d: "M188.866 166.976a32.398 32.398 0 002.716-7.051c4.423-17.307-6.022-34.922-23.33-39.343a32.199 32.199 0 00-20.01 1.306c-3.93-8.569-11.549-15.357-21.394-17.873-14.776-3.777-29.77 3.288-36.594 16.204a32.826 32.826 0 00-2.518-.762c-17.307-4.423-34.923 6.021-39.346 23.328-2.335 9.138-.523 18.359 4.253 25.682a32.182 32.182 0 00-10.628 16.83c-4.423 17.306 6.022 34.922 23.33 39.343 14.077 3.598 28.358-2.642 35.577-14.409a32.237 32.237 0 0012.811 6.576c10.279 2.627 20.665.009 28.334-6.174 4.279 6.183 10.714 10.916 18.573 12.924 17.307 4.423 34.923-6.022 39.346-23.329 3.245-12.697-1.52-25.555-11.12-33.252z", fill: "#75301C" }), jsxRuntime.jsx("path", { d: "M129.851 228.557h-17.753v14.047a7.367 7.367 0 007.367 7.367h3.019a7.367 7.367 0 007.367-7.367v-14.047z", fill: "#FFB68D" }), jsxRuntime.jsx("path", { d: "M171.736 175.935c-.5 0-.987.052-1.464.134-5.422-22.108-25.36-38.514-49.141-38.514s-43.72 16.406-49.141 38.514a8.622 8.622 0 00-1.465-.134 8.606 8.606 0 100 17.213c.084 0 .164-.011.247-.013 2.501 25.61 24.09 45.625 50.359 45.625 26.268 0 47.858-20.015 50.359-45.625.082.002.163.013.246.013a8.606 8.606 0 008.607-8.607 8.606 8.606 0 00-8.607-8.606z", fill: "#FFB68D" }), jsxRuntime.jsx("path", { d: "M155.414 205.187c0-14.961-14.024-6.878-32.706-6.878-18.681 0-34.946-8.083-34.946 6.878 0 14.962 15.145 27.091 33.826 27.091s33.826-12.129 33.826-27.091z", fill: "#230F0B" }), jsxRuntime.jsx("path", { d: "M121.586 232.276c7.308 0 14.068-1.862 19.598-5.017-2.608-3.569-6.88-6.158-11.87-6.853a20.051 20.051 0 00-6.101.08 9.812 9.812 0 01-3.253 0 20.083 20.083 0 00-6.101-.08c-4.99.695-9.263 3.284-11.87 6.853 5.53 3.156 12.29 5.017 19.597 5.017z", fill: "#F21C40" }), jsxRuntime.jsx("path", { opacity: 0.37, d: "M126.804 188.238a5.217 5.217 0 10-10.434 0c0 2.881 2.336 3.523 5.217 3.523s5.217-.642 5.217-3.523z", fill: "#FFB68D" }), jsxRuntime.jsx("path", { d: "M94.656 157.686c-7.962 0-14.476 6.513-14.476 14.475v6.972c0 7.962 6.514 11.014 14.476 11.014 7.962 0 14.476-6.092 14.476-14.053v-3.933c.001-7.961-6.514-14.475-14.476-14.475z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M94.656 165.801a5.023 5.023 0 00-5.009 5.009v9.245c0 2.754 2.255 5.009 5.01 5.009 2.754 0 5.009-2.255 5.009-5.009v-9.245a5.023 5.023 0 00-5.01-5.009z", fill: "#23292F" }), jsxRuntime.jsx("path", { d: "M89.648 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053zM147.279 157.686c7.963 0 14.476 6.513 14.476 14.475v6.972c0 7.962-6.513 11.014-14.476 11.014-7.962 0-14.475-6.092-14.475-14.053v-3.933c0-7.961 6.513-14.475 14.475-14.475z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M147.28 165.801c2.754 0 5.009 2.253 5.009 5.009v9.245c0 2.754-2.255 5.009-5.009 5.009-2.755 0-5.009-2.255-5.009-5.009v-9.245a5.023 5.023 0 015.009-5.009z", fill: "#23292F" }), jsxRuntime.jsx("path", { d: "M152.288 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053z", fill: "#fff" }), jsxRuntime.jsx("path", { d: "M148.11 130.102c-8.331 0-15.781 2.196-20.751 5.648a51.514 51.514 0 00-6.346-.392c-3.856 0-7.521.421-10.842 1.176-4.971-3.288-12.43-5.381-20.772-5.381-14.965 0-27.097 6.728-27.097 15.027s12.132 15.027 27.097 15.027c4.564 0 8.861-.628 12.634-1.734 4.889 2.493 11.588 4.032 18.981 4.032 6.294 0 12.081-1.117 16.681-2.987 3.208.781 6.725 1.213 10.418 1.213 14.965 0 27.097-7.081 27.097-15.816-.001-8.733-12.133-15.813-27.1-15.813z", fill: "#75301C" }), jsxRuntime.jsx("path", { opacity: 0.57, d: "M68.7 184.682l.589-.59a1.146 1.146 0 10-1.62-1.62l-.59.59-.59-.59a1.147 1.147 0 00-1.62 1.62l.59.59-.59.589a1.147 1.147 0 001.62 1.621l.589-.59.59.59a1.146 1.146 0 101.618-1.621l-.587-.589zM176.426 184.682l.589-.59a1.144 1.144 0 10-1.62-1.62l-.589.59-.59-.59a1.146 1.146 0 00-1.62 1.62l.589.59-.589.589a1.146 1.146 0 001.619 1.621l.589-.59.59.59a1.144 1.144 0 001.619 0 1.147 1.147 0 000-1.621l-.587-.589z", fill: "#FFB68D" })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign$2({ id: "clip0_894_47510" }, { children: jsxRuntime.jsx("path", { fill: "#fff", transform: "translate(41 103)", d: "M0 0H160V201H0z" }) })) })] }))),
|
|
4008
4008
|
cookie: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 867.3 871.1" }, { children: [jsxRuntime.jsx("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", fill: "#f49500" }), jsxRuntime.jsx("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", opacity: 0.2, fill: "#010202" }), jsxRuntime.jsx("path", { d: "M597.5 276.4c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5C471.1 7.3 468.5.7 463 .4c-6.3-.3-12.6-.4-19-.4C210.4 0 20.9 189.5 20.9 423.2s189.5 423.2 423.2 423.2 423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1-171.9-74.9-173.1-168.9z", fill: "#f49500" }), jsxRuntime.jsxs("g", __assign$2({ fill: "#9e1827" }, { children: [jsxRuntime.jsx("circle", { cx: 277.7, cy: 259.3, r: 65 }), jsxRuntime.jsx("circle", { cx: 261.5, cy: 584.3, r: 81.2 }), jsxRuntime.jsx("circle", { cx: 624.3, cy: 543.8, r: 76.8 }), jsxRuntime.jsx("circle", { cx: 477, cy: 714.1, r: 32.9 }), jsxRuntime.jsx("circle", { cx: 415.3, cy: 443.9, r: 38.7 }), jsxRuntime.jsx("circle", { cx: 677.3, cy: 74.1, r: 33.1 }), jsxRuntime.jsx("circle", { cx: 838.9, cy: 192.3, r: 28.4 }), jsxRuntime.jsx("circle", { cx: 732.8, cy: 244.1, r: 51.9 })] }))] }))),
|
|
4009
|
+
classroom: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 165.4 116.8" }, { children: [jsxRuntime.jsx("path", { d: "M14.4 109.3c-3.8 0-6.9-3.1-6.9-6.9v-88c0-3.8 3.1-6.9 6.9-6.9H151c3.8 0 6.9 3.1 6.9 6.9v88c0 3.8-3.1 6.9-6.9 6.9H14.4z", fill: "#2d9d60" }), jsxRuntime.jsx("path", { d: "M150.4 15v86.8H15V15h135.4m.6-15H14.4C6.5 0 0 6.5 0 14.4v88c0 8 6.5 14.4 14.4 14.4H151c8 0 14.4-6.5 14.4-14.4v-88C165.4 6.5 159 0 151 0z", fill: "#FF9D00" }), jsxRuntime.jsx("path", { fill: "#c4c4c4", d: "M103.1 90.7H135.39999999999998V101.8H103.1z" }), jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M82 81.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5H82c2.8 0 5 2.2 5 5s-2.2 5-5 5zM69.4 63H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h25.7c2.8 0 5 2.2 5 5s-2.2 5-5 5zM93.3 44.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h49.6c2.8 0 5 2.2 5 5s-2.3 5-5 5z", fill: "#fff" }) })] }))),
|
|
4009
4010
|
};
|
|
4010
4011
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4011
4012
|
|
|
4012
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
4013
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
4013
4014
|
var isChanged = _a.isChanged;
|
|
4014
4015
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
4015
4016
|
}, function (_a) {
|
|
4016
4017
|
var disabled = _a.disabled;
|
|
4017
4018
|
return (disabled ? "not-allowed" : "pointer");
|
|
4018
4019
|
});
|
|
4019
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
4020
|
+
var StyledInput = styled__default["default"].input(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4020
4021
|
var disabled = _a.disabled;
|
|
4021
4022
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4022
4023
|
}, function (_a) {
|
|
@@ -4029,7 +4030,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$t || (templa
|
|
|
4029
4030
|
var disabled = _a.disabled;
|
|
4030
4031
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4031
4032
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4032
|
-
var templateObject_1$
|
|
4033
|
+
var templateObject_1$K, templateObject_2$v;
|
|
4033
4034
|
|
|
4034
4035
|
var PasswordInput = function (props) {
|
|
4035
4036
|
var _a = React$3.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -4209,7 +4210,7 @@ Input.Date = DateInput;
|
|
|
4209
4210
|
|
|
4210
4211
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsxRuntime.jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsxRuntime.jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsxRuntime.jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsxRuntime.jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxRuntime.jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsxRuntime.jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsxRuntime.jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
4211
4212
|
|
|
4212
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
4213
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4213
4214
|
var size = _a.size;
|
|
4214
4215
|
switch (size) {
|
|
4215
4216
|
default:
|
|
@@ -4219,7 +4220,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$H || (templateOb
|
|
|
4219
4220
|
return "116px";
|
|
4220
4221
|
}
|
|
4221
4222
|
});
|
|
4222
|
-
var templateObject_1$
|
|
4223
|
+
var templateObject_1$J;
|
|
4223
4224
|
|
|
4224
4225
|
var medals = {
|
|
4225
4226
|
small: {
|
|
@@ -4235,11 +4236,11 @@ var medals = {
|
|
|
4235
4236
|
};
|
|
4236
4237
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4237
4238
|
|
|
4238
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
4239
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"])), function (_a) {
|
|
4239
4240
|
var disabled = _a.disabled;
|
|
4240
4241
|
return (disabled ? "49.5px" : "");
|
|
4241
4242
|
});
|
|
4242
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
4243
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4243
4244
|
var disabled = _a.disabled;
|
|
4244
4245
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4245
4246
|
}, function (_a) {
|
|
@@ -4252,7 +4253,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$s || (
|
|
|
4252
4253
|
var disabled = _a.disabled;
|
|
4253
4254
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4254
4255
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4255
|
-
var templateObject_1$
|
|
4256
|
+
var templateObject_1$I, templateObject_2$u;
|
|
4256
4257
|
|
|
4257
4258
|
var Number$1 = function (props) {
|
|
4258
4259
|
var inputRef = React$3.useRef(null);
|
|
@@ -4289,7 +4290,7 @@ var Number$1 = function (props) {
|
|
|
4289
4290
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsxRuntime.jsx(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
4290
4291
|
};
|
|
4291
4292
|
|
|
4292
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
4293
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4293
4294
|
var size = _a.size;
|
|
4294
4295
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4295
4296
|
}, function (_a) {
|
|
@@ -4321,11 +4322,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$F || (templa
|
|
|
4321
4322
|
var align = _a.align;
|
|
4322
4323
|
return align;
|
|
4323
4324
|
});
|
|
4324
|
-
var templateObject_1$
|
|
4325
|
+
var templateObject_1$H;
|
|
4325
4326
|
|
|
4326
4327
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4327
4328
|
|
|
4328
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
4329
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4329
4330
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4330
4331
|
if (disabled)
|
|
4331
4332
|
return theme.colors.lightGray.darker;
|
|
@@ -4353,7 +4354,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$E || (template
|
|
|
4353
4354
|
return theme.colors.green.base;
|
|
4354
4355
|
return "";
|
|
4355
4356
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4356
|
-
var templateObject_1$
|
|
4357
|
+
var templateObject_1$G;
|
|
4357
4358
|
|
|
4358
4359
|
var Radio = function (props) {
|
|
4359
4360
|
var _a, _b;
|
|
@@ -4385,7 +4386,7 @@ var Radio = function (props) {
|
|
|
4385
4386
|
return (jsxRuntime.jsx(StyledRadio, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
4386
4387
|
};
|
|
4387
4388
|
|
|
4388
|
-
var StyledRange = styled__default["default"].div(templateObject_1$
|
|
4389
|
+
var StyledRange = styled__default["default"].div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
|
|
4389
4390
|
var value = _a.value, disabled = _a.disabled;
|
|
4390
4391
|
return "linear-gradient(90deg,\n ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " 100%\n )");
|
|
4391
4392
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4395,7 +4396,7 @@ var StyledRange = styled__default["default"].div(templateObject_1$D || (template
|
|
|
4395
4396
|
var disabled = _a.disabled;
|
|
4396
4397
|
return disabled ? "not-allowed" : "pointer";
|
|
4397
4398
|
});
|
|
4398
|
-
var templateObject_1$
|
|
4399
|
+
var templateObject_1$F;
|
|
4399
4400
|
|
|
4400
4401
|
var Range = function (props) {
|
|
4401
4402
|
var _a;
|
|
@@ -4424,11 +4425,11 @@ var Range = function (props) {
|
|
|
4424
4425
|
return (jsxRuntime.jsx(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsxRuntime.jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
4425
4426
|
};
|
|
4426
4427
|
|
|
4427
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
4428
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
4428
4429
|
var disabled = _a.disabled;
|
|
4429
4430
|
return (disabled ? "not-allowed" : "pointer");
|
|
4430
4431
|
});
|
|
4431
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
4432
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4432
4433
|
var disabled = _a.disabled;
|
|
4433
4434
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4434
4435
|
}, function (_a) {
|
|
@@ -4441,7 +4442,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$r || (temp
|
|
|
4441
4442
|
var isChanged = _a.isChanged;
|
|
4442
4443
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4443
4444
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4444
|
-
var templateObject_1$
|
|
4445
|
+
var templateObject_1$E, templateObject_2$t;
|
|
4445
4446
|
|
|
4446
4447
|
var Select = function (props) {
|
|
4447
4448
|
var _a;
|
|
@@ -4463,18 +4464,18 @@ var Select = function (props) {
|
|
|
4463
4464
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxRuntime.jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
4464
4465
|
};
|
|
4465
4466
|
|
|
4466
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
4467
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4467
4468
|
var horizontal = _a.horizontal;
|
|
4468
4469
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4469
4470
|
}, function (_a) {
|
|
4470
4471
|
var vertical = _a.vertical;
|
|
4471
4472
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4472
4473
|
});
|
|
4473
|
-
var templateObject_1$
|
|
4474
|
+
var templateObject_1$D;
|
|
4474
4475
|
|
|
4475
4476
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign$2({}, props))); };
|
|
4476
4477
|
|
|
4477
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
4478
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4478
4479
|
var size = _a.size;
|
|
4479
4480
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4480
4481
|
}, function (_a) {
|
|
@@ -4502,18 +4503,18 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$A || (templ
|
|
|
4502
4503
|
return theme.colors.darkGray.dark;
|
|
4503
4504
|
}
|
|
4504
4505
|
});
|
|
4505
|
-
var templateObject_1$
|
|
4506
|
+
var templateObject_1$C;
|
|
4506
4507
|
|
|
4507
4508
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4508
4509
|
|
|
4509
|
-
var Container$k = styled__default["default"].div(templateObject_1$
|
|
4510
|
-
var templateObject_1$
|
|
4510
|
+
var Container$k = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
4511
|
+
var templateObject_1$B;
|
|
4511
4512
|
|
|
4512
4513
|
var Tag = function (props) {
|
|
4513
4514
|
return jsxRuntime.jsx(Container$k, { children: props.children });
|
|
4514
4515
|
};
|
|
4515
4516
|
|
|
4516
|
-
var Container$j = styled__default["default"].div(templateObject_1$
|
|
4517
|
+
var Container$j = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4517
4518
|
var disabled = _a.disabled;
|
|
4518
4519
|
return (disabled ? "not-allowed" : "pointer");
|
|
4519
4520
|
}, function (_a) {
|
|
@@ -4531,7 +4532,7 @@ var Container$j = styled__default["default"].div(templateObject_1$y || (template
|
|
|
4531
4532
|
var disabled = _a.disabled;
|
|
4532
4533
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4533
4534
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4534
|
-
var templateObject_1$
|
|
4535
|
+
var templateObject_1$A;
|
|
4535
4536
|
|
|
4536
4537
|
var Toggle = function (props) {
|
|
4537
4538
|
var _a;
|
|
@@ -4562,7 +4563,7 @@ var Toggle = function (props) {
|
|
|
4562
4563
|
return (jsxRuntime.jsx(Container$j, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
4563
4564
|
};
|
|
4564
4565
|
|
|
4565
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
4566
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
4566
4567
|
var level = _a.level;
|
|
4567
4568
|
switch (level) {
|
|
4568
4569
|
case 1:
|
|
@@ -4573,7 +4574,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$x || (templateOb
|
|
|
4573
4574
|
return "70px";
|
|
4574
4575
|
}
|
|
4575
4576
|
});
|
|
4576
|
-
var templateObject_1$
|
|
4577
|
+
var templateObject_1$z;
|
|
4577
4578
|
|
|
4578
4579
|
var trophies = {
|
|
4579
4580
|
1: {
|
|
@@ -4609,7 +4610,7 @@ var trophies = {
|
|
|
4609
4610
|
};
|
|
4610
4611
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4611
4612
|
|
|
4612
|
-
var Container$i = styled__default["default"].div(templateObject_1$
|
|
4613
|
+
var Container$i = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
4613
4614
|
var type = _a.type;
|
|
4614
4615
|
switch (type) {
|
|
4615
4616
|
case "success":
|
|
@@ -4626,11 +4627,14 @@ var Container$i = styled__default["default"].div(templateObject_1$w || (template
|
|
|
4626
4627
|
return theme.colors.red.base;
|
|
4627
4628
|
}
|
|
4628
4629
|
});
|
|
4629
|
-
var templateObject_1$
|
|
4630
|
+
var templateObject_1$y;
|
|
4630
4631
|
|
|
4631
4632
|
var Alert = function (props) { return (jsxRuntime.jsxs(Container$i, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
|
|
4632
4633
|
|
|
4633
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
4634
|
+
var StyledCard = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
4635
|
+
var bordered = _a.bordered;
|
|
4636
|
+
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4637
|
+
}, function (_a) {
|
|
4634
4638
|
var ellipse = _a.ellipse;
|
|
4635
4639
|
return ellipse
|
|
4636
4640
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -4639,23 +4643,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$v || (templateO
|
|
|
4639
4643
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4640
4644
|
: "";
|
|
4641
4645
|
});
|
|
4642
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
4646
|
+
var Ellipse = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
4643
4647
|
var color = _a.color;
|
|
4644
4648
|
return color ? theme.colors[color].light : "";
|
|
4645
4649
|
});
|
|
4646
4650
|
var Content = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
4647
|
-
var templateObject_1$
|
|
4651
|
+
var templateObject_1$x, templateObject_2$s, templateObject_3$a;
|
|
4648
4652
|
|
|
4649
4653
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
4650
4654
|
|
|
4651
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
4652
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
4655
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
4656
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4653
4657
|
var CheckboxWrapper = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
4654
4658
|
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
4655
4659
|
var weight = _a.weight;
|
|
4656
4660
|
return weight || 500;
|
|
4657
4661
|
}, theme.colors.darkGray.base);
|
|
4658
|
-
var templateObject_1$
|
|
4662
|
+
var templateObject_1$w, templateObject_2$r, templateObject_3$9, templateObject_4$7;
|
|
4659
4663
|
|
|
4660
4664
|
var Checkboxes = function (props) {
|
|
4661
4665
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4678,12 +4682,12 @@ var Checkboxes = function (props) {
|
|
|
4678
4682
|
}) })] }));
|
|
4679
4683
|
};
|
|
4680
4684
|
|
|
4681
|
-
var Container$h = styled__default["default"].div(templateObject_1$
|
|
4682
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
4685
|
+
var Container$h = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
4686
|
+
var Item = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
4683
4687
|
var isOpen = _a.isOpen;
|
|
4684
4688
|
return (isOpen ? "" : "none");
|
|
4685
|
-
}, theme.colors.lightGray.
|
|
4686
|
-
var templateObject_1$
|
|
4689
|
+
}, theme.colors.lightGray.dark);
|
|
4690
|
+
var templateObject_1$v, templateObject_2$q;
|
|
4687
4691
|
|
|
4688
4692
|
var Collapse = function (props) {
|
|
4689
4693
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4701,9 +4705,9 @@ var Collapse = function (props) {
|
|
|
4701
4705
|
}) })));
|
|
4702
4706
|
};
|
|
4703
4707
|
|
|
4704
|
-
var Container$g = styled__default["default"].div(templateObject_1$
|
|
4705
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4706
|
-
var templateObject_1$
|
|
4708
|
+
var Container$g = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4709
|
+
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4710
|
+
var templateObject_1$u, templateObject_2$p;
|
|
4707
4711
|
|
|
4708
4712
|
var DateInputField = function (props) {
|
|
4709
4713
|
var onChange = function (value) {
|
|
@@ -4717,9 +4721,9 @@ var DateInputField = function (props) {
|
|
|
4717
4721
|
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
4718
4722
|
};
|
|
4719
4723
|
|
|
4720
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
4721
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
4722
|
-
var templateObject_1$
|
|
4724
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
|
|
4725
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
|
|
4726
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4723
4727
|
|
|
4724
4728
|
var IconButton = function (props) {
|
|
4725
4729
|
if (props.color === "white")
|
|
@@ -4727,9 +4731,9 @@ var IconButton = function (props) {
|
|
|
4727
4731
|
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4728
4732
|
};
|
|
4729
4733
|
|
|
4730
|
-
var Container$f = styled__default["default"].div(templateObject_1$
|
|
4731
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4732
|
-
var templateObject_1$
|
|
4734
|
+
var Container$f = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4735
|
+
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4736
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4733
4737
|
|
|
4734
4738
|
var InputField = function (props) {
|
|
4735
4739
|
var onChange = function (value) {
|
|
@@ -4743,7 +4747,7 @@ var InputField = function (props) {
|
|
|
4743
4747
|
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
4744
4748
|
};
|
|
4745
4749
|
|
|
4746
|
-
var Container$e = styled__default["default"].div(templateObject_1$
|
|
4750
|
+
var Container$e = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
4747
4751
|
var status = _a.status, color = _a.color;
|
|
4748
4752
|
switch (status) {
|
|
4749
4753
|
case "passed":
|
|
@@ -4787,23 +4791,23 @@ var Container$e = styled__default["default"].div(templateObject_1$p || (template
|
|
|
4787
4791
|
return theme.colors.darkGray.light;
|
|
4788
4792
|
}
|
|
4789
4793
|
});
|
|
4790
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4791
|
-
var templateObject_1$
|
|
4794
|
+
var CheckIconWrapper = styled__default["default"].div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
4795
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4792
4796
|
|
|
4793
4797
|
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
4794
4798
|
marginTop: "13px",
|
|
4795
4799
|
transform: "scale(2)",
|
|
4796
4800
|
} }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
4797
4801
|
|
|
4798
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
4802
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-top: 3px;\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-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
4799
4803
|
var chevron = _a.chevron;
|
|
4800
4804
|
return (chevron === "left" ? "4px" : "");
|
|
4801
4805
|
}, function (_a) {
|
|
4802
4806
|
var chevron = _a.chevron;
|
|
4803
4807
|
return (chevron === "right" ? "4px" : "");
|
|
4804
4808
|
});
|
|
4805
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4806
|
-
var templateObject_1$
|
|
4809
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
4810
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4807
4811
|
|
|
4808
4812
|
var Link = function (props) {
|
|
4809
4813
|
var onClick = function (e) {
|
|
@@ -4815,15 +4819,15 @@ var Link = function (props) {
|
|
|
4815
4819
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }), jsxRuntime.jsx(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
4816
4820
|
};
|
|
4817
4821
|
|
|
4818
|
-
var Container$d = styled__default["default"].div(templateObject_1$
|
|
4822
|
+
var Container$d = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
4819
4823
|
var text = _a.text;
|
|
4820
4824
|
return (text ? "20px" : "");
|
|
4821
4825
|
});
|
|
4822
|
-
var templateObject_1$
|
|
4826
|
+
var templateObject_1$p;
|
|
4823
4827
|
|
|
4824
4828
|
var Loading = function (props) { return (jsxRuntime.jsxs(Container$d, __assign$2({}, props, { children: [jsxRuntime.jsx(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
4825
4829
|
|
|
4826
|
-
var Container$c = styled__default["default"].div(templateObject_1$
|
|
4830
|
+
var Container$c = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
|
|
4827
4831
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4828
4832
|
if (dropdownIsVisible) {
|
|
4829
4833
|
switch (color) {
|
|
@@ -4836,7 +4840,7 @@ var Container$c = styled__default["default"].div(templateObject_1$m || (template
|
|
|
4836
4840
|
}
|
|
4837
4841
|
return "";
|
|
4838
4842
|
});
|
|
4839
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
4843
|
+
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
4840
4844
|
var DropdownContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __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) {
|
|
4841
4845
|
var color = _a.color;
|
|
4842
4846
|
switch (color) {
|
|
@@ -4848,7 +4852,7 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$8 || (te
|
|
|
4848
4852
|
}
|
|
4849
4853
|
});
|
|
4850
4854
|
var LocaleWrapper = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __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);
|
|
4851
|
-
var templateObject_1$
|
|
4855
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$8, templateObject_4$6;
|
|
4852
4856
|
|
|
4853
4857
|
var LocaleSelect = function (props) {
|
|
4854
4858
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4862,17 +4866,17 @@ var LocaleSelect = function (props) {
|
|
|
4862
4866
|
.map(function (locale) { return (jsxRuntime.jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
4863
4867
|
};
|
|
4864
4868
|
|
|
4865
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
4866
|
-
var templateObject_1$
|
|
4869
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
4870
|
+
var templateObject_1$n;
|
|
4867
4871
|
|
|
4868
4872
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.GOLD }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.SILVER }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.BRONZE }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
4869
4873
|
|
|
4870
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
4874
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
|
|
4871
4875
|
var contrast = _a.contrast;
|
|
4872
4876
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4873
4877
|
});
|
|
4874
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
4875
|
-
var templateObject_1$
|
|
4878
|
+
var ButtonContainer = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
|
|
4879
|
+
var templateObject_1$m, templateObject_2$j;
|
|
4876
4880
|
|
|
4877
4881
|
var Notification = function (props) {
|
|
4878
4882
|
if (!props.isVisible)
|
|
@@ -4880,9 +4884,9 @@ var Notification = function (props) {
|
|
|
4880
4884
|
return (jsxRuntime.jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React$3.createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
4881
4885
|
};
|
|
4882
4886
|
|
|
4883
|
-
var Container$b = styled__default["default"].div(templateObject_1$
|
|
4884
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4885
|
-
var templateObject_1$
|
|
4887
|
+
var Container$b = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4888
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4889
|
+
var templateObject_1$l, templateObject_2$i;
|
|
4886
4890
|
|
|
4887
4891
|
var NumberField = function (props) {
|
|
4888
4892
|
var onChange = function (value) {
|
|
@@ -4937,15 +4941,15 @@ var isStrongPassword = function (password) {
|
|
|
4937
4941
|
exports.isStrongPassword = isStrongPassword;
|
|
4938
4942
|
}(expressions));
|
|
4939
4943
|
|
|
4940
|
-
var Container$a = styled__default["default"].div(templateObject_1$
|
|
4941
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4944
|
+
var Container$a = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4945
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4942
4946
|
var HelperContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
4943
4947
|
var fadeIn = styled.keyframes(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
4944
4948
|
var Helper = styled__default["default"](StyledParagraph)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
4945
4949
|
var isOk = _a.isOk;
|
|
4946
4950
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4947
4951
|
}, fadeIn);
|
|
4948
|
-
var templateObject_1$
|
|
4952
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4949
4953
|
|
|
4950
4954
|
var translations = {
|
|
4951
4955
|
"nl-NL": {
|
|
@@ -5015,7 +5019,7 @@ var generateRandomString = function (length) {
|
|
|
5015
5019
|
return string;
|
|
5016
5020
|
};
|
|
5017
5021
|
|
|
5018
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
5022
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
5019
5023
|
var isVisible = _a.isVisible;
|
|
5020
5024
|
return (isVisible ? "100%" : "0%");
|
|
5021
5025
|
}, function (_a) {
|
|
@@ -5028,7 +5032,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$h || (templ
|
|
|
5028
5032
|
var contrast = _a.contrast;
|
|
5029
5033
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5030
5034
|
});
|
|
5031
|
-
var templateObject_1$
|
|
5035
|
+
var templateObject_1$j;
|
|
5032
5036
|
|
|
5033
5037
|
var Popup = function (props) {
|
|
5034
5038
|
var popupRef = React$3.useRef(null);
|
|
@@ -5064,8 +5068,8 @@ var Popup = function (props) {
|
|
|
5064
5068
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
5065
5069
|
};
|
|
5066
5070
|
|
|
5067
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
5068
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
5071
|
+
var Wrapper = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
5072
|
+
var StyledProgressBar = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
5069
5073
|
var showInfo = _a.showInfo;
|
|
5070
5074
|
return (showInfo ? "10px" : "");
|
|
5071
5075
|
});
|
|
@@ -5076,12 +5080,12 @@ var Indicator$1 = styled__default["default"].div(templateObject_3$6 || (template
|
|
|
5076
5080
|
var color = _a.color;
|
|
5077
5081
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5078
5082
|
});
|
|
5079
|
-
var templateObject_1$
|
|
5083
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$6;
|
|
5080
5084
|
|
|
5081
5085
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign$2({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
5082
5086
|
|
|
5083
|
-
var Container$9 = styled__default["default"].ol(templateObject_1$
|
|
5084
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
5087
|
+
var Container$9 = styled__default["default"].ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
5088
|
+
var Step$1 = styled__default["default"].li(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
|
|
5085
5089
|
var status = _a.status;
|
|
5086
5090
|
return (!!status ? "pointer" : "not-allowed");
|
|
5087
5091
|
}, function (_a) {
|
|
@@ -5103,7 +5107,7 @@ var Step$1 = styled__default["default"].li(templateObject_2$d || (templateObject
|
|
|
5103
5107
|
var hasTitle = _a.hasTitle;
|
|
5104
5108
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5105
5109
|
}, theme.colors.lightGray.dark);
|
|
5106
|
-
var templateObject_1$
|
|
5110
|
+
var templateObject_1$h, templateObject_2$f;
|
|
5107
5111
|
|
|
5108
5112
|
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5109
5113
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5120,8 +5124,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children:
|
|
|
5120
5124
|
return (jsxRuntime.jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
5121
5125
|
}) })); };
|
|
5122
5126
|
|
|
5123
|
-
var Container$8 = styled__default["default"].ol(templateObject_1$
|
|
5124
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
5127
|
+
var Container$8 = styled__default["default"].ol(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
5128
|
+
var Step = styled__default["default"].li(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
5125
5129
|
var status = _a.status;
|
|
5126
5130
|
return (!!status ? "pointer" : "not-allowed");
|
|
5127
5131
|
}, function (_a) {
|
|
@@ -5140,7 +5144,7 @@ var Step = styled__default["default"].li(templateObject_2$c || (templateObject_2
|
|
|
5140
5144
|
? theme.colors.lightGray.light
|
|
5141
5145
|
: theme.colors.darkGray.light;
|
|
5142
5146
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5143
|
-
var templateObject_1$
|
|
5147
|
+
var templateObject_1$g, templateObject_2$e;
|
|
5144
5148
|
|
|
5145
5149
|
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5146
5150
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5161,6 +5165,56 @@ var Steps = function (props) {
|
|
|
5161
5165
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
5162
5166
|
};
|
|
5163
5167
|
|
|
5168
|
+
var TabsContainer$1 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"], ["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"])), theme.colors.lightGray.dark);
|
|
5169
|
+
var Tab$1 = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5170
|
+
var isActive = _a.isActive;
|
|
5171
|
+
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
5172
|
+
}, function (_a) {
|
|
5173
|
+
var isActive = _a.isActive;
|
|
5174
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5175
|
+
}, theme.colors.blue.base);
|
|
5176
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5177
|
+
|
|
5178
|
+
var Tabs$2 = function (props) {
|
|
5179
|
+
var _a = React$3.useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5180
|
+
var onChangeTab = function (key) {
|
|
5181
|
+
setActiveTab(key);
|
|
5182
|
+
if (props.onChange)
|
|
5183
|
+
props.onChange(key);
|
|
5184
|
+
};
|
|
5185
|
+
return (jsxRuntime.jsx(TabsContainer$1, { children: props.items.map(function (_a) {
|
|
5186
|
+
var key = _a.key, label = _a.label;
|
|
5187
|
+
return (jsxRuntime.jsx(Tab$1, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsxRuntime.jsx(Paragraph, { children: label }) }), key));
|
|
5188
|
+
}) }));
|
|
5189
|
+
};
|
|
5190
|
+
|
|
5191
|
+
var TabsContainer = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"], ["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"])), theme.colors.lightGray.dark);
|
|
5192
|
+
var Tab = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5193
|
+
var isActive = _a.isActive;
|
|
5194
|
+
return (isActive ? "block" : "none");
|
|
5195
|
+
}, theme.colors.blue.base, function (_a) {
|
|
5196
|
+
var isActive = _a.isActive;
|
|
5197
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5198
|
+
}, theme.colors.blue.base);
|
|
5199
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5200
|
+
|
|
5201
|
+
var Tabs$1 = function (props) {
|
|
5202
|
+
var _a = React$3.useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5203
|
+
var onChangeTab = function (key) {
|
|
5204
|
+
setActiveTab(key);
|
|
5205
|
+
if (props.onChange)
|
|
5206
|
+
props.onChange(key);
|
|
5207
|
+
};
|
|
5208
|
+
return (jsxRuntime.jsx(TabsContainer, { children: props.items.map(function (_a) {
|
|
5209
|
+
var key = _a.key, label = _a.label;
|
|
5210
|
+
return (jsxRuntime.jsx(Tab, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsxRuntime.jsx(Paragraph, { children: label }) }), key));
|
|
5211
|
+
}) }));
|
|
5212
|
+
};
|
|
5213
|
+
|
|
5214
|
+
var Tabs = function (props) {
|
|
5215
|
+
return props.alignment === "vertical" ? (jsxRuntime.jsx(Tabs$1, __assign$2({}, props))) : (jsxRuntime.jsx(Tabs$2, __assign$2({}, props)));
|
|
5216
|
+
};
|
|
5217
|
+
|
|
5164
5218
|
var Fieldset = styled__default["default"].fieldset(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
5165
5219
|
var RadioContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5166
5220
|
var RadioWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
@@ -11397,8 +11451,8 @@ var SpecialRow = styled__default["default"].div(templateObject_2$3 || (templateO
|
|
|
11397
11451
|
var TopRow = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"])));
|
|
11398
11452
|
var StartRow = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"])));
|
|
11399
11453
|
var BottomRow = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"])));
|
|
11400
|
-
var SpacebarRow = styled__default["default"].div(templateObject_6$
|
|
11401
|
-
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$
|
|
11454
|
+
var SpacebarRow = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"])));
|
|
11455
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
11402
11456
|
|
|
11403
11457
|
var Keyboard = function (props) {
|
|
11404
11458
|
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11471,27 +11525,33 @@ var Keyboard = function (props) {
|
|
|
11471
11525
|
};
|
|
11472
11526
|
|
|
11473
11527
|
var Mask = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
11474
|
-
var CardWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n
|
|
11528
|
+
var CardWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
11475
11529
|
var width = _a.width;
|
|
11476
|
-
|
|
11530
|
+
if (!width)
|
|
11531
|
+
return "720px";
|
|
11532
|
+
if (typeof width === "number")
|
|
11533
|
+
return "".concat(width, "px");
|
|
11534
|
+
return width;
|
|
11477
11535
|
});
|
|
11478
|
-
var
|
|
11479
|
-
var
|
|
11480
|
-
var
|
|
11481
|
-
var
|
|
11536
|
+
var TitleWrapper = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n margin: 0 25px 20px 0;\n"], ["\n margin: 0 25px 20px 0;\n"])));
|
|
11537
|
+
var CloseIconWrapper = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"])), theme.colors.darkGray.base);
|
|
11538
|
+
var ChildrenWrapper = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n padding: 20px 35px;\n"], ["\n padding: 20px 35px;\n"])));
|
|
11539
|
+
var FooterContainer = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
11540
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1;
|
|
11482
11541
|
|
|
11483
11542
|
var Modal = function (props) {
|
|
11484
|
-
var _a = React$3.useState(props.
|
|
11543
|
+
var _a = React$3.useState(props.isOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
11485
11544
|
var isClosable = React$3.useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
|
|
11486
|
-
React$3.useEffect(function () {
|
|
11487
|
-
|
|
11545
|
+
React$3.useEffect(function () {
|
|
11546
|
+
setIsOpen(props.isOpen);
|
|
11547
|
+
}, [props.isOpen]);
|
|
11548
|
+
React$3.useEffect(function () {
|
|
11549
|
+
if (!isOpen && props.afterClose)
|
|
11550
|
+
props.afterClose();
|
|
11551
|
+
}, [isOpen]);
|
|
11552
|
+
if (!isOpen)
|
|
11488
11553
|
return null;
|
|
11489
|
-
|
|
11490
|
-
if (props.onClose)
|
|
11491
|
-
props.onClose();
|
|
11492
|
-
setIsVisible(false);
|
|
11493
|
-
};
|
|
11494
|
-
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign$2({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }) })), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
11554
|
+
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign$2({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxRuntime.jsxs(ChildrenWrapper, { children: [props.title && (jsxRuntime.jsx(TitleWrapper, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxRuntime.jsxs(FooterContainer, { children: [props.closeButton && (jsxRuntime.jsx(Button, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsxRuntime.jsx(Button, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
|
|
11495
11555
|
};
|
|
11496
11556
|
|
|
11497
11557
|
var Container$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|
|
@@ -11520,12 +11580,12 @@ var Result = function (props) {
|
|
|
11520
11580
|
return (jsxRuntime.jsxs(Container$1, __assign$2({ passed: isPassed }, { children: [jsxRuntime.jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsxRuntime.jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxRuntime.jsxs(ProgressBarWrapper, { children: [jsxRuntime.jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsxRuntime.jsx(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsxRuntime.jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
11521
11581
|
};
|
|
11522
11582
|
|
|
11523
|
-
var Container = styled__default["default"].table(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n box-shadow: 0 0 0 1px ", ";\n
|
|
11524
|
-
var TableHead = styled__default["default"].thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["
|
|
11583
|
+
var Container = styled__default["default"].table(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n overflow: hidden;\n box-shadow: 0 0 0 1px ", ";\n"], ["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n overflow: hidden;\n box-shadow: 0 0 0 1px ", ";\n"])), theme.colors.lightGray.dark);
|
|
11584
|
+
var TableHead = styled__default["default"].thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1([""], [""])));
|
|
11525
11585
|
var TableBody = styled__default["default"].tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11526
11586
|
styled__default["default"].tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11527
11587
|
var ColumnTitle = styled__default["default"].th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n text-align: left;\n padding-left: 15px;\n"], ["\n text-align: left;\n padding-left: 15px;\n"])));
|
|
11528
|
-
var TableRow = styled__default["default"].tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base);
|
|
11588
|
+
var TableRow = styled__default["default"].tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
11529
11589
|
var TableCell = styled__default["default"].td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n"], ["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n"])), theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.darkGray.light);
|
|
11530
11590
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11531
11591
|
|
|
@@ -11584,6 +11644,7 @@ exports.Spacer = Spacer;
|
|
|
11584
11644
|
exports.Steps = Steps;
|
|
11585
11645
|
exports.Subheading = Subheading;
|
|
11586
11646
|
exports.Table = Table;
|
|
11647
|
+
exports.Tabs = Tabs;
|
|
11587
11648
|
exports.Tag = Tag;
|
|
11588
11649
|
exports.Toggle = Toggle;
|
|
11589
11650
|
exports.ToggleField = ToggleField;
|