venice-ui 1.0.39 → 1.0.41

package/dist/cjs/Theme/Theme.js

@@ -60,4 +60,24 @@ exports.mainTheme = {
     buttonInverseHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     disabledBackground: exports.Theme.colors.disableBackground,
     disabledText: exports.Theme.colors.disableText,
+    //text
+    textColor: exports.Theme.colors.text,
+    // input
+    inputDefaultBackground: exports.Theme.colors.white,
+    inputDefaultBorder: exports.Theme.colors.gray_1,
+    inputDefaultTextColor: exports.Theme.colors.text,
+    inputFocusBackground: (0, polished_1.lighten)(0.4, exports.Theme.colors.primary),
+    inputFocusBorder: exports.Theme.colors.primary,
+    inputFocusTextColor: exports.Theme.colors.text,
+    inputDisabledBackground: exports.Theme.colors.disableBackground,
+    inputDisabledBorder: exports.Theme.colors.disableText,
+    inputDisabledTextColor: exports.Theme.colors.disableText,
+    inputErrorBackground: (0, polished_1.lighten)(0.5, exports.Theme.colors.red),
+    inputErrorBorder: exports.Theme.colors.red,
+    inputErrorTextColor: exports.Theme.colors.red,
+    // global
+    contentBackground: exports.Theme.colors.white,
+    // selector / dropdown
+    optionActiveColor: exports.Theme.colors.primary,
+    optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary)
 };

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

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

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

@@ -24,12 +24,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-const Aligment_1 = require("../Aligment");
 const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+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, }) => {
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step, theme = Theme_1.mainTheme, }) => {
     const onChange = (e) => {
         handleChange(name, e.target.value);
     };
@@ -38,12 +39,13 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
     const tooglePassword = () => {
         setShowPassword(!showPassword);
     };
-    return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-        label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
-            react_1.default.createElement(Input_styles_1.InputTextElement, { inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
-            inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
-                react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, color: Theme_1.Theme.colors.primary, noHover: true }))),
-            error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error))));
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+            label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+            react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
+                react_1.default.createElement(Input_styles_1.InputTextElement, { inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
+                    react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, color: theme.inputDefaultTextColor, noHover: true }))),
+                error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));
 };
 exports.Input = Input;

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

@@ -10,20 +10,36 @@ const Theme_1 = require("../../Theme");
 const Typography_1 = require("../Typography");
 exports.InputTextElement = styled_components_1.default.input `
   position:relative;
-  ${common_1.defaultStyles}
+  box-sizing: border-box;
+  background-color: ${p => p.theme.inputDefaultBackground};
+  border: 1px solid ${p => p.theme.inputDefaultBorder};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  width: 100%;
+  font-family: "Lato", sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   ${(p) => (0, common_1.setSize)(p.inputSize)}
-  color: ${Theme_1.Theme.colors.text};
+  color: ${p => p.theme.inputDefaultTextColor};
   width: ${p => p.width ? p.width : '100%'};
   ${p => p.type === 'password' && `padding-right:32px;`}
   :focus {
-    ${common_1.colorMode.default}
+    border-color: ${p => p.theme.inputFocusBorder};
+    background-color: ${p => p.theme.inputFocusBackground};
+    color:${p => p.theme.inputFocusTextColor};
   }
   :disabled{
-    ${common_1.colorMode.disabled}
+    background-color: ${p => p.theme.inputDisabledBackground};
+    border-color: ${p => p.theme.inputDisabledBorder};
+    color:${p => p.theme.inputDisabledTextColor};
     cursor: not-allowed;
   }
   ${p => p.error && `
-    ${common_1.colorMode.error}
+  background-color: ${p.theme.inputErrorBackground};
+  border-color: ${p.theme.inputErrorBorder};
+  color:${p.theme.inputErrorTextColor};
   `}
 `;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
