venice-ui 1.0.7 → 1.0.10

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

@@ -0,0 +1,53 @@
+"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.Selector = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importStar(require("react"));
+const InputText_1 = require("../InputText");
+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 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) => {
+        handleSelect(name, selectedValue);
+        toogleOpen(false);
+    };
+    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(InputText_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 })),
+            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))));
+};
+exports.Selector = Selector;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 common_1 = require("../common");
+const polished_1 = require("polished");
+exports.SelectorElement = styled_components_1.default.div `
+  position: relative;
+  cursor: pointer;
+  display:flex;
+  box-sizing:border-box;
+`;
+exports.SelectorValue = styled_components_1.default.div `
+  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)}
+  color:${Theme_1.Theme.colors.primary};
+  &:hover{
+    background-color: ${(0, polished_1.lighten)(0.3, Theme_1.Theme.colors.primary)};
+  }
+      
+`;

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

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

@@ -0,0 +1,52 @@
+"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.Sidepanel = void 0;
+const ElementHeader_1 = require("../ElementHeader");
+const react_1 = __importStar(require("react"));
+const Modal_styles_1 = require("../Modal/Modal.styles");
+const Sidepanel_styles_1 = require("./Sidepanel.styles");
+const Icons_1 = require("../Icons");
+const Sidepanel = ({ handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                handleClose && handleClose();
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [handleClose]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Sidepanel_styles_1.SidepanelElement, { right: right, top: top, ref: ref },
+            react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
+                iconOptions.map((icon) => (react_1.default.createElement(Icons_1.Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
+            children),
+        overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })));
+};
+exports.Sidepanel = Sidepanel;

package/dist/cjs/components/Sidepanel/Sidepanel.styles.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.SidepanelElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme/Theme");
+exports.SidepanelElement = styled_components_1.default.div `
+  height: calc( 100vh - ${p => p.top}px);
+  width: 20rem;
+  background-color: ${Theme_1.Theme.colors.white};
+  position: fixed;
+  top: ${p => p.top};
+  z-index: 1001;
+  box-shadow: ${Theme_1.Theme.shadow.m};
+  ${p => p.right ? `right:0;` : 'left:0;'}
+
+`;

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

package/dist/cjs/components/Tile/Tile.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.Tile = void 0;
+const ElementHeader_1 = require("../ElementHeader");
+const react_1 = __importDefault(require("react"));
+const Tile_styles_1 = require("./Tile.styles");
+const Tile = ({ size = 'small', shadow = true, title, children, }) => {
+    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow },
+        title && react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title }),
+        children));
+};
+exports.Tile = Tile;

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

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TileElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.TileElement = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  background-color: ${Theme_1.Theme.colors.white};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  max-height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  position: relative;
+  ${(p) => p.shadow &&
+    `
+    box-shadow: ${Theme_1.Theme.shadow.s}
+  `}
+  ${(p) => p.size === 'small' && `max-width:500px`}
+  ${(p) => p.size === 'medium' && `max-width:750px`}
+  ${(p) => p.size === 'large' && `max-width:100%`}
+`;

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

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLabel = exports.TextSubHeader = exports.TextHeader = exports.TextSmall = exports.Text = void 0;
+const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
 exports.Text = styled_components_1.default.div `
@@ -27,7 +28,11 @@ exports.TextSubHeader = styled_components_1.default.div `
   font-weight: 300;
 `;
 exports.TextLabel = styled_components_1.default.div `
+  font-weight: ${(p) => (p.labelPosition === 'left' ? 'normla' : 'bold')};
+  ${(p) => p.size && p.labelPosition === 'left'
+    ? (0, common_1.setLabelFontSize)(p.size)
+    : `
   font-size: ${Theme_1.Theme.fontSize.xs};
   line-height: ${Theme_1.Theme.lineHeight.xs};
