venice-ui 1.0.62 → 1.1.0

package/dist/cjs/Theme/Theme.js

@@ -102,5 +102,6 @@ exports.mainTheme = {
     tableMoreIconColor: exports.Theme.colors.primary,
     // chips
     chipsNeutralBackground: exports.Theme.colors.primary,
-    chipsNeutralTextColor: exports.Theme.colors.white
+    chipsNeutralTextColor: exports.Theme.colors.white,
+    chipsNeutralHoverBackground: (0, polished_1.lighten)(0.1, exports.Theme.colors.primary),
 };

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

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Aligment = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.Aligment = styled_components_1.default.div `
+  align-items: ${(p) => (p.align ? p.align : 'center')};
+  background-color: ${(p) => p.backgroundColor ? p.backgroundColor : 'transparent'};
   box-sizing: border-box;
   display: flex;
-  width: ${p => p.width ? p.width : '100%'};
-  flex-direction: ${p => p.direction ? p.direction : 'row'};
-  justify-content: ${p => p.justify ? p.justify : 'space-between'};
-  align-items: ${p => p.align ? p.align : 'center'};
-  flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
-  padding: ${p => p.vPadding ? p.vPadding : '0'} ${p => p.hPadding ? p.hPadding : '0'};
-  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'};
-  gap: ${p => p.gap ? p.gap + 'px' : '0px'};
+  flex-direction: ${(p) => (p.direction ? p.direction : 'row')};
+  flex-wrap: ${(p) => (p.wrap ? p.wrap : 'wrap')};
+  gap: ${(p) => (p.gap ? p.gap + 'px' : '0px')};
+  justify-content: ${(p) => (p.justify ? p.justify : 'space-between')};
+  padding: ${(p) => (p.vPadding ? p.vPadding : '0')}
+    ${(p) => (p.hPadding ? p.hPadding : '0')};
+  width: ${(p) => (p.width ? p.width : '100%')};
 `;

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, 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, }) => {
     const handleClick = () => {
-        !disabled && 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(Loader_1.Loader, { size: "small", color: mode === 'primary' ? Theme_1.mainTheme.buttonText : Theme_1.mainTheme.action }))) : (text))));
+            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

@@ -8,24 +8,23 @@ const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
 exports.ButtonElement = styled_components_1.default.button `
-  transition: 300ms;
+  align-items: center;
   border-radius: ${Theme_1.Theme.borderRadius.s};
-  overflow: hidden;
-  cursor: pointer;
   box-sizing: border-box;
-  margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
-  margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
+  cursor: pointer;
   display: flex;
-  align-items: center;
+  flex-shrink: 1;
   justify-content: center;
-  display: flex;
+  margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
+  margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
+  overflow: hidden;
+  transition: 300ms;
   white-space: nowrap;
-  flex-shrink: 1;
 
   ${(p) => p.mode === 'primary' &&
     `background-color: ${p.theme.action};
-    color: ${p.theme.buttonText};
     border: 1px solid rgba(0,0,0,0.15);
+    color: ${p.theme.buttonText};
     &:disabled{
       color: ${p.theme.disabledText};
       background-color: ${p.theme.disabledBackground};
@@ -33,8 +32,8 @@ exports.ButtonElement = styled_components_1.default.button `
     `}
   ${(p) => p.mode === 'secondary' &&
     `background-color: transparent;
-    color: ${p.theme.action};
     border: 1px solid ${p.theme.action};
+    color: ${p.theme.action};
     &:disabled{
       color: ${p.theme.disabledText};
       border: 1px solid ${p.theme.disabledText};
@@ -42,8 +41,8 @@ exports.ButtonElement = styled_components_1.default.button `
     `}
   ${(p) => p.mode === 'inverse' &&
     `background-color:transparent;
-    color: ${p.theme.action};
     border:none;
+    color: ${p.theme.action};
     &:disabled{
       color: ${p.theme.disabledText};
     }
@@ -75,8 +74,7 @@ exports.ButtonElement = styled_components_1.default.button `
   }
 `;
 exports.ButtonLoader = styled_components_1.default.div `
-  display:flex;
-  box-sizing:border-box;
+  display: flex;
+  box-sizing: border-box;
   ${(p) => (0, common_1.setButtonLoaderSize)(p.size)}
-  
 `;

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

@@ -4,19 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonsFooter = void 0;
-const Button_1 = require("../Button");
+const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme/Theme");
+const Button_1 = require("../Button");
 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 ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = "Close", labelAdditional = "Reset", submitDisabled, submitLoader, backgroundColor = 'transparent' }) => {
     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 },
+    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(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() })),

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

@@ -7,9 +7,10 @@ exports.Card = void 0;
 const react_1 = __importDefault(require("react"));
 const Card_styles_1 = require("./Card.styles");
 const ElementHeader_1 = require("../ElementHeader");
-const Card = ({ children, title, actionLabel, moreIcon = false, backIcon = false, handleClick, handleBack, height, options, }) => {
+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, closeIcon: false, backIcon: backIcon, actionButton: true, moreIcon: moreIcon, options: options })),
+        (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)));
 };
 exports.Card = Card;

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

