venice-ui 1.6.6 → 2.0.2

package/dist/cjs/Theme/Theme.js

@@ -70,6 +70,9 @@ exports.mainTheme = {
     buttonInverseHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     disabledBackground: exports.Theme.colors.gray_4,
     disabledText: exports.Theme.colors.gray_1,
+    errorBackgroundColor: exports.Theme.colors.red,
+    errorBackgroundColorHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.red),
+    errorBackgroundColorHoverLight: (0, polished_1.lighten)(0.5, exports.Theme.colors.red),
     //icon
     iconColor: exports.Theme.colors.text,
     iconHoverColor: exports.Theme.colors.primary,
@@ -82,8 +85,8 @@ exports.mainTheme = {
     inputDefaultBackground: exports.Theme.colors.white,
     inputDefaultBorder: exports.Theme.colors.gray_2,
     inputDefaultTextColor: exports.Theme.colors.text,
-    inputFocusBackground: exports.Theme.colors.accent_light,
-    inputFocusBorder: exports.Theme.colors.accent,
+    inputFocusBackground: (0, polished_1.lighten)(0.45, exports.Theme.colors.primary),
+    inputFocusBorder: exports.Theme.colors.primary,
     inputFocusTextColor: exports.Theme.colors.text,
     inputDisabledBackground: exports.Theme.colors.gray_4,
     inputDisabledBorder: exports.Theme.colors.gray_1,
@@ -105,7 +108,8 @@ exports.mainTheme = {
     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,
+    tableMoreIconColor: exports.Theme.colors.text,
+    tableHoverMoreIconColor: exports.Theme.colors.primary,
     // chips
     chipsNeutralBackground: exports.Theme.colors.primary,
     chipsNeutralTextColor: exports.Theme.colors.white,

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

@@ -9,12 +9,12 @@ const styled_components_1 = require("styled-components");
 const Theme_1 = require("../../Theme");
 const Button_styles_1 = require("./Button.styles");
 const Loader_1 = require("../Loader");
-const Button = ({ text = 'Click me', mode = 'primary', size = 'medium', right = false, left = false, theme = Theme_1.mainTheme, disabled = false, onClick, loader = false, }) => {
+const Button = ({ text = 'Click me', mode = 'primary', size = 'medium', right = false, left = false, theme = Theme_1.mainTheme, disabled = false, onClick, loader = false, errorVariant = false, }) => {
     const handleClick = () => {
-        (!disabled && !loader) && onClick();
+        !disabled && !loader && 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, loader: loader }, loader ? (react_1.default.createElement(Button_styles_1.ButtonLoader, { size: size },
+        react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick, loader: loader, errorVariant: errorVariant }, loader ? (react_1.default.createElement(Button_styles_1.ButtonLoader, { size: size },
             react_1.default.createElement(Loader_1.Loader, { size: "small", color: mode === 'primary' ? theme.buttonText : theme.action }))) : (text))));
 };
 exports.Button = Button;

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

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
 exports.ButtonElement = styled_components_1.default.button `
   align-items: center;
-  border-radius: ${Theme_1.Theme.borderRadius.s};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -20,53 +20,53 @@ exports.ButtonElement = styled_components_1.default.button `
   overflow: hidden;
   transition: 300ms;
   white-space: nowrap;
-
   ${(p) => p.mode === 'primary' &&
     `background-color: ${p.theme.action};
-    border: 1px solid rgba(0,0,0,0.15);
+    border: none;
     color: ${p.theme.buttonText};
+  ${p.errorVariant &&
+        `background-color:${p.theme.errorBackgroundColor};
+      border:none;`}
+  
     &:disabled{
       color: ${p.theme.disabledText};
       background-color: ${p.theme.disabledBackground};
     }
     `}
+
   ${(p) => p.mode === 'secondary' &&
     `background-color: transparent;
-    border: 1px solid ${p.theme.action};
+    border: none;
     color: ${p.theme.action};
+    ${p.errorVariant &&
+        `color:${p.theme.errorBackgroundColor};
+      border:none;`}
     &:disabled{
       color: ${p.theme.disabledText};
       border: 1px solid ${p.theme.disabledText};
     }
     `}
-  ${(p) => p.mode === 'inverse' &&
-    `background-color:transparent;
-    border:none;
-    color: ${p.theme.action};
-    &:disabled{
-      color: ${p.theme.disabledText};
-    }
-    `}
-    ${(p) => (0, common_1.setButtonSize)(p.size, p.loader)}
+  
+    
+
+  ${(p) => (0, common_1.setButtonSize)(p.size, p.loader)}
   &:hover {
     transition: 300ms;
     ${(p) => p.mode === 'primary' &&
     `background-color: ${p.theme.buttonPrimaryHover};
+      ${p.errorVariant &&
+        `background-color:${p.theme.errorBackgroundColorHover};`}
       &:disabled {
         background-color: ${p.theme.disabledBackground};
       }`}
 
     ${(p) => p.mode === 'secondary' &&
     `background-color: ${p.theme.buttonSecondaryHover};
+      ${p.errorVariant &&
+        `background-color:${p.theme.errorBackgroundColorHoverLight};`}
       &:disabled {
         background-color: transparent;
       }`};
-
-    ${(p) => p.mode === 'inverse' &&
-    `background-color: ${p.theme.buttonInverseHover};
-      &:disabled{
-        background-color: transparent;
-      }`}
   }
 
   &:disabled {

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

@@ -29,7 +29,7 @@ const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConf
     };
     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, backgroundColor: backgroundColor },
         labelAdditional && handleAdditional && (react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null, !submitLoader && (react_1.default.createElement(react_1.default.Fragment, null,
-            additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { mode: 'inverse', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
+            additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { errorVariant: true, mode: 'secondary', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
             additionalType === 'toogle' && (react_1.default.createElement(Toogle_1.Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
         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() })),

package/dist/cjs/components/Card/Card.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const Card_styles_1 = require("./Card.styles");
 const ElementHeader_1 = require("../ElementHeader");
 const Theme_1 = require("../../Theme");
-const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, }) => {
-    return (react_1.default.createElement(Card_styles_1.CardElement, { height: height },
-        (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor })),
-        react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !title && !actionLabel }, children)));
+const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false }) => {
+    return (react_1.default.createElement(Card_styles_1.CardElement, { height: height, shadow: shadow },
+        (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader })),
+        react_1.default.createElement(Card_styles_1.CardContent, null, children)));
 };
 exports.Card = Card;

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

