@mailstep/design-system 0.6.51 → 0.6.53-beta.0

package/ui/{Elements → Blocks}/LanguageSwitch/LanguageSwitch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
+import { useClickOutside } from '../Modal/hooks/useClickOutside';
 import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, DownImg, StyledDropdownMenu } from './styles';
-import { useClickOutside } from '../../Blocks/Modal/hooks/useClickOutside';
 var LanguageSwitch = function (_a) {
     var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems;
     var _b = React.useState(false), flagDropdownVisible = _b[0], setFlagDropdownVisible = _b[1];
@@ -23,7 +23,7 @@ var LanguageSwitch = function (_a) {
             return ({
                 title: title,
                 icon: icon,
-                onClick: languageToggle(languageCode),
+                onClick: languageToggle(languageCode)
             });
         });
     }, [filteredLanguages, languageToggle]);

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        activeLanguage?: string | undefined;
+        onLanguageChange: (languageCode: string) => void;
+        languageItems?: import("../types").LanguageItem[] | undefined;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import LanguageSwitch from '../';
+import { FlagCZ, FlagUSA } from '../../../Elements/Icon';
+var languageItems = [
+    {
+        languageCode: 'cs',
+        icon: _jsx(FlagCZ, {}),
+        title: 'Česky'
+    },
+    {
+        languageCode: 'en',
+        icon: _jsx(FlagUSA, {}),
+        title: 'English'
+    }
+];
+var meta = {
+    title: 'Blocks/LanguageSwitch',
+    component: LanguageSwitch,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {
+        languageItems: languageItems,
+        activeLanguage: 'en',
+        onLanguageChange: function (languageCode) {
+            console.log('Language changed:', languageCode);
+        }
+    }
+};

package/ui/{Elements → Blocks}/LanguageSwitch/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledDropdownMenu: import("styled-components").StyledComponent<(<T extends import("../DropdownMenu/types").Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import("../DropdownMenu/types").DropdownMenuProps<T>) => JSX.Element), import("@xstyled/system").Theme, {}, never>;
+export declare const StyledDropdownMenu: import("styled-components").StyledComponent<(<T extends import("../../Elements/DropdownMenu/types").Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import("../../Elements/DropdownMenu/types").DropdownMenuProps<T>) => JSX.Element), import("@xstyled/system").Theme, {}, never>;
 export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const DownImg: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {}, never>;
 export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/{Elements → Blocks}/LanguageSwitch/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-import DropdownMenu from '../DropdownMenu';
+import DropdownMenu from '../../Elements/DropdownMenu';
 export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: auto;\n  cursor: pointer;\n"], ["\n  width: auto;\n  cursor: pointer;\n"])));
 export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n  width: max-content;\n  @media (min-width: 1024px) {\n    left: -5px;\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      left: 15px;\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n  width: max-content;\n  @media (min-width: 1024px) {\n    left: -5px;\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      left: 15px;\n    }\n  }\n"])));
 export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));

package/ui/Blocks/LoginPage/LoginPage.js

@@ -6,9 +6,9 @@ import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, CardBodyWithLangua
 import { H6 } from '../../Elements/Typography/Typography';
 import { SocialLinks } from './components/SocialLinks';
 import { LoginForm } from './components/LoginForm';
-import LanguageSwitch from '../../Elements/LanguageSwitch';
+import LanguageSwitch from '../LanguageSwitch';
 var Login = function (_a) {
-    var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version;
-    return (_jsxs(Wrapper, { children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _jsxs(LanguageBox, { children: [_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] }), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter })] }), children, version && _jsx(Version, { children: version }), _jsx(SocialLinks, {})] }));
+    var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage;
+    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _jsxs(LanguageBox, { children: [_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] }), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter })] }), children, version && _jsx(Version, { children: version }), _jsx(SocialLinks, {})] }));
 };
 export default Login;

package/ui/Blocks/LoginPage/stories/LoginPage.stories.d.ts

@@ -0,0 +1,8 @@
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDistributionCenterSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithBackgroundImage: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/LoginPage/stories/LoginPage.stories.js

