venice-ui 1.0.25 → 1.0.26

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

@@ -14,5 +14,6 @@ exports.Aligment = styled_components_1.default.div `
   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'}
+  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'};
+  gap: ${p => p.gap ? p.gap + 'px' : '0px'};
 `;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const react_1 = __importDefault(require("react"));
 const Button_styles_1 = require("./Button.styles");
-const Button = ({ text, mode = 'primary', size = 'regular', right = false, left = false, onClick, }) => {
+const Button = ({ text, mode = 'primary', size = 'medium', right = false, left = false, onClick, }) => {
     return (react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
 };
 exports.Button = Button;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonElement = void 0;
+const common_1 = require("../common");
 const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
@@ -19,40 +20,30 @@ exports.ButtonElement = styled_components_1.default.button `
   align-items: center;
   justify-content: center;
   display: flex;
-  
+  white-space: nowrap;
+  flex-shrink: 1;
 
   ${(p) => p.mode === 'primary' &&
     `background-color: ${Theme_1.Theme.colors.primary};
     color: ${Theme_1.Theme.colors.white};
     border: 1px solid rgba(0,0,0,0.15);`}
-  ${(p) => p.mode === 'inverse' &&
+  ${(p) => p.mode === 'secondary' &&
     `background-color: ${Theme_1.Theme.colors.white};
     color: ${Theme_1.Theme.colors.primary};
     border: 1px solid ${Theme_1.Theme.colors.primary};
     `}
-  ${(p) => p.mode === 'ghost' &&
+  ${(p) => p.mode === 'inverse' &&
     `background-color:transparent;
     color: ${Theme_1.Theme.colors.primary};
     border:none;`}
-  ${(p) => p.size === 'regular' &&
-    `font-size: ${Theme_1.Theme.fontSize.m};
-    line-height: ${Theme_1.Theme.lineHeight.m};
-    padding: ${Theme_1.Theme.padding.m} ${Theme_1.Theme.padding.l};`}
-  ${(p) => p.size === 'small' &&
-    `font-size: ${Theme_1.Theme.fontSize.s};
-    line-height: ${Theme_1.Theme.lineHeight.s};
-    padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};`}
-  ${(p) => p.size === 'flat' &&
-    `font-size: ${Theme_1.Theme.fontSize.m};
-    line-height: ${Theme_1.Theme.lineHeight.m};
-    padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.s};`}
+    ${(p) => (0, common_1.setSize)(p.size)}
   &:hover {
     transition: 300ms;
     ${(p) => p.mode === 'primary' &&
     `background-color: ${(0, polished_1.lighten)(0.1, Theme_1.Theme.colors.primary)};`}
-    ${(p) => p.mode === 'inverse' &&
+    ${(p) => p.mode === 'secondary' &&
     `background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)}`};
-    ${(p) => p.mode === 'ghost' && `background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};`}
+    ${(p) => p.mode === 'inverse' && `background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};`}
   }
 
   &.disable,

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

@@ -28,7 +28,8 @@ const react_1 = __importStar(require("react"));
 const Aligment_1 = require("../Aligment");
 const Dropdown_styles_1 = require("./Dropdown.styles");
 const DropdownElements_1 = require("./DropdownElements");
-const InputText_1 = require("../InputText");
+const Input_1 = require("../Input");
+const common_1 = require("../common");
 const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -57,11 +58,11 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
         };
     }, [open]);
     return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
-        label && (react_1.default.createElement(InputText_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen() },
             react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
-            open && (react_1.default.createElement(Dropdown_styles_1.DropdownOptions, { ref: ref }, options &&
-                options.map((option) => (react_1.default.createElement(Dropdown_styles_1.DropdownOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
-            error && react_1.default.createElement(InputText_1.InputErrorMsg, null, error))));
+            open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "left", fullWidth: true }, options &&
+                options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
+            error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
 };
 exports.Dropdown = Dropdown;

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

@@ -3,10 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownOption = exports.DropdownOptions = exports.DropdownElement = void 0;
+exports.DropdownElement = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-const polished_1 = require("polished");
 exports.DropdownElement = styled_components_1.default.div `
   position: relative;
   cursor: pointer;
@@ -14,25 +12,3 @@ exports.DropdownElement = styled_components_1.default.div `
   box-sizing:border-box;
   width:100%;
 `;
-exports.DropdownOptions = styled_components_1.default.div `
-  box-sizing:border-box;
-  background-color:${Theme_1.Theme.colors.white};
-  box-shadow:${Theme_1.Theme.shadow.m};
-  padding: ${Theme_1.Theme.padding.m} 0 ;
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  height:${p => p.height ? p.height : 'auto'};
-  width:100%;
-  position:absolute;
-  z-index:${Theme_1.Theme.zIndex.dropdown};
-  top:36px;
-  left:0px;
-`;
-exports.DropdownOption = styled_components_1.default.div `
-  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
-  cursor: pointer;
-  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)};
-  }
-  
-`;

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

