@typeolymp/ui-components 3.0.17 → 3.0.18

package/build/components/atoms/Icon/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from "react";
 export declare type PropsType = {
     type: "check" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "eye" | "eyeInvisible" | "warning" | "questionCircle" | "play" | "lock" | "unlock" | "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" | "swap" | "login" | "logout" | "edit" | "archive" | "unarchive" | "keyboard";
     size?: "tiny" | "small" | "medium" | "large";
-    color?: "blue" | "green" | "orange" | "red" | "purple" | "gray" | "darkGray" | "lightGray" | "white";
+    color?: "blue" | "green" | "darkGreen" | "orange" | "red" | "purple" | "gray" | "darkGray" | "lightGray" | "white";
     onClick?(e?: MouseEvent): void;
 };
 declare const Icon: FC<PropsType>;

package/build/index.es.js

@@ -37,10 +37,10 @@ var theme = {
             // darker: "#126994",
         },
         green: {
-            light: "#2FD8A5",
-            base: "#00906C",
-            dark: "#007C60",
-            darker: "#045041",
+            light: "#CBFF95",
+            base: "#89F625",
+            dark: "#4FB100",
+            darker: "#32690B",
             // light: "#8BDCAE",
             // base: "#3DC478",
             // dark: "#319D60",
@@ -3514,6 +3514,8 @@ var Wrapper$a = styled.div(templateObject_1$W || (templateObject_1$W = __makeTem
             return theme.colors.blue.base;
         case "green":
             return theme.colors.green.base;
+        case "darkGreen":
+            return theme.colors.green.darker;
         case "orange":
             return theme.colors.orange.base;
         case "red":
@@ -3542,6 +3544,8 @@ var Wrapper$a = styled.div(templateObject_1$W || (templateObject_1$W = __makeTem
             return theme.colors.blue.dark;
         case "green":
             return theme.colors.green.dark;
+        case "darkGreen":
+            return theme.colors.green.darker;
         case "orange":
             return theme.colors.orange.dark;
         case "red":
@@ -3607,7 +3611,7 @@ var icons = {
 };
 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] })) }))); };
 
-var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __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) {
+var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __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: 14px;\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: 14px;\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) {
     var fluid = _a.fluid;
     return (fluid ? "100%" : "fit-content");
 }, function (_a) {
@@ -3644,9 +3648,16 @@ var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __m
     return color === "white" ? "1px solid #e4e4e4" : "none";
 }, function (_a) {
     var color = _a.color;
-    return color === "white"
-        ? theme.colors.darkGray.light
-        : theme.colors.lightGray.light;
+    switch (color) {
+        default:
+        case "blue":
+        case "red":
+            return theme.colors.lightGray.light;
+        case "green":
+            return theme.colors.green.darker;
+        case "white":
+            return theme.colors.darkGray.light;
+    }
 }, theme.fonts.heading, function (_a) {
     var size = _a.size;
     return !size ? theme.button.medium.fontSize : theme.button[size].fontSize;
@@ -3726,7 +3737,13 @@ var Button$1 = forwardRef(function (_a, ref) {
         return (jsx$1(DisabledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxs(Fragment$1, { children: [icon && renderIcon({ color: "lightGray" }), jsx$1("span", { children: label })] }) })));
     }
     return (jsx$1(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 ? (jsx$1(Loader, { dark: color === "white" })) : (jsxs(Fragment$1, { children: [icon &&
-                    renderIcon({ color: color === "white" ? "gray" : "white" }), jsx$1("span", { children: label })] })) })));
+                    renderIcon({
+                        color: color === "white"
+                            ? "gray"
+                            : color === "green"
+                                ? "darkGreen"
+                                : "white",
+                    }), jsx$1("span", { children: label })] })) })));
 });
 
 var StyledCheckbox = styled.div(templateObject_1$T || (templateObject_1$T = __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) {