@typeolymp/ui-components 1.19.39 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/molecules/Popup/index.d.ts +1 -1
- package/build/components/organisms/Keyboard/Legacy/Key/index.d.ts +8 -0
- package/build/components/organisms/Keyboard/Legacy/Key/styles.d.ts +1 -0
- package/build/components/organisms/Keyboard/Legacy/index.d.ts +14 -0
- package/build/components/organisms/Keyboard/Legacy/styles.d.ts +6 -0
- package/build/components/organisms/Keyboard/index.d.ts +8 -5
- package/build/components/organisms/Keyboard/stories.d.ts +4 -2
- package/build/components/organisms/Keyboard/styles.d.ts +6 -5
- package/build/index.es.js +491 -251
- package/build/index.es.js.map +1 -1
- package/build/index.js +491 -251
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3467,14 +3467,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3467
3467
|
var React$2 = __importStar$2(React__default["default"]);
|
|
3468
3468
|
var react_1 = require$$1;
|
|
3469
3469
|
var helpers_1 = helpers$1;
|
|
3470
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3470
|
+
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"])));
|
|
3471
3471
|
var Loader = /** @class */ (function (_super) {
|
|
3472
3472
|
__extends$2(Loader, _super);
|
|
3473
3473
|
function Loader() {
|
|
3474
3474
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3475
3475
|
_this.style = function (i) {
|
|
3476
3476
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3477
|
-
return react_1.css(templateObject_2$
|
|
3477
|
+
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");
|
|
3478
3478
|
};
|
|
3479
3479
|
return _this;
|
|
3480
3480
|
}
|
|
@@ -3489,9 +3489,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3489
3489
|
return Loader;
|
|
3490
3490
|
}(React$2.PureComponent));
|
|
3491
3491
|
var _default$1 = BeatLoader.default = Loader;
|
|
3492
|
-
var templateObject_1$
|
|
3492
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
3493
3493
|
|
|
3494
|
-
var Wrapper$a = styled__default["default"].div(templateObject_1$
|
|
3494
|
+
var Wrapper$a = styled__default["default"].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) {
|
|
3495
3495
|
var size = _a.size;
|
|
3496
3496
|
return theme.icon[size] || theme.icon.medium;
|
|
3497
3497
|
}, function (_a) {
|
|
@@ -3549,7 +3549,7 @@ var Wrapper$a = styled__default["default"].div(templateObject_1$W || (templateOb
|
|
|
3549
3549
|
return theme.colors.lightGray.base;
|
|
3550
3550
|
}
|
|
3551
3551
|
});
|
|
3552
|
-
var templateObject_1$
|
|
3552
|
+
var templateObject_1$X;
|
|
3553
3553
|
|
|
3554
3554
|
var icons = {
|
|
3555
3555
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -3598,10 +3598,11 @@ var icons = {
|
|
|
3598
3598
|
login: (jsxRuntime.jsxs("g", __assign$2({ style: { transform: "rotate(270deg)", transformOrigin: "50%" } }, { children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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" })] }))),
|
|
3599
3599
|
logout: (jsxRuntime.jsxs("g", __assign$2({ style: { transform: "rotate(90deg)", transformOrigin: "50%" } }, { children: [jsxRuntime.jsx("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" }), jsxRuntime.jsx("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" })] }))),
|
|
3600
3600
|
edit: (jsxRuntime.jsx("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" })),
|
|
3601
|
+
keyboard: (jsxRuntime.jsx("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" })),
|
|
3601
3602
|
};
|
|
3602
3603
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$a, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3603
3604
|
|
|
3604
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
3605
|
+
var StyledButton = styled__default["default"].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) {
|
|
3605
3606
|
var fluid = _a.fluid;
|
|
3606
3607
|
return (fluid ? "100%" : "fit-content");
|
|
3607
3608
|
}, function (_a) {
|
|
@@ -3655,11 +3656,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$V || (temp
|
|
|
3655
3656
|
? theme.button.medium.heightActive
|
|
3656
3657
|
: theme.button[size].heightActive;
|
|
3657
3658
|
});
|
|
3658
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3659
|
+
var DisabledButton = styled__default["default"](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) {
|
|
3659
3660
|
var size = _a.size;
|
|
3660
3661
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3661
3662
|
});
|
|
3662
|
-
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$
|
|
3663
|
+
var GhostButton = styled__default["default"](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) {
|
|
3663
3664
|
var size = _a.size;
|
|
3664
3665
|
return !size
|
|
3665
3666
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3675,23 +3676,23 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$f ||
|
|
|
3675
3676
|
? theme.button.medium.marginTopActive
|
|
3676
3677
|
: theme.button[size].marginTopActive;
|
|
3677
3678
|
});
|
|
3678
|
-
var LoaderWrapper = styled__default["default"].div(templateObject_4$
|
|
3679
|
+
var LoaderWrapper = styled__default["default"].div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3679
3680
|
var width = _a.width;
|
|
3680
3681
|
return "".concat(width, "px");
|
|
3681
3682
|
}, function (_a) {
|
|
3682
3683
|
var size = _a.size;
|
|
3683
3684
|
return (size === "small" ? "3px" : "");
|
|
3684
3685
|
});
|
|
3685
|
-
var templateObject_1$
|
|
3686
|
+
var templateObject_1$W, templateObject_2$E, templateObject_3$g, templateObject_4$9;
|
|
3686
3687
|
|
|
3687
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
3688
|
+
var StyledSpacer = styled__default["default"].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) {
|
|
3688
3689
|
var horizontal = _a.horizontal;
|
|
3689
3690
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
3690
3691
|
}, function (_a) {
|
|
3691
3692
|
var vertical = _a.vertical;
|
|
3692
3693
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
3693
3694
|
});
|
|
3694
|
-
var templateObject_1$
|
|
3695
|
+
var templateObject_1$V;
|
|
3695
3696
|
|
|
3696
3697
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign$2({}, props))); };
|
|
3697
3698
|
|
|
@@ -3739,7 +3740,7 @@ var Button = React$3.forwardRef(function (_a, ref) {
|
|
|
3739
3740
|
return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsxRuntime.jsx(Loader, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && renderIcon({ color: "white" }), jsxRuntime.jsx("span", { children: label })] })) })));
|
|
3740
3741
|
});
|
|
3741
3742
|
|
|
3742
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
3743
|
+
var StyledCheckbox = styled__default["default"].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) {
|
|
3743
3744
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3744
3745
|
if (disabled)
|
|
3745
3746
|
return theme.colors.lightGray.darker;
|
|
@@ -3760,7 +3761,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$T || (templ
|
|
|
3760
3761
|
return theme.colors.green.base;
|
|
3761
3762
|
return theme.colors.lightGray.darker;
|
|
3762
3763
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3763
|
-
var templateObject_1$
|
|
3764
|
+
var templateObject_1$U;
|
|
3764
3765
|
|
|
3765
3766
|
var Checkbox = function (props) {
|
|
3766
3767
|
var _a;
|
|
@@ -3793,7 +3794,7 @@ var Checkbox = function (props) {
|
|
|
3793
3794
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3794
3795
|
};
|
|
3795
3796
|
|
|
3796
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
3797
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3797
3798
|
var size = _a.size;
|
|
3798
3799
|
switch (size) {
|
|
3799
3800
|
case "small":
|
|
@@ -3816,7 +3817,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$S || (templateOb
|
|
|
3816
3817
|
return "27px";
|
|
3817
3818
|
}
|
|
3818
3819
|
});
|
|
3819
|
-
var templateObject_1$
|
|
3820
|
+
var templateObject_1$T;
|
|
3820
3821
|
|
|
3821
3822
|
var parsers = {};
|
|
3822
3823
|
|
|
@@ -4212,7 +4213,7 @@ var flags = {
|
|
|
4212
4213
|
};
|
|
4213
4214
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign$2({}, props, { children: flags[parsers.getCountryCodeByLocale(props.locale)] }))); };
|
|
4214
4215
|
|
|
4215
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
4216
|
+
var StyledHeading = styled__default["default"].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) {
|
|
4216
4217
|
var type = _a.type;
|
|
4217
4218
|
return theme.heading[type].fontSize;
|
|
4218
4219
|
}, function (_a) {
|
|
@@ -4239,14 +4240,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$R || (templ
|
|
|
4239
4240
|
var decoration = _a.decoration;
|
|
4240
4241
|
return decoration;
|
|
4241
4242
|
});
|
|
4242
|
-
var templateObject_1$
|
|
4243
|
+
var templateObject_1$S;
|
|
4243
4244
|
|
|
4244
4245
|
var Heading = function (props) {
|
|
4245
4246
|
var element = !!props.as ? props.as : props.type;
|
|
4246
4247
|
return (jsxRuntime.jsx(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
4247
4248
|
};
|
|
4248
4249
|
|
|
4249
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
4250
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
4250
4251
|
var size = _a.size;
|
|
4251
4252
|
switch (size) {
|
|
4252
4253
|
case "tiny":
|
|
@@ -4260,7 +4261,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$Q || (templateOb
|
|
|
4260
4261
|
return "118px";
|
|
4261
4262
|
}
|
|
4262
4263
|
});
|
|
4263
|
-
var templateObject_1$
|
|
4264
|
+
var templateObject_1$R;
|
|
4264
4265
|
|
|
4265
4266
|
var illustrations = {
|
|
4266
4267
|
keyboard: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -4282,7 +4283,7 @@ var illustrations = {
|
|
|
4282
4283
|
};
|
|
4283
4284
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4284
4285
|
|
|
4285
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
4286
|
+
var StyledParagraph = styled__default["default"].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) {
|
|
4286
4287
|
var size = _a.size;
|
|
4287
4288
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4288
4289
|
}, function (_a) {
|
|
@@ -4320,10 +4321,10 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$P || (templa
|
|
|
4320
4321
|
var decoration = _a.decoration;
|
|
4321
4322
|
return decoration;
|
|
4322
4323
|
});
|
|
4323
|
-
var templateObject_1$
|
|
4324
|
+
var templateObject_1$Q;
|
|
4324
4325
|
|
|
4325
|
-
var Container$
|
|
4326
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4326
|
+
var Container$r = styled__default["default"].div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4327
|
+
var InputIconWrapper = styled__default["default"].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) {
|
|
4327
4328
|
var size = _a.size;
|
|
4328
4329
|
switch (size) {
|
|
4329
4330
|
case "small":
|
|
@@ -4366,7 +4367,7 @@ var InputIconWrapper = styled__default["default"].div(templateObject_2$C || (tem
|
|
|
4366
4367
|
return "24px";
|
|
4367
4368
|
}
|
|
4368
4369
|
});
|
|
4369
|
-
var StyledInput = styled__default["default"].input(templateObject_3$
|
|
4370
|
+
var StyledInput = styled__default["default"].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) {
|
|
4370
4371
|
var size = _a.size;
|
|
4371
4372
|
switch (size) {
|
|
4372
4373
|
case "small":
|
|
@@ -4388,13 +4389,13 @@ var StyledInput = styled__default["default"].input(templateObject_3$e || (templa
|
|
|
4388
4389
|
var disabled = _a.disabled;
|
|
4389
4390
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4390
4391
|
}, 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));
|
|
4391
|
-
var HelperContainer = styled__default["default"].div(templateObject_4$
|
|
4392
|
-
var fadeIn = styled.keyframes(templateObject_5$
|
|
4393
|
-
var Helper = styled__default["default"](StyledParagraph)(templateObject_6$
|
|
4392
|
+
var HelperContainer = styled__default["default"].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"])));
|
|
4393
|
+
var fadeIn = styled.keyframes(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"])));
|
|
4394
|
+
var Helper = styled__default["default"](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) {
|
|
4394
4395
|
var isOk = _a.isOk;
|
|
4395
4396
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4396
4397
|
}, fadeIn);
|
|
4397
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$f, templateObject_4$8, templateObject_5$4, templateObject_6$4;
|
|
4398
4399
|
|
|
4399
4400
|
var expressions = {};
|
|
4400
4401
|
|
|
@@ -4557,7 +4558,7 @@ var PasswordInput = function (props) {
|
|
|
4557
4558
|
if (props.onKeyPress)
|
|
4558
4559
|
props.onKeyPress(e);
|
|
4559
4560
|
};
|
|
4560
|
-
return (jsxRuntime.jsxs(Container$
|
|
4561
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsxRuntime.jsx(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
|
|
4561
4562
|
};
|
|
4562
4563
|
|
|
4563
4564
|
function toInteger$2(dirtyNumber) {
|
|
@@ -8059,7 +8060,7 @@ var SearchInput = function (props) {
|
|
|
8059
8060
|
if (value.length <= 0)
|
|
8060
8061
|
onSearch();
|
|
8061
8062
|
};
|
|
8062
|
-
return (jsxRuntime.jsx(Container$
|
|
8063
|
+
return (jsxRuntime.jsx(Container$r, { children: jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsxRuntime.jsx(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsxRuntime.jsx(StyledInput, __assign$2({ type: "text" }, rest, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
|
|
8063
8064
|
};
|
|
8064
8065
|
|
|
8065
8066
|
var Input = function (props) {
|
|
@@ -8075,7 +8076,7 @@ Input.Search = SearchInput;
|
|
|
8075
8076
|
|
|
8076
8077
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsxRuntime.jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsxRuntime.jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsxRuntime.jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsxRuntime.jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxRuntime.jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsxRuntime.jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsxRuntime.jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
8077
8078
|
|
|
8078
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
8079
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
8079
8080
|
var size = _a.size;
|
|
8080
8081
|
switch (size) {
|
|
8081
8082
|
default:
|
|
@@ -8085,7 +8086,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$N || (templateOb
|
|
|
8085
8086
|
return "116px";
|
|
8086
8087
|
}
|
|
8087
8088
|
});
|
|
8088
|
-
var templateObject_1$
|
|
8089
|
+
var templateObject_1$O;
|
|
8089
8090
|
|
|
8090
8091
|
var medals = {
|
|
8091
8092
|
small: {
|
|
@@ -8101,11 +8102,11 @@ var medals = {
|
|
|
8101
8102
|
};
|
|
8102
8103
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
8103
8104
|
|
|
8104
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
8105
|
+
var Wrapper$6 = styled__default["default"].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) {
|
|
8105
8106
|
var disabled = _a.disabled;
|
|
8106
8107
|
return (disabled ? "49.5px" : "");
|
|
8107
8108
|
});
|
|
8108
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
8109
|
+
var StyledInputNumber = styled__default["default"].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) {
|
|
8109
8110
|
var disabled = _a.disabled;
|
|
8110
8111
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8111
8112
|
}, function (_a) {
|
|
@@ -8118,7 +8119,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$B || (
|
|
|
8118
8119
|
var disabled = _a.disabled;
|
|
8119
8120
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8120
8121
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8121
|
-
var templateObject_1$
|
|
8122
|
+
var templateObject_1$N, templateObject_2$C;
|
|
8122
8123
|
|
|
8123
8124
|
var Number$1 = function (props) {
|
|
8124
8125
|
var inputRef = React$3.useRef(null);
|
|
@@ -8162,7 +8163,7 @@ var Number$1 = function (props) {
|
|
|
8162
8163
|
|
|
8163
8164
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
8164
8165
|
|
|
8165
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
8166
|
+
var StyledRadio = styled__default["default"].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) {
|
|
8166
8167
|
var checked = _a.checked, disabled = _a.disabled;
|
|
8167
8168
|
if (disabled)
|
|
8168
8169
|
return theme.colors.lightGray.darker;
|
|
@@ -8190,7 +8191,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$L || (template
|
|
|
8190
8191
|
return theme.colors.green.base;
|
|
8191
8192
|
return "";
|
|
8192
8193
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8193
|
-
var templateObject_1$
|
|
8194
|
+
var templateObject_1$M;
|
|
8194
8195
|
|
|
8195
8196
|
var Radio = function (props) {
|
|
8196
8197
|
var _a, _b;
|
|
@@ -8222,7 +8223,7 @@ var Radio = function (props) {
|
|
|
8222
8223
|
return (jsxRuntime.jsx(StyledRadio, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
8223
8224
|
};
|
|
8224
8225
|
|
|
8225
|
-
var StyledRange = styled__default["default"].div(templateObject_1$
|
|
8226
|
+
var StyledRange = styled__default["default"].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) {
|
|
8226
8227
|
var value = _a.value, disabled = _a.disabled;
|
|
8227
8228
|
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 )");
|
|
8228
8229
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -8232,7 +8233,7 @@ var StyledRange = styled__default["default"].div(templateObject_1$K || (template
|
|
|
8232
8233
|
var disabled = _a.disabled;
|
|
8233
8234
|
return disabled ? "not-allowed" : "pointer";
|
|
8234
8235
|
});
|
|
8235
|
-
var templateObject_1$
|
|
8236
|
+
var templateObject_1$L;
|
|
8236
8237
|
|
|
8237
8238
|
var Range = function (props) {
|
|
8238
8239
|
var _a;
|
|
@@ -8261,11 +8262,11 @@ var Range = function (props) {
|
|
|
8261
8262
|
return (jsxRuntime.jsx(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsxRuntime.jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
8262
8263
|
};
|
|
8263
8264
|
|
|
8264
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
8265
|
+
var Wrapper$5 = styled__default["default"].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) {
|
|
8265
8266
|
var disabled = _a.disabled;
|
|
8266
8267
|
return (disabled ? "not-allowed" : "pointer");
|
|
8267
8268
|
});
|
|
8268
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
8269
|
+
var StyledSelect = styled__default["default"].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) {
|
|
8269
8270
|
var disabled = _a.disabled;
|
|
8270
8271
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8271
8272
|
}, function (_a) {
|
|
@@ -8278,7 +8279,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$A || (temp
|
|
|
8278
8279
|
var isChanged = _a.isChanged;
|
|
8279
8280
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8280
8281
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8281
|
-
var templateObject_1$
|
|
8282
|
+
var templateObject_1$K, templateObject_2$B;
|
|
8282
8283
|
|
|
8283
8284
|
var Select = function (props) {
|
|
8284
8285
|
var _a;
|
|
@@ -8300,7 +8301,7 @@ var Select = function (props) {
|
|
|
8300
8301
|
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxRuntime.jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
8301
8302
|
};
|
|
8302
8303
|
|
|
8303
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
8304
|
+
var StyledSubheading = styled__default["default"].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) {
|
|
8304
8305
|
var size = _a.size;
|
|
8305
8306
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
8306
8307
|
}, function (_a) {
|
|
@@ -8328,11 +8329,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$I || (templ
|
|
|
8328
8329
|
return theme.colors.darkGray.dark;
|
|
8329
8330
|
}
|
|
8330
8331
|
});
|
|
8331
|
-
var templateObject_1$
|
|
8332
|
+
var templateObject_1$J;
|
|
8332
8333
|
|
|
8333
8334
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
8334
8335
|
|
|
8335
|
-
var Container$
|
|
8336
|
+
var Container$q = styled__default["default"].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) {
|
|
8336
8337
|
var color = _a.color;
|
|
8337
8338
|
if (!color)
|
|
8338
8339
|
return theme.colors.lightGray.base;
|
|
@@ -8353,14 +8354,14 @@ var Container$p = styled__default["default"].div(templateObject_1$H || (template
|
|
|
8353
8354
|
return theme.colors.darkGray.light;
|
|
8354
8355
|
return theme.colors[color].darker;
|
|
8355
8356
|
});
|
|
8356
|
-
var templateObject_1$
|
|
8357
|
+
var templateObject_1$I;
|
|
8357
8358
|
|
|
8358
8359
|
var Tag = function (_a) {
|
|
8359
8360
|
var color = _a.color, children = _a.children;
|
|
8360
|
-
return jsxRuntime.jsx(Container$
|
|
8361
|
+
return jsxRuntime.jsx(Container$q, __assign$2({ color: color }, { children: children }));
|
|
8361
8362
|
};
|
|
8362
8363
|
|
|
8363
|
-
var StyledTextarea = styled__default["default"].textarea(templateObject_1$
|
|
8364
|
+
var StyledTextarea = styled__default["default"].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) {
|
|
8364
8365
|
var disabled = _a.disabled;
|
|
8365
8366
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8366
8367
|
}, function (_a) {
|
|
@@ -8373,7 +8374,7 @@ var StyledTextarea = styled__default["default"].textarea(templateObject_1$G || (
|
|
|
8373
8374
|
var disabled = _a.disabled;
|
|
8374
8375
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8375
8376
|
}, 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));
|
|
8376
|
-
var templateObject_1$
|
|
8377
|
+
var templateObject_1$H;
|
|
8377
8378
|
|
|
8378
8379
|
var Textarea = function (props) {
|
|
8379
8380
|
var onChange = function (e) {
|
|
@@ -8383,7 +8384,7 @@ var Textarea = function (props) {
|
|
|
8383
8384
|
return jsxRuntime.jsx(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
8384
8385
|
};
|
|
8385
8386
|
|
|
8386
|
-
var Container$
|
|
8387
|
+
var Container$p = styled__default["default"].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) {
|
|
8387
8388
|
var disabled = _a.disabled;
|
|
8388
8389
|
return (disabled ? "not-allowed" : "pointer");
|
|
8389
8390
|
}, function (_a) {
|
|
@@ -8401,7 +8402,7 @@ var Container$o = styled__default["default"].div(templateObject_1$F || (template
|
|
|
8401
8402
|
var disabled = _a.disabled;
|
|
8402
8403
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
8403
8404
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8404
|
-
var templateObject_1$
|
|
8405
|
+
var templateObject_1$G;
|
|
8405
8406
|
|
|
8406
8407
|
var Toggle = function (props) {
|
|
8407
8408
|
var _a;
|
|
@@ -8429,10 +8430,10 @@ var Toggle = function (props) {
|
|
|
8429
8430
|
props.onChange(newValue);
|
|
8430
8431
|
}
|
|
8431
8432
|
};
|
|
8432
|
-
return (jsxRuntime.jsx(Container$
|
|
8433
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
8433
8434
|
};
|
|
8434
8435
|
|
|
8435
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
8436
|
+
var Wrapper$4 = styled__default["default"].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) {
|
|
8436
8437
|
var level = _a.level;
|
|
8437
8438
|
switch (level) {
|
|
8438
8439
|
case 1:
|
|
@@ -8443,7 +8444,7 @@ var Wrapper$4 = styled__default["default"].div(templateObject_1$E || (templateOb
|
|
|
8443
8444
|
return "70px";
|
|
8444
8445
|
}
|
|
8445
8446
|
});
|
|
8446
|
-
var templateObject_1$
|
|
8447
|
+
var templateObject_1$F;
|
|
8447
8448
|
|
|
8448
8449
|
var trophies = {
|
|
8449
8450
|
1: {
|
|
@@ -8479,7 +8480,7 @@ var trophies = {
|
|
|
8479
8480
|
};
|
|
8480
8481
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
8481
8482
|
|
|
8482
|
-
var Container$
|
|
8483
|
+
var Container$o = styled__default["default"].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) {
|
|
8483
8484
|
var type = _a.type;
|
|
8484
8485
|
switch (type) {
|
|
8485
8486
|
case "success":
|
|
@@ -8500,7 +8501,7 @@ var Container$n = styled__default["default"].div(templateObject_1$D || (template
|
|
|
8500
8501
|
return theme.colors.blue.base;
|
|
8501
8502
|
}
|
|
8502
8503
|
});
|
|
8503
|
-
var Action = styled__default["default"].div(templateObject_2$
|
|
8504
|
+
var Action = styled__default["default"].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) {
|
|
8504
8505
|
var type = _a.type;
|
|
8505
8506
|
switch (type) {
|
|
8506
8507
|
default:
|
|
@@ -8512,7 +8513,7 @@ var Action = styled__default["default"].div(templateObject_2$z || (templateObjec
|
|
|
8512
8513
|
return theme.colors.blue.dark;
|
|
8513
8514
|
}
|
|
8514
8515
|
});
|
|
8515
|
-
var templateObject_1$
|
|
8516
|
+
var templateObject_1$E, templateObject_2$A;
|
|
8516
8517
|
|
|
8517
8518
|
var Alert = function (props) {
|
|
8518
8519
|
var _a = React$3.useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8532,10 +8533,10 @@ var Alert = function (props) {
|
|
|
8532
8533
|
icon = "infoCircle";
|
|
8533
8534
|
if (!isOpen)
|
|
8534
8535
|
return null;
|
|
8535
|
-
return (jsxRuntime.jsxs(Container$
|
|
8536
|
+
return (jsxRuntime.jsxs(Container$o, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: icon, color: color }), jsxRuntime.jsx(Paragraph, { children: props.message }), props.action && (jsxRuntime.jsx(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsxRuntime.jsx(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsxRuntime.jsx("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsxRuntime.jsx(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
|
|
8536
8537
|
};
|
|
8537
8538
|
|
|
8538
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
8539
|
+
var StyledCard = styled__default["default"].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) {
|
|
8539
8540
|
var bordered = _a.bordered;
|
|
8540
8541
|
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
8541
8542
|
}, function (_a) {
|
|
@@ -8547,12 +8548,12 @@ var StyledCard = styled__default["default"].div(templateObject_1$C || (templateO
|
|
|
8547
8548
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8548
8549
|
: "";
|
|
8549
8550
|
});
|
|
8550
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
8551
|
+
var Ellipse = styled__default["default"].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) {
|
|
8551
8552
|
var color = _a.color;
|
|
8552
8553
|
return color ? theme.colors[color].light : "";
|
|
8553
8554
|
});
|
|
8554
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
8555
|
-
var templateObject_1$
|
|
8555
|
+
var Content = styled__default["default"].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"])));
|
|
8556
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$e;
|
|
8556
8557
|
|
|
8557
8558
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
8558
8559
|
|
|
@@ -14801,14 +14802,14 @@ htmlReactParser.Element;
|
|
|
14801
14802
|
htmlReactParser.ProcessingInstruction;
|
|
14802
14803
|
htmlReactParser.Text;
|
|
14803
14804
|
|
|
14804
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
14805
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
14806
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
14807
|
-
var Label$b = styled__default["default"](StyledParagraph)(templateObject_4$
|
|
14805
|
+
var Fieldset$1 = styled__default["default"].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"])));
|
|
14806
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14807
|
+
var CheckboxWrapper = styled__default["default"].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"])));
|
|
14808
|
+
var Label$b = styled__default["default"](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) {
|
|
14808
14809
|
var weight = _a.weight;
|
|
14809
14810
|
return weight || 500;
|
|
14810
14811
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14811
|
-
var templateObject_1$
|
|
14812
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$d, templateObject_4$7;
|
|
14812
14813
|
|
|
14813
14814
|
var Checkboxes = function (props) {
|
|
14814
14815
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14831,12 +14832,12 @@ var Checkboxes = function (props) {
|
|
|
14831
14832
|
}) })] }));
|
|
14832
14833
|
};
|
|
14833
14834
|
|
|
14834
|
-
var Container$
|
|
14835
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
14835
|
+
var Container$n = styled__default["default"].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);
|
|
14836
|
+
var Item = styled__default["default"].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) {
|
|
14836
14837
|
var isOpen = _a.isOpen;
|
|
14837
14838
|
return (isOpen ? "" : "none");
|
|
14838
14839
|
}, theme.colors.lightGray.dark);
|
|
14839
|
-
var templateObject_1$
|
|
14840
|
+
var templateObject_1$B, templateObject_2$x;
|
|
14840
14841
|
|
|
14841
14842
|
var Collapse = function (props) {
|
|
14842
14843
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14848,18 +14849,18 @@ var Collapse = function (props) {
|
|
|
14848
14849
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
14849
14850
|
}
|
|
14850
14851
|
};
|
|
14851
|
-
return (jsxRuntime.jsx(Container$
|
|
14852
|
+
return (jsxRuntime.jsx(Container$n, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
14852
14853
|
var isOpen = openItems.includes(index);
|
|
14853
14854
|
return (jsxRuntime.jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
14854
14855
|
}) })));
|
|
14855
14856
|
};
|
|
14856
14857
|
|
|
14857
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
14858
|
-
var Value = styled__default["default"].div(templateObject_2$
|
|
14858
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14859
|
+
var Value = styled__default["default"].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) {
|
|
14859
14860
|
var contrast = _a.contrast;
|
|
14860
14861
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14861
14862
|
}, theme.colors.darkGray.base);
|
|
14862
|
-
var templateObject_1$
|
|
14863
|
+
var templateObject_1$A, templateObject_2$w;
|
|
14863
14864
|
|
|
14864
14865
|
var Countdown = function (_a) {
|
|
14865
14866
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14886,20 +14887,20 @@ var Countdown = function (_a) {
|
|
|
14886
14887
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsx(Value, __assign$2({ contrast: contrast }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: HH })) })), jsxRuntime.jsx(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsxRuntime.jsx(Value, __assign$2({ contrast: contrast }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: MM })) })), jsxRuntime.jsx(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsxRuntime.jsx(Value, __assign$2({ contrast: contrast }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: SS })) }))] }));
|
|
14887
14888
|
};
|
|
14888
14889
|
|
|
14889
|
-
var Container$
|
|
14890
|
-
var Data = styled__default["default"].div(templateObject_2$
|
|
14891
|
-
var templateObject_1$
|
|
14890
|
+
var Container$m = styled__default["default"].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);
|
|
14891
|
+
var Data = styled__default["default"].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"])));
|
|
14892
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14892
14893
|
|
|
14893
14894
|
var DataSummary = function (_a) {
|
|
14894
14895
|
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
14895
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14896
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsxRuntime.jsx("div", __assign$2({ onClick: onEdit }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsxRuntime.jsx(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
|
|
14896
14897
|
return item instanceof Object ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value, "-").concat(index))) : (jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item }), "".concat(item, "-").concat(index)));
|
|
14897
14898
|
}) })] }) }));
|
|
14898
14899
|
};
|
|
14899
14900
|
|
|
14900
|
-
var Container$
|
|
14901
|
-
var Label$a = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
14902
|
-
var templateObject_1$
|
|
14901
|
+
var Container$l = styled__default["default"].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"])));
|
|
14902
|
+
var Label$a = styled__default["default"](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);
|
|
14903
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14903
14904
|
|
|
14904
14905
|
var DateInputField = function (props) {
|
|
14905
14906
|
var onChange = function (value) {
|
|
@@ -14910,7 +14911,7 @@ var DateInputField = function (props) {
|
|
|
14910
14911
|
if (props.onBlur)
|
|
14911
14912
|
props.onBlur(props.name);
|
|
14912
14913
|
};
|
|
14913
|
-
return (jsxRuntime.jsxs(Container$
|
|
14914
|
+
return (jsxRuntime.jsxs(Container$l, { children: [jsxRuntime.jsx(Label$a, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
14914
14915
|
};
|
|
14915
14916
|
|
|
14916
14917
|
var generateRandomString = function (length) {
|
|
@@ -14923,8 +14924,8 @@ var generateRandomString = function (length) {
|
|
|
14923
14924
|
return string;
|
|
14924
14925
|
};
|
|
14925
14926
|
|
|
14926
|
-
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
14927
|
-
var Container$
|
|
14927
|
+
var ButtonWrapper$1 = styled__default["default"].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"])));
|
|
14928
|
+
var Container$k = styled__default["default"].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) {
|
|
14928
14929
|
var isVisible = _a.isVisible;
|
|
14929
14930
|
return (isVisible ? "100%" : "0%");
|
|
14930
14931
|
}, function (_a) {
|
|
@@ -14937,8 +14938,8 @@ var Container$j = styled__default["default"].div(templateObject_2$s || (template
|
|
|
14937
14938
|
var isVisible = _a.isVisible;
|
|
14938
14939
|
return (isVisible ? "all" : "none");
|
|
14939
14940
|
});
|
|
14940
|
-
var MenuItem = styled__default["default"].div(templateObject_3$
|
|
14941
|
-
var templateObject_1$
|
|
14941
|
+
var MenuItem = styled__default["default"].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);
|
|
14942
|
+
var templateObject_1$x, templateObject_2$t, templateObject_3$c;
|
|
14942
14943
|
|
|
14943
14944
|
var DropdownButton = function (props) {
|
|
14944
14945
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsxRuntime.jsx(ButtonWrapper$1, { children: jsxRuntime.jsx(Button, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
|
|
@@ -14957,22 +14958,31 @@ var Dropdown = function (_a) {
|
|
|
14957
14958
|
? setIsVisible(false)
|
|
14958
14959
|
: null;
|
|
14959
14960
|
}, [isVisible, dropwdownRef]);
|
|
14961
|
+
var handleScroll = React$3.useCallback(function () { return setIsVisible(false); }, []);
|
|
14960
14962
|
React$3.useEffect(function () {
|
|
14961
14963
|
document.addEventListener("mousedown", handleClickOutside);
|
|
14964
|
+
document.addEventListener("scroll", handleScroll);
|
|
14962
14965
|
return function () {
|
|
14963
14966
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
14967
|
+
document.removeEventListener("scroll", handleScroll);
|
|
14964
14968
|
};
|
|
14965
|
-
}, [handleClickOutside]);
|
|
14969
|
+
}, [handleClickOutside, handleScroll]);
|
|
14966
14970
|
var triggerDropdown = React$3.useCallback(function () {
|
|
14967
14971
|
if (props.disabled)
|
|
14968
14972
|
return;
|
|
14969
14973
|
var el = document.getElementById(triggerId);
|
|
14970
14974
|
if (el) {
|
|
14971
|
-
var _a = el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left;
|
|
14975
|
+
var _a = el.getBoundingClientRect(), bottom = _a.bottom, top_1 = _a.top, left = _a.left;
|
|
14972
14976
|
var width = el.offsetWidth;
|
|
14973
|
-
var
|
|
14974
|
-
var
|
|
14975
|
-
|
|
14977
|
+
var xPosition = left + width > window.innerWidth / 2 ? "right" : "left";
|
|
14978
|
+
var yPosition = window.innerHeight - (bottom + yOffset) <
|
|
14979
|
+
dropwdownRef.current.offsetHeight
|
|
14980
|
+
? "top"
|
|
14981
|
+
: "bottom";
|
|
14982
|
+
var y = yPosition === "bottom"
|
|
14983
|
+
? bottom + yOffset
|
|
14984
|
+
: top_1 - dropwdownRef.current.offsetHeight - yOffset - 4;
|
|
14985
|
+
var x = xPosition === "left"
|
|
14976
14986
|
? left
|
|
14977
14987
|
: left + width - dropwdownRef.current.offsetWidth;
|
|
14978
14988
|
setPosition({ x: x, y: y });
|
|
@@ -14993,7 +15003,7 @@ var Dropdown = function (_a) {
|
|
|
14993
15003
|
return React__default["default"].cloneElement(child, props_1);
|
|
14994
15004
|
}
|
|
14995
15005
|
});
|
|
14996
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(Container$
|
|
15006
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(Container$k, __assign$2({}, position, { isVisible: isVisible && menu.length > 0, ref: dropwdownRef, onMouseLeave: function () { return setIsVisible(false); } }, { children: menu.map(function (_a, index) {
|
|
14997
15007
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14998
15008
|
return (jsxRuntime.jsxs(MenuItem, __assign$2({ onClick: onClick }, { children: [icon && jsxRuntime.jsx(Icon, { type: icon, size: "tiny" }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: label }))] }), "".concat(label, "-").concat(index)));
|
|
14999
15009
|
}) }))] }));
|
|
@@ -17517,8 +17527,8 @@ function reducer$1(state, action) {
|
|
|
17517
17527
|
|
|
17518
17528
|
function noop$3() {}
|
|
17519
17529
|
|
|
17520
|
-
var Container$
|
|
17521
|
-
var DropZone = styled__default["default"].div(templateObject_2$
|
|
17530
|
+
var Container$j = styled__default["default"].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"])));
|
|
17531
|
+
var DropZone = styled__default["default"].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) {
|
|
17522
17532
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17523
17533
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17524
17534
|
if (isDragAccept)
|
|
@@ -17537,8 +17547,8 @@ var DropZone = styled__default["default"].div(templateObject_2$r || (templateObj
|
|
|
17537
17547
|
else
|
|
17538
17548
|
return theme.colors.lightGray.base;
|
|
17539
17549
|
});
|
|
17540
|
-
var FileList = styled__default["default"].div(templateObject_3$
|
|
17541
|
-
var templateObject_1$
|
|
17550
|
+
var FileList = styled__default["default"].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"])));
|
|
17551
|
+
var templateObject_1$w, templateObject_2$s, templateObject_3$b;
|
|
17542
17552
|
|
|
17543
17553
|
var FileUpload = function (_a) {
|
|
17544
17554
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17551,14 +17561,14 @@ var FileUpload = function (_a) {
|
|
|
17551
17561
|
// Max number of files: 1
|
|
17552
17562
|
maxFiles: 1,
|
|
17553
17563
|
}), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
|
|
17554
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17564
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsxs(DropZone, __assign$2({}, getRootProps({
|
|
17555
17565
|
isDragActive: isDragActive,
|
|
17556
17566
|
isDragAccept: isDragAccept,
|
|
17557
17567
|
isDragReject: isDragReject,
|
|
17558
17568
|
}), { children: [jsxRuntime.jsx("input", __assign$2({}, getInputProps())), jsxRuntime.jsx(Icon, { type: "fileArrow", size: "large" }), jsxRuntime.jsx(Spacer, { vertical: 15 }), !isDragActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Paragraph, { children: translations[locale]["or"] }), jsxRuntime.jsx(Spacer, { vertical: 10 }), jsxRuntime.jsx(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsxRuntime.jsx(FileList, { children: files.map(function (file, index) { return (jsxRuntime.jsx(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17559
17569
|
};
|
|
17560
17570
|
|
|
17561
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
17571
|
+
var StyledIconButton = styled__default["default"](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) {
|
|
17562
17572
|
var size = _a.size;
|
|
17563
17573
|
return (size === "small" ? "30px" : "40px");
|
|
17564
17574
|
}, function (_a) {
|
|
@@ -17577,7 +17587,7 @@ var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1
|
|
|
17577
17587
|
var size = _a.size;
|
|
17578
17588
|
return (size === "small" ? "28px" : "38px");
|
|
17579
17589
|
});
|
|
17580
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
17590
|
+
var GhostIconButton = styled__default["default"](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) {
|
|
17581
17591
|
var size = _a.size;
|
|
17582
17592
|
return (size === "small" ? "30px" : "40px");
|
|
17583
17593
|
}, function (_a) {
|
|
@@ -17596,7 +17606,7 @@ var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$q
|
|
|
17596
17606
|
var size = _a.size;
|
|
17597
17607
|
return (size === "small" ? "30px" : "40px");
|
|
17598
17608
|
});
|
|
17599
|
-
var templateObject_1$
|
|
17609
|
+
var templateObject_1$v, templateObject_2$r;
|
|
17600
17610
|
|
|
17601
17611
|
var IconButton = function (props) {
|
|
17602
17612
|
if (props.color === "white")
|
|
@@ -17604,9 +17614,9 @@ var IconButton = function (props) {
|
|
|
17604
17614
|
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17605
17615
|
};
|
|
17606
17616
|
|
|
17607
|
-
var Container$
|
|
17608
|
-
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17609
|
-
var templateObject_1$
|
|
17617
|
+
var Container$i = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
17618
|
+
var Label$9 = styled__default["default"](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);
|
|
17619
|
+
var templateObject_1$u, templateObject_2$q;
|
|
17610
17620
|
|
|
17611
17621
|
var InputField = function (props) {
|
|
17612
17622
|
var onChange = function (value) {
|
|
@@ -17617,10 +17627,13 @@ var InputField = function (props) {
|
|
|
17617
17627
|
if (props.onBlur)
|
|
17618
17628
|
props.onBlur(props.name);
|
|
17619
17629
|
};
|
|
17620
|
-
return (jsxRuntime.jsxs(Container$
|
|
17630
|
+
return (jsxRuntime.jsxs(Container$i, { children: [jsxRuntime.jsx(Label$9, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
17621
17631
|
};
|
|
17622
17632
|
|
|
17623
|
-
var Container$
|
|
17633
|
+
var Container$h = styled__default["default"].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) {
|
|
17634
|
+
var char = _a.char;
|
|
17635
|
+
return (char.length === 1 ? "74px" : "");
|
|
17636
|
+
}, function (_a) {
|
|
17624
17637
|
var status = _a.status, color = _a.color;
|
|
17625
17638
|
switch (status) {
|
|
17626
17639
|
case "passed":
|
|
@@ -17664,23 +17677,23 @@ var Container$g = styled__default["default"].div(templateObject_1$s || (template
|
|
|
17664
17677
|
return theme.colors.darkGray.light;
|
|
17665
17678
|
}
|
|
17666
17679
|
});
|
|
17667
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
17668
|
-
var templateObject_1$
|
|
17680
|
+
var CheckIconWrapper = styled__default["default"].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"])));
|
|
17681
|
+
var templateObject_1$t, templateObject_2$p;
|
|
17669
17682
|
|
|
17670
|
-
var Key$
|
|
17683
|
+
var Key$2 = function (props) { return (jsxRuntime.jsxs(Container$h, __assign$2({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
17671
17684
|
marginTop: "13px",
|
|
17672
17685
|
transform: "scale(2)",
|
|
17673
17686
|
} }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
17674
17687
|
|
|
17675
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
17688
|
+
var Wrapper$2 = styled__default["default"].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) {
|
|
17676
17689
|
var chevron = _a.chevron;
|
|
17677
17690
|
return (chevron === "left" ? "4px" : "");
|
|
17678
17691
|
}, function (_a) {
|
|
17679
17692
|
var chevron = _a.chevron;
|
|
17680
17693
|
return (chevron === "right" ? "4px" : "");
|
|
17681
17694
|
});
|
|
17682
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17683
|
-
var templateObject_1$
|
|
17695
|
+
var StyledLink = styled__default["default"](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);
|
|
17696
|
+
var templateObject_1$s, templateObject_2$o;
|
|
17684
17697
|
|
|
17685
17698
|
var Link = function (props) {
|
|
17686
17699
|
var onClick = function (e) {
|
|
@@ -17692,15 +17705,15 @@ var Link = function (props) {
|
|
|
17692
17705
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }), jsxRuntime.jsx(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
17693
17706
|
};
|
|
17694
17707
|
|
|
17695
|
-
var Container$
|
|
17708
|
+
var Container$g = styled__default["default"].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) {
|
|
17696
17709
|
var text = _a.text;
|
|
17697
17710
|
return (text ? "20px" : "");
|
|
17698
17711
|
});
|
|
17699
|
-
var templateObject_1$
|
|
17712
|
+
var templateObject_1$r;
|
|
17700
17713
|
|
|
17701
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
17714
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$g, __assign$2({}, props, { children: [jsxRuntime.jsx(_default$1, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
17702
17715
|
|
|
17703
|
-
var Container$
|
|
17716
|
+
var Container$f = styled__default["default"].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) {
|
|
17704
17717
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17705
17718
|
if (dropdownIsVisible) {
|
|
17706
17719
|
switch (color) {
|
|
@@ -17713,8 +17726,8 @@ var Container$e = styled__default["default"].div(templateObject_1$p || (template
|
|
|
17713
17726
|
}
|
|
17714
17727
|
return "";
|
|
17715
17728
|
});
|
|
17716
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
17717
|
-
var DropdownContainer = styled__default["default"].div(templateObject_3$
|
|
17729
|
+
var SelectedLocaleWrapper = styled__default["default"].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"])));
|
|
17730
|
+
var DropdownContainer = styled__default["default"].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) {
|
|
17718
17731
|
var color = _a.color;
|
|
17719
17732
|
switch (color) {
|
|
17720
17733
|
default:
|
|
@@ -17724,8 +17737,8 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$9 || (te
|
|
|
17724
17737
|
return theme.colors.lightGray.dark;
|
|
17725
17738
|
}
|
|
17726
17739
|
});
|
|
17727
|
-
var LocaleWrapper = styled__default["default"].div(templateObject_4$
|
|
17728
|
-
var templateObject_1$
|
|
17740
|
+
var LocaleWrapper = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
17741
|
+
var templateObject_1$q, templateObject_2$n, templateObject_3$a, templateObject_4$6;
|
|
17729
17742
|
|
|
17730
17743
|
var LocaleSelect = function (props) {
|
|
17731
17744
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17734,22 +17747,22 @@ var LocaleSelect = function (props) {
|
|
|
17734
17747
|
setLocale(locale);
|
|
17735
17748
|
props.onChange(locale);
|
|
17736
17749
|
};
|
|
17737
|
-
return (jsxRuntime.jsxs(Container$
|
|
17750
|
+
return (jsxRuntime.jsxs(Container$f, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: parsers.getNativeLanguageByLocale(locale) }))] }), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
|
|
17738
17751
|
.filter(function (l) { return l !== locale; })
|
|
17739
17752
|
.map(function (locale) { return (jsxRuntime.jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: parsers.getNativeLanguageByLocale(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
17740
17753
|
};
|
|
17741
17754
|
|
|
17742
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
17743
|
-
var templateObject_1$
|
|
17755
|
+
var Wrapper$1 = styled__default["default"].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"])));
|
|
17756
|
+
var templateObject_1$p;
|
|
17744
17757
|
|
|
17745
17758
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: enums.Medal.GOLD }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: enums.Medal.SILVER }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: enums.Medal.BRONZE }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
17746
17759
|
|
|
17747
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
17760
|
+
var NotificationContainer = styled__default["default"].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) {
|
|
17748
17761
|
var contrast = _a.contrast;
|
|
17749
17762
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17750
17763
|
});
|
|
17751
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
17752
|
-
var templateObject_1$
|
|
17764
|
+
var ButtonContainer = styled__default["default"].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"])));
|
|
17765
|
+
var templateObject_1$o, templateObject_2$m;
|
|
17753
17766
|
|
|
17754
17767
|
var Notification = function (props) {
|
|
17755
17768
|
if (!props.isVisible)
|
|
@@ -17757,9 +17770,9 @@ var Notification = function (props) {
|
|
|
17757
17770
|
return (jsxRuntime.jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React$3.createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
17758
17771
|
};
|
|
17759
17772
|
|
|
17760
|
-
var Container$
|
|
17761
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17762
|
-
var templateObject_1$
|
|
17773
|
+
var Container$e = styled__default["default"].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"])));
|
|
17774
|
+
var Label$8 = styled__default["default"](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);
|
|
17775
|
+
var templateObject_1$n, templateObject_2$l;
|
|
17763
17776
|
|
|
17764
17777
|
var NumberField = function (props) {
|
|
17765
17778
|
var onChange = function (value) {
|
|
@@ -17770,12 +17783,12 @@ var NumberField = function (props) {
|
|
|
17770
17783
|
if (props.onBlur)
|
|
17771
17784
|
props.onBlur(props.name);
|
|
17772
17785
|
};
|
|
17773
|
-
return (jsxRuntime.jsxs(Container$
|
|
17786
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(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 })] }));
|
|
17774
17787
|
};
|
|
17775
17788
|
|
|
17776
|
-
var Container$
|
|
17777
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17778
|
-
var templateObject_1$
|
|
17789
|
+
var Container$d = styled__default["default"].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"])));
|
|
17790
|
+
var Label$7 = styled__default["default"](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);
|
|
17791
|
+
var templateObject_1$m, templateObject_2$k;
|
|
17779
17792
|
|
|
17780
17793
|
var PasswordInputField = function (props) {
|
|
17781
17794
|
var onChange = function (value) {
|
|
@@ -17791,10 +17804,10 @@ var PasswordInputField = function (props) {
|
|
|
17791
17804
|
if (props.onBlur)
|
|
17792
17805
|
props.onBlur(props.name);
|
|
17793
17806
|
};
|
|
17794
|
-
return (jsxRuntime.jsxs(Container$
|
|
17807
|
+
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(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 })] }));
|
|
17795
17808
|
};
|
|
17796
17809
|
|
|
17797
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
17810
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n border: ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n border: ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
17798
17811
|
var isVisible = _a.isVisible;
|
|
17799
17812
|
return (isVisible ? "100%" : "0%");
|
|
17800
17813
|
}, function (_a) {
|
|
@@ -17807,7 +17820,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$k || (templ
|
|
|
17807
17820
|
var contrast = _a.contrast;
|
|
17808
17821
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17809
17822
|
});
|
|
17810
|
-
var templateObject_1$
|
|
17823
|
+
var templateObject_1$l;
|
|
17811
17824
|
|
|
17812
17825
|
var Popup = function (props) {
|
|
17813
17826
|
var popupRef = React$3.useRef(null);
|
|
@@ -17842,27 +17855,27 @@ var Popup = function (props) {
|
|
|
17842
17855
|
});
|
|
17843
17856
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), typeof props.content === "string" && (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))), Array.isArray(props.content) &&
|
|
17844
17857
|
props.content.length > 0 &&
|
|
17845
|
-
props.content.map(function (item, index) { return (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: item }), "".concat(item, "-").concat(index))); })] }))] }));
|
|
17858
|
+
props.content.map(function (item, index) { return (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: item }), "".concat(item, "-").concat(index))); }), typeof props.content === "object" && props.content] }))] }));
|
|
17846
17859
|
};
|
|
17847
17860
|
|
|
17848
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
17849
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
17861
|
+
var Wrapper = styled__default["default"].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"])));
|
|
17862
|
+
var StyledProgressBar = styled__default["default"].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) {
|
|
17850
17863
|
var showInfo = _a.showInfo;
|
|
17851
17864
|
return (showInfo ? "10px" : "");
|
|
17852
17865
|
});
|
|
17853
|
-
var Indicator$1 = styled__default["default"].div(templateObject_3$
|
|
17866
|
+
var Indicator$1 = styled__default["default"].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) {
|
|
17854
17867
|
var percent = _a.percent;
|
|
17855
17868
|
return "calc(".concat(percent, "% - 6px)");
|
|
17856
17869
|
}, function (_a) {
|
|
17857
17870
|
var color = _a.color;
|
|
17858
17871
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17859
17872
|
});
|
|
17860
|
-
var templateObject_1$
|
|
17873
|
+
var templateObject_1$k, templateObject_2$j, templateObject_3$9;
|
|
17861
17874
|
|
|
17862
17875
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign$2({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
17863
17876
|
|
|
17864
|
-
var Container$
|
|
17865
|
-
var Step$2 = styled__default["default"].li(templateObject_2$
|
|
17877
|
+
var Container$c = styled__default["default"].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"])));
|
|
17878
|
+
var Step$2 = styled__default["default"].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) {
|
|
17866
17879
|
var status = _a.status;
|
|
17867
17880
|
return (!!status ? "pointer" : "not-allowed");
|
|
17868
17881
|
}, function (_a) {
|
|
@@ -17884,9 +17897,9 @@ var Step$2 = styled__default["default"].li(templateObject_2$h || (templateObject
|
|
|
17884
17897
|
var hasTitle = _a.hasTitle;
|
|
17885
17898
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17886
17899
|
}, theme.colors.lightGray.dark);
|
|
17887
|
-
var templateObject_1$
|
|
17900
|
+
var templateObject_1$j, templateObject_2$i;
|
|
17888
17901
|
|
|
17889
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
17902
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$c, { children: props.steps.map(function (_a, index) {
|
|
17890
17903
|
var title = _a.title, onClick = _a.onClick;
|
|
17891
17904
|
var step = index + 1;
|
|
17892
17905
|
var status = props.current > step
|
|
@@ -17901,8 +17914,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$b, { children:
|
|
|
17901
17914
|
return (jsxRuntime.jsxs(Step$2, __assign$2({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
17902
17915
|
}) })); };
|
|
17903
17916
|
|
|
17904
|
-
var Container$
|
|
17905
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
17917
|
+
var Container$b = styled__default["default"].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"])));
|
|
17918
|
+
var Step$1 = styled__default["default"].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) {
|
|
17906
17919
|
var status = _a.status;
|
|
17907
17920
|
return (!!status ? "pointer" : "not-allowed");
|
|
17908
17921
|
}, function (_a) {
|
|
@@ -17921,9 +17934,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$g || (templateObject
|
|
|
17921
17934
|
? theme.colors.lightGray.light
|
|
17922
17935
|
: theme.colors.darkGray.light;
|
|
17923
17936
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17924
|
-
var templateObject_1$
|
|
17937
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17925
17938
|
|
|
17926
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
17939
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$b, { children: props.steps.map(function (_a, index) {
|
|
17927
17940
|
var title = _a.title, onClick = _a.onClick;
|
|
17928
17941
|
var step = index + 1;
|
|
17929
17942
|
var status = props.current > step
|
|
@@ -17942,15 +17955,15 @@ var Steps = function (props) {
|
|
|
17942
17955
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
17943
17956
|
};
|
|
17944
17957
|
|
|
17945
|
-
var TabsContainer$1 = styled__default["default"].div(templateObject_1$
|
|
17946
|
-
var Tab$1 = styled__default["default"].div(templateObject_2$
|
|
17958
|
+
var TabsContainer$1 = styled__default["default"].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);
|
|
17959
|
+
var Tab$1 = styled__default["default"].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) {
|
|
17947
17960
|
var isActive = _a.isActive;
|
|
17948
17961
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
17949
17962
|
}, function (_a) {
|
|
17950
17963
|
var isActive = _a.isActive;
|
|
17951
17964
|
return isActive ? theme.colors.blue.base : "";
|
|
17952
17965
|
}, theme.colors.blue.base);
|
|
17953
|
-
var templateObject_1$
|
|
17966
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17954
17967
|
|
|
17955
17968
|
var Tabs$2 = function (_a) {
|
|
17956
17969
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17970,15 +17983,15 @@ var Tabs$2 = function (_a) {
|
|
|
17970
17983
|
}) }));
|
|
17971
17984
|
};
|
|
17972
17985
|
|
|
17973
|
-
var TabsContainer = styled__default["default"].div(templateObject_1$
|
|
17974
|
-
var Tab = styled__default["default"].div(templateObject_2$
|
|
17986
|
+
var TabsContainer = styled__default["default"].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);
|
|
17987
|
+
var Tab = styled__default["default"].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) {
|
|
17975
17988
|
var isActive = _a.isActive;
|
|
17976
17989
|
return (isActive ? "block" : "none");
|
|
17977
17990
|
}, theme.colors.blue.base, function (_a) {
|
|
17978
17991
|
var isActive = _a.isActive;
|
|
17979
17992
|
return isActive ? theme.colors.blue.base : "";
|
|
17980
17993
|
}, theme.colors.blue.base);
|
|
17981
|
-
var templateObject_1$
|
|
17994
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17982
17995
|
|
|
17983
17996
|
var Tabs$1 = function (_a) {
|
|
17984
17997
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -18002,14 +18015,14 @@ var Tabs = function (props) {
|
|
|
18002
18015
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Tabs$1, __assign$2({}, props))) : (jsxRuntime.jsx(Tabs$2, __assign$2({}, props)));
|
|
18003
18016
|
};
|
|
18004
18017
|
|
|
18005
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
18006
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
18007
|
-
var RadioWrapper = styled__default["default"].div(templateObject_3$
|
|
18008
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_4$
|
|
18018
|
+
var Fieldset = styled__default["default"].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"])));
|
|
18019
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
18020
|
+
var RadioWrapper = styled__default["default"].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"])));
|
|
18021
|
+
var Label$6 = styled__default["default"](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) {
|
|
18009
18022
|
var weight = _a.weight;
|
|
18010
18023
|
return weight || 500;
|
|
18011
18024
|
}, theme.colors.darkGray.base);
|
|
18012
|
-
var templateObject_1$
|
|
18025
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$8, templateObject_4$5;
|
|
18013
18026
|
|
|
18014
18027
|
var RadioGroup = function (props) {
|
|
18015
18028
|
var onChange = function (value) {
|
|
@@ -18026,9 +18039,9 @@ var RadioGroup = function (props) {
|
|
|
18026
18039
|
}) })] }));
|
|
18027
18040
|
};
|
|
18028
18041
|
|
|
18029
|
-
var Container$
|
|
18030
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
18031
|
-
var templateObject_1$
|
|
18042
|
+
var Container$a = styled__default["default"].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"])));
|
|
18043
|
+
var Label$5 = styled__default["default"](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);
|
|
18044
|
+
var templateObject_1$e, templateObject_2$d;
|
|
18032
18045
|
|
|
18033
18046
|
var SelectField = function (props) {
|
|
18034
18047
|
var onChange = function (value) {
|
|
@@ -18039,15 +18052,15 @@ var SelectField = function (props) {
|
|
|
18039
18052
|
if (props.onBlur)
|
|
18040
18053
|
props.onBlur(props.name);
|
|
18041
18054
|
};
|
|
18042
|
-
return (jsxRuntime.jsxs(Container$
|
|
18055
|
+
return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(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) {
|
|
18043
18056
|
var value = _a.value, label = _a.label;
|
|
18044
18057
|
return (jsxRuntime.jsx("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
18045
18058
|
}) }))] }));
|
|
18046
18059
|
};
|
|
18047
18060
|
|
|
18048
|
-
var Container$
|
|
18049
|
-
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
18050
|
-
var templateObject_1$
|
|
18061
|
+
var Container$9 = styled__default["default"].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"])));
|
|
18062
|
+
var Label$4 = styled__default["default"](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);
|
|
18063
|
+
var templateObject_1$d, templateObject_2$c;
|
|
18051
18064
|
|
|
18052
18065
|
var ToggleField = function (props) {
|
|
18053
18066
|
var onChange = function (value) {
|
|
@@ -18058,10 +18071,10 @@ var ToggleField = function (props) {
|
|
|
18058
18071
|
if (props.onBlur)
|
|
18059
18072
|
props.onBlur(props.name);
|
|
18060
18073
|
};
|
|
18061
|
-
return (jsxRuntime.jsxs(Container$
|
|
18074
|
+
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsx(Label$4, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
18062
18075
|
};
|
|
18063
18076
|
|
|
18064
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
18077
|
+
var TooltipContainer = styled__default["default"].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) {
|
|
18065
18078
|
var isVisible = _a.isVisible;
|
|
18066
18079
|
return (isVisible ? "100%" : "0%");
|
|
18067
18080
|
}, function (_a) {
|
|
@@ -18071,7 +18084,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$b || (tem
|
|
|
18071
18084
|
var x = _a.x;
|
|
18072
18085
|
return (x ? "".concat(x, "px") : "");
|
|
18073
18086
|
});
|
|
18074
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
18087
|
+
var TooltipTitle = styled__default["default"].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) {
|
|
18075
18088
|
var color = _a.color;
|
|
18076
18089
|
switch (color) {
|
|
18077
18090
|
default:
|
|
@@ -18081,7 +18094,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$a || (templat
|
|
|
18081
18094
|
return theme.colors.lightGray.dark;
|
|
18082
18095
|
}
|
|
18083
18096
|
});
|
|
18084
|
-
var templateObject_1$
|
|
18097
|
+
var templateObject_1$c, templateObject_2$b;
|
|
18085
18098
|
|
|
18086
18099
|
var Tooltip$2 = function (props) {
|
|
18087
18100
|
var tooltipRef = React$3.useRef(null);
|
|
@@ -47705,13 +47718,13 @@ var xAxis = {
|
|
|
47705
47718
|
domain: ["dataMin", "dataMax"],
|
|
47706
47719
|
};
|
|
47707
47720
|
|
|
47708
|
-
var Container$
|
|
47709
|
-
var Label$2 = styled__default["default"].div(templateObject_2$
|
|
47710
|
-
var Dot = styled__default["default"].div(templateObject_3$
|
|
47721
|
+
var Container$8 = styled__default["default"].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);
|
|
47722
|
+
var Label$2 = styled__default["default"].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"])));
|
|
47723
|
+
var Dot = styled__default["default"].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) {
|
|
47711
47724
|
var color = _a.color;
|
|
47712
47725
|
return color;
|
|
47713
47726
|
});
|
|
47714
|
-
var templateObject_1$
|
|
47727
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$7;
|
|
47715
47728
|
|
|
47716
47729
|
var Tooltip = function (_a) {
|
|
47717
47730
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47740,7 +47753,7 @@ var Tooltip = function (_a) {
|
|
|
47740
47753
|
return "".concat(format$1(fromUnixTime(label), "MMMM", options));
|
|
47741
47754
|
}
|
|
47742
47755
|
};
|
|
47743
|
-
return (jsxRuntime.jsxs(Container$
|
|
47756
|
+
return (jsxRuntime.jsxs(Container$8, { children: [payload.map(function (_a, index) {
|
|
47744
47757
|
var name = _a.name, value = _a.value, stroke = _a.stroke;
|
|
47745
47758
|
return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Dot, { color: stroke }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: translations[locale][name] }))] }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", color: "darkGray" }, { children: valueFormatter ? valueFormatter(parseInt("".concat(value))) : value }))] }, "".concat(name, "-").concat(value, "-").concat(index)));
|
|
47746
47759
|
}), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: renderLabel() }))] }));
|
|
@@ -47946,9 +47959,9 @@ var Chart = function (_a) {
|
|
|
47946
47959
|
}) }), period)] })), renderChart()] }));
|
|
47947
47960
|
};
|
|
47948
47961
|
|
|
47949
|
-
var Container$
|
|
47950
|
-
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
47951
|
-
var templateObject_1$
|
|
47962
|
+
var Container$7 = styled__default["default"].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"])));
|
|
47963
|
+
var Label$1 = styled__default["default"](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);
|
|
47964
|
+
var templateObject_1$a, templateObject_2$9;
|
|
47952
47965
|
|
|
47953
47966
|
var TextareaField = function (props) {
|
|
47954
47967
|
var onChange = function (value) {
|
|
@@ -47959,12 +47972,12 @@ var TextareaField = function (props) {
|
|
|
47959
47972
|
if (props.onBlur)
|
|
47960
47973
|
props.onBlur(props.name);
|
|
47961
47974
|
};
|
|
47962
|
-
return (jsxRuntime.jsxs(Container$
|
|
47975
|
+
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(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 && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
47963
47976
|
};
|
|
47964
47977
|
|
|
47965
|
-
var Container$
|
|
47966
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
47967
|
-
var templateObject_1$
|
|
47978
|
+
var Container$6 = styled__default["default"].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"])));
|
|
47979
|
+
var Label = styled__default["default"](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);
|
|
47980
|
+
var templateObject_1$9, templateObject_2$8;
|
|
47968
47981
|
|
|
47969
47982
|
var RangeField = function (props) {
|
|
47970
47983
|
var onChange = function (value) {
|
|
@@ -47975,25 +47988,25 @@ var RangeField = function (props) {
|
|
|
47975
47988
|
if (props.onBlur)
|
|
47976
47989
|
props.onBlur(props.name);
|
|
47977
47990
|
};
|
|
47978
|
-
return (jsxRuntime.jsxs(Container$
|
|
47991
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
47979
47992
|
};
|
|
47980
47993
|
|
|
47981
47994
|
var FeedbackColors = {
|
|
47982
47995
|
success: theme.colors.green.base,
|
|
47983
47996
|
error: theme.colors.red.base,
|
|
47984
47997
|
};
|
|
47985
|
-
var FieldWrapper = styled__default["default"].div(templateObject_1$
|
|
47998
|
+
var FieldWrapper = styled__default["default"].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) {
|
|
47986
47999
|
var status = _a.status;
|
|
47987
48000
|
return FeedbackColors[status];
|
|
47988
48001
|
});
|
|
47989
|
-
var FeedbackWrapper = styled__default["default"].div(templateObject_2$
|
|
48002
|
+
var FeedbackWrapper = styled__default["default"].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) {
|
|
47990
48003
|
var status = _a.status;
|
|
47991
48004
|
return FeedbackColors[status];
|
|
47992
48005
|
}, function (_a) {
|
|
47993
48006
|
var status = _a.status;
|
|
47994
48007
|
return FeedbackColors[status];
|
|
47995
48008
|
});
|
|
47996
|
-
var templateObject_1$
|
|
48009
|
+
var templateObject_1$8, templateObject_2$7;
|
|
47997
48010
|
|
|
47998
48011
|
var WithValidation = function (_a) {
|
|
47999
48012
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -48006,10 +48019,10 @@ var WithValidation = function (_a) {
|
|
|
48006
48019
|
return (jsxRuntime.jsxs(FieldWrapper, __assign$2({ status: status }, { children: [children, jsxRuntime.jsxs(FeedbackWrapper, __assign$2({ status: status }, { children: [jsxRuntime.jsx(Icon, { type: icons[status], size: "small" }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: message }))] }))] })));
|
|
48007
48020
|
};
|
|
48008
48021
|
|
|
48009
|
-
var FormWrapper = styled__default["default"].form(templateObject_1$
|
|
48010
|
-
var DescriptionWrapper = styled__default["default"].div(templateObject_2$
|
|
48011
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_3$
|
|
48012
|
-
var templateObject_1$
|
|
48022
|
+
var FormWrapper = styled__default["default"].form(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1([""], [""])));
|
|
48023
|
+
var DescriptionWrapper = styled__default["default"].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);
|
|
48024
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
48025
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6;
|
|
48013
48026
|
|
|
48014
48027
|
var Form = React$3.forwardRef(function (props, ref) {
|
|
48015
48028
|
var _a = React$3.useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -48238,7 +48251,7 @@ var Form = React$3.forwardRef(function (props, ref) {
|
|
|
48238
48251
|
}) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
|
|
48239
48252
|
});
|
|
48240
48253
|
|
|
48241
|
-
var Container$
|
|
48254
|
+
var Container$5 = styled__default["default"].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) {
|
|
48242
48255
|
var color = _a.color, active = _a.active;
|
|
48243
48256
|
if (active)
|
|
48244
48257
|
return theme.colors[color].dark;
|
|
@@ -48262,22 +48275,22 @@ var Container$4 = styled__default["default"].div(templateObject_1$5 || (template
|
|
|
48262
48275
|
return theme.colors[color].base;
|
|
48263
48276
|
return "";
|
|
48264
48277
|
});
|
|
48265
|
-
var templateObject_1$
|
|
48278
|
+
var templateObject_1$6;
|
|
48266
48279
|
|
|
48267
|
-
var Key = function (props) {
|
|
48280
|
+
var Key$1 = function (props) {
|
|
48268
48281
|
var _a;
|
|
48269
|
-
return (jsxRuntime.jsx(Container$
|
|
48282
|
+
return (jsxRuntime.jsx(Container$5, __assign$2({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) })));
|
|
48270
48283
|
};
|
|
48271
48284
|
|
|
48272
|
-
var Container$
|
|
48273
|
-
var SpecialRow = styled__default["default"].div(templateObject_2$
|
|
48274
|
-
var TopRow = styled__default["default"].div(templateObject_3$
|
|
48275
|
-
var StartRow = styled__default["default"].div(templateObject_4$
|
|
48276
|
-
var BottomRow = styled__default["default"].div(templateObject_5$
|
|
48277
|
-
var SpacebarRow = styled__default["default"].div(templateObject_6$
|
|
48278
|
-
var templateObject_1$
|
|
48285
|
+
var Container$4 = styled__default["default"].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"])));
|
|
48286
|
+
var SpecialRow = styled__default["default"].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"])));
|
|
48287
|
+
var TopRow = styled__default["default"].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"])));
|
|
48288
|
+
var StartRow = styled__default["default"].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"])));
|
|
48289
|
+
var BottomRow = styled__default["default"].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"])));
|
|
48290
|
+
var SpacebarRow = styled__default["default"].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"])));
|
|
48291
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3;
|
|
48279
48292
|
|
|
48280
|
-
var Keyboard = function (props) {
|
|
48293
|
+
var Keyboard$1 = function (props) {
|
|
48281
48294
|
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
48282
48295
|
var _b = React$3.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48283
48296
|
React$3.useEffect(function () {
|
|
@@ -48299,53 +48312,280 @@ var Keyboard = function (props) {
|
|
|
48299
48312
|
}, [props.keys]);
|
|
48300
48313
|
if (!keys)
|
|
48301
48314
|
return null;
|
|
48302
|
-
return (jsxRuntime.jsxs(Container$
|
|
48303
|
-
keys[89].character === props.activeKey }, 44), jsxRuntime.jsx(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
48304
|
-
keys[87].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
48305
|
-
keys[85].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
48306
|
-
keys[83].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
48307
|
-
keys[81].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
48308
|
-
keys[91].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
48309
|
-
keys[90].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
48310
|
-
keys[80].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
48311
|
-
keys[82].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
48312
|
-
keys[84].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
48313
|
-
keys[86].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
48314
|
-
keys[88].character === props.activeKey }), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(TopRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
48315
|
-
keys[65].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48316
|
-
keys[63].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48317
|
-
keys[61].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48318
|
-
keys[59].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48319
|
-
keys[69].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48320
|
-
keys[68].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48321
|
-
keys[58].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48322
|
-
keys[60].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48323
|
-
keys[62].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48324
|
-
keys[64].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
48325
|
-
keys[67].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
48326
|
-
keys[66].character === props.activeKey }), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(StartRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
48327
|
-
keys[54].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48328
|
-
keys[52].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48329
|
-
keys[50].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48330
|
-
keys[48].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48331
|
-
keys[57].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48332
|
-
keys[56].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48333
|
-
keys[47].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48334
|
-
keys[49].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48335
|
-
keys[51].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[8].character, keys[53].character].filter(function (key) { return key !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
|
|
48336
|
-
keys[53].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
48337
|
-
keys[55].character === props.activeKey }), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(BottomRow, { children: [jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }), jsxRuntime.jsx(Key, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
48338
|
-
keys[77].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48339
|
-
keys[75].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48340
|
-
keys[73].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48341
|
-
keys[71].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48342
|
-
keys[79].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48343
|
-
keys[78].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[25].character, keys[70].character].filter(function (key) { return key !== "m"; }), color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
48344
|
-
keys[70].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
48345
|
-
keys[72].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
48346
|
-
keys[74].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
48347
|
-
keys[76].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxRuntime.jsxs(SpacebarRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {})] })] }));
|
|
48348
|
-
};
|
|
48315
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
48316
|
+
keys[89].character === props.activeKey }, 44), jsxRuntime.jsx(Key$1, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
48317
|
+
keys[87].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
48318
|
+
keys[85].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
48319
|
+
keys[83].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
48320
|
+
keys[81].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
48321
|
+
keys[91].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
48322
|
+
keys[90].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
48323
|
+
keys[80].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
48324
|
+
keys[82].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
48325
|
+
keys[84].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
48326
|
+
keys[86].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
48327
|
+
keys[88].character === props.activeKey }), jsxRuntime.jsx(Key$1, {})] }), jsxRuntime.jsxs(TopRow, { children: [jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
48328
|
+
keys[65].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48329
|
+
keys[63].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48330
|
+
keys[61].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48331
|
+
keys[59].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48332
|
+
keys[69].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48333
|
+
keys[68].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48334
|
+
keys[58].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48335
|
+
keys[60].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48336
|
+
keys[62].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48337
|
+
keys[64].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
48338
|
+
keys[67].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
48339
|
+
keys[66].character === props.activeKey }), jsxRuntime.jsx(Key$1, {})] }), jsxRuntime.jsxs(StartRow, { children: [jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
48340
|
+
keys[54].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48341
|
+
keys[52].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48342
|
+
keys[50].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48343
|
+
keys[48].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48344
|
+
keys[57].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48345
|
+
keys[56].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48346
|
+
keys[47].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48347
|
+
keys[49].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48348
|
+
keys[51].character === props.activeKey }), jsxRuntime.jsx(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 ||
|
|
48349
|
+
keys[53].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
48350
|
+
keys[55].character === props.activeKey }), jsxRuntime.jsx(Key$1, {})] }), jsxRuntime.jsxs(BottomRow, { children: [jsxRuntime.jsx(Key$1, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }), jsxRuntime.jsx(Key$1, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
48351
|
+
keys[77].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48352
|
+
keys[75].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48353
|
+
keys[73].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48354
|
+
keys[71].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48355
|
+
keys[79].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48356
|
+
keys[78].character === props.activeKey }), jsxRuntime.jsx(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 ||
|
|
48357
|
+
keys[70].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
48358
|
+
keys[72].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
48359
|
+
keys[74].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
48360
|
+
keys[76].character === props.activeKey }), jsxRuntime.jsx(Key$1, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxRuntime.jsxs(SpacebarRow, { children: [jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, {}), jsxRuntime.jsx(Key$1, {})] })] }));
|
|
48361
|
+
};
|
|
48362
|
+
|
|
48363
|
+
var Container$3 = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 670px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n min-width: 670px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
|
|
48364
|
+
var Row = styled__default["default"].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"])));
|
|
48365
|
+
var Row1 = styled__default["default"](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"])));
|
|
48366
|
+
var Row2 = styled__default["default"](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"])));
|
|
48367
|
+
var Row3 = styled__default["default"](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"])));
|
|
48368
|
+
var Row4 = styled__default["default"](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"])));
|
|
48369
|
+
var Row5 = styled__default["default"](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"])));
|
|
48370
|
+
var Key = styled__default["default"].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) {
|
|
48371
|
+
var align = _a.align;
|
|
48372
|
+
if (!align)
|
|
48373
|
+
return "center";
|
|
48374
|
+
else if (align === "left")
|
|
48375
|
+
return "flex-start";
|
|
48376
|
+
else
|
|
48377
|
+
return "flex-end";
|
|
48378
|
+
}, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, function (_a) {
|
|
48379
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48380
|
+
if (isActive && color)
|
|
48381
|
+
return theme.colors[color].light;
|
|
48382
|
+
else if (color)
|
|
48383
|
+
return theme.colors.lightGray.light;
|
|
48384
|
+
else
|
|
48385
|
+
return theme.colors.lightGray.base;
|
|
48386
|
+
}, function (_a) {
|
|
48387
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48388
|
+
if (isActive && color)
|
|
48389
|
+
return theme.colors[color].darker;
|
|
48390
|
+
else if (color)
|
|
48391
|
+
return theme.colors[color].dark;
|
|
48392
|
+
else
|
|
48393
|
+
return theme.colors.lightGray.darker;
|
|
48394
|
+
}, function (_a) {
|
|
48395
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48396
|
+
if (isActive)
|
|
48397
|
+
return "0 2px 0 ".concat(theme.colors[color].dark);
|
|
48398
|
+
else if (color)
|
|
48399
|
+
return "0 2px 0 ".concat(theme.colors[color].base);
|
|
48400
|
+
else
|
|
48401
|
+
return "0 2px 0 ".concat(theme.colors.lightGray.darker);
|
|
48402
|
+
}, function (_a) {
|
|
48403
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48404
|
+
if (isActive)
|
|
48405
|
+
return theme.colors[color].dark;
|
|
48406
|
+
else if (color)
|
|
48407
|
+
return theme.colors[color].base;
|
|
48408
|
+
else
|
|
48409
|
+
return theme.colors.lightGray.darker;
|
|
48410
|
+
}, function (_a) {
|
|
48411
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48412
|
+
if (isActive && color)
|
|
48413
|
+
return theme.colors[color].darker;
|
|
48414
|
+
else if (color)
|
|
48415
|
+
return theme.colors[color].dark;
|
|
48416
|
+
else
|
|
48417
|
+
return theme.colors.lightGray.darker;
|
|
48418
|
+
}, function (_a) {
|
|
48419
|
+
var color = _a.color, isActive = _a.isActive;
|
|
48420
|
+
if (isActive && color)
|
|
48421
|
+
return theme.colors[color].darker;
|
|
48422
|
+
else if (color)
|
|
48423
|
+
return theme.colors[color].dark;
|
|
48424
|
+
else
|
|
48425
|
+
return theme.colors.lightGray.darker;
|
|
48426
|
+
});
|
|
48427
|
+
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;
|
|
48428
|
+
|
|
48429
|
+
var Keyboard = function (props) {
|
|
48430
|
+
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
48431
|
+
var _b = React$3.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48432
|
+
React$3.useEffect(function () {
|
|
48433
|
+
if (!!props.keys) {
|
|
48434
|
+
var keys_1 = {};
|
|
48435
|
+
var shiftKeys_1 = { left: [], right: [] };
|
|
48436
|
+
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
48437
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
48438
|
+
keys_1[index] = { character: key, color: color };
|
|
48439
|
+
if (isShiftKey)
|
|
48440
|
+
shiftKeys_1[hand].push(key);
|
|
48441
|
+
}
|
|
48442
|
+
setKeys(keys_1);
|
|
48443
|
+
setShiftKeys(shiftKeys_1);
|
|
48444
|
+
}
|
|
48445
|
+
}, [props.keys]);
|
|
48446
|
+
var containsAny = function (arr1, arr2) {
|
|
48447
|
+
return arr1.some(function (v) { return arr2.includes(v); });
|
|
48448
|
+
};
|
|
48449
|
+
if (!keys)
|
|
48450
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
48451
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsxs(Row1, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48452
|
+
keys[89].character,
|
|
48453
|
+
keys[44].character,
|
|
48454
|
+
]) }, { children: [keys[89].character, jsxRuntime.jsx("br", {}), keys[44].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48455
|
+
keys[87].character,
|
|
48456
|
+
keys[42].character,
|
|
48457
|
+
]) }, { children: [keys[87].character, jsxRuntime.jsx("br", {}), keys[42].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48458
|
+
keys[85].character,
|
|
48459
|
+
keys[40].character,
|
|
48460
|
+
]) }, { children: [keys[85].character, jsxRuntime.jsx("br", {}), keys[40].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48461
|
+
keys[83].character,
|
|
48462
|
+
keys[38].character,
|
|
48463
|
+
]) }, { children: [keys[83].character, jsxRuntime.jsx("br", {}), keys[38].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48464
|
+
keys[81].character,
|
|
48465
|
+
keys[36].character,
|
|
48466
|
+
]) }, { children: [keys[81].character, jsxRuntime.jsx("br", {}), keys[36].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48467
|
+
keys[91].character,
|
|
48468
|
+
keys[46].character,
|
|
48469
|
+
]) }, { children: [keys[91].character, jsxRuntime.jsx("br", {}), keys[46].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48470
|
+
keys[90].character,
|
|
48471
|
+
keys[45].character,
|
|
48472
|
+
]) }, { children: [keys[90].character, jsxRuntime.jsx("br", {}), keys[45].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48473
|
+
keys[80].character,
|
|
48474
|
+
keys[35].character,
|
|
48475
|
+
]) }, { children: [keys[80].character, jsxRuntime.jsx("br", {}), keys[35].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48476
|
+
keys[82].character,
|
|
48477
|
+
keys[37].character,
|
|
48478
|
+
]) }, { children: [keys[82].character, jsxRuntime.jsx("br", {}), keys[37].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48479
|
+
keys[84].character,
|
|
48480
|
+
keys[39].character,
|
|
48481
|
+
]) }, { children: [keys[84].character, jsxRuntime.jsx("br", {}), keys[39].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48482
|
+
keys[86].character,
|
|
48483
|
+
keys[41].character,
|
|
48484
|
+
]) }, { children: [keys[86].character, jsxRuntime.jsx("br", {}), keys[41].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48485
|
+
keys[88].character,
|
|
48486
|
+
keys[43].character,
|
|
48487
|
+
]) }, { children: [keys[88].character, jsxRuntime.jsx("br", {}), keys[43].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row2, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48488
|
+
keys[65].character,
|
|
48489
|
+
keys[20].character,
|
|
48490
|
+
]) }, { children: keys[65].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48491
|
+
keys[63].character,
|
|
48492
|
+
keys[18].character,
|
|
48493
|
+
]) }, { children: keys[63].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48494
|
+
keys[61].character,
|
|
48495
|
+
keys[16].character,
|
|
48496
|
+
]) }, { children: keys[61].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48497
|
+
keys[59].character,
|
|
48498
|
+
keys[14].character,
|
|
48499
|
+
]) }, { children: keys[59].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48500
|
+
keys[69].character,
|
|
48501
|
+
keys[24].character,
|
|
48502
|
+
]) }, { children: keys[69].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48503
|
+
keys[68].character,
|
|
48504
|
+
keys[23].character,
|
|
48505
|
+
]) }, { children: keys[68].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48506
|
+
keys[58].character,
|
|
48507
|
+
keys[13].character,
|
|
48508
|
+
]) }, { children: keys[58].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48509
|
+
keys[60].character,
|
|
48510
|
+
keys[15].character,
|
|
48511
|
+
]) }, { children: keys[60].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48512
|
+
keys[62].character,
|
|
48513
|
+
keys[17].character,
|
|
48514
|
+
]) }, { children: keys[62].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48515
|
+
keys[64].character,
|
|
48516
|
+
keys[19].character,
|
|
48517
|
+
]) }, { children: keys[64].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48518
|
+
keys[67].character,
|
|
48519
|
+
keys[22].character,
|
|
48520
|
+
]) }, { children: [keys[67].character, jsxRuntime.jsx("br", {}), keys[22].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48521
|
+
keys[66].character,
|
|
48522
|
+
keys[21].character,
|
|
48523
|
+
]) }, { children: [keys[66].character, jsxRuntime.jsx("br", {}), keys[21].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row3, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48524
|
+
keys[54].character,
|
|
48525
|
+
keys[9].character,
|
|
48526
|
+
]) }, { children: keys[54].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48527
|
+
keys[52].character,
|
|
48528
|
+
keys[7].character,
|
|
48529
|
+
]) }, { children: keys[52].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48530
|
+
keys[50].character,
|
|
48531
|
+
keys[5].character,
|
|
48532
|
+
]) }, { children: keys[50].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48533
|
+
keys[48].character,
|
|
48534
|
+
keys[3].character,
|
|
48535
|
+
]) }, { children: keys[48].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48536
|
+
keys[57].character,
|
|
48537
|
+
keys[12].character,
|
|
48538
|
+
]) }, { children: keys[57].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48539
|
+
keys[56].character,
|
|
48540
|
+
keys[11].character,
|
|
48541
|
+
]) }, { children: keys[56].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48542
|
+
keys[47].character,
|
|
48543
|
+
keys[2].character,
|
|
48544
|
+
]) }, { children: keys[47].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48545
|
+
keys[49].character,
|
|
48546
|
+
keys[4].character,
|
|
48547
|
+
]) }, { children: keys[49].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48548
|
+
keys[51].character,
|
|
48549
|
+
keys[6].character,
|
|
48550
|
+
]) }, { children: keys[51].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48551
|
+
keys[53].character,
|
|
48552
|
+
keys[8].character,
|
|
48553
|
+
]) }, { children: keys[53].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48554
|
+
keys[55].character,
|
|
48555
|
+
keys[10].character,
|
|
48556
|
+
]) }, { children: [keys[55].character, jsxRuntime.jsx("br", {}), keys[10].character] })), jsxRuntime.jsx(Key, {})] }), jsxRuntime.jsxs(Row4, { children: [jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.right), align: "left" }, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsxRuntime.jsx("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" }) })) })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48557
|
+
keys[77].character,
|
|
48558
|
+
keys[32].character,
|
|
48559
|
+
]) }, { children: keys[77].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48560
|
+
keys[75].character,
|
|
48561
|
+
keys[30].character,
|
|
48562
|
+
]) }, { children: keys[75].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48563
|
+
keys[73].character,
|
|
48564
|
+
keys[28].character,
|
|
48565
|
+
]) }, { children: keys[73].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48566
|
+
keys[71].character,
|
|
48567
|
+
keys[26].character,
|
|
48568
|
+
]) }, { children: keys[71].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48569
|
+
keys[79].character,
|
|
48570
|
+
keys[34].character,
|
|
48571
|
+
]) }, { children: keys[79].character })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48572
|
+
keys[78].character,
|
|
48573
|
+
keys[30].character,
|
|
48574
|
+
]) }, { children: keys[78].character })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
|
|
48575
|
+
keys[70].character,
|
|
48576
|
+
keys[25].character,
|
|
48577
|
+
]) }, { children: [keys[70].character, jsxRuntime.jsx("br", {}), keys[25].character !== "m" && keys[25].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
|
|
48578
|
+
keys[72].character,
|
|
48579
|
+
keys[27].character,
|
|
48580
|
+
]) }, { children: [keys[72].character, jsxRuntime.jsx("br", {}), keys[27].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
|
|
48581
|
+
keys[74].character,
|
|
48582
|
+
keys[29].character,
|
|
48583
|
+
]) }, { children: [keys[74].character, jsxRuntime.jsx("br", {}), keys[29].character] })), jsxRuntime.jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
|
|
48584
|
+
keys[76].character,
|
|
48585
|
+
keys[31].character,
|
|
48586
|
+
]) }, { children: [keys[76].character, jsxRuntime.jsx("br", {}), keys[31].character] })), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.left), align: "right" }, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsxRuntime.jsx("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" }) })) }))] }), jsxRuntime.jsxs(Row5, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(props.activeKeys, [keys[1].character]) }, { children: jsxRuntime.jsx("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) })) })), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {})] })] }));
|
|
48587
|
+
};
|
|
48588
|
+
Keyboard.Legacy = Keyboard$1;
|
|
48349
48589
|
|
|
48350
48590
|
var Mask = styled__default["default"].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"])));
|
|
48351
48591
|
var CardWrapper = styled__default["default"].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) {
|
|
@@ -48571,7 +48811,7 @@ exports.IconButton = IconButton;
|
|
|
48571
48811
|
exports.Illustration = Illustration;
|
|
48572
48812
|
exports.Input = Input;
|
|
48573
48813
|
exports.InputField = InputField;
|
|
48574
|
-
exports.Key = Key$
|
|
48814
|
+
exports.Key = Key$2;
|
|
48575
48815
|
exports.Keyboard = Keyboard;
|
|
48576
48816
|
exports.Link = Link;
|
|
48577
48817
|
exports.Loading = Loading;
|