@@ -13,15 +13,14 @@ exports.CardElement = styled_components_1.default.div `
   width: 100%;
   background-color: ${Theme_1.Theme.colors.white};
   border-radius: ${Theme_1.Theme.borderRadius.m};
-  height: ${p => p.height ? p.height : '100%'};
-  box-shadow: ${Theme_1.Theme.shadow.s};
+  height: ${(p) => (p.height ? p.height : '100%')};
+  ${(p) => p.shadow && `box-shadow: ${Theme_1.Theme.shadow.s};`}
 `;
 exports.CardContent = styled_components_1.default.div `
-  box-sizing: border-box; 
+  box-sizing: border-box;
   display: flex;
-  padding:  ${Theme_1.Theme.padding.l};
+  padding: ${Theme_1.Theme.padding.l};
   width: 100%;
   flex-direction: row;
-  ${p => !p.soloMode && `
-  padding-top:0px;`}
-  `;
+
+`;

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

@@ -30,7 +30,7 @@ exports.DropdownMenuContent = styled_components_1.default.div `
   width:100%;
 `;
 exports.DropdownMenuOption = styled_components_1.default.div `
-  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.s};
+  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
   text-align:left;
   min-width:80px;
   cursor: pointer;

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

@@ -11,7 +11,8 @@ const Typography_1 = require("../Typography");
 const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
 const DropdownMenu_1 = require("../DropdownMenu");
-const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, }) => {
+const ElementHeader_styles_1 = require("./ElementHeader.styles");
+const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, }) => {
     const leftSide = () => {
         if (title) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", direction: "row", width: "auto" },
@@ -32,7 +33,7 @@ const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, hand
                 options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor }))));
         }
     };
-    return (react_1.default.createElement(Aligment_1.Aligment, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor },
+    return (react_1.default.createElement(ElementHeader_styles_1.ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },
         react_1.default.createElement(react_1.default.Fragment, null,
             leftSide(),
             rightSide())));

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementHeaderWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Aligment_1 = require("../Aligment");
+exports.ElementHeaderWrapper = (0, styled_components_1.default)(Aligment_1.Aligment) `
+  width: 100%;
+  ${(p) => p.bottomDivader &&
+    `
+    border-bottom: 2px solid rgba(0, 0, 0, 0.14);
+    overflow-x:hidden;
+    `}
+    `;
+// box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

package/dist/cjs/components/File/File.js

@@ -43,7 +43,7 @@ const File = ({ label, labelPosition = 'top', name, disabled = false, multiple =
         react_1.default.createElement(Input_1.InputWrapper, { width: width },
             react_1.default.createElement(Aligment_1.Aligment, { gap: 10, wrap: "nowrap" },
                 react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
-                react_1.default.createElement(Button_1.Button, { size: size, mode: "inverse", onClick: openFileSelector, text: "Wybierz plik" })),
+                react_1.default.createElement(Button_1.Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
             react_1.default.createElement(File_styles_1.HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
             error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
 };

package/dist/cjs/components/Form/Form.js

@@ -38,11 +38,11 @@ const Form = ({ formData, size = 'medium', read }) => {
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read }));
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'number':
-                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read }));
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'increase':
-                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read }));
+                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'file':
                 return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
         }

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

