@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.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: ", ";\n background-color: ", ";\n }\n\n :active {\n
|
|
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,7 +3628,7 @@ 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
|
|
3631
|
+
return "inset 0 -3px 0 #e4e4e4";
|
|
3636
3632
|
}
|
|
3637
3633
|
}, function (_a) {
|
|
3638
3634
|
var color = _a.color;
|
|
@@ -3654,42 +3650,21 @@ var StyledButton = styled__default["default"].button(templateObject_1$U || (temp
|
|
|
3654
3650
|
}, function (_a) {
|
|
3655
3651
|
var size = _a.size;
|
|
3656
3652
|
return !size
|
|
3657
|
-
? theme.button.medium.
|
|
3658
|
-
: theme.button[size].
|
|
3659
|
-
}, function (_a) {
|
|
3660
|
-
var size = _a.size;
|
|
3661
|
-
return !size
|
|
3662
|
-
? theme.button.medium.heightActive
|
|
3663
|
-
: theme.button[size].heightActive;
|
|
3653
|
+
? "calc(".concat(theme.button.medium.height, " - 3px)")
|
|
3654
|
+
: "calc(".concat(theme.button[size].height, " - 3px)");
|
|
3664
3655
|
});
|
|
3665
|
-
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) {
|
|
3666
3657
|
var size = _a.size;
|
|
3667
3658
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3668
3659
|
});
|
|
3669
|
-
var
|
|
3670
|
-
var size = _a.size;
|
|
3671
|
-
return !size
|
|
3672
|
-
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
3673
|
-
: "calc(".concat(theme.button[size].height, " - 2.5px)");
|
|
3674
|
-
}, function (_a) {
|
|
3675
|
-
var size = _a.size;
|
|
3676
|
-
return !size
|
|
3677
|
-
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
3678
|
-
: "calc(".concat(theme.button[size].height, " - 2.5px)");
|
|
3679
|
-
}, function (_a) {
|
|
3680
|
-
var size = _a.size;
|
|
3681
|
-
return !size
|
|
3682
|
-
? theme.button.medium.marginTopActive
|
|
3683
|
-
: theme.button[size].marginTopActive;
|
|
3684
|
-
});
|
|
3685
|
-
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) {
|
|
3686
3661
|
var width = _a.width;
|
|
3687
3662
|
return "".concat(width, "px");
|
|
3688
3663
|
}, function (_a) {
|
|
3689
3664
|
var size = _a.size;
|
|
3690
3665
|
return (size === "small" ? "3px" : "");
|
|
3691
3666
|
});
|
|
3692
|
-
var templateObject_1$U, templateObject_2$
|
|
3667
|
+
var templateObject_1$U, templateObject_2$C, templateObject_3$g;
|
|
3693
3668
|
|
|
3694
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) {
|
|
3695
3670
|
var horizontal = _a.horizontal;
|
|
@@ -3741,9 +3716,8 @@ var Button = React$3.forwardRef(function (_a, ref) {
|
|
|
3741
3716
|
if (disabled) {
|
|
3742
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 })] }) })));
|
|
3743
3718
|
}
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
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 })] })) })));
|
|
3747
3721
|
});
|
|
3748
3722
|
|
|
3749
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) {
|
|
@@ -4213,7 +4187,7 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$O || (templa
|
|
|
4213
4187
|
var templateObject_1$O;
|
|
4214
4188
|
|
|
4215
4189
|
var Container$p = styled__default["default"].div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4216
|
-
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) {
|
|
4217
4191
|
var size = _a.size;
|
|
4218
4192
|
switch (size) {
|
|
4219
4193
|
case "small":
|
|
@@ -4284,7 +4258,7 @@ var Helper = styled__default["default"](StyledParagraph)(templateObject_6$3 || (
|
|
|
4284
4258
|
var isOk = _a.isOk;
|
|
4285
4259
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4286
4260
|
}, fadeIn);
|
|
4287
|
-
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;
|
|
4288
4262
|
|
|
4289
4263
|
var expressions = {};
|
|
4290
4264
|
|
|
@@ -8038,7 +8012,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$L || (templateOb
|
|
|
8038
8012
|
var disabled = _a.disabled;
|
|
8039
8013
|
return (disabled ? "49.5px" : "");
|
|
8040
8014
|
});
|
|
8041
|
-
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) {
|
|
8042
8016
|
var disabled = _a.disabled;
|
|
8043
8017
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8044
8018
|
}, function (_a) {
|
|
@@ -8051,7 +8025,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$B || (
|
|
|
8051
8025
|
var disabled = _a.disabled;
|
|
8052
8026
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8053
8027
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8054
|
-
var templateObject_1$L, templateObject_2$
|
|
8028
|
+
var templateObject_1$L, templateObject_2$A;
|
|
8055
8029
|
|
|
8056
8030
|
var Number$1 = function (props) {
|
|
8057
8031
|
var inputRef = React$3.useRef(null);
|
|
@@ -8198,7 +8172,7 @@ var Wrapper$5 = styled__default["default"].div(templateObject_1$I || (templateOb
|
|
|
8198
8172
|
var disabled = _a.disabled;
|
|
8199
8173
|
return (disabled ? "not-allowed" : "pointer");
|
|
8200
8174
|
});
|
|
8201
|
-
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) {
|
|
8202
8176
|
var disabled = _a.disabled;
|
|
8203
8177
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8204
8178
|
}, function (_a) {
|
|
@@ -8211,7 +8185,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$A || (temp
|
|
|
8211
8185
|
var isChanged = _a.isChanged;
|
|
8212
8186
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8213
8187
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8214
|
-
var templateObject_1$I, templateObject_2$
|
|
8188
|
+
var templateObject_1$I, templateObject_2$z;
|
|
8215
8189
|
|
|
8216
8190
|
var Select = function (props) {
|
|
8217
8191
|
var _a;
|
|
@@ -8433,7 +8407,7 @@ var Container$m = styled__default["default"].div(templateObject_1$C || (template
|
|
|
8433
8407
|
return theme.colors.blue.base;
|
|
8434
8408
|
}
|
|
8435
8409
|
});
|
|
8436
|
-
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) {
|
|
8437
8411
|
var type = _a.type;
|
|
8438
8412
|
switch (type) {
|
|
8439
8413
|
default:
|
|
@@ -8445,7 +8419,7 @@ var Action = styled__default["default"].div(templateObject_2$z || (templateObjec
|
|
|
8445
8419
|
return theme.colors.blue.dark;
|
|
8446
8420
|
}
|
|
8447
8421
|
});
|
|
8448
|
-
var templateObject_1$C, templateObject_2$
|
|
8422
|
+
var templateObject_1$C, templateObject_2$y;
|
|
8449
8423
|
|
|
8450
8424
|
var Alert = function (props) {
|
|
8451
8425
|
var _a = React$3.useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8480,12 +8454,12 @@ var StyledCard = styled__default["default"].div(templateObject_1$B || (templateO
|
|
|
8480
8454
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8481
8455
|
: "";
|
|
8482
8456
|
});
|
|
8483
|
-
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) {
|
|
8484
8458
|
var color = _a.color;
|
|
8485
8459
|
return color ? theme.colors[color].light : "";
|
|
8486
8460
|
});
|
|
8487
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"])));
|
|
8488
|
-
var templateObject_1$B, templateObject_2$
|
|
8462
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$e;
|
|
8489
8463
|
|
|
8490
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 })] }))); };
|
|
8491
8465
|
|
|
@@ -14735,13 +14709,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14735
14709
|
htmlReactParser.Text;
|
|
14736
14710
|
|
|
14737
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"])));
|
|
14738
|
-
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"])));
|
|
14739
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"])));
|
|
14740
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) {
|
|
14741
14715
|
var weight = _a.weight;
|
|
14742
14716
|
return weight || 500;
|
|
14743
14717
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14744
|
-
var templateObject_1$A, templateObject_2$
|
|
14718
|
+
var templateObject_1$A, templateObject_2$w, templateObject_3$d, templateObject_4$6;
|
|
14745
14719
|
|
|
14746
14720
|
var Checkboxes = function (props) {
|
|
14747
14721
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14765,11 +14739,11 @@ var Checkboxes = function (props) {
|
|
|
14765
14739
|
};
|
|
14766
14740
|
|
|
14767
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);
|
|
14768
|
-
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) {
|
|
14769
14743
|
var isOpen = _a.isOpen;
|
|
14770
14744
|
return (isOpen ? "" : "none");
|
|
14771
14745
|
}, theme.colors.lightGray.dark);
|
|
14772
|
-
var templateObject_1$z, templateObject_2$
|
|
14746
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14773
14747
|
|
|
14774
14748
|
var Collapse = function (props) {
|
|
14775
14749
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14788,11 +14762,11 @@ var Collapse = function (props) {
|
|
|
14788
14762
|
};
|
|
14789
14763
|
|
|
14790
14764
|
var Wrapper$3 = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14791
|
-
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) {
|
|
14792
14766
|
var contrast = _a.contrast;
|
|
14793
14767
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14794
14768
|
}, theme.colors.darkGray.base);
|
|
14795
|
-
var templateObject_1$y, templateObject_2$
|
|
14769
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14796
14770
|
|
|
14797
14771
|
var Countdown = function (_a) {
|
|
14798
14772
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14820,8 +14794,8 @@ var Countdown = function (_a) {
|
|
|
14820
14794
|
};
|
|
14821
14795
|
|
|
14822
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);
|
|
14823
|
-
var Data = styled__default["default"].div(templateObject_2$
|
|
14824
|
-
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;
|
|
14825
14799
|
|
|
14826
14800
|
var DataSummary = function (_a) {
|
|
14827
14801
|
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
@@ -14831,8 +14805,8 @@ var DataSummary = function (_a) {
|
|
|
14831
14805
|
};
|
|
14832
14806
|
|
|
14833
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"])));
|
|
14834
|
-
var Label$a = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
14835
|
-
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;
|
|
14836
14810
|
|
|
14837
14811
|
var DateInputField = function (props) {
|
|
14838
14812
|
var onChange = function (value) {
|
|
@@ -14857,7 +14831,7 @@ var generateRandomString = function (length) {
|
|
|
14857
14831
|
};
|
|
14858
14832
|
|
|
14859
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"])));
|
|
14860
|
-
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) {
|
|
14861
14835
|
var isVisible = _a.isVisible;
|
|
14862
14836
|
return (isVisible ? "100%" : "0%");
|
|
14863
14837
|
}, function (_a) {
|
|
@@ -14871,7 +14845,7 @@ var Container$i = styled__default["default"].div(templateObject_2$s || (template
|
|
|
14871
14845
|
return (isVisible ? "all" : "none");
|
|
14872
14846
|
});
|
|
14873
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);
|
|
14874
|
-
var templateObject_1$v, templateObject_2$
|
|
14848
|
+
var templateObject_1$v, templateObject_2$r, templateObject_3$c;
|
|
14875
14849
|
|
|
14876
14850
|
var DropdownButton = function (props) {
|
|
14877
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" }) }) })) }) }));
|
|
@@ -17460,7 +17434,7 @@ function reducer$1(state, action) {
|
|
|
17460
17434
|
function noop$3() {}
|
|
17461
17435
|
|
|
17462
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"])));
|
|
17463
|
-
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) {
|
|
17464
17438
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17465
17439
|
// if (isDragActive) return theme.colors.blue.base;
|
|
17466
17440
|
if (isDragAccept)
|
|
@@ -17480,7 +17454,7 @@ var DropZone = styled__default["default"].div(templateObject_2$r || (templateObj
|
|
|
17480
17454
|
return theme.colors.lightGray.base;
|
|
17481
17455
|
});
|
|
17482
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"])));
|
|
17483
|
-
var templateObject_1$u, templateObject_2$
|
|
17457
|
+
var templateObject_1$u, templateObject_2$q, templateObject_3$b;
|
|
17484
17458
|
|
|
17485
17459
|
var FileUpload = function (_a) {
|
|
17486
17460
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17500,26 +17474,13 @@ var FileUpload = function (_a) {
|
|
|
17500
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))); }) }))] }) }));
|
|
17501
17475
|
};
|
|
17502
17476
|
|
|
17503
|
-
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
|
|
17504
|
-
var size = _a.size;
|
|
17505
|
-
return (size === "small" ? "30px" : "40px");
|
|
17506
|
-
}, function (_a) {
|
|
17507
|
-
var size = _a.size;
|
|
17508
|
-
return (size === "small" ? "30px" : "40px");
|
|
17509
|
-
}, 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) {
|
|
17510
17478
|
var size = _a.size;
|
|
17511
17479
|
return (size === "small" ? "30px" : "40px");
|
|
17512
17480
|
}, function (_a) {
|
|
17513
17481
|
var size = _a.size;
|
|
17514
17482
|
return (size === "small" ? "30px" : "40px");
|
|
17515
17483
|
}, function (_a) {
|
|
17516
|
-
var size = _a.size;
|
|
17517
|
-
return (size === "small" ? "28px" : "38px");
|
|
17518
|
-
}, function (_a) {
|
|
17519
|
-
var size = _a.size;
|
|
17520
|
-
return (size === "small" ? "28px" : "38px");
|
|
17521
|
-
});
|
|
17522
|
-
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) {
|
|
17523
17484
|
var size = _a.size;
|
|
17524
17485
|
return (size === "small" ? "30px" : "40px");
|
|
17525
17486
|
}, function (_a) {
|
|
@@ -17527,23 +17488,15 @@ var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$q
|
|
|
17527
17488
|
return (size === "small" ? "30px" : "40px");
|
|
17528
17489
|
}, function (_a) {
|
|
17529
17490
|
var size = _a.size;
|
|
17530
|
-
return (size === "small" ? "
|
|
17531
|
-
}, function (_a) {
|
|
17532
|
-
var size = _a.size;
|
|
17533
|
-
return (size === "small" ? "28px" : "38px");
|
|
17491
|
+
return (size === "small" ? "27px" : "37px");
|
|
17534
17492
|
}, function (_a) {
|
|
17535
17493
|
var size = _a.size;
|
|
17536
|
-
return (size === "small" ? "
|
|
17537
|
-
}, function (_a) {
|
|
17538
|
-
var size = _a.size;
|
|
17539
|
-
return (size === "small" ? "30px" : "40px");
|
|
17494
|
+
return (size === "small" ? "27px" : "37px");
|
|
17540
17495
|
});
|
|
17541
|
-
var templateObject_1$t
|
|
17496
|
+
var templateObject_1$t;
|
|
17542
17497
|
|
|
17543
17498
|
var IconButton = function (props) {
|
|
17544
|
-
|
|
17545
|
-
return (jsxRuntime.jsx(GhostIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "gray" }) })));
|
|
17546
|
-
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" }) })));
|
|
17547
17500
|
};
|
|
17548
17501
|
|
|
17549
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"])));
|