@wireapp/react-ui-kit 8.14.3 → 8.14.6

package/src/Layout/MatchMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MatchMedia.tsx"],"names":["useMatchMedia","query","matchMedia","window","matches","isMatching","setIsMatching","updateMatching","event","addEventListener","removeEventListener","MatchMedia","children","not","matchQuery","QUERY","IsDesktop","props","QueryKeys","DESKTOP","IsDesktopXL","DESKTOP_XL","IsMobile","MOBILE","IsMobileDown","MOBILE_DOWN","IsMobileUp","MOBILE_UP","IsTablet","TABLET","IsTabletDown","TABLET_DOWN","IsTabletUp","TABLET_UP"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\n/* @jsxFrag React.Fragment */\nimport {jsx} from '@emotion/react';\nimport React, {ReactFragment, useEffect, useMemo, useState} from 'react';\n\nimport {QUERY, QueryKeys} from '../mediaQueries';\n\ntype Query = string | QueryKeys;\n\nexport interface MatchMediaProps extends React.HTMLProps<ReactFragment> {\n  not?: boolean;\n  query: Query;\n}\n\nexport const useMatchMedia = (query: Query) => {\n  const matchMedia = useMemo(() => window.matchMedia(`(${query})`), [query]);\n\n  const [isMatching, setIsMatching] = useState(matchMedia.matches);\n\n  const updateMatching = (event: MediaQueryListEvent) => {\n    setIsMatching(event.matches);\n  };\n\n  useEffect(() => {\n    matchMedia.addEventListener('change', updateMatching);\n    return () => matchMedia.removeEventListener('change', updateMatching);\n  }, [matchMedia]);\n\n  return isMatching;\n};\n\nexport const MatchMedia: React.FC<MatchMediaProps> = ({query, children, not}) => {\n  const matchQuery = useMatchMedia(QUERY[query] || query);\n  const isMatching = not ? !matchQuery : matchQuery;\n  return isMatching ? <>{children}</> : null;\n};\n\nexport type NamedMatchMediaProps = Omit<MatchMediaProps, 'query'>;\n\nexport const IsDesktop = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.DESKTOP} {...props} />;\nexport const IsDesktopXL = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.DESKTOP_XL} {...props} />;\nexport const IsMobile = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.MOBILE} {...props} />;\nexport const IsMobileDown = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.MOBILE_DOWN} {...props} />;\nexport const IsMobileUp = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.MOBILE_UP} {...props} />;\nexport const IsTablet = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.TABLET} {...props} />;\nexport const IsTabletDown = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.TABLET_DOWN} {...props} />;\nexport const IsTabletUp = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.TABLET_UP} {...props} />;\n"],"file":"MatchMedia.js"}

package/src/Layout/Spacer.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Spacer.d.js.map

package/src/Layout/Spacer.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"Spacer.d.js"}

package/src/Layout/Spacer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SpacerProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    size?: number;
+    vertical?: boolean;
+}
+export declare function Spacer({ size, vertical }: SpacerProps): React.ReactNode;

package/src/Layout/Spacer.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spacer = Spacer;
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+/*
+ * 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/.
+ *
+ */
+
+/** @jsx jsx */
+function Spacer(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 8 : _ref$size,
+      _ref$vertical = _ref.vertical,
+      vertical = _ref$vertical === void 0 ? false : _ref$vertical;
+  return (0, _react.jsx)("div", {
+    style: vertical ? {
+      display: 'inline-block',
+      width: size
+    } : {
+      height: size
+    }
+  });
+}
+//# sourceMappingURL=Spacer.js.map