@@ -68,7 +68,7 @@ exports.InputReadOnlyElement = styled_components_1.default.div `
 `;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
-  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
+  ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme_1.Theme.padding.s};`}
 `;
 exports.InputWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -11,11 +11,11 @@ const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
 const styled_components_1 = require("styled-components");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, }) => {
+const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = 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(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
                 react_1.default.createElement(common_1.ScrollCotainer, null, children),
                 react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue })))));
 };

package/dist/cjs/components/Section/Section.js

@@ -13,7 +13,7 @@ const Section = ({ title, children, titlePosition = 'left', noPadding = false, t
     return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor },
         title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
             react_1.default.createElement(Typography_1.TextSubHeader, null, title),
-            titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "small", mode: "inverse" })))),
+            titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
         react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noPadding }, children)));
 };
 exports.Section = Section;

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

@@ -104,7 +104,7 @@ hover = true, selectable = true, sortable = true, sort = {
                                 : 'arrow_drop_up', iconColor: 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, { key: `${item.id}-${header.name}-action` },
                 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", iconColor: theme.tableMoreIconColor })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: 'transparent' })))) : (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]))))))))))));
 };

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

@@ -12,10 +12,11 @@ exports.TableHead = styled_components_1.default.thead `
   tr:first-child {
     position: sticky;
     top: 0;
+    z-index:10;
   }
 `;
 exports.TableHeaderCell = styled_components_1.default.th `
-  font-weight: bold;
+  font-weight: normal;
   text-align: left;
   padding: 8px;
   transition: 300ms;
@@ -23,7 +24,7 @@ exports.TableHeaderCell = styled_components_1.default.th `
   background-color: ${(p) => p.isSorted
     ? p.theme.tableHeaderActiveBackground
     : p.theme.tableHeaderBackground};
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
 
   :hover {
     background-color: ${(p) => p.isSorted
@@ -44,7 +45,7 @@ exports.OptionTableHeaderCell = styled_components_1.default.th `
   transition: 300ms;
   font-size: 14px;
   background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
 `;
 exports.TableHeaderSortIcon = styled_components_1.default.div `
   width: 20px;
@@ -58,7 +59,7 @@ exports.TableRow = styled_components_1.default.tr `
   background-color: ${(p) => p.active
     ? p.theme.tableCellActiveBackground
     : p.theme.tableCellEvenBackground};
-  :nth-child(even) {
+  :nth-child(odd) {
     background-color: ${(p) => p.active
     ? p.theme.tableCellActiveBackground
     : p.theme.tableCellBackground};
@@ -77,10 +78,9 @@ exports.TableRow = styled_components_1.default.tr `
 `;
 exports.TableCell = styled_components_1.default.td `
   padding: 8px;
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+
 `;
 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 `

package/dist/cjs/components/Tile/Tile.js

@@ -8,9 +8,9 @@ const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
 const Theme_1 = require("../../Theme");
-const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', }) => {
+const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false }) => {
     return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
-        title && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, backgroundColor: backgroundColor })),
+        title && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
         children));
 };
 exports.Tile = Tile;

package/dist/cjs/components/Toogle/Toogle.js

@@ -12,11 +12,11 @@ const Input_1 = require("../Input");
 const Toogle_styles_1 = require("./Toogle.styles");
 const Toogle = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
             react_1.default.createElement(Input_1.InputWrapper, { width: width },
                 react_1.default.createElement(Toogle_styles_1.ToogleElementWrapper, { size: size },
                     react_1.default.createElement(Toogle_styles_1.ToogleElement, { size: size, active: value, onClick: () => handleClick(!value) },
-                        react_1.default.createElement(Toogle_styles_1.ToogleElementPoint, { size: size, active: value })))))));
+                        react_1.default.createElement(Toogle_styles_1.ToogleElementPoint, { size: size, active: value })))),
+            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
 };
 exports.Toogle = Toogle;

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

@@ -11,17 +11,16 @@ exports.ToogleElementWrapper = styled_components_1.default.div `
 `;
 exports.ToogleElementPoint = styled_components_1.default.div `
   background-color: ${(p) => p.theme.inputDefaultBackground};
-  width: 20px;
-  height: 20px;
   border-radius: 50%;
   top: 0px;
-  height: 22px;
-  width: 22px;
+  height: ${(p) => (p.size === 'small' ? '18px' : '22px')};
+  width: ${(p) => (p.size === 'small' ? '18px' : '22px')};
   transition: 300ms;
   position: absolute;
   ${(p) => p.active && `left:0px;`}
   ${(p) => !p.active && `right:0px;`}
-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 `;
 exports.ToogleElement = styled_components_1.default.div `
   position: relative;
@@ -36,7 +35,8 @@ exports.ToogleElement = styled_components_1.default.div `
   cursor: pointer;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
     inset 0 1px 2px rgba(0, 0, 0, 0.24);
-  height: 24px;
-  width: 40px;
-  border-radius: 12px;
+  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
+  width: ${(p) => (p.size === 'small' ? '30px' : '40px')};
+  border-radius: ${(p) => (p.size === 'small' ? '10px' : '12px')};
+  ${(p) => p.size === 'small' && `margin:2px 0;`}
 `;

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

@@ -67,13 +67,13 @@ exports.inputPadding = {
 //TODO refactor this
 exports.buttonPadding = {
     small: `
-  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
+  padding: calc(${Theme_1.Theme.padding.s} + 1px ) ${Theme_1.Theme.padding.m};
   `,
     medium: `
-  padding: ${Theme_1.Theme.padding.m} ${Theme_1.Theme.padding.l};
+  padding: calc(${Theme_1.Theme.padding.m} + 1px ) ${Theme_1.Theme.padding.l};
   `,
     large: `
-  padding: ${Theme_1.Theme.padding.m} ${Theme_1.Theme.padding.l};
+  padding: calc(${Theme_1.Theme.padding.m} + 1px ) ${Theme_1.Theme.padding.l};
   `,
 };
 //TODO refactor this
@@ -124,8 +124,8 @@ const setEyeTopPosition = (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)};
+    border-color: ${Theme_1.mainTheme.action};
+    background-color: ${Theme_1.mainTheme.inputFocusBackground};
   `,
     disabled: `
     border-color: ${Theme_1.Theme.colors.gray_1};
@@ -134,7 +134,7 @@ exports.inputColorSchema = {
   `,
     error: `
     border-color: ${Theme_1.Theme.colors.red};
-    background-color: ${(0, polished_1.lighten)(0.5, Theme_1.Theme.colors.red)};
+    background-color: ${Theme_1.mainTheme.errorBackgroundColorHoverLight};
   `,
 };
 exports.lableFontSize = {

package/dist/esm/Theme/Theme.js

@@ -67,6 +67,9 @@ export const mainTheme = {
     buttonInverseHover: lighten(0.3, Theme.colors.primary),
     disabledBackground: Theme.colors.gray_4,
     disabledText: Theme.colors.gray_1,
+    errorBackgroundColor: Theme.colors.red,
+    errorBackgroundColorHover: lighten(0.3, Theme.colors.red),
+    errorBackgroundColorHoverLight: lighten(0.5, Theme.colors.red),
     //icon
     iconColor: Theme.colors.text,
     iconHoverColor: Theme.colors.primary,
@@ -79,8 +82,8 @@ export const mainTheme = {
     inputDefaultBackground: Theme.colors.white,
     inputDefaultBorder: Theme.colors.gray_2,
     inputDefaultTextColor: Theme.colors.text,
-    inputFocusBackground: Theme.colors.accent_light,
-    inputFocusBorder: Theme.colors.accent,
+    inputFocusBackground: lighten(0.45, Theme.colors.primary),
+    inputFocusBorder: Theme.colors.primary,
     inputFocusTextColor: Theme.colors.text,
     inputDisabledBackground: Theme.colors.gray_4,
     inputDisabledBorder: Theme.colors.gray_1,
@@ -102,7 +105,8 @@ export const mainTheme = {
     tableCellHoverBackground: lighten(0.3, Theme.colors.primary),
     tableCellActiveBackground: lighten(0.3, Theme.colors.primary),
     tableCellSortIcon: Theme.colors.primary,
-    tableMoreIconColor: Theme.colors.primary,
+    tableMoreIconColor: Theme.colors.text,
+    tableHoverMoreIconColor: Theme.colors.primary,
     // chips
     chipsNeutralBackground: Theme.colors.primary,
     chipsNeutralTextColor: Theme.colors.white,

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

@@ -3,11 +3,11 @@ import { ThemeProvider } from 'styled-components';
 import { mainTheme } from '../../Theme';
 import { ButtonElement, ButtonLoader } from './Button.styles';
 import { Loader } from '../Loader';
-export const Button = ({ text = 'Click me', mode = 'primary', size = 'medium', right = false, left = false, theme = mainTheme, disabled = false, onClick, loader = false, }) => {
+export const Button = ({ text = 'Click me', mode = 'primary', size = 'medium', right = false, left = false, theme = mainTheme, disabled = false, onClick, loader = false, errorVariant = false, }) => {
     const handleClick = () => {
-        (!disabled && !loader) && onClick();
+        !disabled && !loader && onClick();
     };
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick, loader: loader }, loader ? (React.createElement(ButtonLoader, { size: size },
+        React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick, loader: loader, errorVariant: errorVariant }, loader ? (React.createElement(ButtonLoader, { size: size },
             React.createElement(Loader, { size: "small", color: mode === 'primary' ? theme.buttonText : theme.action }))) : (text))));
 };

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Theme } from '../../Theme/Theme';
 export const ButtonElement = styled.button `
   align-items: center;
-  border-radius: ${Theme.borderRadius.s};
+  border-radius: ${Theme.borderRadius.m};
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -14,53 +14,53 @@ export const ButtonElement = styled.button `
   overflow: hidden;
   transition: 300ms;
   white-space: nowrap;
-
   ${(p) => p.mode === 'primary' &&
     `background-color: ${p.theme.action};
-    border: 1px solid rgba(0,0,0,0.15);
+    border: none;
     color: ${p.theme.buttonText};
+  ${p.errorVariant &&
+        `background-color:${p.theme.errorBackgroundColor};
+      border:none;`}
+  
     &:disabled{
       color: ${p.theme.disabledText};
       background-color: ${p.theme.disabledBackground};
     }
     `}
+
   ${(p) => p.mode === 'secondary' &&
     `background-color: transparent;
-    border: 1px solid ${p.theme.action};
+    border: none;
     color: ${p.theme.action};
+    ${p.errorVariant &&
+        `color:${p.theme.errorBackgroundColor};
+      border:none;`}
     &:disabled{
       color: ${p.theme.disabledText};
       border: 1px solid ${p.theme.disabledText};
     }
     `}
-  ${(p) => p.mode === 'inverse' &&
-    `background-color:transparent;
-    border:none;
-    color: ${p.theme.action};
-    &:disabled{
-      color: ${p.theme.disabledText};
-    }
-    `}
-    ${(p) => setButtonSize(p.size, p.loader)}
+  
+    
+
+  ${(p) => setButtonSize(p.size, p.loader)}
   &:hover {
     transition: 300ms;
     ${(p) => p.mode === 'primary' &&
     `background-color: ${p.theme.buttonPrimaryHover};
+      ${p.errorVariant &&
+        `background-color:${p.theme.errorBackgroundColorHover};`}
       &:disabled {
         background-color: ${p.theme.disabledBackground};
       }`}
 
     ${(p) => p.mode === 'secondary' &&
     `background-color: ${p.theme.buttonSecondaryHover};
+      ${p.errorVariant &&
+        `background-color:${p.theme.errorBackgroundColorHoverLight};`}
       &:disabled {
         background-color: transparent;
       }`};
-
-    ${(p) => p.mode === 'inverse' &&
-    `background-color: ${p.theme.buttonInverseHover};
-      &:disabled{
-        background-color: transparent;
-      }`}
   }
 
   &:disabled {

package/dist/esm/components/ButtonsFooter/ButtonsFooter.js

@@ -23,7 +23,7 @@ export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, la
     };
     return (React.createElement(Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l, backgroundColor: backgroundColor },
         labelAdditional && handleAdditional && (React.createElement(ButtonsFooterGroup, null, !submitLoader && (React.createElement(React.Fragment, null,
-            additionalType === 'button' && (React.createElement(Button, { mode: 'inverse', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
+            additionalType === 'button' && (React.createElement(Button, { errorVariant: true, mode: 'secondary', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
             additionalType === 'toogle' && (React.createElement(Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
         React.createElement(ButtonsFooterGroup, null,
             !submitLoader && (React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),

package/dist/esm/components/Card/Card.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { CardContent, CardElement } from './Card.styles';
 import { ElementHeader } from '../ElementHeader';
 import { mainTheme } from '../../Theme';
-export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, }) => {
-    return (React.createElement(CardElement, { height: height },
-        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor })),
-        React.createElement(CardContent, { soloMode: !title && !actionLabel }, children)));
+export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false }) => {
+    return (React.createElement(CardElement, { height: height, shadow: shadow },
+        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader })),
+        React.createElement(CardContent, null, children)));
 };

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

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { Theme } from "../../Theme/Theme";
+import styled from 'styled-components';
+import { Theme } from '../../Theme/Theme';
 export const CardElement = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -7,15 +7,14 @@ export const CardElement = styled.div `
   width: 100%;
   background-color: ${Theme.colors.white};
   border-radius: ${Theme.borderRadius.m};
-  height: ${p => p.height ? p.height : '100%'};
-  box-shadow: ${Theme.shadow.s};
+  height: ${(p) => (p.height ? p.height : '100%')};
+  ${(p) => p.shadow && `box-shadow: ${Theme.shadow.s};`}
 `;
 export const CardContent = styled.div `
-  box-sizing: border-box; 
+  box-sizing: border-box;
   display: flex;
-  padding:  ${Theme.padding.l};
+  padding: ${Theme.padding.l};
   width: 100%;
   flex-direction: row;
-  ${p => !p.soloMode && `
-  padding-top:0px;`}
-  `;
+
+`;

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

@@ -24,7 +24,7 @@ export const DropdownMenuContent = styled.div `
   width:100%;
 `;
 export const DropdownMenuOption = styled.div `
-  padding: ${Theme.padding.s} ${Theme.padding.s};
+  padding: ${Theme.padding.s} ${Theme.padding.m};
   text-align:left;
   min-width:80px;
   cursor: pointer;

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

@@ -5,7 +5,8 @@ import { TextHeader } from '../Typography';
 import { Theme, mainTheme } from '../../Theme';
 import { Button } from '../Button';
 import { DropdownMenu } from '../DropdownMenu';
-export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, }) => {
+import { ElementHeaderWrapper } from './ElementHeader.styles';
+export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, }) => {
     const leftSide = () => {
         if (title) {
             return (React.createElement(Aligment, { align: "center", direction: "row", width: "auto" },
@@ -26,7 +27,7 @@ export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClic
                 options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor }))));
         }
     };
-    return (React.createElement(Aligment, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor },
+    return (React.createElement(ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },
         React.createElement(React.Fragment, null,
             leftSide(),
             rightSide())));

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Aligment } from '../Aligment';
+export const ElementHeaderWrapper = styled(Aligment) `
+  width: 100%;
+  ${(p) => p.bottomDivader &&
+    `
+    border-bottom: 2px solid rgba(0, 0, 0, 0.14);
+    overflow-x:hidden;
+    `}
+    `;
+// box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

package/dist/esm/components/File/File.js

@@ -17,7 +17,7 @@ export const File = ({ label, labelPosition = 'top', name, disabled = false, mul
         React.createElement(InputWrapper, { width: width },
             React.createElement(Aligment, { gap: 10, wrap: "nowrap" },
                 React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
-                React.createElement(Button, { size: size, mode: "inverse", onClick: openFileSelector, text: "Wybierz plik" })),
+                React.createElement(Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
             React.createElement(HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
             error && React.createElement(InputErrorMsg, null, error))));
 };

package/dist/esm/components/Form/Form.js

@@ -32,11 +32,11 @@ export const Form = ({ formData, size = 'medium', read }) => {
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'number':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'increase':
-                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read }));
+                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'file':
                 return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
         }

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

@@ -62,7 +62,7 @@ export const InputReadOnlyElement = styled.div `
 `;
 export const InputLabelElement = styled(TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
-  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme.padding.s};`}
+  ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme.padding.s};`}
 `;
 export const InputWrapper = styled.div `
   display: flex;

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

@@ -5,11 +5,11 @@ import { ScrollCotainer } from '../common';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
 import { ThemeProvider } from 'styled-components';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, }) => {
+export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(ModalOverlayer, null,
             React.createElement(ModalElement, { size: size },
-                React.createElement(ElementHeader, { title: title, handleClose: handleClose }),
+                React.createElement(ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
                 React.createElement(ScrollCotainer, null, children),
                 React.createElement(ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue })))));
 };

package/dist/esm/components/Section/Section.js

@@ -7,6 +7,6 @@ export const Section = ({ title, children, titlePosition = 'left', noPadding = f
     return (React.createElement(SectionElement, { backgroundColor: backgroundColor },
         title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
             React.createElement(TextSubHeader, null, title),
-            titlePosition === 'left' && !!action && (React.createElement(Button, { text: actionLabel, onClick: action, size: "small", mode: "inverse" })))),
+            titlePosition === 'left' && !!action && (React.createElement(Button, { text: actionLabel, onClick: action, size: "small", mode: "secondary" })))),
         React.createElement(SectionContent, { noPadding: noPadding }, children)));
 };

package/dist/esm/components/Table/Table.js

@@ -78,7 +78,7 @@ hover = true, selectable = true, sortable = true, sort = {
                                 : 'arrow_drop_up', iconColor: theme.tableCellSortIcon, size: 20 })))))))))),
             React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (React.createElement(React.Fragment, null, header.action ? (React.createElement(OptionTableCell, { key: `${item.id}-${header.name}-action` },
                 React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                    React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor })))) : (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: 'transparent' })))) : (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
                 ? format(item[header.valueSource], 'dd-MM-yyyy')
                 : item[header.valueSource]))))))))))));
 };

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

@@ -6,10 +6,11 @@ export const TableHead = styled.thead `
   tr:first-child {
     position: sticky;
     top: 0;
+    z-index:10;
   }
 `;
 export const TableHeaderCell = styled.th `
-  font-weight: bold;
+  font-weight: normal;
   text-align: left;
   padding: 8px;
   transition: 300ms;
@@ -17,7 +18,7 @@ export const TableHeaderCell = styled.th `
   background-color: ${(p) => p.isSorted
     ? p.theme.tableHeaderActiveBackground
     : p.theme.tableHeaderBackground};
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
 
   :hover {
     background-color: ${(p) => p.isSorted
@@ -38,7 +39,7 @@ export const OptionTableHeaderCell = styled.th `
   transition: 300ms;
   font-size: 14px;
   background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+  border-bottom:  2px solid rgba(0, 0, 0, 0.14);
 `;
 export const TableHeaderSortIcon = styled.div `
   width: 20px;
@@ -52,7 +53,7 @@ export const TableRow = styled.tr `
   background-color: ${(p) => p.active
     ? p.theme.tableCellActiveBackground
     : p.theme.tableCellEvenBackground};
-  :nth-child(even) {
+  :nth-child(odd) {
     background-color: ${(p) => p.active
     ? p.theme.tableCellActiveBackground
     : p.theme.tableCellBackground};
@@ -71,10 +72,9 @@ export const TableRow = styled.tr `
 `;
 export const TableCell = styled.td `
   padding: 8px;
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+
 `;
 export const OptionTableCell = styled.td `
-  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
   text-align: center;
 `;
 export const OptionTableCellWrapper = styled.div `

package/dist/esm/components/Tile/Tile.js

@@ -2,8 +2,8 @@ import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { TileElement } from './Tile.styles';
 import { mainTheme } from '../../Theme';
-export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', }) => {
+export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false }) => {
     return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
-        title && (React.createElement(ElementHeader, { title: title, backgroundColor: backgroundColor })),
+        title && (React.createElement(ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
         children));
 };

package/dist/esm/components/Toogle/Toogle.js

@@ -6,10 +6,10 @@ import { InputLabelElement, InputWrapper } from '../Input';
 import { ToogleElement, ToogleElementPoint, ToogleElementWrapper, } from './Toogle.styles';
 export const Toogle = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
             React.createElement(InputWrapper, { width: width },
                 React.createElement(ToogleElementWrapper, { size: size },
                     React.createElement(ToogleElement, { size: size, active: value, onClick: () => handleClick(!value) },
-                        React.createElement(ToogleElementPoint, { size: size, active: value })))))));
+                        React.createElement(ToogleElementPoint, { size: size, active: value })))),
+            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
 };

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

