@typeolymp/ui-components 1.9.15 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/organisms/Table/index.d.ts +13 -0
- package/build/components/organisms/Table/stories.d.ts +7 -0
- package/build/components/organisms/Table/styles.d.ts +7 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +210 -186
- package/build/index.es.js.map +1 -1
- package/build/index.js +210 -185
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -3381,14 +3381,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
|
|
|
3381
3381
|
var React$2 = __importStar$2(React__default);
|
|
3382
3382
|
var react_1 = require$$1;
|
|
3383
3383
|
var helpers_1 = helpers$1;
|
|
3384
|
-
var beat = react_1.keyframes(templateObject_1$
|
|
3384
|
+
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"])));
|
|
3385
3385
|
var Loader = /** @class */ (function (_super) {
|
|
3386
3386
|
__extends$1(Loader, _super);
|
|
3387
3387
|
function Loader() {
|
|
3388
3388
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3389
3389
|
_this.style = function (i) {
|
|
3390
3390
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3391
|
-
return react_1.css(templateObject_2$
|
|
3391
|
+
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");
|
|
3392
3392
|
};
|
|
3393
3393
|
return _this;
|
|
3394
3394
|
}
|
|
@@ -3403,9 +3403,9 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3403
3403
|
return Loader;
|
|
3404
3404
|
}(React$2.PureComponent));
|
|
3405
3405
|
var _default = BeatLoader.default = Loader;
|
|
3406
|
-
var templateObject_1$
|
|
3406
|
+
var templateObject_1$P, templateObject_2$v;
|
|
3407
3407
|
|
|
3408
|
-
var StyledButton = styled.button(templateObject_1$
|
|
3408
|
+
var StyledButton = styled.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) {
|
|
3409
3409
|
var fluid = _a.fluid;
|
|
3410
3410
|
return (fluid ? "100%" : "fit-content");
|
|
3411
3411
|
}, function (_a) {
|
|
@@ -3455,11 +3455,11 @@ var StyledButton = styled.button(templateObject_1$N || (templateObject_1$N = __m
|
|
|
3455
3455
|
? theme.button.medium.heightActive
|
|
3456
3456
|
: theme.button[size].heightActive;
|
|
3457
3457
|
});
|
|
3458
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3458
|
+
var DisabledButton = styled(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) {
|
|
3459
3459
|
var size = _a.size;
|
|
3460
3460
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3461
3461
|
});
|
|
3462
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
3462
|
+
var GhostButton = styled(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) {
|
|
3463
3463
|
var size = _a.size;
|
|
3464
3464
|
return !size
|
|
3465
3465
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3475,14 +3475,14 @@ var GhostButton = styled(StyledButton)(templateObject_3$a || (templateObject_3$a
|
|
|
3475
3475
|
? theme.button.medium.marginTopActive
|
|
3476
3476
|
: theme.button[size].marginTopActive;
|
|
3477
3477
|
});
|
|
3478
|
-
var LoaderWrapper = styled.div(templateObject_4$
|
|
3478
|
+
var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3479
3479
|
var width = _a.width;
|
|
3480
3480
|
return "".concat(width, "px");
|
|
3481
3481
|
}, function (_a) {
|
|
3482
3482
|
var size = _a.size;
|
|
3483
3483
|
return (size === "small" ? "3px" : "");
|
|
3484
3484
|
});
|
|
3485
|
-
var templateObject_1$
|
|
3485
|
+
var templateObject_1$O, templateObject_2$u, templateObject_3$b, templateObject_4$8;
|
|
3486
3486
|
|
|
3487
3487
|
var Button = forwardRef(function (_a, ref) {
|
|
3488
3488
|
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"]);
|
|
@@ -3518,7 +3518,7 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
3518
3518
|
return (jsx$1(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsx$1(Loader, {}) : jsx$1("span", { children: label }) })));
|
|
3519
3519
|
});
|
|
3520
3520
|
|
|
3521
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
3521
|
+
var StyledCheckbox = styled.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) {
|
|
3522
3522
|
var checked = _a.checked, disabled = _a.disabled;
|
|
3523
3523
|
if (disabled)
|
|
3524
3524
|
return theme.colors.lightGray.darker;
|
|
@@ -3539,7 +3539,7 @@ var StyledCheckbox = styled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
3539
3539
|
return theme.colors.green.base;
|
|
3540
3540
|
return theme.colors.lightGray.darker;
|
|
3541
3541
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
3542
|
-
var templateObject_1$
|
|
3542
|
+
var templateObject_1$N;
|
|
3543
3543
|
|
|
3544
3544
|
var Checkbox = function (props) {
|
|
3545
3545
|
var _a;
|
|
@@ -3572,7 +3572,7 @@ var Checkbox = function (props) {
|
|
|
3572
3572
|
return (jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx$1("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx$1("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
3573
3573
|
};
|
|
3574
3574
|
|
|
3575
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
3575
|
+
var Wrapper$9 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3576
3576
|
var size = _a.size;
|
|
3577
3577
|
switch (size) {
|
|
3578
3578
|
case "small":
|
|
@@ -3595,7 +3595,7 @@ var Wrapper$9 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTem
|
|
|
3595
3595
|
return "27px";
|
|
3596
3596
|
}
|
|
3597
3597
|
});
|
|
3598
|
-
var templateObject_1$
|
|
3598
|
+
var templateObject_1$M;
|
|
3599
3599
|
|
|
3600
3600
|
var parsers = {};
|
|
3601
3601
|
|
|
@@ -3705,16 +3705,16 @@ var Locale;
|
|
|
3705
3705
|
})(Locale || (Locale = {}));
|
|
3706
3706
|
Locale$1.default = Locale;
|
|
3707
3707
|
|
|
3708
|
-
var Medal$
|
|
3708
|
+
var Medal$3 = {};
|
|
3709
3709
|
|
|
3710
|
-
Object.defineProperty(Medal$
|
|
3711
|
-
var Medal$
|
|
3710
|
+
Object.defineProperty(Medal$3, "__esModule", { value: true });
|
|
3711
|
+
var Medal$2;
|
|
3712
3712
|
(function (Medal) {
|
|
3713
3713
|
Medal["GOLD"] = "gold";
|
|
3714
3714
|
Medal["SILVER"] = "silver";
|
|
3715
3715
|
Medal["BRONZE"] = "bronze";
|
|
3716
|
-
})(Medal$
|
|
3717
|
-
Medal$
|
|
3716
|
+
})(Medal$2 || (Medal$2 = {}));
|
|
3717
|
+
Medal$3.default = Medal$2;
|
|
3718
3718
|
|
|
3719
3719
|
var PaymentStatus$1 = {};
|
|
3720
3720
|
|
|
@@ -3788,7 +3788,7 @@ var __importDefault$2 = (commonjsGlobal && commonjsGlobal.__importDefault) || fu
|
|
|
3788
3788
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
3789
3789
|
};
|
|
3790
3790
|
Object.defineProperty(enums, "__esModule", { value: true });
|
|
3791
|
-
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;
|
|
3791
|
+
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;
|
|
3792
3792
|
var AchievementType_1 = __importDefault$2(AchievementType$1);
|
|
3793
3793
|
enums.AchievementType = AchievementType_1.default;
|
|
3794
3794
|
var ChartDataType_1 = __importDefault$2(ChartDataType$1);
|
|
@@ -3805,8 +3805,8 @@ var KeyboardLayout_1 = __importDefault$2(KeyboardLayout$1);
|
|
|
3805
3805
|
enums.KeyboardLayout = KeyboardLayout_1.default;
|
|
3806
3806
|
var Locale_1 = __importDefault$2(Locale$1);
|
|
3807
3807
|
enums.Locale = Locale_1.default;
|
|
3808
|
-
var Medal_1 = __importDefault$2(Medal$
|
|
3809
|
-
enums.Medal = Medal_1.default;
|
|
3808
|
+
var Medal_1 = __importDefault$2(Medal$3);
|
|
3809
|
+
var Medal$1 = enums.Medal = Medal_1.default;
|
|
3810
3810
|
var PaymentStatus_1 = __importDefault$2(PaymentStatus$1);
|
|
3811
3811
|
enums.PaymentStatus = PaymentStatus_1.default;
|
|
3812
3812
|
var PaymentType_1 = __importDefault$2(PaymentType$1);
|
|
@@ -3863,7 +3863,7 @@ var flags = {
|
|
|
3863
3863
|
};
|
|
3864
3864
|
var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
3865
3865
|
|
|
3866
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
3866
|
+
var StyledHeading = styled.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) {
|
|
3867
3867
|
var type = _a.type;
|
|
3868
3868
|
return theme.heading[type].fontSize;
|
|
3869
3869
|
}, function (_a) {
|
|
@@ -3887,14 +3887,14 @@ var StyledHeading = styled.span(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
3887
3887
|
var align = _a.align;
|
|
3888
3888
|
return align;
|
|
3889
3889
|
});
|
|
3890
|
-
var templateObject_1$
|
|
3890
|
+
var templateObject_1$L;
|
|
3891
3891
|
|
|
3892
3892
|
var Heading = function (props) {
|
|
3893
3893
|
var element = !!props.as ? props.as : props.type;
|
|
3894
3894
|
return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
|
|
3895
3895
|
};
|
|
3896
3896
|
|
|
3897
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
3897
|
+
var Wrapper$8 = styled.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) {
|
|
3898
3898
|
var size = _a.size;
|
|
3899
3899
|
return theme.icon[size] || theme.icon.medium;
|
|
3900
3900
|
}, function (_a) {
|
|
@@ -3924,7 +3924,7 @@ var Wrapper$8 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
3924
3924
|
return theme.colors.lightGray.light;
|
|
3925
3925
|
}
|
|
3926
3926
|
});
|
|
3927
|
-
var templateObject_1$
|
|
3927
|
+
var templateObject_1$K;
|
|
3928
3928
|
|
|
3929
3929
|
var icons = {
|
|
3930
3930
|
check: (jsx$1("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
|
|
@@ -3950,10 +3950,11 @@ var icons = {
|
|
|
3950
3950
|
facebook: (jsx$1("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" })),
|
|
3951
3951
|
instagram: (jsx$1("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" })),
|
|
3952
3952
|
menuAlt: (jsx$1("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" })),
|
|
3953
|
+
link: (jsxs(Fragment$1, { children: [jsx$1("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" }), jsx$1("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" })] })),
|
|
3953
3954
|
};
|
|
3954
3955
|
var Icon = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3955
3956
|
|
|
3956
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
3957
|
+
var Wrapper$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
3957
3958
|
var size = _a.size;
|
|
3958
3959
|
switch (size) {
|
|
3959
3960
|
default:
|
|
@@ -3965,7 +3966,7 @@ var Wrapper$7 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTem
|
|
|
3965
3966
|
return "118px";
|
|
3966
3967
|
}
|
|
3967
3968
|
});
|
|
3968
|
-
var templateObject_1$
|
|
3969
|
+
var templateObject_1$J;
|
|
3969
3970
|
|
|
3970
3971
|
var illustrations = {
|
|
3971
3972
|
keyboard: (jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsx$1("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsx$1("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsx$1("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsx$1("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsx$1("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsx$1("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
|
|
@@ -3981,14 +3982,14 @@ var illustrations = {
|
|
|
3981
3982
|
};
|
|
3982
3983
|
var Illustration = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
3983
3984
|
|
|
3984
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
3985
|
+
var InputIconWrapper = styled.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) {
|
|
3985
3986
|
var isChanged = _a.isChanged;
|
|
3986
3987
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
3987
3988
|
}, function (_a) {
|
|
3988
3989
|
var disabled = _a.disabled;
|
|
3989
3990
|
return (disabled ? "not-allowed" : "pointer");
|
|
3990
3991
|
});
|
|
3991
|
-
var StyledInput = styled.input(templateObject_2$
|
|
3992
|
+
var StyledInput = styled.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) {
|
|
3992
3993
|
var disabled = _a.disabled;
|
|
3993
3994
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
3994
3995
|
}, function (_a) {
|
|
@@ -4001,7 +4002,7 @@ var StyledInput = styled.input(templateObject_2$s || (templateObject_2$s = __mak
|
|
|
4001
4002
|
var disabled = _a.disabled;
|
|
4002
4003
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4003
4004
|
}, 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));
|
|
4004
|
-
var templateObject_1$
|
|
4005
|
+
var templateObject_1$I, templateObject_2$t;
|
|
4005
4006
|
|
|
4006
4007
|
var PasswordInput = function (props) {
|
|
4007
4008
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -4181,7 +4182,7 @@ Input.Date = DateInput;
|
|
|
4181
4182
|
|
|
4182
4183
|
var Logo = function (props) { return (jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxs("g", { children: [jsx$1("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsx$1("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsx$1("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsx$1("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsx$1("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsx$1("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsx$1("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
4183
4184
|
|
|
4184
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
4185
|
+
var Wrapper$6 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
4185
4186
|
var size = _a.size;
|
|
4186
4187
|
switch (size) {
|
|
4187
4188
|
default:
|
|
@@ -4191,7 +4192,7 @@ var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTem
|
|
|
4191
4192
|
return "116px";
|
|
4192
4193
|
}
|
|
4193
4194
|
});
|
|
4194
|
-
var templateObject_1$
|
|
4195
|
+
var templateObject_1$H;
|
|
4195
4196
|
|
|
4196
4197
|
var medals = {
|
|
4197
4198
|
small: {
|
|
@@ -4207,11 +4208,11 @@ var medals = {
|
|
|
4207
4208
|
};
|
|
4208
4209
|
var Medal = function (props) { return (jsx$1(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
4209
4210
|
|
|
4210
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
4211
|
+
var Wrapper$5 = styled.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) {
|
|
4211
4212
|
var disabled = _a.disabled;
|
|
4212
4213
|
return (disabled ? "49.5px" : "");
|
|
4213
4214
|
});
|
|
4214
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
4215
|
+
var StyledInputNumber = styled.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) {
|
|
4215
4216
|
var disabled = _a.disabled;
|
|
4216
4217
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4217
4218
|
}, function (_a) {
|
|
@@ -4224,7 +4225,7 @@ var StyledInputNumber = styled.input(templateObject_2$r || (templateObject_2$r =
|
|
|
4224
4225
|
var disabled = _a.disabled;
|
|
4225
4226
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4226
4227
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4227
|
-
var templateObject_1$
|
|
4228
|
+
var templateObject_1$G, templateObject_2$s;
|
|
4228
4229
|
|
|
4229
4230
|
var Number$1 = function (props) {
|
|
4230
4231
|
var inputRef = useRef(null);
|
|
@@ -4261,7 +4262,7 @@ var Number$1 = function (props) {
|
|
|
4261
4262
|
return (jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx$1(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsx$1(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
4262
4263
|
};
|
|
4263
4264
|
|
|
4264
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
4265
|
+
var StyledParagraph = styled.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) {
|
|
4265
4266
|
var size = _a.size;
|
|
4266
4267
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4267
4268
|
}, function (_a) {
|
|
@@ -4293,11 +4294,11 @@ var StyledParagraph = styled.p(templateObject_1$E || (templateObject_1$E = __mak
|
|
|
4293
4294
|
var align = _a.align;
|
|
4294
4295
|
return align;
|
|
4295
4296
|
});
|
|
4296
|
-
var templateObject_1$
|
|
4297
|
+
var templateObject_1$F;
|
|
4297
4298
|
|
|
4298
4299
|
var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
|
|
4299
4300
|
|
|
4300
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
4301
|
+
var StyledRadio = styled.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) {
|
|
4301
4302
|
var checked = _a.checked, disabled = _a.disabled;
|
|
4302
4303
|
if (disabled)
|
|
4303
4304
|
return theme.colors.lightGray.darker;
|
|
@@ -4325,7 +4326,7 @@ var StyledRadio = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
4325
4326
|
return theme.colors.green.base;
|
|
4326
4327
|
return "";
|
|
4327
4328
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4328
|
-
var templateObject_1$
|
|
4329
|
+
var templateObject_1$E;
|
|
4329
4330
|
|
|
4330
4331
|
var Radio = function (props) {
|
|
4331
4332
|
var _a, _b;
|
|
@@ -4357,7 +4358,7 @@ var Radio = function (props) {
|
|
|
4357
4358
|
return (jsx$1(StyledRadio, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsx$1("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
|
|
4358
4359
|
};
|
|
4359
4360
|
|
|
4360
|
-
var StyledRange = styled.div(templateObject_1$
|
|
4361
|
+
var StyledRange = styled.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) {
|
|
4361
4362
|
var value = _a.value, disabled = _a.disabled;
|
|
4362
4363
|
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 )");
|
|
4363
4364
|
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
@@ -4367,7 +4368,7 @@ var StyledRange = styled.div(templateObject_1$C || (templateObject_1$C = __makeT
|
|
|
4367
4368
|
var disabled = _a.disabled;
|
|
4368
4369
|
return disabled ? "not-allowed" : "pointer";
|
|
4369
4370
|
});
|
|
4370
|
-
var templateObject_1$
|
|
4371
|
+
var templateObject_1$D;
|
|
4371
4372
|
|
|
4372
4373
|
var Range = function (props) {
|
|
4373
4374
|
var _a;
|
|
@@ -4396,11 +4397,11 @@ var Range = function (props) {
|
|
|
4396
4397
|
return (jsx$1(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsx$1("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
4397
4398
|
};
|
|
4398
4399
|
|
|
4399
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
4400
|
+
var Wrapper$4 = styled.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) {
|
|
4400
4401
|
var disabled = _a.disabled;
|
|
4401
4402
|
return (disabled ? "not-allowed" : "pointer");
|
|
4402
4403
|
});
|
|
4403
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
4404
|
+
var StyledSelect = styled.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) {
|
|
4404
4405
|
var disabled = _a.disabled;
|
|
4405
4406
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4406
4407
|
}, function (_a) {
|
|
@@ -4413,7 +4414,7 @@ var StyledSelect = styled.select(templateObject_2$q || (templateObject_2$q = __m
|
|
|
4413
4414
|
var isChanged = _a.isChanged;
|
|
4414
4415
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4415
4416
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4416
|
-
var templateObject_1$
|
|
4417
|
+
var templateObject_1$C, templateObject_2$r;
|
|
4417
4418
|
|
|
4418
4419
|
var Select = function (props) {
|
|
4419
4420
|
var _a;
|
|
@@ -4435,18 +4436,18 @@ var Select = function (props) {
|
|
|
4435
4436
|
return (jsxs(Wrapper$4, { children: [jsx$1(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx$1("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
4436
4437
|
};
|
|
4437
4438
|
|
|
4438
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
4439
|
+
var StyledSpacer = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
4439
4440
|
var horizontal = _a.horizontal;
|
|
4440
4441
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
4441
4442
|
}, function (_a) {
|
|
4442
4443
|
var vertical = _a.vertical;
|
|
4443
4444
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
4444
4445
|
});
|
|
4445
|
-
var templateObject_1$
|
|
4446
|
+
var templateObject_1$B;
|
|
4446
4447
|
|
|
4447
4448
|
var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
|
|
4448
4449
|
|
|
4449
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
4450
|
+
var StyledSubheading = styled.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) {
|
|
4450
4451
|
var size = _a.size;
|
|
4451
4452
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
4452
4453
|
}, function (_a) {
|
|
@@ -4474,18 +4475,18 @@ var StyledSubheading = styled.p(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
4474
4475
|
return theme.colors.darkGray.dark;
|
|
4475
4476
|
}
|
|
4476
4477
|
});
|
|
4477
|
-
var templateObject_1$
|
|
4478
|
+
var templateObject_1$A;
|
|
4478
4479
|
|
|
4479
4480
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
4480
4481
|
|
|
4481
|
-
var Container$
|
|
4482
|
-
var templateObject_1$
|
|
4482
|
+
var Container$k = styled.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);
|
|
4483
|
+
var templateObject_1$z;
|
|
4483
4484
|
|
|
4484
4485
|
var Tag = function (props) {
|
|
4485
|
-
return jsx$1(Container$
|
|
4486
|
+
return jsx$1(Container$k, { children: props.children });
|
|
4486
4487
|
};
|
|
4487
4488
|
|
|
4488
|
-
var Container$
|
|
4489
|
+
var Container$j = styled.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) {
|
|
4489
4490
|
var disabled = _a.disabled;
|
|
4490
4491
|
return (disabled ? "not-allowed" : "pointer");
|
|
4491
4492
|
}, function (_a) {
|
|
@@ -4503,7 +4504,7 @@ var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __makeT
|
|
|
4503
4504
|
var disabled = _a.disabled;
|
|
4504
4505
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
4505
4506
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4506
|
-
var templateObject_1$
|
|
4507
|
+
var templateObject_1$y;
|
|
4507
4508
|
|
|
4508
4509
|
var Toggle = function (props) {
|
|
4509
4510
|
var _a;
|
|
@@ -4531,10 +4532,10 @@ var Toggle = function (props) {
|
|
|
4531
4532
|
props.onChange(newValue);
|
|
4532
4533
|
}
|
|
4533
4534
|
};
|
|
4534
|
-
return (jsx$1(Container$
|
|
4535
|
+
return (jsx$1(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: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
4535
4536
|
};
|
|
4536
4537
|
|
|
4537
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
4538
|
+
var Wrapper$3 = styled.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) {
|
|
4538
4539
|
var level = _a.level;
|
|
4539
4540
|
switch (level) {
|
|
4540
4541
|
case 1:
|
|
@@ -4545,7 +4546,7 @@ var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTem
|
|
|
4545
4546
|
return "70px";
|
|
4546
4547
|
}
|
|
4547
4548
|
});
|
|
4548
|
-
var templateObject_1$
|
|
4549
|
+
var templateObject_1$x;
|
|
4549
4550
|
|
|
4550
4551
|
var trophies = {
|
|
4551
4552
|
1: {
|
|
@@ -4581,7 +4582,7 @@ var trophies = {
|
|
|
4581
4582
|
};
|
|
4582
4583
|
var Trophy = function (props) { return (jsx$1(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
4583
4584
|
|
|
4584
|
-
var Container$
|
|
4585
|
+
var Container$i = styled.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) {
|
|
4585
4586
|
var type = _a.type;
|
|
4586
4587
|
switch (type) {
|
|
4587
4588
|
case "success":
|
|
@@ -4598,11 +4599,11 @@ var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __makeT
|
|
|
4598
4599
|
return theme.colors.red.base;
|
|
4599
4600
|
}
|
|
4600
4601
|
});
|
|
4601
|
-
var templateObject_1$
|
|
4602
|
+
var templateObject_1$w;
|
|
4602
4603
|
|
|
4603
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
4604
|
+
var Alert = function (props) { return (jsxs(Container$i, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, { children: props.message })] }))); };
|
|
4604
4605
|
|
|
4605
|
-
var StyledCard = styled.div(templateObject_1$
|
|
4606
|
+
var StyledCard = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
4606
4607
|
var ellipse = _a.ellipse;
|
|
4607
4608
|
return ellipse
|
|
4608
4609
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -4611,23 +4612,23 @@ var StyledCard = styled.div(templateObject_1$u || (templateObject_1$u = __makeTe
|
|
|
4611
4612
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4612
4613
|
: "";
|
|
4613
4614
|
});
|
|
4614
|
-
var Ellipse = styled.div(templateObject_2$
|
|
4615
|
+
var Ellipse = styled.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) {
|
|
4615
4616
|
var color = _a.color;
|
|
4616
4617
|
return color ? theme.colors[color].light : "";
|
|
4617
4618
|
});
|
|
4618
|
-
var Content = styled.div(templateObject_3$
|
|
4619
|
-
var templateObject_1$
|
|
4619
|
+
var Content = styled.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"])));
|
|
4620
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$a;
|
|
4620
4621
|
|
|
4621
4622
|
var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
|
|
4622
4623
|
|
|
4623
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
4624
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
4625
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
4626
|
-
var Label$9 = styled(StyledParagraph)(templateObject_4$
|
|
4624
|
+
var Fieldset$1 = styled.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"])));
|
|
4625
|
+
var CheckboxContainer = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4626
|
+
var CheckboxWrapper = styled.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"])));
|
|
4627
|
+
var Label$9 = styled(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) {
|
|
4627
4628
|
var weight = _a.weight;
|
|
4628
4629
|
return weight || 500;
|
|
4629
4630
|
}, theme.colors.darkGray.base);
|
|
4630
|
-
var templateObject_1$
|
|
4631
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9, templateObject_4$7;
|
|
4631
4632
|
|
|
4632
4633
|
var Checkboxes = function (props) {
|
|
4633
4634
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4650,12 +4651,12 @@ var Checkboxes = function (props) {
|
|
|
4650
4651
|
}) })] }));
|
|
4651
4652
|
};
|
|
4652
4653
|
|
|
4653
|
-
var Container$
|
|
4654
|
-
var Item = styled.div(templateObject_2$
|
|
4654
|
+
var Container$h = styled.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);
|
|
4655
|
+
var Item = styled.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) {
|
|
4655
4656
|
var isOpen = _a.isOpen;
|
|
4656
4657
|
return (isOpen ? "" : "none");
|
|
4657
4658
|
}, theme.colors.lightGray.darker);
|
|
4658
|
-
var templateObject_1$
|
|
4659
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4659
4660
|
|
|
4660
4661
|
var Collapse = function (props) {
|
|
4661
4662
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4667,15 +4668,15 @@ var Collapse = function (props) {
|
|
|
4667
4668
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
4668
4669
|
}
|
|
4669
4670
|
};
|
|
4670
|
-
return (jsx$1(Container$
|
|
4671
|
+
return (jsx$1(Container$h, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
4671
4672
|
var isOpen = openItems.includes(index);
|
|
4672
4673
|
return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
4673
4674
|
}) })));
|
|
4674
4675
|
};
|
|
4675
4676
|
|
|
4676
|
-
var Container$
|
|
4677
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
4678
|
-
var templateObject_1$
|
|
4677
|
+
var Container$g = styled.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"])));
|
|
4678
|
+
var Label$8 = styled(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);
|
|
4679
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4679
4680
|
|
|
4680
4681
|
var DateInputField = function (props) {
|
|
4681
4682
|
var onChange = function (value) {
|
|
@@ -4686,12 +4687,12 @@ var DateInputField = function (props) {
|
|
|
4686
4687
|
if (props.onBlur)
|
|
4687
4688
|
props.onBlur(props.name);
|
|
4688
4689
|
};
|
|
4689
|
-
return (jsxs(Container$
|
|
4690
|
+
return (jsxs(Container$g, { children: [jsx$1(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
4690
4691
|
};
|
|
4691
4692
|
|
|
4692
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
4693
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
4694
|
-
var templateObject_1$
|
|
4693
|
+
var StyledIconButton = styled(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"])));
|
|
4694
|
+
var GhostIconButton = styled(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"])));
|
|
4695
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4695
4696
|
|
|
4696
4697
|
var IconButton = function (props) {
|
|
4697
4698
|
if (props.color === "white")
|
|
@@ -4699,9 +4700,9 @@ var IconButton = function (props) {
|
|
|
4699
4700
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4700
4701
|
};
|
|
4701
4702
|
|
|
4702
|
-
var Container$
|
|
4703
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
4704
|
-
var templateObject_1$
|
|
4703
|
+
var Container$f = styled.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"])));
|
|
4704
|
+
var Label$7 = styled(StyledParagraph)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
4705
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4705
4706
|
|
|
4706
4707
|
var InputField = function (props) {
|
|
4707
4708
|
var onChange = function (value) {
|
|
@@ -4712,10 +4713,10 @@ var InputField = function (props) {
|
|
|
4712
4713
|
if (props.onBlur)
|
|
4713
4714
|
props.onBlur(props.name);
|
|
4714
4715
|
};
|
|
4715
|
-
return (jsxs(Container$
|
|
4716
|
+
return (jsxs(Container$f, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
4716
4717
|
};
|
|
4717
4718
|
|
|
4718
|
-
var Container$
|
|
4719
|
+
var Container$e = styled.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) {
|
|
4719
4720
|
var status = _a.status, color = _a.color;
|
|
4720
4721
|
switch (status) {
|
|
4721
4722
|
case "passed":
|
|
@@ -4759,23 +4760,23 @@ var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
|
|
|
4759
4760
|
return theme.colors.darkGray.light;
|
|
4760
4761
|
}
|
|
4761
4762
|
});
|
|
4762
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
4763
|
-
var templateObject_1$
|
|
4763
|
+
var CheckIconWrapper = styled.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"])));
|
|
4764
|
+
var templateObject_1$p, templateObject_2$k;
|
|
4764
4765
|
|
|
4765
|
-
var Key$1 = function (props) { return (jsxs(Container$
|
|
4766
|
+
var Key$1 = function (props) { return (jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
4766
4767
|
marginTop: "13px",
|
|
4767
4768
|
transform: "scale(2)",
|
|
4768
4769
|
} }, { children: jsx$1("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsx$1(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
4769
4770
|
|
|
4770
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
4771
|
+
var Wrapper$2 = styled.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) {
|
|
4771
4772
|
var chevron = _a.chevron;
|
|
4772
4773
|
return (chevron === "left" ? "4px" : "");
|
|
4773
4774
|
}, function (_a) {
|
|
4774
4775
|
var chevron = _a.chevron;
|
|
4775
4776
|
return (chevron === "right" ? "4px" : "");
|
|
4776
4777
|
});
|
|
4777
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
4778
|
-
var templateObject_1$
|
|
4778
|
+
var StyledLink = styled(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);
|
|
4779
|
+
var templateObject_1$o, templateObject_2$j;
|
|
4779
4780
|
|
|
4780
4781
|
var Link = function (props) {
|
|
4781
4782
|
var onClick = function (e) {
|
|
@@ -4787,15 +4788,15 @@ var Link = function (props) {
|
|
|
4787
4788
|
return (jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx$1(Icon, { type: "chevronLeft", color: "green" }), jsx$1(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx$1(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
4788
4789
|
};
|
|
4789
4790
|
|
|
4790
|
-
var Container$
|
|
4791
|
+
var Container$d = styled.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) {
|
|
4791
4792
|
var text = _a.text;
|
|
4792
4793
|
return (text ? "20px" : "");
|
|
4793
4794
|
});
|
|
4794
|
-
var templateObject_1$
|
|
4795
|
+
var templateObject_1$n;
|
|
4795
4796
|
|
|
4796
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
4797
|
+
var Loading = function (props) { return (jsxs(Container$d, __assign$2({}, props, { children: [jsx$1(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
4797
4798
|
|
|
4798
|
-
var Container$
|
|
4799
|
+
var Container$c = styled.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) {
|
|
4799
4800
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4800
4801
|
if (dropdownIsVisible) {
|
|
4801
4802
|
switch (color) {
|
|
@@ -4808,8 +4809,8 @@ var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __makeT
|
|
|
4808
4809
|
}
|
|
4809
4810
|
return "";
|
|
4810
4811
|
});
|
|
4811
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
4812
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
4812
|
+
var SelectedLocaleWrapper = styled.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"])));
|
|
4813
|
+
var DropdownContainer = styled.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) {
|
|
4813
4814
|
var color = _a.color;
|
|
4814
4815
|
switch (color) {
|
|
4815
4816
|
default:
|
|
@@ -4819,8 +4820,8 @@ var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = _
|
|
|
4819
4820
|
return theme.colors.lightGray.dark;
|
|
4820
4821
|
}
|
|
4821
4822
|
});
|
|
4822
|
-
var LocaleWrapper = styled.div(templateObject_4$
|
|
4823
|
-
var templateObject_1$
|
|
4823
|
+
var LocaleWrapper = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
4824
|
+
var templateObject_1$m, templateObject_2$i, templateObject_3$8, templateObject_4$6;
|
|
4824
4825
|
|
|
4825
4826
|
var LocaleSelect = function (props) {
|
|
4826
4827
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4829,22 +4830,22 @@ var LocaleSelect = function (props) {
|
|
|
4829
4830
|
setLocale(locale);
|
|
4830
4831
|
props.onChange(locale);
|
|
4831
4832
|
};
|
|
4832
|
-
return (jsxs(Container$
|
|
4833
|
+
return (jsxs(Container$c, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Heading, __assign$2({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsx$1(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx$1(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx$1(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
|
|
4833
4834
|
.filter(function (l) { return l !== locale; })
|
|
4834
4835
|
.map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
4835
4836
|
};
|
|
4836
4837
|
|
|
4837
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
4838
|
-
var templateObject_1$
|
|
4838
|
+
var Wrapper$1 = styled.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"])));
|
|
4839
|
+
var templateObject_1$l;
|
|
4839
4840
|
|
|
4840
|
-
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type:
|
|
4841
|
+
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
4841
4842
|
|
|
4842
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
4843
|
+
var NotificationContainer = styled.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) {
|
|
4843
4844
|
var contrast = _a.contrast;
|
|
4844
4845
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4845
4846
|
});
|
|
4846
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
4847
|
-
var templateObject_1$
|
|
4847
|
+
var ButtonContainer = styled.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"])));
|
|
4848
|
+
var templateObject_1$k, templateObject_2$h;
|
|
4848
4849
|
|
|
4849
4850
|
var Notification = function (props) {
|
|
4850
4851
|
if (!props.isVisible)
|
|
@@ -4852,9 +4853,9 @@ var Notification = function (props) {
|
|
|
4852
4853
|
return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
4853
4854
|
};
|
|
4854
4855
|
|
|
4855
|
-
var Container$
|
|
4856
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
4857
|
-
var templateObject_1$
|
|
4856
|
+
var Container$b = styled.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"])));
|
|
4857
|
+
var Label$6 = styled(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);
|
|
4858
|
+
var templateObject_1$j, templateObject_2$g;
|
|
4858
4859
|
|
|
4859
4860
|
var NumberField = function (props) {
|
|
4860
4861
|
var onChange = function (value) {
|
|
@@ -4865,7 +4866,7 @@ var NumberField = function (props) {
|
|
|
4865
4866
|
if (props.onBlur)
|
|
4866
4867
|
props.onBlur(props.name);
|
|
4867
4868
|
};
|
|
4868
|
-
return (jsxs(Container$
|
|
4869
|
+
return (jsxs(Container$b, { children: [jsx$1(Label$6, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Number$1, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
4869
4870
|
};
|
|
4870
4871
|
|
|
4871
4872
|
var expressions = {};
|
|
@@ -4909,15 +4910,15 @@ var isStrongPassword = function (password) {
|
|
|
4909
4910
|
exports.isStrongPassword = isStrongPassword;
|
|
4910
4911
|
}(expressions));
|
|
4911
4912
|
|
|
4912
|
-
var Container$
|
|
4913
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
4914
|
-
var HelperContainer = styled.div(templateObject_3$
|
|
4915
|
-
var fadeIn = keyframes$1(templateObject_4$
|
|
4916
|
-
var Helper = styled(StyledParagraph)(templateObject_5$
|
|
4913
|
+
var Container$a = styled.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"])));
|
|
4914
|
+
var Label$5 = styled(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);
|
|
4915
|
+
var HelperContainer = styled.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"])));
|
|
4916
|
+
var fadeIn = keyframes$1(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"])));
|
|
4917
|
+
var Helper = styled(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) {
|
|
4917
4918
|
var isOk = _a.isOk;
|
|
4918
4919
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4919
4920
|
}, fadeIn);
|
|
4920
|
-
var templateObject_1$
|
|
4921
|
+
var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4921
4922
|
|
|
4922
4923
|
var translations = {
|
|
4923
4924
|
"nl-NL": {
|
|
@@ -4974,7 +4975,7 @@ var PasswordInputField = function (props) {
|
|
|
4974
4975
|
if (props.onBlur)
|
|
4975
4976
|
props.onBlur(props.name);
|
|
4976
4977
|
};
|
|
4977
|
-
return (jsxs(Container$
|
|
4978
|
+
return (jsxs(Container$a, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
4978
4979
|
};
|
|
4979
4980
|
|
|
4980
4981
|
var generateRandomString = function (length) {
|
|
@@ -4987,7 +4988,7 @@ var generateRandomString = function (length) {
|
|
|
4987
4988
|
return string;
|
|
4988
4989
|
};
|
|
4989
4990
|
|
|
4990
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
4991
|
+
var PopupContainer = styled.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) {
|
|
4991
4992
|
var isVisible = _a.isVisible;
|
|
4992
4993
|
return (isVisible ? "100%" : "0%");
|
|
4993
4994
|
}, function (_a) {
|
|
@@ -5000,7 +5001,7 @@ var PopupContainer = styled.div(templateObject_1$g || (templateObject_1$g = __ma
|
|
|
5000
5001
|
var contrast = _a.contrast;
|
|
5001
5002
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5002
5003
|
});
|
|
5003
|
-
var templateObject_1$
|
|
5004
|
+
var templateObject_1$h;
|
|
5004
5005
|
|
|
5005
5006
|
var Popup = function (props) {
|
|
5006
5007
|
var popupRef = useRef(null);
|
|
@@ -5036,24 +5037,24 @@ var Popup = function (props) {
|
|
|
5036
5037
|
return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
5037
5038
|
};
|
|
5038
5039
|
|
|
5039
|
-
var Wrapper = styled.div(templateObject_1$
|
|
5040
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
5040
|
+
var Wrapper = styled.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"])));
|
|
5041
|
+
var StyledProgressBar = styled.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) {
|
|
5041
5042
|
var showInfo = _a.showInfo;
|
|
5042
5043
|
return (showInfo ? "10px" : "");
|
|
5043
5044
|
});
|
|
5044
|
-
var Indicator$1 = styled.div(templateObject_3$
|
|
5045
|
+
var Indicator$1 = styled.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) {
|
|
5045
5046
|
var percent = _a.percent;
|
|
5046
5047
|
return "calc(".concat(percent, "% - 6px)");
|
|
5047
5048
|
}, function (_a) {
|
|
5048
5049
|
var color = _a.color;
|
|
5049
5050
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5050
5051
|
});
|
|
5051
|
-
var templateObject_1$
|
|
5052
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$6;
|
|
5052
5053
|
|
|
5053
5054
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
5054
5055
|
|
|
5055
|
-
var Container$
|
|
5056
|
-
var Step$1 = styled.li(templateObject_2$
|
|
5056
|
+
var Container$9 = styled.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"])));
|
|
5057
|
+
var Step$1 = styled.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) {
|
|
5057
5058
|
var status = _a.status;
|
|
5058
5059
|
return (!!status ? "pointer" : "not-allowed");
|
|
5059
5060
|
}, function (_a) {
|
|
@@ -5075,9 +5076,9 @@ var Step$1 = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplat
|
|
|
5075
5076
|
var hasTitle = _a.hasTitle;
|
|
5076
5077
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5077
5078
|
}, theme.colors.lightGray.dark);
|
|
5078
|
-
var templateObject_1$
|
|
5079
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5079
5080
|
|
|
5080
|
-
var Steps$2 = function (props) { return (jsx$1(Container$
|
|
5081
|
+
var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5081
5082
|
var title = _a.title, onClick = _a.onClick;
|
|
5082
5083
|
var step = index + 1;
|
|
5083
5084
|
var status = props.current > step
|
|
@@ -5092,8 +5093,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$8, { children: props.st
|
|
|
5092
5093
|
return (jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsx$1("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
5093
5094
|
}) })); };
|
|
5094
5095
|
|
|
5095
|
-
var Container$
|
|
5096
|
-
var Step = styled.li(templateObject_2$
|
|
5096
|
+
var Container$8 = styled.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"])));
|
|
5097
|
+
var Step = styled.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) {
|
|
5097
5098
|
var status = _a.status;
|
|
5098
5099
|
return (!!status ? "pointer" : "not-allowed");
|
|
5099
5100
|
}, function (_a) {
|
|
@@ -5112,9 +5113,9 @@ var Step = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplateO
|
|
|
5112
5113
|
? theme.colors.lightGray.light
|
|
5113
5114
|
: theme.colors.darkGray.light;
|
|
5114
5115
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5115
|
-
var templateObject_1$
|
|
5116
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5116
5117
|
|
|
5117
|
-
var Steps$1 = function (props) { return (jsx$1(Container$
|
|
5118
|
+
var Steps$1 = function (props) { return (jsx$1(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5118
5119
|
var title = _a.title, onClick = _a.onClick;
|
|
5119
5120
|
var step = index + 1;
|
|
5120
5121
|
var status = props.current > step
|
|
@@ -5133,14 +5134,14 @@ var Steps = function (props) {
|
|
|
5133
5134
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
5134
5135
|
};
|
|
5135
5136
|
|
|
5136
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
5137
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
5138
|
-
var RadioWrapper = styled.div(templateObject_3$
|
|
5139
|
-
var Label$4 = styled(StyledParagraph)(templateObject_4$
|
|
5137
|
+
var Fieldset = styled.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"])));
|
|
5138
|
+
var RadioContainer = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5139
|
+
var RadioWrapper = styled.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"])));
|
|
5140
|
+
var Label$4 = styled(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) {
|
|
5140
5141
|
var weight = _a.weight;
|
|
5141
5142
|
return weight || 500;
|
|
5142
5143
|
}, theme.colors.darkGray.base);
|
|
5143
|
-
var templateObject_1$
|
|
5144
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$5, templateObject_4$4;
|
|
5144
5145
|
|
|
5145
5146
|
var RadioGroup = function (props) {
|
|
5146
5147
|
var onChange = function (value) {
|
|
@@ -5157,9 +5158,9 @@ var RadioGroup = function (props) {
|
|
|
5157
5158
|
}) })] }));
|
|
5158
5159
|
};
|
|
5159
5160
|
|
|
5160
|
-
var Container$
|
|
5161
|
-
var Label$3 = styled(StyledParagraph)(templateObject_2$
|
|
5162
|
-
var templateObject_1$
|
|
5161
|
+
var Container$7 = styled.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"])));
|
|
5162
|
+
var Label$3 = styled(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);
|
|
5163
|
+
var templateObject_1$c, templateObject_2$a;
|
|
5163
5164
|
|
|
5164
5165
|
var SelectField = function (props) {
|
|
5165
5166
|
var onChange = function (value) {
|
|
@@ -5170,15 +5171,15 @@ var SelectField = function (props) {
|
|
|
5170
5171
|
if (props.onBlur)
|
|
5171
5172
|
props.onBlur(props.name);
|
|
5172
5173
|
};
|
|
5173
|
-
return (jsxs(Container$
|
|
5174
|
+
return (jsxs(Container$7, { children: [jsx$1(Label$3, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Select, __assign$2({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
5174
5175
|
var value = _a.value, label = _a.label;
|
|
5175
5176
|
return (jsx$1("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
5176
5177
|
}) }))] }));
|
|
5177
5178
|
};
|
|
5178
5179
|
|
|
5179
|
-
var Container$
|
|
5180
|
-
var Label$2 = styled(StyledParagraph)(templateObject_2$
|
|
5181
|
-
var templateObject_1$
|
|
5180
|
+
var Container$6 = styled.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"])));
|
|
5181
|
+
var Label$2 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
5182
|
+
var templateObject_1$b, templateObject_2$9;
|
|
5182
5183
|
|
|
5183
5184
|
var ToggleField = function (props) {
|
|
5184
5185
|
var onChange = function (value) {
|
|
@@ -5189,10 +5190,10 @@ var ToggleField = function (props) {
|
|
|
5189
5190
|
if (props.onBlur)
|
|
5190
5191
|
props.onBlur(props.name);
|
|
5191
5192
|
};
|
|
5192
|
-
return (jsxs(Container$
|
|
5193
|
+
return (jsxs(Container$6, { children: [jsx$1(Label$2, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
5193
5194
|
};
|
|
5194
5195
|
|
|
5195
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
5196
|
+
var TooltipContainer = styled.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) {
|
|
5196
5197
|
var isVisible = _a.isVisible;
|
|
5197
5198
|
return (isVisible ? "100%" : "0%");
|
|
5198
5199
|
}, function (_a) {
|
|
@@ -5202,7 +5203,7 @@ var TooltipContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __
|
|
|
5202
5203
|
var x = _a.x;
|
|
5203
5204
|
return (x ? "".concat(x, "px") : "");
|
|
5204
5205
|
});
|
|
5205
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
5206
|
+
var TooltipTitle = styled.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) {
|
|
5206
5207
|
var color = _a.color;
|
|
5207
5208
|
switch (color) {
|
|
5208
5209
|
default:
|
|
@@ -5212,7 +5213,7 @@ var TooltipTitle = styled.div(templateObject_2$7 || (templateObject_2$7 = __make
|
|
|
5212
5213
|
return theme.colors.lightGray.dark;
|
|
5213
5214
|
}
|
|
5214
5215
|
});
|
|
5215
|
-
var templateObject_1$
|
|
5216
|
+
var templateObject_1$a, templateObject_2$8;
|
|
5216
5217
|
|
|
5217
5218
|
var Tooltip = function (props) {
|
|
5218
5219
|
var tooltipRef = useRef(null);
|
|
@@ -11064,7 +11065,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
11064
11065
|
HTMLReactParser$1.attributesToProps;
|
|
11065
11066
|
HTMLReactParser$1.Element;
|
|
11066
11067
|
|
|
11067
|
-
var StyledTextarea = styled.textarea(templateObject_1$
|
|
11068
|
+
var StyledTextarea = styled.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) {
|
|
11068
11069
|
var disabled = _a.disabled;
|
|
11069
11070
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
11070
11071
|
}, function (_a) {
|
|
@@ -11077,7 +11078,7 @@ var StyledTextarea = styled.textarea(templateObject_1$8 || (templateObject_1$8 =
|
|
|
11077
11078
|
var disabled = _a.disabled;
|
|
11078
11079
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
11079
11080
|
}, 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));
|
|
11080
|
-
var templateObject_1$
|
|
11081
|
+
var templateObject_1$9;
|
|
11081
11082
|
|
|
11082
11083
|
var Textarea = function (props) {
|
|
11083
11084
|
var onChange = function (e) {
|
|
@@ -11087,9 +11088,9 @@ var Textarea = function (props) {
|
|
|
11087
11088
|
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
11088
11089
|
};
|
|
11089
11090
|
|
|
11090
|
-
var Container$
|
|
11091
|
-
var Label$1 = styled(StyledParagraph)(templateObject_2$
|
|
11092
|
-
var templateObject_1$
|
|
11091
|
+
var Container$5 = styled.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"])));
|
|
11092
|
+
var Label$1 = styled(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);
|
|
11093
|
+
var templateObject_1$8, templateObject_2$7;
|
|
11093
11094
|
|
|
11094
11095
|
var TextareaField = function (props) {
|
|
11095
11096
|
var onChange = function (value) {
|
|
@@ -11100,12 +11101,12 @@ var TextareaField = function (props) {
|
|
|
11100
11101
|
if (props.onBlur)
|
|
11101
11102
|
props.onBlur(props.name);
|
|
11102
11103
|
};
|
|
11103
|
-
return (jsxs(Container$
|
|
11104
|
+
return (jsxs(Container$5, { children: [jsx$1(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
11104
11105
|
};
|
|
11105
11106
|
|
|
11106
|
-
var Container$
|
|
11107
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
11108
|
-
var templateObject_1$
|
|
11107
|
+
var Container$4 = styled.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"])));
|
|
11108
|
+
var Label = styled(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);
|
|
11109
|
+
var templateObject_1$7, templateObject_2$6;
|
|
11109
11110
|
|
|
11110
11111
|
var RangeField = function (props) {
|
|
11111
11112
|
var onChange = function (value) {
|
|
@@ -11116,25 +11117,25 @@ var RangeField = function (props) {
|
|
|
11116
11117
|
if (props.onBlur)
|
|
11117
11118
|
props.onBlur(props.name);
|
|
11118
11119
|
};
|
|
11119
|
-
return (jsxs(Container$
|
|
11120
|
+
return (jsxs(Container$4, { children: [jsx$1(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
11120
11121
|
};
|
|
11121
11122
|
|
|
11122
11123
|
var FeedbackColors = {
|
|
11123
11124
|
success: theme.colors.green.base,
|
|
11124
11125
|
error: theme.colors.red.base,
|
|
11125
11126
|
};
|
|
11126
|
-
var FieldWrapper = styled.div(templateObject_1$
|
|
11127
|
+
var FieldWrapper = styled.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) {
|
|
11127
11128
|
var status = _a.status;
|
|
11128
11129
|
return FeedbackColors[status];
|
|
11129
11130
|
});
|
|
11130
|
-
var FeedbackWrapper = styled.div(templateObject_2$
|
|
11131
|
+
var FeedbackWrapper = styled.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) {
|
|
11131
11132
|
var status = _a.status;
|
|
11132
11133
|
return FeedbackColors[status];
|
|
11133
11134
|
}, function (_a) {
|
|
11134
11135
|
var status = _a.status;
|
|
11135
11136
|
return FeedbackColors[status];
|
|
11136
11137
|
});
|
|
11137
|
-
var templateObject_1$
|
|
11138
|
+
var templateObject_1$6, templateObject_2$5;
|
|
11138
11139
|
|
|
11139
11140
|
var WithValidation = function (_a) {
|
|
11140
11141
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -11147,10 +11148,10 @@ var WithValidation = function (_a) {
|
|
|
11147
11148
|
return (jsxs(FieldWrapper, __assign$2({ status: status }, { children: [children, jsxs(FeedbackWrapper, __assign$2({ status: status }, { children: [jsx$1(Icon, { type: icons[status], size: "small" }), jsx$1(Paragraph, __assign$2({ size: "small" }, { children: message }))] }))] })));
|
|
11148
11149
|
};
|
|
11149
11150
|
|
|
11150
|
-
var FormWrapper = styled.form(templateObject_1$
|
|
11151
|
-
var DescriptionWrapper = styled.div(templateObject_2$
|
|
11152
|
-
var ButtonWrapper = styled.div(templateObject_3$
|
|
11153
|
-
var templateObject_1$
|
|
11151
|
+
var FormWrapper = styled.form(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1([""], [""])));
|
|
11152
|
+
var DescriptionWrapper = styled.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);
|
|
11153
|
+
var ButtonWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
11154
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4;
|
|
11154
11155
|
|
|
11155
11156
|
var Form = forwardRef(function (props, ref) {
|
|
11156
11157
|
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -11333,7 +11334,7 @@ var Form = forwardRef(function (props, ref) {
|
|
|
11333
11334
|
}) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
11334
11335
|
});
|
|
11335
11336
|
|
|
11336
|
-
var Container$
|
|
11337
|
+
var Container$3 = styled.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) {
|
|
11337
11338
|
var color = _a.color, active = _a.active;
|
|
11338
11339
|
if (active)
|
|
11339
11340
|
return theme.colors[color].dark;
|
|
@@ -11357,20 +11358,20 @@ var Container$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeT
|
|
|
11357
11358
|
return theme.colors[color].base;
|
|
11358
11359
|
return "";
|
|
11359
11360
|
});
|
|
11360
|
-
var templateObject_1$
|
|
11361
|
+
var templateObject_1$4;
|
|
11361
11362
|
|
|
11362
11363
|
var Key = function (props) {
|
|
11363
11364
|
var _a;
|
|
11364
|
-
return (jsx$1(Container$
|
|
11365
|
+
return (jsx$1(Container$3, __assign$2({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsx$1("svg", __assign$2({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsx$1("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsx$1(Heading, __assign$2({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) })));
|
|
11365
11366
|
};
|
|
11366
11367
|
|
|
11367
|
-
var Container$
|
|
11368
|
-
var SpecialRow = styled.div(templateObject_2$
|
|
11369
|
-
var TopRow = styled.div(templateObject_3$
|
|
11370
|
-
var StartRow = styled.div(templateObject_4$
|
|
11371
|
-
var BottomRow = styled.div(templateObject_5$
|
|
11372
|
-
var SpacebarRow = styled.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"])));
|
|
11373
|
-
var templateObject_1$
|
|
11368
|
+
var Container$2 = styled.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"])));
|
|
11369
|
+
var SpecialRow = styled.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"])));
|
|
11370
|
+
var TopRow = styled.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"])));
|
|
11371
|
+
var StartRow = styled.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"])));
|
|
11372
|
+
var BottomRow = styled.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"])));
|
|
11373
|
+
var SpacebarRow = styled.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"])));
|
|
11374
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$1;
|
|
11374
11375
|
|
|
11375
11376
|
var Keyboard = function (props) {
|
|
11376
11377
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11394,7 +11395,7 @@ var Keyboard = function (props) {
|
|
|
11394
11395
|
}, [props.keys]);
|
|
11395
11396
|
if (!keys)
|
|
11396
11397
|
return null;
|
|
11397
|
-
return (jsxs(Container$
|
|
11398
|
+
return (jsxs(Container$2, { children: [jsxs(SpecialRow, { children: [jsx$1(Key, {}), jsx$1(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
11398
11399
|
keys[89].character === props.activeKey }, 44), jsx$1(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
11399
11400
|
keys[87].character === props.activeKey }), jsx$1(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
11400
11401
|
keys[85].character === props.activeKey }), jsx$1(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
@@ -11442,15 +11443,15 @@ var Keyboard = function (props) {
|
|
|
11442
11443
|
keys[76].character === props.activeKey }), jsx$1(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxs(SpacebarRow, { children: [jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {})] })] }));
|
|
11443
11444
|
};
|
|
11444
11445
|
|
|
11445
|
-
var Mask = styled.div(templateObject_1$
|
|
11446
|
-
var CardWrapper = styled.div(templateObject_2$
|
|
11446
|
+
var Mask = styled.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"])));
|
|
11447
|
+
var CardWrapper = styled.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) {
|
|
11447
11448
|
var width = _a.width;
|
|
11448
11449
|
return (width ? "".concat(width, "px") : "720px");
|
|
11449
11450
|
});
|
|
11450
|
-
var CloseIconWrapper = styled.div(templateObject_3$
|
|
11451
|
-
var ChildrenWrapper = styled.div(templateObject_4$
|
|
11452
|
-
var FooterContainer = styled.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);
|
|
11453
|
-
var templateObject_1$
|
|
11451
|
+
var CloseIconWrapper = styled.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);
|
|
11452
|
+
var ChildrenWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
11453
|
+
var FooterContainer = styled.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);
|
|
11454
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
11454
11455
|
|
|
11455
11456
|
var Modal = function (props) {
|
|
11456
11457
|
var _a = useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -11466,20 +11467,20 @@ var Modal = function (props) {
|
|
|
11466
11467
|
return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: onClose }) })), jsx$1(ChildrenWrapper, { children: props.children }), props.footer && jsx$1(FooterContainer, { children: props.footer })] }) })) }));
|
|
11467
11468
|
};
|
|
11468
11469
|
|
|
11469
|
-
var Container = styled.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) {
|
|
11470
|
+
var Container$1 = styled.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) {
|
|
11470
11471
|
var passed = _a.passed;
|
|
11471
11472
|
return passed ? theme.colors.green.base : theme.colors.red.base;
|
|
11472
11473
|
}, theme.colors.lightGray.light);
|
|
11473
|
-
var ProgressBarWrapper = styled.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"])));
|
|
11474
|
-
var Indicator = styled.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) {
|
|
11474
|
+
var ProgressBarWrapper = styled.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"])));
|
|
11475
|
+
var Indicator = styled.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) {
|
|
11475
11476
|
var value = _a.value;
|
|
11476
11477
|
return "".concat(value, "%");
|
|
11477
11478
|
});
|
|
11478
|
-
var Target = styled.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) {
|
|
11479
|
+
var Target = styled.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) {
|
|
11479
11480
|
var value = _a.value, width = _a.width;
|
|
11480
11481
|
return "calc(".concat(value, "% - ").concat(width / 2, "px)");
|
|
11481
11482
|
}, theme.colors.blue.darker);
|
|
11482
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
11483
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
11483
11484
|
|
|
11484
11485
|
var Result = function (props) {
|
|
11485
11486
|
var ref = useRef(null);
|
|
@@ -11489,8 +11490,31 @@ var Result = function (props) {
|
|
|
11489
11490
|
var _a;
|
|
11490
11491
|
setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
11491
11492
|
}, [ref]);
|
|
11492
|
-
return (jsxs(Container, __assign$2({ passed: isPassed }, { children: [jsx$1(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsx$1(Spacer, { horizontal: 15 }), jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsx$1(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxs(ProgressBarWrapper, { children: [jsx$1(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsx$1(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsx$1(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxs("div", { children: [jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
11493
|
+
return (jsxs(Container$1, __assign$2({ passed: isPassed }, { children: [jsx$1(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsx$1(Spacer, { horizontal: 15 }), jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsx$1(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxs(ProgressBarWrapper, { children: [jsx$1(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsx$1(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsx$1(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxs("div", { children: [jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
|
|
11494
|
+
};
|
|
11495
|
+
|
|
11496
|
+
var Container = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n box-shadow: 0 0 0 1px ", ";\n overflow: hidden;\n"], ["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n box-shadow: 0 0 0 1px ", ";\n overflow: hidden;\n"])), theme.colors.lightGray.dark);
|
|
11497
|
+
var TableHead = styled.thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["\n border-bottom: 1px solid ", ";\n"], ["\n border-bottom: 1px solid ", ";\n"])), theme.colors.lightGray.dark);
|
|
11498
|
+
var TableBody = styled.tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11499
|
+
styled.tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11500
|
+
var ColumnTitle = styled.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"])));
|
|
11501
|
+
var TableRow = styled.tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base);
|
|
11502
|
+
var TableCell = styled.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);
|
|
11503
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11504
|
+
|
|
11505
|
+
var Table = function (_a) {
|
|
11506
|
+
var columns = _a.columns, data = _a.data;
|
|
11507
|
+
return (jsxs(Container, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a) {
|
|
11508
|
+
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11509
|
+
return (jsx$1(ColumnTitle, { children: jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
|
|
11510
|
+
}) }) }), jsx$1(TableBody, { children: data.map(function (row, index) {
|
|
11511
|
+
return (jsx$1(TableRow, { children: columns.map(function (_a, index) {
|
|
11512
|
+
var dataIndex = _a.dataIndex, render = _a.render;
|
|
11513
|
+
var data = row[dataIndex];
|
|
11514
|
+
return (jsx$1(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
|
|
11515
|
+
}) }, "row-".concat(index)));
|
|
11516
|
+
}) })] }));
|
|
11493
11517
|
};
|
|
11494
11518
|
|
|
11495
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
11519
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
11496
11520
|
//# sourceMappingURL=index.es.js.map
|