@wireapp/react-ui-kit 8.17.10 → 9.0.1

package/lib/Layout/FlexBox.js

@@ -0,0 +1,40 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2017 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexBox = exports.filterFlexBoxProps = exports.flexBoxStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = __importDefault(require("react"));
+const util_1 = require("../util");
+const flexBoxStyle = ({ align = 'flex-start', column = false, justify = 'flex-start', flexWrap = 'nowrap', }) => ({
+    alignItems: align,
+    display: 'flex',
+    flexDirection: column ? 'column' : 'row',
+    flexWrap: flexWrap,
+    justifyContent: justify,
+});
+exports.flexBoxStyle = flexBoxStyle;
+const filterFlexBoxProps = (props) => (0, util_1.filterProps)(props, ['align', 'column', 'justify', 'flexWrap']);
+exports.filterFlexBoxProps = filterFlexBoxProps;
+exports.FlexBox = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)("div", Object.assign({ ref: ref, css: (0, exports.flexBoxStyle)(props) }, (0, exports.filterFlexBoxProps)(props)))));
+//# sourceMappingURL=FlexBox.js.map

package/lib/Layout/FlexBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexBox.js","sourceRoot":"","sources":["../../src/Layout/FlexBox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,kDAA0B;AAE1B,kCAAoC;AAS7B,MAAM,YAAY,GAA6C,CAAC,EACrE,KAAK,GAAG,YAAY,EACpB,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,YAAY,EACtB,QAAQ,GAAG,QAAQ,GACpB,EAAE,EAAE,CAAC,CAAC;IACL,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;IACxC,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,OAAO;CACxB,CAAC,CAAC;AAXU,QAAA,YAAY,gBAWtB;AAEI,MAAM,kBAAkB,GAAG,CAAC,KAAmB,EAAE,EAAE,CACxD,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;AADpD,QAAA,kBAAkB,sBACkC;AAEpD,QAAA,OAAO,GAA2B,eAAK,CAAC,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5G,wCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAA,oBAAY,EAAC,KAAK,CAAC,IAAM,IAAA,0BAAkB,EAAC,KAAK,CAAC,EAAI,CAC3E,CAAC,CAAC"}

package/lib/Layout/Footer.js

@@ -0,0 +1,26 @@
+"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.Footer = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Footer = (props) => (0, react_1.jsx)("footer", Object.assign({}, props));
+exports.Footer = Footer;
+//# sourceMappingURL=Footer.js.map

package/lib/Layout/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../src/Layout/Footer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAAmC;AAK5B,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,6CAAY,KAAK,EAAI,CAAC;AAAvD,QAAA,MAAM,UAAiD"}

package/lib/Layout/Header.js

@@ -0,0 +1,33 @@
+"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.Header = exports.headerStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const headerStyle = props => ({
+    alignItems: 'center',
+    display: 'flex',
+    height: '64px',
+    justifyContent: 'space-between',
+});
+exports.headerStyle = headerStyle;
+const Header = (props) => (0, react_1.jsx)("header", Object.assign({ css: (0, exports.headerStyle)(props) }, props));
+exports.Header = Header;
+//# sourceMappingURL=Header.js.map

package/lib/Layout/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Layout/Header.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAKvC,MAAM,WAAW,GAA4C,KAAK,CAAC,EAAE,CAAC,CAAC;IAC5E,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;IACd,cAAc,EAAE,eAAe;CAChC,CAAC,CAAC;AALU,QAAA,WAAW,eAKrB;AAEI,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,2CAAQ,GAAG,EAAE,IAAA,mBAAW,EAAC,KAAK,CAAC,IAAM,KAAK,EAAI,CAAC;AAAhF,QAAA,MAAM,UAA0E"}

package/lib/Layout/MatchMedia.js