@@ -0,0 +1,94 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import LoginPage from '../';
+import { FlagCZ, FlagUSA } from '../../../Elements/Icon';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+var languageItems = [
+    {
+        languageCode: 'cs',
+        icon: _jsx(FlagCZ, {}),
+        title: 'Česky'
+    },
+    {
+        languageCode: 'en',
+        icon: _jsx(FlagUSA, {}),
+        title: 'English'
+    }
+];
+var distributionCenterOptions = [
+    { value: 'PRG1', label: 'PRG1' },
+    { value: 'ATH1', label: 'ATH1' },
+    { value: 'MLN1', label: 'MLN1' }
+];
+var meta = {
+    title: 'Blocks/LoginPage',
+    tags: ['autodocs']
+};
+export default meta;
+export var Default = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "mailship", brandVariant: "s", languageItems: languageItems }) }));
+};
+export var WithDistributionCenterSelect = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "mailship", brandVariant: "s", languageItems: languageItems, distributionCenterOptions: distributionCenterOptions, onChangeDistributionCenter: function (dcId) {
+                console.log('onChangeDistributionCenter:', dcId);
+            }, selectedDistributionCenter: "PRG1", withDistributionCenterSelect: true }) }));
+};
+export var WithBackgroundImage = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "mailship", brandVariant: "s", languageItems: languageItems, backgroundImage: "mailship" }) }));
+};

package/ui/Blocks/LoginPage/styles.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    backgroundImage?: "mailship" | undefined;
+}, never>;
 export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<({ children, ...rest }: import("../../Elements/Card/types").PropsBody) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
 export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LoginPage/styles.js

@@ -4,9 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { CardBody } from '../../Elements/Card/Card';
 import Logo from '../../Elements/Logo/Logo';
-import shutterstock from './assets/shutterstock.jpg';
+import mailship from './assets/mailship.jpg';
 import styled, { th } from '@xstyled/styled-components';
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: transparent ", " 50% 0% no-repeat padding-box;\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: transparent ", " 50% 0% no-repeat padding-box;\n    background-size: cover;\n  }\n"])), th('fonts.primary'), th('colors.bgLightGray'), shutterstock);
+var backgroundImageMap = {
+    mailship: mailship
+};
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"])), th('fonts.primary'), th('colors.bgLightGray'), function (_a) {
+    var backgroundImage = _a.backgroundImage;
+    return "transparent ".concat(backgroundImage && "url(".concat(backgroundImageMap[backgroundImage], ")"), " 50% 0% no-repeat padding-box;");
+});
 export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"], ["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"])));
 export var CardBodyWithLanguage = styled(CardBody)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));
 export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"])), th.color('typoPrimary'), th.color('red1'));

package/ui/Blocks/LoginPage/types.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { Brand, Variant } from '../../Elements/Logo/types';
 import { Option } from '../../Elements/Select/types';
-import { LanguageItem } from '../../Elements/LanguageSwitch';
+import { LanguageItem } from '../LanguageSwitch';
+export type BackgroundImages = 'mailship';
 export type LoginData = {
     login: string;
     password: string;
@@ -21,4 +22,5 @@ export type LoginPageProps = {
     selectedDistributionCenter?: string;
     languageItems?: LanguageItem[];
     version?: string;
+    backgroundImage?: BackgroundImages;
 };

package/ui/Blocks/SideMenu/MenuItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuItemType } from './types';
+type Props = MenuItemType & {
+    isSubitem?: boolean;
+    isCompact: boolean;
+    lightMode?: boolean;
+    separator?: boolean;
+    isLeftMenuOpen?: boolean;
+    onCloseLeftMenu?: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ icon, title, link, items, id, isSubitem, isCompact, lightMode, separator, isLeftMenuOpen, onCloseLeftMenu }: Props) => JSX.Element | null>;
+export default _default;

