@wireapp/react-ui-kit 9.69.7-beta.14.5ce5ca523 → 9.70.0

package/lib/Layout/Header/Header.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+export type HeaderProps<T = HTMLHeadingElement> = React.HTMLProps<T>;
+export declare const headerStyle: <T>(props: HeaderProps<T>) => CSSObject;
+export declare const Header: (props: HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

package/lib/Layout/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/Layout/Header/Header.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,kBAAkB,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAKtD,CAAC;AAEH,eAAO,MAAM,MAAM,UAAW,WAAW,qDAAmD,CAAC"}

package/lib/Layout/Header/Header.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.headerStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const headerStyle = _ => ({
+    alignItems: 'center',
+    display: 'flex',
+    height: '64px',
+    justifyContent: 'space-between',
+});
+exports.headerStyle = headerStyle;
+const Header = (props) => (0, jsx_runtime_1.jsx)("header", { css: (0, exports.headerStyle)(props), ...props });
+exports.Header = Header;

package/lib/Layout/Header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Header';
+//# sourceMappingURL=index.d.ts.map

package/lib/Layout/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/Header/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC"}

package/lib/Layout/Header/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Header"), exports);

package/lib/Layout/HeaderMenu/HeaderMenu.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface HeaderMenuProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    centerElement?: React.ReactNode;
+    logoElement?: React.ReactNode;
+    openMenuLabel?: string;
+    closeMenuLabel?: string;
+}
+export declare const HeaderMenu: ({ children, logoElement, centerElement, ...props }: HeaderMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeaderMenu.d.ts.map

package/lib/Layout/HeaderMenu/HeaderMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderMenu.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/HeaderMenu.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,uDAAoE,eAAe,qDAyCzG,CAAC"}

package/lib/Layout/HeaderMenu/HeaderMenu.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderMenu = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const MenuContent_1 = require("./MenuContent");
+const MenuItems_1 = require("./MenuItems");
+const MenuOpenButton_1 = require("./MenuOpenButton");
+const MenuScrollableItems_1 = require("./MenuScrollableItems");
+const HeaderMenu = ({ children, logoElement = null, centerElement = null, ...props }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const toggleMenu = () => {
+        if (typeof window !== 'undefined') {
+            window.scrollTo(0, 0);
+            setIsOpen(current => !current);
+        }
+    };
+    const closeMenu = () => setIsOpen(false);
+    const onKeyDown = e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleMenu();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { css: { height: '64px' }, ...props, "data-uie-name": "element-header-menu", children: (0, jsx_runtime_1.jsxs)(MenuContent_1.MenuContent, { open: isOpen, children: [(0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu, children: logoElement }), (0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex' }, children: centerElement }), (0, jsx_runtime_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, onKeyDown: onKeyDown, open: isOpen, openMenuLabel: props.openMenuLabel, closeMenuLabel: props.closeMenuLabel, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }), (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { onClick: closeMenu, open: isOpen, children: (0, jsx_runtime_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, { children: children }) })] }) }));
+};
+exports.HeaderMenu = HeaderMenu;

package/lib/Layout/HeaderMenu/HeaderMenu.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HeaderMenu } from './HeaderMenu';
+declare const meta: Meta<typeof HeaderMenu>;
+export default meta;
+type Story = StoryObj<typeof HeaderMenu>;
+export declare const Default: Story;
+export declare const WithoutCenterElement: Story;
+export declare const WithoutLogo: Story;
+export declare const MinimalExample: Story;
+//# sourceMappingURL=HeaderMenu.stories.d.ts.map

package/lib/Layout/HeaderMenu/HeaderMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/HeaderMenu.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAMxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAajC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAezC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/lib/Layout/HeaderMenu/HeaderMenu.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MinimalExample = exports.WithoutLogo = exports.WithoutCenterElement = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const HeaderMenu_1 = require("./HeaderMenu");
+const colors_1 = require("../../Identity/colors/colors");
+const Logo_1 = require("../../Identity/Logo/Logo");
+const Typography_1 = require("../../Typography");
+const meta = {
+    component: HeaderMenu_1.HeaderMenu,
+    title: 'Layout/HeaderMenu',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { height: '400px', position: 'relative', paddingRight: '16px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+exports.default = meta;
+const MenuLink = ({ children }) => ((0, jsx_runtime_1.jsx)(Typography_1.Text, { style: {
+        cursor: 'pointer',
+        display: 'block',
+        margin: '16px 16px 0 16px',
+        textDecoration: 'none',
+    }, children: children }));
+exports.Default = {
+    args: {
+        logoElement: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 16 }),
+        centerElement: ((0, jsx_runtime_1.jsx)("div", { style: { color: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "Center Element" }) })),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};
+exports.WithoutCenterElement = {
+    args: {
+        logoElement: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 16 }),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};
+exports.WithoutLogo = {
+    args: {
+        centerElement: ((0, jsx_runtime_1.jsx)("div", { style: { color: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "Center Element" }) })),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};
+exports.MinimalExample = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};

package/lib/Layout/HeaderMenu/HeaderSubMenu.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;
+export declare const DESKTOP_HEADER_SUB_MENU_CLASSNAME = "desktopStyledHeaderSubMenu";
+export declare const DesktopStyledHeaderSubMenu: (props: DesktopStyledHeaderSubMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {
+    open?: boolean;
+}
+export declare const MobileStyledHeaderSubMenu: (props: MobileStyledHeaderSubMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export interface HeaderSubMenuProps<T = HTMLParagraphElement> extends React.PropsWithRef<React.HTMLProps<T>> {
+    caption: string;
+    isOpen: boolean;
+}
+export declare const HeaderSubMenu: React.FC<HeaderSubMenuProps>;
+//# sourceMappingURL=HeaderSubMenu.d.ts.map

package/lib/Layout/HeaderMenu/HeaderSubMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubMenu.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/HeaderSubMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,+BAA+B,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AA8BrF,eAAO,MAAM,iCAAiC,+BAA+B,CAAC;AAE9E,eAAO,MAAM,0BAA0B,UAAW,+BAA+B,qDAMhF,CAAC;AAEF,MAAM,WAAW,8BAA8B,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAeD,eAAO,MAAM,yBAAyB,UAAW,8BAA8B,qDAE9E,CAAC;AAEF,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,oBAAoB,CAAE,SAAQ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC1G,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}

package/lib/Layout/HeaderMenu/HeaderSubMenu.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSubMenu = exports.MobileStyledHeaderSubMenu = exports.DesktopStyledHeaderSubMenu = exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const MenuLink_1 = require("./MenuLink");
+const MenuSubLink_1 = require("./MenuSubLink");
+const Identity_1 = require("../../Identity");
+const motions_1 = require("../../Identity/motions/motions");
+const utils_1 = require("../../utils");
+const desktopStyledHeaderSubMenuStyle = theme => ({
+    alignItems: 'left',
+    backgroundColor: Identity_1.COLOR.tint(theme.general.backgroundColor, 0.16),
+    borderRadius: '8px',
+    boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minWidth: '200px',
+    padding: '8px 8px',
+    span: {
+        '&:hover': {
+            backgroundColor: theme.general.backgroundColor,
+            borderRadius: '4px',
+        },
+        alignItems: 'center',
+        display: 'flex',
+        height: '30px',
+        margin: 0,
+        paddingLeft: '10px !important',
+        paddingRight: '10px !important',
+        whiteSpace: 'nowrap',
+    },
+    [`.${MenuLink_1.MENU_LINK_CLASSNAME}:nth-of-type(n+2)`]: {
+        marginTop: '8px',
+    },
+});
+exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';
+const DesktopStyledHeaderSubMenu = (props) => ((0, jsx_runtime_1.jsx)("div", { className: exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME, css: (theme) => desktopStyledHeaderSubMenuStyle(theme, props), ...props }));
+exports.DesktopStyledHeaderSubMenu = DesktopStyledHeaderSubMenu;
+const mobileStyledHeaderSubMenuStyle = _ => ({
+    '*': {
+        fontWeight: 200,
+    },
+    alignItems: 'center',
+    borderTop: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    marginTop: '16px',
+    paddingTop: '8px',
+});
+const MobileStyledHeaderSubMenu = (props) => ((0, jsx_runtime_1.jsx)("span", { css: mobileStyledHeaderSubMenuStyle(props), ...props }));
+exports.MobileStyledHeaderSubMenu = MobileStyledHeaderSubMenu;
+const HeaderSubMenu = ({ caption, isOpen, children, ...props }) => {
+    const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${utils_1.QUERY.desktop})`).matches;
+    return ((0, jsx_runtime_1.jsxs)(MenuSubLink_1.MenuSubLink, { ...props, style: { cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { children: caption }), (0, jsx_runtime_1.jsx)(Identity_1.Opacity, { in: isOpen && isDesktop, timeout: motions_1.DURATION.DEFAULT, style: { display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1 }, mountOnEnter: false, unmountOnExit: false, children: (0, jsx_runtime_1.jsx)(Identity_1.YAxisMovement, { in: isOpen && isDesktop, startValue: '-30px', endValue: '0px', style: { display: 'inline-block' }, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.DesktopStyledHeaderSubMenu, { children: children }) }) }), (0, jsx_runtime_1.jsx)(Identity_1.Opacity, { in: isOpen && !isDesktop, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: false, style: { display: 'block', position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Identity_1.Slide, { in: isOpen && !isDesktop, startValue: '-56%', endValue: '0', timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.MobileStyledHeaderSubMenu, { children: children }) }) })] }));
+};
+exports.HeaderSubMenu = HeaderSubMenu;

package/lib/Layout/HeaderMenu/MenuContent.d.ts

@@ -0,0 +1,8 @@
+import { CSSObject } from '@emotion/react';
+import { TextProps } from '../../Typography';
+export interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {
+    open?: boolean;
+}
+export declare const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject;
+export declare const MenuContent: (props: MenuContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuContent.d.ts.map

package/lib/Layout/HeaderMenu/MenuContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuContent.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAI3C,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,SAYhE,CAAC;AAIH,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDAElD,CAAC"}

package/lib/Layout/HeaderMenu/MenuContent.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuContent = exports.menuContentStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const util_1 = require("../../utils/util");
+const Content_1 = require("../Content/Content");
+const menuContentStyle = props => ({
+    ...(0, Content_1.contentStyle)(props),
+    alignItems: 'center',
+    display: 'grid',
+    gridColumnGap: '8px',
+    gridTemplateColumns: '1fr auto 1fr',
+    height: '64px',
+    justifyContent: 'space-between',
+    left: props.open ? 0 : undefined,
+    position: props.open ? 'fixed' : undefined,
+    width: props.open ? '100%' : undefined,
+    zIndex: props.open ? 10000 : undefined,
+});
+exports.menuContentStyle = menuContentStyle;
+const filterMenuContentProps = (props) => (0, util_1.filterProps)(props, ['open']);
+const MenuContent = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (0, exports.menuContentStyle)(props), ...filterMenuContentProps(props) }));
+exports.MenuContent = MenuContent;

package/lib/Layout/HeaderMenu/MenuItems.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity';
+export interface MenuItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    open?: boolean;
+}
+export declare const menuItemsStyle: <T>(theme: Theme, props: MenuItemsProps<T>) => CSSObject;
+export declare const MenuItems: (props: MenuItemsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuItems.d.ts.map

package/lib/Layout/HeaderMenu/MenuItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuItems.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAGrC,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,SAgB1E,CAAC;AAIH,eAAO,MAAM,SAAS,UAAW,cAAc,qDAE9C,CAAC"}

package/lib/Layout/HeaderMenu/MenuItems.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItems = exports.menuItemsStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const menuItemsStyle = (theme, props) => ({
+    alignSelf: 'center',
+    display: 'flex',
+    justifySelf: 'stretch',
+    [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+        backgroundColor: theme.general.backgroundColor,
+        bottom: 0,
+        left: 0,
+        overflowY: 'auto',
+        position: 'fixed',
+        right: 0,
+        top: 0,
+        transform: props.open ? 'translateX(0)' : 'translateX(110%)',
+        transition: 'transform 0.25s ease',
+        zIndex: 1,
+    },
+});
+exports.menuItemsStyle = menuItemsStyle;
+const filterMenuItemProps = (props) => (0, utils_1.filterProps)(props, ['open']);
+const MenuItems = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => (0, exports.menuItemsStyle)(theme, props), ...filterMenuItemProps(props) }));
+exports.MenuItems = MenuItems;

package/lib/Layout/HeaderMenu/MenuLink.d.ts

@@ -0,0 +1,11 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity';
+import { LinkProps } from '../../Typography';
+export interface MenuLinkProps<T = HTMLAnchorElement> extends LinkProps<T> {
+    button?: boolean;
+}
+export declare const menuLinkStyle: <T>(theme: Theme, props: MenuLinkProps<T>) => CSSObject;
+export declare const MENU_LINK_CLASSNAME = "menu-link";
+export declare const filterMenuLinkProps: (props: MenuLinkProps) => Object;
+export declare const MenuLink: (props: MenuLinkProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuLink.d.ts.map

package/lib/Layout/HeaderMenu/MenuLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,SAAS,EAA6B,MAAM,kBAAkB,CAAC;AAGvE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAwCxE,CAAC;AAEH,eAAO,MAAM,mBAAmB,cAAc,CAAC;AAE/C,eAAO,MAAM,mBAAmB,UAAW,aAAa,WACU,CAAC;AAEnE,eAAO,MAAM,QAAQ,UAAW,aAAa,qDAM5C,CAAC"}

package/lib/Layout/HeaderMenu/MenuLink.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuLink = exports.filterMenuLinkProps = exports.MENU_LINK_CLASSNAME = exports.menuLinkStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const HeaderSubMenu_1 = require("./HeaderSubMenu");
+const Typography_1 = require("../../Typography");
+const utils_1 = require("../../utils");
+const menuLinkStyle = (theme, { bold = true, color = theme.general.color, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', button = false, ...props }) => ({
+    ...(0, Typography_1.linkStyle)(theme, { bold, color, fontSize, textTransform, ...props }),
+    [utils_1.media[utils_1.QueryKeys.DESKTOP]]: {
+        '&:first-of-type': {
+            marginLeft: 0,
+        },
+        '&:last-of-type': {
+            marginRight: 0,
+        },
+        margin: '0 26px 0 10px',
+        [`.${HeaderSubMenu_1.DESKTOP_HEADER_SUB_MENU_CLASSNAME} &`]: {
+            '&:first-of-type': {
+                marginLeft: '10px',
+            },
+            '&:last-of-type': {
+                marginRight: '26px',
+            },
+        },
+    },
+    [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+        border: 'none',
+        fontSize: '2rem !important',
+        fontWeight: 400,
+        maxWidth: '480px',
+        padding: '8px 24px',
+        textTransform: 'none',
+    },
+    border: button ? '1px solid rgb(219, 226, 231)' : undefined,
+    borderRadius: button ? '4px' : undefined,
+    padding: button ? '10px 16px' : undefined,
+});
+exports.menuLinkStyle = menuLinkStyle;
+exports.MENU_LINK_CLASSNAME = 'menu-link';
+const filterMenuLinkProps = (props) => (0, utils_1.filterProps)((0, Typography_1.filterLinkProps)(props), ['button']);
+exports.filterMenuLinkProps = filterMenuLinkProps;
+const MenuLink = (props) => ((0, jsx_runtime_1.jsx)("a", { className: exports.MENU_LINK_CLASSNAME, css: (theme) => (0, exports.menuLinkStyle)(theme, props), ...(0, exports.filterMenuLinkProps)(props) }));
+exports.MenuLink = MenuLink;

package/lib/Layout/HeaderMenu/MenuOpenButton.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity';
+export interface MenuOpenButtonProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    open?: boolean;
+    openMenuLabel?: string;
+    closeMenuLabel?: string;
+}
+export declare const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject;
+export declare const MenuOpenButton: ({ open, onClick, onKeyDown, openMenuLabel, closeMenuLabel, ...menuBtnProps }: MenuOpenButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuOpenButton.d.ts.map

package/lib/Layout/HeaderMenu/MenuOpenButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuOpenButton.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuOpenButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAIrC,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAmCpF,CAAC;AAIH,eAAO,MAAM,cAAc,iFAOxB,mBAAmB,qDAkBrB,CAAC"}

package/lib/Layout/HeaderMenu/MenuOpenButton.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuOpenButton = exports.menuOpenButtonStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_v2_1 = require("../../Identity/colors-v2/colors-v2");
+const utils_1 = require("../../utils");
+const menuOpenButtonStyle = (theme, { open }) => ({
+    display: 'block',
+    cursor: 'pointer',
+    width: 40,
+    height: 32,
+    padding: '5px 8px',
+    '&:focus-visible': {
+        background: theme.Button?.secondaryActiveBg ?? colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+        border: `1px solid ${theme.Button?.secondaryActiveBorder ?? colors_v2_1.COLOR_V2.BLUE_LIGHT_300}`,
+        borderRadius: 12,
+        boxShadow: `0 0 0 2px ${theme.general?.focusColor ?? colors_v2_1.COLOR_V2.BLUE_LIGHT_300}`,
+        outline: 'none',
+    },
+    div: {
+        backgroundColor: theme.general.color,
+        height: '2px',
+        margin: '4px',
+        transition: 'all 0.25s ease-in-out',
+        width: '16px',
+    },
+    'div:nth-of-type(1)': {
+        transform: open ? 'translateY(6px) rotate(-45deg)' : undefined,
+    },
+    'div:nth-of-type(2)': {
+        opacity: open ? 0 : undefined,
+        transform: open ? 'scale(0, 1)' : undefined,
+    },
+    'div:nth-of-type(3)': {
+        transform: open ? 'translateY(-6px) rotate(45deg)' : undefined,
+    },
+    [utils_1.media[utils_1.QueryKeys.DESKTOP]]: {
+        display: 'none',
+    },
+    zIndex: 2,
+});
+exports.menuOpenButtonStyle = menuOpenButtonStyle;
+const filterMenuOpenButtonProps = (props) => (0, utils_1.filterProps)(props, ['open']);
+const MenuOpenButton = ({ open, onClick, onKeyDown, openMenuLabel, closeMenuLabel, ...menuBtnProps }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": open, "aria-label": open ? closeMenuLabel : openMenuLabel, css: (theme) => (0, exports.menuOpenButtonStyle)(theme, menuBtnProps), onKeyDown: onKeyDown, onClick: onClick, ...filterMenuOpenButtonProps(menuBtnProps), children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
+};
+exports.MenuOpenButton = MenuOpenButton;

package/lib/Layout/HeaderMenu/MenuScrollableItems.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+export interface MenuScrollableItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    open?: boolean;
+}
+export declare const menuScrollableItemsStyle: <T>(props: MenuScrollableItemsProps<T>) => CSSObject;
+export declare const MenuScrollableItems: (props: MenuScrollableItemsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuScrollableItems.d.ts.map

package/lib/Layout/HeaderMenu/MenuScrollableItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuScrollableItems.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuScrollableItems.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACtF,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,wBAAwB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,SAShF,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,qDAElE,CAAC"}

package/lib/Layout/HeaderMenu/MenuScrollableItems.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuScrollableItems = exports.menuScrollableItemsStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const menuScrollableItemsStyle = _ => ({
+    alignItems: 'center',
+    alignSelf: 'center',
+    display: 'flex',
+    [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+        alignItems: 'center',
+        flexDirection: 'column',
+        margin: 'auto',
+    },
+});
+exports.menuScrollableItemsStyle = menuScrollableItemsStyle;
+const MenuScrollableItems = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (0, exports.menuScrollableItemsStyle)(props), ...props }));
+exports.MenuScrollableItems = MenuScrollableItems;

package/lib/Layout/HeaderMenu/MenuSubLink.d.ts

@@ -0,0 +1,8 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity';
+import { TextProps } from '../../Typography';
+type MenuSubLinkProps<T = HTMLDivElement> = TextProps<T>;
+export declare const menuSubLinkStyle: <T>(theme: Theme, props: MenuSubLinkProps<T>) => CSSObject;
+export declare const MenuSubLink: (props: MenuSubLinkProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MenuSubLink.d.ts.map

package/lib/Layout/HeaderMenu/MenuSubLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSubLink.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuSubLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAC,SAAS,EAAY,MAAM,kBAAkB,CAAC;AAGtD,KAAK,gBAAgB,CAAC,CAAC,GAAG,cAAc,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEzD,eAAO,MAAM,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,SA8B9E,CAAC;AAEH,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDAElD,CAAC"}

package/lib/Layout/HeaderMenu/MenuSubLink.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSubLink = exports.menuSubLinkStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const motions_1 = require("../../Identity/motions/motions");
+const Typography_1 = require("../../Typography");
+const utils_1 = require("../../utils");
+const menuSubLinkStyle = (theme, props) => ({
+    ...(0, Typography_1.textStyle)(theme, props),
+    '&:hover': {
+        filter: 'brightness(70%)',
+    },
+    color: theme.general.color,
+    cursor: 'pointer',
+    fontWeight: 600,
+    textDecoration: 'none',
+    transition: motions_1.defaultTransition,
+    [utils_1.media[utils_1.QueryKeys.DESKTOP]]: {
+        '&:first-of-type': {
+            marginLeft: 0,
+        },
+        '&:last-child': {
+            marginRight: 0,
+        },
+        fontSize: theme.fontSizes.extraSmall,
+        margin: '0 26px 0 10px',
+        textTransform: 'uppercase',
+    },
+    [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+        border: 'none',
+        fontSize: '2rem !important',
+        fontWeight: '400 !important',
+        maxWidth: '480px',
+        padding: '8px 24px',
+        textTransform: 'none',
+    },
+});
+exports.menuSubLinkStyle = menuSubLinkStyle;
+const MenuSubLink = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => (0, exports.menuSubLinkStyle)(theme, props), ...props }));
+exports.MenuSubLink = MenuSubLink;

package/lib/Layout/HeaderMenu/index.d.ts

@@ -0,0 +1,9 @@
+export * from './HeaderMenu';
+export * from './HeaderSubMenu';
+export * from './MenuContent';
+export * from './MenuItems';
+export * from './MenuLink';
+export * from './MenuOpenButton';
+export * from './MenuScrollableItems';
+export * from './MenuSubLink';
+//# sourceMappingURL=index.d.ts.map

package/lib/Layout/HeaderMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/index.ts"],"names":[],"mappings":"AAmBA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}

package/lib/Layout/HeaderMenu/index.js

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HeaderMenu"), exports);
+__exportStar(require("./HeaderSubMenu"), exports);
+__exportStar(require("./MenuContent"), exports);
+__exportStar(require("./MenuItems"), exports);
+__exportStar(require("./MenuLink"), exports);
+__exportStar(require("./MenuOpenButton"), exports);
+__exportStar(require("./MenuScrollableItems"), exports);
+__exportStar(require("./MenuSubLink"), exports);