venice-ui 1.0.6 → 1.0.9

package/dist/cjs/Theme/Theme.js

@@ -10,7 +10,8 @@ exports.Theme = {
         white: "#ffffff",
         black: "#333333",
         gray_1: "#b7b7b7",
-        overlayer: 'rgba(0,0,0,0.4)'
+        overlayer: 'rgba(0,0,0,0.4)',
+        red: '#ad1616'
     },
     fontSize: {
         xs: "12px",
@@ -36,6 +37,7 @@ exports.Theme = {
     },
     zIndex: {
         modalOverlayer: 1000,
+        dropdown: 800,
     },
     borderRadius: {
         s: '2px',
@@ -43,7 +45,7 @@ exports.Theme = {
         l: '8px',
     },
     shadow: {
+        s: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);',
         m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
     }
 };
-//# sourceMappingURL=Theme.js.map

package/dist/cjs/Theme/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("./Theme"), exports);

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

@@ -16,4 +16,3 @@ exports.Aligment = styled_components_1.default.div `
   padding: ${p => p.vPadding ? p.vPadding : '0'} ${p => p.hPadding ? p.hPadding : '0'};
   background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'}
 `;
-//# sourceMappingURL=Aligment.styles.js.map

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

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Aligment = void 0;
 var Aligment_styles_1 = require("./Aligment.styles");
 Object.defineProperty(exports, "Aligment", { enumerable: true, get: function () { return Aligment_styles_1.Aligment; } });
-//# sourceMappingURL=index.js.map

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

@@ -10,4 +10,3 @@ const Button = ({ text, mode = 'primary', size = 'regular', right = false, left
     return (react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
 };
 exports.Button = Button;
-//# sourceMappingURL=Button.js.map

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

@@ -19,6 +19,7 @@ exports.ButtonElement = styled_components_1.default.button `
   align-items: center;
   justify-content: center;
   display: flex;
+  
 
   ${(p) => p.mode === 'primary' &&
     `background-color: ${Theme_1.Theme.colors.primary};
@@ -51,7 +52,7 @@ exports.ButtonElement = styled_components_1.default.button `
     `background-color: ${(0, polished_1.lighten)(0.1, Theme_1.Theme.colors.primary)};`}
     ${(p) => p.mode === 'inverse' &&
     `background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)}`};
-    ${(p) => p.mode === 'ghost' && `color: ${(0, polished_1.lighten)(0.2, Theme_1.Theme.colors.primary)};`}
+    ${(p) => p.mode === 'ghost' && `background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};`}
   }
 
   &.disable,
@@ -63,4 +64,3 @@ exports.ButtonElement = styled_components_1.default.button `
     }
   }
 `;
-//# sourceMappingURL=Button.styles.js.map

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

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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, }) => {
+    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 })),
+        react_1.default.createElement(Card_styles_1.CardContent, null, children)));
+};
+exports.Card = Card;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContent = exports.CardElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme/Theme");
+exports.CardElement = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${Theme_1.Theme.colors.white};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  height: ${p => p.height ? p.height : '100%'};
+  box-shadow: ${Theme_1.Theme.shadow.s}
+`;
+exports.CardContent = styled_components_1.default.div `
+  box-sizing: border-box; 
+  display: flex;
+  padding:  ${Theme_1.Theme.padding.l};
+  width: 100%;
+  flex-direction: row;
+`;

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

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

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

@@ -0,0 +1,67 @@
+"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.Dropdown = void 0;
+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 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);
+    const getLabelForValue = (value) => {
+        return options.find((option) => option.value === value).label;
+    };
+    const handleOpen = () => {
+        if (!disabled) {
+            toogleOpen(!open);
+        }
+    };
+    const selectOption = (e, selectedValue) => {
+        e.stopPropagation();
+        handleSelect(name, selectedValue);
+        toogleOpen(false);
+    };
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                toogleOpen(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [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)),
+        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))));
+};
+exports.Dropdown = Dropdown;

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

@@ -0,0 +1,38 @@
+"use strict";
+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;
+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;
+  display:flex;
+  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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const common_1 = require("../common");
+const Theme_1 = require("../../Theme");
+exports.Field = styled_components_1.default.div `
+  position: relative;
+  ${common_1.defaultStyles}
+  ${(p) => (0, common_1.setSize)(p.inputSize)}
+  color: ${Theme_1.Theme.colors.text};
+  width: ${(p) => (p.width ? p.width : '100%')};
+  ${(p) => p.error &&
+    `
+    ${common_1.colorMode.error}
+  `}
+  ${(p) => p.active &&
+    `
+    ${common_1.colorMode.default}
+  `}
+  ${(p) => p.disabled &&
+    `
+    ${common_1.colorMode.disabled}
+    cursor: not-allowed;
+  `}
+`;

