@typeolymp/ui-components 1.14.2 → 1.15.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/Icon/index.d.ts +1 -1
- package/build/components/atoms/Illustration/index.d.ts +2 -2
- package/build/components/organisms/Transfer/index.d.ts +13 -0
- package/build/components/organisms/Transfer/stories.d.ts +19 -0
- package/build/components/organisms/Transfer/styles.d.ts +3 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +256 -183
- package/build/index.es.js.map +1 -1
- package/build/index.js +256 -182
- package/build/index.js.map +1 -1
- package/package.json +2 -2
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$T || (templateObject_1$T = __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$z || (templateObject_2$z = __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$T, templateObject_2$z;
|
|
3407
3407
|
|
|
3408
|
-
var StyledButton = styled.button(templateObject_1$
|
|
3408
|
+
var StyledButton = styled.button(templateObject_1$S || (templateObject_1$S = __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) {
|
|
@@ -3459,11 +3459,11 @@ var StyledButton = styled.button(templateObject_1$R || (templateObject_1$R = __m
|
|
|
3459
3459
|
? theme.button.medium.heightActive
|
|
3460
3460
|
: theme.button[size].heightActive;
|
|
3461
3461
|
});
|
|
3462
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3462
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
3463
3463
|
var size = _a.size;
|
|
3464
3464
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3465
3465
|
});
|
|
3466
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
3466
|
+
var GhostButton = styled(StyledButton)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
3467
3467
|
var size = _a.size;
|
|
3468
3468
|
return !size
|
|
3469
3469
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3486,7 +3486,7 @@ var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __mak
|
|
|
3486
3486
|
var size = _a.size;
|
|
3487
3487
|
return (size === "small" ? "3px" : "");
|
|
3488
3488
|
});
|
|
3489
|
-
var templateObject_1$
|
|
3489
|
+
var templateObject_1$S, templateObject_2$y, templateObject_3$c, templateObject_4$8;
|
|
3490
3490
|
|
|
3491
3491
|
var Button = forwardRef(function (_a, ref) {
|
|
3492
3492
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
@@ -3522,7 +3522,7 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
3522
3522
|
return (jsx$1(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsx$1(Loader, {}) : jsx$1("span", { children: label }) })));
|
|
3523
3523
|
});
|
|
3524
3524
|
|
|
3525
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
3525
|
+
var StyledCheckbox = styled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
3526
3526
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3527
3527
|
if (disabled)
|
|
3528
3528
|
return theme.colors.lightGray.darker;
|
|
@@ -3543,7 +3543,7 @@ var StyledCheckbox = styled.div(templateObject_1$Q || (templateObject_1$Q = __ma
|
|
|
3543
3543
|
return theme.colors.green.base;
|
|
3544
3544
|
return theme.colors.lightGray.darker;
|
|
3545
3545
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3546
|
-
var templateObject_1$
|
|
3546
|
+
var templateObject_1$R;
|
|
3547
3547
|
|
|
3548
3548
|
var Checkbox = function (props) {
|
|
3549
3549
|
var _a;
|
|
@@ -3576,7 +3576,7 @@ var Checkbox = function (props) {
|
|
|
3576
3576
|
return (jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx$1("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx$1("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3577
3577
|
};
|
|
3578
3578
|
|
|
3579
|
-
var Wrapper$a = styled.div(templateObject_1$
|
|
3579
|
+
var Wrapper$a = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3580
3580
|
var size = _a.size;
|
|
3581
3581
|
switch (size) {
|
|
3582
3582
|
case "small":
|
|
@@ -3599,7 +3599,7 @@ var Wrapper$a = styled.div(templateObject_1$P || (templateObject_1$P = __makeTem
|
|
|
3599
3599
|
return "27px";
|
|
3600
3600
|
}
|
|
3601
3601
|
});
|
|
3602
|
-
var templateObject_1$
|
|
3602
|
+
var templateObject_1$Q;
|
|
3603
3603
|
|
|
3604
3604
|
var parsers = {};
|
|
3605
3605
|
|
|
@@ -3867,7 +3867,7 @@ var flags = {
|
|
|
3867
3867
|
};
|
|
3868
3868
|
var Flag = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3869
3869
|
|
|
3870
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
3870
|
+
var StyledHeading = styled.span(templateObject_1$P || (templateObject_1$P = __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) {
|
|
3871
3871
|
var type = _a.type;
|
|
3872
3872
|
return theme.heading[type].fontSize;
|
|
3873
3873
|
}, function (_a) {
|
|
@@ -3891,14 +3891,14 @@ var StyledHeading = styled.span(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
3891
3891
|
var align = _a.align;
|
|
3892
3892
|
return align;
|
|
3893
3893
|
});
|
|
3894
|
-
var templateObject_1$
|
|
3894
|
+
var templateObject_1$P;
|
|
3895
3895
|
|
|
3896
3896
|
var Heading = function (props) {
|
|
3897
3897
|
var element = !!props.as ? props.as : props.type;
|
|
3898
3898
|
return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3899
3899
|
};
|
|
3900
3900
|
|
|
3901
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
3901
|
+
var Wrapper$9 = styled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
3902
3902
|
var size = _a.size;
|
|
3903
3903
|
return theme.icon[size] || theme.icon.medium;
|
|
3904
3904
|
}, function (_a) {
|
|
@@ -3928,7 +3928,7 @@ var Wrapper$9 = styled.div(templateObject_1$N || (templateObject_1$N = __makeTem
|
|
|
3928
3928
|
return theme.colors.lightGray.light;
|
|
3929
3929
|
}
|
|
3930
3930
|
});
|
|
3931
|
-
var templateObject_1$
|
|
3931
|
+
var templateObject_1$O;
|
|
3932
3932
|
|
|
3933
3933
|
var icons = {
|
|
3934
3934
|
check: (jsx$1("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -3945,7 +3945,7 @@ var icons = {
|
|
|
3945
3945
|
cross: (jsx$1("path", { d: "M4.58585 4.58579C5.36689 3.80474 6.63322 3.80474 7.41427 4.58579L12 9.17153L16.5858 4.58579C17.3668 3.80474 18.6331 3.80474 19.4142 4.58579C20.1952 5.36683 20.1952 6.63316 19.4142 7.41421L14.7615 12.0669L19.3934 16.5652C20.1858 17.3347 20.2043 18.6009 19.4348 19.3933C18.6652 20.1857 17.3991 20.2042 16.6067 19.4347L12 14.9609L7.39337 19.4347C6.60098 20.2042 5.33478 20.1857 4.56525 19.3933C3.79571 18.6009 3.81424 17.3347 4.60663 16.5652L9.23853 12.0669L4.58585 7.41421C3.8048 6.63316 3.8048 5.36683 4.58585 4.58579Z" })),
|
|
3946
3946
|
bulb: (jsx$1("path", { d: "M16.9999 9.03553C16.9967 7.88562 16.6951 6.75388 16.1213 5.73887C15.5475 4.72386 14.719 3.85637 13.7079 3.21192C12.6967 2.56746 11.5337 2.1656 10.3199 2.04132C9.10621 1.91704 7.87864 2.07411 6.74411 2.49886C5.61082 2.92007 4.60229 3.59282 3.80424 4.45988C3.00515 5.32808 2.44858 6.3703 2.18491 7.49217C1.91452 8.61242 1.94102 9.77811 2.2621 10.8864C2.58317 11.9948 3.18891 13.0116 4.02592 13.8473C4.27491 14.1044 4.50062 14.3808 4.70066 14.6734C4.46084 14.9466 4.28577 15.2649 4.18718 15.6069C4.08858 15.949 4.06875 16.3069 4.12899 16.6568C4.18923 17.0067 4.32815 17.3404 4.53646 17.6356C4.74477 17.9308 5.01763 18.1807 5.3368 18.3684C5.12981 18.7505 5.03079 19.1763 5.04929 19.6048C5.0678 20.0334 5.20322 20.4502 5.44246 20.8151C5.68171 21.18 6.01673 21.4808 6.41524 21.6883C6.81374 21.8958 7.2623 22.0031 7.71765 21.9999H11.2744C11.9809 21.9999 12.6585 21.7362 13.159 21.2666C13.6594 20.7969 13.9418 20.1596 13.9444 19.4942C13.9436 19.1085 13.8445 18.7287 13.6552 18.3866C14.0375 18.1632 14.3532 17.8517 14.5724 17.4817C14.7916 17.1116 14.9072 16.695 14.9082 16.2713C14.9084 15.7054 14.7007 15.1569 14.3203 14.7188C14.5467 14.3744 14.8047 14.0494 15.0914 13.7474C16.327 12.4547 17.0074 10.7749 16.9999 9.03553ZM12.2383 15.554C12.4351 15.554 12.6239 15.6277 12.7631 15.7588C12.9023 15.8899 12.9805 16.0677 12.9805 16.2531C12.9805 16.3445 12.9612 16.435 12.9238 16.5193C12.8864 16.6036 12.8316 16.68 12.7626 16.7442C12.6935 16.8084 12.6116 16.8591 12.5216 16.8932C12.4316 16.9273 12.3353 16.9443 12.2383 16.9431H6.75375C6.55947 16.9431 6.37313 16.8704 6.23574 16.741C6.09836 16.6116 6.02119 16.4361 6.02119 16.2531C6.02117 16.0693 6.09804 15.8928 6.23516 15.762C6.37227 15.6311 6.55859 15.5564 6.75375 15.554H12.2383ZM11.2744 20.166H7.71765C7.52336 20.166 7.33702 20.0933 7.19964 19.964C7.06226 19.8346 6.98508 19.659 6.98508 19.476C6.98506 19.2922 7.06194 19.1158 7.19905 18.9849C7.33616 18.8541 7.52248 18.7794 7.71765 18.777H11.2744C11.4713 18.777 11.66 18.8506 11.7992 18.9817C11.9384 19.1128 12.0166 19.2906 12.0166 19.476C12.0166 19.5674 11.9973 19.6579 11.9599 19.7422C11.9225 19.8265 11.8677 19.903 11.7987 19.9672C11.7296 20.0314 11.6477 20.082 11.5577 20.1161C11.4677 20.1503 11.3714 20.1672 11.2744 20.166ZM14.4841 10.6788C14.2574 11.2921 13.9036 11.8568 13.4432 12.3402C13.0264 12.7745 12.6551 13.2458 12.3347 13.7474H6.70557C6.39922 13.2738 6.04404 12.8299 5.64525 12.4219C4.97469 11.7557 4.51703 10.925 4.32473 10.0251C4.12802 9.12397 4.2045 8.18889 4.5454 7.32676C4.88631 6.46463 5.47789 5.71024 6.25251 5.14984C7.0192 4.57901 7.94129 4.22343 8.91286 4.12394C9.65469 4.04111 10.4067 4.10608 11.1202 4.31462C11.8317 4.53062 12.4881 4.88299 13.0479 5.34957C13.5623 5.78316 13.9815 6.30752 14.2818 6.89297C14.585 7.47727 14.7588 8.11359 14.7926 8.76318C14.8258 9.41467 14.721 10.0659 14.4841 10.6788Z" })),
|
|
3947
3947
|
star: (jsx$1("path", { d: "M2.52642 11.0247L6.42532 13.9834C6.87081 14.3213 7.05746 14.9203 6.88764 15.4672L5.39751 20.2558C5.01734 21.479 6.35757 22.4963 7.35438 21.7405L11.2533 18.7814C11.6988 18.443 12.3015 18.443 12.7469 18.7814L16.6458 21.7405C17.6422 22.4963 18.9829 21.479 18.6027 20.2558L17.1132 15.4672C16.9425 14.9203 17.1292 14.3213 17.5751 13.9834L21.4736 11.0247C22.4695 10.2684 21.9583 8.62247 20.7267 8.62247H15.9074C15.357 8.62247 14.8679 8.25197 14.6983 7.705L13.2093 2.9181C12.8286 1.69397 11.172 1.69397 10.791 2.9181L9.30106 7.70524C9.13146 8.2522 8.64412 8.6227 8.0928 8.6227H3.27326C2.04175 8.6227 1.5305 10.2687 2.52642 11.0247Z" })),
|
|
3948
|
-
setting: (jsx$1("path", { d: "
|
|
3948
|
+
setting: (jsx$1("path", { d: "M11.9 0c-.8 0-1.4.3-1.9.7-.4.4-.6 1-.8 1.5-.4.9-.7 1.8-1.6 2.4s-1.8.3-2.8.1c-.5-.1-1.1-.2-1.7 0-.6.2-1.1.6-1.5 1.3s-.5 1.4-.3 2c.2.6.5 1 .8 1.5.7.8 1.3 1.5 1.3 2.5s-.6 1.7-1.3 2.5c-.3.5-.7.9-.8 1.5-.2.6-.1 1.3.3 2s.9 1.1 1.5 1.3c.6.2 1.1.1 1.7 0 1-.2 1.9-.4 2.8.2.9.5 1.2 1.4 1.5 2.4.2.5.4 1 .8 1.5.4.4 1.1.7 1.9.7.8 0 1.4-.3 1.9-.7.4-.4.6-1 .8-1.5.4-1 .6-1.9 1.5-2.4s1.8-.3 2.8-.2c.5.1 1.1.2 1.7 0 .6-.2 1.1-.6 1.5-1.3.4-.7.5-1.4.3-2s-.5-1-.8-1.5c-.7-.8-1.3-1.5-1.3-2.5s.6-1.7 1.3-2.5c.5-.5.8-.9 1-1.5.2-.6.1-1.3-.3-2s-.9-1.1-1.5-1.3c-.6-.2-1.1-.1-1.7 0-1 .2-1.9.4-2.8-.2-.9-.5-1.2-1.4-1.5-2.4-.2-.5-.4-1-.8-1.5-.6-.3-1.3-.6-2-.6zm0 8c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" })),
|
|
3949
3949
|
reload: (jsx$1("path", { d: "M20.6354 11.2888C20.4446 11.2757 20.253 11.2998 20.0716 11.3597C19.8903 11.4195 19.7226 11.514 19.5783 11.6377C19.434 11.7614 19.3158 11.9119 19.2306 12.0806C19.1453 12.2493 19.0947 12.4329 19.0815 12.6209C18.9739 14.1387 18.3662 15.5804 17.3506 16.7268C16.335 17.8732 14.9672 18.6615 13.4551 18.9718C11.943 19.2821 10.3695 19.0975 8.97365 18.446C7.57786 17.7945 6.43622 16.7118 5.72234 15.3626C5.00847 14.0133 4.76142 12.4713 5.01877 10.971C5.27612 9.47075 6.02378 8.09431 7.14805 7.05103C8.27233 6.00774 9.71171 5.35469 11.2473 5.19118C12.7829 5.02767 14.3307 5.36264 15.6553 6.14516L15.0687 6.1882C14.8324 6.20792 14.6055 6.28802 14.4104 6.42057C14.2152 6.55313 14.0585 6.73355 13.9558 6.94402C13.853 7.15449 13.8078 7.38773 13.8246 7.62068C13.8414 7.85363 13.9196 8.07824 14.0514 8.27231C14.1758 8.45551 14.3442 8.60561 14.5416 8.70929C14.739 8.81296 14.9594 8.867 15.1831 8.8666H15.2601L19.2729 8.58175C19.4513 8.56929 19.6255 8.52227 19.7855 8.44339C19.9455 8.36452 20.0881 8.25533 20.2052 8.12209C20.3223 7.98884 20.4116 7.83415 20.4679 7.66688C20.5242 7.4996 20.5465 7.32303 20.5335 7.14726L20.2527 3.20036C20.2154 2.85494 20.0436 2.53721 19.7735 2.31395C19.5033 2.0907 19.1558 1.9793 18.8041 2.00318C18.4523 2.02706 18.1236 2.18436 17.8871 2.44201C17.6506 2.69966 17.5247 3.0376 17.5359 3.38479L17.5754 3.9422C15.7452 2.7363 13.5624 2.1585 11.3651 2.29828C9.16781 2.43806 7.07861 3.28763 5.42104 4.71541C3.76347 6.1432 2.63001 8.06953 2.19621 10.1961C1.7624 12.3226 2.05246 14.5308 3.02144 16.4785C3.99043 18.4263 5.58428 20.0049 7.55618 20.9701C9.52807 21.9352 11.768 22.2329 13.929 21.8171C16.09 21.4013 18.0516 20.2953 19.51 18.6702C20.9683 17.0451 21.8421 14.9916 21.9959 12.8278C22.0103 12.6386 21.9865 12.4483 21.9257 12.2682C21.865 12.088 21.7685 11.9216 21.642 11.7784C21.5154 11.6353 21.3613 11.5183 21.1885 11.4342C21.0157 11.3502 20.8277 11.3008 20.6354 11.2888Z" })),
|
|
3950
3950
|
expand: (jsx$1("path", { d: "M13.1519 2.65848C12.2656 2.65848 11.5471 3.37694 11.5471 4.26321C11.5471 5.14947 12.2656 5.86793 13.1519 5.86793L15.8968 5.86793L5.82737 15.9374L5.8678 13.1752C5.88077 12.2891 5.1729 11.5602 4.28672 11.5472C3.40055 11.5342 2.67166 12.2421 2.65869 13.1283L2.56131 19.7822C2.55612 20.1373 2.66667 20.4671 2.85807 20.7358C3.13154 21.2301 3.65827 21.5648 4.26318 21.5648L11.0715 21.5648C11.9577 21.5648 12.6762 20.8463 12.6762 19.9601C12.6762 19.0738 11.9577 18.3553 11.0715 18.3553L8.1374 18.3553L18.3988 8.09397L18.3555 11.048C18.3426 11.9342 19.0504 12.6631 19.9366 12.6761C20.8228 12.689 21.5517 11.9812 21.5646 11.095L21.662 4.44109C21.6672 4.08598 21.5567 3.75612 21.3653 3.48747C21.0918 2.99317 20.5651 2.65848 19.9602 2.65848L13.1519 2.65848Z" })),
|
|
3951
3951
|
calendar: (jsx$1("path", { d: "M21 3h-2V2c0-1.1-.9-2-2-2s-2 .9-2 2v1H9V2c0-1.1-.9-2-2-2S5 .9 5 2v1H3C1.3 3 0 4.3 0 6v14c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3zM3 6h2v1c0 1.1.9 2 2 2s2-.9 2-2V6h6v1c0 1.1.9 2 2 2s2-.9 2-2V6h2v4H3V6zm0 14v-7h18v7H3z" })),
|
|
@@ -3958,12 +3958,15 @@ var icons = {
|
|
|
3958
3958
|
heart: (jsx$1("path", { d: "M22 3.5a6.64 6.64 0 00-9.4 0l-.6.6-.6-.6a6.64 6.64 0 00-9.4 0c-1.3 1.3-2 3-2 4.7s.6 3.4 2 4.7l.6.6 8.5 8.5c.5.5 1.4.5 1.9 0l9.1-9.1c1.3-1.3 2-3 2-4.7-.1-1.7-.7-3.4-2.1-4.7z" })),
|
|
3959
3959
|
thunder: (jsx$1("path", { d: "M20.3 8.7h-6.9l.6-7.6c0-.3-.1-.6-.3-.8-.2-.2-.5-.3-.7-.3-.3 0-.6.2-.7.4L2.9 13.6c-.1.2-.2.4-.2.7 0 .2.1.5.3.6.2.2.4.2.7.2h7.1l-.7 7.8c0 .2 0 .4.2.6.1.2.3.3.5.4l.2.1c.3 0 .6-.2.8-.5L21 10.2c.1-.2.2-.4.2-.7 0-.2-.1-.5-.3-.6-.1-.1-.4-.2-.6-.2z" })),
|
|
3960
3960
|
fire: (jsx$1("path", { d: "M17.3 9.2c-.7-.6-1.3-1.2-1.8-1.9C12.4 3.3 14 0 14 0 8.3 2.4 7 6.2 7 9c0 0 .1 1.7.8 3.5.2.6-.2 1.2-.8 1.3-.4.1-.8-.2-1-.6-.3-.7-.8-1.8-.6-2.6-.9 1.2-1.5 2.8-1.7 4.4-.3 4.2 2.6 8 6.7 8.8 4.8 1 9.3-2.3 10-7.1.3-2.9-.9-5.7-3.1-7.5z" })),
|
|
3961
|
+
control: (jsx$1("path", { d: "M1.4 5.3h2.4c.5 1.6 2 2.8 3.8 2.8 1.8 0 3.3-1.2 3.8-2.8h11.2c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2H11.5C10.9 1.2 9.4 0 7.6 0 5.8 0 4.3 1.2 3.8 2.8H1.4C.7 2.8.2 3.3.2 4s.5 1.3 1.2 1.3zm6.2-2.8c.9 0 1.6.7 1.6 1.6s-.7 1.6-1.6 1.6S6 5 6 4.1c0-.9.7-1.6 1.6-1.6zM22.6 10.8h-2.4c-.5-1.6-2-2.8-3.8-2.8-1.8 0-3.3 1.2-3.8 2.8H1.4c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h11.2c.5 1.6 2 2.8 3.8 2.8 1.8 0 3.3-1.2 3.8-2.8h2.4c.7 0 1.2-.5 1.2-1.2.1-.7-.5-1.2-1.2-1.2zm-6.2 2.8c-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6zM22.6 18.7H11.5c-.5-1.6-2-2.8-3.8-2.8-1.8 0-3.3 1.2-3.8 2.8H1.4c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h2.4c.5 1.6 2 2.8 3.8 2.8 1.8 0 3.3-1.2 3.8-2.8h11.2c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zm-15 2.8c-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6z" })),
|
|
3961
3962
|
};
|
|
3962
3963
|
var Icon = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3963
3964
|
|
|
3964
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
3965
|
+
var Wrapper$8 = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3965
3966
|
var size = _a.size;
|
|
3966
3967
|
switch (size) {
|
|
3968
|
+
case "tiny":
|
|
3969
|
+
return "28px";
|
|
3967
3970
|
default:
|
|
3968
3971
|
case "small":
|
|
3969
3972
|
return "46px";
|
|
@@ -3973,7 +3976,7 @@ var Wrapper$8 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
|
|
|
3973
3976
|
return "118px";
|
|
3974
3977
|
}
|
|
3975
3978
|
});
|
|
3976
|
-
var templateObject_1$
|
|
3979
|
+
var templateObject_1$N;
|
|
3977
3980
|
|
|
3978
3981
|
var illustrations = {
|
|
3979
3982
|
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" })] }))),
|
|
@@ -3990,10 +3993,11 @@ var illustrations = {
|
|
|
3990
3993
|
student: (jsxs("svg", __assign$2({ viewBox: "0 0 160 201" }, { children: [jsx$1("path", { d: "M80 137c-18.8 0-34 15.5-34 34.5V201h68v-29.5c0-19-15.2-34.5-34-34.5z", fill: "#53b476" }), jsx$1("path", { d: "M147.9 64c1.2-2.2 2.1-4.5 2.7-7.1 4.4-17.3-6-34.9-23.3-39.3-6.9-1.8-13.9-1.2-20 1.3-4-8.6-11.6-15.4-21.5-17.9-14.7-3.8-29.7 3.3-36.5 16.2-.8-.3-1.7-.5-2.5-.8-17.3-4.4-34.9 6-39.3 23.3-2.3 9.1-.5 18.4 4.3 25.7-5.2 4.3-9 10-10.8 16.9-4.4 17.3 6 34.9 23.3 39.3 14.1 3.6 28.4-2.6 35.6-14.4 3.6 3 7.9 5.3 12.8 6.6 10.3 2.6 20.7 0 28.3-6.2 4.3 6.2 10.7 10.9 18.6 12.9 17.3 4.4 34.9-6 39.3-23.3 3.3-12.7-1.4-25.5-11-33.2z", fill: "#75301c" }), jsx$1("path", { d: "M88.9 125.6H71.1v14c0 4.1 3.3 7.4 7.4 7.4h3c4.1 0 7.4-3.3 7.4-7.4v-14z", fill: "#f7b58e" }), jsx$1("path", { d: "M130.7 72.9c-.5 0-1 .1-1.5.1-5.4-22.1-25.4-38.5-49.1-38.5C56.3 34.6 36.4 51 31 73.1c-.5-.1-1-.1-1.5-.1-4.8 0-8.6 3.9-8.6 8.6 0 4.8 3.9 8.6 8.6 8.6h.2c2.5 25.6 24.1 45.6 50.4 45.6 26.3 0 47.9-20 50.4-45.6h.2c4.8 0 8.6-3.9 8.6-8.6 0-4.8-3.8-8.7-8.6-8.7z", fill: "#f7b58e" }), jsx$1("path", { d: "M114.4 102.2c0-15-14-6.9-32.7-6.9-18.7 0-34.9-8.1-34.9 6.9s15.1 27.1 33.8 27.1 33.8-12.2 33.8-27.1z", fill: "#220f0c" }), jsx$1("path", { d: "M80.6 129.3c7.3 0 14.1-1.9 19.6-5-2.6-3.6-6.9-6.2-11.9-6.9-2.1-.3-4.2-.2-6.1.1-1.1.2-2.2.2-3.3 0-1.9-.3-4-.4-6.1-.1-5 .7-9.3 3.3-11.9 6.9 5.6 3.1 12.4 5 19.7 5z", fill: "#e62743" }), jsx$1("path", { d: "M85.8 85.2c0-2.9-2.3-5.2-5.2-5.2-2.9 0-5.2 2.3-5.2 5.2s2.3 3.5 5.2 3.5c2.9.1 5.2-.6 5.2-3.5z", opacity: 0.37, fill: "#f7b58e" }), jsx$1("path", { d: "M53.7 54.7c-8 0-14.5 6.5-14.5 14.5v7c0 8 6.5 11 14.5 11s14.5-6.1 14.5-14.1v-3.9c-.1-8-6.6-14.5-14.5-14.5z", fill: "#fff" }), jsx$1("path", { d: "M53.7 62.8c-2.8 0-5 2.3-5 5V77c0 2.8 2.3 5 5 5s5-2.3 5-5v-9.2c0-2.7-2.3-5-5-5z", fill: "#23292f" }), jsx$1("path", { d: "M48.6 70.9c1.7 0 3-1.4 3-3 0-1.7-1.4-3-3-3-1.7 0-3 1.4-3 3 0 1.7 1.4 3 3 3zM106.3 54.7c8 0 14.5 6.5 14.5 14.5v7c0 8-6.5 11-14.5 11s-14.5-6.1-14.5-14.1v-3.9c0-8 6.5-14.5 14.5-14.5z", fill: "#fff" }), jsx$1("path", { d: "M106.3 62.8c2.8 0 5 2.3 5 5V77c0 2.8-2.3 5-5 5-2.8 0-5-2.3-5-5v-9.2c0-2.7 2.2-5 5-5z", fill: "#23292f" }), jsx$1("path", { d: "M111.3 70.9c1.7 0 3-1.4 3-3 0-1.7-1.4-3-3-3-1.7 0-3 1.4-3 3 0 1.7 1.3 3 3 3z", fill: "#fff" }), jsx$1("path", { d: "M107.1 27.1c-8.3 0-15.8 2.2-20.8 5.6-2-.3-4.2-.4-6.3-.4-3.9 0-7.5.4-10.8 1.2-5-3.3-12.4-5.4-20.8-5.4-15 0-27.1 6.7-27.1 15s12.1 15 27.1 15c4.6 0 8.9-.6 12.6-1.7 4.9 2.5 11.6 4 19 4 6.3 0 12.1-1.1 16.7-3 3.2.8 6.7 1.2 10.4 1.2 15 0 27.1-7.1 27.1-15.8 0-8.6-12.1-15.7-27.1-15.7z", fill: "#75301c" }), jsx$1("path", { d: "M27.7 81.7l.6-.6c.4-.4.4-1.2 0-1.6-.4-.4-1.2-.4-1.6 0l-.6.6-.6-.6c-.4-.4-1.2-.4-1.6 0-.4.4-.4 1.2 0 1.6l.6.6-.6.6c-.4.4-.4 1.2 0 1.6.2.2.5.3.8.3.3 0 .6-.1.8-.3l.6-.6.6.6c.2.2.5.3.8.3s.6-.1.8-.3c.4-.4.4-1.2 0-1.6l-.6-.6zM135.4 81.7l.6-.6c.4-.4.4-1.2 0-1.6-.4-.4-1.2-.4-1.6 0l-.6.6-.6-.6c-.4-.4-1.2-.4-1.6 0-.4.4-.4 1.2 0 1.6l.6.6-.6.6c-.4.4-.4 1.2 0 1.6.2.2.5.3.8.3.3 0 .6-.1.8-.3l.6-.6.6.6c.2.2.5.3.8.3.3 0 .6-.1.8-.3.4-.4.4-1.2 0-1.6l-.6-.6z", opacity: 0.57, fill: "#f7b58e" })] }))),
|
|
3991
3994
|
school: (jsxs("svg", __assign$2({ viewBox: "0 0 340.6 317" }, { children: [jsx$1("path", { fill: "#ededed", d: "M58 97H282.7V286.9H58z" }), jsx$1("path", { d: "M204.5 286.9h-68.4c-5 0-9.1-4.1-9.1-9.1V156.6c0-5 4.1-9.1 9.1-9.1h68.4c5 0 9.1 4.1 9.1 9.1v121.2c0 5.1-4 9.1-9.1 9.1z", fill: "#f59b1a" }), jsx$1("path", { d: "M164.9 1.3L6.3 83.7c-10.8 5.6-6.8 22 5.4 22H329c12.2 0 16.2-16.4 5.4-22L175.7 1.3c-3.4-1.7-7.4-1.7-10.8 0z", fill: "#7c7f82" }), jsx$1("path", { d: "M100.1 243.4h-6.7V139.7h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17H37.8c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.7-17-17-17zM302.9 243.4h-6.7V139.7h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17h-62.3c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.6-17-17-17z", fill: "#c4c4c4" }), jsx$1("circle", { cx: 170.3, cy: 59.1, r: 25, fill: "#ededed" }), jsx$1("path", { d: "M319.9 317H20.8c-11 0-20-9-20-20s9-20 20-20h299.1c11 0 20 9 20 20s-9 20-20 20z", fill: "#7c7f82" })] }))),
|
|
3992
3995
|
organisation: (jsxs("svg", __assign$2({ viewBox: "0 0 721 464.5" }, { children: [jsx$1("path", { fill: "#ededed", d: "M58 97H282.7V286.9H58z" }), jsx$1("path", { d: "M204.5 286.9h-68.4c-5 0-9.1-4.1-9.1-9.1V156.6c0-5 4.1-9.1 9.1-9.1h68.4c5 0 9.1 4.1 9.1 9.1v121.2c0 5.1-4 9.1-9.1 9.1z", fill: "#f59b1a" }), jsx$1("path", { d: "M164.9 1.3L6.3 83.7c-10.8 5.6-6.8 22 5.4 22H329c12.2 0 16.2-16.4 5.4-22L175.7 1.3c-3.4-1.7-7.4-1.7-10.8 0z", fill: "#7c7f82" }), jsx$1("path", { d: "M100.1 243.4h-6.7V139.7h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17H37.8c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.7-17-17-17zM302.9 243.4h-6.7V139.7h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17h-62.3c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.6-17-17-17z", fill: "#c4c4c4" }), jsx$1("circle", { cx: 170.3, cy: 59.1, r: 25, fill: "#ededed" }), jsx$1("path", { d: "M319.9 317H20.8c-11 0-20-9-20-20s9-20 20-20h299.1c11 0 20 9 20 20s-9 20-20 20z", fill: "#7c7f82" }), jsxs("g", { children: [jsx$1("path", { fill: "#ededed", d: "M438.3 97H663V286.9H438.3z" }), jsx$1("path", { d: "M584.9 286.9h-68.4c-5 0-9.1-4.1-9.1-9.1V156.6c0-5 4.1-9.1 9.1-9.1h68.4c5 0 9.1 4.1 9.1 9.1v121.2c-.1 5.1-4.1 9.1-9.1 9.1z", fill: "#f59b1a" }), jsx$1("path", { d: "M545.3 1.3L386.6 83.7c-10.8 5.6-6.8 22 5.4 22h317.3c12.2 0 16.2-16.4 5.4-22L556 1.3c-3.4-1.7-7.4-1.7-10.7 0z", fill: "#7c7f82" }), jsx$1("path", { d: "M480.4 243.4h-6.7V139.7h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17h-62.3c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.6-17-17-17zM683.2 243.4h-6.7V139.7h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17h-62.3c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.6-17-17-17z", fill: "#c4c4c4" }), jsx$1("circle", { cx: 550.6, cy: 59.1, r: 25, fill: "#ededed" }), jsx$1("path", { d: "M700.2 317H401.1c-11 0-20-9-20-20s9-20 20-20h299.1c11 0 20 9 20 20s-9 20-20 20z", fill: "#7c7f82" })] }), jsxs("g", { children: [jsx$1("path", { d: "M210.9 477c-17.9 0-32.5-14.6-32.5-32.5 0-13.7 8.6-25.5 20.7-30.3-.4-2-.7-4.1-.7-6.3 0-14.3 10.2-26.2 23.7-28.9v-79.8c-13.5-2.7-23.7-14.6-23.7-28.9 0-1.6.1-3.2.4-4.7-10-1.2-18-8.2-20.4-18.2-2.7-11 2.3-21.9 12.3-27.2l158.6-82.4c3.4-1.8 7.3-2.7 11.1-2.7 3.9 0 7.7.9 11.1 2.7l158.6 82.4c10.1 5.2 15 16.2 12.3 27.2-2.4 10-10.5 17-20.4 18.2.2 1.5.4 3.1.4 4.7 0 14.3-10.2 26.2-23.7 28.9V379c13.5 2.7 23.7 14.6 23.7 28.9 0 2.1-.2 4.2-.7 6.3 12.1 4.7 20.7 16.5 20.7 30.3 0 17.9-14.6 32.5-32.5 32.5h-299z", fill: "#7c7f82" }), jsx$1("path", { d: "M360.5 147.5c1.8 0 3.7.4 5.4 1.3l158.6 82.4c10.8 5.6 6.8 22-5.4 22H493c9.4 0 17 7.6 17 17s-7.6 17-17 17h-6.7v103.7h6.7c9.4 0 17 7.6 17 17 0 8.1-5.6 14.8-13.1 16.5H510c11 0 20 9 20 20s-9 20-20 20H210.9c-11 0-20-9-20-20s9-20 20-20H224c-7.5-1.7-13.1-8.5-13.1-16.5 0-9.4 7.6-17 17-17h6.7V287.2h-6.7c-9.4 0-17-7.6-17-17s7.6-17 17-17h-26.1c-12.2 0-16.2-16.4-5.4-22L355 148.8c1.8-.8 3.6-1.3 5.5-1.3m0-25c-5.9 0-11.7 1.4-16.9 4.1L184.9 209c-7.7 4-13.8 10.6-17 18.5-2.9 7.1-3.5 15.2-1.7 22.7 1.8 7.6 6.1 14.5 12 19.4 2.4 2 5.1 3.8 8 5.1 1.6 14.7 10.8 27.1 23.5 33.3v62.1c-13.8 6.7-23.4 20.7-23.7 37-12.1 8.1-20 21.8-20 37.4 0 24.8 20.2 45 45 45h299c24.8 0 45-20.2 45-45 0-15.6-8-29.3-20-37.4-.3-16.3-9.9-30.3-23.7-37V308c12.7-6.2 21.9-18.6 23.5-33.3 2.9-1.3 5.5-3 8-5.1 5.9-5 10.1-11.9 12-19.4 1.8-7.6 1.3-15.6-1.7-22.7-3.3-7.9-9.3-14.5-17-18.5l-158.6-82.4c-5.3-2.6-11.2-4.1-17-4.1z", fill: "#fff" })] }), jsxs("g", { children: [jsx$1("path", { fill: "#ededed", d: "M248.1 244.6H472.79999999999995V434.5H248.1z" }), jsx$1("path", { d: "M394.7 434.5h-68.4c-5 0-9.1-4.1-9.1-9.1V304.1c0-5 4.1-9.1 9.1-9.1h68.4c5 0 9.1 4.1 9.1 9.1v121.2c0 5.1-4.1 9.2-9.1 9.2z", fill: "#f59b1a" }), jsx$1("path", { d: "M355.1 148.8l-158.6 82.4c-10.8 5.6-6.8 22 5.4 22h317.3c12.2 0 16.2-16.4 5.4-22L366 148.8c-3.5-1.7-7.5-1.7-10.9 0z", fill: "#7c7f82" }), jsx$1("path", { d: "M290.2 390.9h-6.7V287.2h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17h-62.3c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17h62.3c9.4 0 17-7.6 17-17s-7.6-17-17-17zM493 390.9h-6.7V287.2h6.7c9.4 0 17-7.6 17-17s-7.6-17-17-17h-62.3c-9.4 0-17 7.6-17 17s7.6 17 17 17h6.7v103.7h-6.7c-9.4 0-17 7.6-17 17s7.6 17 17 17H493c9.4 0 17-7.6 17-17s-7.6-17-17-17z", fill: "#c4c4c4" }), jsx$1("circle", { cx: 360.5, cy: 206.6, r: 25, fill: "#ededed" }), jsx$1("path", { d: "M510 464.5H210.9c-11 0-20-9-20-20s9-20 20-20H510c11 0 20 9 20 20s-8.9 20-20 20z", fill: "#7c7f82" })] })] }))),
|
|
3996
|
+
coach: (jsxs("svg", __assign$2({ viewBox: "0 0 137.6 201" }, { children: [jsx$1("path", { d: "M68.8 118.5c-24.6 0-44.6 19.9-44.6 44.5v38h89.1v-38c0-24.6-19.9-44.5-44.5-44.5z", fill: "#d8d7d7" }), jsx$1("path", { d: "M78.9 101.2H58.3v16.3c0 4.7 3.8 8.6 8.6 8.6h3.5c4.7 0 8.6-3.8 8.6-8.6v-16.3z", fill: "#f9b467" }), jsx$1("path", { d: "M127.6 44.6c-.6 0-1.1.1-1.7.2C119.6 19.1 96.4 0 68.8 0S18 19.1 11.7 44.7c-.6-.1-1.1-.2-1.7-.2-5.5 0-10 4.5-10 10s4.5 10 10 10h.3c2.9 29.7 28 53 58.5 53s55.6-23.2 58.5-53h.3c5.5 0 10-4.5 10-10s-4.5-9.9-10-9.9z", fill: "#f9b467" }), jsx$1("path", { d: "M99.8 85.3c0-13.5-12.6-6.2-29.5-6.2-16.8 0-31.5-7.3-31.5 6.2s13.6 24.4 30.5 24.4 30.5-10.9 30.5-24.4z", fill: "#25120f" }), jsx$1("path", { d: "M69.3 109.7c6.6 0 12.7-1.7 17.6-4.5-2.3-3.2-6.2-5.5-10.7-6.2-1.9-.3-3.7-.2-5.5.1-1 .2-2 .2-2.9 0-1.7-.3-3.6-.3-5.5-.1-4.5.6-8.3 3-10.7 6.2 5.1 2.8 11.2 4.5 17.7 4.5z", fill: "#e62a44" }), jsx$1("path", { d: "M75.4 58.9c0-3.3-2.7-6.1-6.1-6.1-3.3 0-6.1 2.7-6.1 6.1 0 3.3 2.7 4.1 6.1 4.1 3.4-.1 6.1-.8 6.1-4.1z", opacity: 0.37, fill: "#f9b467" }), jsx$1("path", { d: "M38 23.4c-9.3 0-16.8 7.6-16.8 16.8v8.1c0 9.2 7.6 12.8 16.8 12.8 9.3 0 16.8-7.1 16.8-16.3v-4.6c.1-9.3-7.5-16.8-16.8-16.8z", fill: "#fff" }), jsx$1("path", { d: "M38 32.8c-3.2 0-5.8 2.6-5.8 5.8v10.7c0 3.2 2.6 5.8 5.8 5.8 3.2 0 5.8-2.6 5.8-5.8V38.6c.1-3.2-2.6-5.8-5.8-5.8z", fill: "#40abe1" }), jsx$1("path", { d: "M99.2 23.4c9.3 0 16.8 7.6 16.8 16.8v8.1c0 9.2-7.6 12.8-16.8 12.8-9.3 0-16.8-7.1-16.8-16.3v-4.6c0-9.3 7.5-16.8 16.8-16.8z", fill: "#fff" }), jsx$1("path", { d: "M99.2 32.8c3.2 0 5.8 2.6 5.8 5.8v10.7c0 3.2-2.6 5.8-5.8 5.8s-5.8-2.6-5.8-5.8V38.6c0-3.2 2.6-5.8 5.8-5.8z", fill: "#40abe1" }), jsx$1("path", { d: "M17.1 26.7c3.2-3.3 7.7-6.5 13.8-9 2.2-.9 2.7-3.7 1.1-5.3l-4.7-4.8c-1.2-1.2-3.2-1.3-4.5-.2-3 2.6-8.1 7.8-11.1 15.9-1.3 3.3 2.9 5.9 5.4 3.4zM119.9 26.7c-3.2-3.3-7.7-6.5-13.8-9-2.2-.9-2.7-3.7-1.1-5.3l4.7-4.8c1.2-1.2 3.2-1.3 4.5-.2 3 2.6 8.1 7.8 11.1 15.9 1.3 3.3-2.9 5.9-5.4 3.4z", fill: "#91878a" }), jsx$1("path", { d: "M7.9 54.7l.7-.7c.5-.5.5-1.4 0-1.9s-1.4-.5-1.9 0l-.7.7-.7-.7c-.5-.5-1.4-.5-1.9 0s-.5 1.4 0 1.9l.7.7-.7.7c-.5.5-.5 1.4 0 1.9.3.3.6.4.9.4.3 0 .7-.1.9-.4l.8-.7.7.7c.3.3.6.4.9.4.3 0 .7-.1.9-.4.5-.5.5-1.4 0-1.9l-.6-.7zM133.1 54.7l.7-.7c.5-.5.5-1.4 0-1.9s-1.4-.5-1.9 0l-.7.7-.7-.7c-.5-.5-1.4-.5-1.9 0s-.5 1.4 0 1.9l.7.7-.7.7c-.5.5-.5 1.4 0 1.9.3.3.6.4.9.4.3 0 .7-.1.9-.4l.7-.7.7.7c.3.3.6.4.9.4.3 0 .7-.1.9-.4.5-.5.5-1.4 0-1.9l-.5-.7z", opacity: 0.57, fill: "#f9b467" }), jsx$1("path", { d: "M61.7 23.2H27.1c-7.1 0-12.9 5.8-12.9 12.9v13.6c0 7.1 5.8 12.9 12.9 12.9h26.4c7.1 0 12.9-5.8 12.9-12.9V27.8c0-2.5-2.1-4.6-4.7-4.6zm.2 26.4c0 4.6-3.7 8.3-8.3 8.3H27.1c-4.6 0-8.3-3.7-8.3-8.3V36c0-4.6 3.7-8.3 8.3-8.3h34.6c.1 0 .1.1.1.1v21.8z", fill: "#1e1e1e" }), jsx$1("path", { d: "M61.9 27.8v21.8c0 4.6-3.7 8.3-8.3 8.3H27.1c-4.6 0-8.3-3.7-8.3-8.3V36c0-4.6 3.7-8.3 8.3-8.3h34.6c.1 0 .2.1.2.1z", opacity: 0.4, fill: "#ededee" }), jsx$1("path", { d: "M111.1 23.2H76.5c-2.6 0-4.7 2.1-4.7 4.7v21.8c0 7.1 5.8 12.9 12.9 12.9h26.4c7.1 0 12.9-5.8 12.9-12.9V36c0-7.1-5.8-12.8-12.9-12.8zm8.4 26.4c0 4.6-3.7 8.3-8.3 8.3H84.7c-4.6 0-8.3-3.7-8.3-8.3V27.8c0-.1.1-.1.1-.1h34.6c4.6 0 8.3 3.7 8.3 8.3v13.6z", fill: "#1e1e1e" }), jsx$1("path", { d: "M119.5 36v13.6c0 4.6-3.7 8.3-8.3 8.3H84.7c-4.6 0-8.3-3.7-8.3-8.3V27.8c0-.1.1-.1.1-.1h34.6c4.6 0 8.4 3.7 8.4 8.3z", opacity: 0.4, fill: "#ededee" }), jsx$1("path", { d: "M84.2 23.2H55.7v4.5h28.5v-4.5zM75.1 32.9H63.8v4.5h11.3v-4.5z", fill: "#1e1e1e" }), jsx$1("path", { d: "M83.4 120.8l-4.2-1.4c-.3-.1-.6-.1-.8.1l-9.7 6.1h-.1l-9.7-6.1c-.2-.2-.6-.2-.8-.1l-4.2 1.4c-.6.2-.8.9-.4 1.3l4.5 6.1c.5.7 1.4 1 2.2.7l6.4-2.1c.4-.1.7.1.7.5v6.6c0 .4.3.8.8.8h1.4c.4 0 .8-.3.8-.8v-6.6c0-.4.4-.6.7-.5l6.4 2.1c.8.3 1.7 0 2.2-.7l4.5-6.1c0-.5-.2-1.1-.7-1.3z", fill: "#353432" }), jsx$1("path", { d: "M69 141.8c9.6 0 18-7.3 21.5-17.7-.2-.1-.3-.2-.5-.3-3.5 10.2-11.6 17.4-21 17.4-9.5 0-17.7-7.3-21.1-17.6-.2.1-.3.2-.5.3 3.5 10.5 11.9 17.9 21.6 17.9z", fill: "#3a3b3a" }), jsx$1("path", { d: "M69.7 140.9c-.2 0-.3.2-.2.4l.3 1.2c0 .2.2.3.4.2.2 0 .3-.2.2-.4l-.3-1.2c-.1-.1-.3-.2-.4-.2zM76.2 154.1l-3.5.9c-.4.1-.8-.1-.9-.5l-1.9-7.8 4.9-1.2 1.9 7.8c.2.3-.1.7-.5.8z", fill: "#6d7171" }), jsx$1("path", { d: "M70.7 151.6c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5z", fill: "#888989" }), jsx$1("path", { d: "M76.9 154l-3.5.9c-.4.1-.8-.1-.9-.5l-1.9-7.8 4.9-1.2 1.9 7.8c.1.3-.2.7-.5.8z", fill: "#888989" })] }))),
|
|
3993
3997
|
};
|
|
3994
3998
|
var Illustration = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
3995
3999
|
|
|
3996
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
4000
|
+
var StyledParagraph = styled.p(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n text-transform: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n text-transform: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
3997
4001
|
var size = _a.size;
|
|
3998
4002
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
3999
4003
|
}, function (_a) {
|
|
@@ -4028,17 +4032,17 @@ var StyledParagraph = styled.p(templateObject_1$L || (templateObject_1$L = __mak
|
|
|
4028
4032
|
var transform = _a.transform;
|
|
4029
4033
|
return transform;
|
|
4030
4034
|
});
|
|
4031
|
-
var templateObject_1$
|
|
4035
|
+
var templateObject_1$M;
|
|
4032
4036
|
|
|
4033
|
-
var Container$
|
|
4034
|
-
var InputIconWrapper = styled.div(templateObject_2$
|
|
4037
|
+
var Container$m = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4038
|
+
var InputIconWrapper = styled.div(templateObject_2$x || (templateObject_2$x = __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) {
|
|
4035
4039
|
var isChanged = _a.isChanged;
|
|
4036
4040
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
4037
4041
|
}, function (_a) {
|
|
4038
4042
|
var disabled = _a.disabled;
|
|
4039
4043
|
return (disabled ? "not-allowed" : "pointer");
|
|
4040
4044
|
});
|
|
4041
|
-
var StyledInput = styled.input(templateObject_3$
|
|
4045
|
+
var StyledInput = styled.input(templateObject_3$b || (templateObject_3$b = __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) {
|
|
4042
4046
|
var disabled = _a.disabled;
|
|
4043
4047
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4044
4048
|
}, function (_a) {
|
|
@@ -4057,7 +4061,7 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
|
|
|
4057
4061
|
var isOk = _a.isOk;
|
|
4058
4062
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4059
4063
|
}, fadeIn);
|
|
4060
|
-
var templateObject_1$
|
|
4064
|
+
var templateObject_1$L, templateObject_2$x, templateObject_3$b, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4061
4065
|
|
|
4062
4066
|
var expressions = {};
|
|
4063
4067
|
|
|
@@ -4155,7 +4159,7 @@ var PasswordInput = function (props) {
|
|
|
4155
4159
|
if (props.onKeyPress)
|
|
4156
4160
|
props.onKeyPress(e);
|
|
4157
4161
|
};
|
|
4158
|
-
return (jsxs(Container$
|
|
4162
|
+
return (jsxs(Container$m, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
4159
4163
|
};
|
|
4160
4164
|
|
|
4161
4165
|
function requiredArgs(required, args) {
|
|
@@ -4489,7 +4493,7 @@ Input.Date = DateInput;
|
|
|
4489
4493
|
|
|
4490
4494
|
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" })] }))] }))); };
|
|
4491
4495
|
|
|
4492
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
4496
|
+
var Wrapper$7 = styled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4493
4497
|
var size = _a.size;
|
|
4494
4498
|
switch (size) {
|
|
4495
4499
|
default:
|
|
@@ -4499,7 +4503,7 @@ var Wrapper$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
4499
4503
|
return "116px";
|
|
4500
4504
|
}
|
|
4501
4505
|
});
|
|
4502
|
-
var templateObject_1$
|
|
4506
|
+
var templateObject_1$K;
|
|
4503
4507
|
|
|
4504
4508
|
var medals = {
|
|
4505
4509
|
small: {
|
|
@@ -4515,11 +4519,11 @@ var medals = {
|
|
|
4515
4519
|
};
|
|
4516
4520
|
var Medal = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4517
4521
|
|
|
4518
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
4522
|
+
var Wrapper$6 = styled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
4519
4523
|
var disabled = _a.disabled;
|
|
4520
4524
|
return (disabled ? "49.5px" : "");
|
|
4521
4525
|
});
|
|
4522
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
4526
|
+
var StyledInputNumber = styled.input(templateObject_2$w || (templateObject_2$w = __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) {
|
|
4523
4527
|
var disabled = _a.disabled;
|
|
4524
4528
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4525
4529
|
}, function (_a) {
|
|
@@ -4532,7 +4536,7 @@ var StyledInputNumber = styled.input(templateObject_2$v || (templateObject_2$v =
|
|
|
4532
4536
|
var disabled = _a.disabled;
|
|
4533
4537
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4534
4538
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4535
|
-
var templateObject_1$
|
|
4539
|
+
var templateObject_1$J, templateObject_2$w;
|
|
4536
4540
|
|
|
4537
4541
|
var Number$1 = function (props) {
|
|
4538
4542
|
var inputRef = useRef(null);
|
|
@@ -4571,7 +4575,7 @@ var Number$1 = function (props) {
|
|
|
4571
4575
|
|
|
4572
4576
|
var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4573
4577
|
|
|
4574
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
4578
|
+
var StyledRadio = styled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
4575
4579
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4576
4580
|
if (disabled)
|
|
4577
4581
|
return theme.colors.lightGray.darker;
|
|
@@ -4599,7 +4603,7 @@ var StyledRadio = styled.div(templateObject_1$H || (templateObject_1$H = __makeT
|
|
|
4599
4603
|
return theme.colors.green.base;
|
|
4600
4604
|
return "";
|
|
4601
4605
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4602
|
-
var templateObject_1$
|
|
4606
|
+
var templateObject_1$I;
|
|
4603
4607
|
|
|
4604
4608
|
var Radio = function (props) {
|
|
4605
4609
|
var _a, _b;
|
|
@@ -4631,7 +4635,7 @@ var Radio = function (props) {
|
|
|
4631
4635
|
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 }) })));
|
|
4632
4636
|
};
|
|
4633
4637
|
|
|
4634
|
-
var StyledRange = styled.div(templateObject_1$
|
|
4638
|
+
var StyledRange = styled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
4635
4639
|
var value = _a.value, disabled = _a.disabled;
|
|
4636
4640
|
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 )");
|
|
4637
4641
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4641,7 +4645,7 @@ var StyledRange = styled.div(templateObject_1$G || (templateObject_1$G = __makeT
|
|
|
4641
4645
|
var disabled = _a.disabled;
|
|
4642
4646
|
return disabled ? "not-allowed" : "pointer";
|
|
4643
4647
|
});
|
|
4644
|
-
var templateObject_1$
|
|
4648
|
+
var templateObject_1$H;
|
|
4645
4649
|
|
|
4646
4650
|
var Range = function (props) {
|
|
4647
4651
|
var _a;
|
|
@@ -4670,11 +4674,11 @@ var Range = function (props) {
|
|
|
4670
4674
|
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 }) })));
|
|
4671
4675
|
};
|
|
4672
4676
|
|
|
4673
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
4677
|
+
var Wrapper$5 = styled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
4674
4678
|
var disabled = _a.disabled;
|
|
4675
4679
|
return (disabled ? "not-allowed" : "pointer");
|
|
4676
4680
|
});
|
|
4677
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
4681
|
+
var StyledSelect = styled.select(templateObject_2$v || (templateObject_2$v = __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) {
|
|
4678
4682
|
var disabled = _a.disabled;
|
|
4679
4683
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4680
4684
|
}, function (_a) {
|
|
@@ -4687,7 +4691,7 @@ var StyledSelect = styled.select(templateObject_2$u || (templateObject_2$u = __m
|
|
|
4687
4691
|
var isChanged = _a.isChanged;
|
|
4688
4692
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4689
4693
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4690
|
-
var templateObject_1$
|
|
4694
|
+
var templateObject_1$G, templateObject_2$v;
|
|
4691
4695
|
|
|
4692
4696
|
var Select = function (props) {
|
|
4693
4697
|
var _a;
|
|
@@ -4709,18 +4713,18 @@ var Select = function (props) {
|
|
|
4709
4713
|
return (jsxs(Wrapper$5, { 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] }))] }));
|
|
4710
4714
|
};
|
|
4711
4715
|
|
|
4712
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
4716
|
+
var StyledSpacer = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4713
4717
|
var horizontal = _a.horizontal;
|
|
4714
4718
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4715
4719
|
}, function (_a) {
|
|
4716
4720
|
var vertical = _a.vertical;
|
|
4717
4721
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4718
4722
|
});
|
|
4719
|
-
var templateObject_1$
|
|
4723
|
+
var templateObject_1$F;
|
|
4720
4724
|
|
|
4721
4725
|
var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
|
|
4722
4726
|
|
|
4723
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
4727
|
+
var StyledSubheading = styled.p(templateObject_1$E || (templateObject_1$E = __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) {
|
|
4724
4728
|
var size = _a.size;
|
|
4725
4729
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4726
4730
|
}, function (_a) {
|
|
@@ -4748,18 +4752,18 @@ var StyledSubheading = styled.p(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
4748
4752
|
return theme.colors.darkGray.dark;
|
|
4749
4753
|
}
|
|
4750
4754
|
});
|
|
4751
|
-
var templateObject_1$
|
|
4755
|
+
var templateObject_1$E;
|
|
4752
4756
|
|
|
4753
4757
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4754
4758
|
|
|
4755
|
-
var Container$
|
|
4756
|
-
var templateObject_1$
|
|
4759
|
+
var Container$l = styled.div(templateObject_1$D || (templateObject_1$D = __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 font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\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\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, theme.colors.darkGray.light);
|
|
4760
|
+
var templateObject_1$D;
|
|
4757
4761
|
|
|
4758
4762
|
var Tag = function (props) {
|
|
4759
|
-
return jsx$1(Container$
|
|
4763
|
+
return jsx$1(Container$l, { children: props.children });
|
|
4760
4764
|
};
|
|
4761
4765
|
|
|
4762
|
-
var Container$
|
|
4766
|
+
var Container$k = styled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
4763
4767
|
var disabled = _a.disabled;
|
|
4764
4768
|
return (disabled ? "not-allowed" : "pointer");
|
|
4765
4769
|
}, function (_a) {
|
|
@@ -4777,7 +4781,7 @@ var Container$j = styled.div(templateObject_1$B || (templateObject_1$B = __makeT
|
|
|
4777
4781
|
var disabled = _a.disabled;
|
|
4778
4782
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4779
4783
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4780
|
-
var templateObject_1$
|
|
4784
|
+
var templateObject_1$C;
|
|
4781
4785
|
|
|
4782
4786
|
var Toggle = function (props) {
|
|
4783
4787
|
var _a;
|
|
@@ -4805,10 +4809,10 @@ var Toggle = function (props) {
|
|
|
4805
4809
|
props.onChange(newValue);
|
|
4806
4810
|
}
|
|
4807
4811
|
};
|
|
4808
|
-
return (jsx$1(Container$
|
|
4812
|
+
return (jsx$1(Container$k, __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 }) })));
|
|
4809
4813
|
};
|
|
4810
4814
|
|
|
4811
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
4815
|
+
var Wrapper$4 = styled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
4812
4816
|
var level = _a.level;
|
|
4813
4817
|
switch (level) {
|
|
4814
4818
|
case 1:
|
|
@@ -4819,7 +4823,7 @@ var Wrapper$4 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTem
|
|
|
4819
4823
|
return "70px";
|
|
4820
4824
|
}
|
|
4821
4825
|
});
|
|
4822
|
-
var templateObject_1$
|
|
4826
|
+
var templateObject_1$B;
|
|
4823
4827
|
|
|
4824
4828
|
var trophies = {
|
|
4825
4829
|
1: {
|
|
@@ -4855,7 +4859,7 @@ var trophies = {
|
|
|
4855
4859
|
};
|
|
4856
4860
|
var Trophy = function (props) { return (jsx$1(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4857
4861
|
|
|
4858
|
-
var Container$
|
|
4862
|
+
var Container$j = styled.div(templateObject_1$A || (templateObject_1$A = __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 gap: 10px;\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 gap: 10px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
4859
4863
|
var type = _a.type;
|
|
4860
4864
|
switch (type) {
|
|
4861
4865
|
case "success":
|
|
@@ -4872,11 +4876,11 @@ var Container$i = styled.div(templateObject_1$z || (templateObject_1$z = __makeT
|
|
|
4872
4876
|
return theme.colors.red.base;
|
|
4873
4877
|
}
|
|
4874
4878
|
});
|
|
4875
|
-
var templateObject_1$
|
|
4879
|
+
var templateObject_1$A;
|
|
4876
4880
|
|
|
4877
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
4881
|
+
var Alert = function (props) { return (jsxs(Container$j, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx$1(Paragraph, { children: props.message })] }))); };
|
|
4878
4882
|
|
|
4879
|
-
var StyledCard = styled.div(templateObject_1$
|
|
4883
|
+
var StyledCard = styled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
4880
4884
|
var bordered = _a.bordered;
|
|
4881
4885
|
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4882
4886
|
}, function (_a) {
|
|
@@ -4888,23 +4892,23 @@ var StyledCard = styled.div(templateObject_1$y || (templateObject_1$y = __makeTe
|
|
|
4888
4892
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4889
4893
|
: "";
|
|
4890
4894
|
});
|
|
4891
|
-
var Ellipse = styled.div(templateObject_2$
|
|
4895
|
+
var Ellipse = styled.div(templateObject_2$u || (templateObject_2$u = __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) {
|
|
4892
4896
|
var color = _a.color;
|
|
4893
4897
|
return color ? theme.colors[color].light : "";
|
|
4894
4898
|
});
|
|
4895
|
-
var Content = styled.div(templateObject_3$
|
|
4896
|
-
var templateObject_1$
|
|
4899
|
+
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"])));
|
|
4900
|
+
var templateObject_1$z, templateObject_2$u, templateObject_3$a;
|
|
4897
4901
|
|
|
4898
4902
|
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 })] }))); };
|
|
4899
4903
|
|
|
4900
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
4901
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
4902
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
4904
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
4905
|
+
var CheckboxContainer = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4906
|
+
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"])));
|
|
4903
4907
|
var Label$9 = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
4904
4908
|
var weight = _a.weight;
|
|
4905
4909
|
return weight || 500;
|
|
4906
4910
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
4907
|
-
var templateObject_1$
|
|
4911
|
+
var templateObject_1$y, templateObject_2$t, templateObject_3$9, templateObject_4$6;
|
|
4908
4912
|
|
|
4909
4913
|
var Checkboxes = function (props) {
|
|
4910
4914
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4927,12 +4931,12 @@ var Checkboxes = function (props) {
|
|
|
4927
4931
|
}) })] }));
|
|
4928
4932
|
};
|
|
4929
4933
|
|
|
4930
|
-
var Container$
|
|
4931
|
-
var Item = styled.div(templateObject_2$
|
|
4934
|
+
var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __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);
|
|
4935
|
+
var Item = styled.div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
4932
4936
|
var isOpen = _a.isOpen;
|
|
4933
4937
|
return (isOpen ? "" : "none");
|
|
4934
4938
|
}, theme.colors.lightGray.dark);
|
|
4935
|
-
var templateObject_1$
|
|
4939
|
+
var templateObject_1$x, templateObject_2$s;
|
|
4936
4940
|
|
|
4937
4941
|
var Collapse = function (props) {
|
|
4938
4942
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4944,18 +4948,18 @@ var Collapse = function (props) {
|
|
|
4944
4948
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
4945
4949
|
}
|
|
4946
4950
|
};
|
|
4947
|
-
return (jsx$1(Container$
|
|
4951
|
+
return (jsx$1(Container$i, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
4948
4952
|
var isOpen = openItems.includes(index);
|
|
4949
4953
|
return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
4950
4954
|
}) })));
|
|
4951
4955
|
};
|
|
4952
4956
|
|
|
4953
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
4954
|
-
var Value = styled.div(templateObject_2$
|
|
4957
|
+
var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4958
|
+
var Value = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
|
|
4955
4959
|
var contrast = _a.contrast;
|
|
4956
4960
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4957
4961
|
}, theme.colors.darkGray.base);
|
|
4958
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$w, templateObject_2$r;
|
|
4959
4963
|
|
|
4960
4964
|
var Countdown = function (_a) {
|
|
4961
4965
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -4982,9 +4986,9 @@ var Countdown = function (_a) {
|
|
|
4982
4986
|
return (jsxs(Wrapper$3, { children: [jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: HH })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: MM })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: SS })) }))] }));
|
|
4983
4987
|
};
|
|
4984
4988
|
|
|
4985
|
-
var Container$
|
|
4986
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
4987
|
-
var templateObject_1$
|
|
4989
|
+
var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
4990
|
+
var Label$8 = styled(StyledParagraph)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4991
|
+
var templateObject_1$v, templateObject_2$q;
|
|
4988
4992
|
|
|
4989
4993
|
var DateInputField = function (props) {
|
|
4990
4994
|
var onChange = function (value) {
|
|
@@ -4995,10 +4999,10 @@ var DateInputField = function (props) {
|
|
|
4995
4999
|
if (props.onBlur)
|
|
4996
5000
|
props.onBlur(props.name);
|
|
4997
5001
|
};
|
|
4998
|
-
return (jsxs(Container$
|
|
5002
|
+
return (jsxs(Container$h, { 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 })] }));
|
|
4999
5003
|
};
|
|
5000
5004
|
|
|
5001
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
5005
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
5002
5006
|
var size = _a.size;
|
|
5003
5007
|
return (size === "small" ? "30px" : "40px");
|
|
5004
5008
|
}, function (_a) {
|
|
@@ -5017,7 +5021,7 @@ var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObjec
|
|
|
5017
5021
|
var size = _a.size;
|
|
5018
5022
|
return (size === "small" ? "28px" : "38px");
|
|
5019
5023
|
});
|
|
5020
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
5024
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
5021
5025
|
var size = _a.size;
|
|
5022
5026
|
return (size === "small" ? "30px" : "40px");
|
|
5023
5027
|
}, function (_a) {
|
|
@@ -5036,7 +5040,7 @@ var GhostIconButton = styled(GhostButton)(templateObject_2$o || (templateObject_
|
|
|
5036
5040
|
var size = _a.size;
|
|
5037
5041
|
return (size === "small" ? "32px" : "40px");
|
|
5038
5042
|
});
|
|
5039
|
-
var templateObject_1$
|
|
5043
|
+
var templateObject_1$u, templateObject_2$p;
|
|
5040
5044
|
|
|
5041
5045
|
var IconButton = function (props) {
|
|
5042
5046
|
if (props.color === "white")
|
|
@@ -5044,9 +5048,9 @@ var IconButton = function (props) {
|
|
|
5044
5048
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
5045
5049
|
};
|
|
5046
5050
|
|
|
5047
|
-
var Container$
|
|
5048
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
5049
|
-
var templateObject_1$
|
|
5051
|
+
var Container$g = styled.div(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
5052
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5053
|
+
var templateObject_1$t, templateObject_2$o;
|
|
5050
5054
|
|
|
5051
5055
|
var InputField = function (props) {
|
|
5052
5056
|
var onChange = function (value) {
|
|
@@ -5057,10 +5061,10 @@ var InputField = function (props) {
|
|
|
5057
5061
|
if (props.onBlur)
|
|
5058
5062
|
props.onBlur(props.name);
|
|
5059
5063
|
};
|
|
5060
|
-
return (jsxs(Container$
|
|
5064
|
+
return (jsxs(Container$g, { 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))); })] })))] }));
|
|
5061
5065
|
};
|
|
5062
5066
|
|
|
5063
|
-
var Container$
|
|
5067
|
+
var Container$f = styled.div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
5064
5068
|
var status = _a.status, color = _a.color;
|
|
5065
5069
|
switch (status) {
|
|
5066
5070
|
case "passed":
|
|
@@ -5104,23 +5108,23 @@ var Container$e = styled.div(templateObject_1$r || (templateObject_1$r = __makeT
|
|
|
5104
5108
|
return theme.colors.darkGray.light;
|
|
5105
5109
|
}
|
|
5106
5110
|
});
|
|
5107
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
5108
|
-
var templateObject_1$
|
|
5111
|
+
var CheckIconWrapper = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
5112
|
+
var templateObject_1$s, templateObject_2$n;
|
|
5109
5113
|
|
|
5110
|
-
var Key$1 = function (props) { return (jsxs(Container$
|
|
5114
|
+
var Key$1 = function (props) { return (jsxs(Container$f, __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: {
|
|
5111
5115
|
marginTop: "13px",
|
|
5112
5116
|
transform: "scale(2)",
|
|
5113
5117
|
} }, { 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 })))] }))); };
|
|
5114
5118
|
|
|
5115
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
5119
|
+
var Wrapper$2 = styled.a(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
5116
5120
|
var chevron = _a.chevron;
|
|
5117
5121
|
return (chevron === "left" ? "4px" : "");
|
|
5118
5122
|
}, function (_a) {
|
|
5119
5123
|
var chevron = _a.chevron;
|
|
5120
5124
|
return (chevron === "right" ? "4px" : "");
|
|
5121
5125
|
});
|
|
5122
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
5123
|
-
var templateObject_1$
|
|
5126
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$m || (templateObject_2$m = __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);
|
|
5127
|
+
var templateObject_1$r, templateObject_2$m;
|
|
5124
5128
|
|
|
5125
5129
|
var Link = function (props) {
|
|
5126
5130
|
var onClick = function (e) {
|
|
@@ -5132,15 +5136,15 @@ var Link = function (props) {
|
|
|
5132
5136
|
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" }))] })));
|
|
5133
5137
|
};
|
|
5134
5138
|
|
|
5135
|
-
var Container$
|
|
5139
|
+
var Container$e = styled.div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
5136
5140
|
var text = _a.text;
|
|
5137
5141
|
return (text ? "20px" : "");
|
|
5138
5142
|
});
|
|
5139
|
-
var templateObject_1$
|
|
5143
|
+
var templateObject_1$q;
|
|
5140
5144
|
|
|
5141
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
5145
|
+
var Loading = function (props) { return (jsxs(Container$e, __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 }))] }))] }))); };
|
|
5142
5146
|
|
|
5143
|
-
var Container$
|
|
5147
|
+
var Container$d = styled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
5144
5148
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
5145
5149
|
if (dropdownIsVisible) {
|
|
5146
5150
|
switch (color) {
|
|
@@ -5153,8 +5157,8 @@ var Container$c = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
|
|
|
5153
5157
|
}
|
|
5154
5158
|
return "";
|
|
5155
5159
|
});
|
|
5156
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
5157
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
5160
|
+
var SelectedLocaleWrapper = styled.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
5161
|
+
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) {
|
|
5158
5162
|
var color = _a.color;
|
|
5159
5163
|
switch (color) {
|
|
5160
5164
|
default:
|
|
@@ -5165,7 +5169,7 @@ var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = _
|
|
|
5165
5169
|
}
|
|
5166
5170
|
});
|
|
5167
5171
|
var LocaleWrapper = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
5168
|
-
var templateObject_1$
|
|
5172
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$8, templateObject_4$5;
|
|
5169
5173
|
|
|
5170
5174
|
var LocaleSelect = function (props) {
|
|
5171
5175
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -5174,22 +5178,22 @@ var LocaleSelect = function (props) {
|
|
|
5174
5178
|
setLocale(locale);
|
|
5175
5179
|
props.onChange(locale);
|
|
5176
5180
|
};
|
|
5177
|
-
return (jsxs(Container$
|
|
5181
|
+
return (jsxs(Container$d, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Heading, __assign$2({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsx$1(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx$1(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx$1(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
|
|
5178
5182
|
.filter(function (l) { return l !== locale; })
|
|
5179
5183
|
.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)); }) })))] })));
|
|
5180
5184
|
};
|
|
5181
5185
|
|
|
5182
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
5183
|
-
var templateObject_1$
|
|
5186
|
+
var Wrapper$1 = styled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
5187
|
+
var templateObject_1$o;
|
|
5184
5188
|
|
|
5185
5189
|
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] }))] })] })); };
|
|
5186
5190
|
|
|
5187
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
5191
|
+
var NotificationContainer = styled.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
5188
5192
|
var contrast = _a.contrast;
|
|
5189
5193
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5190
5194
|
});
|
|
5191
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
5192
|
-
var templateObject_1$
|
|
5195
|
+
var ButtonContainer = styled.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
5196
|
+
var templateObject_1$n, templateObject_2$k;
|
|
5193
5197
|
|
|
5194
5198
|
var Notification = function (props) {
|
|
5195
5199
|
if (!props.isVisible)
|
|
@@ -5197,9 +5201,9 @@ var Notification = function (props) {
|
|
|
5197
5201
|
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) }))); }) }))] })));
|
|
5198
5202
|
};
|
|
5199
5203
|
|
|
5200
|
-
var Container$
|
|
5201
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
5202
|
-
var templateObject_1$
|
|
5204
|
+
var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
5205
|
+
var Label$6 = styled(StyledParagraph)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5206
|
+
var templateObject_1$m, templateObject_2$j;
|
|
5203
5207
|
|
|
5204
5208
|
var NumberField = function (props) {
|
|
5205
5209
|
var onChange = function (value) {
|
|
@@ -5210,12 +5214,12 @@ var NumberField = function (props) {
|
|
|
5210
5214
|
if (props.onBlur)
|
|
5211
5215
|
props.onBlur(props.name);
|
|
5212
5216
|
};
|
|
5213
|
-
return (jsxs(Container$
|
|
5217
|
+
return (jsxs(Container$c, { children: [jsx$1(Label$6, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Number$1, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
5214
5218
|
};
|
|
5215
5219
|
|
|
5216
|
-
var Container$
|
|
5217
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
5218
|
-
var templateObject_1$
|
|
5220
|
+
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"])));
|
|
5221
|
+
var Label$5 = 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);
|
|
5222
|
+
var templateObject_1$l, templateObject_2$i;
|
|
5219
5223
|
|
|
5220
5224
|
var PasswordInputField = function (props) {
|
|
5221
5225
|
var onChange = function (value) {
|
|
@@ -5231,7 +5235,7 @@ var PasswordInputField = function (props) {
|
|
|
5231
5235
|
if (props.onBlur)
|
|
5232
5236
|
props.onBlur(props.name);
|
|
5233
5237
|
};
|
|
5234
|
-
return (jsxs(Container$
|
|
5238
|
+
return (jsxs(Container$b, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, helperLocale: props.helperLocale, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })] }));
|
|
5235
5239
|
};
|
|
5236
5240
|
|
|
5237
5241
|
var generateRandomString = function (length) {
|
|
@@ -5244,7 +5248,7 @@ var generateRandomString = function (length) {
|
|
|
5244
5248
|
return string;
|
|
5245
5249
|
};
|
|
5246
5250
|
|
|
5247
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
5251
|
+
var PopupContainer = styled.div(templateObject_1$k || (templateObject_1$k = __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 border: ", ";\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 border: ", ";\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) {
|
|
5248
5252
|
var isVisible = _a.isVisible;
|
|
5249
5253
|
return (isVisible ? "100%" : "0%");
|
|
5250
5254
|
}, function (_a) {
|
|
@@ -5253,11 +5257,11 @@ var PopupContainer = styled.div(templateObject_1$j || (templateObject_1$j = __ma
|
|
|
5253
5257
|
}, function (_a) {
|
|
5254
5258
|
var x = _a.x;
|
|
5255
5259
|
return (x ? "".concat(x, "px") : "");
|
|
5256
|
-
}, function (_a) {
|
|
5260
|
+
}, "1px solid ".concat(theme.colors.lightGray.dark), function (_a) {
|
|
5257
5261
|
var contrast = _a.contrast;
|
|
5258
5262
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5259
5263
|
});
|
|
5260
|
-
var templateObject_1$
|
|
5264
|
+
var templateObject_1$k;
|
|
5261
5265
|
|
|
5262
5266
|
var Popup = function (props) {
|
|
5263
5267
|
var popupRef = useRef(null);
|
|
@@ -5293,24 +5297,24 @@ var Popup = function (props) {
|
|
|
5293
5297
|
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 }))] }))] }));
|
|
5294
5298
|
};
|
|
5295
5299
|
|
|
5296
|
-
var Wrapper = styled.div(templateObject_1$
|
|
5297
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
5300
|
+
var Wrapper = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
5301
|
+
var StyledProgressBar = styled.div(templateObject_2$h || (templateObject_2$h = __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) {
|
|
5298
5302
|
var showInfo = _a.showInfo;
|
|
5299
5303
|
return (showInfo ? "10px" : "");
|
|
5300
5304
|
});
|
|
5301
|
-
var Indicator$1 = styled.div(templateObject_3$
|
|
5305
|
+
var Indicator$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"], ["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"])), function (_a) {
|
|
5302
5306
|
var percent = _a.percent;
|
|
5303
5307
|
return "calc(".concat(percent, "% - 6px)");
|
|
5304
5308
|
}, function (_a) {
|
|
5305
5309
|
var color = _a.color;
|
|
5306
5310
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5307
5311
|
});
|
|
5308
|
-
var templateObject_1$
|
|
5312
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$7;
|
|
5309
5313
|
|
|
5310
5314
|
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, "%") })))] })); };
|
|
5311
5315
|
|
|
5312
|
-
var Container$
|
|
5313
|
-
var Step$1 = styled.li(templateObject_2$
|
|
5316
|
+
var Container$a = styled.ol(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
5317
|
+
var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __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) {
|
|
5314
5318
|
var status = _a.status;
|
|
5315
5319
|
return (!!status ? "pointer" : "not-allowed");
|
|
5316
5320
|
}, function (_a) {
|
|
@@ -5332,9 +5336,9 @@ var Step$1 = styled.li(templateObject_2$f || (templateObject_2$f = __makeTemplat
|
|
|
5332
5336
|
var hasTitle = _a.hasTitle;
|
|
5333
5337
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5334
5338
|
}, theme.colors.lightGray.dark);
|
|
5335
|
-
var templateObject_1$
|
|
5339
|
+
var templateObject_1$i, templateObject_2$g;
|
|
5336
5340
|
|
|
5337
|
-
var Steps$2 = function (props) { return (jsx$1(Container$
|
|
5341
|
+
var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
|
|
5338
5342
|
var title = _a.title, onClick = _a.onClick;
|
|
5339
5343
|
var step = index + 1;
|
|
5340
5344
|
var status = props.current > step
|
|
@@ -5349,8 +5353,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.st
|
|
|
5349
5353
|
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)));
|
|
5350
5354
|
}) })); };
|
|
5351
5355
|
|
|
5352
|
-
var Container$
|
|
5353
|
-
var Step = styled.li(templateObject_2$
|
|
5356
|
+
var Container$9 = styled.ol(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
5357
|
+
var Step = styled.li(templateObject_2$f || (templateObject_2$f = __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) {
|
|
5354
5358
|
var status = _a.status;
|
|
5355
5359
|
return (!!status ? "pointer" : "not-allowed");
|
|
5356
5360
|
}, function (_a) {
|
|
@@ -5369,9 +5373,9 @@ var Step = styled.li(templateObject_2$e || (templateObject_2$e = __makeTemplateO
|
|
|
5369
5373
|
? theme.colors.lightGray.light
|
|
5370
5374
|
: theme.colors.darkGray.light;
|
|
5371
5375
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5372
|
-
var templateObject_1$
|
|
5376
|
+
var templateObject_1$h, templateObject_2$f;
|
|
5373
5377
|
|
|
5374
|
-
var Steps$1 = function (props) { return (jsx$1(Container$
|
|
5378
|
+
var Steps$1 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5375
5379
|
var title = _a.title, onClick = _a.onClick;
|
|
5376
5380
|
var step = index + 1;
|
|
5377
5381
|
var status = props.current > step
|
|
@@ -5390,15 +5394,15 @@ var Steps = function (props) {
|
|
|
5390
5394
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
5391
5395
|
};
|
|
5392
5396
|
|
|
5393
|
-
var TabsContainer$1 = styled.div(templateObject_1$
|
|
5394
|
-
var Tab$1 = styled.div(templateObject_2$
|
|
5397
|
+
var TabsContainer$1 = styled.div(templateObject_1$g || (templateObject_1$g = __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);
|
|
5398
|
+
var Tab$1 = styled.div(templateObject_2$e || (templateObject_2$e = __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) {
|
|
5395
5399
|
var isActive = _a.isActive;
|
|
5396
5400
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
5397
5401
|
}, function (_a) {
|
|
5398
5402
|
var isActive = _a.isActive;
|
|
5399
5403
|
return isActive ? theme.colors.blue.base : "";
|
|
5400
5404
|
}, theme.colors.blue.base);
|
|
5401
|
-
var templateObject_1$
|
|
5405
|
+
var templateObject_1$g, templateObject_2$e;
|
|
5402
5406
|
|
|
5403
5407
|
var Tabs$2 = function (props) {
|
|
5404
5408
|
var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
@@ -5413,15 +5417,15 @@ var Tabs$2 = function (props) {
|
|
|
5413
5417
|
}) }));
|
|
5414
5418
|
};
|
|
5415
5419
|
|
|
5416
|
-
var TabsContainer = styled.div(templateObject_1$
|
|
5417
|
-
var Tab = styled.div(templateObject_2$
|
|
5420
|
+
var TabsContainer = styled.div(templateObject_1$f || (templateObject_1$f = __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);
|
|
5421
|
+
var Tab = styled.div(templateObject_2$d || (templateObject_2$d = __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) {
|
|
5418
5422
|
var isActive = _a.isActive;
|
|
5419
5423
|
return (isActive ? "block" : "none");
|
|
5420
5424
|
}, theme.colors.blue.base, function (_a) {
|
|
5421
5425
|
var isActive = _a.isActive;
|
|
5422
5426
|
return isActive ? theme.colors.blue.base : "";
|
|
5423
5427
|
}, theme.colors.blue.base);
|
|
5424
|
-
var templateObject_1$
|
|
5428
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5425
5429
|
|
|
5426
5430
|
var Tabs$1 = function (props) {
|
|
5427
5431
|
var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
|
|
@@ -5440,14 +5444,14 @@ var Tabs = function (props) {
|
|
|
5440
5444
|
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
5441
5445
|
};
|
|
5442
5446
|
|
|
5443
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
5444
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
5445
|
-
var RadioWrapper = styled.div(templateObject_3$
|
|
5447
|
+
var Fieldset = styled.fieldset(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
5448
|
+
var RadioContainer = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5449
|
+
var RadioWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
5446
5450
|
var Label$4 = styled(StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __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) {
|
|
5447
5451
|
var weight = _a.weight;
|
|
5448
5452
|
return weight || 500;
|
|
5449
5453
|
}, theme.colors.darkGray.base);
|
|
5450
|
-
var templateObject_1$
|
|
5454
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$6, templateObject_4$4;
|
|
5451
5455
|
|
|
5452
5456
|
var RadioGroup = function (props) {
|
|
5453
5457
|
var onChange = function (value) {
|
|
@@ -5464,9 +5468,9 @@ var RadioGroup = function (props) {
|
|
|
5464
5468
|
}) })] }));
|
|
5465
5469
|
};
|
|
5466
5470
|
|
|
5467
|
-
var Container$
|
|
5468
|
-
var Label$3 = styled(StyledParagraph)(templateObject_2$
|
|
5469
|
-
var templateObject_1$
|
|
5471
|
+
var Container$8 = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
5472
|
+
var Label$3 = styled(StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5473
|
+
var templateObject_1$d, templateObject_2$b;
|
|
5470
5474
|
|
|
5471
5475
|
var SelectField = function (props) {
|
|
5472
5476
|
var onChange = function (value) {
|
|
@@ -5477,15 +5481,15 @@ var SelectField = function (props) {
|
|
|
5477
5481
|
if (props.onBlur)
|
|
5478
5482
|
props.onBlur(props.name);
|
|
5479
5483
|
};
|
|
5480
|
-
return (jsxs(Container$
|
|
5484
|
+
return (jsxs(Container$8, { children: [jsx$1(Label$3, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Select, __assign$2({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
5481
5485
|
var value = _a.value, label = _a.label;
|
|
5482
5486
|
return (jsx$1("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
5483
5487
|
}) }))] }));
|
|
5484
5488
|
};
|
|
5485
5489
|
|
|
5486
|
-
var Container$
|
|
5487
|
-
var Label$2 = styled(StyledParagraph)(templateObject_2$
|
|
5488
|
-
var templateObject_1$
|
|
5490
|
+
var Container$7 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
5491
|
+
var Label$2 = styled(StyledParagraph)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5492
|
+
var templateObject_1$c, templateObject_2$a;
|
|
5489
5493
|
|
|
5490
5494
|
var ToggleField = function (props) {
|
|
5491
5495
|
var onChange = function (value) {
|
|
@@ -5496,10 +5500,10 @@ var ToggleField = function (props) {
|
|
|
5496
5500
|
if (props.onBlur)
|
|
5497
5501
|
props.onBlur(props.name);
|
|
5498
5502
|
};
|
|
5499
|
-
return (jsxs(Container$
|
|
5503
|
+
return (jsxs(Container$7, { children: [jsx$1(Label$2, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
5500
5504
|
};
|
|
5501
5505
|
|
|
5502
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
5506
|
+
var TooltipContainer = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject$1(["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
5503
5507
|
var isVisible = _a.isVisible;
|
|
5504
5508
|
return (isVisible ? "100%" : "0%");
|
|
5505
5509
|
}, function (_a) {
|
|
@@ -5509,7 +5513,7 @@ var TooltipContainer = styled.div(templateObject_1$a || (templateObject_1$a = __
|
|
|
5509
5513
|
var x = _a.x;
|
|
5510
5514
|
return (x ? "".concat(x, "px") : "");
|
|
5511
5515
|
});
|
|
5512
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
5516
|
+
var TooltipTitle = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
5513
5517
|
var color = _a.color;
|
|
5514
5518
|
switch (color) {
|
|
5515
5519
|
default:
|
|
@@ -5519,7 +5523,7 @@ var TooltipTitle = styled.div(templateObject_2$8 || (templateObject_2$8 = __make
|
|
|
5519
5523
|
return theme.colors.lightGray.dark;
|
|
5520
5524
|
}
|
|
5521
5525
|
});
|
|
5522
|
-
var templateObject_1$
|
|
5526
|
+
var templateObject_1$b, templateObject_2$9;
|
|
5523
5527
|
|
|
5524
5528
|
var Tooltip = function (props) {
|
|
5525
5529
|
var tooltipRef = useRef(null);
|
|
@@ -11371,7 +11375,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
11371
11375
|
HTMLReactParser$1.attributesToProps;
|
|
11372
11376
|
HTMLReactParser$1.Element;
|
|
11373
11377
|
|
|
11374
|
-
var StyledTextarea = styled.textarea(templateObject_1$
|
|
11378
|
+
var StyledTextarea = styled.textarea(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n min-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 resize: vertical;\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 min-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 resize: vertical;\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) {
|
|
11375
11379
|
var disabled = _a.disabled;
|
|
11376
11380
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
11377
11381
|
}, function (_a) {
|
|
@@ -11384,7 +11388,7 @@ var StyledTextarea = styled.textarea(templateObject_1$9 || (templateObject_1$9 =
|
|
|
11384
11388
|
var disabled = _a.disabled;
|
|
11385
11389
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
11386
11390
|
}, 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));
|
|
11387
|
-
var templateObject_1$
|
|
11391
|
+
var templateObject_1$a;
|
|
11388
11392
|
|
|
11389
11393
|
var Textarea = function (props) {
|
|
11390
11394
|
var onChange = function (e) {
|
|
@@ -11394,9 +11398,9 @@ var Textarea = function (props) {
|
|
|
11394
11398
|
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
11395
11399
|
};
|
|
11396
11400
|
|
|
11397
|
-
var Container$
|
|
11398
|
-
var Label$1 = styled(StyledParagraph)(templateObject_2$
|
|
11399
|
-
var templateObject_1$
|
|
11401
|
+
var Container$6 = styled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
11402
|
+
var Label$1 = styled(StyledParagraph)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
11403
|
+
var templateObject_1$9, templateObject_2$8;
|
|
11400
11404
|
|
|
11401
11405
|
var TextareaField = function (props) {
|
|
11402
11406
|
var onChange = function (value) {
|
|
@@ -11407,12 +11411,12 @@ var TextareaField = function (props) {
|
|
|
11407
11411
|
if (props.onBlur)
|
|
11408
11412
|
props.onBlur(props.name);
|
|
11409
11413
|
};
|
|
11410
|
-
return (jsxs(Container$
|
|
11414
|
+
return (jsxs(Container$6, { children: [jsx$1(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, 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))); })] })))] }));
|
|
11411
11415
|
};
|
|
11412
11416
|
|
|
11413
|
-
var Container$
|
|
11414
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
11415
|
-
var templateObject_1$
|
|
11417
|
+
var Container$5 = styled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
11418
|
+
var Label = styled(StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
11419
|
+
var templateObject_1$8, templateObject_2$7;
|
|
11416
11420
|
|
|
11417
11421
|
var RangeField = function (props) {
|
|
11418
11422
|
var onChange = function (value) {
|
|
@@ -11423,25 +11427,25 @@ var RangeField = function (props) {
|
|
|
11423
11427
|
if (props.onBlur)
|
|
11424
11428
|
props.onBlur(props.name);
|
|
11425
11429
|
};
|
|
11426
|
-
return (jsxs(Container$
|
|
11430
|
+
return (jsxs(Container$5, { children: [jsx$1(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
11427
11431
|
};
|
|
11428
11432
|
|
|
11429
11433
|
var FeedbackColors = {
|
|
11430
11434
|
success: theme.colors.green.base,
|
|
11431
11435
|
error: theme.colors.red.base,
|
|
11432
11436
|
};
|
|
11433
|
-
var FieldWrapper = styled.div(templateObject_1$
|
|
11437
|
+
var FieldWrapper = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1(["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
|
|
11434
11438
|
var status = _a.status;
|
|
11435
11439
|
return FeedbackColors[status];
|
|
11436
11440
|
});
|
|
11437
|
-
var FeedbackWrapper = styled.div(templateObject_2$
|
|
11441
|
+
var FeedbackWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n margin-top: 5px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n margin-right: 5px;\n }\n\n svg {\n fill: ", ";\n }\n p {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n margin-top: 5px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n margin-right: 5px;\n }\n\n svg {\n fill: ", ";\n }\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
11438
11442
|
var status = _a.status;
|
|
11439
11443
|
return FeedbackColors[status];
|
|
11440
11444
|
}, function (_a) {
|
|
11441
11445
|
var status = _a.status;
|
|
11442
11446
|
return FeedbackColors[status];
|
|
11443
11447
|
});
|
|
11444
|
-
var templateObject_1$
|
|
11448
|
+
var templateObject_1$7, templateObject_2$6;
|
|
11445
11449
|
|
|
11446
11450
|
var WithValidation = function (_a) {
|
|
11447
11451
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -11454,10 +11458,10 @@ var WithValidation = function (_a) {
|
|
|
11454
11458
|
return (jsxs(FieldWrapper, __assign$2({ status: status }, { children: [children, jsxs(FeedbackWrapper, __assign$2({ status: status }, { children: [jsx$1(Icon, { type: icons[status], size: "small" }), jsx$1(Paragraph, __assign$2({ size: "small" }, { children: message }))] }))] })));
|
|
11455
11459
|
};
|
|
11456
11460
|
|
|
11457
|
-
var FormWrapper = styled.form(templateObject_1$
|
|
11458
|
-
var DescriptionWrapper = styled.div(templateObject_2$
|
|
11459
|
-
var ButtonWrapper = styled.div(templateObject_3$
|
|
11460
|
-
var templateObject_1$
|
|
11461
|
+
var FormWrapper = styled.form(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject$1([""], [""])));
|
|
11462
|
+
var DescriptionWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject$1(["\n margin-bottom: 20px;\n\n a {\n color: ", ";\n\n :hover {\n color: ", ";\n }\n }\n"], ["\n margin-bottom: 20px;\n\n a {\n color: ", ";\n\n :hover {\n color: ", ";\n }\n }\n"])), theme.colors.darkGray.light, theme.colors.blue.base);
|
|
11463
|
+
var ButtonWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
11464
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5;
|
|
11461
11465
|
|
|
11462
11466
|
var Form = forwardRef(function (props, ref) {
|
|
11463
11467
|
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -11640,7 +11644,7 @@ var Form = forwardRef(function (props, ref) {
|
|
|
11640
11644
|
}) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
11641
11645
|
});
|
|
11642
11646
|
|
|
11643
|
-
var Container$
|
|
11647
|
+
var Container$4 = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"])), function (_a) {
|
|
11644
11648
|
var color = _a.color, active = _a.active;
|
|
11645
11649
|
if (active)
|
|
11646
11650
|
return theme.colors[color].dark;
|
|
@@ -11664,20 +11668,20 @@ var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeT
|
|
|
11664
11668
|
return theme.colors[color].base;
|
|
11665
11669
|
return "";
|
|
11666
11670
|
});
|
|
11667
|
-
var templateObject_1$
|
|
11671
|
+
var templateObject_1$5;
|
|
11668
11672
|
|
|
11669
11673
|
var Key = function (props) {
|
|
11670
11674
|
var _a;
|
|
11671
|
-
return (jsx$1(Container$
|
|
11675
|
+
return (jsx$1(Container$4, __assign$2({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsx$1("svg", __assign$2({ width: "28", height: "7", viewBox: "0 0 28 7" }, { 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" }) }))) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsx$1(Heading, __assign$2({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) })));
|
|
11672
11676
|
};
|
|
11673
11677
|
|
|
11674
|
-
var Container$
|
|
11675
|
-
var SpecialRow = styled.div(templateObject_2$
|
|
11676
|
-
var TopRow = styled.div(templateObject_3$
|
|
11678
|
+
var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n width: 720px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"], ["\n width: 720px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"])));
|
|
11679
|
+
var SpecialRow = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"])));
|
|
11680
|
+
var TopRow = styled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
11677
11681
|
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"])));
|
|
11678
11682
|
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"])));
|
|
11679
11683
|
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"])));
|
|
11680
|
-
var templateObject_1$
|
|
11684
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
11681
11685
|
|
|
11682
11686
|
var Keyboard = function (props) {
|
|
11683
11687
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11701,7 +11705,7 @@ var Keyboard = function (props) {
|
|
|
11701
11705
|
}, [props.keys]);
|
|
11702
11706
|
if (!keys)
|
|
11703
11707
|
return null;
|
|
11704
|
-
return (jsxs(Container$
|
|
11708
|
+
return (jsxs(Container$3, { children: [jsxs(SpecialRow, { children: [jsx$1(Key, {}), jsx$1(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
11705
11709
|
keys[89].character === props.activeKey }, 44), jsx$1(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
11706
11710
|
keys[87].character === props.activeKey }), jsx$1(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
11707
11711
|
keys[85].character === props.activeKey }), jsx$1(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
@@ -11749,8 +11753,8 @@ var Keyboard = function (props) {
|
|
|
11749
11753
|
keys[76].character === props.activeKey }), jsx$1(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxs(SpacebarRow, { children: [jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {})] })] }));
|
|
11750
11754
|
};
|
|
11751
11755
|
|
|
11752
|
-
var Mask = styled.div(templateObject_1$
|
|
11753
|
-
var CardWrapper = styled.div(templateObject_2$
|
|
11756
|
+
var Mask = styled.div(templateObject_1$3 || (templateObject_1$3 = __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"])));
|
|
11757
|
+
var CardWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
11754
11758
|
var width = _a.width;
|
|
11755
11759
|
if (!width)
|
|
11756
11760
|
return "720px";
|
|
@@ -11758,11 +11762,11 @@ var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeT
|
|
|
11758
11762
|
return "".concat(width, "px");
|
|
11759
11763
|
return width;
|
|
11760
11764
|
});
|
|
11761
|
-
var TitleWrapper = styled.div(templateObject_3$
|
|
11765
|
+
var TitleWrapper$1 = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n margin: 0 25px 20px 0;\n"], ["\n margin: 0 25px 20px 0;\n"])));
|
|
11762
11766
|
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);
|
|
11763
11767
|
var ChildrenWrapper = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n padding: 20px 35px;\n"], ["\n padding: 20px 35px;\n"])));
|
|
11764
11768
|
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);
|
|
11765
|
-
var templateObject_1$
|
|
11769
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6$1;
|
|
11766
11770
|
|
|
11767
11771
|
var Modal = function (props) {
|
|
11768
11772
|
var _a = useState(props.isOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -11776,15 +11780,15 @@ var Modal = function (props) {
|
|
|
11776
11780
|
}, [isOpen]);
|
|
11777
11781
|
if (!isOpen)
|
|
11778
11782
|
return null;
|
|
11779
|
-
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" }))] }))] }) })) }));
|
|
11783
|
+
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$1, { 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" }))] }))] }) })) }));
|
|
11780
11784
|
};
|
|
11781
11785
|
|
|
11782
|
-
var Container$
|
|
11786
|
+
var Container$2 = styled.div(templateObject_1$2 || (templateObject_1$2 = __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) {
|
|
11783
11787
|
var passed = _a.passed;
|
|
11784
11788
|
return passed ? theme.colors.green.base : theme.colors.red.base;
|
|
11785
11789
|
}, theme.colors.lightGray.light);
|
|
11786
|
-
var ProgressBarWrapper = styled.div(templateObject_2$
|
|
11787
|
-
var Indicator = styled.div(templateObject_3$
|
|
11790
|
+
var ProgressBarWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 15px;\n margin-left: auto;\n position: relative;\n\n > div:last-child {\n display: flex;\n justify-content: space-between;\n margin-top: 3px;\n }\n"], ["\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 15px;\n margin-left: auto;\n position: relative;\n\n > div:last-child {\n display: flex;\n justify-content: space-between;\n margin-top: 3px;\n }\n"])));
|
|
11791
|
+
var Indicator = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n width: 4px;\n height: 22px;\n background-color: ", ";\n position: absolute;\n left: ", ";\n z-index: 1;\n top: -4px;\n"], ["\n width: 4px;\n height: 22px;\n background-color: ", ";\n position: absolute;\n left: ", ";\n z-index: 1;\n top: -4px;\n"])), theme.colors.blue.darker, function (_a) {
|
|
11788
11792
|
var value = _a.value;
|
|
11789
11793
|
return "".concat(value, "%");
|
|
11790
11794
|
});
|
|
@@ -11792,7 +11796,7 @@ var Target = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTempla
|
|
|
11792
11796
|
var value = _a.value, width = _a.width;
|
|
11793
11797
|
return "calc(".concat(value, "% - ").concat(width / 2, "px)");
|
|
11794
11798
|
}, theme.colors.blue.darker);
|
|
11795
|
-
var templateObject_1$
|
|
11799
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$1;
|
|
11796
11800
|
|
|
11797
11801
|
var Result = function (props) {
|
|
11798
11802
|
var ref = useRef(null);
|
|
@@ -11802,12 +11806,12 @@ var Result = function (props) {
|
|
|
11802
11806
|
var _a;
|
|
11803
11807
|
setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
11804
11808
|
}, [ref]);
|
|
11805
|
-
return (jsxs(Container$
|
|
11809
|
+
return (jsxs(Container$2, __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] }))] })] }))] })));
|
|
11806
11810
|
};
|
|
11807
11811
|
|
|
11808
|
-
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);
|
|
11809
|
-
var TableHead = styled.thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1([""], [""])));
|
|
11810
|
-
var TableBody = styled.tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11812
|
+
var Container$1 = styled.table(templateObject_1$1 || (templateObject_1$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);
|
|
11813
|
+
var TableHead = styled.thead(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1([""], [""])));
|
|
11814
|
+
var TableBody = styled.tbody(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1([""], [""])));
|
|
11811
11815
|
styled.tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11812
11816
|
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"])));
|
|
11813
11817
|
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);
|
|
@@ -11824,11 +11828,11 @@ var TableCell = styled.td(templateObject_7 || (templateObject_7 = __makeTemplate
|
|
|
11824
11828
|
}
|
|
11825
11829
|
});
|
|
11826
11830
|
var EmptyTableCell = styled.td(templateObject_8 || (templateObject_8 = __makeTemplateObject$1(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.colors.lightGray.darker);
|
|
11827
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
11831
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
11828
11832
|
|
|
11829
11833
|
var Table = function (_a) {
|
|
11830
11834
|
var columns = _a.columns, data = _a.data, empytText = _a.empytText;
|
|
11831
|
-
return (jsxs(Container, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a, index) {
|
|
11835
|
+
return (jsxs(Container$1, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a, index) {
|
|
11832
11836
|
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11833
11837
|
return (jsx$1(ColumnTitle, { children: title && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title }))) }, "".concat(dataIndex, "-").concat(index)));
|
|
11834
11838
|
}) }) }), jsx$1(TableBody, { children: data.length === 0 ? (jsx$1(TableRow, { children: jsx$1(EmptyTableCell, __assign$2({ colSpan: columns.length }, { children: jsx$1(Paragraph, __assign$2({ align: "center", size: "small", weight: "regular" }, { children: empytText || "No data" })) })) })) : (data.map(function (row, index) {
|
|
@@ -11840,5 +11844,74 @@ var Table = function (_a) {
|
|
|
11840
11844
|
})) })] }));
|
|
11841
11845
|
};
|
|
11842
11846
|
|
|
11843
|
-
|
|
11847
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n display: flex;\n align-items: stretch;\n\n > div:nth-child(odd) {\n width: 100%;\n min-width: 180px;\n min-height: 180px;\n\n > div {\n padding: 0;\n }\n }\n"], ["\n display: flex;\n align-items: stretch;\n\n > div:nth-child(odd) {\n width: 100%;\n min-width: 180px;\n min-height: 180px;\n\n > div {\n padding: 0;\n }\n }\n"])));
|
|
11848
|
+
var TitleWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["\n width: 100%;\n box-sizing: border-box;\n padding: 10px 15px;\n border-bottom: 1px solid ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n width: 100%;\n box-sizing: border-box;\n padding: 10px 15px;\n border-bottom: 1px solid ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])), theme.colors.lightGray.dark);
|
|
11849
|
+
var CheckboxesWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject$1(["\n height: 100%;\n max-height: 310px;\n background-color: ", ";\n padding: 15px;\n\n fieldset {\n height: 100%;\n overflow: scroll;\n padding-left: 2px;\n\n > div > div:not(:last-child) {\n margin-bottom: 10px;\n }\n }\n"], ["\n height: 100%;\n max-height: 310px;\n background-color: ", ";\n padding: 15px;\n\n fieldset {\n height: 100%;\n overflow: scroll;\n padding-left: 2px;\n\n > div > div:not(:last-child) {\n margin-bottom: 10px;\n }\n }\n"])), theme.colors.lightGray.base);
|
|
11850
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
11851
|
+
|
|
11852
|
+
var Transfer = function (props) {
|
|
11853
|
+
var _a, _b;
|
|
11854
|
+
var _c = useState(props.targetKeys || []), targetKeys = _c[0], setTargetKeys = _c[1];
|
|
11855
|
+
var _d = useState([]), selectedSourceKeys = _d[0], setSelectedSourceKeys = _d[1];
|
|
11856
|
+
var _e = useState([]), selectedTargetKeys = _e[0], setSelectedTargetKeys = _e[1];
|
|
11857
|
+
var onChange = function (newTargetKeys) {
|
|
11858
|
+
setTargetKeys(newTargetKeys);
|
|
11859
|
+
setSelectedSourceKeys([]);
|
|
11860
|
+
setSelectedTargetKeys([]);
|
|
11861
|
+
if (!props.onChange)
|
|
11862
|
+
return;
|
|
11863
|
+
props.onChange(props.dataSource
|
|
11864
|
+
.filter(function (_a) {
|
|
11865
|
+
var key = _a.key;
|
|
11866
|
+
return newTargetKeys.includes(key);
|
|
11867
|
+
})
|
|
11868
|
+
.map(function (_a) {
|
|
11869
|
+
var key = _a.key;
|
|
11870
|
+
return key;
|
|
11871
|
+
}));
|
|
11872
|
+
};
|
|
11873
|
+
var transferRight = function () {
|
|
11874
|
+
var newTargetKeys = __spreadArray(__spreadArray([], targetKeys, true), selectedSourceKeys, true);
|
|
11875
|
+
onChange(newTargetKeys);
|
|
11876
|
+
};
|
|
11877
|
+
var transferLeft = function () {
|
|
11878
|
+
var newTargetKeys = targetKeys.filter(function (key) { return !selectedTargetKeys.includes(key); });
|
|
11879
|
+
onChange(newTargetKeys);
|
|
11880
|
+
};
|
|
11881
|
+
return (jsxs(Container, { children: [jsxs(Card, __assign$2({ bordered: true }, { children: [((_a = props.titles) === null || _a === void 0 ? void 0 : _a.length) >= 1 && (jsxs(TitleWrapper, { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [selectedSourceKeys.length > 0 && "".concat(selectedSourceKeys.length, "/"), props.dataSource.length - targetKeys.length] })), jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.titles[0] }))] })), jsx$1(CheckboxesWrapper, { children: jsx$1(Checkboxes, { name: "source", legend: null, defaultValue: selectedSourceKeys, onChange: function (_, values) { return setSelectedSourceKeys(values); }, items: props.dataSource
|
|
11882
|
+
.filter(function (_a) {
|
|
11883
|
+
var key = _a.key;
|
|
11884
|
+
return !targetKeys.includes(key);
|
|
11885
|
+
})
|
|
11886
|
+
.map(function (_a) {
|
|
11887
|
+
var key = _a.key, title = _a.title;
|
|
11888
|
+
return ({
|
|
11889
|
+
id: key,
|
|
11890
|
+
value: key,
|
|
11891
|
+
label: title,
|
|
11892
|
+
});
|
|
11893
|
+
}) }) }, selectedSourceKeys)] })), jsxs("div", __assign$2({ style: {
|
|
11894
|
+
display: "flex",
|
|
11895
|
+
flexDirection: "column",
|
|
11896
|
+
gap: 10,
|
|
11897
|
+
position: "relative",
|
|
11898
|
+
top: 0,
|
|
11899
|
+
bottom: 0,
|
|
11900
|
+
margin: "auto 10px",
|
|
11901
|
+
} }, { children: [jsx$1(IconButton, { icon: "chevronRight", size: "small", onClick: transferRight }), jsx$1(IconButton, { icon: "chevronLeft", size: "small", onClick: transferLeft })] })), jsxs(Card, __assign$2({ bordered: true }, { children: [((_b = props.titles) === null || _b === void 0 ? void 0 : _b.length) >= 1 && (jsxs(TitleWrapper, { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [selectedTargetKeys.length > 0 && "".concat(selectedTargetKeys.length, "/"), targetKeys.length] })), jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.titles[1] }))] })), jsx$1(CheckboxesWrapper, { children: jsx$1(Checkboxes, { name: "target", legend: null, defaultValue: selectedTargetKeys, onChange: function (_, values) { return setSelectedTargetKeys(values); }, items: props.dataSource
|
|
11902
|
+
.filter(function (_a) {
|
|
11903
|
+
var key = _a.key;
|
|
11904
|
+
return targetKeys.includes(key);
|
|
11905
|
+
})
|
|
11906
|
+
.map(function (_a) {
|
|
11907
|
+
var key = _a.key, title = _a.title;
|
|
11908
|
+
return ({
|
|
11909
|
+
id: key,
|
|
11910
|
+
value: key,
|
|
11911
|
+
label: title,
|
|
11912
|
+
});
|
|
11913
|
+
}) }) }, selectedTargetKeys)] }))] }));
|
|
11914
|
+
};
|
|
11915
|
+
|
|
11916
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, Countdown, 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, Transfer, Trophy, theme };
|
|
11844
11917
|
//# sourceMappingURL=index.es.js.map
|