@@ -36,7 +52,7 @@ exports.InputWrapper = styled_components_1.default.div `
   width: ${p => p.width ? p.width : '100%'};
 `;
 exports.InputErrorMsg = styled_components_1.default.div `
-  color: ${Theme_1.Theme.colors.red};
+  color: ${p => p.theme.inputErrorTextColor};
   font-size: ${Theme_1.Theme.fontSize.s};
   position: absolute;
   bottom: -20px;

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

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

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

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

package/dist/cjs/components/Selector/Selector.js

@@ -24,14 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Selector = void 0;
-const Aligment_1 = require("../Aligment");
 const react_1 = __importStar(require("react"));
+const Aligment_1 = require("../Aligment");
+const Theme_1 = require("../../Theme/Theme");
 const Input_1 = require("../Input");
 const Icons_1 = require("../Icons");
 const Selector_styles_1 = require("./Selector.styles");
 const Modal_1 = require("../Modal");
 const common_1 = require("../common");
-const Selector = ({ label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', }) => {
+const styled_components_1 = require("styled-components");
+const Typography_1 = require("../Typography");
+const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -40,14 +43,14 @@ const Selector = ({ label, labelPosition = 'top', size = 'medium', width, option
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
-    return (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(Selector_styles_1.SelectorElement, null,
-            value ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
-                react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size) }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(true), size: (0, common_1.setIconSize)(size) })),
-            open && (react_1.default.createElement(Modal_1.Modal, { title: "Select", labelClose: "Close", handleClose: () => toogleOpen(false) }, options &&
-                options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label))))),
-            error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
+    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(Selector_styles_1.SelectorElement, null,
+                value ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
+                    react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size) }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(true), size: (0, common_1.setIconSize)(size) })),
+                open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false) }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
+                error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
 };
 exports.Selector = Selector;

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

@@ -5,8 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectorValue = exports.SelectorElement = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-const polished_1 = require("polished");
 const common_1 = require("../common");
 exports.SelectorElement = styled_components_1.default.div `
   position: relative;
@@ -21,9 +19,9 @@ exports.SelectorValue = styled_components_1.default.div `
   display:flex;
   align-items: center;
   ${(p) => (0, common_1.setSize)(p.size)}
-  color:${Theme_1.Theme.colors.primary};
+  color:${p => p.theme.optionActiveColor};
   &:hover{
-    background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
+    background-color: ${p => p.theme.optionHoverBackground};
   }
       
 `;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.colorMode = exports.setEyeTopPosition = exports.setButtonSize = exports.setSize = exports.eyeTopPosition = exports.buttonPadding = exports.inputPadding = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonSize = exports.setSize = exports.eyeTopPosition = exports.buttonPadding = exports.inputPadding = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -69,7 +69,7 @@ const setEyeTopPosition = (size) => {
     return exports.eyeTopPosition[size];
 };
 exports.setEyeTopPosition = setEyeTopPosition;