@@ -9,6 +9,8 @@ const common_1 = require("../common");
 const Theme_1 = require("../../Theme");
 exports.Field = styled_components_1.default.div `
   position: relative;
+  display:flex;
+  flex-shrink: 2;
   ${common_1.defaultStyles}
   ${(p) => (0, common_1.setSize)(p.inputSize)}
   color: ${Theme_1.Theme.colors.text};

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

@@ -28,7 +28,7 @@ const ElementHeader = ({ title, showTitle = true, moreIcon = false, backIcon = f
         }
         else if (!closeIcon && actionButton && handleClick) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: "flex-end", width: "auto" },
-                react_1.default.createElement(Button_1.Button, { mode: "ghost", text: actionLabel, onClick: () => handleClick() }),
+                react_1.default.createElement(Button_1.Button, { mode: "inverse", text: actionLabel, onClick: () => handleClick() }),
                 moreIcon && options && react_1.default.createElement(More_1.More, { options: options })));
         }
     };

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

@@ -0,0 +1,50 @@
+"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.File = void 0;
+const Aligment_1 = require("../Aligment");
+const Input_1 = require("../Input");
+const react_1 = __importStar(require("react"));
+const Button_1 = require("../Button");
+const File_styles_1 = require("./File.styles");
+const Dropdown_1 = require("../Dropdown");
+const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, }) => {
+    const fileRef = (0, react_1.useRef)(null);
+    const handleSelect = (e) => {
+        console.log(e);
+    };
+    const openFileSelector = () => {
+        fileRef.current.click();
+    };
+    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_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        react_1.default.createElement(Input_1.InputWrapper, { width: width },
+            react_1.default.createElement(Aligment_1.Aligment, { gap: 10, wrap: "nowrap" },
+                react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
+                react_1.default.createElement(Button_1.Button, { size: size, mode: "inverse", onClick: openFileSelector, text: "Wybierz plik" })),
+            react_1.default.createElement(File_styles_1.HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
+            error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
+};
+exports.File = File;

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

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

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

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./File"), exports);

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

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

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

@@ -25,4 +25,7 @@ exports.IconElement = styled_components_1.default.div `
       cursor:pointer;
     }
   `}
+  ${p => p.active && `
+  background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : (0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
+  `}
 `;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const Input_styles_1 = require("./Input.styles");
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, min, max, step }) => {
+    const onChange = (e) => {
+        handleChange(name, e.target.value);
+    };
+    return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+        label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
+            react_1.default.createElement(Input_styles_1.InputTextElement, { inputSize: size, type: type, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+            error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error))));
+};
+exports.Input = Input;

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

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Input.styles"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+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', }) => {
+    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 }),
+            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }),
+            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }),
+            react_1.default.createElement(Loader_styles_1.LoaderItem, { color: color, size: size }))));
+};
+exports.Loader = Loader;

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

