@typeolymp/ui-components 1.19.20 → 1.19.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/molecules/Alert/index.d.ts +6 -1
- package/build/components/molecules/Alert/styles.d.ts +1 -0
- package/build/components/molecules/Dropdown/Button.d.ts +6 -0
- package/build/components/molecules/Dropdown/index.d.ts +5 -1
- package/build/components/molecules/Dropdown/stories.d.ts +3 -1
- package/build/components/molecules/Dropdown/styles.d.ts +1 -0
- package/build/index.es.js +71 -25
- package/build/index.es.js.map +1 -1
- package/build/index.js +71 -25
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3474,7 +3474,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3474
3474
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3475
3475
|
_this.style = function (i) {
|
|
3476
3476
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3477
|
-
return react_1.css(templateObject_2$
|
|
3477
|
+
return react_1.css(templateObject_2$E || (templateObject_2$E = __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
3478
|
};
|
|
3479
3479
|
return _this;
|
|
3480
3480
|
}
|
|
@@ -3489,7 +3489,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3489
3489
|
return Loader;
|
|
3490
3490
|
}(React$2.PureComponent));
|
|
3491
3491
|
var _default$1 = BeatLoader.default = Loader;
|
|
3492
|
-
var templateObject_1$X, templateObject_2$
|
|
3492
|
+
var templateObject_1$X, templateObject_2$E;
|
|
3493
3493
|
|
|
3494
3494
|
var Wrapper$a = styled__default["default"].div(templateObject_1$W || (templateObject_1$W = __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
3495
|
var size = _a.size;
|
|
@@ -3590,8 +3590,9 @@ var icons = {
|
|
|
3590
3590
|
dotsHorizontal: (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("circle", { cx: 4.2, cy: 12, r: 1.9 }), jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 1.9 }), jsxRuntime.jsx("path", { d: "M17.8 12c0 1.1.9 1.9 1.9 1.9 1.1 0 1.9-.9 1.9-1.9s-.9-1.9-1.9-1.9c-1 0-1.9.8-1.9 1.9z" })] })),
|
|
3591
3591
|
bell: (jsxRuntime.jsx("path", { d: "M13.6 1.8c0-.4-.2-.8-.5-1.1-.3-.3-.7-.5-1.1-.5-.9 0-1.6.7-1.6 1.6v.4c-3.7.8-6.3 4-6.3 7.8v2.9c0 1.6-.6 3.1-1.7 4.2l-.4.2c-.6.6-.9 1.4-.9 2.2v1c0 .8.6 1.4 1.4 1.4h6.3c.2 1.1 1.2 1.9 2.4 1.9h1.6c.7 0 1.3-.3 1.7-.7.3-.3.6-.8.7-1.2h6.3c.7 0 1.4-.6 1.4-1.4v-1c0-.8-.3-1.6-.9-2.2l-.3-.3c-1.1-1.1-1.7-2.6-1.7-4.2V9.9c0-3.8-2.7-7.1-6.4-7.9v-.2z" })),
|
|
3592
3592
|
bin: (jsxRuntime.jsx("path", { d: "M4.3 7.2h15.5v.2c-.1 1.4-.2 2.7-.3 4.1-.1 1.3-.2 2.7-.3 4-.1 1.6-.2 3.1-.4 4.7 0 .6-.1 1.1-.1 1.7-.2 1.1-1.3 2.1-2.5 2.1H7.9c-1.2 0-2.4-1.1-2.5-2.3-.1-1.6-.3-3.2-.4-4.9-.1-1.7-.3-3.4-.4-5.2-.1-1.4-.2-2.9-.3-4.4zm7.1 8.4v4.5c0 .4.3.7.7.7.4 0 .6-.3.6-.7v-8.9-.2c-.1-.3-.3-.5-.6-.5-.4 0-.7.3-.7.7v4.4zm4.5 0v-1.1-3.4c0-.4-.3-.7-.7-.7-.4 0-.6.3-.6.7v9.1c0 .3.2.5.5.6.4.1.8-.2.8-.7v-4.5zm-7.8 0v4.6c0 .3.3.6.6.6.4 0 .7-.3.7-.7v-8.9-.2c0-.4-.3-.6-.7-.6-.4 0-.6.3-.6.7v4.5zM15.7 3.3h3.5c1.1 0 1.9.7 2.1 1.8v.4c0 .2-.2.4-.4.5H3.2h-.1c-.3 0-.5-.2-.5-.5 0-1.2.9-2 2.2-2.1h3.5v-.7c0-1.6 1-2.7 2.5-2.7h2.6c1.3.1 2.2 1.2 2.3 2.4v.9zm-5.5 0h3.6v-.8c0-.3-.2-.5-.6-.5h-2.5c-.3 0-.5.2-.6.5.1.2.1.5.1.8z" })),
|
|
3593
|
-
user: (jsxRuntime.jsx("path", { d: "M12 12.4c3
|
|
3593
|
+
user: (jsxRuntime.jsx("path", { d: "M12 12.4c3 0 5.5-2.5 5.5-5.5S15.1 1.3 12 1.3 6.5 3.8 6.5 6.8 9 12.4 12 12.4zm4.1.1c-.3-.1-.6 0-.9.2-.9.7-2 1.1-3.2 1.1s-2.3-.4-3.3-1.1c-.3-.2-.5-.3-.9-.2-3.8.9-6.5 4.3-6.5 8.3 0 1 .9 1.9 1.9 1.9h17.5c1.1 0 1.9-.9 1.9-1.9.1-4-2.5-7.4-6.5-8.3z" })),
|
|
3594
3594
|
search: (jsxRuntime.jsx("path", { d: "M.6 23.4c.6.6 1.7.6 2.3 0l7.1-7.1c1.4 1 3.2 1.6 5.1 1.6 4.9 0 8.9-4 8.9-8.9S20 .1 15.1.1C10.1.1 6 4.1 6 9c0 1.9.6 3.6 1.6 5.1L.5 21.2c-.6.6-.6 1.6.1 2.2zM9.3 9c0-3.1 2.5-5.7 5.7-5.7s5.7 2.5 5.7 5.7c0 3.1-2.5 5.7-5.7 5.7S9.3 12.2 9.3 9z" })),
|
|
3595
|
+
infoCircle: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 23C14.1756 23 16.3023 22.3549 18.1113 21.1462C19.9202 19.9375 21.3302 18.2195 22.1627 16.2095C22.9953 14.1995 23.2131 11.9878 22.7886 9.85401C22.3642 7.72022 21.3166 5.76021 19.7782 4.22184C18.2398 2.68346 16.2798 1.6358 14.146 1.21137C12.0122 0.78693 9.80051 1.00476 7.79053 1.83733C5.78054 2.66989 4.06258 4.07979 2.85388 5.88874C1.64519 7.69768 1 9.82441 1 12C1 14.9174 2.15896 17.7153 4.22186 19.7782C6.28476 21.8411 9.08262 23 12 23ZM12 20.5C13.6811 20.5 15.3245 20.0015 16.7224 19.0675C18.1202 18.1335 19.2096 16.806 19.853 15.2528C20.4963 13.6996 20.6646 11.9906 20.3367 10.3417C20.0087 8.6929 19.1992 7.17834 18.0104 5.9896C16.8217 4.80085 15.3071 3.99131 13.6583 3.66333C12.0094 3.33536 10.3004 3.50369 8.74719 4.14704C7.19402 4.79038 5.86655 5.87983 4.93256 7.27765C3.99856 8.67547 3.5 10.3189 3.5 12C3.49868 13.1166 3.71765 14.2225 4.14435 15.2544C4.57105 16.2862 5.19713 17.2238 5.98669 18.0133C6.77625 18.8029 7.71381 19.429 8.74567 19.8557C9.77753 20.2824 10.8834 20.5013 12 20.5Z" }), jsxRuntime.jsx("path", { d: "M13.6 17.4v-2-3.1-.7c0-.4-.2-.7-.4-1-.2-.2-.6-.4-1-.4s-.7.1-1 .4c-.3.3-.4.6-.4 1v5.8c0 .4.2.7.4 1 .2.2.6.4 1 .4s.7-.1 1-.4c.2-.3.4-.6.4-1zM13.6 7.4v-.8c0-.4-.2-.7-.4-1-.2-.2-.6-.4-1-.4s-.7.1-1 .4c-.3.3-.4.6-.4 1v.8c0 .4.2.7.4 1 .2.2.6.4 1 .4s.7-.1 1-.4c.2-.3.4-.7.4-1z" })] })),
|
|
3595
3596
|
};
|
|
3596
3597
|
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] })) }))); };
|
|
3597
3598
|
|
|
@@ -3649,11 +3650,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$V || (temp
|
|
|
3649
3650
|
? theme.button.medium.heightActive
|
|
3650
3651
|
: theme.button[size].heightActive;
|
|
3651
3652
|
});
|
|
3652
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3653
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$D || (templateObject_2$D = __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) {
|
|
3653
3654
|
var size = _a.size;
|
|
3654
3655
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3655
3656
|
});
|
|
3656
|
-
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$
|
|
3657
|
+
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject$1(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
3657
3658
|
var size = _a.size;
|
|
3658
3659
|
return !size
|
|
3659
3660
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3676,7 +3677,7 @@ var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templa
|
|
|
3676
3677
|
var size = _a.size;
|
|
3677
3678
|
return (size === "small" ? "3px" : "");
|
|
3678
3679
|
});
|
|
3679
|
-
var templateObject_1$V, templateObject_2$
|
|
3680
|
+
var templateObject_1$V, templateObject_2$D, templateObject_3$f, templateObject_4$8;
|
|
3680
3681
|
|
|
3681
3682
|
var StyledSpacer = styled__default["default"].div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3682
3683
|
var horizontal = _a.horizontal;
|
|
@@ -4317,7 +4318,7 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$P || (templa
|
|
|
4317
4318
|
var templateObject_1$P;
|
|
4318
4319
|
|
|
4319
4320
|
var Container$q = styled__default["default"].div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4320
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4321
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_2$C || (templateObject_2$C = __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) {
|
|
4321
4322
|
var size = _a.size;
|
|
4322
4323
|
switch (size) {
|
|
4323
4324
|
case "small":
|
|
@@ -4360,7 +4361,7 @@ var InputIconWrapper = styled__default["default"].div(templateObject_2$B || (tem
|
|
|
4360
4361
|
return "24px";
|
|
4361
4362
|
}
|
|
4362
4363
|
});
|
|
4363
|
-
var StyledInput = styled__default["default"].input(templateObject_3$
|
|
4364
|
+
var StyledInput = styled__default["default"].input(templateObject_3$e || (templateObject_3$e = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: ", ";\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: ", ";\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4364
4365
|
var size = _a.size;
|
|
4365
4366
|
switch (size) {
|
|
4366
4367
|
case "small":
|
|
@@ -4388,7 +4389,7 @@ var Helper = styled__default["default"](StyledParagraph)(templateObject_6$3 || (
|
|
|
4388
4389
|
var isOk = _a.isOk;
|
|
4389
4390
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4390
4391
|
}, fadeIn);
|
|
4391
|
-
var templateObject_1$O, templateObject_2$
|
|
4392
|
+
var templateObject_1$O, templateObject_2$C, templateObject_3$e, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4392
4393
|
|
|
4393
4394
|
var expressions = {};
|
|
4394
4395
|
|
|
@@ -8046,7 +8047,13 @@ var SearchInput = function (props) {
|
|
|
8046
8047
|
if (props.onSearch)
|
|
8047
8048
|
props.onSearch(value);
|
|
8048
8049
|
};
|
|
8049
|
-
|
|
8050
|
+
var onBlur = function () {
|
|
8051
|
+
if (props.onBlur)
|
|
8052
|
+
props.onBlur();
|
|
8053
|
+
if (value.length <= 0)
|
|
8054
|
+
onSearch();
|
|
8055
|
+
};
|
|
8056
|
+
return (jsxRuntime.jsx(Container$q, { children: jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsxRuntime.jsx(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsxRuntime.jsx(StyledInput, __assign$2({ type: "text" }, props, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
|
|
8050
8057
|
};
|
|
8051
8058
|
|
|
8052
8059
|
var Input = function (props) {
|
|
@@ -8092,7 +8099,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$M || (templateOb
|
|
|
8092
8099
|
var disabled = _a.disabled;
|
|
8093
8100
|
return (disabled ? "49.5px" : "");
|
|
8094
8101
|
});
|
|
8095
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
8102
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$B || (templateObject_2$B = __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) {
|
|
8096
8103
|
var disabled = _a.disabled;
|
|
8097
8104
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8098
8105
|
}, function (_a) {
|
|
@@ -8105,7 +8112,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$A || (
|
|
|
8105
8112
|
var disabled = _a.disabled;
|
|
8106
8113
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8107
8114
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8108
|
-
var templateObject_1$M, templateObject_2$
|
|
8115
|
+
var templateObject_1$M, templateObject_2$B;
|
|
8109
8116
|
|
|
8110
8117
|
var Number$1 = function (props) {
|
|
8111
8118
|
var inputRef = React$3.useRef(null);
|
|
@@ -8252,7 +8259,7 @@ var Wrapper$5 = styled__default["default"].div(templateObject_1$J || (templateOb
|
|
|
8252
8259
|
var disabled = _a.disabled;
|
|
8253
8260
|
return (disabled ? "not-allowed" : "pointer");
|
|
8254
8261
|
});
|
|
8255
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
8262
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$A || (templateObject_2$A = __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) {
|
|
8256
8263
|
var disabled = _a.disabled;
|
|
8257
8264
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8258
8265
|
}, function (_a) {
|
|
@@ -8265,7 +8272,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$z || (temp
|
|
|
8265
8272
|
var isChanged = _a.isChanged;
|
|
8266
8273
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8267
8274
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8268
|
-
var templateObject_1$J, templateObject_2$
|
|
8275
|
+
var templateObject_1$J, templateObject_2$A;
|
|
8269
8276
|
|
|
8270
8277
|
var Select = function (props) {
|
|
8271
8278
|
var _a;
|
|
@@ -8473,6 +8480,8 @@ var Container$n = styled__default["default"].div(templateObject_1$D || (template
|
|
|
8473
8480
|
return "rgba(139, 220, 174, 20%)";
|
|
8474
8481
|
case "error":
|
|
8475
8482
|
return "rgba(247, 119, 140, 20%)";
|
|
8483
|
+
case "info":
|
|
8484
|
+
return "rgba(120, 205, 250, 20%)";
|
|
8476
8485
|
}
|
|
8477
8486
|
}, function (_a) {
|
|
8478
8487
|
var type = _a.type;
|
|
@@ -8481,11 +8490,40 @@ var Container$n = styled__default["default"].div(templateObject_1$D || (template
|
|
|
8481
8490
|
return theme.colors.green.base;
|
|
8482
8491
|
case "error":
|
|
8483
8492
|
return theme.colors.red.base;
|
|
8493
|
+
case "info":
|
|
8494
|
+
return theme.colors.blue.base;
|
|
8484
8495
|
}
|
|
8485
8496
|
});
|
|
8486
|
-
var
|
|
8487
|
-
|
|
8488
|
-
|
|
8497
|
+
var Action = styled__default["default"].div(templateObject_2$z || (templateObject_2$z = __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) {
|
|
8498
|
+
var type = _a.type;
|
|
8499
|
+
switch (type) {
|
|
8500
|
+
default:
|
|
8501
|
+
case "success":
|
|
8502
|
+
return theme.colors.green.dark;
|
|
8503
|
+
case "error":
|
|
8504
|
+
return theme.colors.red.dark;
|
|
8505
|
+
case "info":
|
|
8506
|
+
return theme.colors.blue.dark;
|
|
8507
|
+
}
|
|
8508
|
+
});
|
|
8509
|
+
var templateObject_1$D, templateObject_2$z;
|
|
8510
|
+
|
|
8511
|
+
var Alert = function (props) {
|
|
8512
|
+
var _a = React$3.useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
8513
|
+
var color = "green";
|
|
8514
|
+
if (props.type === "error")
|
|
8515
|
+
color = "red";
|
|
8516
|
+
else if (props.type === "info")
|
|
8517
|
+
color = "blue";
|
|
8518
|
+
var icon = "check";
|
|
8519
|
+
if (props.type === "error")
|
|
8520
|
+
icon = "warning";
|
|
8521
|
+
else if (props.type === "info")
|
|
8522
|
+
icon = "infoCircle";
|
|
8523
|
+
if (!isOpen)
|
|
8524
|
+
return null;
|
|
8525
|
+
return (jsxRuntime.jsxs(Container$n, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: icon, color: color }), jsxRuntime.jsx(Paragraph, { children: props.message }), props.action && (jsxRuntime.jsx(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsxRuntime.jsx(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsxRuntime.jsx("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsxRuntime.jsx(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
|
|
8526
|
+
};
|
|
8489
8527
|
|
|
8490
8528
|
var StyledCard = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
8491
8529
|
var bordered = _a.bordered;
|
|
@@ -8503,8 +8541,8 @@ var Ellipse = styled__default["default"].div(templateObject_2$y || (templateObje
|
|
|
8503
8541
|
var color = _a.color;
|
|
8504
8542
|
return color ? theme.colors[color].light : "";
|
|
8505
8543
|
});
|
|
8506
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
8507
|
-
var templateObject_1$C, templateObject_2$y, templateObject_3$
|
|
8544
|
+
var Content = styled__default["default"].div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
8545
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$d;
|
|
8508
8546
|
|
|
8509
8547
|
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 })] }))); };
|
|
8510
8548
|
|
|
@@ -14755,12 +14793,12 @@ htmlReactParser.Text;
|
|
|
14755
14793
|
|
|
14756
14794
|
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
14757
14795
|
var CheckboxContainer = styled__default["default"].div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14758
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
14796
|
+
var CheckboxWrapper = styled__default["default"].div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
14759
14797
|
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) {
|
|
14760
14798
|
var weight = _a.weight;
|
|
14761
14799
|
return weight || 500;
|
|
14762
14800
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14763
|
-
var templateObject_1$B, templateObject_2$x, templateObject_3$
|
|
14801
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$c, templateObject_4$6;
|
|
14764
14802
|
|
|
14765
14803
|
var Checkboxes = function (props) {
|
|
14766
14804
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14875,7 +14913,8 @@ var generateRandomString = function (length) {
|
|
|
14875
14913
|
return string;
|
|
14876
14914
|
};
|
|
14877
14915
|
|
|
14878
|
-
var
|
|
14916
|
+
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
14917
|
+
var Container$j = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
14879
14918
|
var isVisible = _a.isVisible;
|
|
14880
14919
|
return (isVisible ? "100%" : "0%");
|
|
14881
14920
|
}, function (_a) {
|
|
@@ -14888,8 +14927,12 @@ var Container$j = styled__default["default"].div(templateObject_1$w || (template
|
|
|
14888
14927
|
var isVisible = _a.isVisible;
|
|
14889
14928
|
return (isVisible ? "all" : "none");
|
|
14890
14929
|
});
|
|
14891
|
-
var MenuItem = styled__default["default"].div(
|
|
14892
|
-
var templateObject_1$w, templateObject_2$s;
|
|
14930
|
+
var MenuItem = styled__default["default"].div(templateObject_3$b || (templateObject_3$b = __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);
|
|
14931
|
+
var templateObject_1$w, templateObject_2$s, templateObject_3$b;
|
|
14932
|
+
|
|
14933
|
+
var DropdownButton = function (props) {
|
|
14934
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Dropdown, __assign$2({}, props, { children: jsxRuntime.jsx(ButtonWrapper$1, { children: jsxRuntime.jsx(Button, { label: props.label, icon: "chevronDown", disabled: props.disabled, color: props.color, size: props.size }) }) })) }) }));
|
|
14935
|
+
};
|
|
14893
14936
|
|
|
14894
14937
|
var Dropdown = function (_a) {
|
|
14895
14938
|
var menu = _a.menu, trigger = _a.trigger, props = __rest$1(_a, ["menu", "trigger"]);
|
|
@@ -14911,6 +14954,8 @@ var Dropdown = function (_a) {
|
|
|
14911
14954
|
};
|
|
14912
14955
|
}, [handleClickOutside]);
|
|
14913
14956
|
var triggerDropdown = React$3.useCallback(function () {
|
|
14957
|
+
if (props.disabled)
|
|
14958
|
+
return;
|
|
14914
14959
|
var el = document.getElementById(triggerId);
|
|
14915
14960
|
if (el) {
|
|
14916
14961
|
var _a = el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left;
|
|
@@ -14942,7 +14987,8 @@ var Dropdown = function (_a) {
|
|
|
14942
14987
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14943
14988
|
return (jsxRuntime.jsxs(MenuItem, __assign$2({ onClick: onClick }, { children: [icon && jsxRuntime.jsx(Icon, { type: icon, size: "tiny" }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: label }))] }), "".concat(label, "-").concat(index)));
|
|
14944
14989
|
}) }))] }));
|
|
14945
|
-
};
|
|
14990
|
+
};
|
|
14991
|
+
Dropdown.Button = DropdownButton;
|
|
14946
14992
|
|
|
14947
14993
|
var propTypes = {exports: {}};
|
|
14948
14994
|
|