@typeolymp/ui-components 2.1.10 → 2.1.12
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/styles.d.ts +0 -1
- package/build/index.es.js +46 -87
- package/build/index.es.js.map +1 -1
- package/build/index.js +46 -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.js
CHANGED
|
@@ -95,15 +95,11 @@ var theme = {
|
|
|
95
95
|
button: {
|
|
96
96
|
small: {
|
|
97
97
|
height: "40px",
|
|
98
|
-
heightActive: "38px",
|
|
99
98
|
fontSize: "16px",
|
|
100
|
-
marginTopActive: "2px",
|
|
101
99
|
},
|
|
102
100
|
medium: {
|
|
103
101
|
height: "50px",
|
|
104
|
-
heightActive: "47.5px",
|
|
105
102
|
fontSize: "20px",
|
|
106
|
-
marginTopActive: "2.5px",
|
|
107
103
|
},
|
|
108
104
|
},
|
|
109
105
|
heading: {
|
|
@@ -3474,7 +3470,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3474
3470
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3475
3471
|
_this.style = function (i) {
|
|
3476
3472
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3477
|
-
return react_1.css(templateObject_2$
|
|
3473
|
+
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");
|
|
3478
3474
|
};
|
|
3479
3475
|
return _this;
|
|
3480
3476
|
}
|
|
@@ -3489,7 +3485,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3489
3485
|
return Loader;
|
|
3490
3486
|
}(React$2.PureComponent));
|
|
3491
3487
|
var _default$1 = BeatLoader.default = Loader;
|
|
3492
|
-
var templateObject_1$W, templateObject_2$
|
|
3488
|
+
var templateObject_1$W, templateObject_2$D;
|
|
3493
3489
|
|
|
3494
3490
|
var Wrapper$a = styled__default["default"].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) {
|
|
3495
3491
|
var size = _a.size;
|
|
@@ -3602,7 +3598,7 @@ var icons = {
|
|
|
3602
3598
|
};
|
|
3603
3599
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$a, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3604
3600
|
|
|
3605
|
-
var StyledButton = styled__default["default"].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:
|
|
3601
|
+
var StyledButton = styled__default["default"].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) {
|
|
3606
3602
|
var fluid = _a.fluid;
|
|
3607
3603
|
return (fluid ? "100%" : "fit-content");
|
|
3608
3604
|
}, function (_a) {
|
|
@@ -3632,11 +3628,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$U || (temp
|
|
|
3632
3628
|
case "red":
|
|
3633
3629
|
return "inset 0 -3px 0 ".concat(theme.colors.red.dark);
|
|
3634
3630
|
case "white":
|
|
3635
|
-
return "0 3px 0 "
|
|
3631
|
+
return "inset 0 -3px 0 #e4e4e4";
|
|
3636
3632
|
}
|
|
3637
3633
|
}, function (_a) {
|
|
3638
3634
|
var color = _a.color;
|
|
3639
|
-
return color === "white" ? "
|
|
3635
|
+
return color === "white" ? "1px solid #e4e4e4" : "none";
|
|
3640
3636
|
}, function (_a) {
|
|
3641
3637
|
var color = _a.color;
|
|
3642
3638
|
return color === "white"
|
|
@@ -3646,44 +3642,29 @@ var StyledButton = styled__default["default"].button(templateObject_1$U || (temp
|
|
|
3646
3642
|
var size = _a.size;
|
|
3647
3643
|
return !size ? theme.button.medium.fontSize : theme.button[size].fontSize;
|
|
3648
3644
|
}, function (_a) {
|
|
3649
|
-
var
|
|
3650
|
-
return
|
|
3651
|
-
|
|
3652
|
-
|
|
3645
|
+
var color = _a.color;
|
|
3646
|
+
return (color !== "white" ? 0.85 : 1);
|
|
3647
|
+
}, function (_a) {
|
|
3648
|
+
var color = _a.color;
|
|
3649
|
+
return color === "white" ? theme.colors.lightGray.base : "";
|
|
3653
3650
|
}, function (_a) {
|
|
3654
3651
|
var size = _a.size;
|
|
3655
3652
|
return !size
|
|
3656
|
-
? theme.button.medium.
|
|
3657
|
-
: theme.button[size].
|
|
3653
|
+
? "calc(".concat(theme.button.medium.height, " - 3px)")
|
|
3654
|
+
: "calc(".concat(theme.button[size].height, " - 3px)");
|
|
3658
3655
|
});
|
|
3659
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3656
|
+
var DisabledButton = styled__default["default"](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) {
|
|
3660
3657
|
var size = _a.size;
|
|
3661
3658
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3662
3659
|
});
|
|
3663
|
-
var
|
|
3664
|
-
var size = _a.size;
|
|
3665
|
-
return !size
|
|
3666
|
-
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
3667
|
-
: "calc(".concat(theme.button[size].height, " - 2.5px)");
|
|
3668
|
-
}, function (_a) {
|
|
3669
|
-
var size = _a.size;
|
|
3670
|
-
return !size
|
|
3671
|
-
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
3672
|
-
: "calc(".concat(theme.button[size].height, " - 2.5px)");
|
|
3673
|
-
}, function (_a) {
|
|
3674
|
-
var size = _a.size;
|
|
3675
|
-
return !size
|
|
3676
|
-
? theme.button.medium.marginTopActive
|
|
3677
|
-
: theme.button[size].marginTopActive;
|
|
3678
|
-
});
|
|
3679
|
-
var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3660
|
+
var LoaderWrapper = styled__default["default"].div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
3680
3661
|
var width = _a.width;
|
|
3681
3662
|
return "".concat(width, "px");
|
|
3682
3663
|
}, function (_a) {
|
|
3683
3664
|
var size = _a.size;
|
|
3684
3665
|
return (size === "small" ? "3px" : "");
|
|
3685
3666
|
});
|
|
3686
|
-
var templateObject_1$U, templateObject_2$
|
|
3667
|
+
var templateObject_1$U, templateObject_2$C, templateObject_3$g;
|
|
3687
3668
|
|
|
3688
3669
|
var StyledSpacer = styled__default["default"].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) {
|
|
3689
3670
|
var horizontal = _a.horizontal;
|
|
@@ -3735,9 +3716,8 @@ var Button = React$3.forwardRef(function (_a, ref) {
|
|
|
3735
3716
|
if (disabled) {
|
|
3736
3717
|
return (jsxRuntime.jsx(DisabledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && renderIcon({ color: "lightGray" }), jsxRuntime.jsx("span", { children: label })] }) })));
|
|
3737
3718
|
}
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsxRuntime.jsx(Loader, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && renderIcon({ color: "white" }), jsxRuntime.jsx("span", { children: label })] })) })));
|
|
3719
|
+
return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsxRuntime.jsx(Loader, { dark: color === "white" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon &&
|
|
3720
|
+
renderIcon({ color: color === "white" ? "gray" : "white" }), jsxRuntime.jsx("span", { children: label })] })) })));
|
|
3741
3721
|
});
|
|
3742
3722
|
|
|
3743
3723
|
var StyledCheckbox = styled__default["default"].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) {
|
|
@@ -4207,7 +4187,7 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$O || (templa
|
|
|
4207
4187
|
var templateObject_1$O;
|
|
4208
4188
|
|
|
4209
4189
|
var Container$p = styled__default["default"].div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4210
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4190
|
+
var InputIconWrapper = styled__default["default"].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) {
|
|
4211
4191
|
var size = _a.size;
|
|
4212
4192
|
switch (size) {
|
|
4213
4193
|
case "small":
|
|
@@ -4278,7 +4258,7 @@ var Helper = styled__default["default"](StyledParagraph)(templateObject_6$3 || (
|
|
|
4278
4258
|
var isOk = _a.isOk;
|
|
4279
4259
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4280
4260
|
}, fadeIn);
|
|
4281
|
-
var templateObject_1$N, templateObject_2$
|
|
4261
|
+
var templateObject_1$N, templateObject_2$B, templateObject_3$f, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4282
4262
|
|
|
4283
4263
|
var expressions = {};
|
|
4284
4264
|
|
|
@@ -8032,7 +8012,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$L || (templateOb
|
|
|
8032
8012
|
var disabled = _a.disabled;
|
|
8033
8013
|
return (disabled ? "49.5px" : "");
|
|
8034
8014
|
});
|
|
8035
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
8015
|
+
var StyledInputNumber = styled__default["default"].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) {
|
|
8036
8016
|
var disabled = _a.disabled;
|
|
8037
8017
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8038
8018
|
}, function (_a) {
|
|
@@ -8045,7 +8025,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$B || (
|
|
|
8045
8025
|
var disabled = _a.disabled;
|
|
8046
8026
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8047
8027
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8048
|
-
var templateObject_1$L, templateObject_2$
|
|
8028
|
+
var templateObject_1$L, templateObject_2$A;
|
|
8049
8029
|
|
|
8050
8030
|
var Number$1 = function (props) {
|
|
8051
8031
|
var inputRef = React$3.useRef(null);
|
|
@@ -8192,7 +8172,7 @@ var Wrapper$5 = styled__default["default"].div(templateObject_1$I || (templateOb
|
|
|
8192
8172
|
var disabled = _a.disabled;
|
|
8193
8173
|
return (disabled ? "not-allowed" : "pointer");
|
|
8194
8174
|
});
|
|
8195
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
8175
|
+
var StyledSelect = styled__default["default"].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) {
|
|
8196
8176
|
var disabled = _a.disabled;
|
|
8197
8177
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8198
8178
|
}, function (_a) {
|
|
@@ -8205,7 +8185,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$A || (temp
|
|
|
8205
8185
|
var isChanged = _a.isChanged;
|
|
8206
8186
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8207
8187
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8208
|
-
var templateObject_1$I, templateObject_2$
|
|
8188
|
+
var templateObject_1$I, templateObject_2$z;
|
|
8209
8189
|
|
|
8210
8190
|
var Select = function (props) {
|
|
8211
8191
|
var _a;
|
|
@@ -8427,7 +8407,7 @@ var Container$m = styled__default["default"].div(templateObject_1$C || (template
|
|
|
8427
8407
|
return theme.colors.blue.base;
|
|
8428
8408
|
}
|
|
8429
8409
|
});
|
|
8430
|
-
var Action = styled__default["default"].div(templateObject_2$
|
|
8410
|
+
var Action = styled__default["default"].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) {
|
|
8431
8411
|
var type = _a.type;
|
|
8432
8412
|
switch (type) {
|
|
8433
8413
|
default:
|
|
@@ -8439,7 +8419,7 @@ var Action = styled__default["default"].div(templateObject_2$z || (templateObjec
|
|
|
8439
8419
|
return theme.colors.blue.dark;
|
|
8440
8420
|
}
|
|
8441
8421
|
});
|
|
8442
|
-
var templateObject_1$C, templateObject_2$
|
|
8422
|
+
var templateObject_1$C, templateObject_2$y;
|
|
8443
8423
|
|
|
8444
8424
|
var Alert = function (props) {
|
|
8445
8425
|
var _a = React$3.useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8474,12 +8454,12 @@ var StyledCard = styled__default["default"].div(templateObject_1$B || (templateO
|
|
|
8474
8454
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8475
8455
|
: "";
|
|
8476
8456
|
});
|
|
8477
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
8457
|
+
var Ellipse = styled__default["default"].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) {
|
|
8478
8458
|
var color = _a.color;
|
|
8479
8459
|
return color ? theme.colors[color].light : "";
|
|
8480
8460
|
});
|
|
8481
8461
|
var Content = styled__default["default"].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"])));
|
|
8482
|
-
var templateObject_1$B, templateObject_2$
|
|
8462
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$e;
|
|
8483
8463
|
|
|
8484
8464
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
8485
8465
|
|
|
@@ -14729,13 +14709,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14729
14709
|
htmlReactParser.Text;
|
|
14730
14710
|
|
|
14731
14711
|
var Fieldset$1 = styled__default["default"].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"])));
|
|
14732
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
14712
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14733
14713
|
var CheckboxWrapper = styled__default["default"].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"])));
|
|
14734
14714
|
var Label$b = styled__default["default"](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) {
|
|
14735
14715
|
var weight = _a.weight;
|
|
14736
14716
|
return weight || 500;
|
|
14737
14717
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14738
|
-
var templateObject_1$A, templateObject_2$
|
|
14718
|
+
var templateObject_1$A, templateObject_2$w, templateObject_3$d, templateObject_4$6;
|
|
14739
14719
|
|
|
14740
14720
|
var Checkboxes = function (props) {
|
|
14741
14721
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14759,11 +14739,11 @@ var Checkboxes = function (props) {
|
|
|
14759
14739
|
};
|
|
14760
14740
|
|
|
14761
14741
|
var Container$l = styled__default["default"].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);
|
|
14762
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
14742
|
+
var Item = styled__default["default"].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) {
|
|
14763
14743
|
var isOpen = _a.isOpen;
|
|
14764
14744
|
return (isOpen ? "" : "none");
|
|
14765
14745
|
}, theme.colors.lightGray.dark);
|
|
14766
|
-
var templateObject_1$z, templateObject_2$
|
|
14746
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14767
14747
|
|
|
14768
14748
|
var Collapse = function (props) {
|
|
14769
14749
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14782,11 +14762,11 @@ var Collapse = function (props) {
|
|
|
14782
14762
|
};
|
|
14783
14763
|
|
|
14784
14764
|
var Wrapper$3 = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14785
|
-
var Value = styled__default["default"].div(templateObject_2$
|
|
14765
|
+
var Value = styled__default["default"].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) {
|
|
14786
14766
|
var contrast = _a.contrast;
|
|
14787
14767
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14788
14768
|
}, theme.colors.darkGray.base);
|
|
14789
|
-
var templateObject_1$y, templateObject_2$
|
|
14769
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14790
14770
|
|
|
14791
14771
|
var Countdown = function (_a) {
|
|
14792
14772
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14814,8 +14794,8 @@ var Countdown = function (_a) {
|
|
|
14814
14794
|
};
|
|
14815
14795
|
|
|
14816
14796
|
var Container$k = styled__default["default"].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);
|
|
14817
|
-
var Data = styled__default["default"].div(templateObject_2$
|
|
14818
|
-
var templateObject_1$x, templateObject_2$
|
|
14797
|
+
var Data = styled__default["default"].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"])));
|
|
14798
|
+
var templateObject_1$x, templateObject_2$t;
|
|
14819
14799
|
|
|
14820
14800
|
var DataSummary = function (_a) {
|
|
14821
14801
|
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
@@ -14825,8 +14805,8 @@ var DataSummary = function (_a) {
|
|
|
14825
14805
|
};
|
|
14826
14806
|
|
|
14827
14807
|
var Container$j = styled__default["default"].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"])));
|
|
14828
|
-
var Label$a = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
14829
|
-
var templateObject_1$w, templateObject_2$
|
|
14808
|
+
var Label$a = styled__default["default"](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);
|
|
14809
|
+
var templateObject_1$w, templateObject_2$s;
|
|
14830
14810
|
|
|
14831
14811
|
var DateInputField = function (props) {
|
|
14832
14812
|
var onChange = function (value) {
|
|
@@ -14851,7 +14831,7 @@ var generateRandomString = function (length) {
|
|
|
14851
14831
|
};
|
|
14852
14832
|
|
|
14853
14833
|
var ButtonWrapper$1 = styled__default["default"].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"])));
|
|
14854
|
-
var Container$i = styled__default["default"].div(templateObject_2$
|
|
14834
|
+
var Container$i = styled__default["default"].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) {
|
|
14855
14835
|
var isVisible = _a.isVisible;
|
|
14856
14836
|
return (isVisible ? "100%" : "0%");
|
|
14857
14837
|
}, function (_a) {
|
|
@@ -14865,7 +14845,7 @@ var Container$i = styled__default["default"].div(templateObject_2$s || (template
|
|
|
14865
14845
|
return (isVisible ? "all" : "none");
|
|
14866
14846
|
});
|
|
14867
14847
|
var MenuItem = styled__default["default"].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);
|
|
14868
|
-
var templateObject_1$v, templateObject_2$
|
|
14848
|
+
var templateObject_1$v, templateObject_2$r, templateObject_3$c;
|
|
14869
14849
|
|
|
14870
14850
|
var DropdownButton = function (props) {
|
|
14871
14851
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsxRuntime.jsx(ButtonWrapper$1, { children: jsxRuntime.jsx(Button, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
|
|
@@ -17454,7 +17434,7 @@ function reducer$1(state, action) {
|
|
|
17454
17434
|
function noop$3() {}
|
|
17455
17435
|
|
|
17456
17436
|
var Container$h = styled__default["default"].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"])));
|
|
17457
|
-
var DropZone = styled__default["default"].div(templateObject_2$
|
|
17437
|
+
var DropZone = styled__default["default"].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) {
|
|
17458
17438
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17459
17439
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17460
17440
|
if (isDragAccept)
|
|
@@ -17474,7 +17454,7 @@ var DropZone = styled__default["default"].div(templateObject_2$r || (templateObj
|
|
|
17474
17454
|
return theme.colors.lightGray.base;
|
|
17475
17455
|
});
|
|
17476
17456
|
var FileList = styled__default["default"].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"])));
|
|
17477
|
-
var templateObject_1$u, templateObject_2$
|
|
17457
|
+
var templateObject_1$u, templateObject_2$q, templateObject_3$b;
|
|
17478
17458
|
|
|
17479
17459
|
var FileUpload = function (_a) {
|
|
17480
17460
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17494,10 +17474,7 @@ var FileUpload = function (_a) {
|
|
|
17494
17474
|
}), { children: [jsxRuntime.jsx("input", __assign$2({}, getInputProps())), jsxRuntime.jsx(Icon, { type: "fileArrow", size: "large" }), jsxRuntime.jsx(Spacer, { vertical: 15 }), !isDragActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Paragraph, { children: translations[locale]["or"] }), jsxRuntime.jsx(Spacer, { vertical: 10 }), jsxRuntime.jsx(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsxRuntime.jsx(FileList, { children: files.map(function (file, index) { return (jsxRuntime.jsx(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17495
17475
|
};
|
|
17496
17476
|
|
|
17497
|
-
var StyledIconButton = styled__default["default"](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
|
|
17498
|
-
var size = _a.size;
|
|
17499
|
-
return (size === "small" ? "30px" : "40px");
|
|
17500
|
-
}, function (_a) {
|
|
17477
|
+
var StyledIconButton = styled__default["default"](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) {
|
|
17501
17478
|
var size = _a.size;
|
|
17502
17479
|
return (size === "small" ? "30px" : "40px");
|
|
17503
17480
|
}, function (_a) {
|
|
@@ -17507,37 +17484,19 @@ var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1
|
|
|
17507
17484
|
var size = _a.size;
|
|
17508
17485
|
return (size === "small" ? "30px" : "40px");
|
|
17509
17486
|
}, function (_a) {
|
|
17510
|
-
var size = _a.size;
|
|
17511
|
-
return (size === "small" ? "28px" : "38px");
|
|
17512
|
-
}, function (_a) {
|
|
17513
|
-
var size = _a.size;
|
|
17514
|
-
return (size === "small" ? "28px" : "38px");
|
|
17515
|
-
});
|
|
17516
|
-
var GhostIconButton = styled__default["default"](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) {
|
|
17517
17487
|
var size = _a.size;
|
|
17518
17488
|
return (size === "small" ? "30px" : "40px");
|
|
17519
17489
|
}, function (_a) {
|
|
17520
17490
|
var size = _a.size;
|
|
17521
|
-
return (size === "small" ? "
|
|
17491
|
+
return (size === "small" ? "27px" : "37px");
|
|
17522
17492
|
}, function (_a) {
|
|
17523
17493
|
var size = _a.size;
|
|
17524
|
-
return (size === "small" ? "
|
|
17525
|
-
}, function (_a) {
|
|
17526
|
-
var size = _a.size;
|
|
17527
|
-
return (size === "small" ? "28px" : "38px");
|
|
17528
|
-
}, function (_a) {
|
|
17529
|
-
var size = _a.size;
|
|
17530
|
-
return (size === "small" ? "30px" : "40px");
|
|
17531
|
-
}, function (_a) {
|
|
17532
|
-
var size = _a.size;
|
|
17533
|
-
return (size === "small" ? "30px" : "40px");
|
|
17494
|
+
return (size === "small" ? "27px" : "37px");
|
|
17534
17495
|
});
|
|
17535
|
-
var templateObject_1$t
|
|
17496
|
+
var templateObject_1$t;
|
|
17536
17497
|
|
|
17537
17498
|
var IconButton = function (props) {
|
|
17538
|
-
|
|
17539
|
-
return (jsxRuntime.jsx(GhostIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "gray" }) })));
|
|
17540
|
-
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17499
|
+
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: props.color === "white" ? "gray" : "white" }) })));
|
|
17541
17500
|
};
|
|
17542
17501
|
|
|
17543
17502
|
var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|