venice-ui 1.0.38 → 1.0.40

package/dist/cjs/Theme/Theme.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Theme = void 0;
+exports.mainTheme = exports.Theme = void 0;
+const polished_1 = require("polished");
 exports.Theme = {
     colors: {
         primary: "#4c95c5",
         text: '#333333',
-        disableText: "#cccccc",
-        disableBackground: '#dddddd',
+        disableText: "#979797",
+        disableBackground: '#e7e7e7',
         white: "#ffffff",
         black: "#333333",
         gray_1: "#b7b7b7",
@@ -50,3 +51,30 @@ exports.Theme = {
         m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
     }
 };
+exports.mainTheme = {
+    //buton
+    action: exports.Theme.colors.primary,
+    buttonText: exports.Theme.colors.white,
+    buttonPrimaryHover: (0, polished_1.lighten)(0.1, exports.Theme.colors.primary),
+    buttonSecondaryHover: (0, polished_1.lighten)(0.4, exports.Theme.colors.primary),
+    buttonInverseHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
+    disabledBackground: exports.Theme.colors.disableBackground,
+    disabledText: exports.Theme.colors.disableText,
+    //text
+    textColor: exports.Theme.colors.text,
+    // input
+    inputDefaultBackground: exports.Theme.colors.white,
+    inputDefaultBorder: exports.Theme.colors.gray_1,
+    inputDefaultTextColor: exports.Theme.colors.text,
+    inputFocusBackground: (0, polished_1.lighten)(0.4, exports.Theme.colors.primary),
+    inputFocusBorder: exports.Theme.colors.primary,
+    inputFocusTextColor: exports.Theme.colors.text,
+    inputDisabledBackground: exports.Theme.colors.disableBackground,
+    inputDisabledBorder: exports.Theme.colors.disableText,
+    inputDisabledTextColor: exports.Theme.colors.disableText,
+    inputErrorBackground: (0, polished_1.lighten)(0.5, exports.Theme.colors.red),
+    inputErrorBorder: exports.Theme.colors.red,
+    inputErrorTextColor: exports.Theme.colors.red,
+    // global
+    contentBackground: exports.Theme.colors.white
+};

package/dist/cjs/components/Button/Button.js

@@ -5,8 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
+const Theme_1 = require("../../Theme");
 const Button_styles_1 = require("./Button.styles");
-const Button = ({ text, mode = 'primary', size = 'medium', right = false, left = false, onClick, }) => {
-    return (react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
+const Button = ({ text, mode = 'primary', size = 'medium', right = false, left = false, theme = Theme_1.mainTheme, disabled = false, onClick, }) => {
+    const handleClick = () => {
+        !disabled && onClick();
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick }, text)));
 };
 exports.Button = Button;

package/dist/cjs/components/Button/Button.styles.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonElement = void 0;
 const common_1 = require("../common");
-const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
 exports.ButtonElement = styled_components_1.default.button `
@@ -24,34 +23,54 @@ exports.ButtonElement = styled_components_1.default.button `
   flex-shrink: 1;
 
   ${(p) => p.mode === 'primary' &&
-    `background-color: ${Theme_1.Theme.colors.primary};
-    color: ${Theme_1.Theme.colors.white};
-    border: 1px solid rgba(0,0,0,0.15);`}
+    `background-color: ${p.theme.action};
+    color: ${p.theme.buttonText};
+    border: 1px solid rgba(0,0,0,0.15);
+    &:disabled{
+      color: ${p.theme.disabledText};
+      background-color: ${p.theme.disabledBackground};
+    }
+    `}
   ${(p) => p.mode === 'secondary' &&
-    `background-color: ${Theme_1.Theme.colors.white};
-    color: ${Theme_1.Theme.colors.primary};
-    border: 1px solid ${Theme_1.Theme.colors.primary};
+    `background-color: transparent;
+    color: ${p.theme.action};
+    border: 1px solid ${p.theme.action};
+    &:disabled{
+      color: ${p.theme.disabledText};
+      border: 1px solid ${p.theme.disabledText};
+    }
     `}
   ${(p) => p.mode === 'inverse' &&
     `background-color:transparent;
-    color: ${Theme_1.Theme.colors.primary};
-    border:none;`}
-    ${(p) => (0, common_1.setSize)(p.size)}
+    color: ${p.theme.action};
+    border:none;
+    &:disabled{
+      color: ${p.theme.disabledText};
+    }
+    `}
+    ${(p) => (0, common_1.setButtonSize)(p.size)}
   &:hover {
     transition: 300ms;
     ${(p) => p.mode === 'primary' &&
-    `background-color: ${(0, polished_1.lighten)(0.1, Theme_1.Theme.colors.primary)};`}
+    `background-color: ${p.theme.buttonPrimaryHover};
+      &:disabled {
+        background-color: ${p.theme.disabledBackground};
+      }`}
+
     ${(p) => p.mode === 'secondary' &&
-    `background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)}`};
-    ${(p) => p.mode === 'inverse' && `background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};`}
+    `background-color: ${p.theme.buttonSecondaryHover};
+      &:disabled {
+        background-color: transparent;
+      }`};
+
+    ${(p) => p.mode === 'inverse' &&
+    `background-color: ${p.theme.buttonInverseHover};
+      &:disabled{
+        background-color: transparent;
+      }`}
   }
 
