venice-ui 1.0.58 → 1.0.61

package/dist/cjs/Theme/Theme.js

@@ -1,18 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mainTheme = exports.Theme = void 0;
+exports.mainTheme = exports.Theme = exports.pallete = void 0;
 const polished_1 = require("polished");
+exports.pallete = {
+    primary: "#4c95c5",
+    accent: '#e4b485',
+};
 exports.Theme = {
     colors: {
-        primary: "#4c95c5",
+        primary: exports.pallete.primary,
+        primary_40: (0, polished_1.lighten)(0.1, exports.pallete.primary),
+        primary_30: (0, polished_1.lighten)(0.2, exports.pallete.primary),
+        primary_20: (0, polished_1.lighten)(0.3, exports.pallete.primary),
+        primary_10: (0, polished_1.lighten)(0.4, exports.pallete.primary),
+        accent: exports.pallete.accent,
+        accent_light: (0, polished_1.lighten)(0.2, exports.pallete.accent),
+        black: "#000000",
         text: '#333333',
-        disableText: "#979797",
-        disableBackground: '#e7e7e7',
+        gray_1: '#979797',
+        gray_2: "#b7b7b7",
+        gray_3: "#e3e3e3",
+        gray_4: '#f3f3f3',
         white: "#ffffff",
-        black: "#333333",
-        gray_1: "#b7b7b7",
-        gray_2: "#e3e3e3",
-        gray_3: '#f3f3f3',
         overlayer: 'rgba(0,0,0,0.4)',
         red: '#ad1616'
     },
@@ -59,20 +68,20 @@ exports.mainTheme = {
     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,
+    disabledBackground: exports.Theme.colors.gray_4,
+    disabledText: exports.Theme.colors.gray_1,
     //text
     textColor: exports.Theme.colors.text,
     // input
     inputDefaultBackground: exports.Theme.colors.white,
-    inputDefaultBorder: exports.Theme.colors.gray_1,
+    inputDefaultBorder: exports.Theme.colors.gray_2,
     inputDefaultTextColor: exports.Theme.colors.text,
-    inputFocusBackground: (0, polished_1.lighten)(0.4, exports.Theme.colors.primary),
-    inputFocusBorder: exports.Theme.colors.primary,
+    inputFocusBackground: exports.Theme.colors.accent_light,
+    inputFocusBorder: exports.Theme.colors.accent,
     inputFocusTextColor: exports.Theme.colors.text,
-    inputDisabledBackground: exports.Theme.colors.disableBackground,
-    inputDisabledBorder: exports.Theme.colors.disableText,
-    inputDisabledTextColor: exports.Theme.colors.disableText,
+    inputDisabledBackground: exports.Theme.colors.gray_4,
+    inputDisabledBorder: exports.Theme.colors.gray_1,
+    inputDisabledTextColor: exports.Theme.colors.gray_1,
     inputErrorBackground: (0, polished_1.lighten)(0.5, exports.Theme.colors.red),
     inputErrorBorder: exports.Theme.colors.red,
     inputErrorTextColor: exports.Theme.colors.red,
@@ -82,14 +91,15 @@ exports.mainTheme = {
     optionActiveColor: exports.Theme.colors.primary,
     optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     //table
-    tableBorderColor: exports.Theme.colors.gray_2,
+    tableBorderColor: exports.Theme.colors.gray_3,
     tableHeaderBackground: exports.Theme.colors.white,
     tableHeaderActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     tableCellBackground: exports.Theme.colors.white,
-    tableCellEvenBackground: exports.Theme.colors.gray_3,
+    tableCellEvenBackground: exports.Theme.colors.gray_4,
     tableCellHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     tableCellActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     tableCellSortIcon: exports.Theme.colors.primary,
+    tableMoreIconColor: exports.Theme.colors.primary,
     // chips
     chipsNeutralBackground: exports.Theme.colors.primary,
     chipsNeutralTextColor: exports.Theme.colors.white

package/dist/cjs/components/ButtonsFooter/ButtonsFooter.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsFooter = void 0;
+const Button_1 = require("../Button");
+const Theme_1 = require("../../Theme/Theme");
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const ButtonsFooter_style_1 = require("./ButtonsFooter.style");
+const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose, labelAdditional, submitDisabled, submitLoader, }) => {
+    const isAdditional = () => {
+        return labelAdditional !== undefined && handleAdditional !== undefined;
+    };
+    const isMultiButtons = () => {
+        return handleConfirm !== undefined && labelConfirm !== undefined;
+    };
+    return (react_1.default.createElement(Aligment_1.Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l },
+        labelAdditional && handleAdditional && (react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null, !submitLoader && (react_1.default.createElement(Button_1.Button, { mode: 'inverse', onClick: () => handleAdditional(), text: labelAdditional, left: isMultiButtons() })))),
+        react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null,
+            !submitLoader && (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, loader: submitLoader })))));
+};
+exports.ButtonsFooter = ButtonsFooter;

