@wireapp/react-ui-kit 8.14.3 → 8.14.6

package/src/Layout/index.d.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Box = require("./Box");
+
+Object.keys(_Box).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Box[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Box[key];
+    }
+  });
+});
+
+var _Column = require("./Column");
+
+Object.keys(_Column).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Column[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Column[key];
+    }
+  });
+});
+
+var _Container = require("./Container");
+
+Object.keys(_Container).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Container[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Container[key];
+    }
+  });
+});
+
+var _Content = require("./Content");
+
+Object.keys(_Content).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Content[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Content[key];
+    }
+  });
+});
+
+var _FlexBox = require("./FlexBox");
+
+Object.keys(_FlexBox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FlexBox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FlexBox[key];
+    }
+  });
+});
+
+var _Footer = require("./Footer");
+
+Object.keys(_Footer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Footer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Footer[key];
+    }
+  });
+});
+
+var _Header = require("./Header");
+
+Object.keys(_Header).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Header[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Header[key];
+    }
+  });
+});
+
+var _index = require("./headerMenu/index");
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});
+
+var _MatchMedia = require("./MatchMedia");
+
+Object.keys(_MatchMedia).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MatchMedia[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MatchMedia[key];
+    }
+  });
+});
+
+var _Spacer = require("./Spacer");
+
+Object.keys(_Spacer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Spacer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Spacer[key];
+    }
+  });
+});
+
+var _StyledApp = require("./StyledApp");
+
+Object.keys(_StyledApp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StyledApp[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _StyledApp[key];
+    }
+  });
+});
+
+var _Theme = require("./Theme");
+
+Object.keys(_Theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Theme[key];
+    }
+  });
+});
+
+var _sizes = require("./sizes");
+
+Object.keys(_sizes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sizes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _sizes[key];
+    }
+  });
+});
+//# sourceMappingURL=index.d.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.d.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Box';\nexport * from './Column';\nexport * from './Container';\nexport * from './Content';\nexport * from './FlexBox';\nexport * from './Footer';\nexport * from './Header';\nexport * from './headerMenu/index';\nexport * from './MatchMedia';\nexport * from './Spacer';\nexport * from './StyledApp';\nexport * from './Theme';\nexport * from './sizes';\n"],"file":"index.d.js"}

package/src/Layout/index.d.ts

@@ -0,0 +1,13 @@
+export * from './Box';
+export * from './Column';
+export * from './Container';
+export * from './Content';
+export * from './FlexBox';
+export * from './Footer';
+export * from './Header';
+export * from './headerMenu/index';
+export * from './MatchMedia';
+export * from './Spacer';
+export * from './StyledApp';
+export * from './Theme';
+export * from './sizes';