package/dist/cjs/components/Dropdown/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("./Dropdown"), exports);
+__exportStar(require("./DropdownElements"), exports);

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const Icons_1 = require("../Icons");
+const Aligment_1 = require("../Aligment");
+const Typography_1 = require("../Typography");
+const Theme_1 = require("../../Theme");
+const Button_1 = require("../Button");
+const More_1 = require("../More");
+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 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() })),
+                react_1.default.createElement(Typography_1.TextHeader, null, title)));
+        }
+        else if (!showTitle && children) {
+            return children;
+        }
+    };
+    const rightSide = () => {
+        if (closeIcon && handleClose) {
+            return react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close" });
+        }
+        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() }),
+                moreIcon && options && react_1.default.createElement(More_1.More, { options: options })));
+        }
+    };
+    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 },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            leftSide(),
+            rightSide())));
+};
+exports.ElementHeader = ElementHeader;

package/dist/cjs/components/ElementHeader/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("./ElementHeader"), exports);

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

@@ -10,8 +10,7 @@ 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 },
-        react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 48 48', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+        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 }))));
 };
 exports.Icon = Icon;
-//# sourceMappingURL=Icon.js.map

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

@@ -18,7 +18,7 @@ exports.IconElement = styled_components_1.default.div `
     padding: ${Theme_1.Theme.padding.s};
     cursor:pointer;
     &:hover{
-      background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
+      background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : (0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
       transition: 300ms;
     }
     svg{
@@ -26,4 +26,3 @@ exports.IconElement = styled_components_1.default.div `
     }
   `}
 `;
-//# sourceMappingURL=Icon.styles.js.map

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

