venice-ui 1.0.35 → 1.0.37

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/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/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/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/index.js

@@ -18,13 +18,14 @@ __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/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);

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/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/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/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/index.js

@@ -2,13 +2,14 @@ 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/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';

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/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 SubMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const UserMenuHeader: 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/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/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/index.d.ts

@@ -2,13 +2,14 @@ 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/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';

package/package.json

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

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

@@ -1,51 +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.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 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)))))));
-};
-exports.More = More;

package/dist/cjs/components/More/More.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.MoreElement = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.MoreElement = styled_components_1.default.div `
-  position:relative;
-  width:auto;
-  display: flex;
-  box-sizing: border-box;
-`;

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

@@ -1,24 +0,0 @@
-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';
-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)))))));
-};

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

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

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

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

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

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

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

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