@typeolymp/ui-components 2.1.11 → 2.1.13
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/Button/styles.d.ts +0 -1
- package/build/components/molecules/IconButton/index.d.ts +1 -0
- package/build/components/molecules/IconButton/styles.d.ts +0 -1
- package/build/index.es.js +40 -87
- package/build/index.es.js.map +1 -1
- package/build/index.js +40 -87
- package/build/index.js.map +1 -1
- package/build/utils/theme/types.d.ts +0 -2
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -68,15 +68,11 @@ var theme = {
|
|
|
68
68
|
button: {
|
|
69
69
|
small: {
|
|
70
70
|
height: "40px",
|
|
71
|
-
heightActive: "38px",
|
|
72
71
|
fontSize: "16px",
|
|
73
|
-
marginTopActive: "2px",
|
|
74
72
|
},
|
|
75
73
|
medium: {
|
|
76
74
|
height: "50px",
|
|
77
|
-
heightActive: "47.5px",
|
|
78
75
|
fontSize: "20px",
|
|
79
|
-
marginTopActive: "2.5px",
|
|
80
76
|
},
|
|
81
77
|
},
|
|
82
78
|
heading: {
|
|
@@ -3447,7 +3443,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3447
3443
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3448
3444
|
_this.style = function (i) {
|
|
3449
3445
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3450
|
-
return react_1.css(templateObject_2$
|
|
3446
|
+
return react_1.css(templateObject_2$D || (templateObject_2$D = __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");
|
|
3451
3447
|
};
|
|
3452
3448
|
return _this;
|
|
3453
3449
|
}
|
|
@@ -3462,7 +3458,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3462
3458
|
return Loader;
|
|
3463
3459
|
}(React$2.PureComponent));
|
|
3464
3460
|
var _default$1 = BeatLoader.default = Loader;
|
|
3465
|
-
var templateObject_1$W, templateObject_2$
|
|
3461
|
+
var templateObject_1$W, templateObject_2$D;
|
|
3466
3462
|
|
|
3467
3463
|
var Wrapper$a = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
3468
3464
|
var size = _a.size;
|
|
@@ -3575,7 +3571,7 @@ var icons = {
|
|
|
3575
3571
|
};
|
|
3576
3572
|
var Icon = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3577
3573
|
|
|
3578
|
-
var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n
|
|
3574
|
+
var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n position: relative;\n top: 3px;\n margin-bottom: 3px;\n box-shadow: none;\n height: ", "\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n position: relative;\n top: 3px;\n margin-bottom: 3px;\n box-shadow: none;\n height: ", "\n"])), function (_a) {
|
|
3579
3575
|
var fluid = _a.fluid;
|
|
3580
3576
|
return (fluid ? "100%" : "fit-content");
|
|
3581
3577
|
}, function (_a) {
|
|
@@ -3605,7 +3601,7 @@ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __m
|
|
|
3605
3601
|
case "red":
|
|
3606
3602
|
return "inset 0 -3px 0 ".concat(theme.colors.red.dark);
|
|
3607
3603
|
case "white":
|
|
3608
|
-
return "0
|
|
3604
|
+
return "inset 0 -3px 0 #e4e4e4";
|
|
3609
3605
|
}
|
|
3610
3606
|
}, function (_a) {
|
|
3611
3607
|
var color = _a.color;
|
|
@@ -3627,42 +3623,21 @@ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __m
|
|
|
3627
3623
|
}, function (_a) {
|
|
3628
3624
|
var size = _a.size;
|
|
3629
3625
|
return !size
|
|
3630
|
-
? theme.button.medium.
|
|
3631
|
-
: theme.button[size].
|
|
3632
|
-
}, function (_a) {
|
|
3633
|
-
var size = _a.size;
|
|
3634
|
-
return !size
|
|
3635
|
-
? theme.button.medium.heightActive
|
|
3636
|
-
: theme.button[size].heightActive;
|
|
3626
|
+
? "calc(".concat(theme.button.medium.height, " - 3px)")
|
|
3627
|
+
: "calc(".concat(theme.button[size].height, " - 3px)");
|
|
3637
3628
|
});
|
|
3638
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3629
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
3639
3630
|
var size = _a.size;
|
|
3640
3631
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3641
3632
|
});
|
|
3642
|
-
var
|
|
3643
|
-
var size = _a.size;
|
|
3644
|
-
return !size
|
|
3645
|
-
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
3646
|
-
: "calc(".concat(theme.button[size].height, " - 2.5px)");
|
|
3647
|
-
}, function (_a) {
|
|
3648
|
-
var size = _a.size;
|
|
3649
|
-
return !size
|
|
3650
|
-
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
3651
|
-
: "calc(".concat(theme.button[size].height, " - 2.5px)");
|
|
3652
|
-
}, function (_a) {
|
|
3653
|
-
var size = _a.size;
|
|
3654
|
-
return !size
|
|
3655
|
-
? theme.button.medium.marginTopActive
|
|
3656
|
-
: theme.button[size].marginTopActive;
|
|
3657
|
-
});
|
|
3658
|
-
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) {
|
|
3633
|
+
var LoaderWrapper = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3659
3634
|
var width = _a.width;
|
|
3660
3635
|
return "".concat(width, "px");
|
|
3661
3636
|
}, function (_a) {
|
|
3662
3637
|
var size = _a.size;
|
|
3663
3638
|
return (size === "small" ? "3px" : "");
|
|
3664
3639
|
});
|
|
3665
|
-
var templateObject_1$U, templateObject_2$
|
|
3640
|
+
var templateObject_1$U, templateObject_2$C, templateObject_3$g;
|
|
3666
3641
|
|
|
3667
3642
|
var StyledSpacer = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n min-width: ", ";\n min-height: ", ";\n"], ["\n min-width: ", ";\n min-height: ", ";\n"])), function (_a) {
|
|
3668
3643
|
var horizontal = _a.horizontal;
|
|
@@ -3714,9 +3689,8 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
3714
3689
|
if (disabled) {
|
|
3715
3690
|
return (jsx$1(DisabledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxs(Fragment$1, { children: [icon && renderIcon({ color: "lightGray" }), jsx$1("span", { children: label })] }) })));
|
|
3716
3691
|
}
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
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, {})) : (jsxs(Fragment$1, { children: [icon && renderIcon({ color: "white" }), jsx$1("span", { children: label })] })) })));
|
|
3692
|
+
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, { dark: color === "white" })) : (jsxs(Fragment$1, { children: [icon &&
|
|
3693
|
+
renderIcon({ color: color === "white" ? "gray" : "white" }), jsx$1("span", { children: label })] })) })));
|
|
3720
3694
|
});
|
|
3721
3695
|
|
|
3722
3696
|
var StyledCheckbox = styled.div(templateObject_1$S || (templateObject_1$S = __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) {
|
|
@@ -4186,7 +4160,7 @@ var StyledParagraph = styled.p(templateObject_1$O || (templateObject_1$O = __mak
|
|
|
4186
4160
|
var templateObject_1$O;
|
|
4187
4161
|
|
|
4188
4162
|
var Container$p = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4189
|
-
var InputIconWrapper = styled.div(templateObject_2$
|
|
4163
|
+
var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"])), function (_a) {
|
|
4190
4164
|
var size = _a.size;
|
|
4191
4165
|
switch (size) {
|
|
4192
4166
|
case "small":
|
|
@@ -4257,7 +4231,7 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
|
|
|
4257
4231
|
var isOk = _a.isOk;
|
|
4258
4232
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4259
4233
|
}, fadeIn);
|
|
4260
|
-
var templateObject_1$N, templateObject_2$
|
|
4234
|
+
var templateObject_1$N, templateObject_2$B, templateObject_3$f, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4261
4235
|
|
|
4262
4236
|
var expressions = {};
|
|
4263
4237
|
|
|
@@ -8011,7 +7985,7 @@ var Wrapper$6 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTem
|
|
|
8011
7985
|
var disabled = _a.disabled;
|
|
8012
7986
|
return (disabled ? "49.5px" : "");
|
|
8013
7987
|
});
|
|
8014
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
7988
|
+
var StyledInputNumber = styled.input(templateObject_2$A || (templateObject_2$A = __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) {
|
|
8015
7989
|
var disabled = _a.disabled;
|
|
8016
7990
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8017
7991
|
}, function (_a) {
|
|
@@ -8024,7 +7998,7 @@ var StyledInputNumber = styled.input(templateObject_2$B || (templateObject_2$B =
|
|
|
8024
7998
|
var disabled = _a.disabled;
|
|
8025
7999
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8026
8000
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8027
|
-
var templateObject_1$L, templateObject_2$
|
|
8001
|
+
var templateObject_1$L, templateObject_2$A;
|
|
8028
8002
|
|
|
8029
8003
|
var Number$1 = function (props) {
|
|
8030
8004
|
var inputRef = useRef(null);
|
|
@@ -8171,7 +8145,7 @@ var Wrapper$5 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTem
|
|
|
8171
8145
|
var disabled = _a.disabled;
|
|
8172
8146
|
return (disabled ? "not-allowed" : "pointer");
|
|
8173
8147
|
});
|
|
8174
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
8148
|
+
var StyledSelect = styled.select(templateObject_2$z || (templateObject_2$z = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
8175
8149
|
var disabled = _a.disabled;
|
|
8176
8150
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8177
8151
|
}, function (_a) {
|
|
@@ -8184,7 +8158,7 @@ var StyledSelect = styled.select(templateObject_2$A || (templateObject_2$A = __m
|
|
|
8184
8158
|
var isChanged = _a.isChanged;
|
|
8185
8159
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8186
8160
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8187
|
-
var templateObject_1$I, templateObject_2$
|
|
8161
|
+
var templateObject_1$I, templateObject_2$z;
|
|
8188
8162
|
|
|
8189
8163
|
var Select = function (props) {
|
|
8190
8164
|
var _a;
|
|
@@ -8406,7 +8380,7 @@ var Container$m = styled.div(templateObject_1$C || (templateObject_1$C = __makeT
|
|
|
8406
8380
|
return theme.colors.blue.base;
|
|
8407
8381
|
}
|
|
8408
8382
|
});
|
|
8409
|
-
var Action = styled.div(templateObject_2$
|
|
8383
|
+
var Action = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"], ["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
8410
8384
|
var type = _a.type;
|
|
8411
8385
|
switch (type) {
|
|
8412
8386
|
default:
|
|
@@ -8418,7 +8392,7 @@ var Action = styled.div(templateObject_2$z || (templateObject_2$z = __makeTempla
|
|
|
8418
8392
|
return theme.colors.blue.dark;
|
|
8419
8393
|
}
|
|
8420
8394
|
});
|
|
8421
|
-
var templateObject_1$C, templateObject_2$
|
|
8395
|
+
var templateObject_1$C, templateObject_2$y;
|
|
8422
8396
|
|
|
8423
8397
|
var Alert = function (props) {
|
|
8424
8398
|
var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8453,12 +8427,12 @@ var StyledCard = styled.div(templateObject_1$B || (templateObject_1$B = __makeTe
|
|
|
8453
8427
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8454
8428
|
: "";
|
|
8455
8429
|
});
|
|
8456
|
-
var Ellipse = styled.div(templateObject_2$
|
|
8430
|
+
var Ellipse = styled.div(templateObject_2$x || (templateObject_2$x = __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) {
|
|
8457
8431
|
var color = _a.color;
|
|
8458
8432
|
return color ? theme.colors[color].light : "";
|
|
8459
8433
|
});
|
|
8460
8434
|
var Content = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject$1(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
8461
|
-
var templateObject_1$B, templateObject_2$
|
|
8435
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$e;
|
|
8462
8436
|
|
|
8463
8437
|
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 })] }))); };
|
|
8464
8438
|
|
|
@@ -14708,13 +14682,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14708
14682
|
htmlReactParser.Text;
|
|
14709
14683
|
|
|
14710
14684
|
var Fieldset$1 = styled.fieldset(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
14711
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
14685
|
+
var CheckboxContainer = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14712
14686
|
var CheckboxWrapper = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
14713
14687
|
var Label$b = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
14714
14688
|
var weight = _a.weight;
|
|
14715
14689
|
return weight || 500;
|
|
14716
14690
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14717
|
-
var templateObject_1$A, templateObject_2$
|
|
14691
|
+
var templateObject_1$A, templateObject_2$w, templateObject_3$d, templateObject_4$6;
|
|
14718
14692
|
|
|
14719
14693
|
var Checkboxes = function (props) {
|
|
14720
14694
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14738,11 +14712,11 @@ var Checkboxes = function (props) {
|
|
|
14738
14712
|
};
|
|
14739
14713
|
|
|
14740
14714
|
var Container$l = styled.div(templateObject_1$z || (templateObject_1$z = __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);
|
|
14741
|
-
var Item = styled.div(templateObject_2$
|
|
14715
|
+
var Item = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
14742
14716
|
var isOpen = _a.isOpen;
|
|
14743
14717
|
return (isOpen ? "" : "none");
|
|
14744
14718
|
}, theme.colors.lightGray.dark);
|
|
14745
|
-
var templateObject_1$z, templateObject_2$
|
|
14719
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14746
14720
|
|
|
14747
14721
|
var Collapse = function (props) {
|
|
14748
14722
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14761,11 +14735,11 @@ var Collapse = function (props) {
|
|
|
14761
14735
|
};
|
|
14762
14736
|
|
|
14763
14737
|
var Wrapper$3 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14764
|
-
var Value = styled.div(templateObject_2$
|
|
14738
|
+
var Value = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
|
|
14765
14739
|
var contrast = _a.contrast;
|
|
14766
14740
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14767
14741
|
}, theme.colors.darkGray.base);
|
|
14768
|
-
var templateObject_1$y, templateObject_2$
|
|
14742
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14769
14743
|
|
|
14770
14744
|
var Countdown = function (_a) {
|
|
14771
14745
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14793,8 +14767,8 @@ var Countdown = function (_a) {
|
|
|
14793
14767
|
};
|
|
14794
14768
|
|
|
14795
14769
|
var Container$k = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"], ["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.light, theme.colors.blue.base);
|
|
14796
|
-
var Data = styled.div(templateObject_2$
|
|
14797
|
-
var templateObject_1$x, templateObject_2$
|
|
14770
|
+
var Data = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
|
|
14771
|
+
var templateObject_1$x, templateObject_2$t;
|
|
14798
14772
|
|
|
14799
14773
|
var DataSummary = function (_a) {
|
|
14800
14774
|
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
@@ -14804,8 +14778,8 @@ var DataSummary = function (_a) {
|
|
|
14804
14778
|
};
|
|
14805
14779
|
|
|
14806
14780
|
var Container$j = styled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
14807
|
-
var Label$a = styled(StyledParagraph)(templateObject_2$
|
|
14808
|
-
var templateObject_1$w, templateObject_2$
|
|
14781
|
+
var Label$a = styled(StyledParagraph)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
14782
|
+
var templateObject_1$w, templateObject_2$s;
|
|
14809
14783
|
|
|
14810
14784
|
var DateInputField = function (props) {
|
|
14811
14785
|
var onChange = function (value) {
|
|
@@ -14830,7 +14804,7 @@ var generateRandomString = function (length) {
|
|
|
14830
14804
|
};
|
|
14831
14805
|
|
|
14832
14806
|
var ButtonWrapper$1 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"], ["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"])));
|
|
14833
|
-
var Container$i = styled.div(templateObject_2$
|
|
14807
|
+
var Container$i = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"], ["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"])), function (_a) {
|
|
14834
14808
|
var isVisible = _a.isVisible;
|
|
14835
14809
|
return (isVisible ? "100%" : "0%");
|
|
14836
14810
|
}, function (_a) {
|
|
@@ -14844,7 +14818,7 @@ var Container$i = styled.div(templateObject_2$s || (templateObject_2$s = __makeT
|
|
|
14844
14818
|
return (isVisible ? "all" : "none");
|
|
14845
14819
|
});
|
|
14846
14820
|
var MenuItem = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
14847
|
-
var templateObject_1$v, templateObject_2$
|
|
14821
|
+
var templateObject_1$v, templateObject_2$r, templateObject_3$c;
|
|
14848
14822
|
|
|
14849
14823
|
var DropdownButton = function (props) {
|
|
14850
14824
|
return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
|
|
@@ -17433,7 +17407,7 @@ function reducer$1(state, action) {
|
|
|
17433
17407
|
function noop$3() {}
|
|
17434
17408
|
|
|
17435
17409
|
var Container$h = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"])));
|
|
17436
|
-
var DropZone = styled.div(templateObject_2$
|
|
17410
|
+
var DropZone = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
17437
17411
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17438
17412
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17439
17413
|
if (isDragAccept)
|
|
@@ -17453,7 +17427,7 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
|
|
|
17453
17427
|
return theme.colors.lightGray.base;
|
|
17454
17428
|
});
|
|
17455
17429
|
var FileList = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
17456
|
-
var templateObject_1$u, templateObject_2$
|
|
17430
|
+
var templateObject_1$u, templateObject_2$q, templateObject_3$b;
|
|
17457
17431
|
|
|
17458
17432
|
var FileUpload = function (_a) {
|
|
17459
17433
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17473,26 +17447,13 @@ var FileUpload = function (_a) {
|
|
|
17473
17447
|
}), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17474
17448
|
};
|
|
17475
17449
|
|
|
17476
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n
|
|
17477
|
-
var size = _a.size;
|
|
17478
|
-
return (size === "small" ? "30px" : "40px");
|
|
17479
|
-
}, function (_a) {
|
|
17480
|
-
var size = _a.size;
|
|
17481
|
-
return (size === "small" ? "30px" : "40px");
|
|
17482
|
-
}, function (_a) {
|
|
17450
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n }\n"])), function (_a) {
|
|
17483
17451
|
var size = _a.size;
|
|
17484
17452
|
return (size === "small" ? "30px" : "40px");
|
|
17485
17453
|
}, function (_a) {
|
|
17486
17454
|
var size = _a.size;
|
|
17487
17455
|
return (size === "small" ? "30px" : "40px");
|
|
17488
17456
|
}, function (_a) {
|
|
17489
|
-
var size = _a.size;
|
|
17490
|
-
return (size === "small" ? "28px" : "38px");
|
|
17491
|
-
}, function (_a) {
|
|
17492
|
-
var size = _a.size;
|
|
17493
|
-
return (size === "small" ? "28px" : "38px");
|
|
17494
|
-
});
|
|
17495
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
17496
17457
|
var size = _a.size;
|
|
17497
17458
|
return (size === "small" ? "30px" : "40px");
|
|
17498
17459
|
}, function (_a) {
|
|
@@ -17500,23 +17461,15 @@ var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_
|
|
|
17500
17461
|
return (size === "small" ? "30px" : "40px");
|
|
17501
17462
|
}, function (_a) {
|
|
17502
17463
|
var size = _a.size;
|
|
17503
|
-
return (size === "small" ? "
|
|
17504
|
-
}, function (_a) {
|
|
17505
|
-
var size = _a.size;
|
|
17506
|
-
return (size === "small" ? "28px" : "38px");
|
|
17464
|
+
return (size === "small" ? "27px" : "37px");
|
|
17507
17465
|
}, function (_a) {
|
|
17508
17466
|
var size = _a.size;
|
|
17509
|
-
return (size === "small" ? "
|
|
17510
|
-
}, function (_a) {
|
|
17511
|
-
var size = _a.size;
|
|
17512
|
-
return (size === "small" ? "30px" : "40px");
|
|
17467
|
+
return (size === "small" ? "27px" : "37px");
|
|
17513
17468
|
});
|
|
17514
|
-
var templateObject_1$t
|
|
17469
|
+
var templateObject_1$t;
|
|
17515
17470
|
|
|
17516
17471
|
var IconButton = function (props) {
|
|
17517
|
-
|
|
17518
|
-
return (jsx$1(GhostIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "gray" }) })));
|
|
17519
|
-
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17472
|
+
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: props.color === "white" ? "gray" : "white" }) })));
|
|
17520
17473
|
};
|
|
17521
17474
|
|
|
17522
17475
|
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"])));
|