package/dist/cjs/components/ButtonsFooter/ButtonsFooter.style.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsFooterGroup = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ButtonsFooterGroup = styled_components_1.default.div `
+    display:flex;
+`;

package/dist/cjs/components/ButtonsFooter/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsFooter = void 0;
+var ButtonsFooter_1 = require("./ButtonsFooter");
+Object.defineProperty(exports, "ButtonsFooter", { enumerable: true, get: function () { return ButtonsFooter_1.ButtonsFooter; } });

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, right = false, left = false, }) => {
+const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1.Theme.colors.text, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, iconInverseMode = false, iconHoverColor = Theme_1.Theme.colors.primary_10, targetID }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const close = () => {
@@ -42,7 +42,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1
         close();
     };
     const handleClick = (action) => {
-        action();
+        targetID ? action(targetID) : action();
         close();
     };
     (0, react_1.useEffect)(() => {
@@ -57,9 +57,9 @@ 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, right: right, left: left }),
+        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, hoverColor: iconHoverColor, size: (0, common_1.setIconSize)(size), active: open, right: right, left: left, inverseMode: iconInverseMode }),
         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" },
+            react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
                 header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
                     headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
                     headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),

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

@@ -15,20 +15,24 @@ exports.DropdownMenuElement = styled_components_1.default.div `
   min-width:40px;
 `;
 exports.DropdownMenuHeader = styled_components_1.default.div `
-  border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_2};
-  padding-bottom: ${Theme_1.Theme.padding.m};
+  border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_3};
+  padding: ${Theme_1.Theme.padding.m};
   width:100%;
+  box-sizing: border-box;
 `;
 exports.DropdownMenuFooter = styled_components_1.default.div `
-  border-top: 1px solid  ${Theme_1.Theme.colors.gray_2};
-  padding-top: ${Theme_1.Theme.padding.m};
+  border-top: 1px solid  ${Theme_1.Theme.colors.gray_3};
+  padding: ${Theme_1.Theme.padding.m};
   width:100%;
+  box-sizing: border-box;
 `;
 exports.DropdownMenuContent = styled_components_1.default.div `
   width:100%;
 `;
 exports.DropdownMenuOption = styled_components_1.default.div `
-  padding: ${Theme_1.Theme.padding.s} 0;
+  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.s};
+  text-align:left;
+  min-width:80px;
   cursor: pointer;
   white-space: nowrap;
   color: ${Theme_1.Theme.colors.text};

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

@@ -15,7 +15,7 @@ const ElementHeader = ({ title, showTitle = true, moreIcon = false, backIcon = f
     const leftSide = () => {
         if (showTitle) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: 'center', direction: 'row', width: "auto" },
-                backIcon && handleBack && (react_1.default.createElement(Icons_1.Icon, { name: "back_arrow", onClick: () => handleBack() })),
+                backIcon && handleBack && (react_1.default.createElement(Icons_1.Icon, { name: "back_arrow", onClick: () => handleBack(), left: true, color: Theme_1.Theme.colors.text })),
                 react_1.default.createElement(Typography_1.TextHeader, null, title)));
         }
         else if (!showTitle && children) {
@@ -24,10 +24,10 @@ const ElementHeader = ({ title, showTitle = true, moreIcon = false, backIcon = f
     };
     const rightSide = () => {
         if (closeIcon && handleClose) {
-            return react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close" });
+            return react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close", color: Theme_1.Theme.colors.text });
         }
         else if (!closeIcon && actionButton && handleClick) {
-            return (react_1.default.createElement(Aligment_1.Aligment, { align: "flex-end", width: "auto" },
+            return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", width: "auto" },
                 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 })));
         }

package/dist/cjs/components/Filters/Filters.js

@@ -179,9 +179,8 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
         react_1.default.createElement(Filters_styles_1.FilterIconArea, null,
             react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toogleFilter, color: setIconColor() }),
             isAnyFilterActive() && (react_1.default.createElement(Chips_1.Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
-        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, labelConfirm: labelConfirm, labelClose: labelClose },
+        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "column", align: 'flex-end' },
-                react_1.default.createElement(Chips_1.Chips, { handleClose: resetAllFilters, label: labelClearAll }),
                 react_1.default.createElement(Filters_styles_1.FiltersArea, null, filters.map((filter) => (react_1.default.createElement(Filters_styles_1.FilterSection, null,
                     react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap" },
                         react_1.default.createElement(Typography_1.TextAccent, null, filter.label),

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, 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 },
+const Icon = ({ size = 24, name, right = false, left = false, color = Theme_1.Theme.colors.text, hoverColor = Theme_1.Theme.colors.primary_10, active = false, inverseMode = false, onClick, }) => {
+    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: onClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode },
         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

@@ -4,32 +4,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconElement = void 0;
-const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
 exports.IconElement = styled_components_1.default.div `
   transition: 300ms;
   box-sizing: border-box;
