@typeolymp/ui-components 1.19.40 → 1.20.1
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 +2 -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 +480 -248
- package/build/index.es.js.map +1 -1
- package/build/index.js +480 -248
- 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" }) }) })) }) }));
|
|
@@ -14975,7 +14976,7 @@ var Dropdown = function (_a) {
|
|
|
14975
14976
|
return React__default.cloneElement(child, props_1);
|
|
14976
14977
|
}
|
|
14977
14978
|
});
|
|
14978
|
-
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) {
|
|
14979
14980
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14980
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)));
|
|
14981
14982
|
}) }))] }));
|
|
@@ -17499,8 +17500,8 @@ function reducer$1(state, action) {
|
|
|
17499
17500
|
|
|
17500
17501
|
function noop$3() {}
|
|
17501
17502
|
|
|
17502
|
-
var Container$
|
|
17503
|
-
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) {
|
|
17504
17505
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17505
17506
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17506
17507
|
if (isDragAccept)
|
|
@@ -17519,8 +17520,8 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
|
|
|
17519
17520
|
else
|
|
17520
17521
|
return theme.colors.lightGray.base;
|
|
17521
17522
|
});
|
|
17522
|
-
var FileList = styled.div(templateObject_3$
|
|
17523
|
-
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;
|
|
17524
17525
|
|
|
17525
17526
|
var FileUpload = function (_a) {
|
|
17526
17527
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17533,14 +17534,14 @@ var FileUpload = function (_a) {
|
|
|
17533
17534
|
// Max number of files: 1
|
|
17534
17535
|
maxFiles: 1,
|
|
17535
17536
|
}), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
|
|
17536
|
-
return (jsx$1(Fragment$1, { children: jsxs(Container$
|
|
17537
|
+
return (jsx$1(Fragment$1, { children: jsxs(Container$j, { children: [jsxs(DropZone, __assign$2({}, getRootProps({
|
|
17537
17538
|
isDragActive: isDragActive,
|
|
17538
17539
|
isDragAccept: isDragAccept,
|
|
17539
17540
|
isDragReject: isDragReject,
|
|
17540
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))); }) }))] }) }));
|
|
17541
17542
|
};
|
|
17542
17543
|
|
|
17543
|
-
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) {
|
|
17544
17545
|
var size = _a.size;
|
|
17545
17546
|
return (size === "small" ? "30px" : "40px");
|
|
17546
17547
|
}, function (_a) {
|
|
@@ -17559,7 +17560,7 @@ var StyledIconButton = styled(StyledButton)(templateObject_1$u || (templateObjec
|
|
|
17559
17560
|
var size = _a.size;
|
|
17560
17561
|
return (size === "small" ? "28px" : "38px");
|
|
17561
17562
|
});
|
|
17562
|
-
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) {
|
|
17563
17564
|
var size = _a.size;
|
|
17564
17565
|
return (size === "small" ? "30px" : "40px");
|
|
17565
17566
|
}, function (_a) {
|
|
@@ -17578,7 +17579,7 @@ var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_
|
|
|
17578
17579
|
var size = _a.size;
|
|
17579
17580
|
return (size === "small" ? "30px" : "40px");
|
|
17580
17581
|
});
|
|
17581
|
-
var templateObject_1$
|
|
17582
|
+
var templateObject_1$v, templateObject_2$r;
|
|
17582
17583
|
|
|
17583
17584
|
var IconButton = function (props) {
|
|
17584
17585
|
if (props.color === "white")
|
|
@@ -17586,9 +17587,9 @@ var IconButton = function (props) {
|
|
|
17586
17587
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17587
17588
|
};
|
|
17588
17589
|
|
|
17589
|
-
var Container$
|
|
17590
|
-
var Label$9 = styled(StyledParagraph)(templateObject_2$
|
|
17591
|
-
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;
|
|
17592
17593
|
|
|
17593
17594
|
var InputField = function (props) {
|
|
17594
17595
|
var onChange = function (value) {
|
|
@@ -17599,10 +17600,10 @@ var InputField = function (props) {
|
|
|
17599
17600
|
if (props.onBlur)
|
|
17600
17601
|
props.onBlur(props.name);
|
|
17601
17602
|
};
|
|
17602
|
-
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))); })] })))] }));
|
|
17603
17604
|
};
|
|
17604
17605
|
|
|
17605
|
-
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) {
|
|
17606
17607
|
var char = _a.char;
|
|
17607
17608
|
return (char.length === 1 ? "74px" : "");
|
|
17608
17609
|
}, function (_a) {
|
|
@@ -17649,23 +17650,23 @@ var Container$g = styled.div(templateObject_1$s || (templateObject_1$s = __makeT
|
|
|
17649
17650
|
return theme.colors.darkGray.light;
|
|
17650
17651
|
}
|
|
17651
17652
|
});
|
|
17652
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
17653
|
-
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;
|
|
17654
17655
|
|
|
17655
|
-
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: {
|
|
17656
17657
|
marginTop: "13px",
|
|
17657
17658
|
transform: "scale(2)",
|
|
17658
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 })))] }))); };
|
|
17659
17660
|
|
|
17660
|
-
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) {
|
|
17661
17662
|
var chevron = _a.chevron;
|
|
17662
17663
|
return (chevron === "left" ? "4px" : "");
|
|
17663
17664
|
}, function (_a) {
|
|
17664
17665
|
var chevron = _a.chevron;
|
|
17665
17666
|
return (chevron === "right" ? "4px" : "");
|
|
17666
17667
|
});
|
|
17667
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
17668
|
-
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;
|
|
17669
17670
|
|
|
17670
17671
|
var Link = function (props) {
|
|
17671
17672
|
var onClick = function (e) {
|
|
@@ -17677,15 +17678,15 @@ var Link = function (props) {
|
|
|
17677
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" }))] })));
|
|
17678
17679
|
};
|
|
17679
17680
|
|
|
17680
|
-
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) {
|
|
17681
17682
|
var text = _a.text;
|
|
17682
17683
|
return (text ? "20px" : "");
|
|
17683
17684
|
});
|
|
17684
|
-
var templateObject_1$
|
|
17685
|
+
var templateObject_1$r;
|
|
17685
17686
|
|
|
17686
|
-
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 }))] }))] }))); };
|
|
17687
17688
|
|
|
17688
|
-
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) {
|
|
17689
17690
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17690
17691
|
if (dropdownIsVisible) {
|
|
17691
17692
|
switch (color) {
|
|
@@ -17698,8 +17699,8 @@ var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
17698
17699
|
}
|
|
17699
17700
|
return "";
|
|
17700
17701
|
});
|
|
17701
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
17702
|
-
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) {
|
|
17703
17704
|
var color = _a.color;
|
|
17704
17705
|
switch (color) {
|
|
17705
17706
|
default:
|
|
@@ -17709,8 +17710,8 @@ var DropdownContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
17709
17710
|
return theme.colors.lightGray.dark;
|
|
17710
17711
|
}
|
|
17711
17712
|
});
|
|
17712
|
-
var LocaleWrapper = styled.div(templateObject_4$
|
|
17713
|
-
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;
|
|
17714
17715
|
|
|
17715
17716
|
var LocaleSelect = function (props) {
|
|
17716
17717
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17719,22 +17720,22 @@ var LocaleSelect = function (props) {
|
|
|
17719
17720
|
setLocale(locale);
|
|
17720
17721
|
props.onChange(locale);
|
|
17721
17722
|
};
|
|
17722
|
-
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
|
|
17723
17724
|
.filter(function (l) { return l !== locale; })
|
|
17724
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)); }) })))] })));
|
|
17725
17726
|
};
|
|
17726
17727
|
|
|
17727
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
17728
|
-
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;
|
|
17729
17730
|
|
|
17730
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] }))] })] })); };
|
|
17731
17732
|
|
|
17732
|
-
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) {
|
|
17733
17734
|
var contrast = _a.contrast;
|
|
17734
17735
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17735
17736
|
});
|
|
17736
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
17737
|
-
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;
|
|
17738
17739
|
|
|
17739
17740
|
var Notification = function (props) {
|
|
17740
17741
|
if (!props.isVisible)
|
|
@@ -17742,9 +17743,9 @@ var Notification = function (props) {
|
|
|
17742
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) }))); }) }))] })));
|
|
17743
17744
|
};
|
|
17744
17745
|
|
|
17745
|
-
var Container$
|
|
17746
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
17747
|
-
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;
|
|
17748
17749
|
|
|
17749
17750
|
var NumberField = function (props) {
|
|
17750
17751
|
var onChange = function (value) {
|
|
@@ -17755,12 +17756,12 @@ var NumberField = function (props) {
|
|
|
17755
17756
|
if (props.onBlur)
|
|
17756
17757
|
props.onBlur(props.name);
|
|
17757
17758
|
};
|
|
17758
|
-
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 })] }));
|
|
17759
17760
|
};
|
|
17760
17761
|
|
|
17761
|
-
var Container$
|
|
17762
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
17763
|
-
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;
|
|
17764
17765
|
|
|
17765
17766
|
var PasswordInputField = function (props) {
|
|
17766
17767
|
var onChange = function (value) {
|
|
@@ -17776,10 +17777,10 @@ var PasswordInputField = function (props) {
|
|
|
17776
17777
|
if (props.onBlur)
|
|
17777
17778
|
props.onBlur(props.name);
|
|
17778
17779
|
};
|
|
17779
|
-
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 })] }));
|
|
17780
17781
|
};
|
|
17781
17782
|
|
|
17782
|
-
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: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n\n ", ";\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: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n\n ", ";\n"])), function (_a) {
|
|
17783
17784
|
var isVisible = _a.isVisible;
|
|
17784
17785
|
return (isVisible ? "100%" : "0%");
|
|
17785
17786
|
}, function (_a) {
|
|
@@ -17788,11 +17789,15 @@ var PopupContainer = styled.div(templateObject_1$k || (templateObject_1$k = __ma
|
|
|
17788
17789
|
}, function (_a) {
|
|
17789
17790
|
var x = _a.x;
|
|
17790
17791
|
return (x ? "".concat(x, "px") : "");
|
|
17791
|
-
},
|
|
17792
|
+
}, theme.colors.lightGray.dark, function (_a) {
|
|
17792
17793
|
var contrast = _a.contrast;
|
|
17793
17794
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17795
|
+
}, function (_a) {
|
|
17796
|
+
var noStyle = _a.noStyle;
|
|
17797
|
+
return noStyle &&
|
|
17798
|
+
"\n max-width: 100%;\n padding: 0;\n border-radius: 0;\n border: none;\n background-color: transparent;\n box-shadow: none;\n ";
|
|
17794
17799
|
});
|
|
17795
|
-
var templateObject_1$
|
|
17800
|
+
var templateObject_1$l;
|
|
17796
17801
|
|
|
17797
17802
|
var Popup = function (props) {
|
|
17798
17803
|
var popupRef = useRef(null);
|
|
@@ -17825,29 +17830,29 @@ var Popup = function (props) {
|
|
|
17825
17830
|
});
|
|
17826
17831
|
}
|
|
17827
17832
|
});
|
|
17828
|
-
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) &&
|
|
17833
|
+
return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, noStyle: props.noStyle, 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) &&
|
|
17829
17834
|
props.content.length > 0 &&
|
|
17830
|
-
props.content.map(function (item, index) { return (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: item }), "".concat(item, "-").concat(index))); })] }))] }));
|
|
17835
|
+
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] }))] }));
|
|
17831
17836
|
};
|
|
17832
17837
|
|
|
17833
|
-
var Wrapper = styled.div(templateObject_1$
|
|
17834
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
17838
|
+
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"])));
|
|
17839
|
+
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) {
|
|
17835
17840
|
var showInfo = _a.showInfo;
|
|
17836
17841
|
return (showInfo ? "10px" : "");
|
|
17837
17842
|
});
|
|
17838
|
-
var Indicator$1 = styled.div(templateObject_3$
|
|
17843
|
+
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) {
|
|
17839
17844
|
var percent = _a.percent;
|
|
17840
17845
|
return "calc(".concat(percent, "% - 6px)");
|
|
17841
17846
|
}, function (_a) {
|
|
17842
17847
|
var color = _a.color;
|
|
17843
17848
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17844
17849
|
});
|
|
17845
|
-
var templateObject_1$
|
|
17850
|
+
var templateObject_1$k, templateObject_2$j, templateObject_3$9;
|
|
17846
17851
|
|
|
17847
17852
|
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, "%") })))] })); };
|
|
17848
17853
|
|
|
17849
|
-
var Container$
|
|
17850
|
-
var Step$2 = styled.li(templateObject_2$
|
|
17854
|
+
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"])));
|
|
17855
|
+
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) {
|
|
17851
17856
|
var status = _a.status;
|
|
17852
17857
|
return (!!status ? "pointer" : "not-allowed");
|
|
17853
17858
|
}, function (_a) {
|
|
@@ -17869,9 +17874,9 @@ var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplat
|
|
|
17869
17874
|
var hasTitle = _a.hasTitle;
|
|
17870
17875
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17871
17876
|
}, theme.colors.lightGray.dark);
|
|
17872
|
-
var templateObject_1$
|
|
17877
|
+
var templateObject_1$j, templateObject_2$i;
|
|
17873
17878
|
|
|
17874
|
-
var Steps$2 = function (props) { return (jsx$1(Container$
|
|
17879
|
+
var Steps$2 = function (props) { return (jsx$1(Container$c, { children: props.steps.map(function (_a, index) {
|
|
17875
17880
|
var title = _a.title, onClick = _a.onClick;
|
|
17876
17881
|
var step = index + 1;
|
|
17877
17882
|
var status = props.current > step
|
|
@@ -17886,8 +17891,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.st
|
|
|
17886
17891
|
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)));
|
|
17887
17892
|
}) })); };
|
|
17888
17893
|
|
|
17889
|
-
var Container$
|
|
17890
|
-
var Step$1 = styled.li(templateObject_2$
|
|
17894
|
+
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"])));
|
|
17895
|
+
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) {
|
|
17891
17896
|
var status = _a.status;
|
|
17892
17897
|
return (!!status ? "pointer" : "not-allowed");
|
|
17893
17898
|
}, function (_a) {
|
|
@@ -17906,9 +17911,9 @@ var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplat
|
|
|
17906
17911
|
? theme.colors.lightGray.light
|
|
17907
17912
|
: theme.colors.darkGray.light;
|
|
17908
17913
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17909
|
-
var templateObject_1$
|
|
17914
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17910
17915
|
|
|
17911
|
-
var Steps$1 = function (props) { return (jsx$1(Container$
|
|
17916
|
+
var Steps$1 = function (props) { return (jsx$1(Container$b, { children: props.steps.map(function (_a, index) {
|
|
17912
17917
|
var title = _a.title, onClick = _a.onClick;
|
|
17913
17918
|
var step = index + 1;
|
|
17914
17919
|
var status = props.current > step
|
|
@@ -17927,15 +17932,15 @@ var Steps = function (props) {
|
|
|
17927
17932
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
17928
17933
|
};
|
|
17929
17934
|
|
|
17930
|
-
var TabsContainer$1 = styled.div(templateObject_1$
|
|
17931
|
-
var Tab$1 = styled.div(templateObject_2$
|
|
17935
|
+
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);
|
|
17936
|
+
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) {
|
|
17932
17937
|
var isActive = _a.isActive;
|
|
17933
17938
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
17934
17939
|
}, function (_a) {
|
|
17935
17940
|
var isActive = _a.isActive;
|
|
17936
17941
|
return isActive ? theme.colors.blue.base : "";
|
|
17937
17942
|
}, theme.colors.blue.base);
|
|
17938
|
-
var templateObject_1$
|
|
17943
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17939
17944
|
|
|
17940
17945
|
var Tabs$2 = function (_a) {
|
|
17941
17946
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17955,15 +17960,15 @@ var Tabs$2 = function (_a) {
|
|
|
17955
17960
|
}) }));
|
|
17956
17961
|
};
|
|
17957
17962
|
|
|
17958
|
-
var TabsContainer = styled.div(templateObject_1$
|
|
17959
|
-
var Tab = styled.div(templateObject_2$
|
|
17963
|
+
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);
|
|
17964
|
+
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) {
|
|
17960
17965
|
var isActive = _a.isActive;
|
|
17961
17966
|
return (isActive ? "block" : "none");
|
|
17962
17967
|
}, theme.colors.blue.base, function (_a) {
|
|
17963
17968
|
var isActive = _a.isActive;
|
|
17964
17969
|
return isActive ? theme.colors.blue.base : "";
|
|
17965
17970
|
}, theme.colors.blue.base);
|
|
17966
|
-
var templateObject_1$
|
|
17971
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17967
17972
|
|
|
17968
17973
|
var Tabs$1 = function (_a) {
|
|
17969
17974
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17987,14 +17992,14 @@ var Tabs = function (props) {
|
|
|
17987
17992
|
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
17988
17993
|
};
|
|
17989
17994
|
|
|
17990
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
17991
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
17992
|
-
var RadioWrapper = styled.div(templateObject_3$
|
|
17993
|
-
var Label$6 = styled(StyledParagraph)(templateObject_4$
|
|
17995
|
+
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"])));
|
|
17996
|
+
var RadioContainer = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
17997
|
+
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"])));
|
|
17998
|
+
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) {
|
|
17994
17999
|
var weight = _a.weight;
|
|
17995
18000
|
return weight || 500;
|
|
17996
18001
|
}, theme.colors.darkGray.base);
|
|
17997
|
-
var templateObject_1$
|
|
18002
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$8, templateObject_4$5;
|
|
17998
18003
|
|
|
17999
18004
|
var RadioGroup = function (props) {
|
|
18000
18005
|
var onChange = function (value) {
|
|
@@ -18011,9 +18016,9 @@ var RadioGroup = function (props) {
|
|
|
18011
18016
|
}) })] }));
|
|
18012
18017
|
};
|
|
18013
18018
|
|
|
18014
|
-
var Container$
|
|
18015
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
18016
|
-
var templateObject_1$
|
|
18019
|
+
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"])));
|
|
18020
|
+
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);
|
|
18021
|
+
var templateObject_1$e, templateObject_2$d;
|
|
18017
18022
|
|
|
18018
18023
|
var SelectField = function (props) {
|
|
18019
18024
|
var onChange = function (value) {
|
|
@@ -18024,15 +18029,15 @@ var SelectField = function (props) {
|
|
|
18024
18029
|
if (props.onBlur)
|
|
18025
18030
|
props.onBlur(props.name);
|
|
18026
18031
|
};
|
|
18027
|
-
return (jsxs(Container$
|
|
18032
|
+
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) {
|
|
18028
18033
|
var value = _a.value, label = _a.label;
|
|
18029
18034
|
return (jsx$1("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
18030
18035
|
}) }))] }));
|
|
18031
18036
|
};
|
|
18032
18037
|
|
|
18033
|
-
var Container$
|
|
18034
|
-
var Label$4 = styled(StyledParagraph)(templateObject_2$
|
|
18035
|
-
var templateObject_1$
|
|
18038
|
+
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"])));
|
|
18039
|
+
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);
|
|
18040
|
+
var templateObject_1$d, templateObject_2$c;
|
|
18036
18041
|
|
|
18037
18042
|
var ToggleField = function (props) {
|
|
18038
18043
|
var onChange = function (value) {
|
|
@@ -18043,10 +18048,10 @@ var ToggleField = function (props) {
|
|
|
18043
18048
|
if (props.onBlur)
|
|
18044
18049
|
props.onBlur(props.name);
|
|
18045
18050
|
};
|
|
18046
|
-
return (jsxs(Container$
|
|
18051
|
+
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 })] }));
|
|
18047
18052
|
};
|
|
18048
18053
|
|
|
18049
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
18054
|
+
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) {
|
|
18050
18055
|
var isVisible = _a.isVisible;
|
|
18051
18056
|
return (isVisible ? "100%" : "0%");
|
|
18052
18057
|
}, function (_a) {
|
|
@@ -18056,7 +18061,7 @@ var TooltipContainer = styled.div(templateObject_1$b || (templateObject_1$b = __
|
|
|
18056
18061
|
var x = _a.x;
|
|
18057
18062
|
return (x ? "".concat(x, "px") : "");
|
|
18058
18063
|
});
|
|
18059
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
18064
|
+
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) {
|
|
18060
18065
|
var color = _a.color;
|
|
18061
18066
|
switch (color) {
|
|
18062
18067
|
default:
|
|
@@ -18066,7 +18071,7 @@ var TooltipTitle = styled.div(templateObject_2$a || (templateObject_2$a = __make
|
|
|
18066
18071
|
return theme.colors.lightGray.dark;
|
|
18067
18072
|
}
|
|
18068
18073
|
});
|
|
18069
|
-
var templateObject_1$
|
|
18074
|
+
var templateObject_1$c, templateObject_2$b;
|
|
18070
18075
|
|
|
18071
18076
|
var Tooltip$2 = function (props) {
|
|
18072
18077
|
var tooltipRef = useRef(null);
|
|
@@ -47690,13 +47695,13 @@ var xAxis = {
|
|
|
47690
47695
|
domain: ["dataMin", "dataMax"],
|
|
47691
47696
|
};
|
|
47692
47697
|
|
|
47693
|
-
var Container$
|
|
47694
|
-
var Label$2 = styled.div(templateObject_2$
|
|
47695
|
-
var Dot = styled.div(templateObject_3$
|
|
47698
|
+
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);
|
|
47699
|
+
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"])));
|
|
47700
|
+
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) {
|
|
47696
47701
|
var color = _a.color;
|
|
47697
47702
|
return color;
|
|
47698
47703
|
});
|
|
47699
|
-
var templateObject_1$
|
|
47704
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$7;
|
|
47700
47705
|
|
|
47701
47706
|
var Tooltip = function (_a) {
|
|
47702
47707
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47725,7 +47730,7 @@ var Tooltip = function (_a) {
|
|
|
47725
47730
|
return "".concat(format$1(fromUnixTime(label), "MMMM", options));
|
|
47726
47731
|
}
|
|
47727
47732
|
};
|
|
47728
|
-
return (jsxs(Container$
|
|
47733
|
+
return (jsxs(Container$8, { children: [payload.map(function (_a, index) {
|
|
47729
47734
|
var name = _a.name, value = _a.value, stroke = _a.stroke;
|
|
47730
47735
|
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)));
|
|
47731
47736
|
}), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: renderLabel() }))] }));
|
|
@@ -47931,9 +47936,9 @@ var Chart = function (_a) {
|
|
|
47931
47936
|
}) }), period)] })), renderChart()] }));
|
|
47932
47937
|
};
|
|
47933
47938
|
|
|
47934
|
-
var Container$
|
|
47935
|
-
var Label$1 = styled(StyledParagraph)(templateObject_2$
|
|
47936
|
-
var templateObject_1$
|
|
47939
|
+
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"])));
|
|
47940
|
+
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);
|
|
47941
|
+
var templateObject_1$a, templateObject_2$9;
|
|
47937
47942
|
|
|
47938
47943
|
var TextareaField = function (props) {
|
|
47939
47944
|
var onChange = function (value) {
|
|
@@ -47944,12 +47949,12 @@ var TextareaField = function (props) {
|
|
|
47944
47949
|
if (props.onBlur)
|
|
47945
47950
|
props.onBlur(props.name);
|
|
47946
47951
|
};
|
|
47947
|
-
return (jsxs(Container$
|
|
47952
|
+
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))); })] })))] }));
|
|
47948
47953
|
};
|
|
47949
47954
|
|
|
47950
|
-
var Container$
|
|
47951
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
47952
|
-
var templateObject_1$
|
|
47955
|
+
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"])));
|
|
47956
|
+
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);
|
|
47957
|
+
var templateObject_1$9, templateObject_2$8;
|
|
47953
47958
|
|
|
47954
47959
|
var RangeField = function (props) {
|
|
47955
47960
|
var onChange = function (value) {
|
|
@@ -47960,25 +47965,25 @@ var RangeField = function (props) {
|
|
|
47960
47965
|
if (props.onBlur)
|
|
47961
47966
|
props.onBlur(props.name);
|
|
47962
47967
|
};
|
|
47963
|
-
return (jsxs(Container$
|
|
47968
|
+
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 })] }));
|
|
47964
47969
|
};
|
|
47965
47970
|
|
|
47966
47971
|
var FeedbackColors = {
|
|
47967
47972
|
success: theme.colors.green.base,
|
|
47968
47973
|
error: theme.colors.red.base,
|
|
47969
47974
|
};
|
|
47970
|
-
var FieldWrapper = styled.div(templateObject_1$
|
|
47975
|
+
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) {
|
|
47971
47976
|
var status = _a.status;
|
|
47972
47977
|
return FeedbackColors[status];
|
|
47973
47978
|
});
|
|
47974
|
-
var FeedbackWrapper = styled.div(templateObject_2$
|
|
47979
|
+
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) {
|
|
47975
47980
|
var status = _a.status;
|
|
47976
47981
|
return FeedbackColors[status];
|
|
47977
47982
|
}, function (_a) {
|
|
47978
47983
|
var status = _a.status;
|
|
47979
47984
|
return FeedbackColors[status];
|
|
47980
47985
|
});
|
|
47981
|
-
var templateObject_1$
|
|
47986
|
+
var templateObject_1$8, templateObject_2$7;
|
|
47982
47987
|
|
|
47983
47988
|
var WithValidation = function (_a) {
|
|
47984
47989
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -47991,10 +47996,10 @@ var WithValidation = function (_a) {
|
|
|
47991
47996
|
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 }))] }))] })));
|
|
47992
47997
|
};
|
|
47993
47998
|
|
|
47994
|
-
var FormWrapper = styled.form(templateObject_1$
|
|
47995
|
-
var DescriptionWrapper = styled.div(templateObject_2$
|
|
47996
|
-
var ButtonWrapper = styled.div(templateObject_3$
|
|
47997
|
-
var templateObject_1$
|
|
47999
|
+
var FormWrapper = styled.form(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1([""], [""])));
|
|
48000
|
+
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);
|
|
48001
|
+
var ButtonWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
48002
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6;
|
|
47998
48003
|
|
|
47999
48004
|
var Form = forwardRef(function (props, ref) {
|
|
48000
48005
|
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -48223,7 +48228,7 @@ var Form = forwardRef(function (props, ref) {
|
|
|
48223
48228
|
}) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
|
|
48224
48229
|
});
|
|
48225
48230
|
|
|
48226
|
-
var Container$
|
|
48231
|
+
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) {
|
|
48227
48232
|
var color = _a.color, active = _a.active;
|
|
48228
48233
|
if (active)
|
|
48229
48234
|
return theme.colors[color].dark;
|
|
@@ -48247,22 +48252,22 @@ var Container$4 = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeT
|
|
|
48247
48252
|
return theme.colors[color].base;
|
|
48248
48253
|
return "";
|
|
48249
48254
|
});
|
|
48250
|
-
var templateObject_1$
|
|
48255
|
+
var templateObject_1$6;
|
|
48251
48256
|
|
|
48252
|
-
var Key = function (props) {
|
|
48257
|
+
var Key$1 = function (props) {
|
|
48253
48258
|
var _a;
|
|
48254
|
-
return (jsx$1(Container$
|
|
48259
|
+
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))); })) })));
|
|
48255
48260
|
};
|
|
48256
48261
|
|
|
48257
|
-
var Container$
|
|
48258
|
-
var SpecialRow = styled.div(templateObject_2$
|
|
48259
|
-
var TopRow = styled.div(templateObject_3$
|
|
48260
|
-
var StartRow = styled.div(templateObject_4$
|
|
48261
|
-
var BottomRow = styled.div(templateObject_5$
|
|
48262
|
-
var SpacebarRow = styled.div(templateObject_6$
|
|
48263
|
-
var templateObject_1$
|
|
48262
|
+
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"])));
|
|
48263
|
+
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"])));
|
|
48264
|
+
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"])));
|
|
48265
|
+
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"])));
|
|
48266
|
+
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"])));
|
|
48267
|
+
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"])));
|
|
48268
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3;
|
|
48264
48269
|
|
|
48265
|
-
var Keyboard = function (props) {
|
|
48270
|
+
var Keyboard$1 = function (props) {
|
|
48266
48271
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
48267
48272
|
var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48268
48273
|
useEffect(function () {
|
|
@@ -48284,53 +48289,280 @@ var Keyboard = function (props) {
|
|
|
48284
48289
|
}, [props.keys]);
|
|
48285
48290
|
if (!keys)
|
|
48286
48291
|
return null;
|
|
48287
|
-
return (jsxs(Container$
|
|
48288
|
-
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 ||
|
|
48289
|
-
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 ||
|
|
48290
|
-
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 ||
|
|
48291
|
-
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 ||
|
|
48292
|
-
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 ||
|
|
48293
|
-
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 ||
|
|
48294
|
-
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 ||
|
|
48295
|
-
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 ||
|
|
48296
|
-
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 ||
|
|
48297
|
-
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 ||
|
|
48298
|
-
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 ||
|
|
48299
|
-
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 ||
|
|
48300
|
-
keys[65].character === props.activeKey }), jsx$1(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48301
|
-
keys[63].character === props.activeKey }), jsx$1(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48302
|
-
keys[61].character === props.activeKey }), jsx$1(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48303
|
-
keys[59].character === props.activeKey }), jsx$1(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48304
|
-
keys[69].character === props.activeKey }), jsx$1(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48305
|
-
keys[68].character === props.activeKey }), jsx$1(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48306
|
-
keys[58].character === props.activeKey }), jsx$1(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48307
|
-
keys[60].character === props.activeKey }), jsx$1(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48308
|
-
keys[62].character === props.activeKey }), jsx$1(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48309
|
-
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 ||
|
|
48310
|
-
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 ||
|
|
48311
|
-
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 ||
|
|
48312
|
-
keys[54].character === props.activeKey }), jsx$1(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48313
|
-
keys[52].character === props.activeKey }), jsx$1(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48314
|
-
keys[50].character === props.activeKey }), jsx$1(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48315
|
-
keys[48].character === props.activeKey }), jsx$1(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48316
|
-
keys[57].character === props.activeKey }), jsx$1(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48317
|
-
keys[56].character === props.activeKey }), jsx$1(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48318
|
-
keys[47].character === props.activeKey }), jsx$1(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48319
|
-
keys[49].character === props.activeKey }), jsx$1(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48320
|
-
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 ||
|
|
48321
|
-
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 ||
|
|
48322
|
-
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 ||
|
|
48323
|
-
keys[77].character === props.activeKey }), jsx$1(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48324
|
-
keys[75].character === props.activeKey }), jsx$1(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48325
|
-
keys[73].character === props.activeKey }), jsx$1(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48326
|
-
keys[71].character === props.activeKey }), jsx$1(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48327
|
-
keys[79].character === props.activeKey }), jsx$1(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48328
|
-
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 ||
|
|
48329
|
-
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 ||
|
|
48330
|
-
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 ||
|
|
48331
|
-
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 ||
|
|
48332
|
-
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, {})] })] }));
|
|
48333
|
-
};
|
|
48292
|
+
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 ||
|
|
48293
|
+
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 ||
|
|
48294
|
+
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 ||
|
|
48295
|
+
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 ||
|
|
48296
|
+
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 ||
|
|
48297
|
+
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 ||
|
|
48298
|
+
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 ||
|
|
48299
|
+
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 ||
|
|
48300
|
+
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 ||
|
|
48301
|
+
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 ||
|
|
48302
|
+
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 ||
|
|
48303
|
+
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 ||
|
|
48304
|
+
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 ||
|
|
48305
|
+
keys[65].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48306
|
+
keys[63].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48307
|
+
keys[61].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48308
|
+
keys[59].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48309
|
+
keys[69].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48310
|
+
keys[68].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48311
|
+
keys[58].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48312
|
+
keys[60].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48313
|
+
keys[62].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48314
|
+
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 ||
|
|
48315
|
+
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 ||
|
|
48316
|
+
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 ||
|
|
48317
|
+
keys[54].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48318
|
+
keys[52].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48319
|
+
keys[50].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48320
|
+
keys[48].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48321
|
+
keys[57].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48322
|
+
keys[56].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48323
|
+
keys[47].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48324
|
+
keys[49].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48325
|
+
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 ||
|
|
48326
|
+
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 ||
|
|
48327
|
+
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 ||
|
|
48328
|
+
keys[77].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48329
|
+
keys[75].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48330
|
+
keys[73].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48331
|
+
keys[71].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48332
|
+
keys[79].character === props.activeKey }), jsx$1(Key$1, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48333
|
+
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 ||
|
|
48334
|
+
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 ||
|
|
48335
|
+
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 ||
|
|
48336
|
+
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 ||
|
|
48337
|
+
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, {})] })] }));
|
|
48338
|
+
};
|
|
48339
|
+
|
|
48340
|
+
var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\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: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\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);
|
|
48341
|
+
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"])));
|
|
48342
|
+
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"])));
|
|
48343
|
+
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"])));
|
|
48344
|
+
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"])));
|
|
48345
|
+
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"])));
|
|
48346
|
+
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"])));
|
|
48347
|
+
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) {
|
|
48348
|
+
var align = _a.align;
|
|
48349
|
+
if (!align)
|
|
48350
|
+
return "center";
|
|
48351
|
+
else if (align === "left")
|
|
48352
|
+
return "flex-start";
|
|
48353
|
+
else
|
|
48354
|
+
return "flex-end";
|
|
48355
|
+
}, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, function (_a) {
|
|
48356
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48357
|
+
if (isActive && color)
|
|
48358
|
+
return theme.colors[color].light;
|
|
48359
|
+
else if (color)
|
|
48360
|
+
return theme.colors.lightGray.light;
|
|
48361
|
+
else
|
|
48362
|
+
return theme.colors.lightGray.base;
|
|
48363
|
+
}, function (_a) {
|
|
48364
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48365
|
+
if (isActive && color)
|
|
48366
|
+
return theme.colors[color].darker;
|
|
48367
|
+
else if (color)
|
|
48368
|
+
return theme.colors[color].dark;
|
|
48369
|
+
else
|
|
48370
|
+
return theme.colors.lightGray.darker;
|
|
48371
|
+
}, function (_a) {
|
|
48372
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48373
|
+
if (isActive)
|
|
48374
|
+
return "0 2px 0 ".concat(theme.colors[color].dark);
|
|
48375
|
+
else if (color)
|
|
48376
|
+
return "0 2px 0 ".concat(theme.colors[color].base);
|
|
48377
|
+
else
|
|
48378
|
+
return "0 2px 0 ".concat(theme.colors.lightGray.darker);
|
|
48379
|
+
}, function (_a) {
|
|
48380
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48381
|
+
if (isActive)
|
|
48382
|
+
return theme.colors[color].dark;
|
|
48383
|
+
else if (color)
|
|
48384
|
+
return theme.colors[color].base;
|
|
48385
|
+
else
|
|
48386
|
+
return theme.colors.lightGray.darker;
|
|
48387
|
+
}, function (_a) {
|
|
48388
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48389
|
+
if (isActive && color)
|
|
48390
|
+
return theme.colors[color].darker;
|
|
48391
|
+
else if (color)
|
|
48392
|
+
return theme.colors[color].dark;
|
|
48393
|
+
else
|
|
48394
|
+
return theme.colors.lightGray.darker;
|
|
48395
|
+
}, function (_a) {
|
|
48396
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48397
|
+
if (isActive && color)
|
|
48398
|
+
return theme.colors[color].darker;
|
|
48399
|
+
else if (color)
|
|
48400
|
+
return theme.colors[color].dark;
|
|
48401
|
+
else
|
|
48402
|
+
return theme.colors.lightGray.darker;
|
|
48403
|
+
});
|
|
48404
|
+
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;
|
|
48405
|
+
|
|
48406
|
+
var Keyboard = function (props) {
|
|
48407
|
+
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
48408
|
+
var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48409
|
+
useEffect(function () {
|
|
48410
|
+
if (!!props.keys) {
|
|
48411
|
+
var keys_1 = {};
|
|
48412
|
+
var shiftKeys_1 = { left: [], right: [] };
|
|
48413
|
+
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
48414
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
48415
|
+
keys_1[index] = { character: key, color: color };
|
|
48416
|
+
if (isShiftKey)
|
|
48417
|
+
shiftKeys_1[hand].push(key);
|
|
48418
|
+
}
|
|
48419
|
+
setKeys(keys_1);
|
|
48420
|
+
setShiftKeys(shiftKeys_1);
|
|
48421
|
+
}
|
|
48422
|
+
}, [props.keys]);
|
|
48423
|
+
var containsAny = function (arr1, arr2) {
|
|
48424
|
+
return arr1.some(function (v) { return arr2.includes(v); });
|
|
48425
|
+
};
|
|
48426
|
+
if (!keys)
|
|
48427
|
+
return jsx$1(Fragment$1, {});
|
|
48428
|
+
return (jsxs(Container$3, { children: [jsxs(Row1, { children: [jsx$1(Key, {}), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48429
|
+
keys[89].character,
|
|
48430
|
+
keys[44].character,
|
|
48431
|
+
]) }, { children: [keys[89].character, jsx$1("br", {}), keys[44].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48432
|
+
keys[87].character,
|
|
48433
|
+
keys[42].character,
|
|
48434
|
+
]) }, { children: [keys[87].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48435
|
+
keys[85].character,
|
|
48436
|
+
keys[40].character,
|
|
48437
|
+
]) }, { children: [keys[85].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48438
|
+
keys[83].character,
|
|
48439
|
+
keys[38].character,
|
|
48440
|
+
]) }, { children: [keys[83].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48441
|
+
keys[81].character,
|
|
48442
|
+
keys[36].character,
|
|
48443
|
+
]) }, { children: [keys[81].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48444
|
+
keys[91].character,
|
|
48445
|
+
keys[46].character,
|
|
48446
|
+
]) }, { children: [keys[91].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48447
|
+
keys[90].character,
|
|
48448
|
+
keys[45].character,
|
|
48449
|
+
]) }, { children: [keys[90].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48450
|
+
keys[80].character,
|
|
48451
|
+
keys[35].character,
|
|
48452
|
+
]) }, { children: [keys[80].character, jsx$1("br", {}), keys[35].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48453
|
+
keys[82].character,
|
|
48454
|
+
keys[37].character,
|
|
48455
|
+
]) }, { children: [keys[82].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48456
|
+
keys[84].character,
|
|
48457
|
+
keys[39].character,
|
|
48458
|
+
]) }, { children: [keys[84].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48459
|
+
keys[86].character,
|
|
48460
|
+
keys[41].character,
|
|
48461
|
+
]) }, { children: [keys[86].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48462
|
+
keys[88].character,
|
|
48463
|
+
keys[43].character,
|
|
48464
|
+
]) }, { 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, [
|
|
48465
|
+
keys[65].character,
|
|
48466
|
+
keys[20].character,
|
|
48467
|
+
]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48468
|
+
keys[63].character,
|
|
48469
|
+
keys[18].character,
|
|
48470
|
+
]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48471
|
+
keys[61].character,
|
|
48472
|
+
keys[16].character,
|
|
48473
|
+
]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48474
|
+
keys[59].character,
|
|
48475
|
+
keys[14].character,
|
|
48476
|
+
]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48477
|
+
keys[69].character,
|
|
48478
|
+
keys[24].character,
|
|
48479
|
+
]) }, { children: keys[69].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48480
|
+
keys[68].character,
|
|
48481
|
+
keys[23].character,
|
|
48482
|
+
]) }, { children: keys[68].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48483
|
+
keys[58].character,
|
|
48484
|
+
keys[13].character,
|
|
48485
|
+
]) }, { children: keys[58].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48486
|
+
keys[60].character,
|
|
48487
|
+
keys[15].character,
|
|
48488
|
+
]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48489
|
+
keys[62].character,
|
|
48490
|
+
keys[17].character,
|
|
48491
|
+
]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48492
|
+
keys[64].character,
|
|
48493
|
+
keys[19].character,
|
|
48494
|
+
]) }, { children: keys[64].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48495
|
+
keys[67].character,
|
|
48496
|
+
keys[22].character,
|
|
48497
|
+
]) }, { children: [keys[67].character, jsx$1("br", {}), keys[22].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48498
|
+
keys[66].character,
|
|
48499
|
+
keys[21].character,
|
|
48500
|
+
]) }, { 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, [
|
|
48501
|
+
keys[54].character,
|
|
48502
|
+
keys[9].character,
|
|
48503
|
+
]) }, { children: keys[54].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48504
|
+
keys[52].character,
|
|
48505
|
+
keys[7].character,
|
|
48506
|
+
]) }, { children: keys[52].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48507
|
+
keys[50].character,
|
|
48508
|
+
keys[5].character,
|
|
48509
|
+
]) }, { children: keys[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48510
|
+
keys[48].character,
|
|
48511
|
+
keys[3].character,
|
|
48512
|
+
]) }, { children: keys[48].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48513
|
+
keys[57].character,
|
|
48514
|
+
keys[12].character,
|
|
48515
|
+
]) }, { children: keys[57].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48516
|
+
keys[56].character,
|
|
48517
|
+
keys[11].character,
|
|
48518
|
+
]) }, { children: keys[56].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48519
|
+
keys[47].character,
|
|
48520
|
+
keys[2].character,
|
|
48521
|
+
]) }, { children: keys[47].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48522
|
+
keys[49].character,
|
|
48523
|
+
keys[4].character,
|
|
48524
|
+
]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48525
|
+
keys[51].character,
|
|
48526
|
+
keys[6].character,
|
|
48527
|
+
]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48528
|
+
keys[53].character,
|
|
48529
|
+
keys[8].character,
|
|
48530
|
+
]) }, { children: keys[53].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48531
|
+
keys[55].character,
|
|
48532
|
+
keys[10].character,
|
|
48533
|
+
]) }, { 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, [
|
|
48534
|
+
keys[77].character,
|
|
48535
|
+
keys[32].character,
|
|
48536
|
+
]) }, { children: keys[77].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48537
|
+
keys[75].character,
|
|
48538
|
+
keys[30].character,
|
|
48539
|
+
]) }, { children: keys[75].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48540
|
+
keys[73].character,
|
|
48541
|
+
keys[28].character,
|
|
48542
|
+
]) }, { children: keys[73].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48543
|
+
keys[71].character,
|
|
48544
|
+
keys[26].character,
|
|
48545
|
+
]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48546
|
+
keys[79].character,
|
|
48547
|
+
keys[34].character,
|
|
48548
|
+
]) }, { children: keys[79].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48549
|
+
keys[78].character,
|
|
48550
|
+
keys[30].character,
|
|
48551
|
+
]) }, { children: keys[78].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48552
|
+
keys[70].character,
|
|
48553
|
+
keys[25].character,
|
|
48554
|
+
]) }, { 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, [
|
|
48555
|
+
keys[72].character,
|
|
48556
|
+
keys[27].character,
|
|
48557
|
+
]) }, { children: [keys[72].character, jsx$1("br", {}), keys[27].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48558
|
+
keys[74].character,
|
|
48559
|
+
keys[29].character,
|
|
48560
|
+
]) }, { children: [keys[74].character, jsx$1("br", {}), keys[29].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48561
|
+
keys[76].character,
|
|
48562
|
+
keys[31].character,
|
|
48563
|
+
]) }, { 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, {})] })] }));
|
|
48564
|
+
};
|
|
48565
|
+
Keyboard.Legacy = Keyboard$1;
|
|
48334
48566
|
|
|
48335
48567
|
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"])));
|
|
48336
48568
|
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) {
|
|
@@ -48536,5 +48768,5 @@ var Transfer = function (props) {
|
|
|
48536
48768
|
}) }) }, selectedTargetKeys)] }))] }));
|
|
48537
48769
|
};
|
|
48538
48770
|
|
|
48539
|
-
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$
|
|
48771
|
+
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 };
|
|
48540
48772
|
//# sourceMappingURL=index.es.js.map
|