-  font-weight: bold;
+  `}
 `;

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./commonComponents"), exports);
+__exportStar(require("./inputStyles"), exports);

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setLabelFontSize = exports.lableFontSize = exports.colorMode = exports.setSize = exports.sizes = exports.defaultStyles = void 0;
+const polished_1 = require("polished");
+const Theme_1 = require("../../Theme");
+exports.defaultStyles = `
+  box-sizing: border-box;
+  background-color: ${Theme_1.Theme.colors.white};
+  border: 1px solid ${Theme_1.Theme.colors.gray_1};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  width: 100%;
+  font-family: "Lato", sans-serif;
+  outline: 0;
+`;
+exports.sizes = {
+    xsmall: `
+  padding: ${Theme_1.Theme.padding.s};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  `,
+    small: `
+  padding: ${Theme_1.Theme.padding.s};
+  font-size: ${Theme_1.Theme.fontSize.m};
+  `,
+    medium: `
+  padding: ${Theme_1.Theme.padding.m};
+  font-size: ${Theme_1.Theme.fontSize.m};`,
+    large: `
+  padding: ${Theme_1.Theme.padding.m};
+  font-size: ${Theme_1.Theme.fontSize.l};
+  `
+};
+const setSize = (size) => {
+    return exports.sizes[size];
+};
+exports.setSize = setSize;
+exports.colorMode = {
+    default: `
+    border-color: ${Theme_1.Theme.colors.primary};
+    background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
+  `,
+    disabled: `
+    border-color: ${Theme_1.Theme.colors.disableText};
+    background-color: ${(0, polished_1.lighten)(0.2, Theme_1.Theme.colors.gray_1)};
+    color:${Theme_1.Theme.colors.disableText};
+  `,
+    error: `
+    border-color: ${Theme_1.Theme.colors.red};
+    background-color: ${(0, polished_1.lighten)(0.5, Theme_1.Theme.colors.red)};
+  `,
+};
+exports.lableFontSize = {
+    xsmall: `
+  line-height: ${Theme_1.Theme.lineHeight.s};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  `,
+    small: `
+  line-height: ${Theme_1.Theme.lineHeight.m};
+  font-size: ${Theme_1.Theme.fontSize.m};
+  `,
+    medium: `
+  line-height: ${Theme_1.Theme.lineHeight.m};
+  font-size: ${Theme_1.Theme.fontSize.m};`,
+    large: `
+  line-height: ${Theme_1.Theme.lineHeight.m};
+  font-size: ${Theme_1.Theme.fontSize.l};
+  `
+};
+const setLabelFontSize = (size) => {
+    return exports.lableFontSize[size];
+};
+exports.setLabelFontSize = setLabelFontSize;

package/dist/cjs/index.js

@@ -17,7 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/Aligment"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Card"), exports);
+__exportStar(require("./components/Dropdown"), exports);
+__exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/Icons"), exports);
 __exportStar(require("./components/InputText"), exports);
 __exportStar(require("./components/Modal"), exports);
+__exportStar(require("./components/Sidepanel"), exports);
 __exportStar(require("./components/Typography"), exports);

package/dist/cjs/types/commonTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/types/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
+__exportStar(require("./commonTypes"), exports);

package/dist/esm/Theme/Theme.js