@@ -0,0 +1,81 @@
+"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.LoaderItem = exports.LoaderElement = exports.Action3 = exports.Action2 = exports.Action1 = void 0;
+const common_1 = require("../common");
+const styled_components_1 = __importStar(require("styled-components"));
+exports.Action1 = (0, styled_components_1.keyframes) `
+  0% {transform: scale(0);}
+  100% {transform: scale(1);}
+`;
+const Action2 = (move) => (0, styled_components_1.keyframes) `
+  0% {transform: translate(0, 0);}
+  100% {transform: translate(${move}, 0);}
+`;
+exports.Action2 = Action2;
+exports.Action3 = (0, styled_components_1.keyframes) `
+  0% {transform: scale(1);}
+  100% {transform: scale(0);}
+`;
+exports.LoaderElement = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+  width: ${p => (0, common_1.setAnimationParams)(p.size).width};
+  height: ${p => (0, common_1.setAnimationParams)(p.size).itemSize};
+  
+`;
+exports.LoaderItem = styled_components_1.default.div `
+  position: absolute;
+  top: 0px;
+  width: ${p => (0, common_1.setAnimationParams)(p.size).itemSize};
+  height: ${p => (0, common_1.setAnimationParams)(p.size).itemSize};
+  border-radius: 50%;
+  background-color: ${(p) => p.color};
+  animation-timing-function: ease-in-out;
+  :nth-child(1) {
+    left: ${p => (0, common_1.setAnimationParams)(p.size).itemOne};
+    animation-name: ${exports.Action1};
+    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+  :nth-child(2) {
+    left: ${p => (0, common_1.setAnimationParams)(p.size).itemTwo};
+    animation-name: ${p => (0, exports.Action2)((0, common_1.setAnimationParams)(p.size).move)};
+    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+  :nth-child(3) {
+    left: ${p => (0, common_1.setAnimationParams)(p.size).itemThree};
+    animation-name: ${p => (0, exports.Action2)((0, common_1.setAnimationParams)(p.size).move)};
+    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+  :nth-child(4) {
+    left: ${p => (0, common_1.setAnimationParams)(p.size).itemFour};
+    animation-name: ${exports.Action3};
+    animation-duration: ${p => (0, common_1.setAnimationParams)(p.size).duration};
+    animation-iteration-count: infinite;
+  }
+`;

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

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Loader"), exports);

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

@@ -20,7 +20,7 @@ const Modal = ({ children, title, handleConfirm, handleClose, labelConfirm, labe
             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() ? 'inverse' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),
+                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 }))))));
 };
 exports.Modal = Modal;

package/dist/cjs/components/More/More.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.More = void 0;
+const common_1 = require("../common");
 const react_1 = __importStar(require("react"));
 const Theme_1 = require("../../Theme");
 const Icons_1 = require("../Icons");
@@ -43,8 +44,8 @@ const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
         };
     }, [open]);
     return (react_1.default.createElement(More_styles_1.MoreElement, null,
-        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: Theme_1.Theme.colors.primary }),
-        open && (react_1.default.createElement(More_styles_1.MoreOptions, { ref: ref }, options &&
-            options.map((option) => (react_1.default.createElement(More_styles_1.MoreOption, { key: option.label, onClick: option.action }, option.label)))))));
+        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: Theme_1.Theme.colors.primary, size: (0, common_1.setIconSize)(size), active: open }),
+        open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" }, options &&
+            options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.label, onClick: option.action, active: true }, option.label)))))));
 };
 exports.More = More;

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

@@ -3,34 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoreOption = exports.MoreOptions = exports.MoreElement = void 0;
-const polished_1 = require("polished");
+exports.MoreElement = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
 exports.MoreElement = styled_components_1.default.div `
   position:relative;
   width:auto;
   display: flex;
   box-sizing: border-box;
 `;
-exports.MoreOptions = styled_components_1.default.div `
-  box-sizing:border-box;
-  background-color:${Theme_1.Theme.colors.white};
-  box-shadow:${Theme_1.Theme.shadow.m};
-  padding: ${Theme_1.Theme.padding.m} 0;
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  width:auto;
-  position:absolute;
-  z-index:${Theme_1.Theme.zIndex.dropdown};
-  top:32px;
-  left:0px;
-`;
-exports.MoreOption = styled_components_1.default.div `
-  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
-  cursor: pointer;
-  color: ${Theme_1.Theme.colors.primary};
-  :hover{
-    background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
-  }
-  
-`;

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

@@ -26,11 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Selector = void 0;
 const Aligment_1 = require("../Aligment");
 const react_1 = __importStar(require("react"));
-const InputText_1 = require("../InputText");
+const Input_1 = require("../Input");
 const Icons_1 = require("../Icons");
 const Selector_styles_1 = require("./Selector.styles");
 const Modal_1 = require("../Modal");
-const Dropdown_styles_1 = require("../Dropdown/Dropdown.styles");
+const common_1 = require("../common");
 const Selector = ({ label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const selectOption = (selectedValue) => {
@@ -41,13 +41,13 @@ const Selector = ({ label, labelPosition = 'top', size = 'medium', width, option
         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(InputText_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        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: 20 }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(true), size: 20 })),
+                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(Dropdown_styles_1.DropdownOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label))))),
-            error && react_1.default.createElement(InputText_1.InputErrorMsg, null, error))));
+                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))));
 };
 exports.Selector = Selector;

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

@@ -6,22 +6,21 @@ 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 common_1 = require("../common");
 const polished_1 = require("polished");
+const common_1 = require("../common");
 exports.SelectorElement = styled_components_1.default.div `
   position: relative;
   cursor: pointer;
   display:flex;
   box-sizing:border-box;
+  align-items: center;
 `;
 exports.SelectorValue = styled_components_1.default.div `
+  ${common_1.defaultStyles}
   cursor: pointer;
   display:flex;
-  box-sizing:border-box;
-  width:100%;
   align-items: center;
-  padding: ${Theme_1.Theme.padding.s};
-  ${(p) => (0, common_1.setLabelFontSize)(p.size)}
+  ${(p) => (0, common_1.setSize)(p.size)}
   color:${Theme_1.Theme.colors.primary};
   &:hover{
     background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};

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

@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollCotainer = exports.Container = void 0;
+exports.PanelOption = exports.Panel = exports.ScrollCotainer = exports.Container = void 0;
+const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
+const inputStyles_1 = require("./inputStyles");
 exports.Container = styled_components_1.default.div `
   width: 100%;
 `;
@@ -15,3 +17,28 @@ exports.ScrollCotainer = styled_components_1.default.div `
   overflow: auto;
   box-sizing: border-box;
 `;
+exports.Panel = styled_components_1.default.div `
+  box-sizing: border-box;
+  background-color: ${Theme_1.Theme.colors.white};
+  box-shadow: ${Theme_1.Theme.shadow.m};
+  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'};
+  position: absolute;
+  z-index: ${Theme_1.Theme.zIndex.dropdown};
+  top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
+  border: 1px solid ${Theme_1.Theme.colors.gray_1};
+  border-top: none;
+  ${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)};
+  }
+`;