-  &.disable,
-  button[disabled] {
-    color: ${Theme_1.Theme.colors.disableText};
-    cursor: default;
-    &:hover {
-      color: ${Theme_1.Theme.colors.disableBackground};
-    }
+  &:disabled {
+    cursor: not-allowed;
   }
 `;

package/dist/cjs/components/Dropdown/DropdownElements.js

@@ -18,15 +18,15 @@ exports.Field = styled_components_1.default.div `
   height:  ${(p) => (0, common_1.setFieldHeight)(p.inputSize)};
   ${(p) => p.error &&
     `
-    ${common_1.colorMode.error}
+    ${common_1.inputColorSchema.error}
   `}
   ${(p) => p.active &&
     `
-    ${common_1.colorMode.default}
+    ${common_1.inputColorSchema.default}
   `}
   ${(p) => p.disabled &&
     `
-    ${common_1.colorMode.disabled}
+    ${common_1.inputColorSchema.disabled}
     cursor: not-allowed;
   `}
 `;

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -31,7 +31,7 @@ const Icons_1 = require("../Icons");
 const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
 const Aligment_1 = require("../Aligment");
 const Typography_1 = require("../Typography");
-const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1.Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, }) => {
+const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1.Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const close = () => {
@@ -57,7 +57,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1
         };
     }, [open]);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
-        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: (0, common_1.setIconSize)(size), active: open }),
+        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: (0, common_1.setIconSize)(size), active: open, right: right, left: left }),
         open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },
             react_1.default.createElement(Aligment_1.Aligment, { hPadding: Theme_1.Theme.padding.m, direction: "column" },
                 header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,

package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js

@@ -12,6 +12,7 @@ exports.DropdownMenuElement = styled_components_1.default.div `
   width:auto;
   display: flex;
   box-sizing: border-box;
+  min-width:40px;
 `;
 exports.DropdownMenuHeader = styled_components_1.default.div `
   border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_2};

package/dist/cjs/components/ElementHeader/ElementHeader.js

@@ -28,8 +28,8 @@ const ElementHeader = ({ title, showTitle = true, moreIcon = false, backIcon = f
         }
         else if (!closeIcon && actionButton && handleClick) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: "flex-end", width: "auto" },
-                react_1.default.createElement(Button_1.Button, { mode: "inverse", text: actionLabel, onClick: () => handleClick() }),
-                moreIcon && options && react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options })));
+                react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
+                moreIcon && options && react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true })));
         }
     };
     return (react_1.default.createElement(Aligment_1.Aligment, { justify: !showTitle && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: bgColor },

package/dist/cjs/components/Icons/Icon.js

@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
-const Icon = ({ size = 24, name, color = Theme_1.Theme.colors.text, bgColor, onClick, active = false }) => {
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: onClick, bgColor: bgColor, active: active },
+const Icon = ({ size = 24, name, right = false, left = false, color = Theme_1.Theme.colors.text, bgColor, onClick, active = false, noHover = false }) => {
+    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: onClick, bgColor: bgColor, active: active, right: right, left: left, noHover: noHover },
         react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: color }))));
 };

package/dist/cjs/components/Icons/Icon.styles.js

@@ -13,14 +13,18 @@ exports.IconElement = styled_components_1.default.div `
   width:auto;
   display:inline-flex;
   border-radius: 50%;
+  margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
+  margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
   ${p => p.onClick !== undefined &&
     `
     padding: ${Theme_1.Theme.padding.s};
     cursor:pointer;
-    &:hover{
+    ${!p.noHover &&
+        `&:hover{
       background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : (0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
       transition: 300ms;
-    }
+    }`}
+    
     svg{
       cursor:pointer;
     }

package/dist/cjs/components/Icons/IconsPath.js

@@ -11,6 +11,7 @@ exports.iconsPath = {
     add_circle: "M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
     account: "M5.85 17.1q1.275-.975 2.85-1.538Q10.275 15 12 15q1.725 0 3.3.562 1.575.563 2.85 1.538.875-1.025 1.363-2.325Q20 13.475 20 12q0-3.325-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12q0 1.475.488 2.775.487 1.3 1.362 2.325ZM12 13q-1.475 0-2.488-1.012Q8.5 10.975 8.5 9.5t1.012-2.488Q10.525 6 12 6t2.488 1.012Q15.5 8.025 15.5 9.5t-1.012 2.488Q13.475 13 12 13Zm0 9q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q1.325 0 2.5-.387 1.175-.388 2.15-1.113-.975-.725-2.15-1.113Q13.325 17 12 17t-2.5.387q-1.175.388-2.15 1.113.975.725 2.15 1.113Q10.675 20 12 20Zm0-9q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q12.65 8 12 8q-.65 0-1.075.425Q10.5 8.85 10.5 9.5q0 .65.425 1.075Q11.35 11 12 11Zm0-1.5Zm0 9Z",
     visibility: "M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z",
+    visability_off: "M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.65C13.375 8.96667 12.6 8.7 11.65 8.85L10.2 7.4C10.4833 7.26667 10.7708 7.16667 11.0625 7.1C11.3542 7.03333 11.6667 7 12 7C13.25 7 14.3125 7.4375 15.1875 8.3125C16.0625 9.1875 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3333 12.7292 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.0458 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81667 18.7708 8.47917 17.2125 7.4875C15.6542 6.49583 13.9167 6 12 6C11.5167 6 11.0417 6.03333 10.575 6.1C10.1083 6.16667 9.65 6.26667 9.2 6.4L7.65 4.85C8.33333 4.56667 9.03333 4.35417 9.75 4.2125C10.4667 4.07083 11.2167 4 12 4C14.5167 4 16.7583 4.69583 18.725 6.0875C20.6917 7.47917 22.1167 9.28333 23 11.5C22.6167 12.4833 22.1125 13.3958 21.4875 14.2375C20.8625 15.0792 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2458 18.9542 12.6333 19 12 19C9.48333 19 7.24167 18.3042 5.275 16.9125C3.30833 15.5208 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79583 2.325 9.0375C2.85833 8.27917 3.46667 7.6 4.15 7L1.4 4.2L2.8 2.8L21.2 21.2L19.8 22.6ZM5.55 8.4C5.06667 8.83333 4.625 9.30833 4.225 9.825C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.22917 14.5208 6.7875 15.5125C8.34583 16.5042 10.0833 17 12 17C12.3333 17 12.6583 16.9792 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3583 15.9875 12.1833 16 12 16C10.75 16 9.6875 15.5625 8.8125 14.6875C7.9375 13.8125 7.5 12.75 7.5 11.5C7.5 11.3167 7.5125 11.1417 7.5375 10.975C7.5625 10.8083 7.6 10.6333 7.65 10.45L5.55 8.4Z",
     search: "m19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z",
     more_vert: "M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z",
     menu: "M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z",
@@ -25,5 +26,5 @@ exports.iconsPath = {
     person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z",
     check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
     check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
-    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"
+    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z",
 };

package/dist/cjs/components/Input/Input.js

@@ -1,20 +1,51 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
 const Aligment_1 = require("../Aligment");
-const react_1 = __importDefault(require("react"));
 const Input_styles_1 = require("./Input.styles");
-const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step }) => {
+const Icons_1 = require("../Icons");
+const Theme_1 = require("../../Theme");
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step, theme = Theme_1.mainTheme, }) => {
     const onChange = (e) => {
         handleChange(name, e.target.value);
     };
-    return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-        label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
-            react_1.default.createElement(Input_styles_1.InputTextElement, { inputSize: size, type: type, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
-            error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error))));
+    const [inputType] = (0, react_1.useState)(type);
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const tooglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+            label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+            react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
+                react_1.default.createElement(Input_styles_1.InputTextElement, { inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
+                    react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, color: theme.inputDefaultTextColor, noHover: true }))),
+                error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));
 };
 exports.Input = Input;