@@ -2,14 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconsPath = void 0;
 exports.iconsPath = {
-    close: "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z",
-    add: "M22.5 38V25.5H10v-3h12.5V10h3v12.5H38v3H25.5V38Z",
-    back: "M24 40 8 24 24 8l2.1 2.1-12.4 12.4H40v3H13.7l12.4 12.4Z",
-    delete: "M13.05 42q-1.25 0-2.125-.875T10.05 39V10.5H8v-3h9.4V6h13.2v1.5H40v3h-2.05V39q0 1.2-.9 2.1-.9.9-2.1.9Zm21.9-31.5h-21.9V39h21.9Zm-16.6 24.2h3V14.75h-3Zm8.3 0h3V14.75h-3Zm-13.6-24.2V39Z",
-    remove: "M10 25.5v-3h28v3Z",
-    person: "M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Zm3-3h26v-1.7q0-.8-.475-1.525-.475-.725-1.175-1.075-3.2-1.55-5.85-2.125Q26.85 30 24 30t-5.55.575q-2.7.575-5.85 2.125-.7.35-1.15 1.075Q11 34.5 11 35.3Zm13-16.05q1.95 0 3.225-1.275Q28.5 18.4 28.5 16.45q0-1.95-1.275-3.225Q25.95 11.95 24 11.95q-1.95 0-3.225 1.275Q19.5 14.5 19.5 16.45q0 1.95 1.275 3.225Q22.05 20.95 24 20.95Zm0-4.5ZM24 37Z",
-    menu: "M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z",
-    expand_more: "m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z",
-    expand_less: "M14.15 30.75 12 28.6l12-12 12 11.95-2.15 2.15L24 20.85Z",
+    calendar: "M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6q0-.825.587-1.412Q4.175 4 5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588Q21 5.175 21 6v14q0 .825-.587 1.413Q19.825 22 19 22Zm0-2h14V10H5v10ZM5 8h14V6H5Zm0 0V6v2Zm7 6q-.425 0-.712-.288Q11 13.425 11 13t.288-.713Q11.575 12 12 12t.713.287Q13 12.575 13 13t-.287.712Q12.425 14 12 14Zm-4 0q-.425 0-.713-.288Q7 13.425 7 13t.287-.713Q7.575 12 8 12t.713.287Q9 12.575 9 13t-.287.712Q8.425 14 8 14Zm8 0q-.425 0-.712-.288Q15 13.425 15 13t.288-.713Q15.575 12 16 12t.712.287Q17 12.575 17 13t-.288.712Q16.425 14 16 14Zm-4 4q-.425 0-.712-.288Q11 17.425 11 17t.288-.712Q11.575 16 12 16t.713.288Q13 16.575 13 17t-.287.712Q12.425 18 12 18Zm-4 0q-.425 0-.713-.288Q7 17.425 7 17t.287-.712Q7.575 16 8 16t.713.288Q9 16.575 9 17t-.287.712Q8.425 18 8 18Zm8 0q-.425 0-.712-.288Q15 17.425 15 17t.288-.712Q15.575 16 16 16t.712.288Q17 16.575 17 17t-.288.712Q16.425 18 16 18Z",
+    bookmark: "M5 21V5q0-.825.588-1.413Q6.175 3 7 3h10q.825 0 1.413.587Q19 4.175 19 5v16l-7-3Zm2-3.05 5-2.15 5 2.15V5H7ZM7 5h10-5Z",
+    forward: "M8.025 22 6.25 20.225 14.475 12 6.25 3.775 8.025 2l10 10Z",
+    back: "M16 22 6 12 16 2l1.775 1.775L9.55 12l8.225 8.225Z",
+    back_arrow: "m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6Z",
+    add: "M11 19v-6H5v-2h6V5h2v6h6v2h-6v6Z",
+    add_circle: "M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
+    account: "M5.85 17.1q1.275-.975 2.85-1.538Q10.275 15 12 15q1.725 0 3.3.562 1.575.563 2.85 1.538.875-1.025 1.363-2.325Q20 13.475 20 12q0-3.325-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12q0 1.475.488 2.775.487 1.3 1.362 2.325ZM12 13q-1.475 0-2.488-1.012Q8.5 10.975 8.5 9.5t1.012-2.488Q10.525 6 12 6t2.488 1.012Q15.5 8.025 15.5 9.5t-1.012 2.488Q13.475 13 12 13Zm0 9q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q1.325 0 2.5-.387 1.175-.388 2.15-1.113-.975-.725-2.15-1.113Q13.325 17 12 17t-2.5.387q-1.175.388-2.15 1.113.975.725 2.15 1.113Q10.675 20 12 20Zm0-9q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q12.65 8 12 8q-.65 0-1.075.425Q10.5 8.85 10.5 9.5q0 .65.425 1.075Q11.35 11 12 11Zm0-1.5Zm0 9Z",
+    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",
+    search: "m19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z",
+    more_vert: "M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z",
+    menu: "M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z",
+    unlock: "M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z",
+    lock: "M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z",
+    home: "M4 21V9l8-6 8 6v12h-6v-7h-4v7Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10Zm6-6.75Z",
+    filters: "M10 18v-2h4v2Zm-4-5v-2h12v2ZM3 8V6h18v2Z",
+    edit: "M5 19h1.4l8.625-8.625-1.4-1.4L5 17.6ZM19.3 8.925l-4.25-4.2 1.4-1.4q.575-.575 1.413-.575.837 0 1.412.575l1.4 1.4q.575.575.6 1.388.025.812-.55 1.387ZM17.85 10.4 7.25 21H3v-4.25l10.6-10.6Zm-3.525-.725-.7-.7 1.4 1.4Z",
+    download: "M6 20q-.825 0-1.412-.587Q4 18.825 4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413Q18.825 20 18 20Zm6-4-5-5 1.4-1.45 2.6 2.6V4h2v8.15l2.6-2.6L17 11Z",
+    delete: "M7 21q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM9 17h2V8H9Zm4 0h2V8h-2ZM7 6v13Z",
+    close: "M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z",
 };
-//# sourceMappingURL=IconsPath.js.map

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

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 var Icon_1 = require("./Icon");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/InputText/InputText.js

@@ -4,10 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputText = void 0;
+const Aligment_1 = require("../Aligment");
 const react_1 = __importDefault(require("react"));
 const InputText_styles_1 = require("./InputText.styles");
-const InputText = ({ label, value, name, read = false, disable = false, size = "normal", onChange, }) => {
-    return react_1.default.createElement(InputText_styles_1.InputTextField, null);
+const InputText = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, width, error, placeholder, }) => {
+    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(InputText_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        react_1.default.createElement(InputText_styles_1.InputWrapper, { width: width },
+            react_1.default.createElement(InputText_styles_1.InputTextElement, { inputSize: size, type: type, disabled: disabled, name: name, value: value, onChange: onChange, error: error, placeholder: placeholder }),
+            error && react_1.default.createElement(InputText_styles_1.InputErrorMsg, null, error))));
 };
 exports.InputText = InputText;
