@typeolymp/ui-components 1.19.21 → 1.19.24
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 +7 -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 +67 -23
- package/build/index.es.js.map +1 -1
- package/build/index.js +67 -23
- package/build/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
export declare type PropsType = {
|
|
3
|
-
type: "check" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "eye" | "eyeInvisible" | "warning" | "questionCircle" | "play" | "lock" | "cross" | "bulb" | "star" | "setting" | "reload" | "expand" | "calendar" | "plus" | "envelope" | "facebook" | "instagram" | "menuAlt" | "link" | "heart" | "thunder" | "fire" | "control" | "fileAdd" | "fileCheck" | "fileError" | "fileArrow" | "download" | "upload" | "dotsVertical" | "dotsHorizontal" | "bell" | "bin" | "user" | "search";
|
|
3
|
+
type: "check" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "eye" | "eyeInvisible" | "warning" | "questionCircle" | "play" | "lock" | "cross" | "bulb" | "star" | "setting" | "reload" | "expand" | "calendar" | "plus" | "envelope" | "facebook" | "instagram" | "menuAlt" | "link" | "heart" | "thunder" | "fire" | "control" | "fileAdd" | "fileCheck" | "fileError" | "fileArrow" | "download" | "upload" | "dotsVertical" | "dotsHorizontal" | "bell" | "bin" | "user" | "search" | "infoCircle";
|
|
4
4
|
size?: "tiny" | "small" | "medium" | "large";
|
|
5
5
|
color?: "blue" | "green" | "orange" | "red" | "purple" | "gray" | "darkGray" | "lightGray" | "white";
|
|
6
6
|
onClick?(e?: MouseEvent): void;
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
export declare type PropsType = {
|
|
3
|
-
type: "success" | "error";
|
|
3
|
+
type: "success" | "error" | "info";
|
|
4
4
|
message: string;
|
|
5
|
+
action?: {
|
|
6
|
+
label: string;
|
|
7
|
+
onClick(): void;
|
|
8
|
+
};
|
|
9
|
+
isClosable?: boolean;
|
|
10
|
+
afterClose?(): void;
|
|
5
11
|
};
|
|
6
12
|
declare const Alert: FC<PropsType>;
|
|
7
13
|
export default Alert;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { PropsType as ButtonPropsType } from "../../atoms/Button";
|
|
3
|
+
import { PropsType as DropdownPropsType } from ".";
|
|
4
|
+
export declare type PropsType = Omit<DropdownPropsType, "children"> & Pick<ButtonPropsType, "label" | "color" | "size" | "disabled">;
|
|
5
|
+
declare const DropdownButton: FC<PropsType>;
|
|
6
|
+
export default DropdownButton;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC, ReactNode } from "react";
|
|
2
2
|
import { PropsType as IconPropsType } from "../../atoms/Icon";
|
|
3
|
+
import { PropsType as DropdownButtonPropsType } from "./Button";
|
|
3
4
|
export declare type PropsType = {
|
|
4
5
|
menu: Array<{
|
|
5
6
|
label: string;
|
|
@@ -7,7 +8,10 @@ export declare type PropsType = {
|
|
|
7
8
|
onClick?(): void;
|
|
8
9
|
}>;
|
|
9
10
|
trigger?: ["click" | "hover"];
|
|
11
|
+
disabled?: boolean;
|
|
10
12
|
children: ReactNode;
|
|
11
13
|
};
|
|
12
|
-
declare const Dropdown: FC<PropsType
|
|
14
|
+
declare const Dropdown: FC<PropsType> & {
|
|
15
|
+
Button: FC<DropdownButtonPropsType>;
|
|
16
|
+
};
|
|
13
17
|
export default Dropdown;
|
|
@@ -2,7 +2,9 @@ import React from "react";
|
|
|
2
2
|
import { PropsType } from ".";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: React.FC<PropsType
|
|
5
|
+
component: React.FC<PropsType> & {
|
|
6
|
+
Button: React.FC<import("./Button").PropsType>;
|
|
7
|
+
};
|
|
6
8
|
};
|
|
7
9
|
export default _default;
|
|
8
10
|
export declare const Overview: () => JSX.Element;
|
package/build/index.es.js
CHANGED
|
@@ -3447,7 +3447,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3447
3447
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3448
3448
|
_this.style = function (i) {
|
|
3449
3449
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3450
|
-
return react_1.css(templateObject_2$
|
|
3450
|
+
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");
|
|
3451
3451
|
};
|
|
3452
3452
|
return _this;
|
|
3453
3453
|
}
|
|
@@ -3462,7 +3462,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3462
3462
|
return Loader;
|
|
3463
3463
|
}(React$2.PureComponent));
|
|
3464
3464
|
var _default$1 = BeatLoader.default = Loader;
|
|
3465
|
-
var templateObject_1$X, templateObject_2$
|
|
3465
|
+
var templateObject_1$X, templateObject_2$E;
|
|
3466
3466
|
|
|
3467
3467
|
var Wrapper$a = styled.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) {
|
|
3468
3468
|
var size = _a.size;
|
|
@@ -3563,8 +3563,9 @@ var icons = {
|
|
|
3563
3563
|
dotsHorizontal: (jsxs("g", { children: [jsx$1("circle", { cx: 4.2, cy: 12, r: 1.9 }), jsx$1("circle", { cx: 12, cy: 12, r: 1.9 }), jsx$1("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" })] })),
|
|
3564
3564
|
bell: (jsx$1("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" })),
|
|
3565
3565
|
bin: (jsx$1("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" })),
|
|
3566
|
-
user: (jsx$1("path", { d: "M12 12.4c3
|
|
3566
|
+
user: (jsx$1("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" })),
|
|
3567
3567
|
search: (jsx$1("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" })),
|
|
3568
|
+
infoCircle: (jsxs(Fragment$1, { children: [jsx$1("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" }), jsx$1("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" })] })),
|
|
3568
3569
|
};
|
|
3569
3570
|
var Icon = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
3570
3571
|
|
|
@@ -3622,11 +3623,11 @@ var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __m
|
|
|
3622
3623
|
? theme.button.medium.heightActive
|
|
3623
3624
|
: theme.button[size].heightActive;
|
|
3624
3625
|
});
|
|
3625
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
3626
|
+
var DisabledButton = styled(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) {
|
|
3626
3627
|
var size = _a.size;
|
|
3627
3628
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3628
3629
|
});
|
|
3629
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
3630
|
+
var GhostButton = styled(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) {
|
|
3630
3631
|
var size = _a.size;
|
|
3631
3632
|
return !size
|
|
3632
3633
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3649,7 +3650,7 @@ var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __mak
|
|
|
3649
3650
|
var size = _a.size;
|
|
3650
3651
|
return (size === "small" ? "3px" : "");
|
|
3651
3652
|
});
|
|
3652
|
-
var templateObject_1$V, templateObject_2$
|
|
3653
|
+
var templateObject_1$V, templateObject_2$D, templateObject_3$f, templateObject_4$8;
|
|
3653
3654
|
|
|
3654
3655
|
var StyledSpacer = styled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
3655
3656
|
var horizontal = _a.horizontal;
|
|
@@ -4290,7 +4291,7 @@ var StyledParagraph = styled.p(templateObject_1$P || (templateObject_1$P = __mak
|
|
|
4290
4291
|
var templateObject_1$P;
|
|
4291
4292
|
|
|
4292
4293
|
var Container$q = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4293
|
-
var InputIconWrapper = styled.div(templateObject_2$
|
|
4294
|
+
var InputIconWrapper = styled.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) {
|
|
4294
4295
|
var size = _a.size;
|
|
4295
4296
|
switch (size) {
|
|
4296
4297
|
case "small":
|
|
@@ -4333,7 +4334,7 @@ var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __
|
|
|
4333
4334
|
return "24px";
|
|
4334
4335
|
}
|
|
4335
4336
|
});
|
|
4336
|
-
var StyledInput = styled.input(templateObject_3$
|
|
4337
|
+
var StyledInput = styled.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) {
|
|
4337
4338
|
var size = _a.size;
|
|
4338
4339
|
switch (size) {
|
|
4339
4340
|
case "small":
|
|
@@ -4361,7 +4362,7 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
|
|
|
4361
4362
|
var isOk = _a.isOk;
|
|
4362
4363
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4363
4364
|
}, fadeIn);
|
|
4364
|
-
var templateObject_1$O, templateObject_2$
|
|
4365
|
+
var templateObject_1$O, templateObject_2$C, templateObject_3$e, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4365
4366
|
|
|
4366
4367
|
var expressions = {};
|
|
4367
4368
|
|
|
@@ -8071,7 +8072,7 @@ var Wrapper$6 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
|
|
|
8071
8072
|
var disabled = _a.disabled;
|
|
8072
8073
|
return (disabled ? "49.5px" : "");
|
|
8073
8074
|
});
|
|
8074
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
8075
|
+
var StyledInputNumber = styled.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) {
|
|
8075
8076
|
var disabled = _a.disabled;
|
|
8076
8077
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8077
8078
|
}, function (_a) {
|
|
@@ -8084,7 +8085,7 @@ var StyledInputNumber = styled.input(templateObject_2$A || (templateObject_2$A =
|
|
|
8084
8085
|
var disabled = _a.disabled;
|
|
8085
8086
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8086
8087
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8087
|
-
var templateObject_1$M, templateObject_2$
|
|
8088
|
+
var templateObject_1$M, templateObject_2$B;
|
|
8088
8089
|
|
|
8089
8090
|
var Number$1 = function (props) {
|
|
8090
8091
|
var inputRef = useRef(null);
|
|
@@ -8231,7 +8232,7 @@ var Wrapper$5 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
8231
8232
|
var disabled = _a.disabled;
|
|
8232
8233
|
return (disabled ? "not-allowed" : "pointer");
|
|
8233
8234
|
});
|
|
8234
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
8235
|
+
var StyledSelect = styled.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) {
|
|
8235
8236
|
var disabled = _a.disabled;
|
|
8236
8237
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8237
8238
|
}, function (_a) {
|
|
@@ -8244,7 +8245,7 @@ var StyledSelect = styled.select(templateObject_2$z || (templateObject_2$z = __m
|
|
|
8244
8245
|
var isChanged = _a.isChanged;
|
|
8245
8246
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8246
8247
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8247
|
-
var templateObject_1$J, templateObject_2$
|
|
8248
|
+
var templateObject_1$J, templateObject_2$A;
|
|
8248
8249
|
|
|
8249
8250
|
var Select = function (props) {
|
|
8250
8251
|
var _a;
|
|
@@ -8452,6 +8453,8 @@ var Container$n = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8452
8453
|
return "rgba(139, 220, 174, 20%)";
|
|
8453
8454
|
case "error":
|
|
8454
8455
|
return "rgba(247, 119, 140, 20%)";
|
|
8456
|
+
case "info":
|
|
8457
|
+
return "rgba(120, 205, 250, 20%)";
|
|
8455
8458
|
}
|
|
8456
8459
|
}, function (_a) {
|
|
8457
8460
|
var type = _a.type;
|
|
@@ -8460,11 +8463,44 @@ var Container$n = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8460
8463
|
return theme.colors.green.base;
|
|
8461
8464
|
case "error":
|
|
8462
8465
|
return theme.colors.red.base;
|
|
8466
|
+
case "info":
|
|
8467
|
+
return theme.colors.blue.base;
|
|
8468
|
+
}
|
|
8469
|
+
});
|
|
8470
|
+
var Action = styled.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) {
|
|
8471
|
+
var type = _a.type;
|
|
8472
|
+
switch (type) {
|
|
8473
|
+
default:
|
|
8474
|
+
case "success":
|
|
8475
|
+
return theme.colors.green.dark;
|
|
8476
|
+
case "error":
|
|
8477
|
+
return theme.colors.red.dark;
|
|
8478
|
+
case "info":
|
|
8479
|
+
return theme.colors.blue.dark;
|
|
8463
8480
|
}
|
|
8464
8481
|
});
|
|
8465
|
-
var templateObject_1$D;
|
|
8482
|
+
var templateObject_1$D, templateObject_2$z;
|
|
8466
8483
|
|
|
8467
|
-
var Alert = function (props) {
|
|
8484
|
+
var Alert = function (props) {
|
|
8485
|
+
var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
8486
|
+
useEffect(function () {
|
|
8487
|
+
if (!isOpen && props.afterClose)
|
|
8488
|
+
props.afterClose();
|
|
8489
|
+
}, [isOpen]);
|
|
8490
|
+
var color = "green";
|
|
8491
|
+
if (props.type === "error")
|
|
8492
|
+
color = "red";
|
|
8493
|
+
else if (props.type === "info")
|
|
8494
|
+
color = "blue";
|
|
8495
|
+
var icon = "check";
|
|
8496
|
+
if (props.type === "error")
|
|
8497
|
+
icon = "warning";
|
|
8498
|
+
else if (props.type === "info")
|
|
8499
|
+
icon = "infoCircle";
|
|
8500
|
+
if (!isOpen)
|
|
8501
|
+
return null;
|
|
8502
|
+
return (jsxs(Container$n, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: icon, color: color }), jsx$1(Paragraph, { children: props.message }), props.action && (jsx$1(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsx$1(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsx$1("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsx$1(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
|
|
8503
|
+
};
|
|
8468
8504
|
|
|
8469
8505
|
var StyledCard = styled.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) {
|
|
8470
8506
|
var bordered = _a.bordered;
|
|
@@ -8482,8 +8518,8 @@ var Ellipse = styled.div(templateObject_2$y || (templateObject_2$y = __makeTempl
|
|
|
8482
8518
|
var color = _a.color;
|
|
8483
8519
|
return color ? theme.colors[color].light : "";
|
|
8484
8520
|
});
|
|
8485
|
-
var Content = styled.div(templateObject_3$
|
|
8486
|
-
var templateObject_1$C, templateObject_2$y, templateObject_3$
|
|
8521
|
+
var Content = styled.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"])));
|
|
8522
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$d;
|
|
8487
8523
|
|
|
8488
8524
|
var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
|
|
8489
8525
|
|
|
@@ -14734,12 +14770,12 @@ htmlReactParser.Text;
|
|
|
14734
14770
|
|
|
14735
14771
|
var Fieldset$1 = styled.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"])));
|
|
14736
14772
|
var CheckboxContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14737
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
14773
|
+
var CheckboxWrapper = styled.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"])));
|
|
14738
14774
|
var Label$b = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
14739
14775
|
var weight = _a.weight;
|
|
14740
14776
|
return weight || 500;
|
|
14741
14777
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14742
|
-
var templateObject_1$B, templateObject_2$x, templateObject_3$
|
|
14778
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$c, templateObject_4$6;
|
|
14743
14779
|
|
|
14744
14780
|
var Checkboxes = function (props) {
|
|
14745
14781
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14854,7 +14890,8 @@ var generateRandomString = function (length) {
|
|
|
14854
14890
|
return string;
|
|
14855
14891
|
};
|
|
14856
14892
|
|
|
14857
|
-
var
|
|
14893
|
+
var ButtonWrapper$1 = styled.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"])));
|
|
14894
|
+
var Container$j = styled.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) {
|
|
14858
14895
|
var isVisible = _a.isVisible;
|
|
14859
14896
|
return (isVisible ? "100%" : "0%");
|
|
14860
14897
|
}, function (_a) {
|
|
@@ -14867,8 +14904,12 @@ var Container$j = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
|
|
|
14867
14904
|
var isVisible = _a.isVisible;
|
|
14868
14905
|
return (isVisible ? "all" : "none");
|
|
14869
14906
|
});
|
|
14870
|
-
var MenuItem = styled.div(
|
|
14871
|
-
var templateObject_1$w, templateObject_2$s;
|
|
14907
|
+
var MenuItem = styled.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);
|
|
14908
|
+
var templateObject_1$w, templateObject_2$s, templateObject_3$b;
|
|
14909
|
+
|
|
14910
|
+
var DropdownButton = function (props) {
|
|
14911
|
+
return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, { label: props.label, icon: "chevronDown", disabled: props.disabled, color: props.color, size: props.size }) }) })) }) }));
|
|
14912
|
+
};
|
|
14872
14913
|
|
|
14873
14914
|
var Dropdown = function (_a) {
|
|
14874
14915
|
var menu = _a.menu, trigger = _a.trigger, props = __rest$1(_a, ["menu", "trigger"]);
|
|
@@ -14890,6 +14931,8 @@ var Dropdown = function (_a) {
|
|
|
14890
14931
|
};
|
|
14891
14932
|
}, [handleClickOutside]);
|
|
14892
14933
|
var triggerDropdown = useCallback(function () {
|
|
14934
|
+
if (props.disabled)
|
|
14935
|
+
return;
|
|
14893
14936
|
var el = document.getElementById(triggerId);
|
|
14894
14937
|
if (el) {
|
|
14895
14938
|
var _a = el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left;
|
|
@@ -14921,7 +14964,8 @@ var Dropdown = function (_a) {
|
|
|
14921
14964
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14922
14965
|
return (jsxs(MenuItem, __assign$2({ onClick: onClick }, { children: [icon && jsx$1(Icon, { type: icon, size: "tiny" }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: label }))] }), "".concat(label, "-").concat(index)));
|
|
14923
14966
|
}) }))] }));
|
|
14924
|
-
};
|
|
14967
|
+
};
|
|
14968
|
+
Dropdown.Button = DropdownButton;
|
|
14925
14969
|
|
|
14926
14970
|
var propTypes = {exports: {}};
|
|
14927
14971
|
|