venice-ui 1.0.34 → 1.0.36

package/dist/cjs/Theme/Theme.js

@@ -10,6 +10,7 @@ exports.Theme = {
         white: "#ffffff",
         black: "#333333",
         gray_1: "#b7b7b7",
+        gray_2: "#e3e3e3",
         overlayer: 'rgba(0,0,0,0.4)',
         red: '#ad1616'
     },

package/dist/cjs/components/ElementSubMenu/ElementSubMenu.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.ElementSubMenu = void 0;
+const common_1 = require("../common");
+const react_1 = __importStar(require("react"));
+const Theme_1 = require("../../Theme");
+const Icons_1 = require("../Icons");
+const ElementSubMenu_styles_1 = require("./ElementSubMenu.styles");
+const ElementSubMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1.Theme.colors.primary, bgColor = false, children }) => {
+    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(ElementSubMenu_styles_1.SubMenuElement, null,
+        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: bgColor, size: (0, common_1.setIconSize)(size), active: open }),
+        open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" }, children))));
+};
+exports.ElementSubMenu = ElementSubMenu;

package/dist/cjs/components/{More/More.styles.js → ElementSubMenu/ElementSubMenu.styles.js}

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoreElement = void 0;
+exports.SubMenuElement = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MoreElement = styled_components_1.default.div `
+exports.SubMenuElement = styled_components_1.default.div `
   position:relative;
   width:auto;
   display: flex;

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

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

@@ -12,7 +12,7 @@ exports.IconElement = styled_components_1.default.div `
   box-sizing: border-box;
   width:auto;
   display:inline-flex;
-  border-radius: ${Theme_1.Theme.borderRadius.s};
+  border-radius: 50%;
   ${p => p.onClick !== undefined &&
     `
     padding: ${Theme_1.Theme.padding.s};

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

@@ -22,4 +22,5 @@ exports.iconsPath = {
     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",
+    person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z"
 };

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

@@ -1,51 +1,15 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
-const More_styles_1 = require("./More.styles");
+const react_1 = __importDefault(require("react"));
+const ElementSubMenu_1 = require("../ElementSubMenu");
 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, 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)))))));
+    return (react_1.default.createElement(ElementSubMenu_1.ElementSubMenu, { size: size, iconName: iconName },
+        react_1.default.createElement(react_1.default.Fragment, null, 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/Typography/Typography.styles.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLabel = exports.TextSubHeader = exports.TextHeader = exports.TextSmall = exports.Text = void 0;
+exports.TextLabel = exports.TextAccent = 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");
@@ -11,21 +11,36 @@ exports.Text = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.m};
   line-height: ${Theme_1.Theme.lineHeight.m};
   font-weight: normal;
+  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 exports.TextSmall = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.s};
   line-height: ${Theme_1.Theme.lineHeight.s};
   font-weight: normal;
+  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 exports.TextHeader = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.l};
   line-height: ${Theme_1.Theme.lineHeight.l};
   font-weight: 300;
+  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 exports.TextSubHeader = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.m};
   line-height: ${Theme_1.Theme.lineHeight.m};
   font-weight: 300;
+  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
+`;
+exports.TextAccent = styled_components_1.default.div `
+  font-size: ${Theme_1.Theme.fontSize.xs};
+  line-height: ${Theme_1.Theme.lineHeight.xs};
+  text-transform:uppercase;
+  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
+  cursor:${(p) => (p.action ? 'pointer' : 'default')};
 `;
 exports.TextLabel = styled_components_1.default.div `
   font-weight: ${(p) => (p.labelPosition === 'left' ? 'normal' : 'bold')};

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

