@wireapp/react-ui-kit 9.0.0 → 9.0.1

package/lib/Layout/Theme.js

@@ -0,0 +1,231 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2019 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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.themes = exports.THEME_ID = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const colors_1 = require("../Identity/colors");
+const colors_v2_1 = require("../Identity/colors-v2");
+var THEME_ID;
+(function (THEME_ID) {
+    THEME_ID["DARK"] = "THEME_DARK";
+    THEME_ID["LIGHT"] = "THEME_LIGHT";
+    THEME_ID["DEFAULT"] = "THEME_DEFAULT";
+})(THEME_ID = exports.THEME_ID || (exports.THEME_ID = {}));
+exports.themes = {
+    [THEME_ID.DEFAULT]: {
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: 'var(--checkbox-background)',
+            border: 'var(--checkbox-border)',
+            borderFocused: 'var(--accent-color)',
+            disableBgColor: 'var(--checkbox-background-disabled)',
+            disableBorderColor: 'var(--checkbox-border-disabled)',
+            disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',
+            invalidBorderColor: 'var(--danger-color)',
+        },
+        IconButton: {
+            activePrimaryBgColor: 'var(--accent-color-highlight)',
+            focusBorderColor: 'var(--accent-color-border)',
+            hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',
+            primaryActiveFillColor: 'var(--icon-primary-active-fill)',
+            primaryBgColor: 'var(--icon-button-primary-enabled-bg)',
+            primaryBorderColor: 'var(--icon-button-primary-border)',
+            primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',
+            primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',
+            primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',
+            secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',
+        },
+        Input: {
+            backgroundColor: 'var(--text-input-background)',
+            backgroundColorDisabled: 'var(--text-input-disabled)',
+            labelColor: 'var(--text-input-label)',
+            placeholderColor: 'var(--text-input-placeholder)',
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            borderColor: 'var(--text-input-border)',
+            contrastTextColor: 'var(--text-input-background)',
+            disabledColor: 'var(--text-input-placeholder)',
+            focusedDescriptionColor: 'var(--select-focused-description)',
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-hover)',
+        },
+        general: {
+            backgroundColor: 'var(--app-bg)',
+            color: 'var(--main-color)',
+            dangerColor: 'var(--danger-color)',
+            primaryColor: 'var(--accent-color)',
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+    [THEME_ID.LIGHT]: {
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        IconButton: {
+            activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+            focusBorderColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+            hoverPrimaryBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            primaryActiveFillColor: colors_v2_1.COLOR_V2.BLUE,
+            primaryBgColor: colors_v2_1.COLOR_V2.WHITE,
+            primaryBorderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            primaryDisabledBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            primaryDisabledBorderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_50,
+            secondaryActiveBorderColor: 'transparent',
+        },
+        Input: {
+            backgroundColor: colors_1.COLOR.WHITE,
+            backgroundColorDisabled: colors_v2_1.COLOR_V2.GRAY_20,
+            placeholderColor: colors_1.COLOR.GRAY_DARKEN_24,
+            labelColor: colors_v2_1.COLOR_V2.GRAY_80,
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        general: {
+            backgroundColor: colors_v2_1.COLOR_V2.GRAY_20,
+            color: colors_1.COLOR.TEXT,
+            primaryColor: colors_v2_1.COLOR_V2.BLUE,
+            dangerColor: colors_v2_1.COLOR_V2.RED,
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+        Select: {
+            disabledColor: colors_v2_1.COLOR_V2.GRAY_70,
+            contrastTextColor: colors_1.COLOR.WHITE,
+            borderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            focusedDescriptionColor: colors_v2_1.COLOR_V2.WHITE,
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-hover)',
+        },
+        Checkbox: {
+            background: colors_v2_1.COLOR_V2.GRAY_20,
+            border: colors_v2_1.COLOR_V2.GRAY_80,
+            borderFocused: colors_v2_1.BASE_LIGHT_COLOR.BLUE,
+            disableBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            disableBorderColor: colors_v2_1.COLOR_V2.GRAY_60,
+            disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            invalidBorderColor: colors_v2_1.BASE_LIGHT_COLOR.RED,
+        },
+    },
+    [THEME_ID.DARK]: {
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        IconButton: {
+            activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
+            focusBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_600,
+            hoverPrimaryBgColor: colors_v2_1.COLOR_V2.GRAY_80,
+            primaryActiveFillColor: colors_1.COLOR.WHITE,
+            primaryBgColor: colors_v2_1.COLOR_V2.GRAY_90,
+            primaryBorderColor: colors_v2_1.COLOR_V2.GRAY_100,
+            primaryDisabledBgColor: colors_v2_1.COLOR_V2.GRAY_95,
+            primaryDisabledBorderColor: colors_v2_1.COLOR_V2.GRAY_90,
+            primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
+            secondaryActiveBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
+        },
+        Input: {
+            backgroundColor: colors_1.COLOR.BLACK_LIGHTEN_24,
+            backgroundColorDisabled: colors_1.COLOR.GRAY_100,
+            placeholderColor: colors_1.COLOR.GRAY_LIGHTEN_88,
+            labelColor: colors_v2_1.COLOR_V2.GRAY_40,
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        general: {
+            backgroundColor: colors_1.COLOR.BLACK,
+            color: colors_1.COLOR.WHITE,
+            primaryColor: colors_v2_1.COLOR_V2.BLUE,
+            dangerColor: colors_v2_1.COLOR_V2.RED,
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+        Select: {
+            disabledColor: colors_v2_1.COLOR_V2.GRAY_60,
+            contrastTextColor: colors_1.COLOR.BLACK,
+            borderColor: colors_v2_1.COLOR_V2.GRAY_90,
+            focusedDescriptionColor: colors_v2_1.COLOR_V2.GRAY_40,
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-active)',
+        },
+        Checkbox: {
+            background: colors_v2_1.COLOR_V2.GRAY_20,
+            border: colors_v2_1.COLOR_V2.GRAY_60,
+            borderFocused: colors_v2_1.BASE_DARK_COLOR.BLUE,
+            disableBgColor: colors_v2_1.COLOR_V2.GRAY_10,
+            disableBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
+            disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_60,
+            invalidBorderColor: colors_v2_1.BASE_DARK_COLOR.RED,
+        },
+    },
+};
+const ThemeProvider = (props) => (0, react_1.jsx)(react_1.ThemeProvider, Object.assign({}, props, { theme: props.theme }));
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=Theme.js.map

package/lib/Layout/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/Layout/Theme.tsx"],"names":[],"mappings":"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"}

package/lib/Layout/headerMenu/HeaderMenu.js

@@ -0,0 +1,59 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderMenu = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const MenuContent_1 = require("./MenuContent");
+const MenuItems_1 = require("./MenuItems");
+const MenuOpenButton_1 = require("./MenuOpenButton");
+const MenuScrollableItems_1 = require("./MenuScrollableItems");
+const HeaderMenu = (_a) => {
+    var { children, logoElement = null, centerElement = null } = _a, props = __rest(_a, ["children", "logoElement", "centerElement"]);
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const toggleMenu = () => {
+        if (typeof window !== 'undefined') {
+            window.scrollTo(0, 0);
+            setIsOpen(current => !current);
+        }
+    };
+    const closeMenu = () => setIsOpen(false);
+    return ((0, react_1.jsx)("div", Object.assign({ css: { height: '64px' } }, props, { "data-uie-name": "element-header-menu" }),
+        (0, react_1.jsx)(MenuContent_1.MenuContent, { open: isOpen },
+            (0, react_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu }, logoElement),
+            (0, react_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex' } }, centerElement),
+            (0, react_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, open: isOpen, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }),
+            (0, react_1.jsx)(MenuItems_1.MenuItems, { onClick: closeMenu, open: isOpen },
+                (0, react_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, null, children)))));
+};
+exports.HeaderMenu = HeaderMenu;
+//# sourceMappingURL=HeaderMenu.js.map

package/lib/Layout/headerMenu/HeaderMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderMenu.js","sourceRoot":"","sources":["../../../src/Layout/headerMenu/HeaderMenu.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AAEnC,iCAA+B;AAE/B,+CAA0C;AAC1C,2CAAsC;AACtC,qDAAgD;AAChD,+DAA0D;AAOnD,MAAM,UAAU,GAAG,CAAC,EAA+E,EAAE,EAAE;QAAnF,EAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAE,aAAa,GAAG,IAAI,OAA4B,EAAvB,KAAK,cAA7D,4CAA8D,CAAD;IACtF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAEzC,OAAO,CACL,wCAAK,GAAG,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,IAAM,KAAK,qBAAgB,qBAAqB;QACxE,iBAAC,yBAAW,IAAC,IAAI,EAAE,MAAM;YACvB,0BAAK,GAAG,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAC,EAAE,OAAO,EAAE,SAAS,IAC5E,WAAW,CACR;YACN,0BAAK,GAAG,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAC,IAAG,aAAa,CAAO;YACvE,iBAAC,+BAAc,IACb,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAC,mBACjF,uBAAuB,GACrC;YACF,iBAAC,qBAAS,IAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM;gBACzC,iBAAC,yCAAmB,QAAE,QAAQ,CAAuB,CAC3C,CACA,CACV,CACP,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,UAAU,cA+BrB"}

package/lib/Layout/headerMenu/HeaderSubMenu.js

@@ -0,0 +1,97 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSubMenu = exports.MobileStyledHeaderSubMenu = exports.DesktopStyledHeaderSubMenu = exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../../Identity");
+const motions_1 = require("../../Identity/motions");
+const mediaQueries_1 = require("../../mediaQueries");
+const MenuSubLink_1 = require("./MenuSubLink");
+const MenuLink_1 = require("./MenuLink");
+const desktopStyledHeaderSubMenuStyle = (theme, props) => ({
+    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, react_1.jsx)("div", Object.assign({ className: exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME, css: (theme) => desktopStyledHeaderSubMenuStyle(theme, props) }, props)));
+exports.DesktopStyledHeaderSubMenu = DesktopStyledHeaderSubMenu;
+const mobileStyledHeaderSubMenuStyle = props => ({
+    '*': {
+        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, react_1.jsx)("span", Object.assign({ css: mobileStyledHeaderSubMenuStyle(props) }, props)));
+exports.MobileStyledHeaderSubMenu = MobileStyledHeaderSubMenu;
+const HeaderSubMenu = (_a) => {
+    var { caption, isOpen, children } = _a, props = __rest(_a, ["caption", "isOpen", "children"]);
+    const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${mediaQueries_1.QUERY.desktop})`).matches;
+    return ((0, react_1.jsx)(MenuSubLink_1.MenuSubLink, Object.assign({}, props, { style: { cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center' } }),
+        (0, react_1.jsx)("span", null, caption),
+        (0, react_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 },
+            (0, react_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 },
+                (0, react_1.jsx)(exports.DesktopStyledHeaderSubMenu, null, children))),
+        (0, react_1.jsx)(Identity_1.Opacity, { in: isOpen && !isDesktop, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: false, style: { display: 'block', position: 'relative' } },
+            (0, react_1.jsx)(Identity_1.Slide, { in: isOpen && !isDesktop, startValue: '-56%', endValue: '0', timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true },
+                (0, react_1.jsx)(exports.MobileStyledHeaderSubMenu, null, children)))));
+};
+exports.HeaderSubMenu = HeaderSubMenu;
+//# sourceMappingURL=HeaderSubMenu.js.map

package/lib/Layout/headerMenu/HeaderSubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubMenu.js","sourceRoot":"","sources":["../../../src/Layout/headerMenu/HeaderSubMenu.tsx"],"names":[],"mappings":"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"}

package/lib/Layout/headerMenu/MenuContent.js

@@ -0,0 +1,31 @@
+"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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuContent = exports.menuContentStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const util_1 = require("../../util");
+const Content_1 = require("../Content");
+const menuContentStyle = props => (Object.assign(Object.assign({}, (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, react_1.jsx)("div", Object.assign({ css: (0, exports.menuContentStyle)(props) }, filterMenuContentProps(props))));
+exports.MenuContent = MenuContent;
+//# sourceMappingURL=MenuContent.js.map

package/lib/Layout/headerMenu/MenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/Layout/headerMenu/MenuContent.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAG9C,qCAAuC;AACvC,wCAAwC;AAMjC,MAAM,gBAAgB,GAAiD,KAAK,CAAC,EAAE,CAAC,iCAClF,IAAA,sBAAY,EAAC,KAAK,CAAC,KACtB,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,cAAc,EACnC,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,eAAe,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAChC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IACtC,CAAC;AAZU,QAAA,gBAAgB,oBAY1B;AAEH,MAAM,sBAAsB,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAElF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CACtD,wCAAK,GAAG,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC,IAAM,sBAAsB,CAAC,KAAK,CAAC,EAAI,CACzE,CAAC;AAFW,QAAA,WAAW,eAEtB"}

package/lib/Layout/headerMenu/MenuItems.js

@@ -0,0 +1,46 @@
+"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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItems = exports.menuItemsStyle = void 0;
+const react_1 = require("@emotion/react");
+const mediaQueries_1 = require("../../mediaQueries");
+const util_1 = require("../../util");
+const menuItemsStyle = (theme, props) => ({
+    alignSelf: 'center',
+    display: 'flex',
+    justifySelf: 'end',
+    [mediaQueries_1.media[mediaQueries_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, util_1.filterProps)(props, ['open']);
+const MenuItems = (props) => ((0, react_1.jsx)("div", Object.assign({ css: (theme) => (0, exports.menuItemsStyle)(theme, props) }, filterMenuItemProps(props))));
+exports.MenuItems = MenuItems;
+//# sourceMappingURL=MenuItems.js.map

package/lib/Layout/headerMenu/MenuItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../src/Layout/headerMenu/MenuItems.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAIH,0CAA8C;AAE9C,qDAAoD;AACpD,qCAAuC;AAOhC,MAAM,cAAc,GAA6D,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IACzG,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,MAAM;IACf,WAAW,EAAE,KAAK;IAClB,CAAC,oBAAK,CAAC,wBAAS,CAAC,WAAW,CAAC,CAAC,EAAE;QAC9B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;QAC9C,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB;QAC5D,UAAU,EAAE,sBAAsB;QAClC,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC;AAhBU,QAAA,cAAc,kBAgBxB;AAEH,MAAM,mBAAmB,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7E,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,CAClD,wCAAK,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,sBAAc,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,mBAAmB,CAAC,KAAK,CAAC,EAAI,CAC7F,CAAC;AAFW,QAAA,SAAS,aAEpB"}

package/lib/Layout/headerMenu/MenuLink.js

@@ -0,0 +1,72 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuLink = exports.filterMenuLinkProps = exports.MENU_LINK_CLASSNAME = exports.menuLinkStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const mediaQueries_1 = require("../../mediaQueries");
+const Text_1 = require("../../Text");
+const util_1 = require("../../util");
+const HeaderSubMenu_1 = require("./HeaderSubMenu");
+const menuLinkStyle = (theme, _a) => {
+    var { bold = true, color = theme.general.color, fontSize = '11px', textTransform = 'uppercase', button = false } = _a, props = __rest(_a, ["bold", "color", "fontSize", "textTransform", "button"]);
+    return (Object.assign(Object.assign({}, (0, Text_1.linkStyle)(theme, Object.assign({ bold, color, fontSize, textTransform }, props))), { [mediaQueries_1.media[mediaQueries_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',
+                },
+            },
+        }, [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
+            border: 'none',
+            fontSize: '32px !important',
+            fontWeight: 300,
+            maxWidth: '480px',
+            padding: '8px 24px',
+            textTransform: 'none !important',
+        }, 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, util_1.filterProps)((0, Text_1.filterLinkProps)(props), ['button']);
+exports.filterMenuLinkProps = filterMenuLinkProps;
+const MenuLink = (props) => ((0, react_1.jsx)("a", Object.assign({ className: exports.MENU_LINK_CLASSNAME, css: (theme) => (0, exports.menuLinkStyle)(theme, props) }, (0, exports.filterMenuLinkProps)(props))));
+exports.MenuLink = MenuLink;
+//# sourceMappingURL=MenuLink.js.map

package/lib/Layout/headerMenu/MenuLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink.js","sourceRoot":"","sources":["../../../src/Layout/headerMenu/MenuLink.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,qDAAoD;AACpD,qCAAiE;AACjE,qCAAuC;AAEvC,mDAAkE;AAM3D,MAAM,aAAa,GAA4D,CACpF,KAAK,EACL,EAAoH,EACpH,EAAE;QADF,EAAC,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE,aAAa,GAAG,WAAW,EAAE,MAAM,GAAG,KAAK,OAAW,EAAN,KAAK,cAAnH,wDAAoH,CAAD;IAChH,OAAA,iCACA,IAAA,gBAAS,EAAC,KAAK,kBAAG,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,IAAK,KAAK,EAAE,KACrE,CAAC,oBAAK,CAAC,wBAAS,CAAC,OAAO,CAAC,CAAC,EAAE;YAC1B,iBAAiB,EAAE;gBACjB,UAAU,EAAE,CAAC;aACd;YACD,gBAAgB,EAAE;gBAChB,WAAW,EAAE,CAAC;aACf;YACD,MAAM,EAAE,eAAe;YACvB,CAAC,IAAI,iDAAiC,IAAI,CAAC,EAAE;gBAC3C,iBAAiB,EAAE;oBACjB,UAAU,EAAE,MAAM;iBACnB;gBACD,gBAAgB,EAAE;oBAChB,WAAW,EAAE,MAAM;iBACpB;aACF;SACF,EACD,CAAC,oBAAK,CAAC,wBAAS,CAAC,WAAW,CAAC,CAAC,EAAE;YAC9B,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,iBAAiB;YAC3B,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,OAAO;YACjB,OAAO,EAAE,UAAU;YACnB,aAAa,EAAE,iBAAiB;SACjC,EACD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,SAAS,EAC3D,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IACzC,CAAA;CAAA,CAAC;AAjCU,QAAA,aAAa,iBAiCvB;AAEU,QAAA,mBAAmB,GAAG,WAAW,CAAC;AAExC,MAAM,mBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE,CAC1D,IAAA,kBAAW,EAAC,IAAA,sBAAe,EAAC,KAAK,CAAkB,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AADtD,QAAA,mBAAmB,uBACmC;AAE5D,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CAChD,sCACE,SAAS,EAAE,2BAAmB,EAC9B,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,qBAAa,EAAC,KAAK,EAAE,KAAK,CAAC,IAC9C,IAAA,2BAAmB,EAAC,KAAK,CAAC,EAC9B,CACH,CAAC;AANW,QAAA,QAAQ,YAMnB"}

package/lib/Layout/headerMenu/MenuOpenButton.js

@@ -0,0 +1,57 @@
+"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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuOpenButton = exports.menuOpenButtonStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const mediaQueries_1 = require("../../mediaQueries");
+const util_1 = require("../../util");
+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,
+    },
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.DESKTOP]]: {
+        display: 'none',
+    },
+    zIndex: 2,
+});
+exports.menuOpenButtonStyle = menuOpenButtonStyle;
+const filterMenuOpenButtonProps = (props) => (0, util_1.filterProps)(props, ['open']);
+const MenuOpenButton = (props) => ((0, react_1.jsx)("div", Object.assign({ css: (theme) => (0, exports.menuOpenButtonStyle)(theme, props) }, filterMenuOpenButtonProps(props)),
+    (0, react_1.jsx)("div", null),
+    (0, react_1.jsx)("div", null),
+    (0, react_1.jsx)("div", null)));
+exports.MenuOpenButton = MenuOpenButton;
+//# sourceMappingURL=MenuOpenButton.js.map

package/lib/Layout/headerMenu/MenuOpenButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuOpenButton.js","sourceRoot":"","sources":["../../../src/Layout/headerMenu/MenuOpenButton.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAG9C,qDAAoD;AACpD,qCAAuC;AAOhC,MAAM,mBAAmB,GAAkE,CAAC,KAAK,EAAE,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC;IACpH,OAAO,EAAE,OAAO;IAChB,GAAG,EAAE;QACH,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QACpC,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,uBAAuB;QACnC,KAAK,EAAE,MAAM;KACd;IACD,oBAAoB,EAAE;QACpB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS;KAC/D;IACD,oBAAoB,EAAE;QACpB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;KAC5C;IACD,oBAAoB,EAAE;QACpB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS;KAC/D;IACD,CAAC,oBAAK,CAAC,wBAAS,CAAC,OAAO,CAAC,CAAC,EAAE;QAC1B,OAAO,EAAE,MAAM;KAChB;IACD,MAAM,EAAE,CAAC;CACV,CAAC,CAAC;AAvBU,QAAA,mBAAmB,uBAuB7B;AAEH,MAAM,yBAAyB,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAExF,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC5D,wCAAK,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,2BAAmB,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,yBAAyB,CAAC,KAAK,CAAC;IACjG,6BAAO;IACP,6BAAO;IACP,6BAAO,CACH,CACP,CAAC;AANW,QAAA,cAAc,kBAMzB"}