package/ui/Blocks/SideMenu/MenuItem.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { matchPath } from 'react-router';
+import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
+import SubitemTooltip from './components/SubitemTooltip';
+import { useLeftMenuContext } from './context/useLeftMenuContext';
+import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
+import Icon from '../../Elements/Icon/Icon';
+import useOutSideHover from './hooks/useOutsideHover';
+var removeOptionalEnd = /\?$/;
+var MenuItem = function (_a) {
+    var icon = _a.icon, title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, items = _a.items, id = _a.id, isSubitem = _a.isSubitem, isCompact = _a.isCompact, _c = _a.lightMode, lightMode = _c === void 0 ? false : _c, _d = _a.separator, separator = _d === void 0 ? false : _d, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu;
+    var hasChildren = useMemo(function () { return items && (items === null || items === void 0 ? void 0 : items.length) > 0; }, [items]);
+    var _e = useLeftMenuContext(), expandedItem = _e.expandedItem, expandItem = _e.expandItem;
+    var isExpanded = expandedItem === id;
+    var toggleChildren = useCallback(function () {
+        hasChildren && expandItem(isExpanded ? null : id);
+        !hasChildren && !lightMode && onCloseLeftMenu && onCloseLeftMenu();
+    }, [hasChildren, expandItem, isExpanded, id, lightMode, onCloseLeftMenu]);
+    var linkProps = useMemo(function () { return (link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link }); }, [link]);
+    var Title = isCompact ? Paragraph5 : Paragraph3;
+    var listExpandedItems = isExpanded && !isCompact;
+    var parentRef = useRef(null);
+    var _f = useOutSideHover({ parentRef: parentRef }), childRef = _f.ref, isHovering = _f.isHovering, handleMouseOver = _f.handleMouseOver;
+    var itemLinkWrapClassName = !isSubitem ? 'toplevel' : 'nestedlevel';
+    if (isExpanded) {
+        itemLinkWrapClassName += ' expanded';
+    }
+    if (separator) {
+        itemLinkWrapClassName += ' separator';
+    }
+    var isActive = useCallback(function (match, location) {
+        var childSelected = !!(items === null || items === void 0 ? void 0 : items.find(function (item) { var _a; return ((_a = item.link) === null || _a === void 0 ? void 0 : _a.replace(removeOptionalEnd, '')) === location.pathname; }));
+        var isActive = !!matchPath(location.pathname, { path: match === null || match === void 0 ? void 0 : match.path });
+        // partial match helps to match paths with parameters which are not matched by matchPath above
+        var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes('/settings/');
+        return isActive || childSelected || partialMatch;
+    }, [items, link]);
+    return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
+                        // @ts-ignore
+                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
+};
+export default memo(MenuItem);

package/ui/Blocks/SideMenu/SideMenu.d.ts

@@ -0,0 +1,3 @@
+import { SideMenuProps } from './types';
+declare const SideMenu: ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, onCloseLeftMenu, variant, children }: SideMenuProps) => JSX.Element;
+export default SideMenu;

package/ui/Blocks/SideMenu/SideMenu.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FooterRow from './components/Footer';
+import MenuItem from './MenuItem';
+import { LeftMenuProvider } from './context/LeftMenuContext';
+import { HamburgerMenu } from './components/HamburgerMenu';
+import { useClickOutside } from '../Modal/hooks/useClickOutside';
+import { TopLevelWrap, ScrollWrap, BodyWrap, Overlay } from './styles';
+var SideMenu = function (_a) {
+    var menuItems = _a.menuItems, isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, children = _a.children;
+    var lightMode = variant === 'light';
+    var pickerRef = useClickOutside({ onClose: onCloseLeftMenu });
+    return (_jsxs(LeftMenuProvider, { children: [_jsxs(TopLevelWrap, { isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, ref: pickerRef, lightMode: lightMode, children: [_jsx(HamburgerMenu, { isLeftMenuOpen: isLeftMenuOpen, onClick: onCloseLeftMenu }), _jsx(ScrollWrap, { children: _jsxs(BodyWrap, { isCompact: isCompact, children: [menuItems.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode, separator: !!item.separator }, item), "".concat(item.id, "-").concat(index))); }), children] }) }), _jsx(FooterRow, { isCompact: isCompact, setIsCompact: setIsCompact, lightMode: lightMode })] }), _jsx(Overlay, {})] }));
+};
+export default SideMenu;

package/ui/Blocks/SideMenu/components/Footer.d.ts

@@ -0,0 +1,14 @@
+export declare const FooterWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isCompact: boolean;
+}, never>;
+export declare const SizeToggle: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isCompact: boolean;
+    $lightMode?: boolean | undefined;
+}, never>;
+type Props = {
+    isCompact: boolean;
+    setIsCompact?: (compact: boolean) => void;
+    lightMode?: boolean;
+};
+declare const MenuFooter: ({ isCompact, setIsCompact, lightMode }: Props) => JSX.Element;
+export default MenuFooter;