package/src/Layout/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Spacer.tsx"],"names":["Spacer","size","vertical","display","width","height"],"mappings":";;;;;;;;;AAoBA;;AACA;;AArBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AASO,SAASA,MAAT,OAA4E;AAAA,uBAA3DC,IAA2D;AAAA,MAA3DA,IAA2D,0BAApD,CAAoD;AAAA,2BAAjDC,QAAiD;AAAA,MAAjDA,QAAiD,8BAAtC,KAAsC;AACjF,SAAO;AAAK,IAAA,KAAK,EAAEA,QAAQ,GAAG;AAACC,MAAAA,OAAO,EAAE,cAAV;AAA0BC,MAAAA,KAAK,EAAEH;AAAjC,KAAH,GAA4C;AAACI,MAAAA,MAAM,EAAEJ;AAAT;AAAhE,IAAP;AACD","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nexport interface SpacerProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  size?: number;\n  vertical?: boolean;\n}\n\nexport function Spacer({size = 8, vertical = false}: SpacerProps): React.ReactNode {\n  return <div style={vertical ? {display: 'inline-block', width: size} : {height: size}} />;\n}\n"],"file":"Spacer.js"}

package/src/Layout/StyledApp.d.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=StyledApp.d.js.map

package/src/Layout/StyledApp.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"StyledApp.d.js"}

package/src/Layout/StyledApp.d.ts

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

package/src/Layout/StyledApp.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledApp = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _GlobalStyle = require("../GlobalStyle");
+
+var _util = require("../util");
+
+var _Theme = require("./Theme");
+
+var _excluded = ["themeId", "theme", "children"];
+
+var styledAppContainerStyle = function styledAppContainerStyle(theme, _ref) {
+  var _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? theme.general.backgroundColor : _ref$backgroundColor;
+  return {
+    background: backgroundColor,
+    transition: 'background 0.15s'
+  };
+};
+
+var filterStyledAppProps = function filterStyledAppProps(props) {
+  return (0, _util.filterProps)(props, ['backgroundColor', 'themeId', 'theme']);
+};
+
+var StyledAppContainer = function StyledAppContainer(props) {
+  return (0, _react2.jsx)("div", (0, _extends2["default"])({
+    css: function css(theme) {
+      return styledAppContainerStyle(theme, props);
+    }
+  }, filterStyledAppProps(props)));
+};
+
+var StyledApp = function StyledApp(_ref2) {
+  var _ref2$themeId = _ref2.themeId,
+      themeId = _ref2$themeId === void 0 ? _Theme.THEME_ID.LIGHT : _ref2$themeId,
+      theme = _ref2.theme,
+      children = _ref2.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  return (0, _react2.jsx)(_Theme.ThemeProvider, {
+    theme: theme ? theme : _Theme.themes[themeId]
+  }, (0, _react2.jsx)(StyledAppContainer, props, (0, _react2.jsx)(_GlobalStyle.GlobalStyle, null), children));
+};
+
+exports.StyledApp = StyledApp;
+//# sourceMappingURL=StyledApp.js.map