@@ -1,8 +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 });
-exports.TextLabel = exports.TextSubHeader = exports.TextHeader = exports.Text = void 0;
-var Typography_styles_1 = require("./Typography.styles");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Typography_styles_1.Text; } });
-Object.defineProperty(exports, "TextHeader", { enumerable: true, get: function () { return Typography_styles_1.TextHeader; } });
-Object.defineProperty(exports, "TextSubHeader", { enumerable: true, get: function () { return Typography_styles_1.TextSubHeader; } });
-Object.defineProperty(exports, "TextLabel", { enumerable: true, get: function () { return Typography_styles_1.TextLabel; } });
+__exportStar(require("./Typography.styles"), exports);

package/dist/cjs/components/UserMenu/UserMenu.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserMenu = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const Theme_1 = require("../../Theme");
+const ElementSubMenu_1 = require("../ElementSubMenu");
+const UserMenu_styles_1 = require("./UserMenu.styles");
+const Typography_1 = require("../Typography");
+const UserMenu = ({ color = Theme_1.Theme.colors.white, bgColor = true, userName, logoutAction, logoutLabel = "Logout", children }) => {
+    return (react_1.default.createElement(ElementSubMenu_1.ElementSubMenu, { size: "small", iconName: "person", color: color, bgColor: bgColor },
+        react_1.default.createElement(Aligment_1.Aligment, { hPadding: Theme_1.Theme.padding.m, direction: "column" },
+            react_1.default.createElement(UserMenu_styles_1.UserMenuHeader, null,
+                react_1.default.createElement(Typography_1.TextAccent, null, userName)),
+            react_1.default.createElement(UserMenu_styles_1.UserMenuContent, null, children),
+            react_1.default.createElement(UserMenu_styles_1.UserMenuFooter, null,
+                react_1.default.createElement(Typography_1.Text, { color: Theme_1.Theme.colors.red, action: true, onClick: logoutAction }, logoutLabel)))));
+};
+exports.UserMenu = UserMenu;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserMenuFooter = exports.UserMenuContent = exports.UserMenuHeader = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.UserMenuHeader = styled_components_1.default.div `
+  border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_2};
+  padding-bottom: ${Theme_1.Theme.padding.s};
+  width:100%;
+`;
+exports.UserMenuContent = styled_components_1.default.div `
+  padding: ${Theme_1.Theme.padding.s} 0;
+  width:100%;
+`;
+exports.UserMenuFooter = styled_components_1.default.div `
+  padding-top: ${Theme_1.Theme.padding.s};
+  width:100%;
+`;

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

package/dist/cjs/index.js

@@ -19,13 +19,16 @@ __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
+__exportStar(require("./components/ElementSubMenu"), exports);
 __exportStar(require("./components/File"), exports);
 __exportStar(require("./components/Icons"), exports);
 __exportStar(require("./components/Input"), exports);
 __exportStar(require("./components/Loader"), exports);
 __exportStar(require("./components/Modal"), exports);
+__exportStar(require("./components/More"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Selector"), exports);
 __exportStar(require("./components/Sidepanel"), exports);
+__exportStar(require("./components/UserMenu"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Typography"), exports);

package/dist/esm/Theme/Theme.js

@@ -7,6 +7,7 @@ export const Theme = {
         white: "#ffffff",
         black: "#333333",
         gray_1: "#b7b7b7",
+        gray_2: "#e3e3e3",
         overlayer: 'rgba(0,0,0,0.4)',
         red: '#ad1616'
     },

package/dist/esm/components/ElementSubMenu/ElementSubMenu.js

@@ -0,0 +1,23 @@
+import { Panel, setIconSize } from '../common';
+import React, { useState, useRef, useEffect } from 'react';
+import { Theme } from '../../Theme';
+import { Icon } from '../Icons';
+import { SubMenuElement } from './ElementSubMenu.styles';
+export const ElementSubMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme.colors.primary, bgColor = false, children }) => {
+    const [open, toogleOpen] = useState(false);
+    const ref = useRef(null);
+    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(SubMenuElement, null,
+        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: bgColor, size: setIconSize(size), active: open }),
+        open && (React.createElement(Panel, { ref: ref, size: size, position: "right" }, children))));
+};