package/ui/Blocks/SideMenu/components/Footer.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import styled, { css } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import { MenuItems } from '../../../Elements/Icon/icons/MenuItems';
+import { Paragraph4 } from '../../../Elements/Typography';
+import { Trans } from '@lingui/react';
+export var FooterWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"])), function (props) { return (props.isCompact ? 'center' : 'flex-start'); }, function (props) { return (props.isCompact ? '0' : '22px'); });
+export var SizeToggle = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"], ["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"])), function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('typoPrimary') : th.color('gray'));
+}, function (props) { return (props.isCompact ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return $lightMode && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          fill: ", ";\n        "], ["\n          fill: ", ";\n        "])), th.color('neutral20'));
+}, th.color('lightGray5'));
+var MenuFooter = function (_a) {
+    var isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, lightMode = _a.lightMode;
+    var toggleIsCompact = useCallback(function () {
+        setIsCompact && setIsCompact(!isCompact);
+    }, [setIsCompact, isCompact]);
+    return (_jsx(FooterWrap, { isCompact: isCompact, children: _jsxs(SizeToggle, { onClick: toggleIsCompact, isCompact: isCompact, "$lightMode": lightMode, children: [_jsx(MenuItems, { stroke: "none", width: "24px" }), !isCompact && (_jsx(Paragraph4, { ml: 2, variant: "semiBold", children: _jsx(Trans, { id: "footer.collapse", message: "Collapse" }) }))] }) }));
+};
+export default MenuFooter;
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/SideMenu/components/HamburgerMenu.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    isLeftMenuOpen?: boolean;
+    onClick?: () => void;
+};
+export declare const HamburgerMenu: ({ isLeftMenuOpen, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, x } from '@xstyled/styled-components';
+import styled from 'styled-components';
+import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
+import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
+import { th } from '@xstyled/system';
+import { useTheme } from '@xstyled/styled-components';
+var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen;
+    return isLeftMenuOpen
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "], ["\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          & > svg > path {\n            stroke: ", ";\n          }\n        "], ["\n          & > svg > path {\n            stroke: ", ";\n          }\n        "])), th.color('blue2'));
+});
+export var HamburgerMenu = function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen, onClick = _a.onClick;
+    var theme = useTheme();
+    var neutralColor = th.color('neutral20')({ theme: theme });
+    var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
+    return (_jsx(HamburgerMenuWrapper, { mr: 3, onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/SideMenu/components/SubitemTooltip.d.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject } from 'react';
+import { MenuItemType } from '../types';
+type Props = {
+    itemsOpen?: number;
+    childRef: MutableRefObject<HTMLElement | null>;
+    parentRef: MutableRefObject<HTMLElement | null>;
+    items: MenuItemType[] | undefined;
+    isLeftMenuOpen?: boolean;
+    onCloseLeftMenu?: () => void;
+    lightMode?: boolean;
+};
+declare const SubitemTooltip: ({ items, childRef, parentRef, isLeftMenuOpen, onCloseLeftMenu, lightMode }: Props) => JSX.Element;
+export default SubitemTooltip;

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Popper } from 'react-popper';
+import styled from 'styled-components';
+import Portal from '../../../Elements/Portal';
+import { H6 } from '../../../Elements/Typography/Typography';
+import { ItemLinkWrap, TooltipWrap, TooltipItemLabel } from '../styles';
+var TooltipItem = function (_a) {
+    var title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, lightMode = _a.lightMode;
+    var linkProps = useMemo(function () {
+        return link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link };
+    }, [link]);
+    return (_jsx(ItemLinkWrap, __assign({}, linkProps, { exact: true, "$lightMode": lightMode, children: _jsx(TooltipItemLabel, { children: _jsx(H6, { variant: "medium", children: title }) }) })));
+};
+var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n  display: ", ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  z-index: 5;\n  display: ", ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])), function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen;
+    return (isLeftMenuOpen ? 'block' : 'none');
+});
+var SubitemTooltip = function (_a) {
+    var items = _a.items, childRef = _a.childRef, parentRef = _a.parentRef, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, lightMode = _a.lightMode;
+    return (_jsx(Portal, { children: _jsx(Popper, { innerRef: childRef, referenceElement: parentRef.current, placement: "right-start", children: function (_a) {
+                var ref = _a.ref, style = _a.style;
+                return (_jsx(PopoverWrapper, { ref: ref, style: style, onClick: onCloseLeftMenu, isLeftMenuOpen: isLeftMenuOpen, children: _jsx(TooltipWrap, { "$lightMode": lightMode, children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(TooltipItem, __assign({}, item, { lightMode: lightMode }), "".concat(index))); }) }) }));
+            } }) }));
+};
+export default SubitemTooltip;
+var templateObject_1;

