@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
|
@@ -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,12 @@
|
|
|
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;
|
|
5
10
|
};
|
|
6
11
|
declare const Alert: FC<PropsType>;
|
|
7
12
|
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
|
|
|
@@ -8019,7 +8020,13 @@ var SearchInput = function (props) {
|
|
|
8019
8020
|
if (props.onSearch)
|
|
8020
8021
|
props.onSearch(value);
|
|
8021
8022
|
};
|
|
8022
|
-
|
|
8023
|
+
var onBlur = function () {
|
|
8024
|
+
if (props.onBlur)
|
|
8025
|
+
props.onBlur();
|
|
8026
|
+
if (value.length <= 0)
|
|
8027
|
+
onSearch();
|
|
8028
|
+
};
|
|
8029
|
+
return (jsx$1(Container$q, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, props, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
|
|
8023
8030
|
};
|
|
8024
8031
|
|
|
8025
8032
|
var Input = function (props) {
|
|
@@ -8065,7 +8072,7 @@ var Wrapper$6 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
|
|
|
8065
8072
|
var disabled = _a.disabled;
|
|
8066
8073
|
return (disabled ? "49.5px" : "");
|
|
8067
8074
|
});
|
|
8068
|
-
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) {
|
|
8069
8076
|
var disabled = _a.disabled;
|
|
8070
8077
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
8071
8078
|
}, function (_a) {
|
|
@@ -8078,7 +8085,7 @@ var StyledInputNumber = styled.input(templateObject_2$A || (templateObject_2$A =
|
|
|
8078
8085
|
var disabled = _a.disabled;
|
|
8079
8086
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8080
8087
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8081
|
-
var templateObject_1$M, templateObject_2$
|
|
8088
|
+
var templateObject_1$M, templateObject_2$B;
|
|
8082
8089
|
|
|
8083
8090
|
var Number$1 = function (props) {
|
|
8084
8091
|
var inputRef = useRef(null);
|
|
@@ -8225,7 +8232,7 @@ var Wrapper$5 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
|
|
|
8225
8232
|
var disabled = _a.disabled;
|
|
8226
8233
|
return (disabled ? "not-allowed" : "pointer");
|
|
8227
8234
|
});
|
|
8228
|
-
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) {
|
|
8229
8236
|
var disabled = _a.disabled;
|
|
8230
8237
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8231
8238
|
}, function (_a) {
|
|
@@ -8238,7 +8245,7 @@ var StyledSelect = styled.select(templateObject_2$z || (templateObject_2$z = __m
|
|
|
8238
8245
|
var isChanged = _a.isChanged;
|
|
8239
8246
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
8240
8247
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
8241
|
-
var templateObject_1$J, templateObject_2$
|
|
8248
|
+
var templateObject_1$J, templateObject_2$A;
|
|
8242
8249
|
|
|
8243
8250
|
var Select = function (props) {
|
|
8244
8251
|
var _a;
|
|
@@ -8446,6 +8453,8 @@ var Container$n = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8446
8453
|
return "rgba(139, 220, 174, 20%)";
|
|
8447
8454
|
case "error":
|
|
8448
8455
|
return "rgba(247, 119, 140, 20%)";
|
|
8456
|
+
case "info":
|
|
8457
|
+
return "rgba(120, 205, 250, 20%)";
|
|
8449
8458
|
}
|
|
8450
8459
|
}, function (_a) {
|
|
8451
8460
|
var type = _a.type;
|
|
@@ -8454,11 +8463,40 @@ var Container$n = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8454
8463
|
return theme.colors.green.base;
|
|
8455
8464
|
case "error":
|
|
8456
8465
|
return theme.colors.red.base;
|
|
8466
|
+
case "info":
|
|
8467
|
+
return theme.colors.blue.base;
|
|
8457
8468
|
}
|
|
8458
8469
|
});
|
|
8459
|
-
var
|
|
8460
|
-
|
|
8461
|
-
|
|
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;
|
|
8480
|
+
}
|
|
8481
|
+
});
|
|
8482
|
+
var templateObject_1$D, templateObject_2$z;
|
|
8483
|
+
|
|
8484
|
+
var Alert = function (props) {
|
|
8485
|
+
var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
|
|
8486
|
+
var color = "green";
|
|
8487
|
+
if (props.type === "error")
|
|
8488
|
+
color = "red";
|
|
8489
|
+
else if (props.type === "info")
|
|
8490
|
+
color = "blue";
|
|
8491
|
+
var icon = "check";
|
|
8492
|
+
if (props.type === "error")
|
|
8493
|
+
icon = "warning";
|
|
8494
|
+
else if (props.type === "info")
|
|
8495
|
+
icon = "infoCircle";
|
|
8496
|
+
if (!isOpen)
|
|
8497
|
+
return null;
|
|
8498
|
+
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); } }) })))] })));
|
|
8499
|
+
};
|
|
8462
8500
|
|
|
8463
8501
|
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) {
|
|
8464
8502
|
var bordered = _a.bordered;
|
|
@@ -8476,8 +8514,8 @@ var Ellipse = styled.div(templateObject_2$y || (templateObject_2$y = __makeTempl
|
|
|
8476
8514
|
var color = _a.color;
|
|
8477
8515
|
return color ? theme.colors[color].light : "";
|
|
8478
8516
|
});
|
|
8479
|
-
var Content = styled.div(templateObject_3$
|
|
8480
|
-
var templateObject_1$C, templateObject_2$y, templateObject_3$
|
|
8517
|
+
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"])));
|
|
8518
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$d;
|
|
8481
8519
|
|
|
8482
8520
|
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 })] }))); };
|
|
8483
8521
|
|
|
@@ -14728,12 +14766,12 @@ htmlReactParser.Text;
|
|
|
14728
14766
|
|
|
14729
14767
|
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"])));
|
|
14730
14768
|
var CheckboxContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14731
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
14769
|
+
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"])));
|
|
14732
14770
|
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) {
|
|
14733
14771
|
var weight = _a.weight;
|
|
14734
14772
|
return weight || 500;
|
|
14735
14773
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14736
|
-
var templateObject_1$B, templateObject_2$x, templateObject_3$
|
|
14774
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$c, templateObject_4$6;
|
|
14737
14775
|
|
|
14738
14776
|
var Checkboxes = function (props) {
|
|
14739
14777
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14848,7 +14886,8 @@ var generateRandomString = function (length) {
|
|
|
14848
14886
|
return string;
|
|
14849
14887
|
};
|
|
14850
14888
|
|
|
14851
|
-
var
|
|
14889
|
+
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"])));
|
|
14890
|
+
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) {
|
|
14852
14891
|
var isVisible = _a.isVisible;
|
|
14853
14892
|
return (isVisible ? "100%" : "0%");
|
|
14854
14893
|
}, function (_a) {
|
|
@@ -14861,8 +14900,12 @@ var Container$j = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
|
|
|
14861
14900
|
var isVisible = _a.isVisible;
|
|
14862
14901
|
return (isVisible ? "all" : "none");
|
|
14863
14902
|
});
|
|
14864
|
-
var MenuItem = styled.div(
|
|
14865
|
-
var templateObject_1$w, templateObject_2$s;
|
|
14903
|
+
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);
|
|
14904
|
+
var templateObject_1$w, templateObject_2$s, templateObject_3$b;
|
|
14905
|
+
|
|
14906
|
+
var DropdownButton = function (props) {
|
|
14907
|
+
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 }) }) })) }) }));
|
|
14908
|
+
};
|
|
14866
14909
|
|
|
14867
14910
|
var Dropdown = function (_a) {
|
|
14868
14911
|
var menu = _a.menu, trigger = _a.trigger, props = __rest$1(_a, ["menu", "trigger"]);
|
|
@@ -14884,6 +14927,8 @@ var Dropdown = function (_a) {
|
|
|
14884
14927
|
};
|
|
14885
14928
|
}, [handleClickOutside]);
|
|
14886
14929
|
var triggerDropdown = useCallback(function () {
|
|
14930
|
+
if (props.disabled)
|
|
14931
|
+
return;
|
|
14887
14932
|
var el = document.getElementById(triggerId);
|
|
14888
14933
|
if (el) {
|
|
14889
14934
|
var _a = el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left;
|
|
@@ -14915,7 +14960,8 @@ var Dropdown = function (_a) {
|
|
|
14915
14960
|
var label = _a.label, icon = _a.icon, onClick = _a.onClick;
|
|
14916
14961
|
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)));
|
|
14917
14962
|
}) }))] }));
|
|
14918
|
-
};
|
|
14963
|
+
};
|
|
14964
|
+
Dropdown.Button = DropdownButton;
|
|
14919
14965
|
|
|
14920
14966
|
var propTypes = {exports: {}};
|
|
14921
14967
|
|