@@ -19,7 +19,6 @@ exports.CardElement = styled_components_1.default.div `
 exports.CardContent = styled_components_1.default.div `
   box-sizing: border-box; 
   display: flex;
-  backgorund-color:#ff0000;
   padding:  ${Theme_1.Theme.padding.l};
   width: 100%;
   flex-direction: row;

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

@@ -15,6 +15,9 @@ exports.ChipsElement = styled_components_1.default.div `
   width:auto;
   box-sizing: border-box;
   border-radius:30px;
+  &:hover{
+    background-color:${p => p.theme.chipsNeutralHoverBackground};
+  }
 `;
 exports.ChipsLabel = styled_components_1.default.div `
   font-size:${Theme_1.Theme.fontSize.s}

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

@@ -16,6 +16,7 @@ exports.Field = styled_components_1.default.div `
   color: ${Theme_1.Theme.colors.text};
   width: ${(p) => (p.width ? p.width : '100%')};
   height:  ${(p) => (0, common_1.setFieldHeight)(p.inputSize)};
+  min-width: 30px;
   ${(p) => p.error &&
     `
     ${common_1.inputColorSchema.error}

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

@@ -11,28 +11,28 @@ const Typography_1 = require("../Typography");
 const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
 const DropdownMenu_1 = require("../DropdownMenu");
-const ElementHeader = ({ title, showTitle = true, moreIcon = false, backIcon = false, closeIcon = true, actionButton = false, actionLabel = '', handleClose, handleClick, handleBack, children, bgColor = Theme_1.Theme.colors.white, options, }) => {
+const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, }) => {
     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(), left: true, color: Theme_1.Theme.colors.text })),
+        if (title) {
+            return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", direction: "row", width: "auto" },
+                handleBack && (react_1.default.createElement(Icons_1.Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
                 react_1.default.createElement(Typography_1.TextHeader, null, title)));
         }
-        else if (!showTitle && children) {
+        else if (!title && children) {
             return children;
         }
     };
     const rightSide = () => {
-        if (closeIcon && handleClose) {
-            return react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close", color: Theme_1.Theme.colors.text });
+        if (handleClose) {
+            return (react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close", color: Theme_1.Theme.colors.text }));
         }
-        else if (!closeIcon && actionButton && handleClick) {
+        else if (!handleClose && handleClick && actionLabel) {
             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 })));
+                options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, color: iconColor, iconHoverColor: iconHoverColor, iconInverseMode: true }))));
         }
     };
-    return (react_1.default.createElement(Aligment_1.Aligment, { justify: !showTitle && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: bgColor },
+    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 },
         react_1.default.createElement(react_1.default.Fragment, null,
             leftSide(),
             rightSide())));

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

@@ -36,4 +36,5 @@ exports.iconsPath = {
     upgrade: "M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z",
     visibility: "M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z",
     visability_off: "M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.65C13.375 8.96667 12.6 8.7 11.65 8.85L10.2 7.4C10.4833 7.26667 10.7708 7.16667 11.0625 7.1C11.3542 7.03333 11.6667 7 12 7C13.25 7 14.3125 7.4375 15.1875 8.3125C16.0625 9.1875 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3333 12.7292 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.0458 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81667 18.7708 8.47917 17.2125 7.4875C15.6542 6.49583 13.9167 6 12 6C11.5167 6 11.0417 6.03333 10.575 6.1C10.1083 6.16667 9.65 6.26667 9.2 6.4L7.65 4.85C8.33333 4.56667 9.03333 4.35417 9.75 4.2125C10.4667 4.07083 11.2167 4 12 4C14.5167 4 16.7583 4.69583 18.725 6.0875C20.6917 7.47917 22.1167 9.28333 23 11.5C22.6167 12.4833 22.1125 13.3958 21.4875 14.2375C20.8625 15.0792 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2458 18.9542 12.6333 19 12 19C9.48333 19 7.24167 18.3042 5.275 16.9125C3.30833 15.5208 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79583 2.325 9.0375C2.85833 8.27917 3.46667 7.6 4.15 7L1.4 4.2L2.8 2.8L21.2 21.2L19.8 22.6ZM5.55 8.4C5.06667 8.83333 4.625 9.30833 4.225 9.825C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.22917 14.5208 6.7875 15.5125C8.34583 16.5042 10.0833 17 12 17C12.3333 17 12.6583 16.9792 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3583 15.9875 12.1833 16 12 16C10.75 16 9.6875 15.5625 8.8125 14.6875C7.9375 13.8125 7.5 12.75 7.5 11.5C7.5 11.3167 7.5125 11.1417 7.5375 10.975C7.5625 10.8083 7.6 10.6333 7.65 10.45L5.55 8.4Z",
+    warning: "M0 19L11 0L22 19H0ZM3.45 17H18.55L11 4L3.45 17ZM11 16C11.2833 16 11.5208 15.9042 11.7125 15.7125C11.9042 15.5208 12 15.2833 12 15C12 14.7167 11.9042 14.4792 11.7125 14.2875C11.5208 14.0958 11.2833 14 11 14C10.7167 14 10.4792 14.0958 10.2875 14.2875C10.0958 14.4792 10 14.7167 10 15C10 15.2833 10.0958 15.5208 10.2875 15.7125C10.4792 15.9042 10.7167 16 11 16ZM10 13H12V8H10V13Z"
 };

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

@@ -30,10 +30,15 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step, theme = Theme_1.mainTheme, }) => {
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step, autoFocus, theme = Theme_1.mainTheme, }) => {
     const onChange = (e) => {
         handleChange(name, e.target.value);
     };
+    const onKeyDown = (e) => {
+        if (handleSubmit && e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
     const [inputType] = (0, react_1.useState)(type);
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
     const tooglePassword = () => {
@@ -43,7 +48,7 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
         react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
-                react_1.default.createElement(Input_styles_1.InputTextElement, { inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, 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, inverseMode: true }))),
                 error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));

package/dist/cjs/components/Loader/Loader.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme");
 const Aligment_1 = require("../Aligment");
 const Loader_styles_1 = require("./Loader.styles");
-const Loader = ({ color = Theme_1.Theme.colors.primary, size = 'medium', }) => {
+const Loader = ({ theme = Theme_1.mainTheme, color = theme.action, size = 'medium', }) => {
     return (react_1.default.createElement(Aligment_1.Aligment, { justify: 'center', align: 'center' },
         react_1.default.createElement(Loader_styles_1.LoaderElement, { size: size },
             react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }),

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

@@ -11,7 +11,7 @@ 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, labelClose, labelAdditional, submitDisabled, size = 'small', submitLoader = false, }) => {
+const Modal = ({ theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional = 'Reset', 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 },

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

@@ -8,7 +8,7 @@ const Typography_1 = require("../Typography");
 const react_1 = __importDefault(require("react"));
 const Section_styles_1 = require("./Section.styles");
 const Theme_1 = require("../../Theme");
-const Section = ({ title, children, titlePosition = "left", noPadding = false, backgroundColor = Theme_1.Theme.colors.white, }) => {
+const Section = ({ title, children, titlePosition = "left", noPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, }) => {
     return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor },
         title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noPadding },
             react_1.default.createElement(Typography_1.TextSubHeader, null, title))),

package/dist/cjs/components/Sidepanel/Sidepanel.js

@@ -34,9 +34,7 @@ const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = t
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
-            console.log('click:', isOpen);
             if (ref.current && !ref.current.contains(event.target)) {
-                console.log('fire:', isOpen);
                 handleClose && handleClose();
             }
         };
@@ -49,7 +47,7 @@ const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = t
     if (isOpen) {
         return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Sidepanel_styles_1.SidepanelElement, { right: right, top: top, ref: ref },
-                react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
+                react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose }, iconOptions &&
                     iconOptions.map((icon) => (react_1.default.createElement(Icons_1.Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
                 children),
             overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })), modalRoot);

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, backgroundColor = Theme_1.Theme.colors.white, height = 'auto', }) => {
+const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', }) => {
     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, bgColor: backgroundColor }),
+        title && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, backgroundColor: backgroundColor })),
         children));
 };
 exports.Tile = Tile;

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

@@ -24,22 +24,22 @@ exports.Panel = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.m} 0;
   border-radius: ${Theme_1.Theme.borderRadius.m};
   height: ${(p) => (p.height ? p.height : 'auto')};
-  width: ${p => p.fullWidth ? '100%' : 'auto'};
+  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
   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_2};
   border-top: none;
-  ${p => (0, inputStyles_1.setPanelPosition)(p.position)}
+  min-width: 30px;
+  ${(p) => (0, inputStyles_1.setPanelPosition)(p.position)}
 `;
 exports.PanelOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
   cursor: pointer;
   white-space: nowrap;
   color: ${(p) => (p.active ? Theme_1.Theme.colors.primary : Theme_1.Theme.colors.text)};
-
   :hover {
     background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   }
-  ${p => p.width && `width:${p.width};`}
+  ${(p) => p.width && `width:${p.width};`}
 `;

package/dist/cjs/docs/Overview.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overview = void 0;
+const react_1 = __importStar(require("react"));
+const Input_1 = require("../components/Input");
+const example_1 = require("../example");
+const Button_1 = require("../components/Button");
+const Dropdown_1 = require("../components/Dropdown");
+const Selector_1 = require("../components/Selector");
+const DropdownMenu_1 = require("../components/DropdownMenu");
+const Aligment_1 = require("../components/Aligment");
+const Overview = ({ sectionName, size, labelPosition, }) => {
+    const [data, setData] = (0, react_1.useState)({
+        input: 'my text',
+        dropdown: '',
+        selector1: 'test_01',
+        selector2: '',
+    });
+    const onChange = (name, value) => {
+        setData({
+            ...data,
+            [name]: value,
+        });
+    };
+    const onClick = () => {
+        alert('button click');
+    };
+    const handleClear1 = () => {
+        setData({
+            ...data,
+            selector1: '',
+        });
+    };
+    const handleClear2 = () => {
+        setData({
+            ...data,
+            selector2: '',
+        });
+    };
+    return (react_1.default.createElement(Aligment_1.Aligment, { gap: 20, direction: 'column', align: 'stretch', justify: 'space-between' },
+        react_1.default.createElement(example_1.ExampleAreaTitle, null, sectionName),
+        react_1.default.createElement(example_1.ExampleArea, null,
+            react_1.default.createElement(example_1.ExampleItem, null,
+                react_1.default.createElement(Input_1.Input, { value: data.input, size: size, label: "Input", name: "input", handleChange: onChange, labelPosition: labelPosition })),
+            react_1.default.createElement(example_1.ExampleItem, null,
+                react_1.default.createElement(Button_1.Button, { size: size, text: "Button", onClick: onClick })),
+            react_1.default.createElement(example_1.ExampleItem, null,
+                react_1.default.createElement(Dropdown_1.Dropdown, { size: size, label: "Dropdown", labelPosition: labelPosition, handleSelect: onChange, name: "dropdown", value: data.dropdown, options: [
+                        { value: 'test_01', label: 'test 01' },
+                        { value: 'test_02', label: 'test 02' },
+                    ] })),
+            react_1.default.createElement(example_1.ExampleItem, null,
+                react_1.default.createElement(Selector_1.Selector, { labelPosition: labelPosition, size: size, label: "Selected selector", value: data.selector1, handleSelect: onChange, handleClear: handleClear1, name: "selector1", options: [
+                        { value: 'test_01', label: 'test 01' },
+                        { value: 'test_02', label: 'test 02' },
+                    ] })),
+            react_1.default.createElement(example_1.ExampleItem, null,
+                react_1.default.createElement(Selector_1.Selector, { handleSelect: onChange, handleClear: handleClear2, name: "selector2", value: data.selector2, labelPosition: labelPosition, size: size, label: "Selector", options: [
+                        { value: 'test_01', label: 'test 01' },
+                        { value: 'test_02', label: 'test 02' },
+                    ] })),
+            react_1.default.createElement(example_1.ExampleItem, null,
+                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { size: size, options: [
+                        { action: () => alert('action one'), label: 'action one' },
+                        { action: () => alert('action two'), label: 'action two' },
+                    ] })))));
+};
+exports.Overview = Overview;

package/dist/cjs/example/ExampleComponent.js

@@ -16,8 +16,10 @@ exports.ExmpleBlock = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.xl};
 `;
 exports.ExmpleBlockWrapper = styled_components_1.default.div `
-  background-color: ${(p) => (p.color ? p.color : '#aaaaaa')};
+  background-color: ${(p) => (p.color ? p.color : '#ffffff')};
   border-radius: ${Theme_1.Theme.borderRadius.m};
+  box-sizing:border-box;
+  border:1px solid #dddddd;
 `;
 exports.ExampleTable = styled_components_1.default.table `
   width: 100%;
@@ -46,7 +48,6 @@ exports.ExampleArea = styled_components_1.default.div `
   display: flex;
   margin-bottom: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid #cbcbcb;
   align-items: flex-end;
   gap: 10px;
 `;

package/dist/esm/Theme/Theme.js

@@ -99,5 +99,6 @@ export const mainTheme = {
     tableMoreIconColor: Theme.colors.primary,
     // chips
     chipsNeutralBackground: Theme.colors.primary,
-    chipsNeutralTextColor: Theme.colors.white
+    chipsNeutralTextColor: Theme.colors.white,
+    chipsNeutralHoverBackground: lighten(0.1, Theme.colors.primary),
 };

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

@@ -1,13 +1,14 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 export const Aligment = styled.div `
+  align-items: ${(p) => (p.align ? p.align : 'center')};
+  background-color: ${(p) => p.backgroundColor ? p.backgroundColor : 'transparent'};
   box-sizing: border-box;
   display: flex;
-  width: ${p => p.width ? p.width : '100%'};
-  flex-direction: ${p => p.direction ? p.direction : 'row'};
-  justify-content: ${p => p.justify ? p.justify : 'space-between'};
-  align-items: ${p => p.align ? p.align : 'center'};
-  flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
-  padding: ${p => p.vPadding ? p.vPadding : '0'} ${p => p.hPadding ? p.hPadding : '0'};
-  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'};
-  gap: ${p => p.gap ? p.gap + 'px' : '0px'};
+  flex-direction: ${(p) => (p.direction ? p.direction : 'row')};
+  flex-wrap: ${(p) => (p.wrap ? p.wrap : 'wrap')};
+  gap: ${(p) => (p.gap ? p.gap + 'px' : '0px')};
+  justify-content: ${(p) => (p.justify ? p.justify : 'space-between')};
+  padding: ${(p) => (p.vPadding ? p.vPadding : '0')}
+    ${(p) => (p.hPadding ? p.hPadding : '0')};
+  width: ${(p) => (p.width ? p.width : '100%')};
 `;

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, 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, }) => {
     const handleClick = () => {
-        !disabled && 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(Loader, { size: "small", color: mode === 'primary' ? mainTheme.buttonText : mainTheme.action }))) : (text))));
+            React.createElement(Loader, { size: "small", color: mode === 'primary' ? theme.buttonText : theme.action }))) : (text))));
 };

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

@@ -2,24 +2,23 @@ import { setButtonLoaderSize, setButtonSize } from '../common';
 import styled from 'styled-components';
 import { Theme } from '../../Theme/Theme';
 export const ButtonElement = styled.button `
-  transition: 300ms;
+  align-items: center;
   border-radius: ${Theme.borderRadius.s};
-  overflow: hidden;
-  cursor: pointer;
   box-sizing: border-box;
-  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
-  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
+  cursor: pointer;
   display: flex;
-  align-items: center;
+  flex-shrink: 1;
   justify-content: center;
-  display: flex;
+  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
+  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
+  overflow: hidden;
+  transition: 300ms;
   white-space: nowrap;
-  flex-shrink: 1;
 
   ${(p) => p.mode === 'primary' &&
     `background-color: ${p.theme.action};
-    color: ${p.theme.buttonText};
     border: 1px solid rgba(0,0,0,0.15);
+    color: ${p.theme.buttonText};
     &:disabled{
       color: ${p.theme.disabledText};
       background-color: ${p.theme.disabledBackground};
@@ -27,8 +26,8 @@ export const ButtonElement = styled.button `
     `}
   ${(p) => p.mode === 'secondary' &&
     `background-color: transparent;
-    color: ${p.theme.action};
     border: 1px solid ${p.theme.action};
+    color: ${p.theme.action};
     &:disabled{
       color: ${p.theme.disabledText};
       border: 1px solid ${p.theme.disabledText};
@@ -36,8 +35,8 @@ export const ButtonElement = styled.button `
     `}
   ${(p) => p.mode === 'inverse' &&
     `background-color:transparent;
-    color: ${p.theme.action};
     border:none;
+    color: ${p.theme.action};
     &:disabled{
       color: ${p.theme.disabledText};
     }
@@ -69,8 +68,7 @@ export const ButtonElement = styled.button `
   }
 `;
 export const ButtonLoader = styled.div `
-  display:flex;
-  box-sizing:border-box;
+  display: flex;
+  box-sizing: border-box;
   ${(p) => setButtonLoaderSize(p.size)}
-  
 `;

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

@@ -1,16 +1,16 @@
-import { Button } from '../Button';
+import React from 'react';
 import { Theme } from '../../Theme/Theme';
+import { Button } from '../Button';
 import { Aligment } from '../Aligment';
-import React from 'react';
 import { ButtonsFooterGroup } from './ButtonsFooter.style';
-export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose, labelAdditional, submitDisabled, submitLoader, }) => {
+export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = "Close", labelAdditional = "Reset", submitDisabled, submitLoader, backgroundColor = 'transparent' }) => {
     const isAdditional = () => {
         return labelAdditional !== undefined && handleAdditional !== undefined;
     };
     const isMultiButtons = () => {
         return handleConfirm !== undefined && labelConfirm !== undefined;
     };
-    return (React.createElement(Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l },
+    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(Button, { mode: 'inverse', onClick: () => handleAdditional(), text: labelAdditional, left: isMultiButtons() })))),
         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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { CardContent, CardElement } from './Card.styles';
 import { ElementHeader } from '../ElementHeader';
-export const Card = ({ children, title, actionLabel, moreIcon = false, backIcon = false, handleClick, handleBack, height, options, }) => {
+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, closeIcon: false, backIcon: backIcon, actionButton: true, moreIcon: moreIcon, options: options })),
+        (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)));
 };

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

@@ -13,7 +13,6 @@ export const CardElement = styled.div `
 export const CardContent = styled.div `
   box-sizing: border-box; 
   display: flex;
-  backgorund-color:#ff0000;
   padding:  ${Theme.padding.l};
   width: 100%;
   flex-direction: row;

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

@@ -9,6 +9,9 @@ export const ChipsElement = styled.div `
   width:auto;
   box-sizing: border-box;
   border-radius:30px;
+  &:hover{
+    background-color:${p => p.theme.chipsNeutralHoverBackground};
+  }
 `;
 export const ChipsLabel = styled.div `
   font-size:${Theme.fontSize.s}

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

@@ -10,6 +10,7 @@ export const Field = styled.div `
   color: ${Theme.colors.text};
   width: ${(p) => (p.width ? p.width : '100%')};
   height:  ${(p) => setFieldHeight(p.inputSize)};
+  min-width: 30px;
   ${(p) => p.error &&
     `
     ${inputColorSchema.error}

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

@@ -2,31 +2,31 @@ import React from 'react';
 import { Icon } from '../Icons';
 import { Aligment } from '../Aligment';
 import { TextHeader } from '../Typography';
-import { Theme } from '../../Theme';
+import { Theme, mainTheme } from '../../Theme';
 import { Button } from '../Button';
 import { DropdownMenu } from '../DropdownMenu';
-export const ElementHeader = ({ title, showTitle = true, moreIcon = false, backIcon = false, closeIcon = true, actionButton = false, actionLabel = '', handleClose, handleClick, handleBack, children, bgColor = Theme.colors.white, options, }) => {
+export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, }) => {
     const leftSide = () => {
-        if (showTitle) {
-            return (React.createElement(Aligment, { align: 'center', direction: 'row', width: "auto" },
-                backIcon && handleBack && (React.createElement(Icon, { name: "back_arrow", onClick: () => handleBack(), left: true, color: Theme.colors.text })),
+        if (title) {
+            return (React.createElement(Aligment, { align: "center", direction: "row", width: "auto" },
+                handleBack && (React.createElement(Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
                 React.createElement(TextHeader, null, title)));
         }
-        else if (!showTitle && children) {
+        else if (!title && children) {
             return children;
         }
     };
     const rightSide = () => {
-        if (closeIcon && handleClose) {
-            return React.createElement(Icon, { onClick: () => handleClose(), name: "close", color: Theme.colors.text });
+        if (handleClose) {
+            return (React.createElement(Icon, { onClick: () => handleClose(), name: "close", color: Theme.colors.text }));
         }
-        else if (!closeIcon && actionButton && handleClick) {
+        else if (!handleClose && handleClick && actionLabel) {
             return (React.createElement(Aligment, { align: "center", width: "auto" },
                 React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
-                moreIcon && options && React.createElement(DropdownMenu, { options: options, right: true })));
+                options && (React.createElement(DropdownMenu, { options: options, right: true, color: iconColor, iconHoverColor: iconHoverColor, iconInverseMode: true }))));
         }
     };
-    return (React.createElement(Aligment, { justify: !showTitle && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: bgColor },
+    return (React.createElement(Aligment, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor },
         React.createElement(React.Fragment, null,
             leftSide(),
             rightSide())));

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

@@ -33,4 +33,5 @@ export const iconsPath = {
     upgrade: "M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z",
     visibility: "M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z",
     visability_off: "M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.65C13.375 8.96667 12.6 8.7 11.65 8.85L10.2 7.4C10.4833 7.26667 10.7708 7.16667 11.0625 7.1C11.3542 7.03333 11.6667 7 12 7C13.25 7 14.3125 7.4375 15.1875 8.3125C16.0625 9.1875 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3333 12.7292 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.0458 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81667 18.7708 8.47917 17.2125 7.4875C15.6542 6.49583 13.9167 6 12 6C11.5167 6 11.0417 6.03333 10.575 6.1C10.1083 6.16667 9.65 6.26667 9.2 6.4L7.65 4.85C8.33333 4.56667 9.03333 4.35417 9.75 4.2125C10.4667 4.07083 11.2167 4 12 4C14.5167 4 16.7583 4.69583 18.725 6.0875C20.6917 7.47917 22.1167 9.28333 23 11.5C22.6167 12.4833 22.1125 13.3958 21.4875 14.2375C20.8625 15.0792 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2458 18.9542 12.6333 19 12 19C9.48333 19 7.24167 18.3042 5.275 16.9125C3.30833 15.5208 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79583 2.325 9.0375C2.85833 8.27917 3.46667 7.6 4.15 7L1.4 4.2L2.8 2.8L21.2 21.2L19.8 22.6ZM5.55 8.4C5.06667 8.83333 4.625 9.30833 4.225 9.825C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.22917 14.5208 6.7875 15.5125C8.34583 16.5042 10.0833 17 12 17C12.3333 17 12.6583 16.9792 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3583 15.9875 12.1833 16 12 16C10.75 16 9.6875 15.5625 8.8125 14.6875C7.9375 13.8125 7.5 12.75 7.5 11.5C7.5 11.3167 7.5125 11.1417 7.5375 10.975C7.5625 10.8083 7.6 10.6333 7.65 10.45L5.55 8.4Z",
+    warning: "M0 19L11 0L22 19H0ZM3.45 17H18.55L11 4L3.45 17ZM11 16C11.2833 16 11.5208 15.9042 11.7125 15.7125C11.9042 15.5208 12 15.2833 12 15C12 14.7167 11.9042 14.4792 11.7125 14.2875C11.5208 14.0958 11.2833 14 11 14C10.7167 14 10.4792 14.0958 10.2875 14.2875C10.0958 14.4792 10 14.7167 10 15C10 15.2833 10.0958 15.5208 10.2875 15.7125C10.4792 15.9042 10.7167 16 11 16ZM10 13H12V8H10V13Z"
 };

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

@@ -4,10 +4,15 @@ import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step, theme = mainTheme, }) => {
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step, autoFocus, theme = mainTheme, }) => {
     const onChange = (e) => {
         handleChange(name, e.target.value);
     };
+    const onKeyDown = (e) => {
+        if (handleSubmit && e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
     const [inputType] = useState(type);
     const [showPassword, setShowPassword] = useState(false);
     const tooglePassword = () => {
@@ -17,7 +22,7 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
         React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(InputWrapper, { width: width },
-                React.createElement(InputTextElement, { inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, error: error, placeholder: placeholder, min: min, max: max, step: step }),
                 inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
                     React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, color: theme.inputDefaultTextColor, inverseMode: true }))),
                 error && React.createElement(InputErrorMsg, null, error)))));

package/dist/esm/components/Loader/Loader.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Theme } from '../../Theme';
+import { mainTheme } from '../../Theme';
 import { Aligment } from '../Aligment';
 import { LoaderElement, LoaderItem } from './Loader.styles';
-export const Loader = ({ color = Theme.colors.primary, size = 'medium', }) => {
+export const Loader = ({ theme = mainTheme, color = theme.action, size = 'medium', }) => {
     return (React.createElement(Aligment, { justify: 'center', align: 'center' },
         React.createElement(LoaderElement, { size: size },
             React.createElement(LoaderItem, { color: color, size: size }),

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

@@ -5,7 +5,7 @@ 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, labelClose, labelAdditional, submitDisabled, size = 'small', submitLoader = false, }) => {
+export const Modal = ({ theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm = 'Save', labelClose = 'Cancel', labelAdditional = 'Reset', submitDisabled, size = 'small', submitLoader = false, }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(ModalOverlayer, null,
             React.createElement(ModalElement, { size: size },

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

@@ -1,8 +1,8 @@
 import { TextSubHeader } from '../Typography';
 import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
-import { Theme } from '../../Theme';
-export const Section = ({ title, children, titlePosition = "left", noPadding = false, backgroundColor = Theme.colors.white, }) => {
+import { mainTheme } from '../../Theme';
+export const Section = ({ title, children, titlePosition = "left", noPadding = false, theme = mainTheme, backgroundColor = theme.contentBackground, }) => {
     return (React.createElement(SectionElement, { backgroundColor: backgroundColor },
         title && (React.createElement(SectionTitle, { titlePosition: titlePosition, noPadding: noPadding },
             React.createElement(TextSubHeader, null, title))),

package/dist/esm/components/Sidepanel/Sidepanel.js

@@ -8,9 +8,7 @@ export const Sidepanel = ({ isOpen, handleClose, children, right = false, overla
     const ref = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            console.log('click:', isOpen);
             if (ref.current && !ref.current.contains(event.target)) {
-                console.log('fire:', isOpen);
                 handleClose && handleClose();
             }
         };
@@ -23,7 +21,7 @@ export const Sidepanel = ({ isOpen, handleClose, children, right = false, overla
     if (isOpen) {
         return ReactDOM.createPortal(React.createElement(React.Fragment, null,
             React.createElement(SidepanelElement, { right: right, top: top, ref: ref },
-                React.createElement(ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
+                React.createElement(ElementHeader, { handleClose: handleClose }, iconOptions &&
                     iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
                 children),
             overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })), modalRoot);

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

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

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

@@ -18,22 +18,22 @@ export const Panel = styled.div `
   padding: ${Theme.padding.m} 0;
   border-radius: ${Theme.borderRadius.m};
   height: ${(p) => (p.height ? p.height : 'auto')};
-  width: ${p => p.fullWidth ? '100%' : 'auto'};
+  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
   position: absolute;
   z-index: ${Theme.zIndex.dropdown};
   top: ${(p) => setPanelTop(p.size)};
   border: 1px solid ${Theme.colors.gray_2};
   border-top: none;
-  ${p => setPanelPosition(p.position)}
+  min-width: 30px;
+  ${(p) => setPanelPosition(p.position)}
 `;
 export const PanelOption = styled.div `
   padding: ${Theme.padding.s} ${Theme.padding.m};
   cursor: pointer;
   white-space: nowrap;
   color: ${(p) => (p.active ? Theme.colors.primary : Theme.colors.text)};
-
   :hover {
     background-color: ${lighten(0.4, Theme.colors.primary)};
   }
-  ${p => p.width && `width:${p.width};`}
+  ${(p) => p.width && `width:${p.width};`}
 `;

package/dist/esm/docs/Overview.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Input } from '../components/Input';
+import { ExampleArea, ExampleAreaTitle, ExampleItem } from '../example';
+import { Button } from '../components/Button';
+import { Dropdown } from '../components/Dropdown';
+import { Selector } from '../components/Selector';
+import { DropdownMenu } from '../components/DropdownMenu';
+import { Aligment } from '../components/Aligment';
+export const Overview = ({ sectionName, size, labelPosition, }) => {
+    const [data, setData] = useState({
+        input: 'my text',
+        dropdown: '',
+        selector1: 'test_01',
+        selector2: '',
+    });
+    const onChange = (name, value) => {
+        setData({
+            ...data,
+            [name]: value,
+        });
+    };
+    const onClick = () => {
+        alert('button click');
+    };
+    const handleClear1 = () => {
+        setData({
+            ...data,
+            selector1: '',
+        });
+    };
+    const handleClear2 = () => {
+        setData({
+            ...data,
+            selector2: '',
+        });
+    };
+    return (React.createElement(Aligment, { gap: 20, direction: 'column', align: 'stretch', justify: 'space-between' },
+        React.createElement(ExampleAreaTitle, null, sectionName),
+        React.createElement(ExampleArea, null,
+            React.createElement(ExampleItem, null,
+                React.createElement(Input, { value: data.input, size: size, label: "Input", name: "input", handleChange: onChange, labelPosition: labelPosition })),
+            React.createElement(ExampleItem, null,
+                React.createElement(Button, { size: size, text: "Button", onClick: onClick })),
+            React.createElement(ExampleItem, null,
+                React.createElement(Dropdown, { size: size, label: "Dropdown", labelPosition: labelPosition, handleSelect: onChange, name: "dropdown", value: data.dropdown, options: [
+                        { value: 'test_01', label: 'test 01' },
+                        { value: 'test_02', label: 'test 02' },
+                    ] })),
+            React.createElement(ExampleItem, null,
+                React.createElement(Selector, { labelPosition: labelPosition, size: size, label: "Selected selector", value: data.selector1, handleSelect: onChange, handleClear: handleClear1, name: "selector1", options: [
+                        { value: 'test_01', label: 'test 01' },
+                        { value: 'test_02', label: 'test 02' },
+                    ] })),
+            React.createElement(ExampleItem, null,
+                React.createElement(Selector, { handleSelect: onChange, handleClear: handleClear2, name: "selector2", value: data.selector2, labelPosition: labelPosition, size: size, label: "Selector", options: [
+                        { value: 'test_01', label: 'test 01' },
+                        { value: 'test_02', label: 'test 02' },
+                    ] })),
+            React.createElement(ExampleItem, null,
+                React.createElement(DropdownMenu, { size: size, options: [
+                        { action: () => alert('action one'), label: 'action one' },
+                        { action: () => alert('action two'), label: 'action two' },
+                    ] })))));
+};

package/dist/esm/example/ExampleComponent.js

@@ -10,8 +10,10 @@ export const ExmpleBlock = styled.div `
   font-size: ${Theme.fontSize.xl};
 `;
 export const ExmpleBlockWrapper = styled.div `
-  background-color: ${(p) => (p.color ? p.color : '#aaaaaa')};
+  background-color: ${(p) => (p.color ? p.color : '#ffffff')};
   border-radius: ${Theme.borderRadius.m};
+  box-sizing:border-box;
+  border:1px solid #dddddd;
 `;
 export const ExampleTable = styled.table `
   width: 100%;
@@ -40,7 +42,6 @@ export const ExampleArea = styled.div `
   display: flex;
   margin-bottom: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid #cbcbcb;
   align-items: flex-end;
   gap: 10px;
 `;

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

@@ -92,4 +92,5 @@ export declare const mainTheme: {
     tableMoreIconColor: string;
     chipsNeutralBackground: string;
     chipsNeutralTextColor: string;
+    chipsNeutralHoverBackground: string;
 };

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

@@ -8,6 +8,7 @@ interface IButtonsFooterProps {
     labelAdditional?: string;
     submitDisabled?: boolean;
     submitLoader?: boolean;
+    backgroundColor?: string;
 }
 export declare const ButtonsFooter: FC<IButtonsFooterProps>;
 export {};

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

@@ -7,9 +7,10 @@ interface ICardProps {
     handleClick?: () => void;
     handleBack?: () => void;
     height?: string;
-    moreIcon?: boolean;
-    backIcon?: boolean;
     options?: IAction[];
+    theme: any;
+    iconColor?: string;
+    iconHoverColor?: string;
 }
 export declare const Card: FC<ICardProps>;
 export {};

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

@@ -2,18 +2,16 @@ import React, { FC } from 'react';
 import { IAction } from '../../types';
 interface IElementHeader {
     title?: string;
-    showTitle?: boolean;
-    moreIcon?: boolean;
-    closeIcon?: boolean;
-    backIcon?: boolean;
-    actionButton?: boolean;
     actionLabel?: string;
     handleClose?: () => void;
     handleClick?: () => void;
     handleBack?: () => void;
     children?: React.ReactNode;
-    bgColor?: string;
+    backgroundColor?: string;
+    iconColor?: string;
+    iconHoverColor?: string;
     options?: IAction[];
+    theme?: any;
 }
 export declare const ElementHeader: FC<IElementHeader>;
 export {};

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

@@ -33,4 +33,5 @@ export declare const iconsPath: {
     upgrade: string;
     visibility: string;
     visability_off: string;
+    warning: string;
 };

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

@@ -1,12 +1,14 @@
 import { FC } from 'react';
 import { InputType, IFormElement } from '../../types';
 export interface IInputProps extends IFormElement {
-    type: InputType;
+    type?: InputType;
     handleChange: (name: string, value: string | number) => void;
     placeholder?: string;
     min?: number;
     max?: number;
     step?: number;
+    autoFocus?: boolean;
     theme?: any;
+    handleSubmit?: () => void;
 }
 export declare const Input: FC<IInputProps>;

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

@@ -7,6 +7,7 @@ interface IInputTextElementProps extends InputHTMLAttributes<HTMLInputElement> {
     width?: string;
     type: InputType;
     theme: any;
+    onKeyDown: any;
 }
 export declare const InputTextElement: import("styled-components").StyledComponent<"input", any, IInputTextElementProps, never>;
 export declare const InputLabelElement: import("styled-components").StyledComponent<"div", any, import("../Typography").ITextLabelProps, never>;

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

@@ -3,5 +3,6 @@ import { InputSize } from '../../types';
 export interface ILoaderProps {
     color?: string;
     size?: InputSize;
+    theme?: any;
 }
 export declare const Loader: FC<ILoaderProps>;

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

@@ -2,9 +2,10 @@ import React, { FC } from 'react';
 import { TitlePosition } from '../../types';
 export interface ISectionProps {
     title?: string;
-    children: React.ReactNode;
     titlePosition?: TitlePosition;
     noPadding?: boolean;
     backgroundColor?: string;
+    children: React.ReactNode;
+    theme?: any;
 }
 export declare const Section: FC<ISectionProps>;

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

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

package/dist/types/docs/Overview.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { InputSize, LabelPosition } from '../types';
+interface IOverview {
+    size: InputSize;
+    labelPosition: LabelPosition;
+    sectionName: string;
+}
+export declare const Overview: FC<IOverview>;
+export {};

package/package.json

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