@@ -5,17 +5,16 @@ export const ToogleElementWrapper = styled.div `
 `;
 export const ToogleElementPoint = styled.div `
   background-color: ${(p) => p.theme.inputDefaultBackground};
-  width: 20px;
-  height: 20px;
   border-radius: 50%;
   top: 0px;
-  height: 22px;
-  width: 22px;
+  height: ${(p) => (p.size === 'small' ? '18px' : '22px')};
+  width: ${(p) => (p.size === 'small' ? '18px' : '22px')};
   transition: 300ms;
   position: absolute;
   ${(p) => p.active && `left:0px;`}
   ${(p) => !p.active && `right:0px;`}
-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 `;
 export const ToogleElement = styled.div `
   position: relative;
@@ -30,7 +29,8 @@ export const ToogleElement = styled.div `
   cursor: pointer;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
     inset 0 1px 2px rgba(0, 0, 0, 0.24);
-  height: 24px;
-  width: 40px;
-  border-radius: 12px;
+  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
+  width: ${(p) => (p.size === 'small' ? '30px' : '40px')};
+  border-radius: ${(p) => (p.size === 'small' ? '10px' : '12px')};
+  ${(p) => p.size === 'small' && `margin:2px 0;`}
 `;

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

@@ -1,5 +1,5 @@
 import { lighten } from 'polished';
-import { Theme } from '../../Theme';
+import { Theme, mainTheme } from '../../Theme';
 export const defaultStyles = `
   box-sizing: border-box;
   background-color: ${Theme.colors.white};