package/dist/cjs/components/Input/Input.styles.js

@@ -3,26 +3,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputTextElement = void 0;
+exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputTextElement = void 0;
 const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
 const Typography_1 = require("../Typography");
 exports.InputTextElement = styled_components_1.default.input `
   position:relative;
-  ${common_1.defaultStyles}
+  box-sizing: border-box;
+  background-color: ${p => p.theme.inputDefaultBackground};
+  border: 1px solid ${p => p.theme.inputDefaultBorder};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  width: 100%;
+  font-family: "Lato", sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   ${(p) => (0, common_1.setSize)(p.inputSize)}
-  color: ${Theme_1.Theme.colors.text};
+  color: ${p => p.theme.inputDefaultTextColor};
   width: ${p => p.width ? p.width : '100%'};
+  ${p => p.type === 'password' && `padding-right:32px;`}
   :focus {
-    ${common_1.colorMode.default}
+    border-color: ${p => p.theme.inputFocusBorder};
+    background-color: ${p => p.theme.inputFocusBackground};
+    color:${p => p.theme.inputFocusTextColor};
   }
   :disabled{
-    ${common_1.colorMode.disabled}
+    background-color: ${p => p.theme.inputDisabledBackground};
+    border-color: ${p => p.theme.inputDisabledBorder};
+    color:${p => p.theme.inputDisabledTextColor};
     cursor: not-allowed;
   }
   ${p => p.error && `
-    ${common_1.colorMode.error}
+  background-color: ${p.theme.inputErrorBackground};
+  border-color: ${p.theme.inputErrorBorder};
+  color:${p.theme.inputErrorTextColor};
   `}
 `;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
@@ -35,8 +52,13 @@ exports.InputWrapper = styled_components_1.default.div `
   width: ${p => p.width ? p.width : '100%'};
 `;
 exports.InputErrorMsg = styled_components_1.default.div `
-  color: ${Theme_1.Theme.colors.red};
+  color: ${p => p.theme.inputErrorTextColor};
   font-size: ${Theme_1.Theme.fontSize.s};
   position: absolute;
   bottom: -20px;
 `;
+exports.EyeIconWrapper = styled_components_1.default.div `
+position: absolute;
+right: 2px;
+${(p) => (0, common_1.setEyeTopPosition)(p.size)}
+`;

package/dist/cjs/components/Modal/Modal.js

@@ -11,16 +11,18 @@ const Aligment_1 = require("../Aligment");
 const Button_1 = require("../Button");
 const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
-const Modal = ({ children, title, handleConfirm, handleClose, labelConfirm, labelClose, size = 'small', }) => {
+const styled_components_1 = require("styled-components");
+const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, labelConfirm, labelClose, submitDisabled, size = 'small', }) => {
     const isMultiButtons = () => {
         return handleConfirm !== undefined && labelConfirm !== undefined;
     };
-    return (react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
-        react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },
-            react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose }),
-            react_1.default.createElement(common_1.ScrollCotainer, null, children),
-            react_1.default.createElement(Aligment_1.Aligment, { justify: 'flex-end', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l },
-                react_1.default.createElement(Button_1.Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
-                handleConfirm && labelConfirm && (react_1.default.createElement(Button_1.Button, { onClick: handleConfirm, text: labelConfirm }))))));
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
+            react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },
+                react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose }),
+                react_1.default.createElement(common_1.ScrollCotainer, null, children),
+                react_1.default.createElement(Aligment_1.Aligment, { justify: 'flex-end', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l },
+                    react_1.default.createElement(Button_1.Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
+                    handleConfirm && labelConfirm && (react_1.default.createElement(Button_1.Button, { onClick: handleConfirm, text: labelConfirm, disabled: submitDisabled })))))));
 };
 exports.Modal = Modal;

