@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.es.js
CHANGED
|
@@ -3381,14 +3381,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3381
3381
|
var React$2 = __importStar$2(React__default);
|
|
3382
3382
|
var react_1 = require$$1;
|
|
3383
3383
|
var helpers_1 = helpers$1;
|
|
3384
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3384
|
+
var beat = react_1.keyframes(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"], ["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"])));
|
|
3385
3385
|
var Loader = /** @class */ (function (_super) {
|
|
3386
3386
|
__extends$1(Loader, _super);
|
|
3387
3387
|
function Loader() {
|
|
3388
3388
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3389
3389
|
_this.style = function (i) {
|
|
3390
3390
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3391
|
-
return react_1.css(templateObject_2$
|
|
3391
|
+
return react_1.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
|
|
3392
3392
|
};
|
|
3393
3393
|
return _this;
|
|
3394
3394
|
}
|
|
@@ -3403,9 +3403,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3403
3403
|
return Loader;
|
|
3404
3404
|
}(React$2.PureComponent));
|
|
3405
3405
|
var _default = BeatLoader.default = Loader;
|
|
3406
|
-
var templateObject_1$
|
|
3406
|
+
var templateObject_1$R, templateObject_2$x;
|
|
3407
3407
|
|
|
3408
|
-
var StyledButton = styled.button(templateObject_1$
|
|
3408
|
+
var StyledButton = styled.button(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
3409
3409
|
var fluid = _a.fluid;
|
|
3410
3410
|
return (fluid ? "100%" : "fit-content");
|
|
3411
3411
|
}, function (_a) {
|
|
@@ -3455,7 +3455,7 @@ var StyledButton = styled.button(templateObject_1$O || (templateObject_1$O = __m
|
|
|
3455
3455
|
? theme.button.medium.heightActive
|
|
3456
3456
|
: theme.button[size].heightActive;
|
|
3457
3457
|
});
|
|
3458
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3458
|
+
var DisabledButton = styled(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) {
|
|
3459
3459
|
var size = _a.size;
|
|
3460
3460
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3461
3461
|
});
|
|
@@ -3482,7 +3482,7 @@ var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __mak
|
|
|
3482
3482
|
var size = _a.size;
|
|
3483
3483
|
return (size === "small" ? "3px" : "");
|
|
3484
3484
|
});
|
|
3485
|
-
var templateObject_1$
|
|
3485
|
+
var templateObject_1$Q, templateObject_2$w, templateObject_3$b, templateObject_4$8;
|
|
3486
3486
|
|
|
3487
3487
|
var Button = forwardRef(function (_a, ref) {
|
|
3488
3488
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
@@ -3518,7 +3518,7 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
3518
3518
|
return (jsx$1(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsx$1(Loader, {}) : jsx$1("span", { children: label }) })));
|
|
3519
3519
|
});
|
|
3520
3520
|
|
|
3521
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
3521
|
+
var StyledCheckbox = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
3522
3522
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3523
3523
|
if (disabled)
|
|
3524
3524
|
return theme.colors.lightGray.darker;
|
|
@@ -3539,7 +3539,7 @@ var StyledCheckbox = styled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
3539
3539
|
return theme.colors.green.base;
|
|
3540
3540
|
return theme.colors.lightGray.darker;
|
|
3541
3541
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3542
|
-
var templateObject_1$
|
|
3542
|
+
var templateObject_1$P;
|
|
3543
3543
|
|
|
3544
3544
|
var Checkbox = function (props) {
|
|
3545
3545
|
var _a;
|
|
@@ -3572,7 +3572,7 @@ var Checkbox = function (props) {
|
|
|
3572
3572
|
return (jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx$1("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx$1("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3573
3573
|
};
|
|
3574
3574
|
|
|
3575
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
3575
|
+
var Wrapper$9 = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3576
3576
|
var size = _a.size;
|
|
3577
3577
|
switch (size) {
|
|
3578
3578
|
case "small":
|
|
@@ -3595,7 +3595,7 @@ var Wrapper$9 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
|
|
|
3595
3595
|
return "27px";
|
|
3596
3596
|
}
|
|
3597
3597
|
});
|
|
3598
|
-
var templateObject_1$
|
|
3598
|
+
var templateObject_1$O;
|
|
3599
3599
|
|
|
3600
3600
|
var parsers = {};
|
|
3601
3601
|
|
|
@@ -3863,7 +3863,7 @@ var flags = {
|
|
|
3863
3863
|
};
|
|
3864
3864
|
var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3865
3865
|
|
|
3866
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
3866
|
+
var StyledHeading = styled.span(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
3867
3867
|
var type = _a.type;
|
|
3868
3868
|
return theme.heading[type].fontSize;
|
|
3869
3869
|
}, function (_a) {
|
|
@@ -3887,14 +3887,14 @@ var StyledHeading = styled.span(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
3887
3887
|
var align = _a.align;
|
|
3888
3888
|
return align;
|
|
3889
3889
|
});
|
|
3890
|
-
var templateObject_1$
|
|
3890
|
+
var templateObject_1$N;
|
|
3891
3891
|
|
|
3892
3892
|
var Heading = function (props) {
|
|
3893
3893
|
var element = !!props.as ? props.as : props.type;
|
|
3894
3894
|
return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3895
3895
|
};
|
|
3896
3896
|
|
|
3897
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
3897
|
+
var Wrapper$8 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
3898
3898
|
var size = _a.size;
|
|
3899
3899
|
return theme.icon[size] || theme.icon.medium;
|
|
3900
3900
|
}, function (_a) {
|
|
@@ -3924,7 +3924,7 @@ var Wrapper$8 = styled.div(templateObject_1$K || (templateObject_1$K = __makeTem
|
|
|
3924
3924
|
return theme.colors.lightGray.light;
|
|
3925
3925
|
}
|
|
3926
3926
|
});
|
|
3927
|
-
var templateObject_1$
|
|
3927
|
+
var templateObject_1$M;
|
|
3928
3928
|
|
|
3929
3929
|
var icons = {
|
|
3930
3930
|
check: (jsx$1("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -3954,7 +3954,7 @@ var icons = {
|
|
|
3954
3954
|
};
|
|
3955
3955
|
var Icon = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3956
3956
|
|
|
3957
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
3957
|
+
var Wrapper$7 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3958
3958
|
var size = _a.size;
|
|
3959
3959
|
switch (size) {
|
|
3960
3960
|
default:
|
|
@@ -3966,7 +3966,7 @@ var Wrapper$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
3966
3966
|
return "118px";
|
|
3967
3967
|
}
|
|
3968
3968
|
});
|
|
3969
|
-
var templateObject_1$
|
|
3969
|
+
var templateObject_1$L;
|
|
3970
3970
|
|
|
3971
3971
|
var illustrations = {
|
|
3972
3972
|
keyboard: (jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsx$1("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsx$1("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsx$1("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsx$1("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsx$1("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsx$1("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -3979,17 +3979,18 @@ var illustrations = {
|
|
|
3979
3979
|
lockOpen: (jsxs("svg", __assign$2({ viewBox: "0 0 294 483" }, { children: [jsx$1("path", { d: "M54.519 188.988a19.62 19.62 0 01-19.62-19.617v-57.75a111.53 111.53 0 0118.77-62.01 111.528 111.528 0 01171.674-16.9 19.638 19.638 0 11-27.773 27.773 72.3 72.3 0 00-122.774 51.137v58.412a19.615 19.615 0 01-20.277 18.955z", fill: "#C4C4C4" }), jsx$1("path", { d: "M269.832 190H23.574C10.68 190 .226 200.453.226 213.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V213.348c0-12.895-10.453-23.348-23.348-23.348z", fill: "#995E00" }), jsx$1("path", { d: "M269.832 169.846H23.574c-12.895 0-23.348 10.453-23.348 23.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V193.194c0-12.895-10.453-23.348-23.348-23.348z", fill: "#FF9D00" }), jsx$1("path", { d: "M196.267 289.42a49.555 49.555 0 00-19.381-39.505 49.566 49.566 0 00-43.177-8.512 48.68 48.68 0 00-21.591 12.213 48.682 48.682 0 00-12.766 21.267 47.796 47.796 0 0012.11 48.459 9.265 9.265 0 012.56 4.155 9.243 9.243 0 01.086 4.876l-14.977 53.304a5.952 5.952 0 001.017 5.154 5.943 5.943 0 004.711 2.335h83.917a5.945 5.945 0 005.727-7.269l-14.536-54.186a10.36 10.36 0 012.641-9.03 47.585 47.585 0 0013.659-33.261z", fill: "#000" })] }))),
|
|
3980
3980
|
idCard: (jsxs("svg", __assign$2({ viewBox: "0 0 424 304" }, { children: [jsx$1("path", { d: "M0 82h424v182c0 22.091-17.909 40-40 40H40c-22.091 0-40-17.909-40-40V82z", fill: "#EDEDED" }), jsx$1("rect", { x: 242, y: 131, width: 149, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("rect", { x: 242, y: 179, width: 89, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("rect", { x: 242, y: 227, width: 119, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("path", { d: "M0 40C0 17.909 17.909 0 40 0h344c22.091 0 40 17.909 40 40v42H0V40z", fill: "#FF9D00" }), jsxs("g", __assign$2({ clipPath: "url(#clip0_894_47510)" }, { children: [jsx$1("path", { d: "M121 240c-18.778 0-34 15.457-34 34.523V304h68v-29.477C155 255.457 139.777 240 121 240z", fill: "#3DC478" }), jsx$1("path", { d: "M188.866 166.976a32.398 32.398 0 002.716-7.051c4.423-17.307-6.022-34.922-23.33-39.343a32.199 32.199 0 00-20.01 1.306c-3.93-8.569-11.549-15.357-21.394-17.873-14.776-3.777-29.77 3.288-36.594 16.204a32.826 32.826 0 00-2.518-.762c-17.307-4.423-34.923 6.021-39.346 23.328-2.335 9.138-.523 18.359 4.253 25.682a32.182 32.182 0 00-10.628 16.83c-4.423 17.306 6.022 34.922 23.33 39.343 14.077 3.598 28.358-2.642 35.577-14.409a32.237 32.237 0 0012.811 6.576c10.279 2.627 20.665.009 28.334-6.174 4.279 6.183 10.714 10.916 18.573 12.924 17.307 4.423 34.923-6.022 39.346-23.329 3.245-12.697-1.52-25.555-11.12-33.252z", fill: "#75301C" }), jsx$1("path", { d: "M129.851 228.557h-17.753v14.047a7.367 7.367 0 007.367 7.367h3.019a7.367 7.367 0 007.367-7.367v-14.047z", fill: "#FFB68D" }), jsx$1("path", { d: "M171.736 175.935c-.5 0-.987.052-1.464.134-5.422-22.108-25.36-38.514-49.141-38.514s-43.72 16.406-49.141 38.514a8.622 8.622 0 00-1.465-.134 8.606 8.606 0 100 17.213c.084 0 .164-.011.247-.013 2.501 25.61 24.09 45.625 50.359 45.625 26.268 0 47.858-20.015 50.359-45.625.082.002.163.013.246.013a8.606 8.606 0 008.607-8.607 8.606 8.606 0 00-8.607-8.606z", fill: "#FFB68D" }), jsx$1("path", { d: "M155.414 205.187c0-14.961-14.024-6.878-32.706-6.878-18.681 0-34.946-8.083-34.946 6.878 0 14.962 15.145 27.091 33.826 27.091s33.826-12.129 33.826-27.091z", fill: "#230F0B" }), jsx$1("path", { d: "M121.586 232.276c7.308 0 14.068-1.862 19.598-5.017-2.608-3.569-6.88-6.158-11.87-6.853a20.051 20.051 0 00-6.101.08 9.812 9.812 0 01-3.253 0 20.083 20.083 0 00-6.101-.08c-4.99.695-9.263 3.284-11.87 6.853 5.53 3.156 12.29 5.017 19.597 5.017z", fill: "#F21C40" }), jsx$1("path", { opacity: 0.37, d: "M126.804 188.238a5.217 5.217 0 10-10.434 0c0 2.881 2.336 3.523 5.217 3.523s5.217-.642 5.217-3.523z", fill: "#FFB68D" }), jsx$1("path", { d: "M94.656 157.686c-7.962 0-14.476 6.513-14.476 14.475v6.972c0 7.962 6.514 11.014 14.476 11.014 7.962 0 14.476-6.092 14.476-14.053v-3.933c.001-7.961-6.514-14.475-14.476-14.475z", fill: "#fff" }), jsx$1("path", { d: "M94.656 165.801a5.023 5.023 0 00-5.009 5.009v9.245c0 2.754 2.255 5.009 5.01 5.009 2.754 0 5.009-2.255 5.009-5.009v-9.245a5.023 5.023 0 00-5.01-5.009z", fill: "#23292F" }), jsx$1("path", { d: "M89.648 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053zM147.279 157.686c7.963 0 14.476 6.513 14.476 14.475v6.972c0 7.962-6.513 11.014-14.476 11.014-7.962 0-14.475-6.092-14.475-14.053v-3.933c0-7.961 6.513-14.475 14.475-14.475z", fill: "#fff" }), jsx$1("path", { d: "M147.28 165.801c2.754 0 5.009 2.253 5.009 5.009v9.245c0 2.754-2.255 5.009-5.009 5.009-2.755 0-5.009-2.255-5.009-5.009v-9.245a5.023 5.023 0 015.009-5.009z", fill: "#23292F" }), jsx$1("path", { d: "M152.288 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053z", fill: "#fff" }), jsx$1("path", { d: "M148.11 130.102c-8.331 0-15.781 2.196-20.751 5.648a51.514 51.514 0 00-6.346-.392c-3.856 0-7.521.421-10.842 1.176-4.971-3.288-12.43-5.381-20.772-5.381-14.965 0-27.097 6.728-27.097 15.027s12.132 15.027 27.097 15.027c4.564 0 8.861-.628 12.634-1.734 4.889 2.493 11.588 4.032 18.981 4.032 6.294 0 12.081-1.117 16.681-2.987 3.208.781 6.725 1.213 10.418 1.213 14.965 0 27.097-7.081 27.097-15.816-.001-8.733-12.133-15.813-27.1-15.813z", fill: "#75301C" }), jsx$1("path", { opacity: 0.57, d: "M68.7 184.682l.589-.59a1.146 1.146 0 10-1.62-1.62l-.59.59-.59-.59a1.147 1.147 0 00-1.62 1.62l.59.59-.59.589a1.147 1.147 0 001.62 1.621l.589-.59.59.59a1.146 1.146 0 101.618-1.621l-.587-.589zM176.426 184.682l.589-.59a1.144 1.144 0 10-1.62-1.62l-.589.59-.59-.59a1.146 1.146 0 00-1.62 1.62l.589.59-.589.589a1.146 1.146 0 001.619 1.621l.589-.59.59.59a1.144 1.144 0 001.619 0 1.147 1.147 0 000-1.621l-.587-.589z", fill: "#FFB68D" })] })), jsx$1("defs", { children: jsx$1("clipPath", __assign$2({ id: "clip0_894_47510" }, { children: jsx$1("path", { fill: "#fff", transform: "translate(41 103)", d: "M0 0H160V201H0z" }) })) })] }))),
|
|
3981
3981
|
cookie: (jsxs("svg", __assign$2({ viewBox: "0 0 867.3 871.1" }, { children: [jsx$1("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", fill: "#f49500" }), jsx$1("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", opacity: 0.2, fill: "#010202" }), jsx$1("path", { d: "M597.5 276.4c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5C471.1 7.3 468.5.7 463 .4c-6.3-.3-12.6-.4-19-.4C210.4 0 20.9 189.5 20.9 423.2s189.5 423.2 423.2 423.2 423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1-171.9-74.9-173.1-168.9z", fill: "#f49500" }), jsxs("g", __assign$2({ fill: "#9e1827" }, { children: [jsx$1("circle", { cx: 277.7, cy: 259.3, r: 65 }), jsx$1("circle", { cx: 261.5, cy: 584.3, r: 81.2 }), jsx$1("circle", { cx: 624.3, cy: 543.8, r: 76.8 }), jsx$1("circle", { cx: 477, cy: 714.1, r: 32.9 }), jsx$1("circle", { cx: 415.3, cy: 443.9, r: 38.7 }), jsx$1("circle", { cx: 677.3, cy: 74.1, r: 33.1 }), jsx$1("circle", { cx: 838.9, cy: 192.3, r: 28.4 }), jsx$1("circle", { cx: 732.8, cy: 244.1, r: 51.9 })] }))] }))),
|
|
3982
|
+
classroom: (jsxs("svg", __assign$2({ viewBox: "0 0 165.4 116.8" }, { children: [jsx$1("path", { d: "M14.4 109.3c-3.8 0-6.9-3.1-6.9-6.9v-88c0-3.8 3.1-6.9 6.9-6.9H151c3.8 0 6.9 3.1 6.9 6.9v88c0 3.8-3.1 6.9-6.9 6.9H14.4z", fill: "#2d9d60" }), jsx$1("path", { d: "M150.4 15v86.8H15V15h135.4m.6-15H14.4C6.5 0 0 6.5 0 14.4v88c0 8 6.5 14.4 14.4 14.4H151c8 0 14.4-6.5 14.4-14.4v-88C165.4 6.5 159 0 151 0z", fill: "#FF9D00" }), jsx$1("path", { fill: "#c4c4c4", d: "M103.1 90.7H135.39999999999998V101.8H103.1z" }), jsx$1("g", { children: jsx$1("path", { d: "M82 81.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5H82c2.8 0 5 2.2 5 5s-2.2 5-5 5zM69.4 63H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h25.7c2.8 0 5 2.2 5 5s-2.2 5-5 5zM93.3 44.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h49.6c2.8 0 5 2.2 5 5s-2.3 5-5 5z", fill: "#fff" }) })] }))),
|
|
3982
3983
|
};
|
|
3983
3984
|
var Illustration = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
3984
3985
|
|
|
3985
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
3986
|
+
var InputIconWrapper = styled.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) {
|
|
3986
3987
|
var isChanged = _a.isChanged;
|
|
3987
3988
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
3988
3989
|
}, function (_a) {
|
|
3989
3990
|
var disabled = _a.disabled;
|
|
3990
3991
|
return (disabled ? "not-allowed" : "pointer");
|
|
3991
3992
|
});
|
|
3992
|
-
var StyledInput = styled.input(templateObject_2$
|
|
3993
|
+
var StyledInput = styled.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) {
|
|
3993
3994
|
var disabled = _a.disabled;
|
|
3994
3995
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
3995
3996
|
}, function (_a) {
|
|
@@ -4002,7 +4003,7 @@ var StyledInput = styled.input(templateObject_2$t || (templateObject_2$t = __mak
|
|
|
4002
4003
|
var disabled = _a.disabled;
|
|
4003
4004
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4004
4005
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4005
|
-
var templateObject_1$
|
|
4006
|
+
var templateObject_1$K, templateObject_2$v;
|
|
4006
4007
|
|
|
4007
4008
|
var PasswordInput = function (props) {
|
|
4008
4009
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -4182,7 +4183,7 @@ Input.Date = DateInput;
|
|
|
4182
4183
|
|
|
4183
4184
|
var Logo = function (props) { return (jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxs("g", { children: [jsx$1("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsx$1("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsx$1("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsx$1("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsx$1("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsx$1("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsx$1("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
4184
4185
|
|
|
4185
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
4186
|
+
var Wrapper$6 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4186
4187
|
var size = _a.size;
|
|
4187
4188
|
switch (size) {
|
|
4188
4189
|
default:
|
|
@@ -4192,7 +4193,7 @@ var Wrapper$6 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTem
|
|
|
4192
4193
|
return "116px";
|
|
4193
4194
|
}
|
|
4194
4195
|
});
|
|
4195
|
-
var templateObject_1$
|
|
4196
|
+
var templateObject_1$J;
|
|
4196
4197
|
|
|
4197
4198
|
var medals = {
|
|
4198
4199
|
small: {
|
|
@@ -4208,11 +4209,11 @@ var medals = {
|
|
|
4208
4209
|
};
|
|
4209
4210
|
var Medal = function (props) { return (jsx$1(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4210
4211
|
|
|
4211
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
4212
|
+
var Wrapper$5 = styled.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) {
|
|
4212
4213
|
var disabled = _a.disabled;
|
|
4213
4214
|
return (disabled ? "49.5px" : "");
|
|
4214
4215
|
});
|
|
4215
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
4216
|
+
var StyledInputNumber = styled.input(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4216
4217
|
var disabled = _a.disabled;
|
|
4217
4218
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4218
4219
|
}, function (_a) {
|
|
@@ -4225,7 +4226,7 @@ var StyledInputNumber = styled.input(templateObject_2$s || (templateObject_2$s =
|
|
|
4225
4226
|
var disabled = _a.disabled;
|
|
4226
4227
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4227
4228
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4228
|
-
var templateObject_1$
|
|
4229
|
+
var templateObject_1$I, templateObject_2$u;
|
|
4229
4230
|
|
|
4230
4231
|
var Number$1 = function (props) {
|
|
4231
4232
|
var inputRef = useRef(null);
|
|
@@ -4262,7 +4263,7 @@ var Number$1 = function (props) {
|
|
|
4262
4263
|
return (jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx$1(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsx$1(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
4263
4264
|
};
|
|
4264
4265
|
|
|
4265
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
4266
|
+
var StyledParagraph = styled.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) {
|
|
4266
4267
|
var size = _a.size;
|
|
4267
4268
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4268
4269
|
}, function (_a) {
|
|
@@ -4294,11 +4295,11 @@ var StyledParagraph = styled.p(templateObject_1$F || (templateObject_1$F = __mak
|
|
|
4294
4295
|
var align = _a.align;
|
|
4295
4296
|
return align;
|
|
4296
4297
|
});
|
|
4297
|
-
var templateObject_1$
|
|
4298
|
+
var templateObject_1$H;
|
|
4298
4299
|
|
|
4299
4300
|
var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4300
4301
|
|
|
4301
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
4302
|
+
var StyledRadio = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4302
4303
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4303
4304
|
if (disabled)
|
|
4304
4305
|
return theme.colors.lightGray.darker;
|
|
@@ -4326,7 +4327,7 @@ var StyledRadio = styled.div(templateObject_1$E || (templateObject_1$E = __makeT
|
|
|
4326
4327
|
return theme.colors.green.base;
|
|
4327
4328
|
return "";
|
|
4328
4329
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4329
|
-
var templateObject_1$
|
|
4330
|
+
var templateObject_1$G;
|
|
4330
4331
|
|
|
4331
4332
|
var Radio = function (props) {
|
|
4332
4333
|
var _a, _b;
|
|
@@ -4358,7 +4359,7 @@ var Radio = function (props) {
|
|
|
4358
4359
|
return (jsx$1(StyledRadio, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsx$1("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
4359
4360
|
};
|
|
4360
4361
|
|
|
4361
|
-
var StyledRange = styled.div(templateObject_1$
|
|
4362
|
+
var StyledRange = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
|
|
4362
4363
|
var value = _a.value, disabled = _a.disabled;
|
|
4363
4364
|
return "linear-gradient(90deg,\n ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " 100%\n )");
|
|
4364
4365
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4368,7 +4369,7 @@ var StyledRange = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
4368
4369
|
var disabled = _a.disabled;
|
|
4369
4370
|
return disabled ? "not-allowed" : "pointer";
|
|
4370
4371
|
});
|
|
4371
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$F;
|
|
4372
4373
|
|
|
4373
4374
|
var Range = function (props) {
|
|
4374
4375
|
var _a;
|
|
@@ -4397,11 +4398,11 @@ var Range = function (props) {
|
|
|
4397
4398
|
return (jsx$1(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsx$1("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
4398
4399
|
};
|
|
4399
4400
|
|
|
4400
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
4401
|
+
var Wrapper$4 = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
4401
4402
|
var disabled = _a.disabled;
|
|
4402
4403
|
return (disabled ? "not-allowed" : "pointer");
|
|
4403
4404
|
});
|
|
4404
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
4405
|
+
var StyledSelect = styled.select(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4405
4406
|
var disabled = _a.disabled;
|
|
4406
4407
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4407
4408
|
}, function (_a) {
|
|
@@ -4414,7 +4415,7 @@ var StyledSelect = styled.select(templateObject_2$r || (templateObject_2$r = __m
|
|
|
4414
4415
|
var isChanged = _a.isChanged;
|
|
4415
4416
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4416
4417
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4417
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$E, templateObject_2$t;
|
|
4418
4419
|
|
|
4419
4420
|
var Select = function (props) {
|
|
4420
4421
|
var _a;
|
|
@@ -4436,18 +4437,18 @@ var Select = function (props) {
|
|
|
4436
4437
|
return (jsxs(Wrapper$4, { children: [jsx$1(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx$1("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
4437
4438
|
};
|
|
4438
4439
|
|
|
4439
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
4440
|
+
var StyledSpacer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4440
4441
|
var horizontal = _a.horizontal;
|
|
4441
4442
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4442
4443
|
}, function (_a) {
|
|
4443
4444
|
var vertical = _a.vertical;
|
|
4444
4445
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4445
4446
|
});
|
|
4446
|
-
var templateObject_1$
|
|
4447
|
+
var templateObject_1$D;
|
|
4447
4448
|
|
|
4448
4449
|
var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
|
|
4449
4450
|
|
|
4450
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
4451
|
+
var StyledSubheading = styled.p(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4451
4452
|
var size = _a.size;
|
|
4452
4453
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4453
4454
|
}, function (_a) {
|
|
@@ -4475,18 +4476,18 @@ var StyledSubheading = styled.p(templateObject_1$A || (templateObject_1$A = __ma
|
|
|
4475
4476
|
return theme.colors.darkGray.dark;
|
|
4476
4477
|
}
|
|
4477
4478
|
});
|
|
4478
|
-
var templateObject_1$
|
|
4479
|
+
var templateObject_1$C;
|
|
4479
4480
|
|
|
4480
4481
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4481
4482
|
|
|
4482
|
-
var Container$k = styled.div(templateObject_1$
|
|
4483
|
-
var templateObject_1$
|
|
4483
|
+
var Container$k = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
4484
|
+
var templateObject_1$B;
|
|
4484
4485
|
|
|
4485
4486
|
var Tag = function (props) {
|
|
4486
4487
|
return jsx$1(Container$k, { children: props.children });
|
|
4487
4488
|
};
|
|
4488
4489
|
|
|
4489
|
-
var Container$j = styled.div(templateObject_1$
|
|
4490
|
+
var Container$j = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4490
4491
|
var disabled = _a.disabled;
|
|
4491
4492
|
return (disabled ? "not-allowed" : "pointer");
|
|
4492
4493
|
}, function (_a) {
|
|
@@ -4504,7 +4505,7 @@ var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeT
|
|
|
4504
4505
|
var disabled = _a.disabled;
|
|
4505
4506
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4506
4507
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4507
|
-
var templateObject_1$
|
|
4508
|
+
var templateObject_1$A;
|
|
4508
4509
|
|
|
4509
4510
|
var Toggle = function (props) {
|
|
4510
4511
|
var _a;
|
|
@@ -4535,7 +4536,7 @@ var Toggle = function (props) {
|
|
|
4535
4536
|
return (jsx$1(Container$j, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
4536
4537
|
};
|
|
4537
4538
|
|
|
4538
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
4539
|
+
var Wrapper$3 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
4539
4540
|
var level = _a.level;
|
|
4540
4541
|
switch (level) {
|
|
4541
4542
|
case 1:
|
|
@@ -4546,7 +4547,7 @@ var Wrapper$3 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTem
|
|
|
4546
4547
|
return "70px";
|
|
4547
4548
|
}
|
|
4548
4549
|
});
|
|
4549
|
-
var templateObject_1$
|
|
4550
|
+
var templateObject_1$z;
|
|
4550
4551
|
|
|
4551
4552
|
var trophies = {
|
|
4552
4553
|
1: {
|
|
@@ -4582,7 +4583,7 @@ var trophies = {
|
|
|
4582
4583
|
};
|
|
4583
4584
|
var Trophy = function (props) { return (jsx$1(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4584
4585
|
|
|
4585
|
-
var Container$i = styled.div(templateObject_1$
|
|
4586
|
+
var Container$i = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
4586
4587
|
var type = _a.type;
|
|
4587
4588
|
switch (type) {
|
|
4588
4589
|
case "success":
|
|
@@ -4599,11 +4600,14 @@ var Container$i = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
|
|
|
4599
4600
|
return theme.colors.red.base;
|
|
4600
4601
|
}
|
|
4601
4602
|
});
|
|
4602
|
-
var templateObject_1$
|
|
4603
|
+
var templateObject_1$y;
|
|
4603
4604
|
|
|
4604
4605
|
var Alert = function (props) { return (jsxs(Container$i, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, { children: props.message })] }))); };
|
|
4605
4606
|
|
|
4606
|
-
var StyledCard = styled.div(templateObject_1$
|
|
4607
|
+
var StyledCard = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
4608
|
+
var bordered = _a.bordered;
|
|
4609
|
+
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4610
|
+
}, function (_a) {
|
|
4607
4611
|
var ellipse = _a.ellipse;
|
|
4608
4612
|
return ellipse
|
|
4609
4613
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -4612,23 +4616,23 @@ var StyledCard = styled.div(templateObject_1$v || (templateObject_1$v = __makeTe
|
|
|
4612
4616
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4613
4617
|
: "";
|
|
4614
4618
|
});
|
|
4615
|
-
var Ellipse = styled.div(templateObject_2$
|
|
4619
|
+
var Ellipse = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
4616
4620
|
var color = _a.color;
|
|
4617
4621
|
return color ? theme.colors[color].light : "";
|
|
4618
4622
|
});
|
|
4619
4623
|
var Content = styled.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"])));
|
|
4620
|
-
var templateObject_1$
|
|
4624
|
+
var templateObject_1$x, templateObject_2$s, templateObject_3$a;
|
|
4621
4625
|
|
|
4622
4626
|
var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
|
|
4623
4627
|
|
|
4624
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
4625
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
4628
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
4629
|
+
var CheckboxContainer = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4626
4630
|
var CheckboxWrapper = styled.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"])));
|
|
4627
4631
|
var Label$9 = styled(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) {
|
|
4628
4632
|
var weight = _a.weight;
|
|
4629
4633
|
return weight || 500;
|
|
4630
4634
|
}, theme.colors.darkGray.base);
|
|
4631
|
-
var templateObject_1$
|
|
4635
|
+
var templateObject_1$w, templateObject_2$r, templateObject_3$9, templateObject_4$7;
|
|
4632
4636
|
|
|
4633
4637
|
var Checkboxes = function (props) {
|
|
4634
4638
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4651,12 +4655,12 @@ var Checkboxes = function (props) {
|
|
|
4651
4655
|
}) })] }));
|
|
4652
4656
|
};
|
|
4653
4657
|
|
|
4654
|
-
var Container$h = styled.div(templateObject_1$
|
|
4655
|
-
var Item = styled.div(templateObject_2$
|
|
4658
|
+
var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
4659
|
+
var Item = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
4656
4660
|
var isOpen = _a.isOpen;
|
|
4657
4661
|
return (isOpen ? "" : "none");
|
|
4658
|
-
}, theme.colors.lightGray.
|
|
4659
|
-
var templateObject_1$
|
|
4662
|
+
}, theme.colors.lightGray.dark);
|
|
4663
|
+
var templateObject_1$v, templateObject_2$q;
|
|
4660
4664
|
|
|
4661
4665
|
var Collapse = function (props) {
|
|
4662
4666
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4674,9 +4678,9 @@ var Collapse = function (props) {
|
|
|
4674
4678
|
}) })));
|
|
4675
4679
|
};
|
|
4676
4680
|
|
|
4677
|
-
var Container$g = styled.div(templateObject_1$
|
|
4678
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
4679
|
-
var templateObject_1$
|
|
4681
|
+
var Container$g = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4682
|
+
var Label$8 = styled(StyledParagraph)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4683
|
+
var templateObject_1$u, templateObject_2$p;
|
|
4680
4684
|
|
|
4681
4685
|
var DateInputField = function (props) {
|
|
4682
4686
|
var onChange = function (value) {
|
|
@@ -4690,9 +4694,9 @@ var DateInputField = function (props) {
|
|
|
4690
4694
|
return (jsxs(Container$g, { children: [jsx$1(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
4691
4695
|
};
|
|
4692
4696
|
|
|
4693
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
4694
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
4695
|
-
var templateObject_1$
|
|
4697
|
+
var StyledIconButton = styled(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"])));
|
|
4698
|
+
var GhostIconButton = styled(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"])));
|
|
4699
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4696
4700
|
|
|
4697
4701
|
var IconButton = function (props) {
|
|
4698
4702
|
if (props.color === "white")
|
|
@@ -4700,9 +4704,9 @@ var IconButton = function (props) {
|
|
|
4700
4704
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4701
4705
|
};
|
|
4702
4706
|
|
|
4703
|
-
var Container$f = styled.div(templateObject_1$
|
|
4704
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
4705
|
-
var templateObject_1$
|
|
4707
|
+
var Container$f = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4708
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4709
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4706
4710
|
|
|
4707
4711
|
var InputField = function (props) {
|
|
4708
4712
|
var onChange = function (value) {
|
|
@@ -4716,7 +4720,7 @@ var InputField = function (props) {
|
|
|
4716
4720
|
return (jsxs(Container$f, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
4717
4721
|
};
|
|
4718
4722
|
|
|
4719
|
-
var Container$e = styled.div(templateObject_1$
|
|
4723
|
+
var Container$e = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
4720
4724
|
var status = _a.status, color = _a.color;
|
|
4721
4725
|
switch (status) {
|
|
4722
4726
|
case "passed":
|
|
@@ -4760,23 +4764,23 @@ var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
4760
4764
|
return theme.colors.darkGray.light;
|
|
4761
4765
|
}
|
|
4762
4766
|
});
|
|
4763
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
4764
|
-
var templateObject_1$
|
|
4767
|
+
var CheckIconWrapper = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
4768
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4765
4769
|
|
|
4766
4770
|
var Key$1 = function (props) { return (jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
4767
4771
|
marginTop: "13px",
|
|
4768
4772
|
transform: "scale(2)",
|
|
4769
4773
|
} }, { children: jsx$1("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsx$1(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
4770
4774
|
|
|
4771
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
4775
|
+
var Wrapper$2 = styled.a(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-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) {
|
|
4772
4776
|
var chevron = _a.chevron;
|
|
4773
4777
|
return (chevron === "left" ? "4px" : "");
|
|
4774
4778
|
}, function (_a) {
|
|
4775
4779
|
var chevron = _a.chevron;
|
|
4776
4780
|
return (chevron === "right" ? "4px" : "");
|
|
4777
4781
|
});
|
|
4778
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
4779
|
-
var templateObject_1$
|
|
4782
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
4783
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4780
4784
|
|
|
4781
4785
|
var Link = function (props) {
|
|
4782
4786
|
var onClick = function (e) {
|
|
@@ -4788,15 +4792,15 @@ var Link = function (props) {
|
|
|
4788
4792
|
return (jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx$1(Icon, { type: "chevronLeft", color: "green" }), jsx$1(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx$1(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
4789
4793
|
};
|
|
4790
4794
|
|
|
4791
|
-
var Container$d = styled.div(templateObject_1$
|
|
4795
|
+
var Container$d = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
4792
4796
|
var text = _a.text;
|
|
4793
4797
|
return (text ? "20px" : "");
|
|
4794
4798
|
});
|
|
4795
|
-
var templateObject_1$
|
|
4799
|
+
var templateObject_1$p;
|
|
4796
4800
|
|
|
4797
4801
|
var Loading = function (props) { return (jsxs(Container$d, __assign$2({}, props, { children: [jsx$1(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
4798
4802
|
|
|
4799
|
-
var Container$c = styled.div(templateObject_1$
|
|
4803
|
+
var Container$c = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
|
|
4800
4804
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4801
4805
|
if (dropdownIsVisible) {
|
|
4802
4806
|
switch (color) {
|
|
@@ -4809,7 +4813,7 @@ var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
|
|
|
4809
4813
|
}
|
|
4810
4814
|
return "";
|
|
4811
4815
|
});
|
|
4812
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
4816
|
+
var SelectedLocaleWrapper = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
4813
4817
|
var DropdownContainer = styled.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) {
|
|
4814
4818
|
var color = _a.color;
|
|
4815
4819
|
switch (color) {
|
|
@@ -4821,7 +4825,7 @@ var DropdownContainer = styled.div(templateObject_3$8 || (templateObject_3$8 = _
|
|
|
4821
4825
|
}
|
|
4822
4826
|
});
|
|
4823
4827
|
var LocaleWrapper = styled.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);
|
|
4824
|
-
var templateObject_1$
|
|
4828
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$8, templateObject_4$6;
|
|
4825
4829
|
|
|
4826
4830
|
var LocaleSelect = function (props) {
|
|
4827
4831
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4835,17 +4839,17 @@ var LocaleSelect = function (props) {
|
|
|
4835
4839
|
.map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
4836
4840
|
};
|
|
4837
4841
|
|
|
4838
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
4839
|
-
var templateObject_1$
|
|
4842
|
+
var Wrapper$1 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
4843
|
+
var templateObject_1$n;
|
|
4840
4844
|
|
|
4841
4845
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
4842
4846
|
|
|
4843
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
4847
|
+
var NotificationContainer = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
|
|
4844
4848
|
var contrast = _a.contrast;
|
|
4845
4849
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4846
4850
|
});
|
|
4847
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
4848
|
-
var templateObject_1$
|
|
4851
|
+
var ButtonContainer = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
|
|
4852
|
+
var templateObject_1$m, templateObject_2$j;
|
|
4849
4853
|
|
|
4850
4854
|
var Notification = function (props) {
|
|
4851
4855
|
if (!props.isVisible)
|
|
@@ -4853,9 +4857,9 @@ var Notification = function (props) {
|
|
|
4853
4857
|
return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
4854
4858
|
};
|
|
4855
4859
|
|
|
4856
|
-
var Container$b = styled.div(templateObject_1$
|
|
4857
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
4858
|
-
var templateObject_1$
|
|
4860
|
+
var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4861
|
+
var Label$6 = styled(StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4862
|
+
var templateObject_1$l, templateObject_2$i;
|
|
4859
4863
|
|
|
4860
4864
|
var NumberField = function (props) {
|
|
4861
4865
|
var onChange = function (value) {
|
|
@@ -4910,15 +4914,15 @@ var isStrongPassword = function (password) {
|
|
|
4910
4914
|
exports.isStrongPassword = isStrongPassword;
|
|
4911
4915
|
}(expressions));
|
|
4912
4916
|
|
|
4913
|
-
var Container$a = styled.div(templateObject_1$
|
|
4914
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
4917
|
+
var Container$a = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
4918
|
+
var Label$5 = styled(StyledParagraph)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4915
4919
|
var HelperContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
4916
4920
|
var fadeIn = keyframes$1(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
4917
4921
|
var Helper = styled(StyledParagraph)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
4918
4922
|
var isOk = _a.isOk;
|
|
4919
4923
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4920
4924
|
}, fadeIn);
|
|
4921
|
-
var templateObject_1$
|
|
4925
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4922
4926
|
|
|
4923
4927
|
var translations = {
|
|
4924
4928
|
"nl-NL": {
|
|
@@ -4988,7 +4992,7 @@ var generateRandomString = function (length) {
|
|
|
4988
4992
|
return string;
|
|
4989
4993
|
};
|
|
4990
4994
|
|
|
4991
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
4995
|
+
var PopupContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
4992
4996
|
var isVisible = _a.isVisible;
|
|
4993
4997
|
return (isVisible ? "100%" : "0%");
|
|
4994
4998
|
}, function (_a) {
|
|
@@ -5001,7 +5005,7 @@ var PopupContainer = styled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
5001
5005
|
var contrast = _a.contrast;
|
|
5002
5006
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5003
5007
|
});
|
|
5004
|
-
var templateObject_1$
|
|
5008
|
+
var templateObject_1$j;
|
|
5005
5009
|
|
|
5006
5010
|
var Popup = function (props) {
|
|
5007
5011
|
var popupRef = useRef(null);
|
|
@@ -5037,8 +5041,8 @@ var Popup = function (props) {
|
|
|
5037
5041
|
return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
5038
5042
|
};
|
|
5039
5043
|
|
|
5040
|
-
var Wrapper = styled.div(templateObject_1$
|
|
5041
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
5044
|
+
var Wrapper = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
5045
|
+
var StyledProgressBar = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
5042
5046
|
var showInfo = _a.showInfo;
|
|
5043
5047
|
return (showInfo ? "10px" : "");
|
|
5044
5048
|
});
|
|
@@ -5049,12 +5053,12 @@ var Indicator$1 = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeT
|
|
|
5049
5053
|
var color = _a.color;
|
|
5050
5054
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5051
5055
|
});
|
|
5052
|
-
var templateObject_1$
|
|
5056
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$6;
|
|
5053
5057
|
|
|
5054
5058
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
5055
5059
|
|
|
5056
|
-
var Container$9 = styled.ol(templateObject_1$
|
|
5057
|
-
var Step$1 = styled.li(templateObject_2$
|
|
5060
|
+
var Container$9 = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
5061
|
+
var Step$1 = styled.li(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
|
|
5058
5062
|
var status = _a.status;
|
|
5059
5063
|
return (!!status ? "pointer" : "not-allowed");
|
|
5060
5064
|
}, function (_a) {
|
|
@@ -5076,7 +5080,7 @@ var Step$1 = styled.li(templateObject_2$d || (templateObject_2$d = __makeTemplat
|
|
|
5076
5080
|
var hasTitle = _a.hasTitle;
|
|
5077
5081
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5078
5082
|
}, theme.colors.lightGray.dark);
|
|
5079
|
-
var templateObject_1$
|
|
5083
|
+
var templateObject_1$h, templateObject_2$f;
|
|
5080
5084
|
|
|
5081
5085
|
var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5082
5086
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5093,8 +5097,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.st
|
|
|
5093
5097
|
return (jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsx$1("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
5094
5098
|
}) })); };
|
|
5095
5099
|
|
|
5096
|
-
var Container$8 = styled.ol(templateObject_1$
|
|
5097
|
-
var Step = styled.li(templateObject_2$
|
|
5100
|
+
var Container$8 = styled.ol(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
5101
|
+
var Step = styled.li(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
5098
5102
|
var status = _a.status;
|
|
5099
5103
|
return (!!status ? "pointer" : "not-allowed");
|
|
5100
5104
|
}, function (_a) {
|
|
@@ -5113,7 +5117,7 @@ var Step = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateO
|
|
|
5113
5117
|
? theme.colors.lightGray.light
|
|
5114
5118
|
: theme.colors.darkGray.light;
|
|
5115
5119
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5116
|
-
var templateObject_1$
|
|
5120
|
+
var templateObject_1$g, templateObject_2$e;
|
|
5117
5121
|
|
|
5118
5122
|
var Steps$1 = function (props) { return (jsx$1(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5119
5123
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -5134,6 +5138,56 @@ var Steps = function (props) {
|
|
|
5134
5138
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
5135
5139
|
};
|
|
5136
5140
|
|
|
5141
|
+
var TabsContainer$1 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"], ["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"])), theme.colors.lightGray.dark);
|
|
5142
|
+
var Tab$1 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5143
|
+
var isActive = _a.isActive;
|
|
5144
|
+
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
5145
|
+
}, function (_a) {
|
|
5146
|
+
var isActive = _a.isActive;
|
|
5147
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5148
|
+
}, theme.colors.blue.base);
|
|
5149
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5150
|
+
|
|
5151
|
+
var Tabs$2 = function (props) {
|
|
5152
|
+
var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5153
|
+
var onChangeTab = function (key) {
|
|
5154
|
+
setActiveTab(key);
|
|
5155
|
+
if (props.onChange)
|
|
5156
|
+
props.onChange(key);
|
|
5157
|
+
};
|
|
5158
|
+
return (jsx$1(TabsContainer$1, { children: props.items.map(function (_a) {
|
|
5159
|
+
var key = _a.key, label = _a.label;
|
|
5160
|
+
return (jsx$1(Tab$1, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsx$1(Paragraph, { children: label }) }), key));
|
|
5161
|
+
}) }));
|
|
5162
|
+
};
|
|
5163
|
+
|
|
5164
|
+
var TabsContainer = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"], ["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"])), theme.colors.lightGray.dark);
|
|
5165
|
+
var Tab = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5166
|
+
var isActive = _a.isActive;
|
|
5167
|
+
return (isActive ? "block" : "none");
|
|
5168
|
+
}, theme.colors.blue.base, function (_a) {
|
|
5169
|
+
var isActive = _a.isActive;
|
|
5170
|
+
return isActive ? theme.colors.blue.base : "";
|
|
5171
|
+
}, theme.colors.blue.base);
|
|
5172
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5173
|
+
|
|
5174
|
+
var Tabs$1 = function (props) {
|
|
5175
|
+
var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
5176
|
+
var onChangeTab = function (key) {
|
|
5177
|
+
setActiveTab(key);
|
|
5178
|
+
if (props.onChange)
|
|
5179
|
+
props.onChange(key);
|
|
5180
|
+
};
|
|
5181
|
+
return (jsx$1(TabsContainer, { children: props.items.map(function (_a) {
|
|
5182
|
+
var key = _a.key, label = _a.label;
|
|
5183
|
+
return (jsx$1(Tab, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsx$1(Paragraph, { children: label }) }), key));
|
|
5184
|
+
}) }));
|
|
5185
|
+
};
|
|
5186
|
+
|
|
5187
|
+
var Tabs = function (props) {
|
|
5188
|
+
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
5189
|
+
};
|
|
5190
|
+
|
|
5137
5191
|
var Fieldset = styled.fieldset(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
5138
5192
|
var RadioContainer = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5139
5193
|
var RadioWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
@@ -11370,8 +11424,8 @@ var SpecialRow = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTe
|
|
|
11370
11424
|
var TopRow = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"])));
|
|
11371
11425
|
var StartRow = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"])));
|
|
11372
11426
|
var BottomRow = styled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"])));
|
|
11373
|
-
var SpacebarRow = styled.div(templateObject_6$
|
|
11374
|
-
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$
|
|
11427
|
+
var SpacebarRow = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"])));
|
|
11428
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
11375
11429
|
|
|
11376
11430
|
var Keyboard = function (props) {
|
|
11377
11431
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11444,27 +11498,33 @@ var Keyboard = function (props) {
|
|
|
11444
11498
|
};
|
|
11445
11499
|
|
|
11446
11500
|
var Mask = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
11447
|
-
var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n
|
|
11501
|
+
var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
11448
11502
|
var width = _a.width;
|
|
11449
|
-
|
|
11503
|
+
if (!width)
|
|
11504
|
+
return "720px";
|
|
11505
|
+
if (typeof width === "number")
|
|
11506
|
+
return "".concat(width, "px");
|
|
11507
|
+
return width;
|
|
11450
11508
|
});
|
|
11451
|
-
var
|
|
11452
|
-
var
|
|
11453
|
-
var
|
|
11454
|
-
var
|
|
11509
|
+
var TitleWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n margin: 0 25px 20px 0;\n"], ["\n margin: 0 25px 20px 0;\n"])));
|
|
11510
|
+
var CloseIconWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"])), theme.colors.darkGray.base);
|
|
11511
|
+
var ChildrenWrapper = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n padding: 20px 35px;\n"], ["\n padding: 20px 35px;\n"])));
|
|
11512
|
+
var FooterContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
11513
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1;
|
|
11455
11514
|
|
|
11456
11515
|
var Modal = function (props) {
|
|
11457
|
-
var _a = useState(props.
|
|
11516
|
+
var _a = useState(props.isOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
11458
11517
|
var isClosable = useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
|
|
11459
|
-
useEffect(function () {
|
|
11460
|
-
|
|
11518
|
+
useEffect(function () {
|
|
11519
|
+
setIsOpen(props.isOpen);
|
|
11520
|
+
}, [props.isOpen]);
|
|
11521
|
+
useEffect(function () {
|
|
11522
|
+
if (!isOpen && props.afterClose)
|
|
11523
|
+
props.afterClose();
|
|
11524
|
+
}, [isOpen]);
|
|
11525
|
+
if (!isOpen)
|
|
11461
11526
|
return null;
|
|
11462
|
-
|
|
11463
|
-
if (props.onClose)
|
|
11464
|
-
props.onClose();
|
|
11465
|
-
setIsVisible(false);
|
|
11466
|
-
};
|
|
11467
|
-
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: onClose }) })), jsx$1(ChildrenWrapper, { children: props.children }), props.footer && jsx$1(FooterContainer, { children: props.footer })] }) })) }));
|
|
11527
|
+
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxs(ChildrenWrapper, { children: [props.title && (jsx$1(TitleWrapper, { children: jsx$1(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxs(FooterContainer, { children: [props.closeButton && (jsx$1(Button, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsx$1(Button, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
|
|
11468
11528
|
};
|
|
11469
11529
|
|
|
11470
11530
|
var Container$1 = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|
|
@@ -11493,12 +11553,12 @@ var Result = function (props) {
|
|
|
11493
11553
|
return (jsxs(Container$1, __assign$2({ passed: isPassed }, { children: [jsx$1(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsx$1(Spacer, { horizontal: 15 }), jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsx$1(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxs(ProgressBarWrapper, { children: [jsx$1(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsx$1(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsx$1(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxs("div", { children: [jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
11494
11554
|
};
|
|
11495
11555
|
|
|
11496
|
-
var Container = styled.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
|
|
11497
|
-
var TableHead = styled.thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["
|
|
11556
|
+
var Container = styled.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);
|
|
11557
|
+
var TableHead = styled.thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1([""], [""])));
|
|
11498
11558
|
var TableBody = styled.tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11499
11559
|
styled.tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11500
11560
|
var ColumnTitle = styled.th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n text-align: left;\n padding-left: 15px;\n"], ["\n text-align: left;\n padding-left: 15px;\n"])));
|
|
11501
|
-
var TableRow = styled.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);
|
|
11561
|
+
var TableRow = styled.tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
11502
11562
|
var TableCell = styled.td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n 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);
|
|
11503
11563
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11504
11564
|
|
|
@@ -11516,5 +11576,5 @@ var Table = function (_a) {
|
|
|
11516
11576
|
}) })] }));
|
|
11517
11577
|
};
|
|
11518
11578
|
|
|
11519
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
11579
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
11520
11580
|
//# sourceMappingURL=index.es.js.map
|