-//# sourceMappingURL=InputText.js.map

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

@@ -3,23 +3,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputTextField = void 0;
+exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputTextElement = void 0;
+const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme/Theme");
-exports.InputTextField = styled_components_1.default.input `
-  background-color: ${Theme_1.Theme.colors.white};
-  border: 1px solid ${Theme_1.Theme.colors.gray_1};
-  width: 100%;
-  border-radius: 2px;
-  box-sizing: border-box;
-  outline: 0;
-  font-family: "Lato", sans-serif;
-  padding: ${Theme_1.Theme.padding.s};
-  margin: 0;
-  font-size: ${Theme_1.Theme.fontSize.m};
-
+const Theme_1 = require("../../Theme");
+const Typography_1 = require("../Typography");
+exports.InputTextElement = styled_components_1.default.input `
+  position:relative;
+  ${common_1.defaultStyles}
+  ${(p) => (0, common_1.setSize)(p.inputSize)}
+  color: ${Theme_1.Theme.colors.text};
+  width: ${p => p.width ? p.width : '100%'};
   :focus {
-    border-color: ${Theme_1.Theme.colors.primary};
+    ${common_1.colorMode.default}
   }
+  :disabled{
+    ${common_1.colorMode.disabled}
+    cursor: not-allowed;
+  }
+  ${p => p.error && `
+    ${common_1.colorMode.error}
+  `}
+`;
+exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
+  ${p => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
+  ${p => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
+`;
+exports.InputWrapper = styled_components_1.default.div `
+  display:flex;
+  position:relative;
+  width: ${p => p.width ? p.width : '100%'};
+`;
+exports.InputErrorMsg = styled_components_1.default.div `
+  color: ${Theme_1.Theme.colors.red};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  position: absolute;
+  bottom: -20px;
 `;
-//# sourceMappingURL=InputText.styles.js.map

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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputText = void 0;
+exports.InputErrorMsg = exports.InputLabelElement = exports.InputWrapper = exports.InputText = void 0;
 var InputText_1 = require("./InputText");
 Object.defineProperty(exports, "InputText", { enumerable: true, get: function () { return InputText_1.InputText; } });
-//# sourceMappingURL=index.js.map
+var InputText_styles_1 = require("./InputText.styles");
+Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputText_styles_1.InputWrapper; } });
+Object.defineProperty(exports, "InputLabelElement", { enumerable: true, get: function () { return InputText_styles_1.InputLabelElement; } });
+Object.defineProperty(exports, "InputErrorMsg", { enumerable: true, get: function () { return InputText_styles_1.InputErrorMsg; } });

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

@@ -4,13 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
+const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Aligment_1 = require("../Aligment");
 const Button_1 = require("../Button");
 const common_1 = require("../common");
-const Icons_1 = require("../Icons");
-const Typography_1 = require("../Typography");
 const Modal_styles_1 = require("./Modal.styles");
 const Modal = ({ children, title, handleConfirm, handleClose, labelConfirm, labelClose, size = 'small', }) => {
     const isMultiButtons = () => {
@@ -18,13 +17,10 @@ const Modal = ({ children, title, handleConfirm, handleClose, labelConfirm, labe
     };
     return (react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
         react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },
-            react_1.default.createElement(Aligment_1.Aligment, { justify: !title ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l },
-                title && react_1.default.createElement(Typography_1.TextHeader, null, title),
-                react_1.default.createElement(Icons_1.Icon, { onClick: handleClose, name: "close" })),
+            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() }),
                 handleConfirm && labelConfirm && (react_1.default.createElement(Button_1.Button, { onClick: handleConfirm, text: labelConfirm }))))));
 };
 exports.Modal = Modal;
-//# sourceMappingURL=Modal.js.map

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

@@ -37,4 +37,3 @@ exports.ModalElement = styled_components_1.default.div `
   ${p => p.size === 'large' && `max-width:100%`}
 
 `;
-//# sourceMappingURL=Modal.styles.js.map

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

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/More/More.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.More = void 0;
+const react_1 = __importStar(require("react"));
+const Theme_1 = require("../../Theme");
+const Icons_1 = require("../Icons");
+const More_styles_1 = require("./More.styles");
+const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
+    const [open, toogleOpen] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                toogleOpen(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [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)))))));
+};
+exports.More = More;