package/src/Layout/StyledApp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["StyledApp.tsx"],"names":["styledAppContainerStyle","theme","backgroundColor","general","background","transition","filterStyledAppProps","props","StyledAppContainer","StyledApp","themeId","THEME_ID","LIGHT","children","themes"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;;;AAkBA,IAAMA,uBAGQ,GAAG,SAHXA,uBAGW,CAACC,KAAD;AAAA,kCAASC,eAAT;AAAA,MAASA,eAAT,qCAA2BD,KAAK,CAACE,OAAN,CAAcD,eAAzC;AAAA,SAA+D;AAC9EE,IAAAA,UAAU,EAAEF,eADkE;AAE9EG,IAAAA,UAAU,EAAE;AAFkE,GAA/D;AAAA,CAHjB;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD;AAAA,SAC3B,uBAAYA,KAAZ,EAAmB,CAAC,iBAAD,EAAoB,SAApB,EAA+B,OAA/B,CAAnB,CAD2B;AAAA,CAA7B;;AAGA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACD,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAE,aAACN,KAAD;AAAA,aAAkBD,uBAAuB,CAACC,KAAD,EAAQM,KAAR,CAAzC;AAAA;AAAV,KAAuED,oBAAoB,CAACC,KAAD,CAA3F,EADyB;AAAA,CAA3B;;AAIO,IAAME,SAAmC,GAAG,SAAtCA,SAAsC;AAAA,4BAAEC,OAAF;AAAA,MAAEA,OAAF,8BAAYC,gBAASC,KAArB;AAAA,MAA4BX,KAA5B,SAA4BA,KAA5B;AAAA,MAAmCY,QAAnC,SAAmCA,QAAnC;AAAA,MAAgDN,KAAhD;AAAA,SACjD,iBAAC,oBAAD;AAAe,IAAA,KAAK,EAAEN,KAAK,GAAGA,KAAH,GAAWa,cAAOJ,OAAP;AAAtC,KACE,iBAAC,kBAAD,EAAwBH,KAAxB,EACE,iBAAC,wBAAD,OADF,EAEGM,QAFH,CADF,CADiD;AAAA,CAA5C","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport React from 'react';\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {GlobalStyle} from '../GlobalStyle';\nimport {filterProps} from '../util';\nimport {THEME_ID, Theme, ThemeProvider, themes} from './Theme';\n\ntype StyledAppContainerProps =\n  | {\n      themeId: THEME_ID;\n      theme?: never;\n    }\n  | {\n      theme: Theme;\n      themeId?: never;\n    };\n\ntype BackgroundColorProps = {\n  backgroundColor?: string;\n};\n\nexport type StyledAppProps = React.HTMLProps<HTMLDivElement> & StyledAppContainerProps & BackgroundColorProps;\n\nconst styledAppContainerStyle: (\n  theme: Theme,\n  props: React.HTMLProps<HTMLDivElement> & BackgroundColorProps,\n) => CSSObject = (theme, {backgroundColor = theme.general.backgroundColor}) => ({\n  background: backgroundColor,\n  transition: 'background 0.15s',\n});\n\nconst filterStyledAppProps = (props: Partial<StyledAppProps>) =>\n  filterProps(props, ['backgroundColor', 'themeId', 'theme']);\n\nconst StyledAppContainer = (props: React.HTMLProps<HTMLDivElement> & BackgroundColorProps) => (\n  <div css={(theme: Theme) => styledAppContainerStyle(theme, props)} {...filterStyledAppProps(props)} />\n);\n\nexport const StyledApp: React.FC<StyledAppProps> = ({themeId = THEME_ID.LIGHT, theme, children, ...props}) => (\n  <ThemeProvider theme={theme ? theme : themes[themeId]}>\n    <StyledAppContainer {...props}>\n      <GlobalStyle />\n      {children}\n    </StyledAppContainer>\n  </ThemeProvider>\n);\n"],"file":"StyledApp.js"}

package/src/Layout/Theme.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Theme.d.js.map

package/src/Layout/Theme.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"Theme.d.js"}

package/src/Layout/Theme.d.ts

@@ -0,0 +1,77 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+export declare enum THEME_ID {
+    DARK = "THEME_DARK",
+    LIGHT = "THEME_LIGHT",
+    DEFAULT = "THEME_DEFAULT"
+}
+export interface Theme {
+    Button?: {
+        primaryBg: String;
+        primaryHoverBg: String;
+        primaryActiveBg: String;
+        primaryActiveBorder: String;
+        primaryFocusBorder: String;
+        primaryDisabledBg: String;
+        primaryDisabledText: String;
+        tertiaryBg: String;
+        tertiaryBorder: String;
+        tertiaryHoverBg: String;
+        tertiaryHoverBorder: String;
+        tertiarydisabledBg: String;
+        tertiaryDisabledBorder: String;
+        tertiaryActiveBg: String;
+    };
+    IconButton: {
+        activePrimaryBgColor: string;
+        focusBorderColor: string;
+        hoverPrimaryBgColor: string;
+        primaryActiveFillColor: string;
+        primaryBgColor: string;
+        primaryBorderColor: string;
+        primaryDisabledBgColor: string;
+        primaryDisabledBorderColor: string;
+        primaryHoverBorderColor: string;
+        secondaryActiveBorderColor: string;
+    };
+    Checkbox: {
+        background: string;
+        border: string;
+        borderFocused: string;
+        disableBgColor: string;
+        disableBorderColor: string;
+        disablecheckedBgColor: string;
+        invalidBorderColor: string;
+    };
+    general: {
+        backgroundColor: string;
+        color: string;
+        contrastColor: String;
+        dangerColor: string;
+        focusColor: String;
+        primaryColor: string;
+    };
+    Input: {
+        backgroundColor: string;
+        backgroundColorDisabled: string;
+        placeholderColor: string;
+        labelColor: string;
+        borderHover: string;
+    };
+    Select: {
+        disabledColor: string;
+        contrastTextColor: string;
+        borderColor: string;
+        focusedDescriptionColor: string;
+        optionHoverBg: string;
+        selectedActiveBg: String;
+    };
+}
+export declare const themes: {
+    [themeId in THEME_ID]: Theme;
+};
+export interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    theme?: Theme;
+}
+export declare const ThemeProvider: (props: ThemeProps) => jsx.JSX.Element;

