@typeolymp/ui-components 1.9.15 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/molecules/Card/index.d.ts +1 -0
- 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 +213 -186
- package/build/index.es.js.map +1 -1
- package/build/index.js +213 -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,14 @@ 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 border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
4634
|
+
var bordered = _a.bordered;
|
|
4635
|
+
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4636
|
+
}, function (_a) {
|
|
4633
4637
|
var ellipse = _a.ellipse;
|
|
4634
4638
|
return ellipse
|
|
4635
4639
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -4638,23 +4642,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$u || (templateO
|
|
|
4638
4642
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4639
4643
|
: "";
|
|
4640
4644
|
});
|
|
4641
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
4645
|
+
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
4646
|
var color = _a.color;
|
|
4643
4647
|
return color ? theme.colors[color].light : "";
|
|
4644
4648
|
});
|
|
4645
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
4646
|
-
var templateObject_1$
|
|
4649
|
+
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"])));
|
|
4650
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$a;
|
|
4647
4651
|
|
|
4648
4652
|
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
4653
|
|
|
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$
|
|
4654
|
+
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"])));
|
|
4655
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4656
|
+
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"])));
|
|
4657
|
+
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
4658
|
var weight = _a.weight;
|
|
4655
4659
|
return weight || 500;
|
|
4656
4660
|
}, theme.colors.darkGray.base);
|
|
4657
|
-
var templateObject_1$
|
|
4661
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9, templateObject_4$7;
|
|
4658
4662
|
|
|
4659
4663
|
var Checkboxes = function (props) {
|
|
4660
4664
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4677,12 +4681,12 @@ var Checkboxes = function (props) {
|
|
|
4677
4681
|
}) })] }));
|
|
4678
4682
|
};
|
|
4679
4683
|
|
|
4680
|
-
var Container$
|
|
4681
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
4684
|
+
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);
|
|
4685
|
+
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
4686
|
var isOpen = _a.isOpen;
|
|
4683
4687
|
return (isOpen ? "" : "none");
|
|
4684
4688
|
}, theme.colors.lightGray.darker);
|
|
4685
|
-
var templateObject_1$
|
|
4689
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4686
4690
|
|
|
4687
4691
|
var Collapse = function (props) {
|
|
4688
4692
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4694,15 +4698,15 @@ var Collapse = function (props) {
|
|
|
4694
4698
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
4695
4699
|
}
|
|
4696
4700
|
};
|
|
4697
|
-
return (jsxRuntime.jsx(Container$
|
|
4701
|
+
return (jsxRuntime.jsx(Container$h, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
4698
4702
|
var isOpen = openItems.includes(index);
|
|
4699
4703
|
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
4704
|
}) })));
|
|
4701
4705
|
};
|
|
4702
4706
|
|
|
4703
|
-
var Container$
|
|
4704
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4705
|
-
var templateObject_1$
|
|
4707
|
+
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"])));
|
|
4708
|
+
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);
|
|
4709
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4706
4710
|
|
|
4707
4711
|
var DateInputField = function (props) {
|
|
4708
4712
|
var onChange = function (value) {
|
|
@@ -4713,12 +4717,12 @@ var DateInputField = function (props) {
|
|
|
4713
4717
|
if (props.onBlur)
|
|
4714
4718
|
props.onBlur(props.name);
|
|
4715
4719
|
};
|
|
4716
|
-
return (jsxRuntime.jsxs(Container$
|
|
4720
|
+
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
4721
|
};
|
|
4718
4722
|
|
|
4719
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
4720
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
4721
|
-
var templateObject_1$
|
|
4723
|
+
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"])));
|
|
4724
|
+
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"])));
|
|
4725
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4722
4726
|
|
|
4723
4727
|
var IconButton = function (props) {
|
|
4724
4728
|
if (props.color === "white")
|
|
@@ -4726,9 +4730,9 @@ var IconButton = function (props) {
|
|
|
4726
4730
|
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4727
4731
|
};
|
|
4728
4732
|
|
|
4729
|
-
var Container$
|
|
4730
|
-
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4731
|
-
var templateObject_1$
|
|
4733
|
+
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"])));
|
|
4734
|
+
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);
|
|
4735
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4732
4736
|
|
|
4733
4737
|
var InputField = function (props) {
|
|
4734
4738
|
var onChange = function (value) {
|
|
@@ -4739,10 +4743,10 @@ var InputField = function (props) {
|
|
|
4739
4743
|
if (props.onBlur)
|
|
4740
4744
|
props.onBlur(props.name);
|
|
4741
4745
|
};
|
|
4742
|
-
return (jsxRuntime.jsxs(Container$
|
|
4746
|
+
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
4747
|
};
|
|
4744
4748
|
|
|
4745
|
-
var Container$
|
|
4749
|
+
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
4750
|
var status = _a.status, color = _a.color;
|
|
4747
4751
|
switch (status) {
|
|
4748
4752
|
case "passed":
|
|
@@ -4786,23 +4790,23 @@ var Container$d = styled__default["default"].div(templateObject_1$o || (template
|
|
|
4786
4790
|
return theme.colors.darkGray.light;
|
|
4787
4791
|
}
|
|
4788
4792
|
});
|
|
4789
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4790
|
-
var templateObject_1$
|
|
4793
|
+
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"])));
|
|
4794
|
+
var templateObject_1$p, templateObject_2$k;
|
|
4791
4795
|
|
|
4792
|
-
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$
|
|
4796
|
+
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
4797
|
marginTop: "13px",
|
|
4794
4798
|
transform: "scale(2)",
|
|
4795
4799
|
} }, { 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
4800
|
|
|
4797
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
4801
|
+
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
4802
|
var chevron = _a.chevron;
|
|
4799
4803
|
return (chevron === "left" ? "4px" : "");
|
|
4800
4804
|
}, function (_a) {
|
|
4801
4805
|
var chevron = _a.chevron;
|
|
4802
4806
|
return (chevron === "right" ? "4px" : "");
|
|
4803
4807
|
});
|
|
4804
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4805
|
-
var templateObject_1$
|
|
4808
|
+
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);
|
|
4809
|
+
var templateObject_1$o, templateObject_2$j;
|
|
4806
4810
|
|
|
4807
4811
|
var Link = function (props) {
|
|
4808
4812
|
var onClick = function (e) {
|
|
@@ -4814,15 +4818,15 @@ var Link = function (props) {
|
|
|
4814
4818
|
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
4819
|
};
|
|
4816
4820
|
|
|
4817
|
-
var Container$
|
|
4821
|
+
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
4822
|
var text = _a.text;
|
|
4819
4823
|
return (text ? "20px" : "");
|
|
4820
4824
|
});
|
|
4821
|
-
var templateObject_1$
|
|
4825
|
+
var templateObject_1$n;
|
|
4822
4826
|
|
|
4823
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
4827
|
+
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
4828
|
|
|
4825
|
-
var Container$
|
|
4829
|
+
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
4830
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4827
4831
|
if (dropdownIsVisible) {
|
|
4828
4832
|
switch (color) {
|
|
@@ -4835,8 +4839,8 @@ var Container$b = styled__default["default"].div(templateObject_1$l || (template
|
|
|
4835
4839
|
}
|
|
4836
4840
|
return "";
|
|
4837
4841
|
});
|
|
4838
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
4839
|
-
var DropdownContainer = styled__default["default"].div(templateObject_3$
|
|
4842
|
+
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"])));
|
|
4843
|
+
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
4844
|
var color = _a.color;
|
|
4841
4845
|
switch (color) {
|
|
4842
4846
|
default:
|
|
@@ -4846,8 +4850,8 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$7 || (te
|
|
|
4846
4850
|
return theme.colors.lightGray.dark;
|
|
4847
4851
|
}
|
|
4848
4852
|
});
|
|
4849
|
-
var LocaleWrapper = styled__default["default"].div(templateObject_4$
|
|
4850
|
-
var templateObject_1$
|
|
4853
|
+
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);
|
|
4854
|
+
var templateObject_1$m, templateObject_2$i, templateObject_3$8, templateObject_4$6;
|
|
4851
4855
|
|
|
4852
4856
|
var LocaleSelect = function (props) {
|
|
4853
4857
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4856,22 +4860,22 @@ var LocaleSelect = function (props) {
|
|
|
4856
4860
|
setLocale(locale);
|
|
4857
4861
|
props.onChange(locale);
|
|
4858
4862
|
};
|
|
4859
|
-
return (jsxRuntime.jsxs(Container$
|
|
4863
|
+
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
4864
|
.filter(function (l) { return l !== locale; })
|
|
4861
4865
|
.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
4866
|
};
|
|
4863
4867
|
|
|
4864
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
4865
|
-
var templateObject_1$
|
|
4868
|
+
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"])));
|
|
4869
|
+
var templateObject_1$l;
|
|
4866
4870
|
|
|
4867
|
-
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type:
|
|
4871
|
+
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
4872
|
|
|
4869
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
4873
|
+
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
4874
|
var contrast = _a.contrast;
|
|
4871
4875
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4872
4876
|
});
|
|
4873
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
4874
|
-
var templateObject_1$
|
|
4877
|
+
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"])));
|
|
4878
|
+
var templateObject_1$k, templateObject_2$h;
|
|
4875
4879
|
|
|
4876
4880
|
var Notification = function (props) {
|
|
4877
4881
|
if (!props.isVisible)
|
|
@@ -4879,9 +4883,9 @@ var Notification = function (props) {
|
|
|
4879
4883
|
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
4884
|
};
|
|
4881
4885
|
|
|
4882
|
-
var Container$
|
|
4883
|
-
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
4884
|
-
var templateObject_1$
|
|
4886
|
+
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"])));
|
|
4887
|
+
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);
|
|
4888
|
+
var templateObject_1$j, templateObject_2$g;
|
|
4885
4889
|
|
|
4886
4890
|
var NumberField = function (props) {
|
|
4887
4891
|
var onChange = function (value) {
|
|
@@ -4892,7 +4896,7 @@ var NumberField = function (props) {
|
|
|
4892
4896
|
if (props.onBlur)
|
|
4893
4897
|
props.onBlur(props.name);
|
|
4894
4898
|
};
|
|
4895
|
-
return (jsxRuntime.jsxs(Container$
|
|
4899
|
+
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
4900
|
};
|
|
4897
4901
|
|
|
4898
4902
|
var expressions = {};
|
|
@@ -4936,15 +4940,15 @@ var isStrongPassword = function (password) {
|
|
|
4936
4940
|
exports.isStrongPassword = isStrongPassword;
|
|
4937
4941
|
}(expressions));
|
|
4938
4942
|
|
|
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$
|
|
4943
|
+
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"])));
|
|
4944
|
+
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);
|
|
4945
|
+
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"])));
|
|
4946
|
+
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"])));
|
|
4947
|
+
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
4948
|
var isOk = _a.isOk;
|
|
4945
4949
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4946
4950
|
}, fadeIn);
|
|
4947
|
-
var templateObject_1$
|
|
4951
|
+
var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4948
4952
|
|
|
4949
4953
|
var translations = {
|
|
4950
4954
|
"nl-NL": {
|
|
@@ -5001,7 +5005,7 @@ var PasswordInputField = function (props) {
|
|
|
5001
5005
|
if (props.onBlur)
|
|
5002
5006
|
props.onBlur(props.name);
|
|
5003
5007
|
};
|
|
5004
|
-
return (jsxRuntime.jsxs(Container$
|
|
5008
|
+
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
5009
|
};
|
|
5006
5010
|
|
|
5007
5011
|
var generateRandomString = function (length) {
|
|
@@ -5014,7 +5018,7 @@ var generateRandomString = function (length) {
|
|
|
5014
5018
|
return string;
|
|
5015
5019
|
};
|
|
5016
5020
|
|
|
5017
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
5021
|
+
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
5022
|
var isVisible = _a.isVisible;
|
|
5019
5023
|
return (isVisible ? "100%" : "0%");
|
|
5020
5024
|
}, function (_a) {
|
|
@@ -5027,7 +5031,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$g || (templ
|
|
|
5027
5031
|
var contrast = _a.contrast;
|
|
5028
5032
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5029
5033
|
});
|
|
5030
|
-
var templateObject_1$
|
|
5034
|
+
var templateObject_1$h;
|
|
5031
5035
|
|
|
5032
5036
|
var Popup = function (props) {
|
|
5033
5037
|
var popupRef = React$3.useRef(null);
|
|
@@ -5063,24 +5067,24 @@ var Popup = function (props) {
|
|
|
5063
5067
|
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
5068
|
};
|
|
5065
5069
|
|
|
5066
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
5067
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
5070
|
+
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"])));
|
|
5071
|
+
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
5072
|
var showInfo = _a.showInfo;
|
|
5069
5073
|
return (showInfo ? "10px" : "");
|
|
5070
5074
|
});
|
|
5071
|
-
var Indicator$1 = styled__default["default"].div(templateObject_3$
|
|
5075
|
+
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
5076
|
var percent = _a.percent;
|
|
5073
5077
|
return "calc(".concat(percent, "% - 6px)");
|
|
5074
5078
|
}, function (_a) {
|
|
5075
5079
|
var color = _a.color;
|
|
5076
5080
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5077
5081
|
});
|
|
5078
|
-
var templateObject_1$
|
|
5082
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$6;
|
|
5079
5083
|
|
|
5080
5084
|
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
5085
|
|
|
5082
|
-
var Container$
|
|
5083
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
5086
|
+
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"])));
|
|
5087
|
+
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
5088
|
var status = _a.status;
|
|
5085
5089
|
return (!!status ? "pointer" : "not-allowed");
|
|
5086
5090
|
}, function (_a) {
|
|
@@ -5102,9 +5106,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$c || (templateObject
|
|
|
5102
5106
|
var hasTitle = _a.hasTitle;
|
|
5103
5107
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5104
5108
|
}, theme.colors.lightGray.dark);
|
|
5105
|
-
var templateObject_1$
|
|
5109
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5106
5110
|
|
|
5107
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
5111
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5108
5112
|
var title = _a.title, onClick = _a.onClick;
|
|
5109
5113
|
var step = index + 1;
|
|
5110
5114
|
var status = props.current > step
|
|
@@ -5119,8 +5123,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$8, { children:
|
|
|
5119
5123
|
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
5124
|
}) })); };
|
|
5121
5125
|
|
|
5122
|
-
var Container$
|
|
5123
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
5126
|
+
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"])));
|
|
5127
|
+
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
5128
|
var status = _a.status;
|
|
5125
5129
|
return (!!status ? "pointer" : "not-allowed");
|
|
5126
5130
|
}, function (_a) {
|
|
@@ -5139,9 +5143,9 @@ var Step = styled__default["default"].li(templateObject_2$b || (templateObject_2
|
|
|
5139
5143
|
? theme.colors.lightGray.light
|
|
5140
5144
|
: theme.colors.darkGray.light;
|
|
5141
5145
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5142
|
-
var templateObject_1$
|
|
5146
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5143
5147
|
|
|
5144
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
5148
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5145
5149
|
var title = _a.title, onClick = _a.onClick;
|
|
5146
5150
|
var step = index + 1;
|
|
5147
5151
|
var status = props.current > step
|
|
@@ -5160,14 +5164,14 @@ var Steps = function (props) {
|
|
|
5160
5164
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
5161
5165
|
};
|
|
5162
5166
|
|
|
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$
|
|
5167
|
+
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"])));
|
|
5168
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5169
|
+
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"])));
|
|
5170
|
+
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
5171
|
var weight = _a.weight;
|
|
5168
5172
|
return weight || 500;
|
|
5169
5173
|
}, theme.colors.darkGray.base);
|
|
5170
|
-
var templateObject_1$
|
|
5174
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$5, templateObject_4$4;
|
|
5171
5175
|
|
|
5172
5176
|
var RadioGroup = function (props) {
|
|
5173
5177
|
var onChange = function (value) {
|
|
@@ -5184,9 +5188,9 @@ var RadioGroup = function (props) {
|
|
|
5184
5188
|
}) })] }));
|
|
5185
5189
|
};
|
|
5186
5190
|
|
|
5187
|
-
var Container$
|
|
5188
|
-
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
5189
|
-
var templateObject_1$
|
|
5191
|
+
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"])));
|
|
5192
|
+
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);
|
|
5193
|
+
var templateObject_1$c, templateObject_2$a;
|
|
5190
5194
|
|
|
5191
5195
|
var SelectField = function (props) {
|
|
5192
5196
|
var onChange = function (value) {
|
|
@@ -5197,15 +5201,15 @@ var SelectField = function (props) {
|
|
|
5197
5201
|
if (props.onBlur)
|
|
5198
5202
|
props.onBlur(props.name);
|
|
5199
5203
|
};
|
|
5200
|
-
return (jsxRuntime.jsxs(Container$
|
|
5204
|
+
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
5205
|
var value = _a.value, label = _a.label;
|
|
5202
5206
|
return (jsxRuntime.jsx("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
5203
5207
|
}) }))] }));
|
|
5204
5208
|
};
|
|
5205
5209
|
|
|
5206
|
-
var Container$
|
|
5207
|
-
var Label$2 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
5208
|
-
var templateObject_1$
|
|
5210
|
+
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"])));
|
|
5211
|
+
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);
|
|
5212
|
+
var templateObject_1$b, templateObject_2$9;
|
|
5209
5213
|
|
|
5210
5214
|
var ToggleField = function (props) {
|
|
5211
5215
|
var onChange = function (value) {
|
|
@@ -5216,10 +5220,10 @@ var ToggleField = function (props) {
|
|
|
5216
5220
|
if (props.onBlur)
|
|
5217
5221
|
props.onBlur(props.name);
|
|
5218
5222
|
};
|
|
5219
|
-
return (jsxRuntime.jsxs(Container$
|
|
5223
|
+
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
5224
|
};
|
|
5221
5225
|
|
|
5222
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
5226
|
+
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
5227
|
var isVisible = _a.isVisible;
|
|
5224
5228
|
return (isVisible ? "100%" : "0%");
|
|
5225
5229
|
}, function (_a) {
|
|
@@ -5229,7 +5233,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$9 || (tem
|
|
|
5229
5233
|
var x = _a.x;
|
|
5230
5234
|
return (x ? "".concat(x, "px") : "");
|
|
5231
5235
|
});
|
|
5232
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
5236
|
+
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
5237
|
var color = _a.color;
|
|
5234
5238
|
switch (color) {
|
|
5235
5239
|
default:
|
|
@@ -5239,7 +5243,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$7 || (templat
|
|
|
5239
5243
|
return theme.colors.lightGray.dark;
|
|
5240
5244
|
}
|
|
5241
5245
|
});
|
|
5242
|
-
var templateObject_1$
|
|
5246
|
+
var templateObject_1$a, templateObject_2$8;
|
|
5243
5247
|
|
|
5244
5248
|
var Tooltip = function (props) {
|
|
5245
5249
|
var tooltipRef = React$3.useRef(null);
|
|
@@ -11091,7 +11095,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
11091
11095
|
HTMLReactParser$1.attributesToProps;
|
|
11092
11096
|
HTMLReactParser$1.Element;
|
|
11093
11097
|
|
|
11094
|
-
var StyledTextarea = styled__default["default"].textarea(templateObject_1$
|
|
11098
|
+
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
11099
|
var disabled = _a.disabled;
|
|
11096
11100
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
11097
11101
|
}, function (_a) {
|
|
@@ -11104,7 +11108,7 @@ var StyledTextarea = styled__default["default"].textarea(templateObject_1$8 || (
|
|
|
11104
11108
|
var disabled = _a.disabled;
|
|
11105
11109
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
11106
11110
|
}, 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$
|
|
11111
|
+
var templateObject_1$9;
|
|
11108
11112
|
|
|
11109
11113
|
var Textarea = function (props) {
|
|
11110
11114
|
var onChange = function (e) {
|
|
@@ -11114,9 +11118,9 @@ var Textarea = function (props) {
|
|
|
11114
11118
|
return jsxRuntime.jsx(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
11115
11119
|
};
|
|
11116
11120
|
|
|
11117
|
-
var Container$
|
|
11118
|
-
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
11119
|
-
var templateObject_1$
|
|
11121
|
+
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"])));
|
|
11122
|
+
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);
|
|
11123
|
+
var templateObject_1$8, templateObject_2$7;
|
|
11120
11124
|
|
|
11121
11125
|
var TextareaField = function (props) {
|
|
11122
11126
|
var onChange = function (value) {
|
|
@@ -11127,12 +11131,12 @@ var TextareaField = function (props) {
|
|
|
11127
11131
|
if (props.onBlur)
|
|
11128
11132
|
props.onBlur(props.name);
|
|
11129
11133
|
};
|
|
11130
|
-
return (jsxRuntime.jsxs(Container$
|
|
11134
|
+
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
11135
|
};
|
|
11132
11136
|
|
|
11133
|
-
var Container$
|
|
11134
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
11135
|
-
var templateObject_1$
|
|
11137
|
+
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"])));
|
|
11138
|
+
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);
|
|
11139
|
+
var templateObject_1$7, templateObject_2$6;
|
|
11136
11140
|
|
|
11137
11141
|
var RangeField = function (props) {
|
|
11138
11142
|
var onChange = function (value) {
|
|
@@ -11143,25 +11147,25 @@ var RangeField = function (props) {
|
|
|
11143
11147
|
if (props.onBlur)
|
|
11144
11148
|
props.onBlur(props.name);
|
|
11145
11149
|
};
|
|
11146
|
-
return (jsxRuntime.jsxs(Container$
|
|
11150
|
+
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
11151
|
};
|
|
11148
11152
|
|
|
11149
11153
|
var FeedbackColors = {
|
|
11150
11154
|
success: theme.colors.green.base,
|
|
11151
11155
|
error: theme.colors.red.base,
|
|
11152
11156
|
};
|
|
11153
|
-
var FieldWrapper = styled__default["default"].div(templateObject_1$
|
|
11157
|
+
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
11158
|
var status = _a.status;
|
|
11155
11159
|
return FeedbackColors[status];
|
|
11156
11160
|
});
|
|
11157
|
-
var FeedbackWrapper = styled__default["default"].div(templateObject_2$
|
|
11161
|
+
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
11162
|
var status = _a.status;
|
|
11159
11163
|
return FeedbackColors[status];
|
|
11160
11164
|
}, function (_a) {
|
|
11161
11165
|
var status = _a.status;
|
|
11162
11166
|
return FeedbackColors[status];
|
|
11163
11167
|
});
|
|
11164
|
-
var templateObject_1$
|
|
11168
|
+
var templateObject_1$6, templateObject_2$5;
|
|
11165
11169
|
|
|
11166
11170
|
var WithValidation = function (_a) {
|
|
11167
11171
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -11174,10 +11178,10 @@ var WithValidation = function (_a) {
|
|
|
11174
11178
|
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
11179
|
};
|
|
11176
11180
|
|
|
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$
|
|
11181
|
+
var FormWrapper = styled__default["default"].form(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1([""], [""])));
|
|
11182
|
+
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);
|
|
11183
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
11184
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4;
|
|
11181
11185
|
|
|
11182
11186
|
var Form = React$3.forwardRef(function (props, ref) {
|
|
11183
11187
|
var _a = React$3.useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -11360,7 +11364,7 @@ var Form = React$3.forwardRef(function (props, ref) {
|
|
|
11360
11364
|
}) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
11361
11365
|
});
|
|
11362
11366
|
|
|
11363
|
-
var Container$
|
|
11367
|
+
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
11368
|
var color = _a.color, active = _a.active;
|
|
11365
11369
|
if (active)
|
|
11366
11370
|
return theme.colors[color].dark;
|
|
@@ -11384,20 +11388,20 @@ var Container$2 = styled__default["default"].div(templateObject_1$3 || (template
|
|
|
11384
11388
|
return theme.colors[color].base;
|
|
11385
11389
|
return "";
|
|
11386
11390
|
});
|
|
11387
|
-
var templateObject_1$
|
|
11391
|
+
var templateObject_1$4;
|
|
11388
11392
|
|
|
11389
11393
|
var Key = function (props) {
|
|
11390
11394
|
var _a;
|
|
11391
|
-
return (jsxRuntime.jsx(Container$
|
|
11395
|
+
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
11396
|
};
|
|
11393
11397
|
|
|
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$
|
|
11398
|
+
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"])));
|
|
11399
|
+
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"])));
|
|
11400
|
+
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"])));
|
|
11401
|
+
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"])));
|
|
11402
|
+
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"])));
|
|
11403
|
+
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"])));
|
|
11404
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$1;
|
|
11401
11405
|
|
|
11402
11406
|
var Keyboard = function (props) {
|
|
11403
11407
|
var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11421,7 +11425,7 @@ var Keyboard = function (props) {
|
|
|
11421
11425
|
}, [props.keys]);
|
|
11422
11426
|
if (!keys)
|
|
11423
11427
|
return null;
|
|
11424
|
-
return (jsxRuntime.jsxs(Container$
|
|
11428
|
+
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
11429
|
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
11430
|
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
11431
|
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 +11473,15 @@ var Keyboard = function (props) {
|
|
|
11469
11473
|
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
11474
|
};
|
|
11471
11475
|
|
|
11472
|
-
var Mask = styled__default["default"].div(templateObject_1$
|
|
11473
|
-
var CardWrapper = styled__default["default"].div(templateObject_2$
|
|
11476
|
+
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"])));
|
|
11477
|
+
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
11478
|
var width = _a.width;
|
|
11475
11479
|
return (width ? "".concat(width, "px") : "720px");
|
|
11476
11480
|
});
|
|
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$
|
|
11481
|
+
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);
|
|
11482
|
+
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"])));
|
|
11483
|
+
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);
|
|
11484
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
11481
11485
|
|
|
11482
11486
|
var Modal = function (props) {
|
|
11483
11487
|
var _a = React$3.useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -11493,20 +11497,20 @@ var Modal = function (props) {
|
|
|
11493
11497
|
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
11498
|
};
|
|
11495
11499
|
|
|
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) {
|
|
11500
|
+
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
11501
|
var passed = _a.passed;
|
|
11498
11502
|
return passed ? theme.colors.green.base : theme.colors.red.base;
|
|
11499
11503
|
}, 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) {
|
|
11504
|
+
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"])));
|
|
11505
|
+
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
11506
|
var value = _a.value;
|
|
11503
11507
|
return "".concat(value, "%");
|
|
11504
11508
|
});
|
|
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) {
|
|
11509
|
+
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
11510
|
var value = _a.value, width = _a.width;
|
|
11507
11511
|
return "calc(".concat(value, "% - ").concat(width / 2, "px)");
|
|
11508
11512
|
}, theme.colors.blue.darker);
|
|
11509
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
11513
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
11510
11514
|
|
|
11511
11515
|
var Result = function (props) {
|
|
11512
11516
|
var ref = React$3.useRef(null);
|
|
@@ -11516,7 +11520,30 @@ var Result = function (props) {
|
|
|
11516
11520
|
var _a;
|
|
11517
11521
|
setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
11518
11522
|
}, [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] }))] })] }))] })));
|
|
11523
|
+
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] }))] })] }))] })));
|
|
11524
|
+
};
|
|
11525
|
+
|
|
11526
|
+
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 overflow: hidden;\n box-shadow: 0 0 0 1px ", ";\n"], ["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n overflow: hidden;\n box-shadow: 0 0 0 1px ", ";\n"])), theme.colors.lightGray.dark);
|
|
11527
|
+
var TableHead = styled__default["default"].thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1([""], [""])));
|
|
11528
|
+
var TableBody = styled__default["default"].tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11529
|
+
styled__default["default"].tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11530
|
+
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"])));
|
|
11531
|
+
var TableRow = styled__default["default"].tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
11532
|
+
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);
|
|
11533
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11534
|
+
|
|
11535
|
+
var Table = function (_a) {
|
|
11536
|
+
var columns = _a.columns, data = _a.data;
|
|
11537
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableRow, { children: columns.map(function (_a) {
|
|
11538
|
+
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11539
|
+
return (jsxRuntime.jsx(ColumnTitle, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
|
|
11540
|
+
}) }) }), jsxRuntime.jsx(TableBody, { children: data.map(function (row, index) {
|
|
11541
|
+
return (jsxRuntime.jsx(TableRow, { children: columns.map(function (_a, index) {
|
|
11542
|
+
var dataIndex = _a.dataIndex, render = _a.render;
|
|
11543
|
+
var data = row[dataIndex];
|
|
11544
|
+
return (jsxRuntime.jsx(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
|
|
11545
|
+
}) }, "row-".concat(index)));
|
|
11546
|
+
}) })] }));
|
|
11520
11547
|
};
|
|
11521
11548
|
|
|
11522
11549
|
exports.Alert = Alert;
|
|
@@ -11559,6 +11586,7 @@ exports.SelectField = SelectField;
|
|
|
11559
11586
|
exports.Spacer = Spacer;
|
|
11560
11587
|
exports.Steps = Steps;
|
|
11561
11588
|
exports.Subheading = Subheading;
|
|
11589
|
+
exports.Table = Table;
|
|
11562
11590
|
exports.Tag = Tag;
|
|
11563
11591
|
exports.Toggle = Toggle;
|
|
11564
11592
|
exports.ToggleField = ToggleField;
|