@typeolymp/ui-components 1.19.39 → 1.20.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/molecules/Popup/index.d.ts +1 -1
- package/build/components/organisms/Keyboard/Legacy/Key/index.d.ts +8 -0
- package/build/components/organisms/Keyboard/Legacy/Key/styles.d.ts +1 -0
- package/build/components/organisms/Keyboard/Legacy/index.d.ts +14 -0
- package/build/components/organisms/Keyboard/Legacy/styles.d.ts +6 -0
- package/build/components/organisms/Keyboard/index.d.ts +8 -5
- package/build/components/organisms/Keyboard/stories.d.ts +4 -2
- package/build/components/organisms/Keyboard/styles.d.ts +6 -5
- package/build/index.es.js +491 -251
- package/build/index.es.js.map +1 -1
- package/build/index.js +491 -251
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -3440,14 +3440,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3440
3440
|
var React$2 = __importStar$2(React__default);
|
|
3441
3441
|
var react_1 = require$$1;
|
|
3442
3442
|
var helpers_1 = helpers$1;
|
|
3443
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3443
|
+
var beat = react_1.keyframes(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
3444
3444
|
var Loader = /** @class */ (function (_super) {
|
|
3445
3445
|
__extends$2(Loader, _super);
|
|
3446
3446
|
function Loader() {
|
|
3447
3447
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3448
3448
|
_this.style = function (i) {
|
|
3449
3449
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3450
|
-
return react_1.css(templateObject_2$
|
|
3450
|
+
return react_1.css(templateObject_2$F || (templateObject_2$F = __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");
|
|
3451
3451
|
};
|
|
3452
3452
|
return _this;
|
|
3453
3453
|
}
|
|
@@ -3462,9 +3462,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3462
3462
|
return Loader;
|
|
3463
3463
|
}(React$2.PureComponent));
|
|
3464
3464
|
var _default$1 = BeatLoader.default = Loader;
|
|
3465
|
-
var templateObject_1$
|
|
3465
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
3466
3466
|
|
|
3467
|
-
var Wrapper$a = styled.div(templateObject_1$
|
|
3467
|
+
var Wrapper$a = styled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
3468
3468
|
var size = _a.size;
|
|
3469
3469
|
return theme.icon[size] || theme.icon.medium;
|
|
3470
3470
|
}, function (_a) {
|
|
@@ -3522,7 +3522,7 @@ var Wrapper$a = styled.div(templateObject_1$W || (templateObject_1$W = __makeTem
|
|
|
3522
3522
|
return theme.colors.lightGray.base;
|
|
3523
3523
|
}
|
|
3524
3524
|
});
|
|
3525
|
-
var templateObject_1$
|
|
3525
|
+
var templateObject_1$X;
|
|
3526
3526
|
|
|
3527
3527
|
var icons = {
|
|
3528
3528
|
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" })),
|
|
@@ -3571,10 +3571,11 @@ var icons = {
|
|
|
3571
3571
|
login: (jsxs("g", __assign$2({ style: { transform: "rotate(270deg)", transformOrigin: "50%" } }, { children: [jsx$1("path", { d: "M22.6 14.6c-.7 0-1.3.6-1.3 1.3v4H2.7v-4c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3v5.2c0 .7.6 1.3 1.3 1.3h21.2c.7 0 1.3-.6 1.3-1.3v-5.2c0-.8-.6-1.3-1.3-1.3z" }), jsx$1("path", { d: "M11.2 16.7c.1.1.2.2.4.3h.4c.2 0 .3 0 .5-.1.1-.1.3-.1.4-.3l4.9-4.9c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-2.8 2.8v-10c0-.7-.5-1.2-1.2-1.2s-1.2.5-1.2 1.2v10L8 10.1c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.9 4.9z" })] }))),
|
|
3572
3572
|
logout: (jsxs("g", __assign$2({ style: { transform: "rotate(90deg)", transformOrigin: "50%" } }, { children: [jsx$1("path", { d: "M22.6 14.6c-.7 0-1.3.6-1.3 1.3v4H2.7v-4c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3v5.2c0 .7.6 1.3 1.3 1.3h21.2c.7 0 1.3-.6 1.3-1.3v-5.2c0-.8-.6-1.3-1.3-1.3z" }), jsx$1("path", { d: "M12.8 2.1c-.1-.1-.2-.2-.4-.3-.1-.1-.3-.1-.5-.1s-.3 0-.5.1c-.1.1-.3.1-.4.3L6.3 7c-.5.5-.5 1.2 0 1.7s1.2.5 1.7 0l2.8-2.8v10c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-10L16 8.7c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.9-4.9z" })] }))),
|
|
3573
3573
|
edit: (jsx$1("path", { d: "M14.3 5.6c-.3-.3-.8-.3-1.2 0L2.4 16.3c-.1.1-.1.2-.2.2v.2L1 22c-.1.3 0 .6.2.8.2.1.4.2.6.2H2l5.3-1.2c.1 0 .1 0 .2-.1h.1l.1-.1 10.7-10.7c.2-.2.2-.4.2-.6s-.1-.4-.2-.6l-4.1-4.1zM22.8 5.3l-4.1-4.1c-.3-.3-.8-.3-1.2 0l-2.4 2.4c-.2.2-.2.4-.2.6s.1.4.2.6l4.1 4.1c.2.2.4.2.6.2s.4-.1.6-.2l2.4-2.4c.1-.1.2-.4.2-.6s-.1-.4-.2-.6z" })),
|
|
3574
|
+
keyboard: (jsx$1("path", { d: "M23.5 7.4L16.7.6c-.6-.6-1.6-.6-2.1 0L6.1 8.9l-.5-.6c-.3-.3-.4-.7-.3-1.2.1-.4.3-.6.4-.7l2-2s.4-.5.6-1.1c.3-.9.1-1.8-.6-2.5L7.1.2c-.2-.2-.7-.2-.9 0-.2.2-.2.6 0 .9l.6.6c.3.3.4.7.3 1.2-.1.3-.3.6-.3.6l-2 2v.1s-.4.5-.6 1.1c-.4 1-.2 1.9.5 2.5l.5.5-4.8 4.8c-.6.6-.6 1.6 0 2.1l6.8 6.8c.6.6 1.6.6 2.1 0l14-14c.8-.5.8-1.5.2-2zm-5-2.7l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1l.8-.8c.3-.2.7-.2 1 0zm-8.9 9c-.3-.3-.3-.7 0-1l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8zm.1 2.4l-.7.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1l.8-.8c.3-.3.7-.3 1 0l.8.8c.2.2.2.7-.1 1zm2.2-4.8c-.3-.3-.3-.7 0-1l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8zm2.4-2.4c-.3-.3-.3-.7 0-1l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8zm0-5.8l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.2-.3-.7 0-1zm-2.4 2.4l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.2-.3-.7 0-1zM9.5 7.9l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1zm-2.4 2.4l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1zm-2.4 2.4l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1zm-1.6 4.2l-.8-.8c-.3-.3-.3-.7 0-1l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.3.3-.7.3-1 0zm2.4 2.4l-.8-.8c-.3-.3-.3-.7 0-1l.8-.8c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1l-.8.8c-.2.2-.7.2-1 0zm5.4.4l-.6.6-.2.2-.4.4-.2.2-.6.6c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1l.6-.6.2-.2.4-.4.2-.2.6-.6c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1zm7.2-7.2l-.4.4-.4.4-4 4-.4.4-.4.4c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1l.4-.4.4-.4 4-4 .4-.4.4-.4c.3-.3.7-.3 1 0l.8.8c.3.3.3.7 0 1zm3.6-3.6l-.6.6-.2.2-.4.4-.2.2-.6.6c-.3.3-.7.3-1 0l-.8-.8c-.3-.3-.3-.7 0-1l.6-.6.2-.2.4-.4.2-.2.6-.6c.3-.3.7-.3 1 0l.8.8c.3.3.3.8 0 1z" })),
|
|
3574
3575
|
};
|
|
3575
3576
|
var Icon = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3576
3577
|
|
|
3577
|
-
var StyledButton = styled.button(templateObject_1$
|
|
3578
|
+
var StyledButton = styled.button(templateObject_1$W || (templateObject_1$W = __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 svg {\n pointer-events: none;\n }\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 svg {\n pointer-events: none;\n }\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) {
|
|
3578
3579
|
var fluid = _a.fluid;
|
|
3579
3580
|
return (fluid ? "100%" : "fit-content");
|
|
3580
3581
|
}, function (_a) {
|
|
@@ -3628,11 +3629,11 @@ var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __m
|
|
|
3628
3629
|
? theme.button.medium.heightActive
|
|
3629
3630
|
: theme.button[size].heightActive;
|
|
3630
3631
|
});
|
|
3631
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3632
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$E || (templateObject_2$E = __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) {
|
|
3632
3633
|
var size = _a.size;
|
|
3633
3634
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3634
3635
|
});
|
|
3635
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
3636
|
+
var GhostButton = styled(StyledButton)(templateObject_3$g || (templateObject_3$g = __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) {
|
|
3636
3637
|
var size = _a.size;
|
|
3637
3638
|
return !size
|
|
3638
3639
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3648,23 +3649,23 @@ var GhostButton = styled(StyledButton)(templateObject_3$f || (templateObject_3$f
|
|
|
3648
3649
|
? theme.button.medium.marginTopActive
|
|
3649
3650
|
: theme.button[size].marginTopActive;
|
|
3650
3651
|
});
|
|
3651
|
-
var LoaderWrapper = styled.div(templateObject_4$
|
|
3652
|
+
var LoaderWrapper = styled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3652
3653
|
var width = _a.width;
|
|
3653
3654
|
return "".concat(width, "px");
|
|
3654
3655
|
}, function (_a) {
|
|
3655
3656
|
var size = _a.size;
|
|
3656
3657
|
return (size === "small" ? "3px" : "");
|
|
3657
3658
|
});
|
|
3658
|
-
var templateObject_1$
|
|
3659
|
+
var templateObject_1$W, templateObject_2$E, templateObject_3$g, templateObject_4$9;
|
|
3659
3660
|
|
|
3660
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
3661
|
+
var StyledSpacer = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n min-width: ", ";\n min-height: ", ";\n"], ["\n min-width: ", ";\n min-height: ", ";\n"])), function (_a) {
|
|
3661
3662
|
var horizontal = _a.horizontal;
|
|
3662
3663
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
3663
3664
|
}, function (_a) {
|
|
3664
3665
|
var vertical = _a.vertical;
|
|
3665
3666
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
3666
3667
|
});
|
|
3667
|
-
var templateObject_1$
|
|
3668
|
+
var templateObject_1$V;
|
|
3668
3669
|
|
|
3669
3670
|
var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
|
|
3670
3671
|
|
|
@@ -3712,7 +3713,7 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
3712
3713
|
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, {})) : (jsxs(Fragment$1, { children: [icon && renderIcon({ color: "white" }), jsx$1("span", { children: label })] })) })));
|
|
3713
3714
|
});
|
|
3714
3715
|
|
|
3715
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
3716
|
+
var StyledCheckbox = styled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
3716
3717
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3717
3718
|
if (disabled)
|
|
3718
3719
|
return theme.colors.lightGray.darker;
|
|
@@ -3733,7 +3734,7 @@ var StyledCheckbox = styled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
3733
3734
|
return theme.colors.green.base;
|
|
3734
3735
|
return theme.colors.lightGray.darker;
|
|
3735
3736
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3736
|
-
var templateObject_1$
|
|
3737
|
+
var templateObject_1$U;
|
|
3737
3738
|
|
|
3738
3739
|
var Checkbox = function (props) {
|
|
3739
3740
|
var _a;
|
|
@@ -3766,7 +3767,7 @@ var Checkbox = function (props) {
|
|
|
3766
3767
|
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 })] })));
|
|
3767
3768
|
};
|
|
3768
3769
|
|
|
3769
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
3770
|
+
var Wrapper$9 = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3770
3771
|
var size = _a.size;
|
|
3771
3772
|
switch (size) {
|
|
3772
3773
|
case "small":
|
|
@@ -3789,7 +3790,7 @@ var Wrapper$9 = styled.div(templateObject_1$S || (templateObject_1$S = __makeTem
|
|
|
3789
3790
|
return "27px";
|
|
3790
3791
|
}
|
|
3791
3792
|
});
|
|
3792
|
-
var templateObject_1$
|
|
3793
|
+
var templateObject_1$T;
|
|
3793
3794
|
|
|
3794
3795
|
var parsers = {};
|
|
3795
3796
|
|
|
@@ -4185,7 +4186,7 @@ var flags = {
|
|
|
4185
4186
|
};
|
|
4186
4187
|
var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[parsers.getCountryCodeByLocale(props.locale)] }))); };
|
|
4187
4188
|
|
|
4188
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
4189
|
+
var StyledHeading = styled.span(templateObject_1$S || (templateObject_1$S = __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 text-decoration: ", ";\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 text-decoration: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
4189
4190
|
var type = _a.type;
|
|
4190
4191
|
return theme.heading[type].fontSize;
|
|
4191
4192
|
}, function (_a) {
|
|
@@ -4212,14 +4213,14 @@ var StyledHeading = styled.span(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
4212
4213
|
var decoration = _a.decoration;
|
|
4213
4214
|
return decoration;
|
|
4214
4215
|
});
|
|
4215
|
-
var templateObject_1$
|
|
4216
|
+
var templateObject_1$S;
|
|
4216
4217
|
|
|
4217
4218
|
var Heading = function (props) {
|
|
4218
4219
|
var element = !!props.as ? props.as : props.type;
|
|
4219
4220
|
return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
4220
4221
|
};
|
|
4221
4222
|
|
|
4222
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
4223
|
+
var Wrapper$8 = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
4223
4224
|
var size = _a.size;
|
|
4224
4225
|
switch (size) {
|
|
4225
4226
|
case "tiny":
|
|
@@ -4233,7 +4234,7 @@ var Wrapper$8 = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTem
|
|
|
4233
4234
|
return "118px";
|
|
4234
4235
|
}
|
|
4235
4236
|
});
|
|
4236
|
-
var templateObject_1$
|
|
4237
|
+
var templateObject_1$R;
|
|
4237
4238
|
|
|
4238
4239
|
var illustrations = {
|
|
4239
4240
|
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" })] }))),
|
|
@@ -4255,7 +4256,7 @@ var illustrations = {
|
|
|
4255
4256
|
};
|
|
4256
4257
|
var Illustration = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4257
4258
|
|
|
4258
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
4259
|
+
var StyledParagraph = styled.p(templateObject_1$Q || (templateObject_1$Q = __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 text-decoration: ", ";\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 text-decoration: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4259
4260
|
var size = _a.size;
|
|
4260
4261
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4261
4262
|
}, function (_a) {
|
|
@@ -4293,10 +4294,10 @@ var StyledParagraph = styled.p(templateObject_1$P || (templateObject_1$P = __mak
|
|
|
4293
4294
|
var decoration = _a.decoration;
|
|
4294
4295
|
return decoration;
|
|
4295
4296
|
});
|
|
4296
|
-
var templateObject_1$
|
|
4297
|
+
var templateObject_1$Q;
|
|
4297
4298
|
|
|
4298
|
-
var Container$
|
|
4299
|
-
var InputIconWrapper = styled.div(templateObject_2$
|
|
4299
|
+
var Container$r = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4300
|
+
var InputIconWrapper = styled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"])), function (_a) {
|
|
4300
4301
|
var size = _a.size;
|
|
4301
4302
|
switch (size) {
|
|
4302
4303
|
case "small":
|
|
@@ -4339,7 +4340,7 @@ var InputIconWrapper = styled.div(templateObject_2$C || (templateObject_2$C = __
|
|
|
4339
4340
|
return "24px";
|
|
4340
4341
|
}
|
|
4341
4342
|
});
|
|
4342
|
-
var StyledInput = styled.input(templateObject_3$
|
|
4343
|
+
var StyledInput = styled.input(templateObject_3$f || (templateObject_3$f = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: ", ";\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: ", ";\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) {
|
|
4343
4344
|
var size = _a.size;
|
|
4344
4345
|
switch (size) {
|
|
4345
4346
|
case "small":
|
|
@@ -4361,13 +4362,13 @@ var StyledInput = styled.input(templateObject_3$e || (templateObject_3$e = __mak
|
|
|
4361
4362
|
var disabled = _a.disabled;
|
|
4362
4363
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4363
4364
|
}, 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));
|
|
4364
|
-
var HelperContainer = styled.div(templateObject_4$
|
|
4365
|
-
var fadeIn = keyframes$1(templateObject_5$
|
|
4366
|
-
var Helper = styled(StyledParagraph)(templateObject_6$
|
|
4365
|
+
var HelperContainer = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
4366
|
+
var fadeIn = keyframes$1(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject$1(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
4367
|
+
var Helper = styled(StyledParagraph)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject$1(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
4367
4368
|
var isOk = _a.isOk;
|
|
4368
4369
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4369
4370
|
}, fadeIn);
|
|
4370
|
-
var templateObject_1$
|
|
4371
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$f, templateObject_4$8, templateObject_5$4, templateObject_6$4;
|
|
4371
4372
|
|
|
4372
4373
|
var expressions = {};
|
|
4373
4374
|
|
|
@@ -4530,7 +4531,7 @@ var PasswordInput = function (props) {
|
|
|
4530
4531
|
if (props.onKeyPress)
|
|
4531
4532
|
props.onKeyPress(e);
|
|
4532
4533
|
};
|
|
4533
|
-
return (jsxs(Container$
|
|
4534
|
+
return (jsxs(Container$r, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { 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]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
|
|
4534
4535
|
};
|
|
4535
4536
|
|
|
4536
4537
|
function toInteger$2(dirtyNumber) {
|
|
@@ -8032,7 +8033,7 @@ var SearchInput = function (props) {
|
|
|
8032
8033
|
if (value.length <= 0)
|
|
8033
8034
|
onSearch();
|
|
8034
8035
|
};
|
|
8035
|
-
return (jsx$1(Container$
|
|
8036
|
+
return (jsx$1(Container$r, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, rest, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
|
|
8036
8037
|
};
|
|
8037
8038
|
|
|
8038
8039
|
var Input = function (props) {
|
|
@@ -8048,7 +8049,7 @@ Input.Search = SearchInput;
|
|
|
8048
8049
|
|
|
8049
8050
|
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" })] }))] }))); };
|
|
8050
8051
|
|
|
8051
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
8052
|
+
var Wrapper$7 = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
8052
8053
|
var size = _a.size;
|
|
8053
8054
|
switch (size) {
|
|
8054
8055
|
default:
|
|
@@ -8058,7 +8059,7 @@ var Wrapper$7 = styled.div(templateObject_1$N || (templateObject_1$N = __makeTem
|
|
|
8058
8059
|
return "116px";
|
|
8059
8060
|
}
|
|
8060
8061
|
});
|
|
8061
|
-
var templateObject_1$
|
|
8062
|
+
var templateObject_1$O;
|
|
8062
8063
|
|
|
8063
8064
|
var medals = {
|
|
8064
8065
|
small: {
|
|
@@ -8074,11 +8075,11 @@ var medals = {
|
|
|
8074
8075
|
};
|
|
8075
8076
|
var Medal = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
8076
8077
|
|
|
8077
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
8078
|
+
var Wrapper$6 = styled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
8078
8079
|
var disabled = _a.disabled;
|
|
8079
8080
|
return (disabled ? "49.5px" : "");
|
|
8080
8081
|
});
|
|
8081
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
8082
|
+
var StyledInputNumber = styled.input(templateObject_2$C || (templateObject_2$C = __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) {
|
|
8082
8083
|
var disabled = _a.disabled;
|
|
8083
8084
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8084
8085
|
}, function (_a) {
|
|
@@ -8091,7 +8092,7 @@ var StyledInputNumber = styled.input(templateObject_2$B || (templateObject_2$B =
|
|
|
8091
8092
|
var disabled = _a.disabled;
|
|
8092
8093
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8093
8094
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8094
|
-
var templateObject_1$
|
|
8095
|
+
var templateObject_1$N, templateObject_2$C;
|
|
8095
8096
|
|
|
8096
8097
|
var Number$1 = function (props) {
|
|
8097
8098
|
var inputRef = useRef(null);
|
|
@@ -8135,7 +8136,7 @@ var Number$1 = function (props) {
|
|
|
8135
8136
|
|
|
8136
8137
|
var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
8137
8138
|
|
|
8138
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
8139
|
+
var StyledRadio = styled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
8139
8140
|
var checked = _a.checked, disabled = _a.disabled;
|
|
8140
8141
|
if (disabled)
|
|
8141
8142
|
return theme.colors.lightGray.darker;
|
|
@@ -8163,7 +8164,7 @@ var StyledRadio = styled.div(templateObject_1$L || (templateObject_1$L = __makeT
|
|
|
8163
8164
|
return theme.colors.green.base;
|
|
8164
8165
|
return "";
|
|
8165
8166
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8166
|
-
var templateObject_1$
|
|
8167
|
+
var templateObject_1$M;
|
|
8167
8168
|
|
|
8168
8169
|
var Radio = function (props) {
|
|
8169
8170
|
var _a, _b;
|
|
@@ -8195,7 +8196,7 @@ var Radio = function (props) {
|
|
|
8195
8196
|
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 }) })));
|
|
8196
8197
|
};
|
|
8197
8198
|
|
|
8198
|
-
var StyledRange = styled.div(templateObject_1$
|
|
8199
|
+
var StyledRange = styled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
8199
8200
|
var value = _a.value, disabled = _a.disabled;
|
|
8200
8201
|
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 )");
|
|
8201
8202
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -8205,7 +8206,7 @@ var StyledRange = styled.div(templateObject_1$K || (templateObject_1$K = __makeT
|
|
|
8205
8206
|
var disabled = _a.disabled;
|
|
8206
8207
|
return disabled ? "not-allowed" : "pointer";
|
|
8207
8208
|
});
|
|
8208
|
-
var templateObject_1$
|
|
8209
|
+
var templateObject_1$L;
|
|
8209
8210
|
|
|
8210
8211
|
var Range = function (props) {
|
|
8211
8212
|
var _a;
|
|
@@ -8234,11 +8235,11 @@ var Range = function (props) {
|
|
|
8234
8235
|
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 }) })));
|
|
8235
8236
|
};
|
|
8236
8237
|
|
|
8237
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
8238
|
+
var Wrapper$5 = styled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
8238
8239
|
var disabled = _a.disabled;
|
|
8239
8240
|
return (disabled ? "not-allowed" : "pointer");
|
|
8240
8241
|
});
|
|
8241
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
8242
|
+
var StyledSelect = styled.select(templateObject_2$B || (templateObject_2$B = __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 13px 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 13px 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) {
|
|
8242
8243
|
var disabled = _a.disabled;
|
|
8243
8244
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8244
8245
|
}, function (_a) {
|
|
@@ -8251,7 +8252,7 @@ var StyledSelect = styled.select(templateObject_2$A || (templateObject_2$A = __m
|
|
|
8251
8252
|
var isChanged = _a.isChanged;
|
|
8252
8253
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8253
8254
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8254
|
-
var templateObject_1$
|
|
8255
|
+
var templateObject_1$K, templateObject_2$B;
|
|
8255
8256
|
|
|
8256
8257
|
var Select = function (props) {
|
|
8257
8258
|
var _a;
|
|
@@ -8273,7 +8274,7 @@ var Select = function (props) {
|
|
|
8273
8274
|
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] }))] }));
|
|
8274
8275
|
};
|
|
8275
8276
|
|
|
8276
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
8277
|
+
var StyledSubheading = styled.p(templateObject_1$J || (templateObject_1$J = __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) {
|
|
8277
8278
|
var size = _a.size;
|
|
8278
8279
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
8279
8280
|
}, function (_a) {
|
|
@@ -8301,11 +8302,11 @@ var StyledSubheading = styled.p(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
8301
8302
|
return theme.colors.darkGray.dark;
|
|
8302
8303
|
}
|
|
8303
8304
|
});
|
|
8304
|
-
var templateObject_1$
|
|
8305
|
+
var templateObject_1$J;
|
|
8305
8306
|
|
|
8306
8307
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
8307
8308
|
|
|
8308
|
-
var Container$
|
|
8309
|
+
var Container$q = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\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: ", ";\n border: 1px solid;\n border-color: ", ";\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"])), function (_a) {
|
|
8309
8310
|
var color = _a.color;
|
|
8310
8311
|
if (!color)
|
|
8311
8312
|
return theme.colors.lightGray.base;
|
|
@@ -8326,14 +8327,14 @@ var Container$p = styled.div(templateObject_1$H || (templateObject_1$H = __makeT
|
|
|
8326
8327
|
return theme.colors.darkGray.light;
|
|
8327
8328
|
return theme.colors[color].darker;
|
|
8328
8329
|
});
|
|
8329
|
-
var templateObject_1$
|
|
8330
|
+
var templateObject_1$I;
|
|
8330
8331
|
|
|
8331
8332
|
var Tag = function (_a) {
|
|
8332
8333
|
var color = _a.color, children = _a.children;
|
|
8333
|
-
return jsx$1(Container$
|
|
8334
|
+
return jsx$1(Container$q, __assign$2({ color: color }, { children: children }));
|
|
8334
8335
|
};
|
|
8335
8336
|
|
|
8336
|
-
var StyledTextarea = styled.textarea(templateObject_1$
|
|
8337
|
+
var StyledTextarea = styled.textarea(templateObject_1$H || (templateObject_1$H = __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) {
|
|
8337
8338
|
var disabled = _a.disabled;
|
|
8338
8339
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8339
8340
|
}, function (_a) {
|
|
@@ -8346,7 +8347,7 @@ var StyledTextarea = styled.textarea(templateObject_1$G || (templateObject_1$G =
|
|
|
8346
8347
|
var disabled = _a.disabled;
|
|
8347
8348
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8348
8349
|
}, 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));
|
|
8349
|
-
var templateObject_1$
|
|
8350
|
+
var templateObject_1$H;
|
|
8350
8351
|
|
|
8351
8352
|
var Textarea = function (props) {
|
|
8352
8353
|
var onChange = function (e) {
|
|
@@ -8356,7 +8357,7 @@ var Textarea = function (props) {
|
|
|
8356
8357
|
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
8357
8358
|
};
|
|
8358
8359
|
|
|
8359
|
-
var Container$
|
|
8360
|
+
var Container$p = styled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
8360
8361
|
var disabled = _a.disabled;
|
|
8361
8362
|
return (disabled ? "not-allowed" : "pointer");
|
|
8362
8363
|
}, function (_a) {
|
|
@@ -8374,7 +8375,7 @@ var Container$o = styled.div(templateObject_1$F || (templateObject_1$F = __makeT
|
|
|
8374
8375
|
var disabled = _a.disabled;
|
|
8375
8376
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
8376
8377
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8377
|
-
var templateObject_1$
|
|
8378
|
+
var templateObject_1$G;
|
|
8378
8379
|
|
|
8379
8380
|
var Toggle = function (props) {
|
|
8380
8381
|
var _a;
|
|
@@ -8402,10 +8403,10 @@ var Toggle = function (props) {
|
|
|
8402
8403
|
props.onChange(newValue);
|
|
8403
8404
|
}
|
|
8404
8405
|
};
|
|
8405
|
-
return (jsx$1(Container$
|
|
8406
|
+
return (jsx$1(Container$p, __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 }) })));
|
|
8406
8407
|
};
|
|
8407
8408
|
|
|
8408
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
8409
|
+
var Wrapper$4 = styled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
8409
8410
|
var level = _a.level;
|
|
8410
8411
|
switch (level) {
|
|
8411
8412
|
case 1:
|
|
@@ -8416,7 +8417,7 @@ var Wrapper$4 = styled.div(templateObject_1$E || (templateObject_1$E = __makeTem
|
|
|
8416
8417
|
return "70px";
|
|
8417
8418
|
}
|
|
8418
8419
|
});
|
|
8419
|
-
var templateObject_1$
|
|
8420
|
+
var templateObject_1$F;
|
|
8420
8421
|
|
|
8421
8422
|
var trophies = {
|
|
8422
8423
|
1: {
|
|
@@ -8452,7 +8453,7 @@ var trophies = {
|
|
|
8452
8453
|
};
|
|
8453
8454
|
var Trophy = function (props) { return (jsx$1(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
8454
8455
|
|
|
8455
|
-
var Container$
|
|
8456
|
+
var Container$o = styled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
8456
8457
|
var type = _a.type;
|
|
8457
8458
|
switch (type) {
|
|
8458
8459
|
case "success":
|
|
@@ -8473,7 +8474,7 @@ var Container$n = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8473
8474
|
return theme.colors.blue.base;
|
|
8474
8475
|
}
|
|
8475
8476
|
});
|
|
8476
|
-
var Action = styled.div(templateObject_2$
|
|
8477
|
+
var Action = styled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject$1(["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"], ["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
8477
8478
|
var type = _a.type;
|
|
8478
8479
|
switch (type) {
|
|
8479
8480
|
default:
|
|
@@ -8485,7 +8486,7 @@ var Action = styled.div(templateObject_2$z || (templateObject_2$z = __makeTempla
|
|
|
8485
8486
|
return theme.colors.blue.dark;
|
|
8486
8487
|
}
|
|
8487
8488
|
});
|
|
8488
|
-
var templateObject_1$
|
|
8489
|
+
var templateObject_1$E, templateObject_2$A;
|
|
8489
8490
|
|
|
8490
8491
|
var Alert = function (props) {
|
|
8491
8492
|
var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8505,10 +8506,10 @@ var Alert = function (props) {
|
|
|
8505
8506
|
icon = "infoCircle";
|
|
8506
8507
|
if (!isOpen)
|
|
8507
8508
|
return null;
|
|
8508
|
-
return (jsxs(Container$
|
|
8509
|
+
return (jsxs(Container$o, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: icon, color: color }), jsx$1(Paragraph, { children: props.message }), props.action && (jsx$1(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsx$1(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsx$1("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsx$1(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
|
|
8509
8510
|
};
|
|
8510
8511
|
|
|
8511
|
-
var StyledCard = styled.div(templateObject_1$
|
|
8512
|
+
var StyledCard = styled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
8512
8513
|
var bordered = _a.bordered;
|
|
8513
8514
|
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
8514
8515
|
}, function (_a) {
|
|
@@ -8520,12 +8521,12 @@ var StyledCard = styled.div(templateObject_1$C || (templateObject_1$C = __makeTe
|
|
|
8520
8521
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8521
8522
|
: "";
|
|
8522
8523
|
});
|
|
8523
|
-
var Ellipse = styled.div(templateObject_2$
|
|
8524
|
+
var Ellipse = styled.div(templateObject_2$z || (templateObject_2$z = __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) {
|
|
8524
8525
|
var color = _a.color;
|
|
8525
8526
|
return color ? theme.colors[color].light : "";
|
|
8526
8527
|
});
|
|
8527
|
-
var Content = styled.div(templateObject_3$
|
|
8528
|
-
var templateObject_1$
|
|
8528
|
+
var Content = styled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
8529
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$e;
|
|
8529
8530
|
|
|
8530
8531
|
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 })] }))); };
|
|
8531
8532
|
|
|
@@ -14774,14 +14775,14 @@ htmlReactParser.Element;
|
|
|
14774
14775
|
htmlReactParser.ProcessingInstruction;
|
|
14775
14776
|
htmlReactParser.Text;
|
|
14776
14777
|
|
|
14777
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
14778
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
14779
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
14780
|
-
var Label$b = styled(StyledParagraph)(templateObject_4$
|
|
14778
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
14779
|
+
var CheckboxContainer = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14780
|
+
var CheckboxWrapper = styled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
14781
|
+
var Label$b = styled(StyledParagraph)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
14781
14782
|
var weight = _a.weight;
|
|
14782
14783
|
return weight || 500;
|
|
14783
14784
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14784
|
-
var templateObject_1$
|
|
14785
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$d, templateObject_4$7;
|
|
14785
14786
|
|
|
14786
14787
|
var Checkboxes = function (props) {
|
|
14787
14788
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14804,12 +14805,12 @@ var Checkboxes = function (props) {
|
|
|
14804
14805
|
}) })] }));
|
|
14805
14806
|
};
|
|
14806
14807
|
|
|
14807
|
-
var Container$
|
|
14808
|
-
var Item = styled.div(templateObject_2$
|
|
14808
|
+
var Container$n = styled.div(templateObject_1$B || (templateObject_1$B = __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);
|
|
14809
|
+
var Item = styled.div(templateObject_2$x || (templateObject_2$x = __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, > div:last-child {\n display: ", ";\n margin: 0;\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, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
14809
14810
|
var isOpen = _a.isOpen;
|
|
14810
14811
|
return (isOpen ? "" : "none");
|
|
14811
14812
|
}, theme.colors.lightGray.dark);
|
|
14812
|
-
var templateObject_1$
|
|
14813
|
+
var templateObject_1$B, templateObject_2$x;
|
|
14813
14814
|
|
|
14814
14815
|
var Collapse = function (props) {
|
|
14815
14816
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14821,18 +14822,18 @@ var Collapse = function (props) {
|
|
|
14821
14822
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
14822
14823
|
}
|
|
14823
14824
|
};
|
|
14824
|
-
return (jsx$1(Container$
|
|
14825
|
+
return (jsx$1(Container$n, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
14825
14826
|
var isOpen = openItems.includes(index);
|
|
14826
14827
|
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", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
14827
14828
|
}) })));
|
|
14828
14829
|
};
|
|
14829
14830
|
|
|
14830
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
14831
|
-
var Value = styled.div(templateObject_2$
|
|
14831
|
+
var Wrapper$3 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14832
|
+
var Value = styled.div(templateObject_2$w || (templateObject_2$w = __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) {
|
|
14832
14833
|
var contrast = _a.contrast;
|
|
14833
14834
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14834
14835
|
}, theme.colors.darkGray.base);
|
|
14835
|
-
var templateObject_1$
|
|
14836
|
+
var templateObject_1$A, templateObject_2$w;
|
|
14836
14837
|
|
|
14837
14838
|
var Countdown = function (_a) {
|
|
14838
14839
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14859,20 +14860,20 @@ var Countdown = function (_a) {
|
|
|
14859
14860
|
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 })) }))] }));
|
|
14860
14861
|
};
|
|
14861
14862
|
|
|
14862
|
-
var Container$
|
|
14863
|
-
var Data = styled.div(templateObject_2$
|
|
14864
|
-
var templateObject_1$
|
|
14863
|
+
var Container$m = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"], ["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.light, theme.colors.blue.base);
|
|
14864
|
+
var Data = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
|
|
14865
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14865
14866
|
|
|
14866
14867
|
var DataSummary = function (_a) {
|
|
14867
14868
|
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
14868
|
-
return (jsx$1(Fragment$1, { children: jsxs(Container$
|
|
14869
|
+
return (jsx$1(Fragment$1, { children: jsxs(Container$m, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsx$1("div", __assign$2({ onClick: onEdit }, { children: jsx$1(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsx$1(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
|
|
14869
14870
|
return item instanceof Object ? (jsxs("div", { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value, "-").concat(index))) : (jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item }), "".concat(item, "-").concat(index)));
|
|
14870
14871
|
}) })] }) }));
|
|
14871
14872
|
};
|
|
14872
14873
|
|
|
14873
|
-
var Container$
|
|
14874
|
-
var Label$a = styled(StyledParagraph)(templateObject_2$
|
|
14875
|
-
var templateObject_1$
|
|
14874
|
+
var Container$l = styled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
14875
|
+
var Label$a = styled(StyledParagraph)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
14876
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14876
14877
|
|
|
14877
14878
|
var DateInputField = function (props) {
|
|
14878
14879
|
var onChange = function (value) {
|
|
@@ -14883,7 +14884,7 @@ var DateInputField = function (props) {
|
|
|
14883
14884
|
if (props.onBlur)
|
|
14884
14885
|
props.onBlur(props.name);
|
|
14885
14886
|
};
|
|
14886
|
-
return (jsxs(Container$
|
|
14887
|
+
return (jsxs(Container$l, { children: [jsx$1(Label$a, __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 })] }));
|
|
14887
14888
|
};
|
|
14888
14889
|
|
|
14889
14890
|
var generateRandomString = function (length) {
|
|
@@ -14896,8 +14897,8 @@ var generateRandomString = function (length) {
|
|
|
14896
14897
|
return string;
|
|
14897
14898
|
};
|
|
14898
14899
|
|
|
14899
|
-
var ButtonWrapper$1 = styled.div(templateObject_1$
|
|
14900
|
-
var Container$
|
|
14900
|
+
var ButtonWrapper$1 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"], ["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"])));
|
|
14901
|
+
var Container$k = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"], ["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"])), function (_a) {
|
|
14901
14902
|
var isVisible = _a.isVisible;
|
|
14902
14903
|
return (isVisible ? "100%" : "0%");
|
|
14903
14904
|
}, function (_a) {
|
|
@@ -14910,8 +14911,8 @@ var Container$j = styled.div(templateObject_2$s || (templateObject_2$s = __makeT
|
|
|
14910
14911
|
var isVisible = _a.isVisible;
|
|
14911
14912
|
return (isVisible ? "all" : "none");
|
|
14912
14913
|
});
|
|
14913
|
-
var MenuItem = styled.div(templateObject_3$
|
|
14914
|
-
var templateObject_1$
|
|
14914
|
+
var MenuItem = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\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.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
14915
|
+
var templateObject_1$x, templateObject_2$t, templateObject_3$c;
|
|
14915
14916
|
|
|
14916
14917
|
var DropdownButton = function (props) {
|
|
14917
14918
|
return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
|
|
@@ -14930,22 +14931,31 @@ var Dropdown = function (_a) {
|
|
|
14930
14931
|
? setIsVisible(false)
|
|
14931
14932
|
: null;
|
|
14932
14933
|
}, [isVisible, dropwdownRef]);
|
|
14934
|
+
var handleScroll = useCallback(function () { return setIsVisible(false); }, []);
|
|
14933
14935
|
useEffect(function () {
|
|
14934
14936
|
document.addEventListener("mousedown", handleClickOutside);
|
|
14937
|
+
document.addEventListener("scroll", handleScroll);
|
|
14935
14938
|
return function () {
|
|
14936
14939
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
14940
|
+
document.removeEventListener("scroll", handleScroll);
|
|
14937
14941
|
};
|
|
14938
|
-
}, [handleClickOutside]);
|
|
14942
|
+
}, [handleClickOutside, handleScroll]);
|
|
14939
14943
|
var triggerDropdown = useCallback(function () {
|
|
14940
14944
|
if (props.disabled)
|
|
14941
14945
|
return;
|
|
14942
14946
|
var el = document.getElementById(triggerId);
|
|
14943
14947
|
if (el) {
|
|
14944
|
-
var _a = el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left;
|
|
14948
|
+
var _a = el.getBoundingClientRect(), bottom = _a.bottom, top_1 = _a.top, left = _a.left;
|
|
14945
14949
|
var width = el.offsetWidth;
|
|
14946
|
-
var
|
|
14947
|
-
var
|
|
14948
|
-
|
|
14950
|
+
var xPosition = left + width > window.innerWidth / 2 ? "right" : "left";
|
|
14951
|
+
var yPosition = window.innerHeight - (bottom + yOffset) <
|
|
14952
|
+
dropwdownRef.current.offsetHeight
|
|
14953
|
+
? "top"
|
|
14954
|
+
: "bottom";
|
|
14955
|
+
var y = yPosition === "bottom"
|
|
14956
|
+
? bottom + yOffset
|
|
14957
|
+
: top_1 - dropwdownRef.current.offsetHeight - yOffset - 4;
|
|
14958
|
+
var x = xPosition === "left"
|
|
14949
14959
|
? left
|
|
14950
14960
|
: left + width - dropwdownRef.current.offsetWidth;
|
|
14951
14961
|
setPosition({ x: x, y: y });
|
|
@@ -14966,7 +14976,7 @@ var Dropdown = function (_a) {
|
|
|
14966
14976
|
return React__default.cloneElement(child, props_1);
|
|
14967
14977
|
}
|
|
14968
14978
|
});
|
|
14969
|
-
return (jsxs(Fragment$1, { children: [children, jsx$1(Container$
|
|
14979
|
+
return (jsxs(Fragment$1, { children: [children, jsx$1(Container$k, __assign$2({}, position, { isVisible: isVisible && menu.length > 0, ref: dropwdownRef, onMouseLeave: function () { return setIsVisible(false); } }, { children: menu.map(function (_a, index) {
|
|
14970
14980
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14971
14981
|
return (jsxs(MenuItem, __assign$2({ onClick: onClick }, { children: [icon && jsx$1(Icon, { type: icon, size: "tiny" }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: label }))] }), "".concat(label, "-").concat(index)));
|
|
14972
14982
|
}) }))] }));
|
|
@@ -17490,8 +17500,8 @@ function reducer$1(state, action) {
|
|
|
17490
17500
|
|
|
17491
17501
|
function noop$3() {}
|
|
17492
17502
|
|
|
17493
|
-
var Container$
|
|
17494
|
-
var DropZone = styled.div(templateObject_2$
|
|
17503
|
+
var Container$j = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"])));
|
|
17504
|
+
var DropZone = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
17495
17505
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17496
17506
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17497
17507
|
if (isDragAccept)
|
|
@@ -17510,8 +17520,8 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
|
|
|
17510
17520
|
else
|
|
17511
17521
|
return theme.colors.lightGray.base;
|
|
17512
17522
|
});
|
|
17513
|
-
var FileList = styled.div(templateObject_3$
|
|
17514
|
-
var templateObject_1$
|
|
17523
|
+
var FileList = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
17524
|
+
var templateObject_1$w, templateObject_2$s, templateObject_3$b;
|
|
17515
17525
|
|
|
17516
17526
|
var FileUpload = function (_a) {
|
|
17517
17527
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17524,14 +17534,14 @@ var FileUpload = function (_a) {
|
|
|
17524
17534
|
// Max number of files: 1
|
|
17525
17535
|
maxFiles: 1,
|
|
17526
17536
|
}), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
|
|
17527
|
-
return (jsx$1(Fragment$1, { children: jsxs(Container$
|
|
17537
|
+
return (jsx$1(Fragment$1, { children: jsxs(Container$j, { children: [jsxs(DropZone, __assign$2({}, getRootProps({
|
|
17528
17538
|
isDragActive: isDragActive,
|
|
17529
17539
|
isDragAccept: isDragAccept,
|
|
17530
17540
|
isDragReject: isDragReject,
|
|
17531
17541
|
}), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17532
17542
|
};
|
|
17533
17543
|
|
|
17534
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
17544
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$v || (templateObject_1$v = __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 pointer-events: none;\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 pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
17535
17545
|
var size = _a.size;
|
|
17536
17546
|
return (size === "small" ? "30px" : "40px");
|
|
17537
17547
|
}, function (_a) {
|
|
@@ -17550,7 +17560,7 @@ var StyledIconButton = styled(StyledButton)(templateObject_1$u || (templateObjec
|
|
|
17550
17560
|
var size = _a.size;
|
|
17551
17561
|
return (size === "small" ? "28px" : "38px");
|
|
17552
17562
|
});
|
|
17553
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
17563
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$r || (templateObject_2$r = __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) {
|
|
17554
17564
|
var size = _a.size;
|
|
17555
17565
|
return (size === "small" ? "30px" : "40px");
|
|
17556
17566
|
}, function (_a) {
|
|
@@ -17569,7 +17579,7 @@ var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_
|
|
|
17569
17579
|
var size = _a.size;
|
|
17570
17580
|
return (size === "small" ? "30px" : "40px");
|
|
17571
17581
|
});
|
|
17572
|
-
var templateObject_1$
|
|
17582
|
+
var templateObject_1$v, templateObject_2$r;
|
|
17573
17583
|
|
|
17574
17584
|
var IconButton = function (props) {
|
|
17575
17585
|
if (props.color === "white")
|
|
@@ -17577,9 +17587,9 @@ var IconButton = function (props) {
|
|
|
17577
17587
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17578
17588
|
};
|
|
17579
17589
|
|
|
17580
|
-
var Container$
|
|
17581
|
-
var Label$9 = styled(StyledParagraph)(templateObject_2$
|
|
17582
|
-
var templateObject_1$
|
|
17590
|
+
var Container$i = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
17591
|
+
var Label$9 = 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);
|
|
17592
|
+
var templateObject_1$u, templateObject_2$q;
|
|
17583
17593
|
|
|
17584
17594
|
var InputField = function (props) {
|
|
17585
17595
|
var onChange = function (value) {
|
|
@@ -17590,10 +17600,13 @@ var InputField = function (props) {
|
|
|
17590
17600
|
if (props.onBlur)
|
|
17591
17601
|
props.onBlur(props.name);
|
|
17592
17602
|
};
|
|
17593
|
-
return (jsxs(Container$
|
|
17603
|
+
return (jsxs(Container$i, { children: [jsx$1(Label$9, __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))); })] })))] }));
|
|
17594
17604
|
};
|
|
17595
17605
|
|
|
17596
|
-
var Container$
|
|
17606
|
+
var Container$h = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: ", ";\n min-height: 74px;\n max-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: ", ";\n min-height: 74px;\n max-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) {
|
|
17607
|
+
var char = _a.char;
|
|
17608
|
+
return (char.length === 1 ? "74px" : "");
|
|
17609
|
+
}, function (_a) {
|
|
17597
17610
|
var status = _a.status, color = _a.color;
|
|
17598
17611
|
switch (status) {
|
|
17599
17612
|
case "passed":
|
|
@@ -17637,23 +17650,23 @@ var Container$g = styled.div(templateObject_1$s || (templateObject_1$s = __makeT
|
|
|
17637
17650
|
return theme.colors.darkGray.light;
|
|
17638
17651
|
}
|
|
17639
17652
|
});
|
|
17640
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
17641
|
-
var templateObject_1$
|
|
17653
|
+
var CheckIconWrapper = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
17654
|
+
var templateObject_1$t, templateObject_2$p;
|
|
17642
17655
|
|
|
17643
|
-
var Key$
|
|
17656
|
+
var Key$2 = function (props) { return (jsxs(Container$h, __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: {
|
|
17644
17657
|
marginTop: "13px",
|
|
17645
17658
|
transform: "scale(2)",
|
|
17646
17659
|
} }, { 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 })))] }))); };
|
|
17647
17660
|
|
|
17648
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
17661
|
+
var Wrapper$2 = styled.a(templateObject_1$s || (templateObject_1$s = __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) {
|
|
17649
17662
|
var chevron = _a.chevron;
|
|
17650
17663
|
return (chevron === "left" ? "4px" : "");
|
|
17651
17664
|
}, function (_a) {
|
|
17652
17665
|
var chevron = _a.chevron;
|
|
17653
17666
|
return (chevron === "right" ? "4px" : "");
|
|
17654
17667
|
});
|
|
17655
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
17656
|
-
var templateObject_1$
|
|
17668
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$o || (templateObject_2$o = __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);
|
|
17669
|
+
var templateObject_1$s, templateObject_2$o;
|
|
17657
17670
|
|
|
17658
17671
|
var Link = function (props) {
|
|
17659
17672
|
var onClick = function (e) {
|
|
@@ -17665,15 +17678,15 @@ var Link = function (props) {
|
|
|
17665
17678
|
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" }))] })));
|
|
17666
17679
|
};
|
|
17667
17680
|
|
|
17668
|
-
var Container$
|
|
17681
|
+
var Container$g = styled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
17669
17682
|
var text = _a.text;
|
|
17670
17683
|
return (text ? "20px" : "");
|
|
17671
17684
|
});
|
|
17672
|
-
var templateObject_1$
|
|
17685
|
+
var templateObject_1$r;
|
|
17673
17686
|
|
|
17674
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
17687
|
+
var Loading = function (props) { return (jsxs(Container$g, __assign$2({}, props, { children: [jsx$1(_default$1, { 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 }))] }))] }))); };
|
|
17675
17688
|
|
|
17676
|
-
var Container$
|
|
17689
|
+
var Container$f = styled.div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
17677
17690
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17678
17691
|
if (dropdownIsVisible) {
|
|
17679
17692
|
switch (color) {
|
|
@@ -17686,8 +17699,8 @@ var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
17686
17699
|
}
|
|
17687
17700
|
return "";
|
|
17688
17701
|
});
|
|
17689
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
17690
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
17702
|
+
var SelectedLocaleWrapper = styled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
17703
|
+
var DropdownContainer = styled.div(templateObject_3$a || (templateObject_3$a = __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) {
|
|
17691
17704
|
var color = _a.color;
|
|
17692
17705
|
switch (color) {
|
|
17693
17706
|
default:
|
|
@@ -17697,8 +17710,8 @@ var DropdownContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
17697
17710
|
return theme.colors.lightGray.dark;
|
|
17698
17711
|
}
|
|
17699
17712
|
});
|
|
17700
|
-
var LocaleWrapper = styled.div(templateObject_4$
|
|
17701
|
-
var templateObject_1$
|
|
17713
|
+
var LocaleWrapper = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
17714
|
+
var templateObject_1$q, templateObject_2$n, templateObject_3$a, templateObject_4$6;
|
|
17702
17715
|
|
|
17703
17716
|
var LocaleSelect = function (props) {
|
|
17704
17717
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17707,22 +17720,22 @@ var LocaleSelect = function (props) {
|
|
|
17707
17720
|
setLocale(locale);
|
|
17708
17721
|
props.onChange(locale);
|
|
17709
17722
|
};
|
|
17710
|
-
return (jsxs(Container$
|
|
17723
|
+
return (jsxs(Container$f, __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: parsers.getNativeLanguageByLocale(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
|
|
17711
17724
|
.filter(function (l) { return l !== locale; })
|
|
17712
17725
|
.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: parsers.getNativeLanguageByLocale(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
17713
17726
|
};
|
|
17714
17727
|
|
|
17715
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
17716
|
-
var templateObject_1$
|
|
17728
|
+
var Wrapper$1 = styled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
17729
|
+
var templateObject_1$p;
|
|
17717
17730
|
|
|
17718
17731
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
17719
17732
|
|
|
17720
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
17733
|
+
var NotificationContainer = styled.div(templateObject_1$o || (templateObject_1$o = __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) {
|
|
17721
17734
|
var contrast = _a.contrast;
|
|
17722
17735
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17723
17736
|
});
|
|
17724
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
17725
|
-
var templateObject_1$
|
|
17737
|
+
var ButtonContainer = styled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
17738
|
+
var templateObject_1$o, templateObject_2$m;
|
|
17726
17739
|
|
|
17727
17740
|
var Notification = function (props) {
|
|
17728
17741
|
if (!props.isVisible)
|
|
@@ -17730,9 +17743,9 @@ var Notification = function (props) {
|
|
|
17730
17743
|
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) }))); }) }))] })));
|
|
17731
17744
|
};
|
|
17732
17745
|
|
|
17733
|
-
var Container$
|
|
17734
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
17735
|
-
var templateObject_1$
|
|
17746
|
+
var Container$e = styled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
17747
|
+
var Label$8 = styled(StyledParagraph)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17748
|
+
var templateObject_1$n, templateObject_2$l;
|
|
17736
17749
|
|
|
17737
17750
|
var NumberField = function (props) {
|
|
17738
17751
|
var onChange = function (value) {
|
|
@@ -17743,12 +17756,12 @@ var NumberField = function (props) {
|
|
|
17743
17756
|
if (props.onBlur)
|
|
17744
17757
|
props.onBlur(props.name);
|
|
17745
17758
|
};
|
|
17746
|
-
return (jsxs(Container$
|
|
17759
|
+
return (jsxs(Container$e, { children: [jsx$1(Label$8, __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 })] }));
|
|
17747
17760
|
};
|
|
17748
17761
|
|
|
17749
|
-
var Container$
|
|
17750
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
17751
|
-
var templateObject_1$
|
|
17762
|
+
var Container$d = 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"])));
|
|
17763
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17764
|
+
var templateObject_1$m, templateObject_2$k;
|
|
17752
17765
|
|
|
17753
17766
|
var PasswordInputField = function (props) {
|
|
17754
17767
|
var onChange = function (value) {
|
|
@@ -17764,10 +17777,10 @@ var PasswordInputField = function (props) {
|
|
|
17764
17777
|
if (props.onBlur)
|
|
17765
17778
|
props.onBlur(props.name);
|
|
17766
17779
|
};
|
|
17767
|
-
return (jsxs(Container$
|
|
17780
|
+
return (jsxs(Container$d, { children: [jsx$1(Label$7, __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 })] }));
|
|
17768
17781
|
};
|
|
17769
17782
|
|
|
17770
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
17783
|
+
var PopupContainer = styled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
17771
17784
|
var isVisible = _a.isVisible;
|
|
17772
17785
|
return (isVisible ? "100%" : "0%");
|
|
17773
17786
|
}, function (_a) {
|
|
@@ -17780,7 +17793,7 @@ var PopupContainer = styled.div(templateObject_1$k || (templateObject_1$k = __ma
|
|
|
17780
17793
|
var contrast = _a.contrast;
|
|
17781
17794
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17782
17795
|
});
|
|
17783
|
-
var templateObject_1$
|
|
17796
|
+
var templateObject_1$l;
|
|
17784
17797
|
|
|
17785
17798
|
var Popup = function (props) {
|
|
17786
17799
|
var popupRef = useRef(null);
|
|
@@ -17815,27 +17828,27 @@ var Popup = function (props) {
|
|
|
17815
17828
|
});
|
|
17816
17829
|
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 })] })), typeof props.content === "string" && (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))), Array.isArray(props.content) &&
|
|
17817
17830
|
props.content.length > 0 &&
|
|
17818
|
-
props.content.map(function (item, index) { return (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: item }), "".concat(item, "-").concat(index))); })] }))] }));
|
|
17831
|
+
props.content.map(function (item, index) { return (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: item }), "".concat(item, "-").concat(index))); }), typeof props.content === "object" && props.content] }))] }));
|
|
17819
17832
|
};
|
|
17820
17833
|
|
|
17821
|
-
var Wrapper = styled.div(templateObject_1$
|
|
17822
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
17834
|
+
var Wrapper = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
17835
|
+
var StyledProgressBar = styled.div(templateObject_2$j || (templateObject_2$j = __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) {
|
|
17823
17836
|
var showInfo = _a.showInfo;
|
|
17824
17837
|
return (showInfo ? "10px" : "");
|
|
17825
17838
|
});
|
|
17826
|
-
var Indicator$1 = styled.div(templateObject_3$
|
|
17839
|
+
var Indicator$1 = styled.div(templateObject_3$9 || (templateObject_3$9 = __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) {
|
|
17827
17840
|
var percent = _a.percent;
|
|
17828
17841
|
return "calc(".concat(percent, "% - 6px)");
|
|
17829
17842
|
}, function (_a) {
|
|
17830
17843
|
var color = _a.color;
|
|
17831
17844
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17832
17845
|
});
|
|
17833
|
-
var templateObject_1$
|
|
17846
|
+
var templateObject_1$k, templateObject_2$j, templateObject_3$9;
|
|
17834
17847
|
|
|
17835
17848
|
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, "%") })))] })); };
|
|
17836
17849
|
|
|
17837
|
-
var Container$
|
|
17838
|
-
var Step$2 = styled.li(templateObject_2$
|
|
17850
|
+
var Container$c = styled.ol(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
17851
|
+
var Step$2 = styled.li(templateObject_2$i || (templateObject_2$i = __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) {
|
|
17839
17852
|
var status = _a.status;
|
|
17840
17853
|
return (!!status ? "pointer" : "not-allowed");
|
|
17841
17854
|
}, function (_a) {
|
|
@@ -17857,9 +17870,9 @@ var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplat
|
|
|
17857
17870
|
var hasTitle = _a.hasTitle;
|
|
17858
17871
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17859
17872
|
}, theme.colors.lightGray.dark);
|
|
17860
|
-
var templateObject_1$
|
|
17873
|
+
var templateObject_1$j, templateObject_2$i;
|
|
17861
17874
|
|
|
17862
|
-
var Steps$2 = function (props) { return (jsx$1(Container$
|
|
17875
|
+
var Steps$2 = function (props) { return (jsx$1(Container$c, { children: props.steps.map(function (_a, index) {
|
|
17863
17876
|
var title = _a.title, onClick = _a.onClick;
|
|
17864
17877
|
var step = index + 1;
|
|
17865
17878
|
var status = props.current > step
|
|
@@ -17874,8 +17887,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.st
|
|
|
17874
17887
|
return (jsxs(Step$2, __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)));
|
|
17875
17888
|
}) })); };
|
|
17876
17889
|
|
|
17877
|
-
var Container$
|
|
17878
|
-
var Step$1 = styled.li(templateObject_2$
|
|
17890
|
+
var Container$b = styled.ol(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
17891
|
+
var Step$1 = styled.li(templateObject_2$h || (templateObject_2$h = __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) {
|
|
17879
17892
|
var status = _a.status;
|
|
17880
17893
|
return (!!status ? "pointer" : "not-allowed");
|
|
17881
17894
|
}, function (_a) {
|
|
@@ -17894,9 +17907,9 @@ var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplat
|
|
|
17894
17907
|
? theme.colors.lightGray.light
|
|
17895
17908
|
: theme.colors.darkGray.light;
|
|
17896
17909
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17897
|
-
var templateObject_1$
|
|
17910
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17898
17911
|
|
|
17899
|
-
var Steps$1 = function (props) { return (jsx$1(Container$
|
|
17912
|
+
var Steps$1 = function (props) { return (jsx$1(Container$b, { children: props.steps.map(function (_a, index) {
|
|
17900
17913
|
var title = _a.title, onClick = _a.onClick;
|
|
17901
17914
|
var step = index + 1;
|
|
17902
17915
|
var status = props.current > step
|
|
@@ -17915,15 +17928,15 @@ var Steps = function (props) {
|
|
|
17915
17928
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
17916
17929
|
};
|
|
17917
17930
|
|
|
17918
|
-
var TabsContainer$1 = styled.div(templateObject_1$
|
|
17919
|
-
var Tab$1 = styled.div(templateObject_2$
|
|
17931
|
+
var TabsContainer$1 = styled.div(templateObject_1$h || (templateObject_1$h = __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);
|
|
17932
|
+
var Tab$1 = styled.div(templateObject_2$g || (templateObject_2$g = __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) {
|
|
17920
17933
|
var isActive = _a.isActive;
|
|
17921
17934
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
17922
17935
|
}, function (_a) {
|
|
17923
17936
|
var isActive = _a.isActive;
|
|
17924
17937
|
return isActive ? theme.colors.blue.base : "";
|
|
17925
17938
|
}, theme.colors.blue.base);
|
|
17926
|
-
var templateObject_1$
|
|
17939
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17927
17940
|
|
|
17928
17941
|
var Tabs$2 = function (_a) {
|
|
17929
17942
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17943,15 +17956,15 @@ var Tabs$2 = function (_a) {
|
|
|
17943
17956
|
}) }));
|
|
17944
17957
|
};
|
|
17945
17958
|
|
|
17946
|
-
var TabsContainer = styled.div(templateObject_1$
|
|
17947
|
-
var Tab = styled.div(templateObject_2$
|
|
17959
|
+
var TabsContainer = styled.div(templateObject_1$g || (templateObject_1$g = __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);
|
|
17960
|
+
var Tab = styled.div(templateObject_2$f || (templateObject_2$f = __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) {
|
|
17948
17961
|
var isActive = _a.isActive;
|
|
17949
17962
|
return (isActive ? "block" : "none");
|
|
17950
17963
|
}, theme.colors.blue.base, function (_a) {
|
|
17951
17964
|
var isActive = _a.isActive;
|
|
17952
17965
|
return isActive ? theme.colors.blue.base : "";
|
|
17953
17966
|
}, theme.colors.blue.base);
|
|
17954
|
-
var templateObject_1$
|
|
17967
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17955
17968
|
|
|
17956
17969
|
var Tabs$1 = function (_a) {
|
|
17957
17970
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17975,14 +17988,14 @@ var Tabs = function (props) {
|
|
|
17975
17988
|
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
17976
17989
|
};
|
|
17977
17990
|
|
|
17978
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
17979
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
17980
|
-
var RadioWrapper = styled.div(templateObject_3$
|
|
17981
|
-
var Label$6 = styled(StyledParagraph)(templateObject_4$
|
|
17991
|
+
var Fieldset = styled.fieldset(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
17992
|
+
var RadioContainer = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
17993
|
+
var RadioWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
17994
|
+
var Label$6 = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __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) {
|
|
17982
17995
|
var weight = _a.weight;
|
|
17983
17996
|
return weight || 500;
|
|
17984
17997
|
}, theme.colors.darkGray.base);
|
|
17985
|
-
var templateObject_1$
|
|
17998
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$8, templateObject_4$5;
|
|
17986
17999
|
|
|
17987
18000
|
var RadioGroup = function (props) {
|
|
17988
18001
|
var onChange = function (value) {
|
|
@@ -17999,9 +18012,9 @@ var RadioGroup = function (props) {
|
|
|
17999
18012
|
}) })] }));
|
|
18000
18013
|
};
|
|
18001
18014
|
|
|
18002
|
-
var Container$
|
|
18003
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
18004
|
-
var templateObject_1$
|
|
18015
|
+
var Container$a = styled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
18016
|
+
var Label$5 = styled(StyledParagraph)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
18017
|
+
var templateObject_1$e, templateObject_2$d;
|
|
18005
18018
|
|
|
18006
18019
|
var SelectField = function (props) {
|
|
18007
18020
|
var onChange = function (value) {
|
|
@@ -18012,15 +18025,15 @@ var SelectField = function (props) {
|
|
|
18012
18025
|
if (props.onBlur)
|
|
18013
18026
|
props.onBlur(props.name);
|
|
18014
18027
|
};
|
|
18015
|
-
return (jsxs(Container$
|
|
18028
|
+
return (jsxs(Container$a, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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) {
|
|
18016
18029
|
var value = _a.value, label = _a.label;
|
|
18017
18030
|
return (jsx$1("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
18018
18031
|
}) }))] }));
|
|
18019
18032
|
};
|
|
18020
18033
|
|
|
18021
|
-
var Container$
|
|
18022
|
-
var Label$4 = styled(StyledParagraph)(templateObject_2$
|
|
18023
|
-
var templateObject_1$
|
|
18034
|
+
var Container$9 = 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"])));
|
|
18035
|
+
var Label$4 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
18036
|
+
var templateObject_1$d, templateObject_2$c;
|
|
18024
18037
|
|
|
18025
18038
|
var ToggleField = function (props) {
|
|
18026
18039
|
var onChange = function (value) {
|
|
@@ -18031,10 +18044,10 @@ var ToggleField = function (props) {
|
|
|
18031
18044
|
if (props.onBlur)
|
|
18032
18045
|
props.onBlur(props.name);
|
|
18033
18046
|
};
|
|
18034
|
-
return (jsxs(Container$
|
|
18047
|
+
return (jsxs(Container$9, { children: [jsx$1(Label$4, __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 })] }));
|
|
18035
18048
|
};
|
|
18036
18049
|
|
|
18037
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
18050
|
+
var TooltipContainer = styled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
18038
18051
|
var isVisible = _a.isVisible;
|
|
18039
18052
|
return (isVisible ? "100%" : "0%");
|
|
18040
18053
|
}, function (_a) {
|
|
@@ -18044,7 +18057,7 @@ var TooltipContainer = styled.div(templateObject_1$b || (templateObject_1$b = __
|
|
|
18044
18057
|
var x = _a.x;
|
|
18045
18058
|
return (x ? "".concat(x, "px") : "");
|
|
18046
18059
|
});
|
|
18047
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
18060
|
+
var TooltipTitle = styled.div(templateObject_2$b || (templateObject_2$b = __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) {
|
|
18048
18061
|
var color = _a.color;
|
|
18049
18062
|
switch (color) {
|
|
18050
18063
|
default:
|
|
@@ -18054,7 +18067,7 @@ var TooltipTitle = styled.div(templateObject_2$a || (templateObject_2$a = __make
|
|
|
18054
18067
|
return theme.colors.lightGray.dark;
|
|
18055
18068
|
}
|
|
18056
18069
|
});
|
|
18057
|
-
var templateObject_1$
|
|
18070
|
+
var templateObject_1$c, templateObject_2$b;
|
|
18058
18071
|
|
|
18059
18072
|
var Tooltip$2 = function (props) {
|
|
18060
18073
|
var tooltipRef = useRef(null);
|
|
@@ -47678,13 +47691,13 @@ var xAxis = {
|
|
|
47678
47691
|
domain: ["dataMin", "dataMax"],
|
|
47679
47692
|
};
|
|
47680
47693
|
|
|
47681
|
-
var Container$
|
|
47682
|
-
var Label$2 = styled.div(templateObject_2$
|
|
47683
|
-
var Dot = styled.div(templateObject_3$
|
|
47694
|
+
var Container$8 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject$1(["\n padding: 10px 15px 6px;\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n border-radius: 4px;\n box-sizing: border-box;\n"], ["\n padding: 10px 15px 6px;\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n border-radius: 4px;\n box-sizing: border-box;\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark);
|
|
47695
|
+
var Label$2 = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 15px;\n\n > div:first-child {\n display: flex;\n gap: 10px;\n align-items: baseline;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 15px;\n\n > div:first-child {\n display: flex;\n gap: 10px;\n align-items: baseline;\n }\n"])));
|
|
47696
|
+
var Dot = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n width: 10px;\n min-width: 10px;\n height: 10px;\n min-height: 10px;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 10px;\n min-width: 10px;\n height: 10px;\n min-height: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (_a) {
|
|
47684
47697
|
var color = _a.color;
|
|
47685
47698
|
return color;
|
|
47686
47699
|
});
|
|
47687
|
-
var templateObject_1$
|
|
47700
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$7;
|
|
47688
47701
|
|
|
47689
47702
|
var Tooltip = function (_a) {
|
|
47690
47703
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47713,7 +47726,7 @@ var Tooltip = function (_a) {
|
|
|
47713
47726
|
return "".concat(format$1(fromUnixTime(label), "MMMM", options));
|
|
47714
47727
|
}
|
|
47715
47728
|
};
|
|
47716
|
-
return (jsxs(Container$
|
|
47729
|
+
return (jsxs(Container$8, { children: [payload.map(function (_a, index) {
|
|
47717
47730
|
var name = _a.name, value = _a.value, stroke = _a.stroke;
|
|
47718
47731
|
return (jsxs(Label$2, { children: [jsxs("div", { children: [jsx$1(Dot, { color: stroke }), jsx$1(Paragraph, __assign$2({ size: "small" }, { children: translations[locale][name] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", color: "darkGray" }, { children: valueFormatter ? valueFormatter(parseInt("".concat(value))) : value }))] }, "".concat(name, "-").concat(value, "-").concat(index)));
|
|
47719
47732
|
}), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: renderLabel() }))] }));
|
|
@@ -47919,9 +47932,9 @@ var Chart = function (_a) {
|
|
|
47919
47932
|
}) }), period)] })), renderChart()] }));
|
|
47920
47933
|
};
|
|
47921
47934
|
|
|
47922
|
-
var Container$
|
|
47923
|
-
var Label$1 = styled(StyledParagraph)(templateObject_2$
|
|
47924
|
-
var templateObject_1$
|
|
47935
|
+
var Container$7 = styled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
47936
|
+
var Label$1 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
47937
|
+
var templateObject_1$a, templateObject_2$9;
|
|
47925
47938
|
|
|
47926
47939
|
var TextareaField = function (props) {
|
|
47927
47940
|
var onChange = function (value) {
|
|
@@ -47932,12 +47945,12 @@ var TextareaField = function (props) {
|
|
|
47932
47945
|
if (props.onBlur)
|
|
47933
47946
|
props.onBlur(props.name);
|
|
47934
47947
|
};
|
|
47935
|
-
return (jsxs(Container$
|
|
47948
|
+
return (jsxs(Container$7, { 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))); })] })))] }));
|
|
47936
47949
|
};
|
|
47937
47950
|
|
|
47938
|
-
var Container$
|
|
47939
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
47940
|
-
var templateObject_1$
|
|
47951
|
+
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"])));
|
|
47952
|
+
var Label = 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);
|
|
47953
|
+
var templateObject_1$9, templateObject_2$8;
|
|
47941
47954
|
|
|
47942
47955
|
var RangeField = function (props) {
|
|
47943
47956
|
var onChange = function (value) {
|
|
@@ -47948,25 +47961,25 @@ var RangeField = function (props) {
|
|
|
47948
47961
|
if (props.onBlur)
|
|
47949
47962
|
props.onBlur(props.name);
|
|
47950
47963
|
};
|
|
47951
|
-
return (jsxs(Container$
|
|
47964
|
+
return (jsxs(Container$6, { 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 })] }));
|
|
47952
47965
|
};
|
|
47953
47966
|
|
|
47954
47967
|
var FeedbackColors = {
|
|
47955
47968
|
success: theme.colors.green.base,
|
|
47956
47969
|
error: theme.colors.red.base,
|
|
47957
47970
|
};
|
|
47958
|
-
var FieldWrapper = styled.div(templateObject_1$
|
|
47971
|
+
var FieldWrapper = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject$1(["\n input, textarea, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input, textarea, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
|
|
47959
47972
|
var status = _a.status;
|
|
47960
47973
|
return FeedbackColors[status];
|
|
47961
47974
|
});
|
|
47962
|
-
var FeedbackWrapper = styled.div(templateObject_2$
|
|
47975
|
+
var FeedbackWrapper = styled.div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
47963
47976
|
var status = _a.status;
|
|
47964
47977
|
return FeedbackColors[status];
|
|
47965
47978
|
}, function (_a) {
|
|
47966
47979
|
var status = _a.status;
|
|
47967
47980
|
return FeedbackColors[status];
|
|
47968
47981
|
});
|
|
47969
|
-
var templateObject_1$
|
|
47982
|
+
var templateObject_1$8, templateObject_2$7;
|
|
47970
47983
|
|
|
47971
47984
|
var WithValidation = function (_a) {
|
|
47972
47985
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -47979,10 +47992,10 @@ var WithValidation = function (_a) {
|
|
|
47979
47992
|
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 }))] }))] })));
|
|
47980
47993
|
};
|
|
47981
47994
|
|
|
47982
|
-
var FormWrapper = styled.form(templateObject_1$
|
|
47983
|
-
var DescriptionWrapper = styled.div(templateObject_2$
|
|
47984
|
-
var ButtonWrapper = styled.div(templateObject_3$
|
|
47985
|
-
var templateObject_1$
|
|
47995
|
+
var FormWrapper = styled.form(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1([""], [""])));
|
|
47996
|
+
var DescriptionWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __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);
|
|
47997
|
+
var ButtonWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
47998
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6;
|
|
47986
47999
|
|
|
47987
48000
|
var Form = forwardRef(function (props, ref) {
|
|
47988
48001
|
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -48211,7 +48224,7 @@ var Form = forwardRef(function (props, ref) {
|
|
|
48211
48224
|
}) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
|
|
48212
48225
|
});
|
|
48213
48226
|
|
|
48214
|
-
var Container$
|
|
48227
|
+
var Container$5 = styled.div(templateObject_1$6 || (templateObject_1$6 = __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) {
|
|
48215
48228
|
var color = _a.color, active = _a.active;
|
|
48216
48229
|
if (active)
|
|
48217
48230
|
return theme.colors[color].dark;
|
|
@@ -48235,22 +48248,22 @@ var Container$4 = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeT
|
|
|
48235
48248
|
return theme.colors[color].base;
|
|
48236
48249
|
return "";
|
|
48237
48250
|
});
|
|
48238
|
-
var templateObject_1$
|
|
48251
|
+
var templateObject_1$6;
|
|
48239
48252
|
|
|
48240
|
-
var Key = function (props) {
|
|
48253
|
+
var Key$1 = function (props) {
|
|
48241
48254
|
var _a;
|
|
48242
|
-
return (jsx$1(Container$
|
|
48255
|
+
return (jsx$1(Container$5, __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))); })) })));
|
|
48243
48256
|
};
|
|
48244
48257
|
|
|
48245
|
-
var Container$
|
|
48246
|
-
var SpecialRow = styled.div(templateObject_2$
|
|
48247
|
-
var TopRow = styled.div(templateObject_3$
|
|
48248
|
-
var StartRow = styled.div(templateObject_4$
|
|
48249
|
-
var BottomRow = styled.div(templateObject_5$
|
|
48250
|
-
var SpacebarRow = styled.div(templateObject_6$
|
|
48251
|
-
var templateObject_1$
|
|
48258
|
+
var Container$4 = styled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
48259
|
+
var SpecialRow = styled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
48260
|
+
var TopRow = styled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
48261
|
+
var StartRow = styled.div(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
48262
|
+
var BottomRow = styled.div(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
48263
|
+
var SpacebarRow = styled.div(templateObject_6$3 || (templateObject_6$3 = __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"])));
|
|
48264
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3;
|
|
48252
48265
|
|
|
48253
|
-
var Keyboard = function (props) {
|
|
48266
|
+
var Keyboard$1 = function (props) {
|
|
48254
48267
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
48255
48268
|
var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48256
48269
|
useEffect(function () {
|
|
@@ -48272,53 +48285,280 @@ var Keyboard = function (props) {
|
|
|
48272
48285
|
}, [props.keys]);
|
|
48273
48286
|
if (!keys)
|
|
48274
48287
|
return null;
|
|
48275
|
-
return (jsxs(Container$
|
|
48276
|
-
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 ||
|
|
48277
|
-
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 ||
|
|
48278
|
-
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 ||
|
|
48279
|
-
keys[83].character === props.activeKey }), jsx$1(Key, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
48280
|
-
keys[81].character === props.activeKey }), jsx$1(Key, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
48281
|
-
keys[91].character === props.activeKey }), jsx$1(Key, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
48282
|
-
keys[90].character === props.activeKey }), jsx$1(Key, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
48283
|
-
keys[80].character === props.activeKey }), jsx$1(Key, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
48284
|
-
keys[82].character === props.activeKey }), jsx$1(Key, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
48285
|
-
keys[84].character === props.activeKey }), jsx$1(Key, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
48286
|
-
keys[86].character === props.activeKey }), jsx$1(Key, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
48287
|
-
keys[88].character === props.activeKey }), jsx$1(Key, {})] }), jsxs(TopRow, { children: [jsx$1(Key, {}), jsx$1(Key, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
48288
|
-
keys[65].character === props.activeKey }), jsx$1(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48289
|
-
keys[63].character === props.activeKey }), jsx$1(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48290
|
-
keys[61].character === props.activeKey }), jsx$1(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48291
|
-
keys[59].character === props.activeKey }), jsx$1(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48292
|
-
keys[69].character === props.activeKey }), jsx$1(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48293
|
-
keys[68].character === props.activeKey }), jsx$1(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48294
|
-
keys[58].character === props.activeKey }), jsx$1(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48295
|
-
keys[60].character === props.activeKey }), jsx$1(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48296
|
-
keys[62].character === props.activeKey }), jsx$1(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48297
|
-
keys[64].character === props.activeKey }), jsx$1(Key, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
48298
|
-
keys[67].character === props.activeKey }), jsx$1(Key, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
48299
|
-
keys[66].character === props.activeKey }), jsx$1(Key, {})] }), jsxs(StartRow, { children: [jsx$1(Key, {}), jsx$1(Key, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
48300
|
-
keys[54].character === props.activeKey }), jsx$1(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48301
|
-
keys[52].character === props.activeKey }), jsx$1(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48302
|
-
keys[50].character === props.activeKey }), jsx$1(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48303
|
-
keys[48].character === props.activeKey }), jsx$1(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48304
|
-
keys[57].character === props.activeKey }), jsx$1(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48305
|
-
keys[56].character === props.activeKey }), jsx$1(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48306
|
-
keys[47].character === props.activeKey }), jsx$1(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48307
|
-
keys[49].character === props.activeKey }), jsx$1(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48308
|
-
keys[51].character === props.activeKey }), jsx$1(Key, { characters: [keys[8].character, keys[53].character].filter(function (key) { return key !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
|
|
48309
|
-
keys[53].character === props.activeKey }), jsx$1(Key, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
48310
|
-
keys[55].character === props.activeKey }), jsx$1(Key, {})] }), jsxs(BottomRow, { children: [jsx$1(Key, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }), jsx$1(Key, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
48311
|
-
keys[77].character === props.activeKey }), jsx$1(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48312
|
-
keys[75].character === props.activeKey }), jsx$1(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48313
|
-
keys[73].character === props.activeKey }), jsx$1(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48314
|
-
keys[71].character === props.activeKey }), jsx$1(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48315
|
-
keys[79].character === props.activeKey }), jsx$1(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48316
|
-
keys[78].character === props.activeKey }), jsx$1(Key, { characters: [keys[25].character, keys[70].character].filter(function (key) { return key !== "m"; }), color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
48317
|
-
keys[70].character === props.activeKey }), jsx$1(Key, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
48318
|
-
keys[72].character === props.activeKey }), jsx$1(Key, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
48319
|
-
keys[74].character === props.activeKey }), jsx$1(Key, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
48320
|
-
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, {})] })] }));
|
|
48321
|
-
};
|
|
48288
|
+
return (jsxs(Container$4, { children: [jsxs(SpecialRow, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
48289
|
+
keys[89].character === props.activeKey }, 44), jsx$1(Key$1, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
48290
|
+
keys[87].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
48291
|
+
keys[85].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
48292
|
+
keys[83].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
48293
|
+
keys[81].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
48294
|
+
keys[91].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
48295
|
+
keys[90].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
48296
|
+
keys[80].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
48297
|
+
keys[82].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
48298
|
+
keys[84].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
48299
|
+
keys[86].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
48300
|
+
keys[88].character === props.activeKey }), jsx$1(Key$1, {})] }), jsxs(TopRow, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
48301
|
+
keys[65].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48302
|
+
keys[63].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48303
|
+
keys[61].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48304
|
+
keys[59].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48305
|
+
keys[69].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48306
|
+
keys[68].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48307
|
+
keys[58].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48308
|
+
keys[60].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48309
|
+
keys[62].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48310
|
+
keys[64].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
48311
|
+
keys[67].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
48312
|
+
keys[66].character === props.activeKey }), jsx$1(Key$1, {})] }), jsxs(StartRow, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
48313
|
+
keys[54].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48314
|
+
keys[52].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48315
|
+
keys[50].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48316
|
+
keys[48].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48317
|
+
keys[57].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48318
|
+
keys[56].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48319
|
+
keys[47].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48320
|
+
keys[49].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48321
|
+
keys[51].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[8].character, keys[53].character].filter(function (key) { return key !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
|
|
48322
|
+
keys[53].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
48323
|
+
keys[55].character === props.activeKey }), jsx$1(Key$1, {})] }), jsxs(BottomRow, { children: [jsx$1(Key$1, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }), jsx$1(Key$1, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
48324
|
+
keys[77].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48325
|
+
keys[75].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48326
|
+
keys[73].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48327
|
+
keys[71].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48328
|
+
keys[79].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48329
|
+
keys[78].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[25].character, keys[70].character].filter(function (key) { return key !== "m"; }), color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
48330
|
+
keys[70].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
48331
|
+
keys[72].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
48332
|
+
keys[74].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
48333
|
+
keys[76].character === props.activeKey }), jsx$1(Key$1, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxs(SpacebarRow, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {})] })] }));
|
|
48334
|
+
};
|
|
48335
|
+
|
|
48336
|
+
var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 670px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n min-width: 670px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
|
|
48337
|
+
var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n min-height: 40px;\n height: 100%;\n display: grid;\n gap: 7px;\n"], ["\n min-height: 40px;\n height: 100%;\n display: grid;\n gap: 7px;\n"])));
|
|
48338
|
+
var Row1 = styled(Row)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n grid-template-columns: repeat(13, 1fr) 1.5fr;\n"], ["\n grid-template-columns: repeat(13, 1fr) 1.5fr;\n"])));
|
|
48339
|
+
var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(13, 1fr);\n"], ["\n grid-template-columns: 1.5fr repeat(13, 1fr);\n"])));
|
|
48340
|
+
var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n grid-template-columns: 2fr repeat(11, 1fr) 2fr;\n"], ["\n grid-template-columns: 2fr repeat(11, 1fr) 2fr;\n"])));
|
|
48341
|
+
var Row4 = styled(Row)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n grid-template-columns: 2.5fr repeat(10, 1fr) 2.5fr;\n"], ["\n grid-template-columns: 2.5fr repeat(10, 1fr) 2.5fr;\n"])));
|
|
48342
|
+
var Row5 = styled(Row)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.5fr;\n"], ["\n grid-template-columns: 1.5fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.5fr;\n"])));
|
|
48343
|
+
var Key = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: ", ";\n\n border: 1px solid;\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n padding: 0 10px;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n border-color: ", ";\n\n svg {\n fill: ", ";\n stroke: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: ", ";\n\n border: 1px solid;\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n padding: 0 10px;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n border-color: ", ";\n\n svg {\n fill: ", ";\n stroke: ", ";\n }\n"])), function (_a) {
|
|
48344
|
+
var align = _a.align;
|
|
48345
|
+
if (!align)
|
|
48346
|
+
return "center";
|
|
48347
|
+
else if (align === "left")
|
|
48348
|
+
return "flex-start";
|
|
48349
|
+
else
|
|
48350
|
+
return "flex-end";
|
|
48351
|
+
}, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, function (_a) {
|
|
48352
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48353
|
+
if (isActive && color)
|
|
48354
|
+
return theme.colors[color].light;
|
|
48355
|
+
else if (color)
|
|
48356
|
+
return theme.colors.lightGray.light;
|
|
48357
|
+
else
|
|
48358
|
+
return theme.colors.lightGray.base;
|
|
48359
|
+
}, function (_a) {
|
|
48360
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48361
|
+
if (isActive && color)
|
|
48362
|
+
return theme.colors[color].darker;
|
|
48363
|
+
else if (color)
|
|
48364
|
+
return theme.colors[color].dark;
|
|
48365
|
+
else
|
|
48366
|
+
return theme.colors.lightGray.darker;
|
|
48367
|
+
}, function (_a) {
|
|
48368
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48369
|
+
if (isActive)
|
|
48370
|
+
return "0 2px 0 ".concat(theme.colors[color].dark);
|
|
48371
|
+
else if (color)
|
|
48372
|
+
return "0 2px 0 ".concat(theme.colors[color].base);
|
|
48373
|
+
else
|
|
48374
|
+
return "0 2px 0 ".concat(theme.colors.lightGray.darker);
|
|
48375
|
+
}, function (_a) {
|
|
48376
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48377
|
+
if (isActive)
|
|
48378
|
+
return theme.colors[color].dark;
|
|
48379
|
+
else if (color)
|
|
48380
|
+
return theme.colors[color].base;
|
|
48381
|
+
else
|
|
48382
|
+
return theme.colors.lightGray.darker;
|
|
48383
|
+
}, function (_a) {
|
|
48384
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48385
|
+
if (isActive && color)
|
|
48386
|
+
return theme.colors[color].darker;
|
|
48387
|
+
else if (color)
|
|
48388
|
+
return theme.colors[color].dark;
|
|
48389
|
+
else
|
|
48390
|
+
return theme.colors.lightGray.darker;
|
|
48391
|
+
}, function (_a) {
|
|
48392
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48393
|
+
if (isActive && color)
|
|
48394
|
+
return theme.colors[color].darker;
|
|
48395
|
+
else if (color)
|
|
48396
|
+
return theme.colors[color].dark;
|
|
48397
|
+
else
|
|
48398
|
+
return theme.colors.lightGray.darker;
|
|
48399
|
+
});
|
|
48400
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
48401
|
+
|
|
48402
|
+
var Keyboard = function (props) {
|
|
48403
|
+
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
48404
|
+
var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48405
|
+
useEffect(function () {
|
|
48406
|
+
if (!!props.keys) {
|
|
48407
|
+
var keys_1 = {};
|
|
48408
|
+
var shiftKeys_1 = { left: [], right: [] };
|
|
48409
|
+
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
48410
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
48411
|
+
keys_1[index] = { character: key, color: color };
|
|
48412
|
+
if (isShiftKey)
|
|
48413
|
+
shiftKeys_1[hand].push(key);
|
|
48414
|
+
}
|
|
48415
|
+
setKeys(keys_1);
|
|
48416
|
+
setShiftKeys(shiftKeys_1);
|
|
48417
|
+
}
|
|
48418
|
+
}, [props.keys]);
|
|
48419
|
+
var containsAny = function (arr1, arr2) {
|
|
48420
|
+
return arr1.some(function (v) { return arr2.includes(v); });
|
|
48421
|
+
};
|
|
48422
|
+
if (!keys)
|
|
48423
|
+
return jsx$1(Fragment$1, {});
|
|
48424
|
+
return (jsxs(Container$3, { children: [jsxs(Row1, { children: [jsx$1(Key, {}), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48425
|
+
keys[89].character,
|
|
48426
|
+
keys[44].character,
|
|
48427
|
+
]) }, { children: [keys[89].character, jsx$1("br", {}), keys[44].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48428
|
+
keys[87].character,
|
|
48429
|
+
keys[42].character,
|
|
48430
|
+
]) }, { children: [keys[87].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48431
|
+
keys[85].character,
|
|
48432
|
+
keys[40].character,
|
|
48433
|
+
]) }, { children: [keys[85].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48434
|
+
keys[83].character,
|
|
48435
|
+
keys[38].character,
|
|
48436
|
+
]) }, { children: [keys[83].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48437
|
+
keys[81].character,
|
|
48438
|
+
keys[36].character,
|
|
48439
|
+
]) }, { children: [keys[81].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48440
|
+
keys[91].character,
|
|
48441
|
+
keys[46].character,
|
|
48442
|
+
]) }, { children: [keys[91].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48443
|
+
keys[90].character,
|
|
48444
|
+
keys[45].character,
|
|
48445
|
+
]) }, { children: [keys[90].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48446
|
+
keys[80].character,
|
|
48447
|
+
keys[35].character,
|
|
48448
|
+
]) }, { children: [keys[80].character, jsx$1("br", {}), keys[35].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48449
|
+
keys[82].character,
|
|
48450
|
+
keys[37].character,
|
|
48451
|
+
]) }, { children: [keys[82].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48452
|
+
keys[84].character,
|
|
48453
|
+
keys[39].character,
|
|
48454
|
+
]) }, { children: [keys[84].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48455
|
+
keys[86].character,
|
|
48456
|
+
keys[41].character,
|
|
48457
|
+
]) }, { children: [keys[86].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48458
|
+
keys[88].character,
|
|
48459
|
+
keys[43].character,
|
|
48460
|
+
]) }, { children: [keys[88].character, jsx$1("br", {}), keys[43].character] })), jsx$1(Key, {})] }), jsxs(Row2, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48461
|
+
keys[65].character,
|
|
48462
|
+
keys[20].character,
|
|
48463
|
+
]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48464
|
+
keys[63].character,
|
|
48465
|
+
keys[18].character,
|
|
48466
|
+
]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48467
|
+
keys[61].character,
|
|
48468
|
+
keys[16].character,
|
|
48469
|
+
]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48470
|
+
keys[59].character,
|
|
48471
|
+
keys[14].character,
|
|
48472
|
+
]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48473
|
+
keys[69].character,
|
|
48474
|
+
keys[24].character,
|
|
48475
|
+
]) }, { children: keys[69].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48476
|
+
keys[68].character,
|
|
48477
|
+
keys[23].character,
|
|
48478
|
+
]) }, { children: keys[68].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48479
|
+
keys[58].character,
|
|
48480
|
+
keys[13].character,
|
|
48481
|
+
]) }, { children: keys[58].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48482
|
+
keys[60].character,
|
|
48483
|
+
keys[15].character,
|
|
48484
|
+
]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48485
|
+
keys[62].character,
|
|
48486
|
+
keys[17].character,
|
|
48487
|
+
]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48488
|
+
keys[64].character,
|
|
48489
|
+
keys[19].character,
|
|
48490
|
+
]) }, { children: keys[64].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48491
|
+
keys[67].character,
|
|
48492
|
+
keys[22].character,
|
|
48493
|
+
]) }, { children: [keys[67].character, jsx$1("br", {}), keys[22].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48494
|
+
keys[66].character,
|
|
48495
|
+
keys[21].character,
|
|
48496
|
+
]) }, { children: [keys[66].character, jsx$1("br", {}), keys[21].character] })), jsx$1(Key, {})] }), jsxs(Row3, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48497
|
+
keys[54].character,
|
|
48498
|
+
keys[9].character,
|
|
48499
|
+
]) }, { children: keys[54].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48500
|
+
keys[52].character,
|
|
48501
|
+
keys[7].character,
|
|
48502
|
+
]) }, { children: keys[52].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48503
|
+
keys[50].character,
|
|
48504
|
+
keys[5].character,
|
|
48505
|
+
]) }, { children: keys[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48506
|
+
keys[48].character,
|
|
48507
|
+
keys[3].character,
|
|
48508
|
+
]) }, { children: keys[48].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48509
|
+
keys[57].character,
|
|
48510
|
+
keys[12].character,
|
|
48511
|
+
]) }, { children: keys[57].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48512
|
+
keys[56].character,
|
|
48513
|
+
keys[11].character,
|
|
48514
|
+
]) }, { children: keys[56].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48515
|
+
keys[47].character,
|
|
48516
|
+
keys[2].character,
|
|
48517
|
+
]) }, { children: keys[47].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48518
|
+
keys[49].character,
|
|
48519
|
+
keys[4].character,
|
|
48520
|
+
]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48521
|
+
keys[51].character,
|
|
48522
|
+
keys[6].character,
|
|
48523
|
+
]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48524
|
+
keys[53].character,
|
|
48525
|
+
keys[8].character,
|
|
48526
|
+
]) }, { children: keys[53].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48527
|
+
keys[55].character,
|
|
48528
|
+
keys[10].character,
|
|
48529
|
+
]) }, { children: [keys[55].character, jsx$1("br", {}), keys[10].character] })), jsx$1(Key, {})] }), jsxs(Row4, { children: [jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.right), align: "left" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48530
|
+
keys[77].character,
|
|
48531
|
+
keys[32].character,
|
|
48532
|
+
]) }, { children: keys[77].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48533
|
+
keys[75].character,
|
|
48534
|
+
keys[30].character,
|
|
48535
|
+
]) }, { children: keys[75].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48536
|
+
keys[73].character,
|
|
48537
|
+
keys[28].character,
|
|
48538
|
+
]) }, { children: keys[73].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48539
|
+
keys[71].character,
|
|
48540
|
+
keys[26].character,
|
|
48541
|
+
]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48542
|
+
keys[79].character,
|
|
48543
|
+
keys[34].character,
|
|
48544
|
+
]) }, { children: keys[79].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48545
|
+
keys[78].character,
|
|
48546
|
+
keys[30].character,
|
|
48547
|
+
]) }, { children: keys[78].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48548
|
+
keys[70].character,
|
|
48549
|
+
keys[25].character,
|
|
48550
|
+
]) }, { children: [keys[70].character, jsx$1("br", {}), keys[25].character !== "m" && keys[25].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48551
|
+
keys[72].character,
|
|
48552
|
+
keys[27].character,
|
|
48553
|
+
]) }, { children: [keys[72].character, jsx$1("br", {}), keys[27].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48554
|
+
keys[74].character,
|
|
48555
|
+
keys[29].character,
|
|
48556
|
+
]) }, { children: [keys[74].character, jsx$1("br", {}), keys[29].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48557
|
+
keys[76].character,
|
|
48558
|
+
keys[31].character,
|
|
48559
|
+
]) }, { children: [keys[76].character, jsx$1("br", {}), keys[31].character] })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.left), align: "right" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) }))] }), jsxs(Row5, { children: [jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(props.activeKeys, [keys[1].character]) }, { children: jsx$1("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { 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(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {})] })] }));
|
|
48560
|
+
};
|
|
48561
|
+
Keyboard.Legacy = Keyboard$1;
|
|
48322
48562
|
|
|
48323
48563
|
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 overflow: auto;\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 overflow: auto;\n"])));
|
|
48324
48564
|
var CardWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: calc(100vw - 40px);\n width: ", ";\n max-height: calc(100vh - 40px);\n"], ["\n min-width: ", ";\n max-width: calc(100vw - 40px);\n width: ", ";\n max-height: calc(100vh - 40px);\n"])), function (_a) {
|
|
@@ -48524,5 +48764,5 @@ var Transfer = function (props) {
|
|
|
48524
48764
|
}) }) }, selectedTargetKeys)] }))] }));
|
|
48525
48765
|
};
|
|
48526
48766
|
|
|
48527
|
-
export { Alert, Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$
|
|
48767
|
+
export { Alert, Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$2 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, Textarea, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
|
|
48528
48768
|
//# sourceMappingURL=index.es.js.map
|