package/dist/cjs/components/Modal/Modal.styles.js

@@ -24,7 +24,7 @@ exports.ModalElement = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  background-color: ${Theme_1.Theme.colors.white};
+  background-color: ${p => p.theme.contentBackground};
   border-radius: ${Theme_1.Theme.borderRadius.m};
   max-height: 100%;
   overflow: hidden;

package/dist/cjs/components/common/inputStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.colorMode = exports.setSize = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonSize = exports.setSize = exports.eyeTopPosition = exports.buttonPadding = exports.inputPadding = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -18,26 +18,58 @@ exports.defaultStyles = `
 `;
 exports.sizes = {
     small: `
-  padding: ${Theme_1.Theme.padding.s};
   font-size: ${Theme_1.Theme.fontSize.s};
   line-height: ${Theme_1.Theme.lineHeight.s};
   `,
     medium: `
-  padding: ${Theme_1.Theme.padding.m};
   font-size: ${Theme_1.Theme.fontSize.m};
   line-height: ${Theme_1.Theme.lineHeight.m};
   `,
     large: `
-  padding: ${Theme_1.Theme.padding.m};
   font-size: ${Theme_1.Theme.fontSize.l};
   line-height: ${Theme_1.Theme.lineHeight.l};
   `
 };
+exports.inputPadding = {
+    small: `
+  padding: ${Theme_1.Theme.padding.s};
+  `,
+    medium: `
+  padding: ${Theme_1.Theme.padding.m};
+  `,
+    large: `
+  padding: ${Theme_1.Theme.padding.m};
+  `
+};
+exports.buttonPadding = {
+    small: `
+  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
+  `,
+    medium: `
+  padding: ${Theme_1.Theme.padding.m} ${Theme_1.Theme.padding.l};
+  `,
+    large: `
+  padding: ${Theme_1.Theme.padding.m} ${Theme_1.Theme.padding.l};
+  `
+};
+exports.eyeTopPosition = {
+    small: `top:-2px;`,
+    medium: `top: 3px;`,
+    large: `top: 7px;`
+};
 const setSize = (size) => {
-    return exports.sizes[size];
+    return exports.sizes[size] + exports.inputPadding[size];
 };
 exports.setSize = setSize;