-  width:auto;
-  display:inline-flex;
-  border-radius: 50%;
+  width: auto;
+  display: inline-flex;
+  border-radius: ${Theme_1.Theme.borderRadius.m};
   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: 4px;
+  ${(p) => p.onClick !== undefined &&
     `
-    padding: ${Theme_1.Theme.padding.s};
     cursor:pointer;
-    ${!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{
+    path {
+      fill:${(p) => (p.color ? p.color : Theme_1.Theme.colors.primary)};
+      }
+    &:hover{
       cursor:pointer;
-    }
-  `}
-  ${p => p.active && `
-  background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : (0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
+      ${!p.inverseMode
+        ? `
+        background-color:${p.hoverColor};  
+      `
+        : `
+      path{
+        fill:${p.hoverColor};
+      }
+      `}
+      }
   `}
+
+  ${(p) => p.active &&
+    `
+    background-color:${p.hoverColor};path {
+    }`}
 `;

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

@@ -14,6 +14,7 @@ exports.iconsPath = {
     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",
+    more_horiz: "M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z",
     menu: "M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z",
     unlock: "M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z",
     lock: "M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z",

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

@@ -10,9 +10,9 @@ const Icon_1 = require("./Icon");
 const IconsPath_1 = require("./IconsPath");
 const example_1 = require("../../example");
 const IconsShows = () => {
-    return (react_1.default.createElement(Aligment_1.Aligment, { gap: 5 },
+    return (react_1.default.createElement(Aligment_1.Aligment, { gap: 10 },
         react_1.default.createElement(react_1.default.Fragment, null, Object.keys(IconsPath_1.iconsPath).map((iconPath) => (react_1.default.createElement(example_1.IconsShowroom, null,
             react_1.default.createElement(Icon_1.Icon, { name: iconPath, size: 48 }),
-            iconPath))))));
+            react_1.default.createElement(example_1.IconName, null, iconPath)))))));
 };
 exports.IconsShows = IconsShows;

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

@@ -45,7 +45,7 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             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 }))),
+                    react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, color: theme.inputDefaultTextColor, inverseMode: true }))),
                 error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));
 };
 exports.Input = Input;

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

@@ -4,25 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
+const ElementHeader_1 = require("../ElementHeader");
 const Theme_1 = require("../../Theme/Theme");
-const Aligment_1 = require("../Aligment");
-const Button_1 = require("../Button");
 const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
 const styled_components_1 = require("styled-components");
-const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, labelConfirm, labelClose, submitDisabled, size = 'small', submitLoader = false }) => {
-    const isMultiButtons = () => {
-        return handleConfirm !== undefined && labelConfirm !== undefined;
-    };
+const ButtonsFooter_1 = require("../ButtonsFooter");
+const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose, labelAdditional, submitDisabled, size = 'small', submitLoader = false, }) => {
     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, loader: submitLoader })))))));
+                react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader })))));
 };
 exports.Modal = Modal;

package/dist/cjs/components/Table/Table.js

@@ -34,19 +34,29 @@ const Aligment_1 = require("../Aligment");
 const Filters_1 = require("../Filters");
 const tableHelper_1 = require("./tableHelper");
 const Chips_1 = require("../Chips");
+const DropdownMenu_1 = require("../DropdownMenu");
 const Table = ({ theme = Theme_1.mainTheme, headers, elements, 
 // isBulkAction = false,
 hover = true, selectable = true, sortable = true, filtrable = false, sort = {
     name: '',
     order: 'none',
-}, filters = [], 
-// haveMore = false,
-// moreActions = [],
-onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', filtersCancelLabel = 'Cancel', filterClearAllLabel = 'Clear all filters', sortClearLabel = 'Clear sorting', }) => {
+}, filters = [], moreActions = [], onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', filtersCancelLabel = 'Cancel', filterClearAllLabel = 'Clear all filters', sortClearLabel = 'Clear sorting', }) => {
+    const checkHeaders = () => {
+        const tableHeaders = [...headers];
+        if (moreActions.length > 0) {
+            tableHeaders.push({
+                name: 'opiton',
+                valueSource: 'empty',
+                action: true,
+            });
+        }
+        return tableHeaders;
+    };
     const [tableProps, setTableProps] = (0, react_1.useState)({
         elements: (0, tableHelper_1.setElements)(elements, sort, filters),
         sort: sort,
         filters: filters,
+        headers: checkHeaders(),
     });
     (0, react_1.useEffect)(() => {
         setTableProps({
@@ -95,19 +105,18 @@ onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', fi
                 sortable && tableProps.sort.name !== '' && (react_1.default.createElement(Chips_1.Chips, { label: sortClearLabel, handleClose: resetSorting }))))),
         react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             react_1.default.createElement(Table_styles_1.TableHead, null,
-                react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, headers.map((header) => (react_1.default.createElement(Table_styles_1.TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
+                react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableHeaderCell, null)) : (react_1.default.createElement(Table_styles_1.TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
                         tableProps.sort.order != 'none' },
                     header.name,
                     tableProps.sort.name === header.valueSource &&
                         tableProps.sort.order != 'none' && (react_1.default.createElement(Table_styles_1.TableHeaderSortIcon, null,
                         react_1.default.createElement(Icons_1.Icon, { name: tableProps.sort.order === 'asc'
                                 ? 'arrow_drop_down'
-                                : 'arrow_drop_up', color: theme.tableCellSortIcon, size: 20 })))))))),
-            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, headers.map((header) => {
-                return (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
-                    ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
-                    : item[header.valueSource]));
-                // }
-            }))))))));
+                                : 'arrow_drop_up', color: theme.tableCellSortIcon, size: 20 })))))))))),
+            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
+                react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: 'more_vert', color: theme.tableMoreIconColor, iconInverseMode: true })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
+                ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
+                : item[header.valueSource]))))))))))));
 };
 exports.Table = Table;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableTopBar = exports.TableCell = exports.TableRow = exports.TableHeaderSortIcon = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
+exports.OptionTableCellWrapper = exports.OptionTableCell = exports.TableTopBar = exports.TableCell = exports.TableRow = exports.TableHeaderSortIcon = exports.OptionTableHeaderCell = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.TableWrapper = styled_components_1.default.table `
   width: 100%;