@@ -7,7 +7,8 @@ export const 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",
@@ -33,6 +34,7 @@ export const Theme = {
     },
     zIndex: {
         modalOverlayer: 1000,
+        dropdown: 800,
     },
     borderRadius: {
         s: '2px',

package/dist/esm/Theme/index.js

@@ -0,0 +1 @@
+export * from './Theme';

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

@@ -13,6 +13,7 @@ export const ButtonElement = styled.button `
   align-items: center;
   justify-content: center;
   display: flex;
+  
 
   ${(p) => p.mode === 'primary' &&
     `background-color: ${Theme.colors.primary};
@@ -45,7 +46,7 @@ export const ButtonElement = styled.button `
     `background-color: ${lighten(0.1, Theme.colors.primary)};`}
     ${(p) => p.mode === 'inverse' &&
     `background-color: ${lighten(0.4, Theme.colors.primary)}`};
-    ${(p) => p.mode === 'ghost' && `color: ${lighten(0.2, Theme.colors.primary)};`}
+    ${(p) => p.mode === 'ghost' && `background-color: ${lighten(0.3, Theme.colors.primary)};`}
   }
 
   &.disable,

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

@@ -1,12 +1,8 @@
-import { Aligment } from '../Aligment';
-import { Button } from '../Button';
-import { TextHeader } from '../Typography';
 import React from 'react';
 import { CardContent, CardElement } from './Card.styles';
-export const Card = ({ children, title, actionLabel, handleClick, height, }) => {
+import { ElementHeader } from '../ElementHeader';
+export const Card = ({ children, title, actionLabel, moreIcon = false, backIcon = false, handleClick, handleBack, height, options, }) => {
     return (React.createElement(CardElement, { height: height },
-        (title || actionLabel) && (React.createElement(Aligment, { justify: !title && actionLabel ? 'flex-end' : 'space-between' },
-            title && React.createElement(TextHeader, null, title),
-            handleClick && actionLabel && (React.createElement(Button, { mode: "inverse", text: actionLabel, onClick: handleClick })))),
+        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, closeIcon: false, backIcon: backIcon, actionButton: true, moreIcon: moreIcon, options: options })),
         React.createElement(CardContent, null, children)));
 };

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

@@ -5,7 +5,6 @@ export const CardElement = styled.div `
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: ${Theme.padding.l};
   background-color: ${Theme.colors.white};
   border-radius: ${Theme.borderRadius.m};
   height: ${p => p.height ? p.height : '100%'};
@@ -14,7 +13,7 @@ export const CardElement = styled.div `
 export const CardContent = styled.div `
   box-sizing: border-box; 
   display: flex;
-  padding-top:  ${Theme.padding.l};
+  padding:  ${Theme.padding.l};
   width: 100%;
   flex-direction: row;
 `;

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

@@ -1 +1 @@
-export * from './Card';
+export { Card } from './Card';

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

@@ -0,0 +1,40 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Aligment } from '../Aligment';
+import { DropdownElement, DropdownOption, DropdownOptions, } from './Dropdown.styles';
+import { Field } from './DropdownElements';
+import { InputErrorMsg, InputLabelElement } from '../InputText';
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
+    const [open, toogleOpen] = useState(false);
+    const ref = 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);
+    };
+    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.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        React.createElement(DropdownElement, { onClick: () => handleOpen() },
+            React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
+            open && (React.createElement(DropdownOptions, { ref: ref }, options &&
+                options.map((option) => (React.createElement(DropdownOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
+            error && React.createElement(InputErrorMsg, null, error))));
+};

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

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+import { lighten } from "polished";
+export const DropdownElement = styled.div `
+  position: relative;
+  cursor: pointer;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+`;
+export const DropdownOptions = styled.div `
+  box-sizing:border-box;
+  background-color:${Theme.colors.white};
+  box-shadow:${Theme.shadow.m};
+  padding: ${Theme.padding.m} 0 ;
+  border-radius: ${Theme.borderRadius.m};
+  height:${p => p.height ? p.height : 'auto'};
+  width:100%;
+  position:absolute;
+  z-index:${Theme.zIndex.dropdown};
+  top:36px;
+  left:0px;
+`;
+export const DropdownOption = styled.div `
+  padding: ${Theme.padding.s} ${Theme.padding.m};
+  cursor: pointer;
+  color: ${p => p.active ? Theme.colors.primary : Theme.colors.text};
+  :hover{
+    background-color: ${lighten(0.4, Theme.colors.primary)};
+  }
+  
+`;

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { defaultStyles, setSize, colorMode } from "../common";
+import { Theme } from "../../Theme";
+export const Field = styled.div `
+  position: relative;
+  ${defaultStyles}
+  ${(p) => setSize(p.inputSize)}
+  color: ${Theme.colors.text};
+  width: ${(p) => (p.width ? p.width : '100%')};
+  ${(p) => p.error &&
+    `
+    ${colorMode.error}
+  `}
+  ${(p) => p.active &&
+    `
+    ${colorMode.default}
+  `}
+  ${(p) => p.disabled &&
+    `
+    ${colorMode.disabled}
+    cursor: not-allowed;
+  `}
+`;

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

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+export * from './DropdownElements';

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

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

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

@@ -0,0 +1 @@
+export * from './ElementHeader';

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

@@ -4,6 +4,6 @@ import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
 export const Icon = ({ size = 24, name, color = Theme.colors.text, bgColor, onClick, }) => {
     return (React.createElement(IconElement, { onClick: onClick, bgColor: bgColor },
-        React.createElement("svg", { width: size, height: size, viewBox: '0 0 48 48', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+        React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             React.createElement("path", { d: iconsPath[name], fill: color }))));
 };

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

@@ -12,7 +12,7 @@ export const IconElement = styled.div `
     padding: ${Theme.padding.s};
     cursor:pointer;
     &:hover{
-      background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : lighten(0.4, Theme.colors.primary)};
+      background-color: ${p.bgColor ? `rgba(255,255,255,0.2)` : lighten(0.3, Theme.colors.primary)};
       transition: 300ms;
     }
     svg{