package/dist/esm/components/{More/More.styles.js → ElementSubMenu/ElementSubMenu.styles.js}

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-export const MoreElement = styled.div `
+export const SubMenuElement = styled.div `
   position:relative;
   width:auto;
   display: flex;

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

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

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

@@ -6,7 +6,7 @@ export const IconElement = styled.div `
   box-sizing: border-box;
   width:auto;
   display:inline-flex;
-  border-radius: ${Theme.borderRadius.s};
+  border-radius: 50%;
   ${p => p.onClick !== undefined &&
     `
     padding: ${Theme.padding.s};

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

@@ -19,4 +19,5 @@ export const iconsPath = {
     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",
+    person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z"
 };

package/dist/esm/components/More/More.js

@@ -1,24 +1,8 @@
-import { Panel, PanelOption, setIconSize } from '../common';
-import React, { useState, useRef, useEffect } from 'react';
-import { Theme } from '../../Theme';
-import { Icon } from '../Icons';
-import { MoreElement } from './More.styles';
+import { PanelOption } from '../common';
+import React from 'react';
+import { ElementSubMenu } from '../ElementSubMenu';
 export const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
-    const [open, toogleOpen] = useState(false);
-    const ref = useRef(null);
-    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(MoreElement, null,
-        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: Theme.colors.primary, size: setIconSize(size), active: open }),
-        open && (React.createElement(Panel, { ref: ref, size: size, position: "right" }, options &&
-            options.map((option) => (React.createElement(PanelOption, { key: option.label, onClick: option.action, active: true }, option.label)))))));
+    return (React.createElement(ElementSubMenu, { size: size, iconName: iconName },
+        React.createElement(React.Fragment, null, options &&
+            options.map((option) => (React.createElement(PanelOption, { key: option.label, onClick: option.action, active: true }, option.label))))));
 };

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

@@ -5,21 +5,36 @@ export const Text = styled.div `
   font-size: ${Theme.fontSize.m};
   line-height: ${Theme.lineHeight.m};
   font-weight: normal;
+  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 export const TextSmall = styled.div `
   font-size: ${Theme.fontSize.s};
   line-height: ${Theme.lineHeight.s};
   font-weight: normal;
+  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 export const TextHeader = styled.div `
   font-size: ${Theme.fontSize.l};
   line-height: ${Theme.lineHeight.l};
   font-weight: 300;
+  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 export const TextSubHeader = styled.div `
   font-size: ${Theme.fontSize.m};
   line-height: ${Theme.lineHeight.m};
   font-weight: 300;
+  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
+`;
+export const TextAccent = styled.div `
+  font-size: ${Theme.fontSize.xs};
+  line-height: ${Theme.lineHeight.xs};
+  text-transform:uppercase;
+  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
+  cursor:${(p) => (p.action ? 'pointer' : 'default')};
 `;
 export const TextLabel = styled.div `
   font-weight: ${(p) => (p.labelPosition === 'left' ? 'normal' : 'bold')};

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

@@ -1 +1 @@
-export { Text, TextHeader, TextSubHeader, TextLabel } from './Typography.styles';
+export * from './Typography.styles';

package/dist/esm/components/UserMenu/UserMenu.js

@@ -0,0 +1,15 @@
+import { Aligment } from '../Aligment';
+import React from 'react';
+import { Theme } from '../../Theme';
+import { ElementSubMenu } from '../ElementSubMenu';
+import { UserMenuHeader, UserMenuFooter, UserMenuContent } from './UserMenu.styles';
+import { TextAccent, Text } from '../Typography';
+export const UserMenu = ({ color = Theme.colors.white, bgColor = true, userName, logoutAction, logoutLabel = "Logout", children }) => {
+    return (React.createElement(ElementSubMenu, { size: "small", iconName: "person", color: color, bgColor: bgColor },
+        React.createElement(Aligment, { hPadding: Theme.padding.m, direction: "column" },
+            React.createElement(UserMenuHeader, null,
+                React.createElement(TextAccent, null, userName)),
+            React.createElement(UserMenuContent, null, children),
+            React.createElement(UserMenuFooter, null,
+                React.createElement(Text, { color: Theme.colors.red, action: true, onClick: logoutAction }, logoutLabel)))));
+};

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const UserMenuHeader = styled.div `
+  border-bottom: 1px solid  ${Theme.colors.gray_2};
+  padding-bottom: ${Theme.padding.s};
+  width:100%;
+`;
+export const UserMenuContent = styled.div `
+  padding: ${Theme.padding.s} 0;
+  width:100%;
+`;
+export const UserMenuFooter = styled.div `
+  padding-top: ${Theme.padding.s};
+  width:100%;
+`;

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

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

