@typeolymp/ui-components 1.19.40 → 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 +474 -246
- package/build/index.es.js.map +1 -1
- package/build/index.js +474 -246
- 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" }) }) })) }) }));
|
|
@@ -15002,7 +15003,7 @@ var Dropdown = function (_a) {
|
|
|
15002
15003
|
return React__default["default"].cloneElement(child, props_1);
|
|
15003
15004
|
}
|
|
15004
15005
|
});
|
|
15005
|
-
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) {
|
|
15006
15007
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
15007
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)));
|
|
15008
15009
|
}) }))] }));
|
|
@@ -17526,8 +17527,8 @@ function reducer$1(state, action) {
|
|
|
17526
17527
|
|
|
17527
17528
|
function noop$3() {}
|
|
17528
17529
|
|
|
17529
|
-
var Container$
|
|
17530
|
-
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) {
|
|
17531
17532
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17532
17533
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17533
17534
|
if (isDragAccept)
|
|
@@ -17546,8 +17547,8 @@ var DropZone = styled__default["default"].div(templateObject_2$r || (templateObj
|
|
|
17546
17547
|
else
|
|
17547
17548
|
return theme.colors.lightGray.base;
|
|
17548
17549
|
});
|
|
17549
|
-
var FileList = styled__default["default"].div(templateObject_3$
|
|
17550
|
-
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;
|
|
17551
17552
|
|
|
17552
17553
|
var FileUpload = function (_a) {
|
|
17553
17554
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17560,14 +17561,14 @@ var FileUpload = function (_a) {
|
|
|
17560
17561
|
// Max number of files: 1
|
|
17561
17562
|
maxFiles: 1,
|
|
17562
17563
|
}), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
|
|
17563
|
-
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({
|
|
17564
17565
|
isDragActive: isDragActive,
|
|
17565
17566
|
isDragAccept: isDragAccept,
|
|
17566
17567
|
isDragReject: isDragReject,
|
|
17567
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))); }) }))] }) }));
|
|
17568
17569
|
};
|
|
17569
17570
|
|
|
17570
|
-
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) {
|
|
17571
17572
|
var size = _a.size;
|
|
17572
17573
|
return (size === "small" ? "30px" : "40px");
|
|
17573
17574
|
}, function (_a) {
|
|
@@ -17586,7 +17587,7 @@ var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1
|
|
|
17586
17587
|
var size = _a.size;
|
|
17587
17588
|
return (size === "small" ? "28px" : "38px");
|
|
17588
17589
|
});
|
|
17589
|
-
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) {
|
|
17590
17591
|
var size = _a.size;
|
|
17591
17592
|
return (size === "small" ? "30px" : "40px");
|
|
17592
17593
|
}, function (_a) {
|
|
@@ -17605,7 +17606,7 @@ var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$q
|
|
|
17605
17606
|
var size = _a.size;
|
|
17606
17607
|
return (size === "small" ? "30px" : "40px");
|
|
17607
17608
|
});
|
|
17608
|
-
var templateObject_1$
|
|
17609
|
+
var templateObject_1$v, templateObject_2$r;
|
|
17609
17610
|
|
|
17610
17611
|
var IconButton = function (props) {
|
|
17611
17612
|
if (props.color === "white")
|
|
@@ -17613,9 +17614,9 @@ var IconButton = function (props) {
|
|
|
17613
17614
|
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17614
17615
|
};
|
|
17615
17616
|
|
|
17616
|
-
var Container$
|
|
17617
|
-
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17618
|
-
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;
|
|
17619
17620
|
|
|
17620
17621
|
var InputField = function (props) {
|
|
17621
17622
|
var onChange = function (value) {
|
|
@@ -17626,10 +17627,10 @@ var InputField = function (props) {
|
|
|
17626
17627
|
if (props.onBlur)
|
|
17627
17628
|
props.onBlur(props.name);
|
|
17628
17629
|
};
|
|
17629
|
-
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))); })] })))] }));
|
|
17630
17631
|
};
|
|
17631
17632
|
|
|
17632
|
-
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) {
|
|
17633
17634
|
var char = _a.char;
|
|
17634
17635
|
return (char.length === 1 ? "74px" : "");
|
|
17635
17636
|
}, function (_a) {
|
|
@@ -17676,23 +17677,23 @@ var Container$g = styled__default["default"].div(templateObject_1$s || (template
|
|
|
17676
17677
|
return theme.colors.darkGray.light;
|
|
17677
17678
|
}
|
|
17678
17679
|
});
|
|
17679
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
17680
|
-
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;
|
|
17681
17682
|
|
|
17682
|
-
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: {
|
|
17683
17684
|
marginTop: "13px",
|
|
17684
17685
|
transform: "scale(2)",
|
|
17685
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 })))] }))); };
|
|
17686
17687
|
|
|
17687
|
-
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) {
|
|
17688
17689
|
var chevron = _a.chevron;
|
|
17689
17690
|
return (chevron === "left" ? "4px" : "");
|
|
17690
17691
|
}, function (_a) {
|
|
17691
17692
|
var chevron = _a.chevron;
|
|
17692
17693
|
return (chevron === "right" ? "4px" : "");
|
|
17693
17694
|
});
|
|
17694
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17695
|
-
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;
|
|
17696
17697
|
|
|
17697
17698
|
var Link = function (props) {
|
|
17698
17699
|
var onClick = function (e) {
|
|
@@ -17704,15 +17705,15 @@ var Link = function (props) {
|
|
|
17704
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" }))] })));
|
|
17705
17706
|
};
|
|
17706
17707
|
|
|
17707
|
-
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) {
|
|
17708
17709
|
var text = _a.text;
|
|
17709
17710
|
return (text ? "20px" : "");
|
|
17710
17711
|
});
|
|
17711
|
-
var templateObject_1$
|
|
17712
|
+
var templateObject_1$r;
|
|
17712
17713
|
|
|
17713
|
-
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 }))] }))] }))); };
|
|
17714
17715
|
|
|
17715
|
-
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) {
|
|
17716
17717
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17717
17718
|
if (dropdownIsVisible) {
|
|
17718
17719
|
switch (color) {
|
|
@@ -17725,8 +17726,8 @@ var Container$e = styled__default["default"].div(templateObject_1$p || (template
|
|
|
17725
17726
|
}
|
|
17726
17727
|
return "";
|
|
17727
17728
|
});
|
|
17728
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
17729
|
-
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) {
|
|
17730
17731
|
var color = _a.color;
|
|
17731
17732
|
switch (color) {
|
|
17732
17733
|
default:
|
|
@@ -17736,8 +17737,8 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$9 || (te
|
|
|
17736
17737
|
return theme.colors.lightGray.dark;
|
|
17737
17738
|
}
|
|
17738
17739
|
});
|
|
17739
|
-
var LocaleWrapper = styled__default["default"].div(templateObject_4$
|
|
17740
|
-
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;
|
|
17741
17742
|
|
|
17742
17743
|
var LocaleSelect = function (props) {
|
|
17743
17744
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17746,22 +17747,22 @@ var LocaleSelect = function (props) {
|
|
|
17746
17747
|
setLocale(locale);
|
|
17747
17748
|
props.onChange(locale);
|
|
17748
17749
|
};
|
|
17749
|
-
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
|
|
17750
17751
|
.filter(function (l) { return l !== locale; })
|
|
17751
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)); }) })))] })));
|
|
17752
17753
|
};
|
|
17753
17754
|
|
|
17754
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
17755
|
-
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;
|
|
17756
17757
|
|
|
17757
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] }))] })] })); };
|
|
17758
17759
|
|
|
17759
|
-
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) {
|
|
17760
17761
|
var contrast = _a.contrast;
|
|
17761
17762
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17762
17763
|
});
|
|
17763
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
17764
|
-
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;
|
|
17765
17766
|
|
|
17766
17767
|
var Notification = function (props) {
|
|
17767
17768
|
if (!props.isVisible)
|
|
@@ -17769,9 +17770,9 @@ var Notification = function (props) {
|
|
|
17769
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) }))); }) }))] })));
|
|
17770
17771
|
};
|
|
17771
17772
|
|
|
17772
|
-
var Container$
|
|
17773
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17774
|
-
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;
|
|
17775
17776
|
|
|
17776
17777
|
var NumberField = function (props) {
|
|
17777
17778
|
var onChange = function (value) {
|
|
@@ -17782,12 +17783,12 @@ var NumberField = function (props) {
|
|
|
17782
17783
|
if (props.onBlur)
|
|
17783
17784
|
props.onBlur(props.name);
|
|
17784
17785
|
};
|
|
17785
|
-
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 })] }));
|
|
17786
17787
|
};
|
|
17787
17788
|
|
|
17788
|
-
var Container$
|
|
17789
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
17790
|
-
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;
|
|
17791
17792
|
|
|
17792
17793
|
var PasswordInputField = function (props) {
|
|
17793
17794
|
var onChange = function (value) {
|
|
@@ -17803,10 +17804,10 @@ var PasswordInputField = function (props) {
|
|
|
17803
17804
|
if (props.onBlur)
|
|
17804
17805
|
props.onBlur(props.name);
|
|
17805
17806
|
};
|
|
17806
|
-
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 })] }));
|
|
17807
17808
|
};
|
|
17808
17809
|
|
|
17809
|
-
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) {
|
|
17810
17811
|
var isVisible = _a.isVisible;
|
|
17811
17812
|
return (isVisible ? "100%" : "0%");
|
|
17812
17813
|
}, function (_a) {
|
|
@@ -17819,7 +17820,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$k || (templ
|
|
|
17819
17820
|
var contrast = _a.contrast;
|
|
17820
17821
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17821
17822
|
});
|
|
17822
|
-
var templateObject_1$
|
|
17823
|
+
var templateObject_1$l;
|
|
17823
17824
|
|
|
17824
17825
|
var Popup = function (props) {
|
|
17825
17826
|
var popupRef = React$3.useRef(null);
|
|
@@ -17854,27 +17855,27 @@ var Popup = function (props) {
|
|
|
17854
17855
|
});
|
|
17855
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) &&
|
|
17856
17857
|
props.content.length > 0 &&
|
|
17857
|
-
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] }))] }));
|
|
17858
17859
|
};
|
|
17859
17860
|
|
|
17860
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
17861
|
-
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) {
|
|
17862
17863
|
var showInfo = _a.showInfo;
|
|
17863
17864
|
return (showInfo ? "10px" : "");
|
|
17864
17865
|
});
|
|
17865
|
-
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) {
|
|
17866
17867
|
var percent = _a.percent;
|
|
17867
17868
|
return "calc(".concat(percent, "% - 6px)");
|
|
17868
17869
|
}, function (_a) {
|
|
17869
17870
|
var color = _a.color;
|
|
17870
17871
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17871
17872
|
});
|
|
17872
|
-
var templateObject_1$
|
|
17873
|
+
var templateObject_1$k, templateObject_2$j, templateObject_3$9;
|
|
17873
17874
|
|
|
17874
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, "%") })))] })); };
|
|
17875
17876
|
|
|
17876
|
-
var Container$
|
|
17877
|
-
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) {
|
|
17878
17879
|
var status = _a.status;
|
|
17879
17880
|
return (!!status ? "pointer" : "not-allowed");
|
|
17880
17881
|
}, function (_a) {
|
|
@@ -17896,9 +17897,9 @@ var Step$2 = styled__default["default"].li(templateObject_2$h || (templateObject
|
|
|
17896
17897
|
var hasTitle = _a.hasTitle;
|
|
17897
17898
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17898
17899
|
}, theme.colors.lightGray.dark);
|
|
17899
|
-
var templateObject_1$
|
|
17900
|
+
var templateObject_1$j, templateObject_2$i;
|
|
17900
17901
|
|
|
17901
|
-
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) {
|
|
17902
17903
|
var title = _a.title, onClick = _a.onClick;
|
|
17903
17904
|
var step = index + 1;
|
|
17904
17905
|
var status = props.current > step
|
|
@@ -17913,8 +17914,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$b, { children:
|
|
|
17913
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)));
|
|
17914
17915
|
}) })); };
|
|
17915
17916
|
|
|
17916
|
-
var Container$
|
|
17917
|
-
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) {
|
|
17918
17919
|
var status = _a.status;
|
|
17919
17920
|
return (!!status ? "pointer" : "not-allowed");
|
|
17920
17921
|
}, function (_a) {
|
|
@@ -17933,9 +17934,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$g || (templateObject
|
|
|
17933
17934
|
? theme.colors.lightGray.light
|
|
17934
17935
|
: theme.colors.darkGray.light;
|
|
17935
17936
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17936
|
-
var templateObject_1$
|
|
17937
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17937
17938
|
|
|
17938
|
-
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) {
|
|
17939
17940
|
var title = _a.title, onClick = _a.onClick;
|
|
17940
17941
|
var step = index + 1;
|
|
17941
17942
|
var status = props.current > step
|
|
@@ -17954,15 +17955,15 @@ var Steps = function (props) {
|
|
|
17954
17955
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
17955
17956
|
};
|
|
17956
17957
|
|
|
17957
|
-
var TabsContainer$1 = styled__default["default"].div(templateObject_1$
|
|
17958
|
-
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) {
|
|
17959
17960
|
var isActive = _a.isActive;
|
|
17960
17961
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
17961
17962
|
}, function (_a) {
|
|
17962
17963
|
var isActive = _a.isActive;
|
|
17963
17964
|
return isActive ? theme.colors.blue.base : "";
|
|
17964
17965
|
}, theme.colors.blue.base);
|
|
17965
|
-
var templateObject_1$
|
|
17966
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17966
17967
|
|
|
17967
17968
|
var Tabs$2 = function (_a) {
|
|
17968
17969
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17982,15 +17983,15 @@ var Tabs$2 = function (_a) {
|
|
|
17982
17983
|
}) }));
|
|
17983
17984
|
};
|
|
17984
17985
|
|
|
17985
|
-
var TabsContainer = styled__default["default"].div(templateObject_1$
|
|
17986
|
-
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) {
|
|
17987
17988
|
var isActive = _a.isActive;
|
|
17988
17989
|
return (isActive ? "block" : "none");
|
|
17989
17990
|
}, theme.colors.blue.base, function (_a) {
|
|
17990
17991
|
var isActive = _a.isActive;
|
|
17991
17992
|
return isActive ? theme.colors.blue.base : "";
|
|
17992
17993
|
}, theme.colors.blue.base);
|
|
17993
|
-
var templateObject_1$
|
|
17994
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17994
17995
|
|
|
17995
17996
|
var Tabs$1 = function (_a) {
|
|
17996
17997
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -18014,14 +18015,14 @@ var Tabs = function (props) {
|
|
|
18014
18015
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Tabs$1, __assign$2({}, props))) : (jsxRuntime.jsx(Tabs$2, __assign$2({}, props)));
|
|
18015
18016
|
};
|
|
18016
18017
|
|
|
18017
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
18018
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
18019
|
-
var RadioWrapper = styled__default["default"].div(templateObject_3$
|
|
18020
|
-
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) {
|
|
18021
18022
|
var weight = _a.weight;
|
|
18022
18023
|
return weight || 500;
|
|
18023
18024
|
}, theme.colors.darkGray.base);
|
|
18024
|
-
var templateObject_1$
|
|
18025
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$8, templateObject_4$5;
|
|
18025
18026
|
|
|
18026
18027
|
var RadioGroup = function (props) {
|
|
18027
18028
|
var onChange = function (value) {
|
|
@@ -18038,9 +18039,9 @@ var RadioGroup = function (props) {
|
|
|
18038
18039
|
}) })] }));
|
|
18039
18040
|
};
|
|
18040
18041
|
|
|
18041
|
-
var Container$
|
|
18042
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
18043
|
-
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;
|
|
18044
18045
|
|
|
18045
18046
|
var SelectField = function (props) {
|
|
18046
18047
|
var onChange = function (value) {
|
|
@@ -18051,15 +18052,15 @@ var SelectField = function (props) {
|
|
|
18051
18052
|
if (props.onBlur)
|
|
18052
18053
|
props.onBlur(props.name);
|
|
18053
18054
|
};
|
|
18054
|
-
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) {
|
|
18055
18056
|
var value = _a.value, label = _a.label;
|
|
18056
18057
|
return (jsxRuntime.jsx("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
18057
18058
|
}) }))] }));
|
|
18058
18059
|
};
|
|
18059
18060
|
|
|
18060
|
-
var Container$
|
|
18061
|
-
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
18062
|
-
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;
|
|
18063
18064
|
|
|
18064
18065
|
var ToggleField = function (props) {
|
|
18065
18066
|
var onChange = function (value) {
|
|
@@ -18070,10 +18071,10 @@ var ToggleField = function (props) {
|
|
|
18070
18071
|
if (props.onBlur)
|
|
18071
18072
|
props.onBlur(props.name);
|
|
18072
18073
|
};
|
|
18073
|
-
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 })] }));
|
|
18074
18075
|
};
|
|
18075
18076
|
|
|
18076
|
-
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) {
|
|
18077
18078
|
var isVisible = _a.isVisible;
|
|
18078
18079
|
return (isVisible ? "100%" : "0%");
|
|
18079
18080
|
}, function (_a) {
|
|
@@ -18083,7 +18084,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$b || (tem
|
|
|
18083
18084
|
var x = _a.x;
|
|
18084
18085
|
return (x ? "".concat(x, "px") : "");
|
|
18085
18086
|
});
|
|
18086
|
-
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) {
|
|
18087
18088
|
var color = _a.color;
|
|
18088
18089
|
switch (color) {
|
|
18089
18090
|
default:
|
|
@@ -18093,7 +18094,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$a || (templat
|
|
|
18093
18094
|
return theme.colors.lightGray.dark;
|
|
18094
18095
|
}
|
|
18095
18096
|
});
|
|
18096
|
-
var templateObject_1$
|
|
18097
|
+
var templateObject_1$c, templateObject_2$b;
|
|
18097
18098
|
|
|
18098
18099
|
var Tooltip$2 = function (props) {
|
|
18099
18100
|
var tooltipRef = React$3.useRef(null);
|
|
@@ -47717,13 +47718,13 @@ var xAxis = {
|
|
|
47717
47718
|
domain: ["dataMin", "dataMax"],
|
|
47718
47719
|
};
|
|
47719
47720
|
|
|
47720
|
-
var Container$
|
|
47721
|
-
var Label$2 = styled__default["default"].div(templateObject_2$
|
|
47722
|
-
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) {
|
|
47723
47724
|
var color = _a.color;
|
|
47724
47725
|
return color;
|
|
47725
47726
|
});
|
|
47726
|
-
var templateObject_1$
|
|
47727
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$7;
|
|
47727
47728
|
|
|
47728
47729
|
var Tooltip = function (_a) {
|
|
47729
47730
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47752,7 +47753,7 @@ var Tooltip = function (_a) {
|
|
|
47752
47753
|
return "".concat(format$1(fromUnixTime(label), "MMMM", options));
|
|
47753
47754
|
}
|
|
47754
47755
|
};
|
|
47755
|
-
return (jsxRuntime.jsxs(Container$
|
|
47756
|
+
return (jsxRuntime.jsxs(Container$8, { children: [payload.map(function (_a, index) {
|
|
47756
47757
|
var name = _a.name, value = _a.value, stroke = _a.stroke;
|
|
47757
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)));
|
|
47758
47759
|
}), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: renderLabel() }))] }));
|
|
@@ -47958,9 +47959,9 @@ var Chart = function (_a) {
|
|
|
47958
47959
|
}) }), period)] })), renderChart()] }));
|
|
47959
47960
|
};
|
|
47960
47961
|
|
|
47961
|
-
var Container$
|
|
47962
|
-
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
47963
|
-
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;
|
|
47964
47965
|
|
|
47965
47966
|
var TextareaField = function (props) {
|
|
47966
47967
|
var onChange = function (value) {
|
|
@@ -47971,12 +47972,12 @@ var TextareaField = function (props) {
|
|
|
47971
47972
|
if (props.onBlur)
|
|
47972
47973
|
props.onBlur(props.name);
|
|
47973
47974
|
};
|
|
47974
|
-
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))); })] })))] }));
|
|
47975
47976
|
};
|
|
47976
47977
|
|
|
47977
|
-
var Container$
|
|
47978
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
47979
|
-
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;
|
|
47980
47981
|
|
|
47981
47982
|
var RangeField = function (props) {
|
|
47982
47983
|
var onChange = function (value) {
|
|
@@ -47987,25 +47988,25 @@ var RangeField = function (props) {
|
|
|
47987
47988
|
if (props.onBlur)
|
|
47988
47989
|
props.onBlur(props.name);
|
|
47989
47990
|
};
|
|
47990
|
-
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 })] }));
|
|
47991
47992
|
};
|
|
47992
47993
|
|
|
47993
47994
|
var FeedbackColors = {
|
|
47994
47995
|
success: theme.colors.green.base,
|
|
47995
47996
|
error: theme.colors.red.base,
|
|
47996
47997
|
};
|
|
47997
|
-
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) {
|
|
47998
47999
|
var status = _a.status;
|
|
47999
48000
|
return FeedbackColors[status];
|
|
48000
48001
|
});
|
|
48001
|
-
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) {
|
|
48002
48003
|
var status = _a.status;
|
|
48003
48004
|
return FeedbackColors[status];
|
|
48004
48005
|
}, function (_a) {
|
|
48005
48006
|
var status = _a.status;
|
|
48006
48007
|
return FeedbackColors[status];
|
|
48007
48008
|
});
|
|
48008
|
-
var templateObject_1$
|
|
48009
|
+
var templateObject_1$8, templateObject_2$7;
|
|
48009
48010
|
|
|
48010
48011
|
var WithValidation = function (_a) {
|
|
48011
48012
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -48018,10 +48019,10 @@ var WithValidation = function (_a) {
|
|
|
48018
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 }))] }))] })));
|
|
48019
48020
|
};
|
|
48020
48021
|
|
|
48021
|
-
var FormWrapper = styled__default["default"].form(templateObject_1$
|
|
48022
|
-
var DescriptionWrapper = styled__default["default"].div(templateObject_2$
|
|
48023
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_3$
|
|
48024
|
-
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;
|
|
48025
48026
|
|
|
48026
48027
|
var Form = React$3.forwardRef(function (props, ref) {
|
|
48027
48028
|
var _a = React$3.useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -48250,7 +48251,7 @@ var Form = React$3.forwardRef(function (props, ref) {
|
|
|
48250
48251
|
}) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
|
|
48251
48252
|
});
|
|
48252
48253
|
|
|
48253
|
-
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) {
|
|
48254
48255
|
var color = _a.color, active = _a.active;
|
|
48255
48256
|
if (active)
|
|
48256
48257
|
return theme.colors[color].dark;
|
|
@@ -48274,22 +48275,22 @@ var Container$4 = styled__default["default"].div(templateObject_1$5 || (template
|
|
|
48274
48275
|
return theme.colors[color].base;
|
|
48275
48276
|
return "";
|
|
48276
48277
|
});
|
|
48277
|
-
var templateObject_1$
|
|
48278
|
+
var templateObject_1$6;
|
|
48278
48279
|
|
|
48279
|
-
var Key = function (props) {
|
|
48280
|
+
var Key$1 = function (props) {
|
|
48280
48281
|
var _a;
|
|
48281
|
-
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))); })) })));
|
|
48282
48283
|
};
|
|
48283
48284
|
|
|
48284
|
-
var Container$
|
|
48285
|
-
var SpecialRow = styled__default["default"].div(templateObject_2$
|
|
48286
|
-
var TopRow = styled__default["default"].div(templateObject_3$
|
|
48287
|
-
var StartRow = styled__default["default"].div(templateObject_4$
|
|
48288
|
-
var BottomRow = styled__default["default"].div(templateObject_5$
|
|
48289
|
-
var SpacebarRow = styled__default["default"].div(templateObject_6$
|
|
48290
|
-
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;
|
|
48291
48292
|
|
|
48292
|
-
var Keyboard = function (props) {
|
|
48293
|
+
var Keyboard$1 = function (props) {
|
|
48293
48294
|
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
48294
48295
|
var _b = React$3.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
|
|
48295
48296
|
React$3.useEffect(function () {
|
|
@@ -48311,53 +48312,280 @@ var Keyboard = function (props) {
|
|
|
48311
48312
|
}, [props.keys]);
|
|
48312
48313
|
if (!keys)
|
|
48313
48314
|
return null;
|
|
48314
|
-
return (jsxRuntime.jsxs(Container$
|
|
48315
|
-
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 ||
|
|
48316
|
-
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 ||
|
|
48317
|
-
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 ||
|
|
48318
|
-
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 ||
|
|
48319
|
-
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 ||
|
|
48320
|
-
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 ||
|
|
48321
|
-
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 ||
|
|
48322
|
-
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 ||
|
|
48323
|
-
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 ||
|
|
48324
|
-
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 ||
|
|
48325
|
-
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 ||
|
|
48326
|
-
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 ||
|
|
48327
|
-
keys[65].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
48328
|
-
keys[63].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
48329
|
-
keys[61].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
48330
|
-
keys[59].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
48331
|
-
keys[69].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
48332
|
-
keys[68].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
48333
|
-
keys[58].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
48334
|
-
keys[60].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
48335
|
-
keys[62].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
|
|
48336
|
-
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 ||
|
|
48337
|
-
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 ||
|
|
48338
|
-
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 ||
|
|
48339
|
-
keys[54].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
48340
|
-
keys[52].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
48341
|
-
keys[50].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
48342
|
-
keys[48].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
48343
|
-
keys[57].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
48344
|
-
keys[56].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
48345
|
-
keys[47].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
48346
|
-
keys[49].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
48347
|
-
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 ||
|
|
48348
|
-
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 ||
|
|
48349
|
-
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 ||
|
|
48350
|
-
keys[77].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
48351
|
-
keys[75].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
48352
|
-
keys[73].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
48353
|
-
keys[71].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
48354
|
-
keys[79].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
48355
|
-
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 ||
|
|
48356
|
-
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 ||
|
|
48357
|
-
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 ||
|
|
48358
|
-
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 ||
|
|
48359
|
-
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, {})] })] }));
|
|
48360
|
-
};
|
|
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;
|
|
48361
48589
|
|
|
48362
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"])));
|
|
48363
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) {
|
|
@@ -48583,7 +48811,7 @@ exports.IconButton = IconButton;
|
|
|
48583
48811
|
exports.Illustration = Illustration;
|
|
48584
48812
|
exports.Input = Input;
|
|
48585
48813
|
exports.InputField = InputField;
|
|
48586
|
-
exports.Key = Key$
|
|
48814
|
+
exports.Key = Key$2;
|
|
48587
48815
|
exports.Keyboard = Keyboard;
|
|
48588
48816
|
exports.Link = Link;
|
|
48589
48817
|
exports.Loading = Loading;
|