package/src/Layout/index.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Box = require("./Box");
+
+Object.keys(_Box).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Box[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Box[key];
+    }
+  });
+});
+
+var _Column = require("./Column");
+
+Object.keys(_Column).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Column[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Column[key];
+    }
+  });
+});
+
+var _Container = require("./Container");
+
+Object.keys(_Container).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Container[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Container[key];
+    }
+  });
+});
+
+var _Content = require("./Content");
+
+Object.keys(_Content).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Content[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Content[key];
+    }
+  });
+});
+
+var _FlexBox = require("./FlexBox");
+
+Object.keys(_FlexBox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FlexBox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FlexBox[key];
+    }
+  });
+});
+
+var _Footer = require("./Footer");
+
+Object.keys(_Footer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Footer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Footer[key];
+    }
+  });
+});
+
+var _Header = require("./Header");
+
+Object.keys(_Header).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Header[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Header[key];
+    }
+  });
+});
+
+var _index = require("./headerMenu/index");
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});
+
+var _MatchMedia = require("./MatchMedia");
+
+Object.keys(_MatchMedia).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MatchMedia[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MatchMedia[key];
+    }
+  });
+});
+
+var _Spacer = require("./Spacer");
+
+Object.keys(_Spacer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Spacer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Spacer[key];
+    }
+  });
+});
+
+var _StyledApp = require("./StyledApp");
+
+Object.keys(_StyledApp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StyledApp[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _StyledApp[key];
+    }
+  });
+});
+
+var _Theme = require("./Theme");
+
+Object.keys(_Theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Theme[key];
+    }
+  });
+});
+
+var _sizes = require("./sizes");
+
+Object.keys(_sizes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sizes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _sizes[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/src/Layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAmBA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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\nexport * from './Box';\nexport * from './Column';\nexport * from './Container';\nexport * from './Content';\nexport * from './FlexBox';\nexport * from './Footer';\nexport * from './Header';\nexport * from './headerMenu/index';\nexport * from './MatchMedia';\nexport * from './Spacer';\nexport * from './StyledApp';\nexport * from './Theme';\nexport * from './sizes';\n"],"file":"index.js"}

package/src/Layout/sizes.d.js

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

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

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

package/src/Layout/sizes.d.ts

@@ -0,0 +1,13 @@
+export declare const WIDTH: {
+    TINY: number;
+    MOBILE: number;
+    MOBILE_MAX: number;
+    TABLET_MIN: number;
+    TABLET_MAX: number;
+    DESKTOP_MIN: number;
+    DESKTOP_MAX: number;
+    DESKTOP_XL_MIN: number;
+    DESKTOP_XL_MAX: number;
+};
+export declare const STEP = 8;
+export declare const GUTTER: number;

package/src/Layout/sizes.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GUTTER = exports.STEP = exports.WIDTH = void 0;
+
+/*
+ * 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 WIDTH = {
+  TINY: 320,
+  MOBILE: 480,
+  MOBILE_MAX: 639,
+  TABLET_MIN: 640,
+  TABLET_MAX: 919,
+  DESKTOP_MIN: 920,
+  DESKTOP_MAX: 1199,
+  DESKTOP_XL_MIN: 1200,
+  DESKTOP_XL_MAX: 1600
+};
+exports.WIDTH = WIDTH;
+var STEP = 8;
+exports.STEP = STEP;
+var GUTTER = STEP + STEP;
+exports.GUTTER = GUTTER;
+//# sourceMappingURL=sizes.js.map

package/src/Layout/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["sizes.ts"],"names":["WIDTH","TINY","MOBILE","MOBILE_MAX","TABLET_MIN","TABLET_MAX","DESKTOP_MIN","DESKTOP_MAX","DESKTOP_XL_MIN","DESKTOP_XL_MAX","STEP","GUTTER"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,KAAK,GAAG;AACnBC,EAAAA,IAAI,EAAE,GADa;AAEnBC,EAAAA,MAAM,EAAE,GAFW;AAGnBC,EAAAA,UAAU,EAAE,GAHO;AAInBC,EAAAA,UAAU,EAAE,GAJO;AAKnBC,EAAAA,UAAU,EAAE,GALO;AAMnBC,EAAAA,WAAW,EAAE,GANM;AAOnBC,EAAAA,WAAW,EAAE,IAPM;AAQnBC,EAAAA,cAAc,EAAE,IARG;AASnBC,EAAAA,cAAc,EAAE;AATG,CAAd;;AAYA,IAAMC,IAAI,GAAG,CAAb;;AACA,IAAMC,MAAM,GAAGD,IAAI,GAAGA,IAAtB","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\nexport const WIDTH = {\n  TINY: 320,\n  MOBILE: 480,\n  MOBILE_MAX: 639,\n  TABLET_MIN: 640,\n  TABLET_MAX: 919,\n  DESKTOP_MIN: 920,\n  DESKTOP_MAX: 1199,\n  DESKTOP_XL_MIN: 1200,\n  DESKTOP_XL_MAX: 1600,\n};\n\nexport const STEP = 8;\nexport const GUTTER = STEP + STEP;\n"],"file":"sizes.js"}

package/src/Menu/MenuModal.d.js

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

package/src/Menu/MenuModal.d.js.map

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

package/src/Menu/MenuModal.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+interface MenuModalProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    onBackgroundClick?: () => void;
+}
+export declare const MenuModal: ({ children, onBackgroundClick, ...props }: MenuModalProps & React.HTMLProps<HTMLDivElement>) => jsx.JSX.Element;
+export declare type MenuItemProps<T = HTMLLIElement> = React.HTMLProps<T>;
+export declare const MenuItem: ({ children, ...props }: MenuItemProps & React.HTMLProps<HTMLLIElement>) => jsx.JSX.Element;
+export {};

package/src/Menu/MenuModal.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = exports.MenuModal = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Identity = require("../Identity/");
+
+var _motions = require("../Identity/motions");
+
+var _mediaQueries = require("../mediaQueries");
+
+var _Overlay = require("../Modal/Overlay");
+
+var _util = require("../util");
+
+var _excluded = ["children", "onBackgroundClick"],
+    _excluded2 = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var menuModalWrapperStyle = function menuModalWrapperStyle(props) {
+  return _objectSpread(_objectSpread({}, (0, _Overlay.overlayBackgroundStyle)(props)), {}, {
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end',
+    display: 'flex',
+    overflowY: 'hidden',
+    padding: 0
+  });
+};
+
+var MenuModalWrapper = function MenuModalWrapper(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: menuModalWrapperStyle
+  }, props));
+};
+
+var MenuModalBody = function MenuModalBody(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: function css(theme) {
+      return (0, _defineProperty2["default"])({
+        animation: "".concat(_motions.ANIMATION.bottomUpMovement, " ").concat(_motions.DURATION.DEFAULT, "ms ").concat(_motions.EASE.EXPONENTIAL),
+        backgroundColor: _Identity.COLOR.tint(theme.general.backgroundColor, 0.16),
+        boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        padding: '8px 16px',
+        position: 'relative',
+        width: '767px',
+        zIndex: 9999
+      }, _mediaQueries.media[_mediaQueries.QueryKeys.TABLET_DOWN], {
+        width: '100%'
+      });
+    }
+  }, props));
+};
+
+var MenuModalContent = function MenuModalContent(props) {
+  return (0, _react.jsx)("ul", (0, _extends2["default"])({
+    css: /*#__PURE__*/(0, _react.css)({
+      li: {
+        borderBottom: "1px solid ".concat(_Identity.COLOR.GRAY_LIGHTEN_72)
+      },
+      'li:last-child': {
+        borderBottom: 0
+      },
+      margin: 0,
+      maxWidth: '100%',
+      minWidth: '100%',
+      padding: 0
+    }, process.env.NODE_ENV === "production" ? "" : ";label:MenuModalContent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnVNb2RhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0VJIiwiZmlsZSI6Ik1lbnVNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge0NPTE9SfSBmcm9tICcuLi9JZGVudGl0eS8nO1xuaW1wb3J0IHtBTklNQVRJT04sIERVUkFUSU9OLCBFQVNFfSBmcm9tICcuLi9JZGVudGl0eS9tb3Rpb25zJztcbmltcG9ydCB7VGhlbWV9IGZyb20gJy4uL0xheW91dCc7XG5pbXBvcnQge1F1ZXJ5S2V5cywgbWVkaWF9IGZyb20gJy4uL21lZGlhUXVlcmllcyc7XG5pbXBvcnQge092ZXJsYXlCYWNrZ3JvdW5kUHJvcHMsIE92ZXJsYXlXcmFwcGVyUHJvcHMsIG92ZXJsYXlCYWNrZ3JvdW5kU3R5bGV9IGZyb20gJy4uL01vZGFsL092ZXJsYXknO1xuaW1wb3J0IHtub29wfSBmcm9tICcuLi91dGlsJztcblxuY29uc3QgbWVudU1vZGFsV3JhcHBlclN0eWxlOiA8VD4ocHJvcHM6IE92ZXJsYXlXcmFwcGVyUHJvcHM8VD4pID0+IENTU09iamVjdCA9IHByb3BzID0+ICh7XG4gIC4uLm92ZXJsYXlCYWNrZ3JvdW5kU3R5bGUocHJvcHMpLFxuICBhbGlnbkl0ZW1zOiAnZmxleC1lbmQnLFxuICBhbGlnblNlbGY6ICdmbGV4LWVuZCcsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgb3ZlcmZsb3dZOiAnaGlkZGVuJyxcbiAgcGFkZGluZzogMCxcbn0pO1xuXG5jb25zdCBNZW51TW9kYWxXcmFwcGVyID0gKHByb3BzOiBPdmVybGF5V3JhcHBlclByb3BzKSA9PiA8ZGl2IGNzcz17bWVudU1vZGFsV3JhcHBlclN0eWxlfSB7Li4ucHJvcHN9IC8+O1xuXG5jb25zdCBNZW51TW9kYWxCb2R5ID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICBhbmltYXRpb246IGAke0FOSU1BVElPTi5ib3R0b21VcE1vdmVtZW50fSAke0RVUkFUSU9OLkRFRkFVTFR9bXMgJHtFQVNFLkVYUE9ORU5USUFMfWAsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SLnRpbnQodGhlbWUuZ2VuZXJhbC5iYWNrZ3JvdW5kQ29sb3IsIDAuMTYpLFxuICAgICAgYm94U2hhZG93OiAnMCAxNnB4IDY0cHggMCByZ2JhKDAsIDAsIDAsIDAuMTYpJyxcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nLFxuICAgICAganVzdGlmeUNvbnRlbnQ6ICdzcGFjZS1iZXR3ZWVuJyxcbiAgICAgIG1hcmdpbkxlZnQ6ICdhdXRvJyxcbiAgICAgIG1hcmdpblJpZ2h0OiAnYXV0bycsXG4gICAgICBwYWRkaW5nOiAnOHB4IDE2cHgnLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICB3aWR0aDogJzc2N3B4JyxcbiAgICAgIHpJbmRleDogOTk5OSxcbiAgICAgIFttZWRpYVtRdWVyeUtleXMuVEFCTEVUX0RPV05dXToge1xuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9KX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5jb25zdCBNZW51TW9kYWxDb250ZW50ID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTFVMaXN0RWxlbWVudD4pID0+IChcbiAgPHVsXG4gICAgY3NzPXt7XG4gICAgICBsaToge1xuICAgICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHtDT0xPUi5HUkFZX0xJR0hURU5fNzJ9YCxcbiAgICAgIH0sXG4gICAgICAnbGk6bGFzdC1jaGlsZCc6IHtcbiAgICAgICAgYm9yZGVyQm90dG9tOiAwLFxuICAgICAgfSxcbiAgICAgIG1hcmdpbjogMCxcbiAgICAgIG1heFdpZHRoOiAnMTAwJScsXG4gICAgICBtaW5XaWR0aDogJzEwMCUnLFxuICAgICAgcGFkZGluZzogMCxcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbmNvbnN0IG1vZGFsQmFja2dyb3VuZFN0eWxlOiA8VD4ocHJvcHM6IE92ZXJsYXlCYWNrZ3JvdW5kUHJvcHM8VD4pID0+IENTU09iamVjdCA9IHByb3BzID0+ICh7XG4gIC4uLm92ZXJsYXlCYWNrZ3JvdW5kU3R5bGUocHJvcHMpLFxuICBiYWNrZ3JvdW5kOiAncmdiYSg1MCwgNTQsIDU3LCAwLjQpJyxcbn0pO1xuXG5jb25zdCBNZW51TW9kYWxCYWNrZ3JvdW5kID0gKHByb3BzOiBPdmVybGF5QmFja2dyb3VuZFByb3BzKSA9PiA8ZGl2IGNzcz17bW9kYWxCYWNrZ3JvdW5kU3R5bGV9IHsuLi5wcm9wc30gLz47XG5cbmludGVyZmFjZSBNZW51TW9kYWxQcm9wczxUID0gSFRNTERpdkVsZW1lbnQ+IGV4dGVuZHMgUmVhY3QuSFRNTFByb3BzPFQ+IHtcbiAgb25CYWNrZ3JvdW5kQ2xpY2s/OiAoKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgTWVudU1vZGFsID0gKHtcbiAgY2hpbGRyZW4gPSBudWxsLFxuICBvbkJhY2tncm91bmRDbGljayA9IG5vb3AsXG4gIC4uLnByb3BzXG59OiBNZW51TW9kYWxQcm9wcyAmIFJlYWN0LkhUTUxQcm9wczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPE1lbnVNb2RhbFdyYXBwZXIgey4uLnByb3BzfT5cbiAgICA8TWVudU1vZGFsQm9keT5cbiAgICAgIDxNZW51TW9kYWxDb250ZW50PntjaGlsZHJlbn08L01lbnVNb2RhbENvbnRlbnQ+XG4gICAgPC9NZW51TW9kYWxCb2R5PlxuICAgIDxNZW51TW9kYWxCYWNrZ3JvdW5kIG9uQ2xpY2s9e29uQmFja2dyb3VuZENsaWNrfSBkYXRhLXVpZS1uYW1lPVwibWVudS1iYWNrZ3JvdW5kXCIgLz5cbiAgPC9NZW51TW9kYWxXcmFwcGVyPlxuKTtcblxuZXhwb3J0IHR5cGUgTWVudUl0ZW1Qcm9wczxUID0gSFRNTExJRWxlbWVudD4gPSBSZWFjdC5IVE1MUHJvcHM8VD47XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbSA9ICh7Y2hpbGRyZW4gPSBudWxsLCAuLi5wcm9wc306IE1lbnVJdGVtUHJvcHMgJiBSZWFjdC5IVE1MUHJvcHM8SFRNTExJRWxlbWVudD4pID0+IChcbiAgPGxpXG4gICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICBjb2xvcjogdGhlbWUuZ2VuZXJhbC5jb2xvcixcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgaGVpZ2h0OiAnNTZweCcsXG4gICAgICBsaXN0U3R5bGVUeXBlOiAnbm9uZScsXG4gICAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgIH0pfVxuICAgIHsuLi5wcm9wc31cbiAgPlxuICAgIHtjaGlsZHJlbn1cbiAgPC9saT5cbik7XG4iXX0= */")
+  }, props));
+};
+
+var modalBackgroundStyle = function modalBackgroundStyle(props) {
+  return _objectSpread(_objectSpread({}, (0, _Overlay.overlayBackgroundStyle)(props)), {}, {
+    background: 'rgba(50, 54, 57, 0.4)'
+  });
+};
+
+var MenuModalBackground = function MenuModalBackground(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: modalBackgroundStyle
+  }, props));
+};
+
+var MenuModal = function MenuModal(_ref2) {
+  var _ref2$children = _ref2.children,
+      children = _ref2$children === void 0 ? null : _ref2$children,
+      _ref2$onBackgroundCli = _ref2.onBackgroundClick,
+      onBackgroundClick = _ref2$onBackgroundCli === void 0 ? _util.noop : _ref2$onBackgroundCli,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  return (0, _react.jsx)(MenuModalWrapper, props, (0, _react.jsx)(MenuModalBody, null, (0, _react.jsx)(MenuModalContent, null, children)), (0, _react.jsx)(MenuModalBackground, {
+    onClick: onBackgroundClick,
+    "data-uie-name": "menu-background"
+  }));
+};
+
+exports.MenuModal = MenuModal;
+
+var MenuItem = function MenuItem(_ref3) {
+  var _ref3$children = _ref3.children,
+      children = _ref3$children === void 0 ? null : _ref3$children,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+  return (0, _react.jsx)("li", (0, _extends2["default"])({
+    css: function css(theme) {
+      return {
+        alignItems: 'center',
+        color: theme.general.color,
+        cursor: 'pointer',
+        display: 'flex',
+        height: '56px',
+        listStyleType: 'none',
+        maxWidth: '100%'
+      };
+    }
+  }, props), children);
+};
+
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=MenuModal.js.map