-exports.colorMode = {
+const setButtonSize = (size) => {
+    return exports.sizes[size] + exports.buttonPadding[size];
+};
+exports.setButtonSize = setButtonSize;
+const setEyeTopPosition = (size) => {
+    return exports.eyeTopPosition[size];
+};
+exports.setEyeTopPosition = setEyeTopPosition;
+exports.inputColorSchema = {
     default: `
     border-color: ${Theme_1.Theme.colors.primary};
     background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};

package/dist/esm/Theme/Theme.js

@@ -1,9 +1,10 @@
+import { lighten } from "polished";
 export const Theme = {
     colors: {
         primary: "#4c95c5",
         text: '#333333',
-        disableText: "#cccccc",
-        disableBackground: '#dddddd',
+        disableText: "#979797",
+        disableBackground: '#e7e7e7',
         white: "#ffffff",
         black: "#333333",
         gray_1: "#b7b7b7",
@@ -47,3 +48,30 @@ export const Theme = {
         m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
     }
 };
+export const mainTheme = {
+    //buton
+    action: Theme.colors.primary,
+    buttonText: Theme.colors.white,
+    buttonPrimaryHover: lighten(0.1, Theme.colors.primary),
+    buttonSecondaryHover: lighten(0.4, Theme.colors.primary),
+    buttonInverseHover: lighten(0.3, Theme.colors.primary),
+    disabledBackground: Theme.colors.disableBackground,
+    disabledText: Theme.colors.disableText,
+    //text
+    textColor: Theme.colors.text,
+    // input
+    inputDefaultBackground: Theme.colors.white,
+    inputDefaultBorder: Theme.colors.gray_1,
+    inputDefaultTextColor: Theme.colors.text,
+    inputFocusBackground: lighten(0.4, Theme.colors.primary),
+    inputFocusBorder: Theme.colors.primary,
+    inputFocusTextColor: Theme.colors.text,
+    inputDisabledBackground: Theme.colors.disableBackground,
+    inputDisabledBorder: Theme.colors.disableText,
+    inputDisabledTextColor: Theme.colors.disableText,
+    inputErrorBackground: lighten(0.5, Theme.colors.red),
+    inputErrorBorder: Theme.colors.red,
+    inputErrorTextColor: Theme.colors.red,
+    // global
+    contentBackground: Theme.colors.white
+};

package/dist/esm/components/Button/Button.js

@@ -1,5 +1,11 @@
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mainTheme } from '../../Theme';
 import { ButtonElement } from './Button.styles';
-export const Button = ({ text, mode = 'primary', size = 'medium', right = false, left = false, onClick, }) => {
-    return (React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
+export const Button = ({ text, mode = 'primary', size = 'medium', right = false, left = false, theme = mainTheme, disabled = false, onClick, }) => {
+    const handleClick = () => {
+        !disabled && onClick();
+    };
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick }, text)));
 };

package/dist/esm/components/Button/Button.styles.js

@@ -1,5 +1,4 @@
-import { setSize } from '../common';
-import { lighten } from 'polished';
+import { setButtonSize } from '../common';
 import styled from 'styled-components';
 import { Theme } from '../../Theme/Theme';
 export const ButtonElement = styled.button `
@@ -18,34 +17,54 @@ export const ButtonElement = styled.button `
   flex-shrink: 1;
 
   ${(p) => p.mode === 'primary' &&
-    `background-color: ${Theme.colors.primary};
-    color: ${Theme.colors.white};
-    border: 1px solid rgba(0,0,0,0.15);`}
+    `background-color: ${p.theme.action};
+    color: ${p.theme.buttonText};
+    border: 1px solid rgba(0,0,0,0.15);
+    &:disabled{
+      color: ${p.theme.disabledText};
+      background-color: ${p.theme.disabledBackground};
+    }
+    `}
   ${(p) => p.mode === 'secondary' &&
-    `background-color: ${Theme.colors.white};
-    color: ${Theme.colors.primary};
-    border: 1px solid ${Theme.colors.primary};
+    `background-color: transparent;
+    color: ${p.theme.action};
+    border: 1px solid ${p.theme.action};
+    &:disabled{
+      color: ${p.theme.disabledText};
+      border: 1px solid ${p.theme.disabledText};
+    }
     `}
   ${(p) => p.mode === 'inverse' &&
     `background-color:transparent;
-    color: ${Theme.colors.primary};
-    border:none;`}
-    ${(p) => setSize(p.size)}
+    color: ${p.theme.action};
+    border:none;
+    &:disabled{
+      color: ${p.theme.disabledText};
+    }
+    `}
+    ${(p) => setButtonSize(p.size)}
   &:hover {
     transition: 300ms;
     ${(p) => p.mode === 'primary' &&
-    `background-color: ${lighten(0.1, Theme.colors.primary)};`}
+    `background-color: ${p.theme.buttonPrimaryHover};
+      &:disabled {
+        background-color: ${p.theme.disabledBackground};
+      }`}
+
     ${(p) => p.mode === 'secondary' &&
-    `background-color: ${lighten(0.4, Theme.colors.primary)}`};
-    ${(p) => p.mode === 'inverse' && `background-color: ${lighten(0.3, Theme.colors.primary)};`}
+    `background-color: ${p.theme.buttonSecondaryHover};
+      &:disabled {
+        background-color: transparent;
+      }`};
+
+    ${(p) => p.mode === 'inverse' &&
+    `background-color: ${p.theme.buttonInverseHover};
+      &:disabled{
+        background-color: transparent;
+      }`}
   }
 
-  &.disable,
-  button[disabled] {
-    color: ${Theme.colors.disableText};
-    cursor: default;
-    &:hover {
-      color: ${Theme.colors.disableBackground};
-    }
+  &:disabled {
+    cursor: not-allowed;
   }
 `;

package/dist/esm/components/Dropdown/DropdownElements.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { defaultStyles, setSize, colorMode, setFieldHeight } from "../common";
+import { defaultStyles, setSize, inputColorSchema, setFieldHeight } from "../common";
 import { Theme } from "../../Theme";
 export const Field = styled.div `
   position: relative;
@@ -12,15 +12,15 @@ export const Field = styled.div `
   height:  ${(p) => setFieldHeight(p.inputSize)};
   ${(p) => p.error &&
     `
-    ${colorMode.error}
+    ${inputColorSchema.error}
   `}
   ${(p) => p.active &&
     `
-    ${colorMode.default}
+    ${inputColorSchema.default}
   `}
   ${(p) => p.disabled &&
     `
-    ${colorMode.disabled}
+    ${inputColorSchema.disabled}
     cursor: not-allowed;
   `}
 `;

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -5,7 +5,7 @@ import { Icon } from '../Icons';
 import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
 import { Aligment } from '../Aligment';
 import { TextAccent, TextLabel, Text } from '../Typography';
-export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, }) => {
+export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const close = () => {
@@ -31,7 +31,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color =
         };
     }, [open]);
     return (React.createElement(DropdownMenuElement, null,
-        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: setIconSize(size), active: open }),
+        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: setIconSize(size), active: open, right: right, left: left }),
         open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },
             React.createElement(Aligment, { hPadding: Theme.padding.m, direction: "column" },
                 header && (React.createElement(DropdownMenuHeader, null,

package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js

@@ -6,6 +6,7 @@ export const DropdownMenuElement = styled.div `
   width:auto;
   display: flex;
   box-sizing: border-box;
+  min-width:40px;
 `;
 export const DropdownMenuHeader = styled.div `
   border-bottom: 1px solid  ${Theme.colors.gray_2};

package/dist/esm/components/ElementHeader/ElementHeader.js

@@ -22,8 +22,8 @@ export const ElementHeader = ({ title, showTitle = true, moreIcon = false, backI
         }
         else if (!closeIcon && actionButton && handleClick) {
             return (React.createElement(Aligment, { align: "flex-end", width: "auto" },
-                React.createElement(Button, { mode: "inverse", text: actionLabel, onClick: () => handleClick() }),
-                moreIcon && options && React.createElement(DropdownMenu, { options: options })));
+                React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
+                moreIcon && options && React.createElement(DropdownMenu, { options: options, right: true })));
         }
     };
     return (React.createElement(Aligment, { justify: !showTitle && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: bgColor },

package/dist/esm/components/Icons/Icon.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { Theme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
-export const Icon = ({ size = 24, name, color = Theme.colors.text, bgColor, onClick, active = false }) => {
-    return (React.createElement(IconElement, { onClick: onClick, bgColor: bgColor, active: active },
+export const Icon = ({ size = 24, name, right = false, left = false, color = Theme.colors.text, bgColor, onClick, active = false, noHover = false }) => {
+    return (React.createElement(IconElement, { onClick: onClick, bgColor: bgColor, active: active, right: right, left: left, noHover: noHover },
         React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             React.createElement("path", { d: iconsPath[name], fill: color }))));
 };

package/dist/esm/components/Icons/Icon.styles.js

@@ -7,14 +7,18 @@ export const IconElement = styled.div `
   width:auto;
   display:inline-flex;
   border-radius: 50%;
+  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
+  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
   ${p => p.onClick !== undefined &&
     `
     padding: ${Theme.padding.s};
     cursor:pointer;
-    &:hover{
+    ${!p.noHover &&
+        `&:hover{
       background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : lighten(0.3, Theme.colors.primary)};
       transition: 300ms;
-    }
+    }`}
+    
     svg{
       cursor:pointer;
     }

package/dist/esm/components/Icons/IconsPath.js

@@ -8,6 +8,7 @@ export const iconsPath = {
     add_circle: "M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
     account: "M5.85 17.1q1.275-.975 2.85-1.538Q10.275 15 12 15q1.725 0 3.3.562 1.575.563 2.85 1.538.875-1.025 1.363-2.325Q20 13.475 20 12q0-3.325-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12q0 1.475.488 2.775.487 1.3 1.362 2.325ZM12 13q-1.475 0-2.488-1.012Q8.5 10.975 8.5 9.5t1.012-2.488Q10.525 6 12 6t2.488 1.012Q15.5 8.025 15.5 9.5t-1.012 2.488Q13.475 13 12 13Zm0 9q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q1.325 0 2.5-.387 1.175-.388 2.15-1.113-.975-.725-2.15-1.113Q13.325 17 12 17t-2.5.387q-1.175.388-2.15 1.113.975.725 2.15 1.113Q10.675 20 12 20Zm0-9q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q12.65 8 12 8q-.65 0-1.075.425Q10.5 8.85 10.5 9.5q0 .65.425 1.075Q11.35 11 12 11Zm0-1.5Zm0 9Z",
     visibility: "M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z",
+    visability_off: "M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.65C13.375 8.96667 12.6 8.7 11.65 8.85L10.2 7.4C10.4833 7.26667 10.7708 7.16667 11.0625 7.1C11.3542 7.03333 11.6667 7 12 7C13.25 7 14.3125 7.4375 15.1875 8.3125C16.0625 9.1875 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3333 12.7292 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.0458 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81667 18.7708 8.47917 17.2125 7.4875C15.6542 6.49583 13.9167 6 12 6C11.5167 6 11.0417 6.03333 10.575 6.1C10.1083 6.16667 9.65 6.26667 9.2 6.4L7.65 4.85C8.33333 4.56667 9.03333 4.35417 9.75 4.2125C10.4667 4.07083 11.2167 4 12 4C14.5167 4 16.7583 4.69583 18.725 6.0875C20.6917 7.47917 22.1167 9.28333 23 11.5C22.6167 12.4833 22.1125 13.3958 21.4875 14.2375C20.8625 15.0792 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2458 18.9542 12.6333 19 12 19C9.48333 19 7.24167 18.3042 5.275 16.9125C3.30833 15.5208 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79583 2.325 9.0375C2.85833 8.27917 3.46667 7.6 4.15 7L1.4 4.2L2.8 2.8L21.2 21.2L19.8 22.6ZM5.55 8.4C5.06667 8.83333 4.625 9.30833 4.225 9.825C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.22917 14.5208 6.7875 15.5125C8.34583 16.5042 10.0833 17 12 17C12.3333 17 12.6583 16.9792 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3583 15.9875 12.1833 16 12 16C10.75 16 9.6875 15.5625 8.8125 14.6875C7.9375 13.8125 7.5 12.75 7.5 11.5C7.5 11.3167 7.5125 11.1417 7.5375 10.975C7.5625 10.8083 7.6 10.6333 7.65 10.45L5.55 8.4Z",
     search: "m19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z",
     more_vert: "M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z",
     menu: "M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z",
@@ -22,5 +23,5 @@ export const iconsPath = {
     person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z",
     check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
     check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
-    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"
+    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z",
 };

package/dist/esm/components/Input/Input.js

@@ -1,13 +1,24 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
-import React from 'react';
-import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, } from './Input.styles';
-export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step }) => {
+import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, } from './Input.styles';
+import { Icon } from '../Icons';
+import { mainTheme } from '../../Theme';
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step, theme = mainTheme, }) => {
     const onChange = (e) => {
         handleChange(name, e.target.value);
     };
-    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        React.createElement(InputWrapper, { width: width },
-            React.createElement(InputTextElement, { inputSize: size, type: type, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
-            error && React.createElement(InputErrorMsg, null, error))));
+    const [inputType] = useState(type);
+    const [showPassword, setShowPassword] = useState(false);
+    const tooglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+            React.createElement(InputWrapper, { width: width },
+                React.createElement(InputTextElement, { inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
+                    React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, color: theme.inputDefaultTextColor, noHover: true }))),
+                error && React.createElement(InputErrorMsg, null, error)))));
 };