@@ -0,0 +1,85 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+/** @jsx jsx */
+/* @jsxFrag React.Fragment */
+const react_1 = require("@emotion/react");
+const react_2 = __importStar(require("react"));
+const mediaQueries_1 = require("../mediaQueries");
+const useMatchMedia = (query) => {
+    const matchMedia = (0, react_2.useMemo)(() => window.matchMedia(`(${query})`), [query]);
+    const [isMatching, setIsMatching] = (0, react_2.useState)(matchMedia.matches);
+    const updateMatching = (event) => {
+        setIsMatching(event.matches);
+    };
+    (0, react_2.useEffect)(() => {
+        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)(mediaQueries_1.QUERY[query] || query);
+    const isMatching = not ? !matchQuery : matchQuery;
+    return isMatching ? (0, react_1.jsx)(react_2.default.Fragment, null, children) : null;
+};
+exports.MatchMedia = MatchMedia;
+const IsDesktop = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.DESKTOP }, props));
+exports.IsDesktop = IsDesktop;
+const IsDesktopXL = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.DESKTOP_XL }, props));
+exports.IsDesktopXL = IsDesktopXL;
+const IsMobile = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE }, props));
+exports.IsMobile = IsMobile;
+const IsMobileDown = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE_DOWN }, props));
+exports.IsMobileDown = IsMobileDown;
+const IsMobileUp = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE_UP }, props));
+exports.IsMobileUp = IsMobileUp;
+const IsTablet = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET }, props));
+exports.IsTablet = IsTablet;
+const IsTabletDown = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET_DOWN }, props));
+exports.IsTabletDown = IsTabletDown;
+const IsTabletUp = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET_UP }, props));
+exports.IsTabletUp = IsTabletUp;
+//# sourceMappingURL=MatchMedia.js.map

package/lib/Layout/MatchMedia.js.map

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

package/lib/Layout/Spacer.js

@@ -0,0 +1,28 @@
+"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.Spacer = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+function Spacer({ size = 8, vertical = false }) {
+    return (0, react_1.jsx)("div", { style: vertical ? { display: 'inline-block', width: size } : { height: size } });
+}
+exports.Spacer = Spacer;
+//# sourceMappingURL=Spacer.js.map

package/lib/Layout/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../src/Layout/Spacer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAAmC;AAQnC,SAAgB,MAAM,CAAC,EAAC,IAAI,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAc;IAC9D,OAAO,0BAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,GAAI,CAAC;AAC5F,CAAC;AAFD,wBAEC"}

package/lib/Layout/StyledApp.js

@@ -0,0 +1,51 @@
+"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.StyledApp = void 0;
+const react_1 = require("@emotion/react");
+const GlobalStyle_1 = require("../GlobalStyle");
+const util_1 = require("../util");
+const Theme_1 = require("./Theme");
+const styledAppContainerStyle = (theme, { backgroundColor = theme.general.backgroundColor }) => ({
+    background: backgroundColor,
+    transition: 'background 0.15s',
+});
+const filterStyledAppProps = (props) => (0, util_1.filterProps)(props, ['backgroundColor', 'themeId', 'theme']);
+const StyledAppContainer = (props) => ((0, react_1.jsx)("div", Object.assign({ css: (theme) => styledAppContainerStyle(theme, props) }, filterStyledAppProps(props))));
+const StyledApp = (_a) => {
+    var { themeId = Theme_1.THEME_ID.LIGHT, theme, children } = _a, props = __rest(_a, ["themeId", "theme", "children"]);
+    return ((0, react_1.jsx)(Theme_1.ThemeProvider, { theme: theme ? theme : Theme_1.themes[themeId] },
+        (0, react_1.jsx)(StyledAppContainer, Object.assign({}, props),
+            (0, react_1.jsx)(GlobalStyle_1.GlobalStyle, null),
+            children)));
+};
+exports.StyledApp = StyledApp;
+//# sourceMappingURL=StyledApp.js.map

package/lib/Layout/StyledApp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledApp.js","sourceRoot":"","sources":["../../src/Layout/StyledApp.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAIH,0CAA8C;AAE9C,gDAA2C;AAC3C,kCAAoC;AACpC,mCAA+D;AAkB/D,MAAM,uBAAuB,GAGZ,CAAC,KAAK,EAAE,EAAC,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,EAAC,EAAE,EAAE,CAAC,CAAC;IAC9E,UAAU,EAAE,eAAe;IAC3B,UAAU,EAAE,kBAAkB;CAC/B,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAC9D,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,iBAAiB,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAE9D,MAAM,kBAAkB,GAAG,CAAC,KAA6D,EAAE,EAAE,CAAC,CAC5F,wCAAK,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAM,oBAAoB,CAAC,KAAK,CAAC,EAAI,CACvG,CAAC;AAEK,MAAM,SAAS,GAA6B,CAAC,EAAqD,EAAE,EAAE;QAAzD,EAAC,OAAO,GAAG,gBAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,OAAW,EAAN,KAAK,cAApD,gCAAqD,CAAD;IAAM,OAAA,CAC5G,iBAAC,qBAAa,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAM,CAAC,OAAO,CAAC;QACnD,iBAAC,kBAAkB,oBAAK,KAAK;YAC3B,iBAAC,yBAAW,OAAG;YACd,QAAQ,CACU,CACP,CACjB,CAAA;CAAA,CAAC;AAPW,QAAA,SAAS,aAOpB"}

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"}