@typeolymp/ui-components 1.9.15 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/organisms/Table/index.d.ts +13 -0
- package/build/components/organisms/Table/stories.d.ts +7 -0
- package/build/components/organisms/Table/styles.d.ts +7 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +210 -186
- package/build/index.es.js.map +1 -1
- package/build/index.js +210 -185
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3408,14 +3408,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3408
3408
|
var React$2 = __importStar$2(React__default["default"]);
|
|
3409
3409
|
var react_1 = require$$1;
|
|
3410
3410
|
var helpers_1 = helpers$1;
|
|
3411
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3411
|
+
var beat = react_1.keyframes(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
3412
3412
|
var Loader = /** @class */ (function (_super) {
|
|
3413
3413
|
__extends$1(Loader, _super);
|
|
3414
3414
|
function Loader() {
|
|
3415
3415
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3416
3416
|
_this.style = function (i) {
|
|
3417
3417
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3418
|
-
return react_1.css(templateObject_2$
|
|
3418
|
+
return react_1.css(templateObject_2$v || (templateObject_2$v = __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");
|
|
3419
3419
|
};
|
|
3420
3420
|
return _this;
|
|
3421
3421
|
}
|
|
@@ -3430,9 +3430,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3430
3430
|
return Loader;
|
|
3431
3431
|
}(React$2.PureComponent));
|
|
3432
3432
|
var _default = BeatLoader.default = Loader;
|
|
3433
|
-
var templateObject_1$
|
|
3433
|
+
var templateObject_1$P, templateObject_2$v;
|
|
3434
3434
|
|
|
3435
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
3435
|
+
var StyledButton = styled__default["default"].button(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
3436
3436
|
var fluid = _a.fluid;
|
|
3437
3437
|
return (fluid ? "100%" : "fit-content");
|
|
3438
3438
|
}, function (_a) {
|
|
@@ -3482,11 +3482,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$N || (temp
|
|
|
3482
3482
|
? theme.button.medium.heightActive
|
|
3483
3483
|
: theme.button[size].heightActive;
|
|
3484
3484
|
});
|
|
3485
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3485
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n background-color: ", ";\n border: 2px 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: 2px 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) {
|
|
3486
3486
|
var size = _a.size;
|
|
3487
3487
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3488
3488
|
});
|
|
3489
|
-
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$
|
|
3489
|
+
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$b || (templateObject_3$b = __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) {
|
|
3490
3490
|
var size = _a.size;
|
|
3491
3491
|
return !size
|
|
3492
3492
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3502,14 +3502,14 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$a ||
|
|
|
3502
3502
|
? theme.button.medium.marginTopActive
|
|
3503
3503
|
: theme.button[size].marginTopActive;
|
|
3504
3504
|
});
|
|
3505
|
-
var LoaderWrapper = styled__default["default"].div(templateObject_4$
|
|
3505
|
+
var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3506
3506
|
var width = _a.width;
|
|
3507
3507
|
return "".concat(width, "px");
|
|
3508
3508
|
}, function (_a) {
|
|
3509
3509
|
var size = _a.size;
|
|
3510
3510
|
return (size === "small" ? "3px" : "");
|
|
3511
3511
|
});
|
|
3512
|
-
var templateObject_1$
|
|
3512
|
+
var templateObject_1$O, templateObject_2$u, templateObject_3$b, templateObject_4$8;
|
|
3513
3513
|
|
|
3514
3514
|
var Button = React$3.forwardRef(function (_a, ref) {
|
|
3515
3515
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
@@ -3545,7 +3545,7 @@ var Button = React$3.forwardRef(function (_a, ref) {
|
|
|
3545
3545
|
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.jsx("span", { children: label }) })));
|
|
3546
3546
|
});
|
|
3547
3547
|
|
|
3548
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
3548
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
3549
3549
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3550
3550
|
if (disabled)
|
|
3551
3551
|
return theme.colors.lightGray.darker;
|
|
@@ -3566,7 +3566,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$M || (templ
|
|
|
3566
3566
|
return theme.colors.green.base;
|
|
3567
3567
|
return theme.colors.lightGray.darker;
|
|
3568
3568
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3569
|
-
var templateObject_1$
|
|
3569
|
+
var templateObject_1$N;
|
|
3570
3570
|
|
|
3571
3571
|
var Checkbox = function (props) {
|
|
3572
3572
|
var _a;
|
|
@@ -3599,7 +3599,7 @@ var Checkbox = function (props) {
|
|
|
3599
3599
|
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 })] })));
|
|
3600
3600
|
};
|
|
3601
3601
|
|
|
3602
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
3602
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3603
3603
|
var size = _a.size;
|
|
3604
3604
|
switch (size) {
|
|
3605
3605
|
case "small":
|
|
@@ -3622,7 +3622,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$L || (templateOb
|
|
|
3622
3622
|
return "27px";
|
|
3623
3623
|
}
|
|
3624
3624
|
});
|
|
3625
|
-
var templateObject_1$
|
|
3625
|
+
var templateObject_1$M;
|
|
3626
3626
|
|
|
3627
3627
|
var parsers = {};
|
|
3628
3628
|
|
|
@@ -3732,16 +3732,16 @@ var Locale;
|
|
|
3732
3732
|
})(Locale || (Locale = {}));
|
|
3733
3733
|
Locale$1.default = Locale;
|
|
3734
3734
|
|
|
3735
|
-
var Medal$
|
|
3735
|
+
var Medal$3 = {};
|
|
3736
3736
|
|
|
3737
|
-
Object.defineProperty(Medal$
|
|
3738
|
-
var Medal$
|
|
3737
|
+
Object.defineProperty(Medal$3, "__esModule", { value: true });
|
|
3738
|
+
var Medal$2;
|
|
3739
3739
|
(function (Medal) {
|
|
3740
3740
|
Medal["GOLD"] = "gold";
|
|
3741
3741
|
Medal["SILVER"] = "silver";
|
|
3742
3742
|
Medal["BRONZE"] = "bronze";
|
|
3743
|
-
})(Medal$
|
|
3744
|
-
Medal$
|
|
3743
|
+
})(Medal$2 || (Medal$2 = {}));
|
|
3744
|
+
Medal$3.default = Medal$2;
|
|
3745
3745
|
|
|
3746
3746
|
var PaymentStatus$1 = {};
|
|
3747
3747
|
|
|
@@ -3815,7 +3815,7 @@ var __importDefault$2 = (commonjsGlobal && commonjsGlobal.__importDefault) || fu
|
|
|
3815
3815
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
3816
3816
|
};
|
|
3817
3817
|
Object.defineProperty(enums, "__esModule", { value: true });
|
|
3818
|
-
enums.TextTopic = enums.Role = enums.RankingType = enums.Plan = enums.PaymentType = enums.PaymentStatus = enums.Medal = enums.Locale = enums.KeyboardLayout = enums.ExerciseType = enums.Currency = enums.CourseTranslation = enums.Color = enums.ChartDataType = enums.AchievementType = void 0;
|
|
3818
|
+
enums.TextTopic = enums.Role = enums.RankingType = enums.Plan = enums.PaymentType = enums.PaymentStatus = Medal$1 = enums.Medal = enums.Locale = enums.KeyboardLayout = enums.ExerciseType = enums.Currency = enums.CourseTranslation = enums.Color = enums.ChartDataType = enums.AchievementType = void 0;
|
|
3819
3819
|
var AchievementType_1 = __importDefault$2(AchievementType$1);
|
|
3820
3820
|
enums.AchievementType = AchievementType_1.default;
|
|
3821
3821
|
var ChartDataType_1 = __importDefault$2(ChartDataType$1);
|
|
@@ -3832,8 +3832,8 @@ var KeyboardLayout_1 = __importDefault$2(KeyboardLayout$1);
|
|
|
3832
3832
|
enums.KeyboardLayout = KeyboardLayout_1.default;
|
|
3833
3833
|
var Locale_1 = __importDefault$2(Locale$1);
|
|
3834
3834
|
enums.Locale = Locale_1.default;
|
|
3835
|
-
var Medal_1 = __importDefault$2(Medal$
|
|
3836
|
-
enums.Medal = Medal_1.default;
|
|
3835
|
+
var Medal_1 = __importDefault$2(Medal$3);
|
|
3836
|
+
var Medal$1 = enums.Medal = Medal_1.default;
|
|
3837
3837
|
var PaymentStatus_1 = __importDefault$2(PaymentStatus$1);
|
|
3838
3838
|
enums.PaymentStatus = PaymentStatus_1.default;
|
|
3839
3839
|
var PaymentType_1 = __importDefault$2(PaymentType$1);
|
|
@@ -3890,7 +3890,7 @@ var flags = {
|
|
|
3890
3890
|
};
|
|
3891
3891
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3892
3892
|
|
|
3893
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
3893
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
3894
3894
|
var type = _a.type;
|
|
3895
3895
|
return theme.heading[type].fontSize;
|
|
3896
3896
|
}, function (_a) {
|
|
@@ -3914,14 +3914,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$K || (templ
|
|
|
3914
3914
|
var align = _a.align;
|
|
3915
3915
|
return align;
|
|
3916
3916
|
});
|
|
3917
|
-
var templateObject_1$
|
|
3917
|
+
var templateObject_1$L;
|
|
3918
3918
|
|
|
3919
3919
|
var Heading = function (props) {
|
|
3920
3920
|
var element = !!props.as ? props.as : props.type;
|
|
3921
3921
|
return (jsxRuntime.jsx(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3922
3922
|
};
|
|
3923
3923
|
|
|
3924
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
3924
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
3925
3925
|
var size = _a.size;
|
|
3926
3926
|
return theme.icon[size] || theme.icon.medium;
|
|
3927
3927
|
}, function (_a) {
|
|
@@ -3951,7 +3951,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$J || (templateOb
|
|
|
3951
3951
|
return theme.colors.lightGray.light;
|
|
3952
3952
|
}
|
|
3953
3953
|
});
|
|
3954
|
-
var templateObject_1$
|
|
3954
|
+
var templateObject_1$K;
|
|
3955
3955
|
|
|
3956
3956
|
var icons = {
|
|
3957
3957
|
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" })),
|
|
@@ -3977,10 +3977,11 @@ var icons = {
|
|
|
3977
3977
|
facebook: (jsxRuntime.jsx("path", { d: "M18.75.5a2.17 2.17 0 011.594.656c.437.438.656.969.656 1.594v16.5a2.17 2.17 0 01-.656 1.594 2.17 2.17 0 01-1.594.656h-6.422v-7.125h2.719L15.562 11h-3.234V8.797c0-1.188.625-1.781 1.875-1.781h1.453v-2.86a14.647 14.647 0 00-2.578-.234c-.906 0-1.687.172-2.344.515-.625.344-1.125.86-1.5 1.547-.375.688-.562 1.5-.562 2.438V11H5.719v3.375h2.953V21.5H2.25a2.17 2.17 0 01-1.594-.656A2.17 2.17 0 010 19.25V2.75c0-.625.219-1.156.656-1.594A2.17 2.17 0 012.25.5h16.5z" })),
|
|
3978
3978
|
instagram: (jsxRuntime.jsx("path", { d: "M8.719 9.266c.5-.5 1.094-.75 1.781-.75.688 0 1.266.25 1.734.75.5.468.75 1.046.75 1.734s-.25 1.281-.75 1.781c-.468.469-1.046.703-1.734.703a2.516 2.516 0 01-1.781-.703A2.516 2.516 0 018.016 11c0-.688.234-1.266.703-1.734zm7.64-2.672c.188.5.282 1.968.282 4.406 0 2.438-.094 3.906-.282 4.406a2.558 2.558 0 01-1.453 1.453c-.5.188-1.969.282-4.406.282-2.438 0-3.906-.094-4.406-.282a2.558 2.558 0 01-1.453-1.453c-.188-.5-.282-1.969-.282-4.406 0-2.438.094-3.906.282-4.406A2.558 2.558 0 016.094 5.14c.5-.188 1.968-.282 4.406-.282 2.438 0 3.906.094 4.406.282a2.558 2.558 0 011.453 1.453zm-8.578 7.125a3.704 3.704 0 002.719 1.125 3.704 3.704 0 002.719-1.125A3.704 3.704 0 0014.344 11a3.704 3.704 0 00-1.125-2.719A3.704 3.704 0 0010.5 7.156a3.704 3.704 0 00-2.719 1.125A3.704 3.704 0 006.656 11c0 1.063.375 1.969 1.125 2.719zm6.047-6.094a.9.9 0 00.656.281c.25 0 .47-.078.657-.234a.9.9 0 00.28-.656.9.9 0 00-.28-.657.9.9 0 00-.657-.28.9.9 0 00-.656.28.994.994 0 00-.234.657c0 .218.078.421.234.609zM18.75.5a2.17 2.17 0 011.594.656c.437.438.656.969.656 1.594v16.5a2.17 2.17 0 01-.656 1.594 2.17 2.17 0 01-1.594.656H2.25a2.17 2.17 0 01-1.594-.656A2.17 2.17 0 010 19.25V2.75c0-.625.219-1.156.656-1.594A2.17 2.17 0 012.25.5h16.5zm-.797 13.594c.031-.625.047-1.656.047-3.094s-.016-2.469-.047-3.094c-.062-1.343-.469-2.39-1.219-3.14-.75-.75-1.797-1.157-3.14-1.22-.625-.03-1.656-.046-3.094-.046s-2.469.016-3.094.047c-1.343.062-2.39.469-3.14 1.219-.75.75-1.157 1.796-1.22 3.14C3.017 8.531 3 9.563 3 11c0 1.438.016 2.469.047 3.094.062 1.344.469 2.39 1.219 3.14.75.75 1.796 1.157 3.14 1.22.625.03 1.657.046 3.094.046 1.438 0 2.469-.016 3.094-.047 1.344-.062 2.39-.469 3.14-1.219.75-.75 1.157-1.797 1.22-3.14z" })),
|
|
3979
3979
|
menuAlt: (jsxRuntime.jsx("path", { d: "M1.5 3.4C.7 3.4 0 4.1 0 4.9s.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-21zM0 11.9c0-.8.7-1.5 1.5-1.5h21c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-21c-.8 0-1.5-.7-1.5-1.5zm0 7c0-.8.7-1.5 1.5-1.5h13c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5z" })),
|
|
3980
|
+
link: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M10.1 17.9l-2.8 2.8c-.7.7-1.7 1-2.7.7-1-.3-1.7-1-2-2-.3-1 0-2 .7-2.7L9 11c.5-.5 1.2-.8 2-.8.7 0 1.5.3 2 .8.2.2.6.4.9.4.3 0 .6-.1.9-.4.2-.2.4-.5.4-.9 0-.3-.1-.6-.4-.9-1-1-2.3-1.5-3.7-1.5-1.4 0-2.7.6-3.7 1.6L1.6 15C.6 16 0 17.3 0 18.7c0 1.4.5 2.7 1.5 3.7s2.3 1.5 3.7 1.5c1.4.1 2.8-.4 3.8-1.4l2.8-2.8c.2-.2.4-.5.4-.9 0-.3-.1-.6-.4-.9-.2-.2-.5-.4-.9-.4-.3 0-.6.2-.8.4z" }), jsxRuntime.jsx("path", { d: "M22.5 1.5c-1-1-2.3-1.5-3.7-1.5-1.5 0-2.8.6-3.8 1.6l-2.8 2.8c-.3.3-.4.8-.3 1.2.1.4.4.7.9.8.4.1.9 0 1.2-.3l2.8-2.8c.7-.7 1.7-1 2.7-.7 1 .3 1.7 1 2 2 .3 1 0 2-.7 2.7L15 12.9c-.5.5-1.2.8-2 .8-.7 0-1.5-.3-2-.8-.3-.3-.8-.4-1.2-.3-.4.1-.8.4-.9.9-.1.4 0 .9.3 1.2 1 1 2.3 1.5 3.7 1.5 1.4 0 2.7-.6 3.7-1.6L22.4 9c1-1 1.6-2.3 1.6-3.7 0-1.4-.5-2.8-1.5-3.8z" })] })),
|
|
3980
3981
|
};
|
|
3981
3982
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3982
3983
|
|
|
3983
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
3984
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3984
3985
|
var size = _a.size;
|
|
3985
3986
|
switch (size) {
|
|
3986
3987
|
default:
|
|
@@ -3992,7 +3993,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$I || (templateOb
|
|
|
3992
3993
|
return "118px";
|
|
3993
3994
|
}
|
|
3994
3995
|
});
|
|
3995
|
-
var templateObject_1$
|
|
3996
|
+
var templateObject_1$J;
|
|
3996
3997
|
|
|
3997
3998
|
var illustrations = {
|
|
3998
3999
|
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" })] }))),
|
|
@@ -4008,14 +4009,14 @@ var illustrations = {
|
|
|
4008
4009
|
};
|
|
4009
4010
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4010
4011
|
|
|
4011
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
4012
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
4012
4013
|
var isChanged = _a.isChanged;
|
|
4013
4014
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
4014
4015
|
}, function (_a) {
|
|
4015
4016
|
var disabled = _a.disabled;
|
|
4016
4017
|
return (disabled ? "not-allowed" : "pointer");
|
|
4017
4018
|
});
|
|
4018
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
4019
|
+
var StyledInput = styled__default["default"].input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4019
4020
|
var disabled = _a.disabled;
|
|
4020
4021
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4021
4022
|
}, function (_a) {
|
|
@@ -4028,7 +4029,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$s || (templa
|
|
|
4028
4029
|
var disabled = _a.disabled;
|
|
4029
4030
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4030
4031
|
}, 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));
|
|
4031
|
-
var templateObject_1$
|
|
4032
|
+
var templateObject_1$I, templateObject_2$t;
|
|
4032
4033
|
|
|
4033
4034
|
var PasswordInput = function (props) {
|
|
4034
4035
|
var _a = React$3.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -4208,7 +4209,7 @@ Input.Date = DateInput;
|
|
|
4208
4209
|
|
|
4209
4210
|
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" })] }))] }))); };
|
|
4210
4211
|
|
|
4211
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
4212
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4212
4213
|
var size = _a.size;
|
|
4213
4214
|
switch (size) {
|
|
4214
4215
|
default:
|
|
@@ -4218,7 +4219,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$G || (templateOb
|
|
|
4218
4219
|
return "116px";
|
|
4219
4220
|
}
|
|
4220
4221
|
});
|
|
4221
|
-
var templateObject_1$
|
|
4222
|
+
var templateObject_1$H;
|
|
4222
4223
|
|
|
4223
4224
|
var medals = {
|
|
4224
4225
|
small: {
|
|
@@ -4234,11 +4235,11 @@ var medals = {
|
|
|
4234
4235
|
};
|
|
4235
4236
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4236
4237
|
|
|
4237
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
4238
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
4238
4239
|
var disabled = _a.disabled;
|
|
4239
4240
|
return (disabled ? "49.5px" : "");
|
|
4240
4241
|
});
|
|
4241
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
4242
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$s || (templateObject_2$s = __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) {
|
|
4242
4243
|
var disabled = _a.disabled;
|
|
4243
4244
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4244
4245
|
}, function (_a) {
|
|
@@ -4251,7 +4252,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$r || (
|
|
|
4251
4252
|
var disabled = _a.disabled;
|
|
4252
4253
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4253
4254
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4254
|
-
var templateObject_1$
|
|
4255
|
+
var templateObject_1$G, templateObject_2$s;
|
|
4255
4256
|
|
|
4256
4257
|
var Number$1 = function (props) {
|
|
4257
4258
|
var inputRef = React$3.useRef(null);
|
|
@@ -4288,7 +4289,7 @@ var Number$1 = function (props) {
|
|
|
4288
4289
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsxRuntime.jsx(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
4289
4290
|
};
|
|
4290
4291
|
|
|
4291
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
4292
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$F || (templateObject_1$F = __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"], ["\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"])), theme.fonts.paragraph, function (_a) {
|
|
4292
4293
|
var size = _a.size;
|
|
4293
4294
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4294
4295
|
}, function (_a) {
|
|
@@ -4320,11 +4321,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$E || (templa
|
|
|
4320
4321
|
var align = _a.align;
|
|
4321
4322
|
return align;
|
|
4322
4323
|
});
|
|
4323
|
-
var templateObject_1$
|
|
4324
|
+
var templateObject_1$F;
|
|
4324
4325
|
|
|
4325
4326
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4326
4327
|
|
|
4327
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
4328
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
4328
4329
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4329
4330
|
if (disabled)
|
|
4330
4331
|
return theme.colors.lightGray.darker;
|
|
@@ -4352,7 +4353,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$D || (template
|
|
|
4352
4353
|
return theme.colors.green.base;
|
|
4353
4354
|
return "";
|
|
4354
4355
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4355
|
-
var templateObject_1$
|
|
4356
|
+
var templateObject_1$E;
|
|
4356
4357
|
|
|
4357
4358
|
var Radio = function (props) {
|
|
4358
4359
|
var _a, _b;
|
|
@@ -4384,7 +4385,7 @@ var Radio = function (props) {
|
|
|
4384
4385
|
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 }) })));
|
|
4385
4386
|
};
|
|
4386
4387
|
|
|
4387
|
-
var StyledRange = styled__default["default"].div(templateObject_1$
|
|
4388
|
+
var StyledRange = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
4388
4389
|
var value = _a.value, disabled = _a.disabled;
|
|
4389
4390
|
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 )");
|
|
4390
4391
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4394,7 +4395,7 @@ var StyledRange = styled__default["default"].div(templateObject_1$C || (template
|
|
|
4394
4395
|
var disabled = _a.disabled;
|
|
4395
4396
|
return disabled ? "not-allowed" : "pointer";
|
|
4396
4397
|
});
|
|
4397
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$D;
|
|
4398
4399
|
|
|
4399
4400
|
var Range = function (props) {
|
|
4400
4401
|
var _a;
|
|
@@ -4423,11 +4424,11 @@ var Range = function (props) {
|
|
|
4423
4424
|
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 }) })));
|
|
4424
4425
|
};
|
|
4425
4426
|
|
|
4426
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
4427
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
4427
4428
|
var disabled = _a.disabled;
|
|
4428
4429
|
return (disabled ? "not-allowed" : "pointer");
|
|
4429
4430
|
});
|
|
4430
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
4431
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4431
4432
|
var disabled = _a.disabled;
|
|
4432
4433
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4433
4434
|
}, function (_a) {
|
|
@@ -4440,7 +4441,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$q || (temp
|
|
|
4440
4441
|
var isChanged = _a.isChanged;
|
|
4441
4442
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4442
4443
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4443
|
-
var templateObject_1$
|
|
4444
|
+
var templateObject_1$C, templateObject_2$r;
|
|
4444
4445
|
|
|
4445
4446
|
var Select = function (props) {
|
|
4446
4447
|
var _a;
|
|
@@ -4462,18 +4463,18 @@ var Select = function (props) {
|
|
|
4462
4463
|
return (jsxRuntime.jsxs(Wrapper$4, { 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] }))] }));
|
|
4463
4464
|
};
|
|
4464
4465
|
|
|
4465
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
4466
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4466
4467
|
var horizontal = _a.horizontal;
|
|
4467
4468
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4468
4469
|
}, function (_a) {
|
|
4469
4470
|
var vertical = _a.vertical;
|
|
4470
4471
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4471
4472
|
});
|
|
4472
|
-
var templateObject_1$
|
|
4473
|
+
var templateObject_1$B;
|
|
4473
4474
|
|
|
4474
4475
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign$2({}, props))); };
|
|
4475
4476
|
|
|
4476
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
4477
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$A || (templateObject_1$A = __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) {
|
|
4477
4478
|
var size = _a.size;
|
|
4478
4479
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4479
4480
|
}, function (_a) {
|
|
@@ -4501,18 +4502,18 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$z || (templ
|
|
|
4501
4502
|
return theme.colors.darkGray.dark;
|
|
4502
4503
|
}
|
|
4503
4504
|
});
|
|
4504
|
-
var templateObject_1$
|
|
4505
|
+
var templateObject_1$A;
|
|
4505
4506
|
|
|
4506
4507
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4507
4508
|
|
|
4508
|
-
var Container$
|
|
4509
|
-
var templateObject_1$
|
|
4509
|
+
var Container$k = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
4510
|
+
var templateObject_1$z;
|
|
4510
4511
|
|
|
4511
4512
|
var Tag = function (props) {
|
|
4512
|
-
return jsxRuntime.jsx(Container$
|
|
4513
|
+
return jsxRuntime.jsx(Container$k, { children: props.children });
|
|
4513
4514
|
};
|
|
4514
4515
|
|
|
4515
|
-
var Container$
|
|
4516
|
+
var Container$j = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
4516
4517
|
var disabled = _a.disabled;
|
|
4517
4518
|
return (disabled ? "not-allowed" : "pointer");
|
|
4518
4519
|
}, function (_a) {
|
|
@@ -4530,7 +4531,7 @@ var Container$i = styled__default["default"].div(templateObject_1$x || (template
|
|
|
4530
4531
|
var disabled = _a.disabled;
|
|
4531
4532
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4532
4533
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4533
|
-
var templateObject_1$
|
|
4534
|
+
var templateObject_1$y;
|
|
4534
4535
|
|
|
4535
4536
|
var Toggle = function (props) {
|
|
4536
4537
|
var _a;
|
|
@@ -4558,10 +4559,10 @@ var Toggle = function (props) {
|
|
|
4558
4559
|
props.onChange(newValue);
|
|
4559
4560
|
}
|
|
4560
4561
|
};
|
|
4561
|
-
return (jsxRuntime.jsx(Container$
|
|
4562
|
+
return (jsxRuntime.jsx(Container$j, __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 }) })));
|
|
4562
4563
|
};
|
|
4563
4564
|
|
|
4564
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
4565
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
4565
4566
|
var level = _a.level;
|
|
4566
4567
|
switch (level) {
|
|
4567
4568
|
case 1:
|
|
@@ -4572,7 +4573,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$w || (templateOb
|
|
|
4572
4573
|
return "70px";
|
|
4573
4574
|
}
|
|
4574
4575
|
});
|
|
4575
|
-
var templateObject_1$
|
|
4576
|
+
var templateObject_1$x;
|
|
4576
4577
|
|
|
4577
4578
|
var trophies = {
|
|
4578
4579
|
1: {
|
|
@@ -4608,7 +4609,7 @@ var trophies = {
|
|
|
4608
4609
|
};
|
|
4609
4610
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4610
4611
|
|
|
4611
|
-
var Container$
|
|
4612
|
+
var Container$i = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __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\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\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
4612
4613
|
var type = _a.type;
|
|
4613
4614
|
switch (type) {
|
|
4614
4615
|
case "success":
|
|
@@ -4625,11 +4626,11 @@ var Container$h = styled__default["default"].div(templateObject_1$v || (template
|
|
|
4625
4626
|
return theme.colors.red.base;
|
|
4626
4627
|
}
|
|
4627
4628
|
});
|
|
4628
|
-
var templateObject_1$
|
|
4629
|
+
var templateObject_1$w;
|
|
4629
4630
|
|
|
4630
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
4631
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$i, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
|
|
4631
4632
|
|
|
4632
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
4633
|
+
var StyledCard = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n background-color: ", ";\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 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) {
|
|
4633
4634
|
var ellipse = _a.ellipse;
|
|
4634
4635
|
return ellipse
|
|
4635
4636
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -4638,23 +4639,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$u || (templateO
|
|
|
4638
4639
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4639
4640
|
: "";
|
|
4640
4641
|
});
|
|
4641
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
4642
|
+
var Ellipse = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __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) {
|
|
4642
4643
|
var color = _a.color;
|
|
4643
4644
|
return color ? theme.colors[color].light : "";
|
|
4644
4645
|
});
|
|
4645
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
4646
|
-
var templateObject_1$
|
|
4646
|
+
var Content = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
4647
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$a;
|
|
4647
4648
|
|
|
4648
4649
|
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 })] }))); };
|
|
4649
4650
|
|
|
4650
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
4651
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
4652
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
4653
|
-
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$
|
|
4651
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
4652
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4653
|
+
var CheckboxWrapper = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
4654
|
+
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$7 || (templateObject_4$7 = __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) {
|
|
4654
4655
|
var weight = _a.weight;
|
|
4655
4656
|
return weight || 500;
|
|
4656
4657
|
}, theme.colors.darkGray.base);
|
|
4657
|
-
var templateObject_1$
|
|
4658
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9, templateObject_4$7;
|
|
4658
4659
|
|
|
4659
4660
|
var Checkboxes = function (props) {
|
|
4660
4661
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4677,12 +4678,12 @@ var Checkboxes = function (props) {
|
|
|
4677
4678
|
}) })] }));
|
|
4678
4679
|
};
|
|
4679
4680
|
|
|
4680
|
-
var Container$
|
|
4681
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
4681
|
+
var Container$h = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __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);
|
|
4682
|
+
var Item = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
4682
4683
|
var isOpen = _a.isOpen;
|
|
4683
4684
|
return (isOpen ? "" : "none");
|
|
4684
4685
|
}, theme.colors.lightGray.darker);
|
|
4685
|
-
var templateObject_1$
|
|
4686
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4686
4687
|
|
|
4687
4688
|
var Collapse = function (props) {
|
|
4688
4689
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4694,15 +4695,15 @@ var Collapse = function (props) {
|
|
|
4694
4695
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
4695
4696
|
}
|
|
4696
4697
|
};
|
|
4697
|
-
return (jsxRuntime.jsx(Container$
|
|
4698
|
+
return (jsxRuntime.jsx(Container$h, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
4698
4699
|
var isOpen = openItems.includes(index);
|
|
4699
4700
|
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" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
4700
4701
|
}) })));
|
|
4701
4702
|
};
|
|
4702
4703
|
|
|
4703
|
-
var Container$
|
|
4704
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4705
|
-
var templateObject_1$
|
|
4704
|
+
var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
4705
|
+
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4706
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4706
4707
|
|
|
4707
4708
|
var DateInputField = function (props) {
|
|
4708
4709
|
var onChange = function (value) {
|
|
@@ -4713,12 +4714,12 @@ var DateInputField = function (props) {
|
|
|
4713
4714
|
if (props.onBlur)
|
|
4714
4715
|
props.onBlur(props.name);
|
|
4715
4716
|
};
|
|
4716
|
-
return (jsxRuntime.jsxs(Container$
|
|
4717
|
+
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Label$8, __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 })] }));
|
|
4717
4718
|
};
|
|
4718
4719
|
|
|
4719
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
4720
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
4721
|
-
var templateObject_1$
|
|
4720
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
|
|
4721
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
|
|
4722
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4722
4723
|
|
|
4723
4724
|
var IconButton = function (props) {
|
|
4724
4725
|
if (props.color === "white")
|
|
@@ -4726,9 +4727,9 @@ var IconButton = function (props) {
|
|
|
4726
4727
|
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4727
4728
|
};
|
|
4728
4729
|
|
|
4729
|
-
var Container$
|
|
4730
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4731
|
-
var templateObject_1$
|
|
4730
|
+
var Container$f = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
4731
|
+
var Label$7 = 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);
|
|
4732
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4732
4733
|
|
|
4733
4734
|
var InputField = function (props) {
|
|
4734
4735
|
var onChange = function (value) {
|
|
@@ -4739,10 +4740,10 @@ var InputField = function (props) {
|
|
|
4739
4740
|
if (props.onBlur)
|
|
4740
4741
|
props.onBlur(props.name);
|
|
4741
4742
|
};
|
|
4742
|
-
return (jsxRuntime.jsxs(Container$
|
|
4743
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$7, __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))); })] })))] }));
|
|
4743
4744
|
};
|
|
4744
4745
|
|
|
4745
|
-
var Container$
|
|
4746
|
+
var Container$e = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
4746
4747
|
var status = _a.status, color = _a.color;
|
|
4747
4748
|
switch (status) {
|
|
4748
4749
|
case "passed":
|
|
@@ -4786,23 +4787,23 @@ var Container$d = styled__default["default"].div(templateObject_1$o || (template
|
|
|
4786
4787
|
return theme.colors.darkGray.light;
|
|
4787
4788
|
}
|
|
4788
4789
|
});
|
|
4789
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4790
|
-
var templateObject_1$
|
|
4790
|
+
var CheckIconWrapper = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
4791
|
+
var templateObject_1$p, templateObject_2$k;
|
|
4791
4792
|
|
|
4792
|
-
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$
|
|
4793
|
+
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$e, __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: {
|
|
4793
4794
|
marginTop: "13px",
|
|
4794
4795
|
transform: "scale(2)",
|
|
4795
4796
|
} }, { 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 })))] }))); };
|
|
4796
4797
|
|
|
4797
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
4798
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$o || (templateObject_1$o = __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-top: 3px;\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-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
4798
4799
|
var chevron = _a.chevron;
|
|
4799
4800
|
return (chevron === "left" ? "4px" : "");
|
|
4800
4801
|
}, function (_a) {
|
|
4801
4802
|
var chevron = _a.chevron;
|
|
4802
4803
|
return (chevron === "right" ? "4px" : "");
|
|
4803
4804
|
});
|
|
4804
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4805
|
-
var templateObject_1$
|
|
4805
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$j || (templateObject_2$j = __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);
|
|
4806
|
+
var templateObject_1$o, templateObject_2$j;
|
|
4806
4807
|
|
|
4807
4808
|
var Link = function (props) {
|
|
4808
4809
|
var onClick = function (e) {
|
|
@@ -4814,15 +4815,15 @@ var Link = function (props) {
|
|
|
4814
4815
|
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" }))] })));
|
|
4815
4816
|
};
|
|
4816
4817
|
|
|
4817
|
-
var Container$
|
|
4818
|
+
var Container$d = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
4818
4819
|
var text = _a.text;
|
|
4819
4820
|
return (text ? "20px" : "");
|
|
4820
4821
|
});
|
|
4821
|
-
var templateObject_1$
|
|
4822
|
+
var templateObject_1$n;
|
|
4822
4823
|
|
|
4823
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
4824
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$d, __assign$2({}, props, { children: [jsxRuntime.jsx(_default, { 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 }))] }))] }))); };
|
|
4824
4825
|
|
|
4825
|
-
var Container$
|
|
4826
|
+
var Container$c = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
4826
4827
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4827
4828
|
if (dropdownIsVisible) {
|
|
4828
4829
|
switch (color) {
|
|
@@ -4835,8 +4836,8 @@ var Container$b = styled__default["default"].div(templateObject_1$l || (template
|
|
|
4835
4836
|
}
|
|
4836
4837
|
return "";
|
|
4837
4838
|
});
|
|
4838
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
4839
|
-
var DropdownContainer = styled__default["default"].div(templateObject_3$
|
|
4839
|
+
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
4840
|
+
var DropdownContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
4840
4841
|
var color = _a.color;
|
|
4841
4842
|
switch (color) {
|
|
4842
4843
|
default:
|
|
@@ -4846,8 +4847,8 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$7 || (te
|
|
|
4846
4847
|
return theme.colors.lightGray.dark;
|
|
4847
4848
|
}
|
|
4848
4849
|
});
|
|
4849
|
-
var LocaleWrapper = styled__default["default"].div(templateObject_4$
|
|
4850
|
-
var templateObject_1$
|
|
4850
|
+
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);
|
|
4851
|
+
var templateObject_1$m, templateObject_2$i, templateObject_3$8, templateObject_4$6;
|
|
4851
4852
|
|
|
4852
4853
|
var LocaleSelect = function (props) {
|
|
4853
4854
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4856,22 +4857,22 @@ var LocaleSelect = function (props) {
|
|
|
4856
4857
|
setLocale(locale);
|
|
4857
4858
|
props.onChange(locale);
|
|
4858
4859
|
};
|
|
4859
|
-
return (jsxRuntime.jsxs(Container$
|
|
4860
|
+
return (jsxRuntime.jsxs(Container$c, __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: getNativeLanguageByLocale_1(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
|
|
4860
4861
|
.filter(function (l) { return l !== locale; })
|
|
4861
4862
|
.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: getNativeLanguageByLocale_1(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
4862
4863
|
};
|
|
4863
4864
|
|
|
4864
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
4865
|
-
var templateObject_1$
|
|
4865
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
4866
|
+
var templateObject_1$l;
|
|
4866
4867
|
|
|
4867
|
-
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type:
|
|
4868
|
+
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.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: Medal$1.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: Medal$1.BRONZE }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
4868
4869
|
|
|
4869
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
4870
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
4870
4871
|
var contrast = _a.contrast;
|
|
4871
4872
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4872
4873
|
});
|
|
4873
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
4874
|
-
var templateObject_1$
|
|
4874
|
+
var ButtonContainer = styled__default["default"].div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
4875
|
+
var templateObject_1$k, templateObject_2$h;
|
|
4875
4876
|
|
|
4876
4877
|
var Notification = function (props) {
|
|
4877
4878
|
if (!props.isVisible)
|
|
@@ -4879,9 +4880,9 @@ var Notification = function (props) {
|
|
|
4879
4880
|
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) }))); }) }))] })));
|
|
4880
4881
|
};
|
|
4881
4882
|
|
|
4882
|
-
var Container$
|
|
4883
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4884
|
-
var templateObject_1$
|
|
4883
|
+
var Container$b = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
4884
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4885
|
+
var templateObject_1$j, templateObject_2$g;
|
|
4885
4886
|
|
|
4886
4887
|
var NumberField = function (props) {
|
|
4887
4888
|
var onChange = function (value) {
|
|
@@ -4892,7 +4893,7 @@ var NumberField = function (props) {
|
|
|
4892
4893
|
if (props.onBlur)
|
|
4893
4894
|
props.onBlur(props.name);
|
|
4894
4895
|
};
|
|
4895
|
-
return (jsxRuntime.jsxs(Container$
|
|
4896
|
+
return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsx(Label$6, __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 })] }));
|
|
4896
4897
|
};
|
|
4897
4898
|
|
|
4898
4899
|
var expressions = {};
|
|
@@ -4936,15 +4937,15 @@ var isStrongPassword = function (password) {
|
|
|
4936
4937
|
exports.isStrongPassword = isStrongPassword;
|
|
4937
4938
|
}(expressions));
|
|
4938
4939
|
|
|
4939
|
-
var Container$
|
|
4940
|
-
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4941
|
-
var HelperContainer = styled__default["default"].div(templateObject_3$
|
|
4942
|
-
var fadeIn = styled.keyframes(templateObject_4$
|
|
4943
|
-
var Helper = styled__default["default"](StyledParagraph)(templateObject_5$
|
|
4940
|
+
var Container$a = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
4941
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4942
|
+
var HelperContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
4943
|
+
var fadeIn = styled.keyframes(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
4944
|
+
var Helper = styled__default["default"](StyledParagraph)(templateObject_5$3 || (templateObject_5$3 = __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) {
|
|
4944
4945
|
var isOk = _a.isOk;
|
|
4945
4946
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4946
4947
|
}, fadeIn);
|
|
4947
|
-
var templateObject_1$
|
|
4948
|
+
var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4948
4949
|
|
|
4949
4950
|
var translations = {
|
|
4950
4951
|
"nl-NL": {
|
|
@@ -5001,7 +5002,7 @@ var PasswordInputField = function (props) {
|
|
|
5001
5002
|
if (props.onBlur)
|
|
5002
5003
|
props.onBlur(props.name);
|
|
5003
5004
|
};
|
|
5004
|
-
return (jsxRuntime.jsxs(Container$
|
|
5005
|
+
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(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
5005
5006
|
};
|
|
5006
5007
|
|
|
5007
5008
|
var generateRandomString = function (length) {
|
|
@@ -5014,7 +5015,7 @@ var generateRandomString = function (length) {
|
|
|
5014
5015
|
return string;
|
|
5015
5016
|
};
|
|
5016
5017
|
|
|
5017
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
5018
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __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 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 background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
5018
5019
|
var isVisible = _a.isVisible;
|
|
5019
5020
|
return (isVisible ? "100%" : "0%");
|
|
5020
5021
|
}, function (_a) {
|
|
@@ -5027,7 +5028,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$g || (templ
|
|
|
5027
5028
|
var contrast = _a.contrast;
|
|
5028
5029
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5029
5030
|
});
|
|
5030
|
-
var templateObject_1$
|
|
5031
|
+
var templateObject_1$h;
|
|
5031
5032
|
|
|
5032
5033
|
var Popup = function (props) {
|
|
5033
5034
|
var popupRef = React$3.useRef(null);
|
|
@@ -5063,24 +5064,24 @@ var Popup = function (props) {
|
|
|
5063
5064
|
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 })] })), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
5064
5065
|
};
|
|
5065
5066
|
|
|
5066
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
5067
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
5067
|
+
var Wrapper = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
5068
|
+
var StyledProgressBar = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __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) {
|
|
5068
5069
|
var showInfo = _a.showInfo;
|
|
5069
5070
|
return (showInfo ? "10px" : "");
|
|
5070
5071
|
});
|
|
5071
|
-
var Indicator$1 = styled__default["default"].div(templateObject_3$
|
|
5072
|
+
var Indicator$1 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
5072
5073
|
var percent = _a.percent;
|
|
5073
5074
|
return "calc(".concat(percent, "% - 6px)");
|
|
5074
5075
|
}, function (_a) {
|
|
5075
5076
|
var color = _a.color;
|
|
5076
5077
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5077
5078
|
});
|
|
5078
|
-
var templateObject_1$
|
|
5079
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$6;
|
|
5079
5080
|
|
|
5080
5081
|
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, "%") })))] })); };
|
|
5081
5082
|
|
|
5082
|
-
var Container$
|
|
5083
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
5083
|
+
var Container$9 = styled__default["default"].ol(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
5084
|
+
var Step$1 = styled__default["default"].li(templateObject_2$d || (templateObject_2$d = __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) {
|
|
5084
5085
|
var status = _a.status;
|
|
5085
5086
|
return (!!status ? "pointer" : "not-allowed");
|
|
5086
5087
|
}, function (_a) {
|
|
@@ -5102,9 +5103,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$c || (templateObject
|
|
|
5102
5103
|
var hasTitle = _a.hasTitle;
|
|
5103
5104
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5104
5105
|
}, theme.colors.lightGray.dark);
|
|
5105
|
-
var templateObject_1$
|
|
5106
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5106
5107
|
|
|
5107
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
5108
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5108
5109
|
var title = _a.title, onClick = _a.onClick;
|
|
5109
5110
|
var step = index + 1;
|
|
5110
5111
|
var status = props.current > step
|
|
@@ -5119,8 +5120,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$8, { children:
|
|
|
5119
5120
|
return (jsxRuntime.jsxs(Step$1, __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)));
|
|
5120
5121
|
}) })); };
|
|
5121
5122
|
|
|
5122
|
-
var Container$
|
|
5123
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
5123
|
+
var Container$8 = styled__default["default"].ol(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
5124
|
+
var Step = styled__default["default"].li(templateObject_2$c || (templateObject_2$c = __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) {
|
|
5124
5125
|
var status = _a.status;
|
|
5125
5126
|
return (!!status ? "pointer" : "not-allowed");
|
|
5126
5127
|
}, function (_a) {
|
|
@@ -5139,9 +5140,9 @@ var Step = styled__default["default"].li(templateObject_2$b || (templateObject_2
|
|
|
5139
5140
|
? theme.colors.lightGray.light
|
|
5140
5141
|
: theme.colors.darkGray.light;
|
|
5141
5142
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5142
|
-
var templateObject_1$
|
|
5143
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5143
5144
|
|
|
5144
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
5145
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5145
5146
|
var title = _a.title, onClick = _a.onClick;
|
|
5146
5147
|
var step = index + 1;
|
|
5147
5148
|
var status = props.current > step
|
|
@@ -5160,14 +5161,14 @@ var Steps = function (props) {
|
|
|
5160
5161
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
5161
5162
|
};
|
|
5162
5163
|
|
|
5163
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
5164
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
5165
|
-
var RadioWrapper = styled__default["default"].div(templateObject_3$
|
|
5166
|
-
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_4$
|
|
5164
|
+
var Fieldset = styled__default["default"].fieldset(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
5165
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5166
|
+
var RadioWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
5167
|
+
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
5167
5168
|
var weight = _a.weight;
|
|
5168
5169
|
return weight || 500;
|
|
5169
5170
|
}, theme.colors.darkGray.base);
|
|
5170
|
-
var templateObject_1$
|
|
5171
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$5, templateObject_4$4;
|
|
5171
5172
|
|
|
5172
5173
|
var RadioGroup = function (props) {
|
|
5173
5174
|
var onChange = function (value) {
|
|
@@ -5184,9 +5185,9 @@ var RadioGroup = function (props) {
|
|
|
5184
5185
|
}) })] }));
|
|
5185
5186
|
};
|
|
5186
5187
|
|
|
5187
|
-
var Container$
|
|
5188
|
-
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
5189
|
-
var templateObject_1$
|
|
5188
|
+
var Container$7 = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
5189
|
+
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5190
|
+
var templateObject_1$c, templateObject_2$a;
|
|
5190
5191
|
|
|
5191
5192
|
var SelectField = function (props) {
|
|
5192
5193
|
var onChange = function (value) {
|
|
@@ -5197,15 +5198,15 @@ var SelectField = function (props) {
|
|
|
5197
5198
|
if (props.onBlur)
|
|
5198
5199
|
props.onBlur(props.name);
|
|
5199
5200
|
};
|
|
5200
|
-
return (jsxRuntime.jsxs(Container$
|
|
5201
|
+
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$3, __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) {
|
|
5201
5202
|
var value = _a.value, label = _a.label;
|
|
5202
5203
|
return (jsxRuntime.jsx("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
5203
5204
|
}) }))] }));
|
|
5204
5205
|
};
|
|
5205
5206
|
|
|
5206
|
-
var Container$
|
|
5207
|
-
var Label$2 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
5208
|
-
var templateObject_1$
|
|
5207
|
+
var Container$6 = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
5208
|
+
var Label$2 = 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);
|
|
5209
|
+
var templateObject_1$b, templateObject_2$9;
|
|
5209
5210
|
|
|
5210
5211
|
var ToggleField = function (props) {
|
|
5211
5212
|
var onChange = function (value) {
|
|
@@ -5216,10 +5217,10 @@ var ToggleField = function (props) {
|
|
|
5216
5217
|
if (props.onBlur)
|
|
5217
5218
|
props.onBlur(props.name);
|
|
5218
5219
|
};
|
|
5219
|
-
return (jsxRuntime.jsxs(Container$
|
|
5220
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$2, __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 })] }));
|
|
5220
5221
|
};
|
|
5221
5222
|
|
|
5222
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
5223
|
+
var TooltipContainer = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __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) {
|
|
5223
5224
|
var isVisible = _a.isVisible;
|
|
5224
5225
|
return (isVisible ? "100%" : "0%");
|
|
5225
5226
|
}, function (_a) {
|
|
@@ -5229,7 +5230,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$9 || (tem
|
|
|
5229
5230
|
var x = _a.x;
|
|
5230
5231
|
return (x ? "".concat(x, "px") : "");
|
|
5231
5232
|
});
|
|
5232
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
5233
|
+
var TooltipTitle = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __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) {
|
|
5233
5234
|
var color = _a.color;
|
|
5234
5235
|
switch (color) {
|
|
5235
5236
|
default:
|
|
@@ -5239,7 +5240,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$7 || (templat
|
|
|
5239
5240
|
return theme.colors.lightGray.dark;
|
|
5240
5241
|
}
|
|
5241
5242
|
});
|
|
5242
|
-
var templateObject_1$
|
|
5243
|
+
var templateObject_1$a, templateObject_2$8;
|
|
5243
5244
|
|
|
5244
5245
|
var Tooltip = function (props) {
|
|
5245
5246
|
var tooltipRef = React$3.useRef(null);
|
|
@@ -11091,7 +11092,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
11091
11092
|
HTMLReactParser$1.attributesToProps;
|
|
11092
11093
|
HTMLReactParser$1.Element;
|
|
11093
11094
|
|
|
11094
|
-
var StyledTextarea = styled__default["default"].textarea(templateObject_1$
|
|
11095
|
+
var StyledTextarea = styled__default["default"].textarea(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
11095
11096
|
var disabled = _a.disabled;
|
|
11096
11097
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
11097
11098
|
}, function (_a) {
|
|
@@ -11104,7 +11105,7 @@ var StyledTextarea = styled__default["default"].textarea(templateObject_1$8 || (
|
|
|
11104
11105
|
var disabled = _a.disabled;
|
|
11105
11106
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
11106
11107
|
}, 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));
|
|
11107
|
-
var templateObject_1$
|
|
11108
|
+
var templateObject_1$9;
|
|
11108
11109
|
|
|
11109
11110
|
var Textarea = function (props) {
|
|
11110
11111
|
var onChange = function (e) {
|
|
@@ -11114,9 +11115,9 @@ var Textarea = function (props) {
|
|
|
11114
11115
|
return jsxRuntime.jsx(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
11115
11116
|
};
|
|
11116
11117
|
|
|
11117
|
-
var Container$
|
|
11118
|
-
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
11119
|
-
var templateObject_1$
|
|
11118
|
+
var Container$5 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
11119
|
+
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
11120
|
+
var templateObject_1$8, templateObject_2$7;
|
|
11120
11121
|
|
|
11121
11122
|
var TextareaField = function (props) {
|
|
11122
11123
|
var onChange = function (value) {
|
|
@@ -11127,12 +11128,12 @@ var TextareaField = function (props) {
|
|
|
11127
11128
|
if (props.onBlur)
|
|
11128
11129
|
props.onBlur(props.name);
|
|
11129
11130
|
};
|
|
11130
|
-
return (jsxRuntime.jsxs(Container$
|
|
11131
|
+
return (jsxRuntime.jsxs(Container$5, { 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))); })] })))] }));
|
|
11131
11132
|
};
|
|
11132
11133
|
|
|
11133
|
-
var Container$
|
|
11134
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
11135
|
-
var templateObject_1$
|
|
11134
|
+
var Container$4 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
11135
|
+
var Label = styled__default["default"](StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
11136
|
+
var templateObject_1$7, templateObject_2$6;
|
|
11136
11137
|
|
|
11137
11138
|
var RangeField = function (props) {
|
|
11138
11139
|
var onChange = function (value) {
|
|
@@ -11143,25 +11144,25 @@ var RangeField = function (props) {
|
|
|
11143
11144
|
if (props.onBlur)
|
|
11144
11145
|
props.onBlur(props.name);
|
|
11145
11146
|
};
|
|
11146
|
-
return (jsxRuntime.jsxs(Container$
|
|
11147
|
+
return (jsxRuntime.jsxs(Container$4, { 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 })] }));
|
|
11147
11148
|
};
|
|
11148
11149
|
|
|
11149
11150
|
var FeedbackColors = {
|
|
11150
11151
|
success: theme.colors.green.base,
|
|
11151
11152
|
error: theme.colors.red.base,
|
|
11152
11153
|
};
|
|
11153
|
-
var FieldWrapper = styled__default["default"].div(templateObject_1$
|
|
11154
|
+
var FieldWrapper = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject$1(["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
|
|
11154
11155
|
var status = _a.status;
|
|
11155
11156
|
return FeedbackColors[status];
|
|
11156
11157
|
});
|
|
11157
|
-
var FeedbackWrapper = styled__default["default"].div(templateObject_2$
|
|
11158
|
+
var FeedbackWrapper = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __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) {
|
|
11158
11159
|
var status = _a.status;
|
|
11159
11160
|
return FeedbackColors[status];
|
|
11160
11161
|
}, function (_a) {
|
|
11161
11162
|
var status = _a.status;
|
|
11162
11163
|
return FeedbackColors[status];
|
|
11163
11164
|
});
|
|
11164
|
-
var templateObject_1$
|
|
11165
|
+
var templateObject_1$6, templateObject_2$5;
|
|
11165
11166
|
|
|
11166
11167
|
var WithValidation = function (_a) {
|
|
11167
11168
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -11174,10 +11175,10 @@ var WithValidation = function (_a) {
|
|
|
11174
11175
|
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 }))] }))] })));
|
|
11175
11176
|
};
|
|
11176
11177
|
|
|
11177
|
-
var FormWrapper = styled__default["default"].form(templateObject_1$
|
|
11178
|
-
var DescriptionWrapper = styled__default["default"].div(templateObject_2$
|
|
11179
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_3$
|
|
11180
|
-
var templateObject_1$
|
|
11178
|
+
var FormWrapper = styled__default["default"].form(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1([""], [""])));
|
|
11179
|
+
var DescriptionWrapper = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __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);
|
|
11180
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
11181
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4;
|
|
11181
11182
|
|
|
11182
11183
|
var Form = React$3.forwardRef(function (props, ref) {
|
|
11183
11184
|
var _a = React$3.useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -11360,7 +11361,7 @@ var Form = React$3.forwardRef(function (props, ref) {
|
|
|
11360
11361
|
}) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
11361
11362
|
});
|
|
11362
11363
|
|
|
11363
|
-
var Container$
|
|
11364
|
+
var Container$3 = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __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) {
|
|
11364
11365
|
var color = _a.color, active = _a.active;
|
|
11365
11366
|
if (active)
|
|
11366
11367
|
return theme.colors[color].dark;
|
|
@@ -11384,20 +11385,20 @@ var Container$2 = styled__default["default"].div(templateObject_1$3 || (template
|
|
|
11384
11385
|
return theme.colors[color].base;
|
|
11385
11386
|
return "";
|
|
11386
11387
|
});
|
|
11387
|
-
var templateObject_1$
|
|
11388
|
+
var templateObject_1$4;
|
|
11388
11389
|
|
|
11389
11390
|
var Key = function (props) {
|
|
11390
11391
|
var _a;
|
|
11391
|
-
return (jsxRuntime.jsx(Container$
|
|
11392
|
+
return (jsxRuntime.jsx(Container$3, __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))); })) })));
|
|
11392
11393
|
};
|
|
11393
11394
|
|
|
11394
|
-
var Container$
|
|
11395
|
-
var SpecialRow = styled__default["default"].div(templateObject_2$
|
|
11396
|
-
var TopRow = styled__default["default"].div(templateObject_3$
|
|
11397
|
-
var StartRow = styled__default["default"].div(templateObject_4$
|
|
11398
|
-
var BottomRow = styled__default["default"].div(templateObject_5$
|
|
11399
|
-
var SpacebarRow = styled__default["default"].div(templateObject_6 || (templateObject_6 = __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"])));
|
|
11400
|
-
var templateObject_1$
|
|
11395
|
+
var Container$2 = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __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"])));
|
|
11396
|
+
var SpecialRow = styled__default["default"].div(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
11397
|
+
var TopRow = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
11398
|
+
var StartRow = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"])));
|
|
11399
|
+
var BottomRow = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"])));
|
|
11400
|
+
var SpacebarRow = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __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"])));
|
|
11401
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$1;
|
|
11401
11402
|
|
|
11402
11403
|
var Keyboard = function (props) {
|
|
11403
11404
|
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11421,7 +11422,7 @@ var Keyboard = function (props) {
|
|
|
11421
11422
|
}, [props.keys]);
|
|
11422
11423
|
if (!keys)
|
|
11423
11424
|
return null;
|
|
11424
|
-
return (jsxRuntime.jsxs(Container$
|
|
11425
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
11425
11426
|
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 ||
|
|
11426
11427
|
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 ||
|
|
11427
11428
|
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 ||
|
|
@@ -11469,15 +11470,15 @@ var Keyboard = function (props) {
|
|
|
11469
11470
|
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, {})] })] }));
|
|
11470
11471
|
};
|
|
11471
11472
|
|
|
11472
|
-
var Mask = styled__default["default"].div(templateObject_1$
|
|
11473
|
-
var CardWrapper = styled__default["default"].div(templateObject_2$
|
|
11473
|
+
var Mask = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
11474
|
+
var CardWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n\n > div:first-child {\n padding-top: 30px;\n }\n"], ["\n width: ", ";\n\n > div:first-child {\n padding-top: 30px;\n }\n"])), function (_a) {
|
|
11474
11475
|
var width = _a.width;
|
|
11475
11476
|
return (width ? "".concat(width, "px") : "720px");
|
|
11476
11477
|
});
|
|
11477
|
-
var CloseIconWrapper = styled__default["default"].div(templateObject_3$
|
|
11478
|
-
var ChildrenWrapper = styled__default["default"].div(templateObject_4$
|
|
11479
|
-
var FooterContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
11480
|
-
var templateObject_1$
|
|
11478
|
+
var CloseIconWrapper = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: -10px;\n right: 20px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: -10px;\n right: 20px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"])), theme.colors.darkGray.base);
|
|
11479
|
+
var ChildrenWrapper = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
11480
|
+
var FooterContainer = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
11481
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
11481
11482
|
|
|
11482
11483
|
var Modal = function (props) {
|
|
11483
11484
|
var _a = React$3.useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -11493,20 +11494,20 @@ var Modal = function (props) {
|
|
|
11493
11494
|
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign$2({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }) })), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
11494
11495
|
};
|
|
11495
11496
|
|
|
11496
|
-
var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|
|
11497
|
+
var Container$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|
|
11497
11498
|
var passed = _a.passed;
|
|
11498
11499
|
return passed ? theme.colors.green.base : theme.colors.red.base;
|
|
11499
11500
|
}, theme.colors.lightGray.light);
|
|
11500
|
-
var ProgressBarWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 15px;\n margin-left: auto;\n position: relative;\n\n > div:last-child {\n display: flex;\n justify-content: space-between;\n margin-top: 3px;\n }\n"], ["\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 15px;\n margin-left: auto;\n position: relative;\n\n > div:last-child {\n display: flex;\n justify-content: space-between;\n margin-top: 3px;\n }\n"])));
|
|
11501
|
-
var Indicator = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject$1(["\n width: 4px;\n height: 22px;\n background-color: ", ";\n position: absolute;\n left: ", ";\n z-index: 1;\n top: -4px;\n"], ["\n width: 4px;\n height: 22px;\n background-color: ", ";\n position: absolute;\n left: ", ";\n z-index: 1;\n top: -4px;\n"])), theme.colors.blue.darker, function (_a) {
|
|
11501
|
+
var ProgressBarWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1(["\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 15px;\n margin-left: auto;\n position: relative;\n\n > div:last-child {\n display: flex;\n justify-content: space-between;\n margin-top: 3px;\n }\n"], ["\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 15px;\n margin-left: auto;\n position: relative;\n\n > div:last-child {\n display: flex;\n justify-content: space-between;\n margin-top: 3px;\n }\n"])));
|
|
11502
|
+
var Indicator = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1(["\n width: 4px;\n height: 22px;\n background-color: ", ";\n position: absolute;\n left: ", ";\n z-index: 1;\n top: -4px;\n"], ["\n width: 4px;\n height: 22px;\n background-color: ", ";\n position: absolute;\n left: ", ";\n z-index: 1;\n top: -4px;\n"])), theme.colors.blue.darker, function (_a) {
|
|
11502
11503
|
var value = _a.value;
|
|
11503
11504
|
return "".concat(value, "%");
|
|
11504
11505
|
});
|
|
11505
|
-
var Target = styled__default["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject$1(["\n width: max-content;\n position: absolute;\n left: ", ";\n bottom: 40px;\n\n p {\n color: ", ";\n }\n"], ["\n width: max-content;\n position: absolute;\n left: ", ";\n bottom: 40px;\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
11506
|
+
var Target = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject$1(["\n width: max-content;\n position: absolute;\n left: ", ";\n bottom: 40px;\n\n p {\n color: ", ";\n }\n"], ["\n width: max-content;\n position: absolute;\n left: ", ";\n bottom: 40px;\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
11506
11507
|
var value = _a.value, width = _a.width;
|
|
11507
11508
|
return "calc(".concat(value, "% - ").concat(width / 2, "px)");
|
|
11508
11509
|
}, theme.colors.blue.darker);
|
|
11509
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
11510
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
11510
11511
|
|
|
11511
11512
|
var Result = function (props) {
|
|
11512
11513
|
var ref = React$3.useRef(null);
|
|
@@ -11516,7 +11517,30 @@ var Result = function (props) {
|
|
|
11516
11517
|
var _a;
|
|
11517
11518
|
setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
11518
11519
|
}, [ref]);
|
|
11519
|
-
return (jsxRuntime.jsxs(Container, __assign$2({ passed: isPassed }, { children: [jsxRuntime.jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsxRuntime.jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxRuntime.jsxs(ProgressBarWrapper, { children: [jsxRuntime.jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsxRuntime.jsx(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsxRuntime.jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
11520
|
+
return (jsxRuntime.jsxs(Container$1, __assign$2({ passed: isPassed }, { children: [jsxRuntime.jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsxRuntime.jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxRuntime.jsxs(ProgressBarWrapper, { children: [jsxRuntime.jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsxRuntime.jsx(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsxRuntime.jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
11521
|
+
};
|
|
11522
|
+
|
|
11523
|
+
var Container = styled__default["default"].table(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n box-shadow: 0 0 0 1px ", ";\n overflow: hidden;\n"], ["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n box-shadow: 0 0 0 1px ", ";\n overflow: hidden;\n"])), theme.colors.lightGray.dark);
|
|
11524
|
+
var TableHead = styled__default["default"].thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["\n border-bottom: 1px solid ", ";\n"], ["\n border-bottom: 1px solid ", ";\n"])), theme.colors.lightGray.dark);
|
|
11525
|
+
var TableBody = styled__default["default"].tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11526
|
+
styled__default["default"].tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11527
|
+
var ColumnTitle = styled__default["default"].th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n text-align: left;\n padding-left: 15px;\n"], ["\n text-align: left;\n padding-left: 15px;\n"])));
|
|
11528
|
+
var TableRow = styled__default["default"].tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base);
|
|
11529
|
+
var TableCell = styled__default["default"].td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n"], ["\n padding: 0 15px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n"])), theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.darkGray.light);
|
|
11530
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11531
|
+
|
|
11532
|
+
var Table = function (_a) {
|
|
11533
|
+
var columns = _a.columns, data = _a.data;
|
|
11534
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableRow, { children: columns.map(function (_a) {
|
|
11535
|
+
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11536
|
+
return (jsxRuntime.jsx(ColumnTitle, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
|
|
11537
|
+
}) }) }), jsxRuntime.jsx(TableBody, { children: data.map(function (row, index) {
|
|
11538
|
+
return (jsxRuntime.jsx(TableRow, { children: columns.map(function (_a, index) {
|
|
11539
|
+
var dataIndex = _a.dataIndex, render = _a.render;
|
|
11540
|
+
var data = row[dataIndex];
|
|
11541
|
+
return (jsxRuntime.jsx(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
|
|
11542
|
+
}) }, "row-".concat(index)));
|
|
11543
|
+
}) })] }));
|
|
11520
11544
|
};
|
|
11521
11545
|
|
|
11522
11546
|
exports.Alert = Alert;
|
|
@@ -11559,6 +11583,7 @@ exports.SelectField = SelectField;
|
|
|
11559
11583
|
exports.Spacer = Spacer;
|
|
11560
11584
|
exports.Steps = Steps;
|
|
11561
11585
|
exports.Subheading = Subheading;
|
|
11586
|
+
exports.Table = Table;
|
|
11562
11587
|
exports.Tag = Tag;
|
|
11563
11588
|
exports.Toggle = Toggle;
|
|
11564
11589
|
exports.ToggleField = ToggleField;
|