package/src/Menu/MenuModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuModal.tsx"],"names":["menuModalWrapperStyle","props","alignItems","alignSelf","display","overflowY","padding","MenuModalWrapper","MenuModalBody","theme","animation","ANIMATION","bottomUpMovement","DURATION","DEFAULT","EASE","EXPONENTIAL","backgroundColor","COLOR","tint","general","boxShadow","flexDirection","justifyContent","marginLeft","marginRight","position","width","zIndex","media","QueryKeys","TABLET_DOWN","MenuModalContent","li","borderBottom","GRAY_LIGHTEN_72","margin","maxWidth","minWidth","modalBackgroundStyle","background","MenuModalBackground","MenuModal","children","onBackgroundClick","noop","MenuItem","color","cursor","height","listStyleType"],"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 */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {OverlayBackgroundProps, OverlayWrapperProps, overlayBackgroundStyle} from '../Modal/Overlay';\nimport {noop} from '../util';\n\nconst menuModalWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = props => ({\n  ...overlayBackgroundStyle(props),\n  alignItems: 'flex-end',\n  alignSelf: 'flex-end',\n  display: 'flex',\n  overflowY: 'hidden',\n  padding: 0,\n});\n\nconst MenuModalWrapper = (props: OverlayWrapperProps) => <div css={menuModalWrapperStyle} {...props} />;\n\nconst MenuModalBody = (props: React.HTMLProps<HTMLDivElement>) => (\n  <div\n    css={(theme: Theme) => ({\n      animation: `${ANIMATION.bottomUpMovement} ${DURATION.DEFAULT}ms ${EASE.EXPONENTIAL}`,\n      backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n      boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n      padding: '8px 16px',\n      position: 'relative',\n      width: '767px',\n      zIndex: 9999,\n      [media[QueryKeys.TABLET_DOWN]]: {\n        width: '100%',\n      },\n    })}\n    {...props}\n  />\n);\n\nconst MenuModalContent = (props: React.HTMLProps<HTMLUListElement>) => (\n  <ul\n    css={{\n      li: {\n        borderBottom: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n      },\n      'li:last-child': {\n        borderBottom: 0,\n      },\n      margin: 0,\n      maxWidth: '100%',\n      minWidth: '100%',\n      padding: 0,\n    }}\n    {...props}\n  />\n);\n\nconst modalBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = props => ({\n  ...overlayBackgroundStyle(props),\n  background: 'rgba(50, 54, 57, 0.4)',\n});\n\nconst MenuModalBackground = (props: OverlayBackgroundProps) => <div css={modalBackgroundStyle} {...props} />;\n\ninterface MenuModalProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  onBackgroundClick?: () => void;\n}\n\nexport const MenuModal = ({\n  children = null,\n  onBackgroundClick = noop,\n  ...props\n}: MenuModalProps & React.HTMLProps<HTMLDivElement>) => (\n  <MenuModalWrapper {...props}>\n    <MenuModalBody>\n      <MenuModalContent>{children}</MenuModalContent>\n    </MenuModalBody>\n    <MenuModalBackground onClick={onBackgroundClick} data-uie-name=\"menu-background\" />\n  </MenuModalWrapper>\n);\n\nexport type MenuItemProps<T = HTMLLIElement> = React.HTMLProps<T>;\n\nexport const MenuItem = ({children = null, ...props}: MenuItemProps & React.HTMLProps<HTMLLIElement>) => (\n  <li\n    css={(theme: Theme) => ({\n      alignItems: 'center',\n      color: theme.general.color,\n      cursor: 'pointer',\n      display: 'flex',\n      height: '56px',\n      listStyleType: 'none',\n      maxWidth: '100%',\n    })}\n    {...props}\n  >\n    {children}\n  </li>\n);\n"],"file":"MenuModal.js"}

package/src/Menu/TabBar.d.js

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

package/src/Menu/TabBar.d.js.map

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

package/src/Menu/TabBar.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import { TextProps } from '../Text';
+export declare type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;
+export declare const TabBar: ({ children, ...props }: TabBarProps<HTMLDivElement>) => jsx.JSX.Element;
+export interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {
+    active: boolean;
+}
+export declare const TabBarItem: ({ children, ...props }: TabBarItemProps) => jsx.JSX.Element;