-exports.colorMode = {
+exports.inputColorSchema = {
     default: `
     border-color: ${Theme_1.Theme.colors.primary};
     background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};

package/dist/esm/Theme/Theme.js

@@ -57,4 +57,24 @@ export const mainTheme = {
     buttonInverseHover: lighten(0.3, Theme.colors.primary),
     disabledBackground: Theme.colors.disableBackground,
     disabledText: Theme.colors.disableText,
+    //text
+    textColor: Theme.colors.text,
+    // input
+    inputDefaultBackground: Theme.colors.white,
+    inputDefaultBorder: Theme.colors.gray_1,
+    inputDefaultTextColor: Theme.colors.text,
+    inputFocusBackground: lighten(0.4, Theme.colors.primary),
+    inputFocusBorder: Theme.colors.primary,
+    inputFocusTextColor: Theme.colors.text,
+    inputDisabledBackground: Theme.colors.disableBackground,
+    inputDisabledBorder: Theme.colors.disableText,
+    inputDisabledTextColor: Theme.colors.disableText,
+    inputErrorBackground: lighten(0.5, Theme.colors.red),
+    inputErrorBorder: Theme.colors.red,
+    inputErrorTextColor: Theme.colors.red,
+    // global
+    contentBackground: Theme.colors.white,
+    // selector / dropdown
+    optionActiveColor: Theme.colors.primary,
+    optionHoverBackground: lighten(0.3, Theme.colors.primary)
 };

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

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

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

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

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

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

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

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

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

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

package/dist/esm/components/Selector/Selector.js

@@ -1,11 +1,14 @@
-import { Aligment } from '../Aligment';
 import React, { useState } from 'react';
+import { Aligment } from '../Aligment';
+import { mainTheme } from '../../Theme/Theme';
 import { InputErrorMsg, InputLabelElement } from '../Input';
 import { Icon } from '../Icons';
 import { SelectorElement, SelectorValue } from './Selector.styles';
 import { Modal } from '../Modal';
 import { PanelOption, setIconSize } from '../common';
-export const Selector = ({ label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', }) => {
+import { ThemeProvider } from 'styled-components';
+import { Text } from '../Typography';
+export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', }) => {
     const [open, toogleOpen] = useState(false);
     const selectOption = (selectedValue) => {
         handleSelect(name, selectedValue);
@@ -14,13 +17,13 @@ export const Selector = ({ label, labelPosition = 'top', size = 'medium', width,
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
-    return (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(SelectorElement, null,
-            value ? (React.createElement(React.Fragment, null,
-                React.createElement(SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
-                React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size) }))) : (React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(true), size: setIconSize(size) })),
-            open && (React.createElement(Modal, { title: "Select", labelClose: "Close", handleClose: () => toogleOpen(false) }, options &&
-                options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label))))),
-            error && React.createElement(InputErrorMsg, null, error))));
+    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(SelectorElement, null,
+                value ? (React.createElement(React.Fragment, null,
+                    React.createElement(SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
+                    React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size) }))) : (React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(true), size: setIconSize(size) })),
+                open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false) }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
+                error && React.createElement(InputErrorMsg, null, error)))));
 };

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

@@ -1,6 +1,4 @@
 import styled from "styled-components";
-import { Theme } from "../../Theme";
-import { lighten } from "polished";
 import { defaultStyles, setSize } from "../common";
 export const SelectorElement = styled.div `
   position: relative;
@@ -15,9 +13,9 @@ export const SelectorValue = styled.div `
   display:flex;
   align-items: center;
   ${(p) => setSize(p.size)}
-  color:${Theme.colors.primary};
+  color:${p => p.theme.optionActiveColor};
   &:hover{
-    background-color: ${lighten(0.3, Theme.colors.primary)};
+    background-color: ${p => p.theme.optionHoverBackground};
   }
       
 `;

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

@@ -63,7 +63,7 @@ export const setButtonSize = (size) => {
 export const setEyeTopPosition = (size) => {
     return eyeTopPosition[size];
 };
-export const colorMode = {
+export const inputColorSchema = {
     default: `
     border-color: ${Theme.colors.primary};
     background-color: ${lighten(0.4, Theme.colors.primary)};

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

@@ -55,4 +55,20 @@ export declare const mainTheme: {
     buttonInverseHover: string;
     disabledBackground: string;
     disabledText: string;
+    textColor: string;
+    inputDefaultBackground: string;
+    inputDefaultBorder: string;
+    inputDefaultTextColor: string;
+    inputFocusBackground: string;
+    inputFocusBorder: string;
+    inputFocusTextColor: string;
+    inputDisabledBackground: string;
+    inputDisabledBorder: string;
+    inputDisabledTextColor: string;
+    inputErrorBackground: string;
+    inputErrorBorder: string;
+    inputErrorTextColor: string;
+    contentBackground: string;
+    optionActiveColor: string;
+    optionHoverBackground: string;
 };

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { InputSize, IOption, LabelPosition } from '../../types';
 export interface ISelectorProps {
+    theme?: any;
     label?: string;
     labelPosition?: LabelPosition;
     size?: InputSize;
@@ -12,5 +13,7 @@ export interface ISelectorProps {
     handleSelect: (name: string, value: string | number) => void;
     handleClear: () => void;
     iconName?: string;
+    optionsPanelTitle?: string;
+    optionsPanelEmptyMsg?: string;
 }
 export declare const Selector: FC<ISelectorProps>;

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

@@ -2,6 +2,7 @@ import { InputSize } from "../../types";
 export declare const SelectorElement: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface ISelectorValueStyle {
     size: InputSize;
+    theme: any;
 }
 export declare const SelectorValue: import("styled-components").StyledComponent<"div", any, ISelectorValueStyle, never>;
 export {};

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

@@ -23,7 +23,7 @@ export declare const eyeTopPosition: {
 export declare const setSize: (size: InputSize) => string;
 export declare const setButtonSize: (size: InputSize) => string;
 export declare const setEyeTopPosition: (size: InputSize) => string;
-export declare const colorMode: {
+export declare const inputColorSchema: {
     default: string;
     disabled: string;
     error: string;

package/package.json

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