package/dist/esm/components/Input/Input.styles.js

@@ -1,22 +1,39 @@
-import { defaultStyles, setSize, colorMode } from "../common";
+import { setSize, setEyeTopPosition } from "../common";
 import styled from "styled-components";
 import { Theme } from "../../Theme";
 import { TextLabel } from "../Typography";
 export const InputTextElement = styled.input `
   position:relative;
-  ${defaultStyles}
+  box-sizing: border-box;
+  background-color: ${p => p.theme.inputDefaultBackground};
+  border: 1px solid ${p => p.theme.inputDefaultBorder};
+  border-radius: ${Theme.borderRadius.m};
+  width: 100%;
+  font-family: "Lato", sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   ${(p) => setSize(p.inputSize)}
-  color: ${Theme.colors.text};
+  color: ${p => p.theme.inputDefaultTextColor};
   width: ${p => p.width ? p.width : '100%'};
+  ${p => p.type === 'password' && `padding-right:32px;`}
   :focus {
-    ${colorMode.default}
+    border-color: ${p => p.theme.inputFocusBorder};
+    background-color: ${p => p.theme.inputFocusBackground};
+    color:${p => p.theme.inputFocusTextColor};
   }
   :disabled{
-    ${colorMode.disabled}
+    background-color: ${p => p.theme.inputDisabledBackground};
+    border-color: ${p => p.theme.inputDisabledBorder};
+    color:${p => p.theme.inputDisabledTextColor};
     cursor: not-allowed;
   }
   ${p => p.error && `
