venice-ui 1.0.36 → 1.0.37

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,70 @@
+"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.DropdownMenu = void 0;
+const common_1 = require("../common");
+const react_1 = __importStar(require("react"));
+const Theme_1 = require("../../Theme");
+const Icons_1 = require("../Icons");
+const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
+const Aligment_1 = require("../Aligment");
+const Typography_1 = require("../Typography");
+const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1.Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, }) => {
+    const [open, toogleOpen] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const close = () => {
+        toogleOpen(false);
+    };
+    const handleFooterAction = () => {
+        footerAction && footerAction();
+        close();
+    };
+    const handleClick = (action) => {
+        action();
+        close();
+    };
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                close();
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [open]);
+    return (react_1.default.createElement(DropdownMenu_styles_1.SubMenuElement, null,
+        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: (0, common_1.setIconSize)(size), active: open }),
+        open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },
+            react_1.default.createElement(Aligment_1.Aligment, { hPadding: Theme_1.Theme.padding.m, direction: "column" },
+                header && (react_1.default.createElement(DropdownMenu_styles_1.UserMenuHeader, null,
+                    headerTitle && react_1.default.createElement(Typography_1.TextAccent, null, headerTitle),
+                    headerSubtitle && react_1.default.createElement(Typography_1.TextLabel, null, headerSubtitle))),
+                react_1.default.createElement(DropdownMenu_styles_1.UserMenuContent, null, options &&
+                    options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.PanelOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
+                footer && (react_1.default.createElement(DropdownMenu_styles_1.UserMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
+};
+exports.DropdownMenu = DropdownMenu;

package/dist/cjs/components/DropdownMenu/DropdownMenu.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.PanelOption = exports.UserMenuContent = exports.UserMenuFooter = exports.UserMenuHeader = exports.SubMenuElement = void 0;
+const polished_1 = require("polished");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.SubMenuElement = styled_components_1.default.div `
+  position:relative;
+  width:auto;
+  display: flex;
+  box-sizing: border-box;
+`;
+exports.UserMenuHeader = styled_components_1.default.div `
+  border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_2};
+  padding-bottom: ${Theme_1.Theme.padding.m};
+  width:100%;
+`;
+exports.UserMenuFooter = styled_components_1.default.div `
+  border-top: 1px solid  ${Theme_1.Theme.colors.gray_2};
+  padding-top: ${Theme_1.Theme.padding.m};
+  width:100%;
+`;
+exports.UserMenuContent = styled_components_1.default.div `
+  width:100%;
+`;
+exports.PanelOption = styled_components_1.default.div `
+  padding: ${Theme_1.Theme.padding.s} 0;
+  cursor: pointer;
+  white-space: nowrap;
+  color: ${Theme_1.Theme.colors.text};
+
+  :hover {
+    background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
+  }
+`;

package/dist/cjs/components/{More → DropdownMenu}/index.js

@@ -14,4 +14,4 @@ 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("./More"), exports);
+__exportStar(require("./DropdownMenu"), exports);

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

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

package/dist/cjs/index.js

@@ -18,17 +18,16 @@ __exportStar(require("./components/Aligment"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Dropdown"), exports);
+__exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
-__exportStar(require("./components/ElementSubMenu"), exports);
+__exportStar(require("./components/DropdownMenu"), 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/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,43 @@
+import { Panel, setIconSize } from '../common';
+import React, { useState, useRef, useEffect } from 'react';
+import { Theme } from '../../Theme';
+import { Icon } from '../Icons';
+import { PanelOption, SubMenuElement, UserMenuContent, UserMenuFooter, UserMenuHeader, } from './DropdownMenu.styles';
+import { Aligment } from '../Aligment';
+import { TextAccent, TextLabel, Text } from '../Typography';
+export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, }) => {
+    const [open, toogleOpen] = useState(false);
+    const ref = useRef(null);
+    const close = () => {
+        toogleOpen(false);
+    };
+    const handleFooterAction = () => {
+        footerAction && footerAction();
+        close();
+    };
+    const handleClick = (action) => {
+        action();
+        close();
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                close();
+            }
+        };
+        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: iconBackgroundColor, size: setIconSize(size), active: open }),
+        open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },
+            React.createElement(Aligment, { hPadding: Theme.padding.m, direction: "column" },
+                header && (React.createElement(UserMenuHeader, null,
+                    headerTitle && React.createElement(TextAccent, null, headerTitle),
+                    headerSubtitle && React.createElement(TextLabel, null, headerSubtitle))),
+                React.createElement(UserMenuContent, null, options &&
+                    options.map((option) => (React.createElement(PanelOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
+                footer && (React.createElement(UserMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
+};

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

@@ -0,0 +1,32 @@
+import { lighten } from "polished";
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const SubMenuElement = styled.div `
+  position:relative;
+  width:auto;
+  display: flex;
+  box-sizing: border-box;
+`;
+export const UserMenuHeader = styled.div `
+  border-bottom: 1px solid  ${Theme.colors.gray_2};
+  padding-bottom: ${Theme.padding.m};
+  width:100%;
+`;
+export const UserMenuFooter = styled.div `
+  border-top: 1px solid  ${Theme.colors.gray_2};
+  padding-top: ${Theme.padding.m};
+  width:100%;
+`;
+export const UserMenuContent = styled.div `
+  width:100%;
+`;
+export const PanelOption = styled.div `
+  padding: ${Theme.padding.s} 0;
+  cursor: pointer;
+  white-space: nowrap;
+  color: ${Theme.colors.text};
+
+  :hover {
+    background-color: ${lighten(0.4, Theme.colors.primary)};
+  }
+`;

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

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

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

@@ -4,7 +4,7 @@ import { Aligment } from '../Aligment';
 import { TextHeader } from '../Typography';
 import { Theme } from '../../Theme';
 import { Button } from '../Button';
-import { More } from '../More';
+import { DropdownMenu } from '../DropdownMenu';
 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) {
@@ -23,7 +23,7 @@ export const ElementHeader = ({ title, showTitle = true, moreIcon = false, backI
         else if (!closeIcon && actionButton && handleClick) {
             return (React.createElement(Aligment, { align: "flex-end", width: "auto" },
                 React.createElement(Button, { mode: "inverse", text: actionLabel, onClick: () => handleClick() }),
-                moreIcon && options && React.createElement(More, { options: options })));
+                moreIcon && options && React.createElement(DropdownMenu, { options: options })));
         }
     };
     return (React.createElement(Aligment, { justify: !showTitle && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: bgColor },

package/dist/esm/index.js

@@ -2,17 +2,16 @@ export * from './components/Aligment';
 export * from './components/Button';
 export * from './components/Card';
 export * from './components/Dropdown';
+export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
-export * from './components/ElementSubMenu';
+export * from './components/DropdownMenu';
 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/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { InputSize, IAction } from '../../types';
+interface IDropdownMenuProps {
+    size?: InputSize;
+    iconName?: string;
+    color?: string;
+    iconBackgroundColor?: boolean;
+    header?: boolean;
+    headerTitle?: string;
+    headerSubtitle?: string;
+    footer?: boolean;
+    footerText?: string;
+    footerAction?: () => void;
+    options: IAction[];
+}
+export declare const DropdownMenu: FC<IDropdownMenuProps>;
+export {};

package/dist/types/components/{UserMenu/UserMenu.styles.d.ts → DropdownMenu/DropdownMenu.styles.d.ts}

@@ -1,3 +1,9 @@
+export declare const SubMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
 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>;
+export declare const UserMenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IPanelOptionStyle {
+    onClick?: any;
+}
+export declare const PanelOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
+export {};

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

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

package/dist/types/index.d.ts

@@ -2,17 +2,16 @@ export * from './components/Aligment';
 export * from './components/Button';
 export * from './components/Card';
 export * from './components/Dropdown';
+export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
-export * from './components/ElementSubMenu';
+export * from './components/DropdownMenu';
 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.36",
+  "version": "1.0.37",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",

package/dist/cjs/components/ElementSubMenu/ElementSubMenu.js

@@ -1,50 +0,0 @@
-"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/ElementSubMenu/ElementSubMenu.styles.js

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

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

@@ -1,17 +0,0 @@
-"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/More/More.js

@@ -1,15 +0,0 @@
-"use strict";
-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 = __importDefault(require("react"));
-const ElementSubMenu_1 = require("../ElementSubMenu");
-const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
-    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/UserMenu/UserMenu.js

@@ -1,22 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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/esm/components/ElementSubMenu/ElementSubMenu.js

@@ -1,23 +0,0 @@
-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/ElementSubMenu/ElementSubMenu.styles.js

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-export const SubMenuElement = styled.div `
-  position:relative;
-  width:auto;
-  display: flex;
-  box-sizing: border-box;
-`;

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

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

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

@@ -1,8 +0,0 @@
-import { PanelOption } from '../common';
-import React from 'react';
-import { ElementSubMenu } from '../ElementSubMenu';
-export const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
-    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/More/index.js

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

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

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

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

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

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { IAction, InputSize } from '../../types';
-interface IMoreProps {
-    options: IAction[];
-    size?: InputSize;
-    iconName?: string;
-}
-export declare const More: FC<IMoreProps>;
-export {};

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

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

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

@@ -1,11 +0,0 @@
-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/index.d.ts

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