package/src/Layout/Theme.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeProvider = exports.themes = exports.THEME_ID = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _colors = require("../Identity/colors");
+
+var _colorsV = require("../Identity/colors-v2");
+
+var _util = require("../util");
+
+var _themes;
+
+var THEME_ID;
+exports.THEME_ID = 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 = THEME_ID = {}));
+
+var themes = (_themes = {}, (0, _defineProperty2["default"])(_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)',
+    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)'
+  }
+}), (0, _defineProperty2["default"])(_themes, 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)',
+    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: _colorsV.COLOR_V2.BLUE_LIGHT_50,
+    focusBorderColor: _colorsV.COLOR_V2.BLUE_LIGHT_500,
+    hoverPrimaryBgColor: _colorsV.COLOR_V2.GRAY_20,
+    primaryActiveFillColor: _colorsV.COLOR_V2.BLUE,
+    primaryBgColor: _colorsV.COLOR_V2.WHITE,
+    primaryBorderColor: _colorsV.COLOR_V2.GRAY_40,
+    primaryDisabledBgColor: _colorsV.COLOR_V2.GRAY_20,
+    primaryDisabledBorderColor: _colorsV.COLOR_V2.GRAY_40,
+    primaryHoverBorderColor: _colorsV.COLOR_V2.GRAY_50,
+    secondaryActiveBorderColor: 'transparent'
+  },
+  Input: {
+    backgroundColor: _colors.COLOR.WHITE,
+    backgroundColorDisabled: _colorsV.COLOR_V2.GRAY_20,
+    placeholderColor: _colors.COLOR.GRAY_DARKEN_24,
+    labelColor: _colorsV.COLOR_V2.GRAY_80,
+    borderHover: 'var(--text-input-border-hover)'
+  },
+  general: {
+    backgroundColor: _colorsV.COLOR_V2.GRAY_20,
+    color: _colors.COLOR.TEXT,
+    primaryColor: _colorsV.COLOR_V2.BLUE,
+    dangerColor: _colorsV.COLOR_V2.RED,
+    contrastColor: 'var(--text-input-background)',
+    focusColor: 'var(--accent-color-focus)'
+  },
+  Select: {
+    disabledColor: _colorsV.COLOR_V2.GRAY_70,
+    contrastTextColor: _colors.COLOR.WHITE,
+    borderColor: _colorsV.COLOR_V2.GRAY_40,
+    focusedDescriptionColor: _colorsV.COLOR_V2.WHITE,
+    optionHoverBg: 'var(--accent-color-highlight)',
+    selectedActiveBg: 'var(--button-primary-hover)'
+  },
+  Checkbox: {
+    background: _colorsV.COLOR_V2.GRAY_20,
+    border: _colorsV.COLOR_V2.GRAY_80,
+    borderFocused: _colorsV.BASE_LIGHT_COLOR.BLUE,
+    disableBgColor: _colorsV.COLOR_V2.GRAY_20,
+    disableBorderColor: _colorsV.COLOR_V2.GRAY_60,
+    disablecheckedBgColor: _colorsV.COLOR_V2.GRAY_20,
+    invalidBorderColor: _colorsV.BASE_LIGHT_COLOR.RED
+  }
+}), (0, _defineProperty2["default"])(_themes, 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)',
+    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: _colorsV.COLOR_V2.BLUE_DARK_800,
+    focusBorderColor: _colorsV.COLOR_V2.BLUE_DARK_600,
+    hoverPrimaryBgColor: _colorsV.COLOR_V2.GRAY_80,
+    primaryActiveFillColor: _colors.COLOR.WHITE,
+    primaryBgColor: _colorsV.COLOR_V2.GRAY_90,
+    primaryBorderColor: _colorsV.COLOR_V2.GRAY_100,
+    primaryDisabledBgColor: _colorsV.COLOR_V2.GRAY_95,
+    primaryDisabledBorderColor: _colorsV.COLOR_V2.GRAY_90,
+    primaryHoverBorderColor: _colorsV.COLOR_V2.GRAY_70,
+    secondaryActiveBorderColor: _colorsV.COLOR_V2.BLUE_DARK_800
+  },
+  Input: {
+    backgroundColor: _colors.COLOR.BLACK_LIGHTEN_24,
+    backgroundColorDisabled: _colors.COLOR.GRAY_100,
+    placeholderColor: _colors.COLOR.GRAY_LIGHTEN_88,
+    labelColor: _colorsV.COLOR_V2.GRAY_40,
+    borderHover: 'var(--text-input-border-hover)'
+  },
+  general: {
+    backgroundColor: _colors.COLOR.BLACK,
+    color: _colors.COLOR.WHITE,
+    primaryColor: _colorsV.COLOR_V2.BLUE,
+    dangerColor: _colorsV.COLOR_V2.RED,
+    contrastColor: 'var(--text-input-background)',
+    focusColor: 'var(--accent-color-focus)'
+  },
+  Select: {
+    disabledColor: _colorsV.COLOR_V2.GRAY_60,
+    contrastTextColor: _colors.COLOR.BLACK,
+    borderColor: _colorsV.COLOR_V2.GRAY_90,
+    focusedDescriptionColor: _colorsV.COLOR_V2.GRAY_40,
+    optionHoverBg: 'var(--accent-color-highlight)',
+    selectedActiveBg: 'var(--button-primary-active)'
+  },
+  Checkbox: {
+    background: _colorsV.COLOR_V2.GRAY_20,
+    border: _colorsV.COLOR_V2.GRAY_60,
+    borderFocused: _colorsV.BASE_DARK_COLOR.BLUE,
+    disableBgColor: _colorsV.COLOR_V2.GRAY_10,
+    disableBorderColor: _colorsV.COLOR_V2.GRAY_70,
+    disablecheckedBgColor: _colorsV.COLOR_V2.GRAY_60,
+    invalidBorderColor: _colorsV.BASE_DARK_COLOR.RED
+  }
+}), _themes);
+exports.themes = themes;
+
+var filterThemeProps = function filterThemeProps(props) {
+  return (0, _util.filterProps)(props, ['theme']);
+};
+
+var ThemeProvider = function ThemeProvider(props) {
+  return (0, _react.jsx)(_react.ThemeProvider, (0, _extends2["default"])({
+    theme: props.theme
+  }, filterThemeProps(props)));
+};
+
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=Theme.js.map