-    ${colorMode.error}
+  background-color: ${p.theme.inputErrorBackground};
+  border-color: ${p.theme.inputErrorBorder};
+  color:${p.theme.inputErrorTextColor};
   `}
 `;
 export const InputLabelElement = styled(TextLabel) `
@@ -29,8 +46,13 @@ export const InputWrapper = styled.div `
   width: ${p => p.width ? p.width : '100%'};
 `;
 export const InputErrorMsg = styled.div `
-  color: ${Theme.colors.red};
+  color: ${p => p.theme.inputErrorTextColor};
   font-size: ${Theme.fontSize.s};
   position: absolute;
   bottom: -20px;
 `;
+export const EyeIconWrapper = styled.div `
+position: absolute;
+right: 2px;
+${(p) => setEyeTopPosition(p.size)}
+`;

package/dist/esm/components/Modal/Modal.js

@@ -1,19 +1,21 @@
 import { ElementHeader } from '../ElementHeader';
 import React from 'react';
-import { Theme } from '../../Theme/Theme';
+import { Theme, mainTheme } from '../../Theme/Theme';
 import { Aligment } from '../Aligment';
 import { Button } from '../Button';
 import { ScrollCotainer } from '../common';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
-export const Modal = ({ children, title, handleConfirm, handleClose, labelConfirm, labelClose, size = 'small', }) => {
+import { ThemeProvider } from 'styled-components';
+export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, labelConfirm, labelClose, submitDisabled, size = 'small', }) => {
     const isMultiButtons = () => {
         return handleConfirm !== undefined && labelConfirm !== undefined;
     };
-    return (React.createElement(ModalOverlayer, null,
-        React.createElement(ModalElement, { size: size },
-            React.createElement(ElementHeader, { title: title, handleClose: handleClose }),
-            React.createElement(ScrollCotainer, null, children),
-            React.createElement(Aligment, { justify: 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l },
-                React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
-                handleConfirm && labelConfirm && (React.createElement(Button, { onClick: handleConfirm, text: labelConfirm }))))));
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(ModalOverlayer, null,
+            React.createElement(ModalElement, { size: size },
+                React.createElement(ElementHeader, { title: title, handleClose: handleClose }),
+                React.createElement(ScrollCotainer, null, children),
+                React.createElement(Aligment, { justify: 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l },
+                    React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
+                    handleConfirm && labelConfirm && (React.createElement(Button, { onClick: handleConfirm, text: labelConfirm, disabled: submitDisabled })))))));
 };

package/dist/esm/components/Modal/Modal.styles.js

@@ -18,7 +18,7 @@ export const ModalElement = styled.div `
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  background-color: ${Theme.colors.white};
+  background-color: ${p => p.theme.contentBackground};
   border-radius: ${Theme.borderRadius.m};
   max-height: 100%;
   overflow: hidden;

package/dist/esm/components/common/inputStyles.js

@@ -15,25 +15,55 @@ export const defaultStyles = `
 `;
 export const sizes = {
     small: `
-  padding: ${Theme.padding.s};
   font-size: ${Theme.fontSize.s};
   line-height: ${Theme.lineHeight.s};
   `,
     medium: `
-  padding: ${Theme.padding.m};
   font-size: ${Theme.fontSize.m};
   line-height: ${Theme.lineHeight.m};
   `,
     large: `
-  padding: ${Theme.padding.m};
   font-size: ${Theme.fontSize.l};
   line-height: ${Theme.lineHeight.l};
   `
 };
+export const inputPadding = {
+    small: `
+  padding: ${Theme.padding.s};
+  `,
+    medium: `
+  padding: ${Theme.padding.m};
+  `,
+    large: `
+  padding: ${Theme.padding.m};
+  `
+};
+export const buttonPadding = {
+    small: `
+  padding: ${Theme.padding.s} ${Theme.padding.m};
+  `,
+    medium: `
+  padding: ${Theme.padding.m} ${Theme.padding.l};
+  `,
+    large: `
+  padding: ${Theme.padding.m} ${Theme.padding.l};
+  `
+};
+export const eyeTopPosition = {
+    small: `top:-2px;`,
+    medium: `top: 3px;`,
+    large: `top: 7px;`
+};
 export const setSize = (size) => {
-    return sizes[size];
+    return sizes[size] + inputPadding[size];
+};
+export const setButtonSize = (size) => {
+    return sizes[size] + buttonPadding[size];
+};
+export const setEyeTopPosition = (size) => {
+    return eyeTopPosition[size];
 };
