@typeolymp/ui-components 3.0.16 → 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

@@ -7,58 +7,74 @@ import { findDOMNode } from 'react-dom';
 var theme = {
     colors: {
         red: {
-            // light: "#FFC1CB",
-            // base: "#FF5975",
-            // dark: "#FC032D",
-            // darker: "#AF0522",
-            light: "#F7778C",
-            base: "#F21C40",
-            dark: "#C21633",
-            darker: "#911126",
+            light: "#FF5975",
+            base: "#FC032D",
+            dark: "#AF0522",
+            darker: "#900C22",
+            // light: "#F7778C",
+            // base: "#F21C40",
+            // dark: "#C21633",
+            // darker: "#911126",
         },
         yellow: {
-            light: "#FFE867",
-            base: "#FFD801",
-            dark: "#CCAD01",
-            darker: "#998201",
+            light: "#FFDB1B",
+            base: "#E29400",
+            dark: "#BB6802",
+            darker: "#7C420B",
+            // light: "#FFE867",
+            // base: "#FFD801",
+            // dark: "#CCAD01",
+            // darker: "#998201",
         },
         blue: {
-            // light: "#B8E0FF",
-            // base: "#15A1FF",
-            // dark: "#0074CE",
-            // darker: "#024E8A",
-            light: "#78CDFA",
-            base: "#1AAFF6",
-            dark: "#148CC5",
-            darker: "#126994",
+            light: "#B8E0FF",
+            base: "#15A1FF",
+            dark: "#0074CE",
+            darker: "#084172",
+            // light: "#78CDFA",
+            // base: "#1AAFF6",
+            // dark: "#148CC5",
+            // darker: "#126994",
         },
         green: {
-            // light: "#A4F6D5",
-            // base: "#2FD8A5",
-            // dark: "#00906C",
-            // darker: "#03624D",
-            light: "#8BDCAE",
-            base: "#3DC478",
-            dark: "#319D60",
-            darker: "#257648",
+            light: "#CBFF95",
+            base: "#89F625",
+            dark: "#4FB100",
+            darker: "#32690B",
+            // light: "#8BDCAE",
+            // base: "#3DC478",
+            // dark: "#319D60",
+            // darker: "#257648",
         },
         purple: {
-            light: "#C69BDA",
-            base: "#A059C1",
-            dark: "#80479A",
-            darker: "#603574",
+            light: "#9870ff",
+            base: "#6f0fff",
+            dark: "#5b00da",
+            darker: "#5100c0",
+            // light: "#C69BDA",
+            // base: "#A059C1",
+            // dark: "#80479A",
+            // darker: "#603574",
         },
         pink: {
-            light: "#FE67B7",
-            base: "#FE0187",
-            dark: "#CB016C",
-            darker: "#980151",
+            light: "#FCCEFF",
+            base: "#FCCEFF",
+            dark: "#F73EF7",
+            darker: "#791671",
+            // light: "#FE67B7",
+            // base: "#FE0187",
+            // dark: "#CB016C",
+            // darker: "#980151",
         },
         orange: {
-            light: "#FFC466",
-            base: "#FF9D00",
-            dark: "#CD7E02",
-            darker: "#995E00",
+            light: "#FFB96D",
+            base: "#FF5A00",
+            dark: "#CC3F02",
+            darker: "#822B0C",
+            // light: "#FFC466",
+            // base: "#FF9D00",
+            // dark: "#CD7E02",
+            // darker: "#995E00",
         },
         darkGray: {
             light: "#7C7F82",
@@ -3498,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":
@@ -3526,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":
@@ -3591,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) {
@@ -3628,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;
@@ -3710,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) {