@typeolymp/ui-components 1.9.15 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/molecules/Card/index.d.ts +1 -0
- package/build/components/organisms/Table/index.d.ts +13 -0
- package/build/components/organisms/Table/stories.d.ts +7 -0
- package/build/components/organisms/Table/styles.d.ts +7 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +213 -186
- package/build/index.es.js.map +1 -1
- package/build/index.js +213 -185
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.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,14 @@ 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 border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
4607
|
+
var bordered = _a.bordered;
|
|
4608
|
+
return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
|
|
4609
|
+
}, function (_a) {
|
|
4606
4610
|
var ellipse = _a.ellipse;
|
|
4607
4611
|
return ellipse
|
|
4608
4612
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -4611,23 +4615,23 @@ var StyledCard = styled.div(templateObject_1$u || (templateObject_1$u = __makeTe
|
|
|
4611
4615
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
4612
4616
|
: "";
|
|
4613
4617
|
});
|
|
4614
|
-
var Ellipse = styled.div(templateObject_2$
|
|
4618
|
+
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
4619
|
var color = _a.color;
|
|
4616
4620
|
return color ? theme.colors[color].light : "";
|
|
4617
4621
|
});
|
|
4618
|
-
var Content = styled.div(templateObject_3$
|
|
4619
|
-
var templateObject_1$
|
|
4622
|
+
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"])));
|
|
4623
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$a;
|
|
4620
4624
|
|
|
4621
4625
|
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
4626
|
|
|
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$
|
|
4627
|
+
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"])));
|
|
4628
|
+
var CheckboxContainer = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
4629
|
+
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"])));
|
|
4630
|
+
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
4631
|
var weight = _a.weight;
|
|
4628
4632
|
return weight || 500;
|
|
4629
4633
|
}, theme.colors.darkGray.base);
|
|
4630
|
-
var templateObject_1$
|
|
4634
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9, templateObject_4$7;
|
|
4631
4635
|
|
|
4632
4636
|
var Checkboxes = function (props) {
|
|
4633
4637
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -4650,12 +4654,12 @@ var Checkboxes = function (props) {
|
|
|
4650
4654
|
}) })] }));
|
|
4651
4655
|
};
|
|
4652
4656
|
|
|
4653
|
-
var Container$
|
|
4654
|
-
var Item = styled.div(templateObject_2$
|
|
4657
|
+
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);
|
|
4658
|
+
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
4659
|
var isOpen = _a.isOpen;
|
|
4656
4660
|
return (isOpen ? "" : "none");
|
|
4657
4661
|
}, theme.colors.lightGray.darker);
|
|
4658
|
-
var templateObject_1$
|
|
4662
|
+
var templateObject_1$t, templateObject_2$o;
|
|
4659
4663
|
|
|
4660
4664
|
var Collapse = function (props) {
|
|
4661
4665
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -4667,15 +4671,15 @@ var Collapse = function (props) {
|
|
|
4667
4671
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
4668
4672
|
}
|
|
4669
4673
|
};
|
|
4670
|
-
return (jsx$1(Container$
|
|
4674
|
+
return (jsx$1(Container$h, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
4671
4675
|
var isOpen = openItems.includes(index);
|
|
4672
4676
|
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
4677
|
}) })));
|
|
4674
4678
|
};
|
|
4675
4679
|
|
|
4676
|
-
var Container$
|
|
4677
|
-
var Label$8 = styled(StyledParagraph)(templateObject_2$
|
|
4678
|
-
var templateObject_1$
|
|
4680
|
+
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"])));
|
|
4681
|
+
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);
|
|
4682
|
+
var templateObject_1$s, templateObject_2$n;
|
|
4679
4683
|
|
|
4680
4684
|
var DateInputField = function (props) {
|
|
4681
4685
|
var onChange = function (value) {
|
|
@@ -4686,12 +4690,12 @@ var DateInputField = function (props) {
|
|
|
4686
4690
|
if (props.onBlur)
|
|
4687
4691
|
props.onBlur(props.name);
|
|
4688
4692
|
};
|
|
4689
|
-
return (jsxs(Container$
|
|
4693
|
+
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
4694
|
};
|
|
4691
4695
|
|
|
4692
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
4693
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
4694
|
-
var templateObject_1$
|
|
4696
|
+
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"])));
|
|
4697
|
+
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"])));
|
|
4698
|
+
var templateObject_1$r, templateObject_2$m;
|
|
4695
4699
|
|
|
4696
4700
|
var IconButton = function (props) {
|
|
4697
4701
|
if (props.color === "white")
|
|
@@ -4699,9 +4703,9 @@ var IconButton = function (props) {
|
|
|
4699
4703
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
4700
4704
|
};
|
|
4701
4705
|
|
|
4702
|
-
var Container$
|
|
4703
|
-
var Label$7 = styled(StyledParagraph)(templateObject_2$
|
|
4704
|
-
var templateObject_1$
|
|
4706
|
+
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"])));
|
|
4707
|
+
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);
|
|
4708
|
+
var templateObject_1$q, templateObject_2$l;
|
|
4705
4709
|
|
|
4706
4710
|
var InputField = function (props) {
|
|
4707
4711
|
var onChange = function (value) {
|
|
@@ -4712,10 +4716,10 @@ var InputField = function (props) {
|
|
|
4712
4716
|
if (props.onBlur)
|
|
4713
4717
|
props.onBlur(props.name);
|
|
4714
4718
|
};
|
|
4715
|
-
return (jsxs(Container$
|
|
4719
|
+
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
4720
|
};
|
|
4717
4721
|
|
|
4718
|
-
var Container$
|
|
4722
|
+
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
4723
|
var status = _a.status, color = _a.color;
|
|
4720
4724
|
switch (status) {
|
|
4721
4725
|
case "passed":
|
|
@@ -4759,23 +4763,23 @@ var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
|
|
|
4759
4763
|
return theme.colors.darkGray.light;
|
|
4760
4764
|
}
|
|
4761
4765
|
});
|
|
4762
|
-
var CheckIconWrapper = styled.div(templateObject_2$
|
|
4763
|
-
var templateObject_1$
|
|
4766
|
+
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"])));
|
|
4767
|
+
var templateObject_1$p, templateObject_2$k;
|
|
4764
4768
|
|
|
4765
|
-
var Key$1 = function (props) { return (jsxs(Container$
|
|
4769
|
+
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
4770
|
marginTop: "13px",
|
|
4767
4771
|
transform: "scale(2)",
|
|
4768
4772
|
} }, { 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
4773
|
|
|
4770
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
4774
|
+
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
4775
|
var chevron = _a.chevron;
|
|
4772
4776
|
return (chevron === "left" ? "4px" : "");
|
|
4773
4777
|
}, function (_a) {
|
|
4774
4778
|
var chevron = _a.chevron;
|
|
4775
4779
|
return (chevron === "right" ? "4px" : "");
|
|
4776
4780
|
});
|
|
4777
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
4778
|
-
var templateObject_1$
|
|
4781
|
+
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);
|
|
4782
|
+
var templateObject_1$o, templateObject_2$j;
|
|
4779
4783
|
|
|
4780
4784
|
var Link = function (props) {
|
|
4781
4785
|
var onClick = function (e) {
|
|
@@ -4787,15 +4791,15 @@ var Link = function (props) {
|
|
|
4787
4791
|
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
4792
|
};
|
|
4789
4793
|
|
|
4790
|
-
var Container$
|
|
4794
|
+
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
4795
|
var text = _a.text;
|
|
4792
4796
|
return (text ? "20px" : "");
|
|
4793
4797
|
});
|
|
4794
|
-
var templateObject_1$
|
|
4798
|
+
var templateObject_1$n;
|
|
4795
4799
|
|
|
4796
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
4800
|
+
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
4801
|
|
|
4798
|
-
var Container$
|
|
4802
|
+
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
4803
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
4800
4804
|
if (dropdownIsVisible) {
|
|
4801
4805
|
switch (color) {
|
|
@@ -4808,8 +4812,8 @@ var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __makeT
|
|
|
4808
4812
|
}
|
|
4809
4813
|
return "";
|
|
4810
4814
|
});
|
|
4811
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
4812
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
4815
|
+
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"])));
|
|
4816
|
+
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
4817
|
var color = _a.color;
|
|
4814
4818
|
switch (color) {
|
|
4815
4819
|
default:
|
|
@@ -4819,8 +4823,8 @@ var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = _
|
|
|
4819
4823
|
return theme.colors.lightGray.dark;
|
|
4820
4824
|
}
|
|
4821
4825
|
});
|
|
4822
|
-
var LocaleWrapper = styled.div(templateObject_4$
|
|
4823
|
-
var templateObject_1$
|
|
4826
|
+
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);
|
|
4827
|
+
var templateObject_1$m, templateObject_2$i, templateObject_3$8, templateObject_4$6;
|
|
4824
4828
|
|
|
4825
4829
|
var LocaleSelect = function (props) {
|
|
4826
4830
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -4829,22 +4833,22 @@ var LocaleSelect = function (props) {
|
|
|
4829
4833
|
setLocale(locale);
|
|
4830
4834
|
props.onChange(locale);
|
|
4831
4835
|
};
|
|
4832
|
-
return (jsxs(Container$
|
|
4836
|
+
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
4837
|
.filter(function (l) { return l !== locale; })
|
|
4834
4838
|
.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
4839
|
};
|
|
4836
4840
|
|
|
4837
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
4838
|
-
var templateObject_1$
|
|
4841
|
+
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"])));
|
|
4842
|
+
var templateObject_1$l;
|
|
4839
4843
|
|
|
4840
|
-
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type:
|
|
4844
|
+
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
4845
|
|
|
4842
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
4846
|
+
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
4847
|
var contrast = _a.contrast;
|
|
4844
4848
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
4845
4849
|
});
|
|
4846
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
4847
|
-
var templateObject_1$
|
|
4850
|
+
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"])));
|
|
4851
|
+
var templateObject_1$k, templateObject_2$h;
|
|
4848
4852
|
|
|
4849
4853
|
var Notification = function (props) {
|
|
4850
4854
|
if (!props.isVisible)
|
|
@@ -4852,9 +4856,9 @@ var Notification = function (props) {
|
|
|
4852
4856
|
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
4857
|
};
|
|
4854
4858
|
|
|
4855
|
-
var Container$
|
|
4856
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
4857
|
-
var templateObject_1$
|
|
4859
|
+
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"])));
|
|
4860
|
+
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);
|
|
4861
|
+
var templateObject_1$j, templateObject_2$g;
|
|
4858
4862
|
|
|
4859
4863
|
var NumberField = function (props) {
|
|
4860
4864
|
var onChange = function (value) {
|
|
@@ -4865,7 +4869,7 @@ var NumberField = function (props) {
|
|
|
4865
4869
|
if (props.onBlur)
|
|
4866
4870
|
props.onBlur(props.name);
|
|
4867
4871
|
};
|
|
4868
|
-
return (jsxs(Container$
|
|
4872
|
+
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
4873
|
};
|
|
4870
4874
|
|
|
4871
4875
|
var expressions = {};
|
|
@@ -4909,15 +4913,15 @@ var isStrongPassword = function (password) {
|
|
|
4909
4913
|
exports.isStrongPassword = isStrongPassword;
|
|
4910
4914
|
}(expressions));
|
|
4911
4915
|
|
|
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$
|
|
4916
|
+
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"])));
|
|
4917
|
+
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);
|
|
4918
|
+
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"])));
|
|
4919
|
+
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"])));
|
|
4920
|
+
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
4921
|
var isOk = _a.isOk;
|
|
4918
4922
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4919
4923
|
}, fadeIn);
|
|
4920
|
-
var templateObject_1$
|
|
4924
|
+
var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
|
|
4921
4925
|
|
|
4922
4926
|
var translations = {
|
|
4923
4927
|
"nl-NL": {
|
|
@@ -4974,7 +4978,7 @@ var PasswordInputField = function (props) {
|
|
|
4974
4978
|
if (props.onBlur)
|
|
4975
4979
|
props.onBlur(props.name);
|
|
4976
4980
|
};
|
|
4977
|
-
return (jsxs(Container$
|
|
4981
|
+
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
4982
|
};
|
|
4979
4983
|
|
|
4980
4984
|
var generateRandomString = function (length) {
|
|
@@ -4987,7 +4991,7 @@ var generateRandomString = function (length) {
|
|
|
4987
4991
|
return string;
|
|
4988
4992
|
};
|
|
4989
4993
|
|
|
4990
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
4994
|
+
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
4995
|
var isVisible = _a.isVisible;
|
|
4992
4996
|
return (isVisible ? "100%" : "0%");
|
|
4993
4997
|
}, function (_a) {
|
|
@@ -5000,7 +5004,7 @@ var PopupContainer = styled.div(templateObject_1$g || (templateObject_1$g = __ma
|
|
|
5000
5004
|
var contrast = _a.contrast;
|
|
5001
5005
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
5002
5006
|
});
|
|
5003
|
-
var templateObject_1$
|
|
5007
|
+
var templateObject_1$h;
|
|
5004
5008
|
|
|
5005
5009
|
var Popup = function (props) {
|
|
5006
5010
|
var popupRef = useRef(null);
|
|
@@ -5036,24 +5040,24 @@ var Popup = function (props) {
|
|
|
5036
5040
|
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
5041
|
};
|
|
5038
5042
|
|
|
5039
|
-
var Wrapper = styled.div(templateObject_1$
|
|
5040
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
5043
|
+
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"])));
|
|
5044
|
+
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
5045
|
var showInfo = _a.showInfo;
|
|
5042
5046
|
return (showInfo ? "10px" : "");
|
|
5043
5047
|
});
|
|
5044
|
-
var Indicator$1 = styled.div(templateObject_3$
|
|
5048
|
+
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
5049
|
var percent = _a.percent;
|
|
5046
5050
|
return "calc(".concat(percent, "% - 6px)");
|
|
5047
5051
|
}, function (_a) {
|
|
5048
5052
|
var color = _a.color;
|
|
5049
5053
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
5050
5054
|
});
|
|
5051
|
-
var templateObject_1$
|
|
5055
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$6;
|
|
5052
5056
|
|
|
5053
5057
|
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
5058
|
|
|
5055
|
-
var Container$
|
|
5056
|
-
var Step$1 = styled.li(templateObject_2$
|
|
5059
|
+
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"])));
|
|
5060
|
+
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
5061
|
var status = _a.status;
|
|
5058
5062
|
return (!!status ? "pointer" : "not-allowed");
|
|
5059
5063
|
}, function (_a) {
|
|
@@ -5075,9 +5079,9 @@ var Step$1 = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplat
|
|
|
5075
5079
|
var hasTitle = _a.hasTitle;
|
|
5076
5080
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
5077
5081
|
}, theme.colors.lightGray.dark);
|
|
5078
|
-
var templateObject_1$
|
|
5082
|
+
var templateObject_1$f, templateObject_2$d;
|
|
5079
5083
|
|
|
5080
|
-
var Steps$2 = function (props) { return (jsx$1(Container$
|
|
5084
|
+
var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
|
|
5081
5085
|
var title = _a.title, onClick = _a.onClick;
|
|
5082
5086
|
var step = index + 1;
|
|
5083
5087
|
var status = props.current > step
|
|
@@ -5092,8 +5096,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$8, { children: props.st
|
|
|
5092
5096
|
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
5097
|
}) })); };
|
|
5094
5098
|
|
|
5095
|
-
var Container$
|
|
5096
|
-
var Step = styled.li(templateObject_2$
|
|
5099
|
+
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"])));
|
|
5100
|
+
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
5101
|
var status = _a.status;
|
|
5098
5102
|
return (!!status ? "pointer" : "not-allowed");
|
|
5099
5103
|
}, function (_a) {
|
|
@@ -5112,9 +5116,9 @@ var Step = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplateO
|
|
|
5112
5116
|
? theme.colors.lightGray.light
|
|
5113
5117
|
: theme.colors.darkGray.light;
|
|
5114
5118
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
5115
|
-
var templateObject_1$
|
|
5119
|
+
var templateObject_1$e, templateObject_2$c;
|
|
5116
5120
|
|
|
5117
|
-
var Steps$1 = function (props) { return (jsx$1(Container$
|
|
5121
|
+
var Steps$1 = function (props) { return (jsx$1(Container$8, { children: props.steps.map(function (_a, index) {
|
|
5118
5122
|
var title = _a.title, onClick = _a.onClick;
|
|
5119
5123
|
var step = index + 1;
|
|
5120
5124
|
var status = props.current > step
|
|
@@ -5133,14 +5137,14 @@ var Steps = function (props) {
|
|
|
5133
5137
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
5134
5138
|
};
|
|
5135
5139
|
|
|
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$
|
|
5140
|
+
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"])));
|
|
5141
|
+
var RadioContainer = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
5142
|
+
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"])));
|
|
5143
|
+
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
5144
|
var weight = _a.weight;
|
|
5141
5145
|
return weight || 500;
|
|
5142
5146
|
}, theme.colors.darkGray.base);
|
|
5143
|
-
var templateObject_1$
|
|
5147
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$5, templateObject_4$4;
|
|
5144
5148
|
|
|
5145
5149
|
var RadioGroup = function (props) {
|
|
5146
5150
|
var onChange = function (value) {
|
|
@@ -5157,9 +5161,9 @@ var RadioGroup = function (props) {
|
|
|
5157
5161
|
}) })] }));
|
|
5158
5162
|
};
|
|
5159
5163
|
|
|
5160
|
-
var Container$
|
|
5161
|
-
var Label$3 = styled(StyledParagraph)(templateObject_2$
|
|
5162
|
-
var templateObject_1$
|
|
5164
|
+
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"])));
|
|
5165
|
+
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);
|
|
5166
|
+
var templateObject_1$c, templateObject_2$a;
|
|
5163
5167
|
|
|
5164
5168
|
var SelectField = function (props) {
|
|
5165
5169
|
var onChange = function (value) {
|
|
@@ -5170,15 +5174,15 @@ var SelectField = function (props) {
|
|
|
5170
5174
|
if (props.onBlur)
|
|
5171
5175
|
props.onBlur(props.name);
|
|
5172
5176
|
};
|
|
5173
|
-
return (jsxs(Container$
|
|
5177
|
+
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
5178
|
var value = _a.value, label = _a.label;
|
|
5175
5179
|
return (jsx$1("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
5176
5180
|
}) }))] }));
|
|
5177
5181
|
};
|
|
5178
5182
|
|
|
5179
|
-
var Container$
|
|
5180
|
-
var Label$2 = styled(StyledParagraph)(templateObject_2$
|
|
5181
|
-
var templateObject_1$
|
|
5183
|
+
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"])));
|
|
5184
|
+
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);
|
|
5185
|
+
var templateObject_1$b, templateObject_2$9;
|
|
5182
5186
|
|
|
5183
5187
|
var ToggleField = function (props) {
|
|
5184
5188
|
var onChange = function (value) {
|
|
@@ -5189,10 +5193,10 @@ var ToggleField = function (props) {
|
|
|
5189
5193
|
if (props.onBlur)
|
|
5190
5194
|
props.onBlur(props.name);
|
|
5191
5195
|
};
|
|
5192
|
-
return (jsxs(Container$
|
|
5196
|
+
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
5197
|
};
|
|
5194
5198
|
|
|
5195
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
5199
|
+
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
5200
|
var isVisible = _a.isVisible;
|
|
5197
5201
|
return (isVisible ? "100%" : "0%");
|
|
5198
5202
|
}, function (_a) {
|
|
@@ -5202,7 +5206,7 @@ var TooltipContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __
|
|
|
5202
5206
|
var x = _a.x;
|
|
5203
5207
|
return (x ? "".concat(x, "px") : "");
|
|
5204
5208
|
});
|
|
5205
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
5209
|
+
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
5210
|
var color = _a.color;
|
|
5207
5211
|
switch (color) {
|
|
5208
5212
|
default:
|
|
@@ -5212,7 +5216,7 @@ var TooltipTitle = styled.div(templateObject_2$7 || (templateObject_2$7 = __make
|
|
|
5212
5216
|
return theme.colors.lightGray.dark;
|
|
5213
5217
|
}
|
|
5214
5218
|
});
|
|
5215
|
-
var templateObject_1$
|
|
5219
|
+
var templateObject_1$a, templateObject_2$8;
|
|
5216
5220
|
|
|
5217
5221
|
var Tooltip = function (props) {
|
|
5218
5222
|
var tooltipRef = useRef(null);
|
|
@@ -11064,7 +11068,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
11064
11068
|
HTMLReactParser$1.attributesToProps;
|
|
11065
11069
|
HTMLReactParser$1.Element;
|
|
11066
11070
|
|
|
11067
|
-
var StyledTextarea = styled.textarea(templateObject_1$
|
|
11071
|
+
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
11072
|
var disabled = _a.disabled;
|
|
11069
11073
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
11070
11074
|
}, function (_a) {
|
|
@@ -11077,7 +11081,7 @@ var StyledTextarea = styled.textarea(templateObject_1$8 || (templateObject_1$8 =
|
|
|
11077
11081
|
var disabled = _a.disabled;
|
|
11078
11082
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
11079
11083
|
}, 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$
|
|
11084
|
+
var templateObject_1$9;
|
|
11081
11085
|
|
|
11082
11086
|
var Textarea = function (props) {
|
|
11083
11087
|
var onChange = function (e) {
|
|
@@ -11087,9 +11091,9 @@ var Textarea = function (props) {
|
|
|
11087
11091
|
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
11088
11092
|
};
|
|
11089
11093
|
|
|
11090
|
-
var Container$
|
|
11091
|
-
var Label$1 = styled(StyledParagraph)(templateObject_2$
|
|
11092
|
-
var templateObject_1$
|
|
11094
|
+
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"])));
|
|
11095
|
+
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);
|
|
11096
|
+
var templateObject_1$8, templateObject_2$7;
|
|
11093
11097
|
|
|
11094
11098
|
var TextareaField = function (props) {
|
|
11095
11099
|
var onChange = function (value) {
|
|
@@ -11100,12 +11104,12 @@ var TextareaField = function (props) {
|
|
|
11100
11104
|
if (props.onBlur)
|
|
11101
11105
|
props.onBlur(props.name);
|
|
11102
11106
|
};
|
|
11103
|
-
return (jsxs(Container$
|
|
11107
|
+
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
11108
|
};
|
|
11105
11109
|
|
|
11106
|
-
var Container$
|
|
11107
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
11108
|
-
var templateObject_1$
|
|
11110
|
+
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"])));
|
|
11111
|
+
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);
|
|
11112
|
+
var templateObject_1$7, templateObject_2$6;
|
|
11109
11113
|
|
|
11110
11114
|
var RangeField = function (props) {
|
|
11111
11115
|
var onChange = function (value) {
|
|
@@ -11116,25 +11120,25 @@ var RangeField = function (props) {
|
|
|
11116
11120
|
if (props.onBlur)
|
|
11117
11121
|
props.onBlur(props.name);
|
|
11118
11122
|
};
|
|
11119
|
-
return (jsxs(Container$
|
|
11123
|
+
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
11124
|
};
|
|
11121
11125
|
|
|
11122
11126
|
var FeedbackColors = {
|
|
11123
11127
|
success: theme.colors.green.base,
|
|
11124
11128
|
error: theme.colors.red.base,
|
|
11125
11129
|
};
|
|
11126
|
-
var FieldWrapper = styled.div(templateObject_1$
|
|
11130
|
+
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
11131
|
var status = _a.status;
|
|
11128
11132
|
return FeedbackColors[status];
|
|
11129
11133
|
});
|
|
11130
|
-
var FeedbackWrapper = styled.div(templateObject_2$
|
|
11134
|
+
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
11135
|
var status = _a.status;
|
|
11132
11136
|
return FeedbackColors[status];
|
|
11133
11137
|
}, function (_a) {
|
|
11134
11138
|
var status = _a.status;
|
|
11135
11139
|
return FeedbackColors[status];
|
|
11136
11140
|
});
|
|
11137
|
-
var templateObject_1$
|
|
11141
|
+
var templateObject_1$6, templateObject_2$5;
|
|
11138
11142
|
|
|
11139
11143
|
var WithValidation = function (_a) {
|
|
11140
11144
|
var status = _a.status, message = _a.message, children = _a.children;
|
|
@@ -11147,10 +11151,10 @@ var WithValidation = function (_a) {
|
|
|
11147
11151
|
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
11152
|
};
|
|
11149
11153
|
|
|
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$
|
|
11154
|
+
var FormWrapper = styled.form(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1([""], [""])));
|
|
11155
|
+
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);
|
|
11156
|
+
var ButtonWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
11157
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4;
|
|
11154
11158
|
|
|
11155
11159
|
var Form = forwardRef(function (props, ref) {
|
|
11156
11160
|
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
@@ -11333,7 +11337,7 @@ var Form = forwardRef(function (props, ref) {
|
|
|
11333
11337
|
}) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
11334
11338
|
});
|
|
11335
11339
|
|
|
11336
|
-
var Container$
|
|
11340
|
+
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
11341
|
var color = _a.color, active = _a.active;
|
|
11338
11342
|
if (active)
|
|
11339
11343
|
return theme.colors[color].dark;
|
|
@@ -11357,20 +11361,20 @@ var Container$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeT
|
|
|
11357
11361
|
return theme.colors[color].base;
|
|
11358
11362
|
return "";
|
|
11359
11363
|
});
|
|
11360
|
-
var templateObject_1$
|
|
11364
|
+
var templateObject_1$4;
|
|
11361
11365
|
|
|
11362
11366
|
var Key = function (props) {
|
|
11363
11367
|
var _a;
|
|
11364
|
-
return (jsx$1(Container$
|
|
11368
|
+
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
11369
|
};
|
|
11366
11370
|
|
|
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$
|
|
11371
|
+
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"])));
|
|
11372
|
+
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"])));
|
|
11373
|
+
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"])));
|
|
11374
|
+
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"])));
|
|
11375
|
+
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"])));
|
|
11376
|
+
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"])));
|
|
11377
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$1;
|
|
11374
11378
|
|
|
11375
11379
|
var Keyboard = function (props) {
|
|
11376
11380
|
var _a = useState(), keys = _a[0], setKeys = _a[1];
|
|
@@ -11394,7 +11398,7 @@ var Keyboard = function (props) {
|
|
|
11394
11398
|
}, [props.keys]);
|
|
11395
11399
|
if (!keys)
|
|
11396
11400
|
return null;
|
|
11397
|
-
return (jsxs(Container$
|
|
11401
|
+
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
11402
|
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
11403
|
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
11404
|
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 +11446,15 @@ var Keyboard = function (props) {
|
|
|
11442
11446
|
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
11447
|
};
|
|
11444
11448
|
|
|
11445
|
-
var Mask = styled.div(templateObject_1$
|
|
11446
|
-
var CardWrapper = styled.div(templateObject_2$
|
|
11449
|
+
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"])));
|
|
11450
|
+
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
11451
|
var width = _a.width;
|
|
11448
11452
|
return (width ? "".concat(width, "px") : "720px");
|
|
11449
11453
|
});
|
|
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$
|
|
11454
|
+
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);
|
|
11455
|
+
var ChildrenWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
11456
|
+
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);
|
|
11457
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
11454
11458
|
|
|
11455
11459
|
var Modal = function (props) {
|
|
11456
11460
|
var _a = useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -11466,20 +11470,20 @@ var Modal = function (props) {
|
|
|
11466
11470
|
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
11471
|
};
|
|
11468
11472
|
|
|
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) {
|
|
11473
|
+
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
11474
|
var passed = _a.passed;
|
|
11471
11475
|
return passed ? theme.colors.green.base : theme.colors.red.base;
|
|
11472
11476
|
}, 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) {
|
|
11477
|
+
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"])));
|
|
11478
|
+
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
11479
|
var value = _a.value;
|
|
11476
11480
|
return "".concat(value, "%");
|
|
11477
11481
|
});
|
|
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) {
|
|
11482
|
+
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
11483
|
var value = _a.value, width = _a.width;
|
|
11480
11484
|
return "calc(".concat(value, "% - ").concat(width / 2, "px)");
|
|
11481
11485
|
}, theme.colors.blue.darker);
|
|
11482
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
11486
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
11483
11487
|
|
|
11484
11488
|
var Result = function (props) {
|
|
11485
11489
|
var ref = useRef(null);
|
|
@@ -11489,8 +11493,31 @@ var Result = function (props) {
|
|
|
11489
11493
|
var _a;
|
|
11490
11494
|
setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
11491
11495
|
}, [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] }))] })] }))] })));
|
|
11496
|
+
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] }))] })] }))] })));
|
|
11497
|
+
};
|
|
11498
|
+
|
|
11499
|
+
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 overflow: hidden;\n box-shadow: 0 0 0 1px ", ";\n"], ["\n width: 100%;\n border-collapse: collapse;\n border-radius: 6px;\n border-style: hidden;\n overflow: hidden;\n box-shadow: 0 0 0 1px ", ";\n"])), theme.colors.lightGray.dark);
|
|
11500
|
+
var TableHead = styled.thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1([""], [""])));
|
|
11501
|
+
var TableBody = styled.tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
|
|
11502
|
+
styled.tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
|
|
11503
|
+
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"])));
|
|
11504
|
+
var TableRow = styled.tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"], ["\n height: 50px;\n border-bottom: 1px solid ", ";\n\n :nth-child(odd) {\n background: ", ";\n }\n :nth-child(even) {\n background: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.lightGray.base);
|
|
11505
|
+
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);
|
|
11506
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
11507
|
+
|
|
11508
|
+
var Table = function (_a) {
|
|
11509
|
+
var columns = _a.columns, data = _a.data;
|
|
11510
|
+
return (jsxs(Container, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a) {
|
|
11511
|
+
var title = _a.title, dataIndex = _a.dataIndex;
|
|
11512
|
+
return (jsx$1(ColumnTitle, { children: jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
|
|
11513
|
+
}) }) }), jsx$1(TableBody, { children: data.map(function (row, index) {
|
|
11514
|
+
return (jsx$1(TableRow, { children: columns.map(function (_a, index) {
|
|
11515
|
+
var dataIndex = _a.dataIndex, render = _a.render;
|
|
11516
|
+
var data = row[dataIndex];
|
|
11517
|
+
return (jsx$1(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
|
|
11518
|
+
}) }, "row-".concat(index)));
|
|
11519
|
+
}) })] }));
|
|
11493
11520
|
};
|
|
11494
11521
|
|
|
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 };
|
|
11522
|
+
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
11523
|
//# sourceMappingURL=index.es.js.map
|