@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/CornerDialog/utils.js

@@ -1,31 +1,12 @@
-//#region packages/ui/Blocks/CornerDialog/utils.ts
-const statusToColors = {
-	info: {
-		fontColor: "gray1",
-		backgroundColor: "lightGray7",
-		fill: "gray1"
-	},
-	success: {
-		fontColor: "white",
-		backgroundColor: "green",
-		fill: "white"
-	},
-	error: {
-		fontColor: "white",
-		backgroundColor: "red1",
-		fill: "white"
-	},
-	warning: {
-		fontColor: "blue2",
-		backgroundColor: "yellow1",
-		fill: "blue2"
-	}
+export var statusToColors = {
+    info: { fontColor: 'gray1', backgroundColor: 'lightGray7', fill: 'gray1' },
+    success: { fontColor: 'white', backgroundColor: 'green', fill: 'white' },
+    error: { fontColor: 'white', backgroundColor: 'red1', fill: 'white' },
+    warning: { fontColor: 'blue2', backgroundColor: 'yellow1', fill: 'blue2' },
 };
-const statusToIcon = {
-	info: "info",
-	success: "circleCheck",
-	error: "circleX",
-	warning: "circleTriangle"
+export var statusToIcon = {
+    info: 'info',
+    success: 'circleCheck',
+    error: 'circleX',
+    warning: 'circleTriangle',
 };
-//#endregion
-export { statusToColors, statusToIcon };

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.d.ts

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import type { MenuItemType } from '../../../../../SideMenu/types';
+import { FC } from 'react';
+import { MenuItemType } from '../../../../../SideMenu/types';
+
 type MenuItemProps = {
     item: MenuItemType;
 };

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -1,16 +1,7 @@
-import { MenuItemsListItem } from "../../styles.js";
-import { jsx } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
-//#region packages/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.tsx
-const MenuItem = ({ item }) => {
-	return /* @__PURE__ */ jsx(MenuItemsListItem, {
-		onClick: item.onClick,
-		pointer: !!item.onClick,
-		children: item.link ? /* @__PURE__ */ jsx(Link, {
-			to: item.link,
-			children: item.title
-		}) : item.title
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { MenuItemsListItem } from '../../styles';
+export var MenuItem = function (_a) {
+    var item = _a.item;
+    return (_jsx(MenuItemsListItem, { onClick: item.onClick, pointer: !!item.onClick, children: item.link ? _jsx(Link, { to: item.link, children: item.title }) : item.title }));
 };
-//#endregion
-export { MenuItem };

package/ui/Blocks/Header/components/MenuItems/index.d.ts

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import type { MenuItemType } from '../../../SideMenu/types';
+import { FC } from 'react';
+import { MenuItemType } from '../../../SideMenu/types';
+
 type MenuItemsProps = {
     items?: MenuItemType[];
 };

package/ui/Blocks/Header/components/MenuItems/index.js

@@ -1,9 +1,7 @@
-import { MenuItemsList } from "./styles.js";
-import { MenuItem } from "./components/MenuItem/index.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/Header/components/MenuItems/index.tsx
-const MenuItems = ({ items }) => {
-	return /* @__PURE__ */ jsx(MenuItemsList, { children: items?.map((item, key) => /* @__PURE__ */ jsx(MenuItem, { item }, key)) });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem } from './components/MenuItem';
+import { MenuItemsList } from './styles';
+export var MenuItems = function (_a) {
+    var items = _a.items;
+    return (_jsx(MenuItemsList, { children: items === null || items === void 0 ? void 0 : items.map(function (item, key) { return (_jsx(MenuItem, { item: item }, key)); }) }));
 };
-//#endregion
-export { MenuItems };

package/ui/Blocks/Header/components/MenuItems/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const MenuItemsList: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
-export declare const MenuItemsListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {
-    pointer?: boolean;
+export declare const MenuItemsList: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
+export declare const MenuItemsListItem: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, {
+    pointer?: boolean | undefined;
 }, never>;

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -1,22 +1,11 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Header/components/MenuItems/styles.ts
-const MenuItemsList = styled$1.ul`
-  display: flex;
-  gap: 10px;
-`;
-const MenuItemsListItem = styled$1.li`
-  ${({ pointer }) => pointer && "cursor: pointer;"};
-
-  a {
-    text-decoration: none;
-    border-color: red1;
-    color: typoPrimary;
-  }
-
-  a:hover {
-    border-bottom: 1px solid;
-    color: red1;
-  }
-`;
-//#endregion
-export { MenuItemsList, MenuItemsListItem };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n"], ["\n  display: flex;\n  gap: 10px;\n"])));
+export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])), function (_a) {
+    var pointer = _a.pointer;
+    return pointer && 'cursor: pointer;';
+});
+var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 type UserInfoProps = {
     userName?: string;
     role?: string;

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.js

@@ -1,23 +1,8 @@
-import { H7 } from "../../../../../../Elements/Typography/Typography.js";
-import "../../../../../../Elements/Typography/index.js";
-import Avatar_default from "../../../../../../Elements/Avatar/index.js";
-import { AvatarWrapper, UserInfo } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.tsx
-const UserInfoBlock = ({ userName, role }) => {
-	return /* @__PURE__ */ jsxs(AvatarWrapper, { children: [/* @__PURE__ */ jsx(Avatar_default, {
-		colorBack: "lightGray7",
-		size: 34
-	}), /* @__PURE__ */ jsxs(UserInfo, { children: [/* @__PURE__ */ jsx(H7, {
-		variant: "bold",
-		mt: 0,
-		mb: "4px",
-		children: userName
-	}), /* @__PURE__ */ jsx(H7, {
-		mt: 0,
-		mb: 0,
-		children: role
-	})] })] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Avatar from '../../../../../../Elements/Avatar';
+import { H7 } from '../../../../../../Elements/Typography';
+import { AvatarWrapper, UserInfo } from './styles';
+export var UserInfoBlock = function (_a) {
+    var userName = _a.userName, role = _a.role;
+    return (_jsxs(AvatarWrapper, { children: [_jsx(Avatar, { colorBack: "lightGray7", size: 34 }), _jsxs(UserInfo, { children: [_jsx(H7, { variant: "bold", mt: 0, mb: "4px", children: userName }), _jsx(H7, { mt: 0, mb: 0, children: role })] })] }));
 };
-//#endregion
-export { UserInfoBlock };

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const UserInfo: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const UserInfo: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const AvatarWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.js

@@ -1,14 +1,8 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.ts
-const UserInfo = styled$1.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-const AvatarWrapper = styled$1.div`
-  display: flex;
-  column-gap: 15px;
-  margin-bottom: 20px;
-`;
-//#endregion
-export { AvatarWrapper, UserInfo };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var UserInfo = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+export var AvatarWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"], ["\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"])));
+var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/hooks/index.js

@@ -1,2 +1 @@
-import { useLogout } from "./useLogout.js";
-export { useLogout };
+export { useLogout } from './useLogout';

package/ui/Blocks/Header/components/UserMenu/hooks/useLogout.js

@@ -1,10 +1,10 @@
-//#region packages/ui/Blocks/Header/components/UserMenu/hooks/useLogout.ts
-const useLogout = ({ closeDropdown, onLogout }) => {
-	const handleLogout = () => {
-		closeDropdown();
-		onLogout?.();
-	};
-	return { handleLogout };
+export var useLogout = function (_a) {
+    var closeDropdown = _a.closeDropdown, onLogout = _a.onLogout;
+    var handleLogout = function () {
+        closeDropdown();
+        onLogout === null || onLogout === void 0 ? void 0 : onLogout();
+    };
+    return {
+        handleLogout: handleLogout
+    };
 };
-//#endregion
-export { useLogout };

package/ui/Blocks/Header/components/UserMenu/index.d.ts

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { User } from '../../types';
+import { FC } from 'react';
+import { User } from '../../types';
+
 type Props = {
     user?: User | null;
     onLogout?: () => void;

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -1,49 +1,18 @@
-import Button_default from "../../../../Elements/Button/index.js";
-import Popover from "../../../Popover/index.js";
-import { useToggleAndClose } from "../../../../hooks/useToggleAndClose.js";
-import Avatar_default from "../../../../Elements/Avatar/index.js";
-import { UserInfoBlock } from "./components/UserInfo/index.js";
-import { useLogout } from "./hooks/useLogout.js";
-import { DropdownContentWrap, Line, UserWrap } from "./styles.js";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Blocks/Header/components/UserMenu/index.tsx
-const UserMenu = ({ user, onLogout }) => {
-	const [isDropdownOpen, toggleDropdown, closeDropdown] = useToggleAndClose(false);
-	const parentRef = useRef(null);
-	const { handleLogout } = useLogout({
-		closeDropdown,
-		onLogout
-	});
-	return /* @__PURE__ */ jsxs(UserWrap, { children: [/* @__PURE__ */ jsx("div", {
-		ref: parentRef,
-		onClick: toggleDropdown,
-		children: /* @__PURE__ */ jsx(Avatar_default, {
-			colorBack: isDropdownOpen ? "lightGray7" : "neutral20",
-			size: 34
-		})
-	}), isDropdownOpen && /* @__PURE__ */ jsx(Popover, {
-		parentRef,
-		onClose: closeDropdown,
-		children: /* @__PURE__ */ jsxs(DropdownContentWrap, { children: [
-			/* @__PURE__ */ jsx(UserInfoBlock, {
-				userName: `${user?.firstName ?? ""} ${user?.lastName ?? ""}`,
-				role: user?.roles?.[0] ?? ""
-			}),
-			/* @__PURE__ */ jsx(Line, {}),
-			/* @__PURE__ */ jsx(Button_default, {
-				onClick: handleLogout,
-				iconLeft: "logout",
-				variant: "ghost",
-				fullWidth: true,
-				children: /* @__PURE__ */ jsx(Trans, {
-					id: "logout",
-					message: "Logout"
-				})
-			})
-		] })
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import Avatar from '../../../../Elements/Avatar';
+import Button from '../../../../Elements/Button';
+import { useToggleAndClose } from '../../../../hooks/useToggleAndClose';
+import Popover from '../../../Popover';
+import { UserInfoBlock } from './components/UserInfo';
+import { Trans } from '@lingui/react';
+import { useLogout } from './hooks';
+import { DropdownContentWrap, Line, UserWrap } from './styles';
+export var UserMenu = function (_a) {
+    var _b, _c, _d, _e;
+    var user = _a.user, onLogout = _a.onLogout;
+    var _f = useToggleAndClose(false), isDropdownOpen = _f[0], toggleDropdown = _f[1], closeDropdown = _f[2];
+    var parentRef = useRef(null);
+    var handleLogout = useLogout({ closeDropdown: closeDropdown, onLogout: onLogout }).handleLogout;
+    return (_jsxs(UserWrap, { children: [_jsx("div", { ref: parentRef, onClick: toggleDropdown, children: _jsx(Avatar, { colorBack: isDropdownOpen ? 'lightGray7' : 'neutral20', size: 34 }) }), isDropdownOpen && (_jsx(Popover, { parentRef: parentRef, onClose: closeDropdown, children: _jsxs(DropdownContentWrap, { children: [_jsx(UserInfoBlock, { userName: "".concat((_b = user === null || user === void 0 ? void 0 : user.firstName) !== null && _b !== void 0 ? _b : '', " ").concat((_c = user === null || user === void 0 ? void 0 : user.lastName) !== null && _c !== void 0 ? _c : ''), role: (_e = (_d = user === null || user === void 0 ? void 0 : user.roles) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : '' }), _jsx(Line, {}), _jsx(Button, { onClick: handleLogout, iconLeft: "logout", variant: "ghost", fullWidth: true, children: _jsx(Trans, { id: "logout", message: "Logout" }) })] }) }))] }));
 };
-//#endregion
-export { UserMenu };

package/ui/Blocks/Header/components/UserMenu/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const UserWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const DropdownContentWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const UserWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const DropdownContentWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Header/components/UserMenu/styles.js

@@ -1,25 +1,9 @@
-import styled$1, { th } from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Header/components/UserMenu/styles.ts
-const UserWrap = styled$1.div`
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  align-items: center;
-`;
-const DropdownContentWrap = styled$1.div`
-  width: 295px;
-  background-color: white;
-  box-shadow: ${th.shadow("dropShadow")};
-  padding: 24px 12px 12px 12px;
-  border: 1px solid ${th.color("lightGray6")};
-  border-radius: 8px;
-  margin: 5px 10px 0 0;
-`;
-const Line = styled$1.div`
-  width: 100%;
-  height: 1px;
-  background-color: ${th.color("lightGray6")};
-  margin: 4px 0;
-`;
-//#endregion
-export { DropdownContentWrap, Line, UserWrap };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { th } from '@xstyled/styled-components';
+export var UserWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"])));
+export var DropdownContentWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"], ["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"])), th.shadow('dropShadow'), th.color('lightGray6'));
+export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"], ["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"])), th.color('lightGray6'));
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Header/hooks/useChangeLanguage.js

@@ -1,9 +1,9 @@
-//#region packages/ui/Blocks/Header/hooks/useChangeLanguage.ts
-const useChangeLanguage = ({ onChangeLanguage }) => {
-	const handleChangeLanguage = (languageCode) => {
-		onChangeLanguage?.(languageCode);
-	};
-	return { handleChangeLanguage };
+export var useChangeLanguage = function (_a) {
+    var onChangeLanguage = _a.onChangeLanguage;
+    var handleChangeLanguage = function (languageCode) {
+        onChangeLanguage === null || onChangeLanguage === void 0 ? void 0 : onChangeLanguage(languageCode);
+    };
+    return {
+        handleChangeLanguage: handleChangeLanguage
+    };
 };
-//#endregion
-export { useChangeLanguage };

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

@@ -1,8 +1,9 @@
-import { type FC } from 'react';
-import type { Brand, Variant } from '../../Elements/Logo';
-import { type LanguageItem } from '../LanguageSwitch';
-import type { MenuItemType } from '../SideMenu/types';
-import type { User } from './types';
+import { FC } from 'react';
+import { Brand, Variant } from '../../Elements/Logo';
+import { LanguageItem } from '../LanguageSwitch';
+import { MenuItemType } from '../SideMenu/types';
+import { User } from './types';
+
 type Props = {
     homeLink: string;
     isMobileMenuOpen?: boolean;

package/ui/Blocks/Header/index.js

@@ -1,45 +1,15 @@
-import LanguageSwitch_default from "../LanguageSwitch/index.js";
-import { HamburgerMenuButton } from "../SideMenu/components/HamburgerMenu.js";
-import "../SideMenu/index.js";
-import Logo_default from "../../Elements/Logo/index.js";
-import { MenuItems } from "./components/MenuItems/index.js";
-import { UserMenu } from "./components/UserMenu/index.js";
-import { useChangeLanguage } from "./hooks/useChangeLanguage.js";
-import { languageItems } from "./utils/languageItems.js";
-import { Container, LanguageWrapper, LeftSide, RightSide } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
-//#region packages/ui/Blocks/Header/index.tsx
-const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, rightMenuItems, showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
-	const { handleChangeLanguage } = useChangeLanguage({ onChangeLanguage });
-	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsxs(LeftSide, { children: [onOpenMobileSideMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
-		isLeftMenuOpen: isMobileMenuOpen,
-		onClick: onOpenMobileSideMenu
-	}), /* @__PURE__ */ jsx(Link, {
-		to: homeLink,
-		children: logoSrc ? /* @__PURE__ */ jsx("img", {
-			src: logoSrc,
-			alt: "logo",
-			width: logoSrcWidth
-		}) : logo && /* @__PURE__ */ jsx(Logo_default, {
-			brand: logo,
-			variant: logoVariant,
-			width: "145px"
-		})
-	})] }), /* @__PURE__ */ jsxs(RightSide, { children: [
-		Array.isArray(rightMenuItems) && rightMenuItems?.length > 0 && /* @__PURE__ */ jsx(MenuItems, { items: rightMenuItems }),
-		withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, { children: /* @__PURE__ */ jsx(LanguageSwitch_default, {
-			languageItems: languageItems$1,
-			withTitle: showLanguageWithTitle,
-			onLanguageChange: handleChangeLanguage,
-			activeLanguage: currentLanguage,
-			languageFlagWrapBackgroundColor
-		}) }),
-		hasUserMenu && /* @__PURE__ */ jsx(UserMenu, {
-			user,
-			onLogout
-		})
-	] })] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import Logo from '../../Elements/Logo';
+import LanguageSwitch from '../LanguageSwitch';
+import { HamburgerMenuButton } from '../SideMenu';
+import { MenuItems } from './components/MenuItems';
+import { UserMenu } from './components/UserMenu';
+import { useChangeLanguage } from './hooks/useChangeLanguage';
+import { languageItems as defaultLanguageItems } from './utils/languageItems';
+import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
+export var Header = function (_a) {
+    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, _d = _a.withLanguageSwitch, withLanguageSwitch = _d === void 0 ? true : _d, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
+    var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
+    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (logo && _jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), withLanguageSwitch && (_jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) })), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
 };
-//#endregion
-export { Header };

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

@@ -1,24 +1,25 @@
-import type { FC } from 'react';
+import { FC } from 'react';
+
 declare const meta: {
     title: string;
     component: FC<{
         homeLink: string;
-        isMobileMenuOpen?: boolean;
-        logo?: import("../../..").Brand;
-        logoVariant?: import("../../..").Variant;
-        logoSrc?: string;
-        logoSrcWidth?: string;
-        user?: import("../types").User | null;
-        currentLanguage?: string;
-        hasUserMenu?: boolean;
-        rightMenuItems?: import("../../SideMenu").MenuItemType[];
-        languageItems?: import("../../LanguageSwitch").LanguageItem[];
-        showLanguageWithTitle?: boolean;
-        languageFlagWrapBackgroundColor?: string;
-        onOpenMobileSideMenu?: () => void;
-        onChangeLanguage?: (language: string) => void;
-        onLogout?: () => void;
-        withLanguageSwitch?: boolean;
+        isMobileMenuOpen?: boolean | undefined;
+        logo?: import('../../..').Brand | undefined;
+        logoVariant?: import('../../..').Variant | undefined;
+        logoSrc?: string | undefined;
+        logoSrcWidth?: string | undefined;
+        user?: import('../types').User | null | undefined;
+        currentLanguage?: string | undefined;
+        hasUserMenu?: boolean | undefined;
+        rightMenuItems?: import('../../SideMenu').MenuItemType[] | undefined;
+        languageItems?: import('../../LanguageSwitch').LanguageItem[] | undefined;
+        showLanguageWithTitle?: boolean | undefined;
+        languageFlagWrapBackgroundColor?: string | undefined;
+        onOpenMobileSideMenu?: (() => void) | undefined;
+        onChangeLanguage?: ((language: string) => void) | undefined;
+        onLogout?: (() => void) | undefined;
+        withLanguageSwitch?: boolean | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Blocks/Header/stories/Header.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Header } from '../';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+var meta = {
+    title: 'Blocks/Header',
+    component: Header,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+var user = {
+    firstName: 'John',
+    lastName: 'Black',
+    roles: ['ADMIN']
+};
+var menuItems = [
+    {
+        id: 'aboutUs',
+        title: 'About us',
+        link: 'http://mailstep.com'
+    },
+    {
+        id: 'trackingPage',
+        title: 'Tracking package',
+        link: 'http://mailstep.com/tracking'
+    },
+    {
+        id: 'customerService',
+        title: 'Customer service',
+        link: 'http://mailstep.com/cc'
+    }
+];
+export default meta;
+export var HeaderBasic = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black" }) })); };
+export var HeaderWithUser = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", hasUserMenu: true, user: user }) })); };
+export var HeaderWithRightLinks = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", rightMenuItems: menuItems }) })); };
+export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs" }) })); };
+export var HeaderWithCustomLogo = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "//google.com", logoSrc: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", logoSrcWidth: "100px" }) })); };
+export var HeaderWithAllItems = function () {
+    var _a = useState(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
+    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, showLanguageWithTitle: true, isMobileMenuOpen: isMobileMenuOpen, languageFlagWrapBackgroundColor: "pink", onOpenMobileSideMenu: function () {
+                setIsMobileMenuOpen(function (state) { return !state; });
+            } }) }));
+};

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

@@ -1,4 +1,4 @@
-export declare const Container: import("styled-components").StyledComponent<"header", import("@xstyled/system").Theme, {}, never>;
-export declare const LeftSide: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const RightSide: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"header", import('@xstyled/system').Theme, {}, never>;
+export declare const LeftSide: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const LanguageWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const RightSide: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;