package/ui/Blocks/SideMenu/context/LeftMenuContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type LeftMenuContextType = {
+    expandedItem: string | null;
+    expandItem: (item: string | null) => void;
+};
+export declare const LeftMenuContext: React.Context<LeftMenuContextType | null>;
+type LeftMenuProviderProps = {
+    children: React.ReactNode;
+    defaultItemSelected?: string | null;
+};
+export declare const LeftMenuProvider: ({ children, defaultItemSelected }: LeftMenuProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Blocks/SideMenu/context/LeftMenuContext.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useMemo, useState } from 'react';
+export var LeftMenuContext = createContext(null);
+export var LeftMenuProvider = function (_a) {
+    var children = _a.children, _b = _a.defaultItemSelected, defaultItemSelected = _b === void 0 ? null : _b;
+    var _c = useState(defaultItemSelected), expandedItem = _c[0], setExpandedItem = _c[1];
+    var expandItem = useCallback(function (item) {
+        setExpandedItem(item);
+    }, []);
+    var value = useMemo(function () { return ({
+        expandedItem: expandedItem,
+        expandItem: expandItem,
+    }); }, [expandedItem, expandItem]);
+    return _jsx(LeftMenuContext.Provider, { value: value, children: children });
+};

package/ui/Blocks/SideMenu/context/useLeftMenuContext.d.ts

@@ -0,0 +1,4 @@
+export declare const useLeftMenuContext: () => {
+    expandedItem: string | null;
+    expandItem: (item: string | null) => void;
+};

package/ui/Blocks/SideMenu/context/useLeftMenuContext.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { LeftMenuContext } from './LeftMenuContext';
+export var useLeftMenuContext = function () {
+    var context = useContext(LeftMenuContext);
+    if (!context)
+        throw new Error('useLeftMenuContext context must be use inside LeftMenuProvider');
+    return context;
+};

package/ui/Blocks/SideMenu/hooks/useOutsideHover.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+interface Props {
+    parentRef: MutableRefObject<HTMLDivElement | null | undefined>;
+}
+interface ReturnType {
+    isHovering: boolean;
+    handleMouseOver: () => void;
+    ref: MutableRefObject<HTMLElement | null>;
+}
+declare const useOutSideHover: ({ parentRef }: Props) => ReturnType;
+export default useOutSideHover;

package/ui/Blocks/SideMenu/hooks/useOutsideHover.js

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+var useOutSideHover = function (_a) {
+    var parentRef = _a.parentRef;
+    var ref = useRef(null);
+    var _b = useState(false), isHovering = _b[0], setIsHovering = _b[1];
+    var handleMouseOver = useCallback(function () {
+        setIsHovering(true);
+    }, []);
+    var handleMouseOut = useCallback(function (e) {
+        var _a, _b;
+        if (!((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && !((_b = ref.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
+            setIsHovering(false);
+        }
+    }, [parentRef]);
+    useEffect(function () {
+        document.addEventListener('mouseover', handleMouseOut);
+        return function () {
+            document.removeEventListener('mouseover', handleMouseOut);
+        };
+    }, [handleMouseOut]);
+    return { isHovering: isHovering, handleMouseOver: handleMouseOver, ref: ref };
+};
+export default useOutSideHover;

package/ui/Blocks/SideMenu/index.d.ts

@@ -0,0 +1,2 @@
+import SideMenu from './SideMenu';
+export default SideMenu;

package/ui/Blocks/SideMenu/index.js

@@ -0,0 +1,2 @@
+import SideMenu from './SideMenu';
+export default SideMenu;

package/ui/Blocks/SideMenu/stories/SideMenu.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const meta: {
+    title: string;
+    component: ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, onCloseLeftMenu, variant, children }: import("../types").SideMenuProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Dark: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkCompact: () => import("react/jsx-runtime").JSX.Element;
+export declare const Light: () => import("react/jsx-runtime").JSX.Element;
+export declare const LightCompact: () => import("react/jsx-runtime").JSX.Element;