venice-ui 1.0.36 → 1.0.38

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.DropdownMenuElement, 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.DropdownMenuHeader, null,
+                    headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
+                    headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
+                react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
+                    options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
+                footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, 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.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
+const polished_1 = require("polished");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.DropdownMenuElement = styled_components_1.default.div `
+  position:relative;
+  width:auto;
+  display: flex;
+  box-sizing: border-box;
+`;
+exports.DropdownMenuHeader = 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.DropdownMenuFooter = 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.DropdownMenuContent = styled_components_1.default.div `
+  width:100%;
+`;
+exports.DropdownMenuOption = 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/components/Icons/IconsPath.js

@@ -22,5 +22,8 @@ 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"
+    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",
+    check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-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",
+    check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
+    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"
 };

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

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconsShows = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("./Icon");
+const IconsPath_1 = require("./IconsPath");
+const example_1 = require("../../example");
+const IconsShows = () => {
+    return (react_1.default.createElement(Aligment_1.Aligment, { gap: 5 },
+        react_1.default.createElement(react_1.default.Fragment, null, Object.keys(IconsPath_1.iconsPath).map((iconPath) => (react_1.default.createElement(example_1.IconsShowroom, null,
+            react_1.default.createElement(Icon_1.Icon, { name: iconPath, size: 48 }),
+            iconPath))))));
+};
+exports.IconsShows = IconsShows;

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

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

package/dist/cjs/example/ExampleComponent.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.ExampleItem = exports.ExampleArea = exports.ExampleAreaTitle = exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
+exports.IconsShowroom = exports.ExampleItem = exports.ExampleArea = exports.ExampleAreaTitle = exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../Theme/Theme");
 exports.StoryWrapper = styled_components_1.default.div `
@@ -53,3 +53,11 @@ exports.ExampleItem = styled_components_1.default.div `
   display:flex;
   max-width:300px;
 `;
+exports.IconsShowroom = styled_components_1.default.div `
+  display: flex;
+  flex-direction:column;
+  padding:10px;
+  border:1px solid #f3f3f3;
+  font-size: 12px;
+  text-align:center;
+`;

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 { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } 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(DropdownMenuElement, 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(DropdownMenuHeader, null,
+                    headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
+                    headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
+                React.createElement(DropdownMenuContent, null, options &&
+                    options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
+                footer && (React.createElement(DropdownMenuFooter, 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 DropdownMenuElement = styled.div `
+  position:relative;
+  width:auto;
+  display: flex;
+  box-sizing: border-box;
+`;
+export const DropdownMenuHeader = styled.div `
+  border-bottom: 1px solid  ${Theme.colors.gray_2};
+  padding-bottom: ${Theme.padding.m};
+  width:100%;
+`;
+export const DropdownMenuFooter = styled.div `
+  border-top: 1px solid  ${Theme.colors.gray_2};
+  padding-top: ${Theme.padding.m};
+  width:100%;
+`;
+export const DropdownMenuContent = styled.div `
+  width:100%;
+`;
+export const DropdownMenuOption = 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/components/Icons/IconsPath.js

@@ -19,5 +19,8 @@ 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"
+    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",
+    check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-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",
+    check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
+    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"
 };

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

@@ -0,0 +1,11 @@
+import { Aligment } from '../Aligment';
+import React from 'react';
+import { Icon } from './Icon';
+import { iconsPath } from './IconsPath';
+import { IconsShowroom } from '../../example';
+export const IconsShows = () => {
+    return (React.createElement(Aligment, { gap: 5 },
+        React.createElement(React.Fragment, null, Object.keys(iconsPath).map((iconPath) => (React.createElement(IconsShowroom, null,
+            React.createElement(Icon, { name: iconPath, size: 48 }),
+            iconPath))))));
+};

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

@@ -1 +1,2 @@
 export { Icon } from './Icon';
+export { iconsPath } from './IconsPath';

package/dist/esm/example/ExampleComponent.js

@@ -47,3 +47,11 @@ export const ExampleItem = styled.div `
   display:flex;
   max-width:300px;
 `;
+export const IconsShowroom = styled.div `
+  display: flex;
+  flex-direction:column;
+  padding:10px;
+  border:1px solid #f3f3f3;
+  font-size: 12px;
+  text-align:center;
+`;

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/DropdownMenu/DropdownMenu.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const DropdownMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IPanelOptionStyle {
+    onClick?: any;
+}
+export declare const DropdownMenuOption: 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/components/Icons/IconsPath.d.ts

@@ -20,4 +20,7 @@ export declare const iconsPath: {
     delete: string;
     close: string;
     person: string;
+    check_circle: string;
+    check_box: string;
+    check: string;
 };

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

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const IconsShows: FC;

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

@@ -1 +1,2 @@
 export { Icon } from './Icon';
+export { iconsPath } from './IconsPath';

package/dist/types/example/ExampleComponent.d.ts

@@ -16,4 +16,5 @@ export declare const ExampleTableHeader: import("styled-components").StyledCompo
 export declare const ExampleAreaTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExampleArea: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExampleItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconsShowroom: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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.38",
   "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/UserMenu.styles.d.ts

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

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