@@ -20,43 +20,58 @@ exports.TableHeaderCell = styled_components_1.default.th `
   padding: 8px;
   transition: 300ms;
   font-size: 14px;
-  background-color: ${(p) => p.isSorted ? p.theme.tableHeaderActiveBackground : p.theme.tableHeaderBackground};
+  background-color: ${(p) => p.isSorted
+    ? p.theme.tableHeaderActiveBackground
+    : p.theme.tableHeaderBackground};
   border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
 
   :hover {
-    background-color: ${(p) => p.isSorted ? p.theme.tableHeaderActiveBackground : p.theme.tableHeaderBackground};
+    background-color: ${(p) => p.isSorted
+    ? p.theme.tableHeaderActiveBackground
+    : p.theme.tableHeaderBackground};
   }
- 
+
   ${(p) => p.sortable &&
     `
     cursor:pointer;
   `}
   position:relative;
-
+`;
+exports.OptionTableHeaderCell = styled_components_1.default.th `
+  font-weight: bold;
+  text-align: left;
+  width: 28px;
+  transition: 300ms;
+  font-size: 14px;
+  background-color: ${(p) => p.theme.tableHeaderBackground};
+  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
 `;
 exports.TableHeaderSortIcon = styled_components_1.default.div `
   width: 20px;
   height: 20px;
-  position:absolute;
-  right:0;
+  position: absolute;
+  right: 0;
   transition: 300ms;
   top: calc(50% - 10px);
 `;
 exports.TableRow = styled_components_1.default.tr `
-  background-color: ${(p) => p.active ? p.theme.tableCellActiveBackground : p.theme.tableCellEvenBackground};
+  background-color: ${(p) => p.active
+    ? p.theme.tableCellActiveBackground
+    : p.theme.tableCellEvenBackground};
   :nth-child(even) {
     background-color: ${(p) => p.active
     ? p.theme.tableCellActiveBackground
     : p.theme.tableCellBackground};
     transition: 300ms;
   }
-  ${(p) => (p.selectable && p.onClick) &&
+  ${(p) => (p.selectable || p.onClick) &&
     `
   cursor:pointer;`}
   ${(p) => p.hover &&
     `
   :hover{
     background-color:${p.theme.tableCellHoverBackground};
+
   }
   `}
 `;