package/src/Layout/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","DEFAULT","Button","primaryBg","primaryHoverBg","primaryActiveBg","primaryActiveBorder","primaryFocusBorder","primaryDisabledBg","primaryDisabledText","tertiaryBg","tertiaryBorder","tertiaryHoverBg","tertiaryHoverBorder","tertiarydisabledBg","tertiaryDisabledBorder","tertiaryActiveBg","Checkbox","background","border","borderFocused","disableBgColor","disableBorderColor","disablecheckedBgColor","invalidBorderColor","IconButton","activePrimaryBgColor","focusBorderColor","hoverPrimaryBgColor","primaryActiveFillColor","primaryBgColor","primaryBorderColor","primaryDisabledBgColor","primaryDisabledBorderColor","primaryHoverBorderColor","secondaryActiveBorderColor","Input","backgroundColor","backgroundColorDisabled","labelColor","placeholderColor","borderHover","Select","borderColor","contrastTextColor","disabledColor","focusedDescriptionColor","optionHoverBg","selectedActiveBg","general","color","dangerColor","primaryColor","contrastColor","focusColor","LIGHT","COLOR_V2","BLUE_LIGHT_50","BLUE_LIGHT_500","GRAY_20","BLUE","WHITE","GRAY_40","GRAY_50","COLOR","GRAY_DARKEN_24","GRAY_80","TEXT","RED","GRAY_70","BASE_LIGHT_COLOR","GRAY_60","DARK","BLUE_DARK_800","BLUE_DARK_600","GRAY_90","GRAY_100","GRAY_95","BLACK_LIGHTEN_24","GRAY_LIGHTEN_88","BLACK","BASE_DARK_COLOR","GRAY_10","filterThemeProps","props","ThemeProvider","theme"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2, BASE_DARK_COLOR, BASE_LIGHT_COLOR} from '../Identity/colors-v2';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n  DARK = 'THEME_DARK',\n  LIGHT = 'THEME_LIGHT',\n  DEFAULT = 'THEME_DEFAULT',\n}\n\nexport interface Theme {\n  Button?: {\n    primaryBg: String;\n    primaryHoverBg: String;\n    primaryActiveBg: String;\n    primaryActiveBorder: String;\n    primaryFocusBorder: String;\n    primaryDisabledBg: String;\n    primaryDisabledText: String;\n    tertiaryBg: String;\n    tertiaryBorder: String;\n    tertiaryHoverBg: String;\n    tertiaryHoverBorder: String;\n    tertiarydisabledBg: String;\n    tertiaryDisabledBorder: String;\n    tertiaryActiveBg: String;\n  };\n  IconButton: {\n    activePrimaryBgColor: string;\n    focusBorderColor: string;\n    hoverPrimaryBgColor: string;\n    primaryActiveFillColor: string;\n    primaryBgColor: string;\n    primaryBorderColor: string;\n    primaryDisabledBgColor: string;\n    primaryDisabledBorderColor: string;\n    primaryHoverBorderColor: string;\n    secondaryActiveBorderColor: string;\n  };\n  Checkbox: {\n    background: string;\n    border: string;\n    borderFocused: string;\n    disableBgColor: string;\n    disableBorderColor: string;\n    disablecheckedBgColor: string;\n    invalidBorderColor: string;\n  };\n  general: {\n    backgroundColor: string;\n    color: string;\n    contrastColor: String;\n    dangerColor: string;\n    focusColor: String;\n    primaryColor: string;\n  };\n  Input: {\n    backgroundColor: string;\n    backgroundColorDisabled: string;\n    placeholderColor: string;\n    labelColor: string;\n    borderHover: string;\n  };\n  Select: {\n    disabledColor: string;\n    contrastTextColor: string;\n    borderColor: string;\n    focusedDescriptionColor: string;\n    optionHoverBg: string;\n    selectedActiveBg: String;\n  };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n  [THEME_ID.DEFAULT]: {\n    Button: {\n      primaryBg: 'var(--accent-color)',\n      primaryHoverBg: 'var(--button-primary-hover)',\n      primaryActiveBg: 'var(--button-primary-active)',\n      primaryActiveBorder: 'var(--button-primary-active-border)',\n      primaryFocusBorder: 'var(--button-primary-focus-border)',\n      primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n      primaryDisabledText: 'var(--button-primary-disabled-text)',\n      tertiaryBg: 'var(--button-tertiary-bg)',\n      tertiaryBorder: 'var(--button-tertiary-border)',\n      tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n      tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n      tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n      tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n      tertiaryActiveBg: 'var(--accent-color-highlight)',\n    },\n    Checkbox: {\n      background: 'var(--checkbox-background)',\n      border: 'var(--checkbox-border)',\n      borderFocused: 'var(--accent-color)',\n      disableBgColor: 'var(--checkbox-background-disabled)',\n      disableBorderColor: 'var(--checkbox-border-disabled)',\n      disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',\n      invalidBorderColor: 'var(--danger-color)',\n    },\n    IconButton: {\n      activePrimaryBgColor: 'var(--accent-color-highlight)',\n      focusBorderColor: 'var(--accent-color-border)',\n      hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',\n      primaryActiveFillColor: 'var(--icon-primary-active-fill)',\n      primaryBgColor: 'var(--icon-button-primary-enabled-bg)',\n      primaryBorderColor: 'var(--icon-button-primary-border)',\n      primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',\n      primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',\n      primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',\n      secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',\n    },\n    Input: {\n      backgroundColor: 'var(--text-input-background)',\n      backgroundColorDisabled: 'var(--text-input-disabled)',\n      labelColor: 'var(--text-input-label)',\n      placeholderColor: 'var(--text-input-placeholder)',\n      borderHover: 'var(--text-input-border-hover)',\n    },\n    Select: {\n      borderColor: 'var(--text-input-border)',\n      contrastTextColor: 'var(--text-input-background)',\n      disabledColor: 'var(--text-input-placeholder)',\n      focusedDescriptionColor: 'var(--select-focused-description)',\n      optionHoverBg: 'var(--accent-color-highlight)',\n      selectedActiveBg: 'var(--button-primary-hover)',\n    },\n    general: {\n      backgroundColor: 'var(--app-bg)',\n      color: 'var(--main-color)',\n      dangerColor: 'var(--danger-color)',\n      primaryColor: 'var(--accent-color)',\n      contrastColor: 'var(--text-input-background)',\n      focusColor: 'var(--accent-color-focus)',\n    },\n  },\n  [THEME_ID.LIGHT]: {\n    Button: {\n      primaryBg: 'var(--accent-color)',\n      primaryHoverBg: 'var(--button-primary-hover)',\n      primaryActiveBg: 'var(--button-primary-active)',\n      primaryActiveBorder: 'var(--button-primary-active-border)',\n      primaryFocusBorder: 'var(--button-primary-focus-border)',\n      primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n      primaryDisabledText: 'var(--button-primary-disabled-text)',\n      tertiaryBg: 'var(--button-tertiary-bg)',\n      tertiaryBorder: 'var(--button-tertiary-border)',\n      tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n      tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n      tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n      tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n      tertiaryActiveBg: 'var(--accent-color-highlight)',\n    },\n    IconButton: {\n      activePrimaryBgColor: COLOR_V2.BLUE_LIGHT_50,\n      focusBorderColor: COLOR_V2.BLUE_LIGHT_500,\n      hoverPrimaryBgColor: COLOR_V2.GRAY_20,\n      primaryActiveFillColor: COLOR_V2.BLUE,\n      primaryBgColor: COLOR_V2.WHITE,\n      primaryBorderColor: COLOR_V2.GRAY_40,\n      primaryDisabledBgColor: COLOR_V2.GRAY_20,\n      primaryDisabledBorderColor: COLOR_V2.GRAY_40,\n      primaryHoverBorderColor: COLOR_V2.GRAY_50,\n      secondaryActiveBorderColor: 'transparent',\n    },\n    Input: {\n      backgroundColor: COLOR.WHITE,\n      backgroundColorDisabled: COLOR_V2.GRAY_20,\n      placeholderColor: COLOR.GRAY_DARKEN_24,\n      labelColor: COLOR_V2.GRAY_80,\n      borderHover: 'var(--text-input-border-hover)',\n    },\n    general: {\n      backgroundColor: COLOR_V2.GRAY_20,\n      color: COLOR.TEXT,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\n      contrastColor: 'var(--text-input-background)',\n      focusColor: 'var(--accent-color-focus)',\n    },\n    Select: {\n      disabledColor: COLOR_V2.GRAY_70,\n      contrastTextColor: COLOR.WHITE,\n      borderColor: COLOR_V2.GRAY_40,\n      focusedDescriptionColor: COLOR_V2.WHITE,\n      optionHoverBg: 'var(--accent-color-highlight)',\n      selectedActiveBg: 'var(--button-primary-hover)',\n    },\n    Checkbox: {\n      background: COLOR_V2.GRAY_20,\n      border: COLOR_V2.GRAY_80,\n      borderFocused: BASE_LIGHT_COLOR.BLUE,\n      disableBgColor: COLOR_V2.GRAY_20,\n      disableBorderColor: COLOR_V2.GRAY_60,\n      disablecheckedBgColor: COLOR_V2.GRAY_20,\n      invalidBorderColor: BASE_LIGHT_COLOR.RED,\n    },\n  },\n  [THEME_ID.DARK]: {\n    Button: {\n      primaryBg: 'var(--accent-color)',\n      primaryHoverBg: 'var(--button-primary-hover)',\n      primaryActiveBg: 'var(--button-primary-active)',\n      primaryActiveBorder: 'var(--button-primary-active-border)',\n      primaryFocusBorder: 'var(--button-primary-focus-border)',\n      primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n      primaryDisabledText: 'var(--button-primary-disabled-text)',\n      tertiaryBg: 'var(--button-tertiary-bg)',\n      tertiaryBorder: 'var(--button-tertiary-border)',\n      tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n      tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n      tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n      tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n      tertiaryActiveBg: 'var(--accent-color-highlight)',\n    },\n    IconButton: {\n      activePrimaryBgColor: COLOR_V2.BLUE_DARK_800,\n      focusBorderColor: COLOR_V2.BLUE_DARK_600,\n      hoverPrimaryBgColor: COLOR_V2.GRAY_80,\n      primaryActiveFillColor: COLOR.WHITE,\n      primaryBgColor: COLOR_V2.GRAY_90,\n      primaryBorderColor: COLOR_V2.GRAY_100,\n      primaryDisabledBgColor: COLOR_V2.GRAY_95,\n      primaryDisabledBorderColor: COLOR_V2.GRAY_90,\n      primaryHoverBorderColor: COLOR_V2.GRAY_70,\n      secondaryActiveBorderColor: COLOR_V2.BLUE_DARK_800,\n    },\n    Input: {\n      backgroundColor: COLOR.BLACK_LIGHTEN_24,\n      backgroundColorDisabled: COLOR.GRAY_100,\n      placeholderColor: COLOR.GRAY_LIGHTEN_88,\n      labelColor: COLOR_V2.GRAY_40,\n      borderHover: 'var(--text-input-border-hover)',\n    },\n    general: {\n      backgroundColor: COLOR.BLACK,\n      color: COLOR.WHITE,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\n      contrastColor: 'var(--text-input-background)',\n      focusColor: 'var(--accent-color-focus)',\n    },\n    Select: {\n      disabledColor: COLOR_V2.GRAY_60,\n      contrastTextColor: COLOR.BLACK,\n      borderColor: COLOR_V2.GRAY_90,\n      focusedDescriptionColor: COLOR_V2.GRAY_40,\n      optionHoverBg: 'var(--accent-color-highlight)',\n      selectedActiveBg: 'var(--button-primary-active)',\n    },\n    Checkbox: {\n      background: COLOR_V2.GRAY_20,\n      border: COLOR_V2.GRAY_60,\n      borderFocused: BASE_DARK_COLOR.BLUE,\n      disableBgColor: COLOR_V2.GRAY_10,\n      disableBorderColor: COLOR_V2.GRAY_70,\n      disablecheckedBgColor: COLOR_V2.GRAY_60,\n      invalidBorderColor: BASE_DARK_COLOR.RED,\n    },\n  },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  theme?: Theme;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['theme']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n  <EmotionThemeProvider theme={props.theme} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}

package/src/Layout/headerMenu/HeaderMenu.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=HeaderMenu.d.js.map

package/src/Layout/headerMenu/HeaderMenu.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"HeaderMenu.d.js"}

package/src/Layout/headerMenu/HeaderMenu.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+export interface HeaderMenuProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    centerElement?: React.ReactNode;
+    logoElement?: React.ReactNode;
+}
+export declare const HeaderMenu: ({ children, logoElement, centerElement, ...props }: HeaderMenuProps) => jsx.JSX.Element;