@wireapp/react-ui-kit 9.59.1 → 9.59.2

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.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: 'end',
+    [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,9 @@
+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;
+}
+export declare const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject;
+export declare const MenuOpenButton: (props: 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;AAGrC,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAuBpF,CAAC;AAIH,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAMxD,CAAC"}

package/lib/Layout/HeaderMenu/MenuOpenButton.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuOpenButton = exports.menuOpenButtonStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const menuOpenButtonStyle = (theme, { open }) => ({
+    display: 'block',
+    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 = (props) => ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, exports.menuOpenButtonStyle)(theme, props), ...filterMenuOpenButtonProps(props), 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.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.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/MatchMedia/MatchMedia.d.ts

@@ -0,0 +1,21 @@
+import { ReactFragment } from 'react';
+import * as React from 'react';
+import { QueryKeys } from '../../utils';
+type Query = string | QueryKeys;
+export interface MatchMediaProps extends React.HTMLProps<ReactFragment> {
+    not?: boolean;
+    query: Query;
+}
+export declare const useMatchMedia: (query: Query, customWindowObj?: Window) => boolean;
+export declare const MatchMedia: React.FC<MatchMediaProps>;
+export type NamedMatchMediaProps = Omit<MatchMediaProps, 'query'>;
+export declare const IsDesktop: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsDesktopXL: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsMobile: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsMobileDown: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsMobileUp: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsTablet: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsTabletDown: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IsTabletUp: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MatchMedia.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MatchMedia.d.ts","sourceRoot":"","sources":["../../../src/Layout/MatchMedia/MatchMedia.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,aAAa,EAA+B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,SAAS,EAAC,MAAM,aAAa,CAAC;AAE7C,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACrE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,aAAa,UAAW,KAAK,oBAAoB,MAAM,YAkBnE,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,SAAS,UAAW,oBAAoB,qDAAwD,CAAC;AAC9G,eAAO,MAAM,WAAW,UAAW,oBAAoB,qDAA2D,CAAC;AACnH,eAAO,MAAM,QAAQ,UAAW,oBAAoB,qDAAuD,CAAC;AAC5G,eAAO,MAAM,YAAY,UAAW,oBAAoB,qDAA4D,CAAC;AACrH,eAAO,MAAM,UAAU,UAAW,oBAAoB,qDAA0D,CAAC;AACjH,eAAO,MAAM,QAAQ,UAAW,oBAAoB,qDAAuD,CAAC;AAC5G,eAAO,MAAM,YAAY,UAAW,oBAAoB,qDAA4D,CAAC;AACrH,eAAO,MAAM,UAAU,UAAW,oBAAoB,qDAA0D,CAAC"}

package/lib/Layout/MatchMedia/MatchMedia.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IsTabletUp = exports.IsTabletDown = exports.IsTablet = exports.IsMobileUp = exports.IsMobileDown = exports.IsMobile = exports.IsDesktopXL = exports.IsDesktop = exports.MatchMedia = exports.useMatchMedia = 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 utils_1 = require("../../utils");
+const useMatchMedia = (query, customWindowObj) => {
+    const windowObj = customWindowObj || window;
+    const matchMedia = (0, react_1.useMemo)(() => windowObj.matchMedia(`(${query})`), [query, windowObj]);
+    const [isMatching, setIsMatching] = (0, react_1.useState)(matchMedia.matches);
+    const updateMatching = (event) => {
+        setIsMatching(event.matches);
+    };
+    (0, react_1.useEffect)(() => {
+        // update isMatching when matchMedia (or customWindowObj) change
+        updateMatching(matchMedia);
+        matchMedia.addEventListener('change', updateMatching);
+        return () => matchMedia.removeEventListener('change', updateMatching);
+    }, [matchMedia]);
+    return isMatching;
+};
+exports.useMatchMedia = useMatchMedia;
+const MatchMedia = ({ query, children, not }) => {
+    const matchQuery = (0, exports.useMatchMedia)(utils_1.QUERY[query] || query);
+    const isMatching = not ? !matchQuery : matchQuery;
+    return isMatching ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;
+};
+exports.MatchMedia = MatchMedia;
+const IsDesktop = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.DESKTOP, ...props });
+exports.IsDesktop = IsDesktop;
+const IsDesktopXL = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.DESKTOP_XL, ...props });
+exports.IsDesktopXL = IsDesktopXL;
+const IsMobile = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.MOBILE, ...props });
+exports.IsMobile = IsMobile;
+const IsMobileDown = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.MOBILE_DOWN, ...props });
+exports.IsMobileDown = IsMobileDown;
+const IsMobileUp = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.MOBILE_UP, ...props });
+exports.IsMobileUp = IsMobileUp;
+const IsTablet = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.TABLET, ...props });
+exports.IsTablet = IsTablet;
+const IsTabletDown = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.TABLET_DOWN, ...props });
+exports.IsTabletDown = IsTabletDown;
+const IsTabletUp = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: utils_1.QueryKeys.TABLET_UP, ...props });
+exports.IsTabletUp = IsTabletUp;

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

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

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

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

package/lib/Layout/MatchMedia/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("./MatchMedia"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/Layout/Spacer/Spacer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EAAC,IAAQ,EAAE,QAAgB,EAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAEjF"}

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

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

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

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

package/lib/Layout/Spacer/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("./Spacer"), exports);

package/lib/Layout/StyledApp/StyledApp.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { THEME_ID, Theme } from '../../Identity';
+type StyledAppContainerProps = {
+    themeId: THEME_ID;
+    theme?: never;
+} | {
+    theme: Theme;
+    themeId?: never;
+};
+type BackgroundColorProps = {
+    backgroundColor?: string;
+};
+export type StyledAppProps = React.HTMLProps<HTMLDivElement> & StyledAppContainerProps & BackgroundColorProps;
+export declare const StyledApp: React.FC<StyledAppProps>;
+export {};
+//# sourceMappingURL=StyledApp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledApp.d.ts","sourceRoot":"","sources":["../../../src/Layout/StyledApp/StyledApp.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAqC,MAAM,gBAAgB,CAAC;AAGnF,KAAK,uBAAuB,GACxB;IACE,OAAO,EAAE,QAAQ,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEN,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;AAiB9G,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAO9C,CAAC"}

package/lib/Layout/StyledApp/StyledApp.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledApp = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const utils_1 = require("../../utils");
+const styledAppContainerStyle = (theme, { backgroundColor = theme.general.backgroundColor }) => ({
+    background: backgroundColor,
+    transition: 'background 0.15s',
+});
+const filterStyledAppProps = (props) => (0, utils_1.filterProps)(props, ['backgroundColor', 'themeId', 'theme']);
+const StyledAppContainer = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => styledAppContainerStyle(theme, props), ...filterStyledAppProps(props) }));
+const StyledApp = ({ themeId = Identity_1.THEME_ID.LIGHT, theme, children, ...props }) => ((0, jsx_runtime_1.jsx)(Identity_1.ThemeProvider, { theme: theme ? theme : Identity_1.themes[themeId], children: (0, jsx_runtime_1.jsxs)(StyledAppContainer, { ...props, children: [(0, jsx_runtime_1.jsx)(Identity_1.GlobalStyle, {}), children] }) }));
+exports.StyledApp = StyledApp;

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

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

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

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