package/dist/esm/index.js

@@ -3,13 +3,16 @@ export * from './components/Button';
 export * from './components/Card';
 export * from './components/Dropdown';
 export * from './components/ElementHeader';
+export * from './components/ElementSubMenu';
 export * from './components/File';
 export * from './components/Icons';
 export * from "./components/Input";
 export * from './components/Loader';
 export * from './components/Modal';
+export * from './components/More';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
+export * from './components/UserMenu';
 export * from './components/Tile';
 export * from './components/Typography';

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

@@ -7,6 +7,7 @@ export declare const Theme: {
         white: string;
         black: string;
         gray_1: string;
+        gray_2: string;
         overlayer: string;
         red: string;
     };

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

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { InputSize } from '../../types';
+interface IElementSubMenuProps {
+    children: React.ReactNode;
+    size?: InputSize;
+    iconName?: string;
+    color?: string;
+    bgColor?: boolean;
+}
+export declare const ElementSubMenu: FC<IElementSubMenuProps>;
+export {};

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

@@ -0,0 +1 @@
+export declare const SubMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/types/components/ElementSubMenu/index.d.ts

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

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

@@ -19,4 +19,5 @@ export declare const iconsPath: {
     download: string;
     delete: string;
     close: string;
+    person: string;
 };

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

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

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

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

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

@@ -1,10 +1,16 @@
 import { InputSize, LabelPosition } from '../../types';
-export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextSmall: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ITextStyle {
+    color?: string;
+    action?: boolean;
+}
+export declare const Text: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
+export declare const TextSmall: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
+export declare const TextHeader: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
+export declare const TextSubHeader: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
+export declare const TextAccent: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
 export interface ITextLabelProps {
     size?: InputSize;
     labelPosition?: LabelPosition;
 }
 export declare const TextLabel: import("styled-components").StyledComponent<"div", any, ITextLabelProps, never>;
+export {};

package/dist/types/components/Typography/index.d.ts

@@ -1 +1 @@
-export { Text, TextHeader, TextSubHeader, TextLabel } from './Typography.styles';
+export * from './Typography.styles';

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

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+interface IUserMenuProps {
+    color?: string;
+    bgColor?: boolean;
+    userName: string;
+    logoutAction: () => void;
+    logoutLabel: string;
+    children: React.ReactNode;
+}
+export declare const UserMenu: FC<IUserMenuProps>;
+export {};

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

@@ -0,0 +1,3 @@
+export declare const UserMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const UserMenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const UserMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/types/components/UserMenu/index.d.ts

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

package/dist/types/index.d.ts

@@ -3,13 +3,16 @@ export * from './components/Button';
 export * from './components/Card';
 export * from './components/Dropdown';
 export * from './components/ElementHeader';
+export * from './components/ElementSubMenu';
 export * from './components/File';
 export * from './components/Icons';
 export * from "./components/Input";
 export * from './components/Loader';
 export * from './components/Modal';
+export * from './components/More';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
+export * from './components/UserMenu';
 export * from './components/Tile';
 export * from './components/Typography';

package/package.json

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

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

@@ -1 +0,0 @@
-export declare const MoreElement: import("styled-components").StyledComponent<"div", any, {}, never>;