-export const colorMode = {
+export const inputColorSchema = {
     default: `
     border-color: ${Theme.colors.primary};
     background-color: ${lighten(0.4, Theme.colors.primary)};

package/dist/types/Theme/Theme.d.ts

@@ -47,3 +47,26 @@ export declare const Theme: {
         m: string;
     };
 };
+export declare const mainTheme: {
+    action: string;
+    buttonText: string;
+    buttonPrimaryHover: string;
+    buttonSecondaryHover: string;
+    buttonInverseHover: string;
+    disabledBackground: string;
+    disabledText: string;
+    textColor: string;
+    inputDefaultBackground: string;
+    inputDefaultBorder: string;
+    inputDefaultTextColor: string;
+    inputFocusBackground: string;
+    inputFocusBorder: string;
+    inputFocusTextColor: string;
+    inputDisabledBackground: string;
+    inputDisabledBorder: string;
+    inputDisabledTextColor: string;
+    inputErrorBackground: string;
+    inputErrorBorder: string;
+    inputErrorTextColor: string;
+    contentBackground: string;
+};

package/dist/types/components/Button/Button.d.ts

@@ -6,6 +6,8 @@ export interface IButtonProps {
     size?: InputSize;
     right?: boolean;
     left?: boolean;
+    theme?: any;
+    disabled?: boolean;
     onClick: () => void;
 }
 export declare const Button: FC<IButtonProps>;

package/dist/types/components/Button/Button.styles.d.ts

@@ -4,6 +4,7 @@ interface IButtonElement {
     size: InputSize;
     right: boolean;
     left: boolean;
+    disabled: boolean;
 }
 export declare const ButtonElement: import("styled-components").StyledComponent<"button", any, IButtonElement, never>;
 export {};

package/dist/types/components/DropdownMenu/DropdownMenu.d.ts

@@ -12,6 +12,8 @@ interface IDropdownMenuProps {
     footerText?: string;
     footerAction?: () => void;
     options: IAction[];
+    right?: boolean;
+    left?: boolean;
 }
 export declare const DropdownMenu: FC<IDropdownMenuProps>;
 export {};

package/dist/types/components/Icons/Icon.d.ts

@@ -3,8 +3,11 @@ export interface IIconActionProps {
     name: string;
     size?: number;
     color?: string;
+    right?: boolean;
+    left?: boolean;
     bgColor?: boolean;
     onClick?: () => void;
     active?: boolean;
+    noHover?: boolean;
 }
 export declare const Icon: FC<IIconActionProps>;

package/dist/types/components/Icons/Icon.styles.d.ts

@@ -2,6 +2,9 @@ interface IIconElementProps {
     bgColor?: boolean;
     onClick?: () => void;
     active: boolean;
+    right: boolean;
+    left: boolean;
+    noHover: boolean;
 }
 export declare const IconElement: import("styled-components").StyledComponent<"div", any, IIconElementProps, never>;
 export {};

package/dist/types/components/Icons/IconsPath.d.ts

@@ -8,6 +8,7 @@ export declare const iconsPath: {
     add_circle: string;
     account: string;
     visibility: string;
+    visability_off: string;
     search: string;
     more_vert: string;
     menu: string;

package/dist/types/components/Input/Input.d.ts

@@ -7,5 +7,6 @@ export interface IInputProps extends IFormElement {
     min?: number;
     max?: number;
     step?: number;
+    theme?: any;
 }
 export declare const Input: FC<IInputProps>;

package/dist/types/components/Input/Input.styles.d.ts

@@ -1,10 +1,12 @@
 import { InputHTMLAttributes } from "react";
-import { InputSize } from "../../types";
+import { InputSize, InputType } from "../../types";
 interface IInputTextElementProps extends InputHTMLAttributes<HTMLInputElement> {
     inputSize: InputSize;
     disabled: boolean;
     error?: string;
     width?: string;
+    type: InputType;
+    theme: any;
 }
 export declare const InputTextElement: import("styled-components").StyledComponent<"input", any, IInputTextElementProps, never>;
 export declare const InputLabelElement: import("styled-components").StyledComponent<"div", any, import("../Typography").ITextLabelProps, never>;
@@ -13,4 +15,8 @@ interface IInputWrapperProps {
 }
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, IInputWrapperProps, never>;
 export declare const InputErrorMsg: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IEyeIconWrapperProps {
+    size: InputSize;
+}
+export declare const EyeIconWrapper: import("styled-components").StyledComponent<"div", any, IEyeIconWrapperProps, never>;
 export {};

package/dist/types/components/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 export interface IModalProps {
+    theme?: any;
     children: React.ReactNode;
     title?: string;
     handleConfirm?: () => void;
@@ -7,5 +8,6 @@ export interface IModalProps {
     labelConfirm?: string;
     labelClose: string;
     size?: string;
+    submitDisabled?: boolean;
 }
 export declare const Modal: FC<IModalProps>;

package/dist/types/components/Modal/Modal.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const ModalOverlayer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IModalElementProp {
     size: string;
+    theme: any;
 }
 export declare const ModalElement: import("styled-components").StyledComponent<"div", any, IModalElementProp, never>;
 export {};

package/dist/types/components/common/inputStyles.d.ts

@@ -5,8 +5,25 @@ export declare const sizes: {
     medium: string;
     large: string;
 };
+export declare const inputPadding: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const buttonPadding: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const eyeTopPosition: {
+    small: string;
+    medium: string;
+    large: string;
+};
 export declare const setSize: (size: InputSize) => string;
-export declare const colorMode: {
+export declare const setButtonSize: (size: InputSize) => string;
+export declare const setEyeTopPosition: (size: InputSize) => string;
+export declare const inputColorSchema: {
     default: string;
     disabled: string;
     error: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",