@@ -65,5 +80,13 @@ exports.TableCell = styled_components_1.default.td `
   border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
 `;
 exports.TableTopBar = styled_components_1.default.div `
-  padding-bottom:4px;
+  padding-bottom: 4px;
+`;
+exports.OptionTableCell = styled_components_1.default.td `
+  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+  text-align: center;
+`;
+exports.OptionTableCellWrapper = styled_components_1.default.div `
+  width: 40px;
+  display: flex;
 `;

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

@@ -28,7 +28,7 @@ exports.Panel = styled_components_1.default.div `
   position: absolute;
   z-index: ${Theme_1.Theme.zIndex.dropdown};
   top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
-  border: 1px solid ${Theme_1.Theme.colors.gray_1};
+  border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-top: none;
   ${p => (0, inputStyles_1.setPanelPosition)(p.position)}
 `;

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

@@ -6,7 +6,7 @@ const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
   box-sizing: border-box;
   background-color: ${Theme_1.Theme.colors.white};
-  border: 1px solid ${Theme_1.Theme.colors.gray_1};
+  border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-radius: ${Theme_1.Theme.borderRadius.m};
   width: 100%;
   font-family: "Lato", sans-serif;
@@ -97,9 +97,9 @@ exports.inputColorSchema = {
     background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   `,
     disabled: `
-    border-color: ${Theme_1.Theme.colors.disableText};
-    background-color: ${(0, polished_1.lighten)(0.2, Theme_1.Theme.colors.gray_1)};
-    color:${Theme_1.Theme.colors.disableText};
+    border-color: ${Theme_1.Theme.colors.gray_1};
+    background-color: ${(0, polished_1.lighten)(0.2, Theme_1.Theme.colors.gray_2)};
+    color:${Theme_1.Theme.colors.gray_1};
   `,
     error: `
     border-color: ${Theme_1.Theme.colors.red};

package/dist/cjs/example/Colors.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Colors = void 0;
+const react_1 = __importDefault(require("react"));
+const ExampleComponent_1 = require("./ExampleComponent");
+const Theme_1 = require("../Theme");
+const Colors = () => {
+    return (react_1.default.createElement(ExampleComponent_1.ColorsPreviewArea, null, Object.entries(Theme_1.Theme.colors).map(([key, value]) => (react_1.default.createElement(ExampleComponent_1.ColorsPreviewRow, null,
+        react_1.default.createElement(ExampleComponent_1.ColorsPreview, { color: value }),
+        react_1.default.createElement(ExampleComponent_1.ColorsDesc, null,
+            key,
+            react_1.default.createElement("br", null),
+            value))))));
+};
+exports.Colors = Colors;