@@ -64,13 +64,13 @@ export const inputPadding = {
 //TODO refactor this
 export const buttonPadding = {
     small: `
-  padding: ${Theme.padding.s} ${Theme.padding.m};
+  padding: calc(${Theme.padding.s} + 1px ) ${Theme.padding.m};
   `,
     medium: `
-  padding: ${Theme.padding.m} ${Theme.padding.l};
+  padding: calc(${Theme.padding.m} + 1px ) ${Theme.padding.l};
   `,
     large: `
-  padding: ${Theme.padding.m} ${Theme.padding.l};
+  padding: calc(${Theme.padding.m} + 1px ) ${Theme.padding.l};
   `,
 };
 //TODO refactor this
@@ -115,8 +115,8 @@ export const setEyeTopPosition = (size) => {
 };
 export const inputColorSchema = {
     default: `
-    border-color: ${Theme.colors.primary};
-    background-color: ${lighten(0.4, Theme.colors.primary)};
+    border-color: ${mainTheme.action};
+    background-color: ${mainTheme.inputFocusBackground};
   `,
     disabled: `
     border-color: ${Theme.colors.gray_1};
@@ -125,7 +125,7 @@ export const inputColorSchema = {
   `,
     error: `
     border-color: ${Theme.colors.red};
-    background-color: ${lighten(0.5, Theme.colors.red)};
+    background-color: ${mainTheme.errorBackgroundColorHoverLight};
   `,
 };
 export const lableFontSize = {

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

@@ -65,6 +65,9 @@ export declare const mainTheme: {
     buttonInverseHover: string;
     disabledBackground: string;
     disabledText: string;
+    errorBackgroundColor: string;
+    errorBackgroundColorHover: string;
+    errorBackgroundColorHoverLight: string;
     iconColor: string;
     iconHoverColor: string;
     iconBgColor: string;
@@ -95,6 +98,7 @@ export declare const mainTheme: {
     tableCellActiveBackground: string;
     tableCellSortIcon: string;
     tableMoreIconColor: string;
+    tableHoverMoreIconColor: string;
     chipsNeutralBackground: string;
     chipsNeutralTextColor: string;
     chipsNeutralHoverBackground: string;

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

@@ -10,5 +10,6 @@ export interface IButtonProps {
     disabled?: boolean;
     onClick: () => void;
     loader?: boolean;
+    errorVariant?: boolean;
 }
 export declare const Button: FC<IButtonProps>;

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

@@ -7,6 +7,7 @@ interface IButtonElement {
     disabled: boolean;
     theme?: any;
     loader: boolean;
+    errorVariant: boolean;
 }
 export declare const ButtonElement: import("styled-components").StyledComponent<"button", any, IButtonElement, never>;
 interface IButtonLoader {

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

@@ -11,6 +11,8 @@ interface ICardProps {
     theme?: any;
     iconColor?: string;
     iconHoverColor?: string;
+    shadow?: boolean;
+    headerDivader?: boolean;
 }
 export declare const Card: FC<ICardProps>;
 export {};

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

@@ -1,9 +1,7 @@
 interface ICardElementProps {
+    shadow: boolean;
     height?: string;
 }
 export declare const CardElement: import("styled-components").StyledComponent<"div", any, ICardElementProps, never>;
-interface ICardContentStyles {
-    soloMode: boolean;
-}
-export declare const CardContent: import("styled-components").StyledComponent<"div", any, ICardContentStyles, never>;
+export declare const CardContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -12,6 +12,7 @@ interface IElementHeader {
     iconHoverColor?: string;
     options?: IAction[];
     theme?: any;
+    bottomDivader?: boolean;
 }
 export declare const ElementHeader: FC<IElementHeader>;
 export {};

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

@@ -0,0 +1,6 @@
+import { IAligmentProps } from '../Aligment/Aligment.styles';
+interface IElementHeaderWrapperProps extends IAligmentProps {
+    bottomDivader: boolean;
+}
+export declare const ElementHeaderWrapper: import("styled-components").StyledComponent<"div", any, IAligmentProps & IElementHeaderWrapperProps, never>;
+export {};

package/dist/types/components/Form/formTypes.d.ts

@@ -6,6 +6,8 @@ export interface FormDataProps {
     min?: number;
     max?: number;
     step?: number;
+    autofocus?: boolean;
+    submit?: () => void;
 }
 interface FormDataParentProps {
     row: FormDataProps[];

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

@@ -14,5 +14,6 @@ export interface IModalProps {
     submitLoader?: boolean;
     additionalType?: string;
     additionalValue?: boolean;
+    headerDivader?: boolean;
 }
 export declare const Modal: FC<IModalProps>;

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

@@ -7,5 +7,6 @@ export interface ITileProps {
     backgroundColor?: string;
     height?: string;
     theme?: any;
+    headerDivader?: boolean;
 }
 export declare const Tile: FC<ITileProps>;

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

@@ -1,4 +1,4 @@
-export type ButtonMode = 'primary' | 'secondary' | 'inverse';
+export type ButtonMode = 'primary' | 'secondary';
 export type InputSize = 'large' | 'medium' | 'small';
 export type InputType = "text" | "password" | "email" | "number" | "increase";
 export type LabelPosition = "top" | "left";

package/package.json

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