@wireapp/react-ui-kit 8.14.3 → 8.14.6

package/src/Layout/headerMenu/HeaderMenu.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderMenu = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _MenuContent = require("./MenuContent");
+
+var _MenuItems = require("./MenuItems");
+
+var _MenuOpenButton = require("./MenuOpenButton");
+
+var _MenuScrollableItems = require("./MenuScrollableItems");
+
+var _excluded = ["children", "logoElement", "centerElement"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "107gg21",
+  styles: "height:64px"
+} : {
+  name: "12rdvkk-HeaderMenu",
+  styles: "height:64px;label:HeaderMenu;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYWRlck1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDUyIsImZpbGUiOiJIZWFkZXJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge01lbnVDb250ZW50fSBmcm9tICcuL01lbnVDb250ZW50JztcbmltcG9ydCB7TWVudUl0ZW1zfSBmcm9tICcuL01lbnVJdGVtcyc7XG5pbXBvcnQge01lbnVPcGVuQnV0dG9ufSBmcm9tICcuL01lbnVPcGVuQnV0dG9uJztcbmltcG9ydCB7TWVudVNjcm9sbGFibGVJdGVtc30gZnJvbSAnLi9NZW51U2Nyb2xsYWJsZUl0ZW1zJztcblxuZXhwb3J0IGludGVyZmFjZSBIZWFkZXJNZW51UHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGNlbnRlckVsZW1lbnQ/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGxvZ29FbGVtZW50PzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyTWVudSA9ICh7Y2hpbGRyZW4sIGxvZ29FbGVtZW50ID0gbnVsbCwgY2VudGVyRWxlbWVudCA9IG51bGwsIC4uLnByb3BzfTogSGVhZGVyTWVudVByb3BzKSA9PiB7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdG9nZ2xlTWVudSA9ICgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHdpbmRvdy5zY3JvbGxUbygwLCAwKTtcbiAgICAgIHNldElzT3BlbihjdXJyZW50ID0+ICFjdXJyZW50KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY2xvc2VNZW51ID0gKCkgPT4gc2V0SXNPcGVuKGZhbHNlKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt7aGVpZ2h0OiAnNjRweCd9fSB7Li4ucHJvcHN9IGRhdGEtdWllLW5hbWU9XCJlbGVtZW50LWhlYWRlci1tZW51XCI+XG4gICAgICA8TWVudUNvbnRlbnQgb3Blbj17aXNPcGVufT5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCcsIHpJbmRleDogMn19IG9uQ2xpY2s9e2Nsb3NlTWVudX0+XG4gICAgICAgICAge2xvZ29FbGVtZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCd9fT57Y2VudGVyRWxlbWVudH08L2Rpdj5cbiAgICAgICAgPE1lbnVPcGVuQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17dG9nZ2xlTWVudX1cbiAgICAgICAgICBvcGVuPXtpc09wZW59XG4gICAgICAgICAgc3R5bGU9e3tqdXN0aWZ5U2VsZjogJ2VuZCcsIHBvc2l0aW9uOiBpc09wZW4gPyAnZml4ZWQnIDogdW5kZWZpbmVkLCByaWdodDogJzE2cHgnLCB0b3A6ICcyMXB4J319XG4gICAgICAgICAgZGF0YS11aWUtbmFtZT1cImRvLXRvZ2dsZS1oZWFkZXItbWVudVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxNZW51SXRlbXMgb25DbGljaz17Y2xvc2VNZW51fSBvcGVuPXtpc09wZW59PlxuICAgICAgICAgIDxNZW51U2Nyb2xsYWJsZUl0ZW1zPntjaGlsZHJlbn08L01lbnVTY3JvbGxhYmxlSXRlbXM+XG4gICAgICAgIDwvTWVudUl0ZW1zPlxuICAgICAgPC9NZW51Q29udGVudD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "104j9u2",
+  styles: "align-self:center;display:flex;z-index:2"
+} : {
+  name: "lr9j0q-HeaderMenu",
+  styles: "align-self:center;display:flex;z-index:2;label:HeaderMenu;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYWRlck1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlEYSIsImZpbGUiOiJIZWFkZXJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge01lbnVDb250ZW50fSBmcm9tICcuL01lbnVDb250ZW50JztcbmltcG9ydCB7TWVudUl0ZW1zfSBmcm9tICcuL01lbnVJdGVtcyc7XG5pbXBvcnQge01lbnVPcGVuQnV0dG9ufSBmcm9tICcuL01lbnVPcGVuQnV0dG9uJztcbmltcG9ydCB7TWVudVNjcm9sbGFibGVJdGVtc30gZnJvbSAnLi9NZW51U2Nyb2xsYWJsZUl0ZW1zJztcblxuZXhwb3J0IGludGVyZmFjZSBIZWFkZXJNZW51UHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGNlbnRlckVsZW1lbnQ/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGxvZ29FbGVtZW50PzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyTWVudSA9ICh7Y2hpbGRyZW4sIGxvZ29FbGVtZW50ID0gbnVsbCwgY2VudGVyRWxlbWVudCA9IG51bGwsIC4uLnByb3BzfTogSGVhZGVyTWVudVByb3BzKSA9PiB7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdG9nZ2xlTWVudSA9ICgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHdpbmRvdy5zY3JvbGxUbygwLCAwKTtcbiAgICAgIHNldElzT3BlbihjdXJyZW50ID0+ICFjdXJyZW50KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY2xvc2VNZW51ID0gKCkgPT4gc2V0SXNPcGVuKGZhbHNlKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt7aGVpZ2h0OiAnNjRweCd9fSB7Li4ucHJvcHN9IGRhdGEtdWllLW5hbWU9XCJlbGVtZW50LWhlYWRlci1tZW51XCI+XG4gICAgICA8TWVudUNvbnRlbnQgb3Blbj17aXNPcGVufT5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCcsIHpJbmRleDogMn19IG9uQ2xpY2s9e2Nsb3NlTWVudX0+XG4gICAgICAgICAge2xvZ29FbGVtZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCd9fT57Y2VudGVyRWxlbWVudH08L2Rpdj5cbiAgICAgICAgPE1lbnVPcGVuQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17dG9nZ2xlTWVudX1cbiAgICAgICAgICBvcGVuPXtpc09wZW59XG4gICAgICAgICAgc3R5bGU9e3tqdXN0aWZ5U2VsZjogJ2VuZCcsIHBvc2l0aW9uOiBpc09wZW4gPyAnZml4ZWQnIDogdW5kZWZpbmVkLCByaWdodDogJzE2cHgnLCB0b3A6ICcyMXB4J319XG4gICAgICAgICAgZGF0YS11aWUtbmFtZT1cImRvLXRvZ2dsZS1oZWFkZXItbWVudVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxNZW51SXRlbXMgb25DbGljaz17Y2xvc2VNZW51fSBvcGVuPXtpc09wZW59PlxuICAgICAgICAgIDxNZW51U2Nyb2xsYWJsZUl0ZW1zPntjaGlsZHJlbn08L01lbnVTY3JvbGxhYmxlSXRlbXM+XG4gICAgICAgIDwvTWVudUl0ZW1zPlxuICAgICAgPC9NZW51Q29udGVudD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "jcxkag",
+  styles: "align-self:center;display:flex"
+} : {
+  name: "1nvzpve-HeaderMenu",
+  styles: "align-self:center;display:flex;label:HeaderMenu;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYWRlck1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9EYSIsImZpbGUiOiJIZWFkZXJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge01lbnVDb250ZW50fSBmcm9tICcuL01lbnVDb250ZW50JztcbmltcG9ydCB7TWVudUl0ZW1zfSBmcm9tICcuL01lbnVJdGVtcyc7XG5pbXBvcnQge01lbnVPcGVuQnV0dG9ufSBmcm9tICcuL01lbnVPcGVuQnV0dG9uJztcbmltcG9ydCB7TWVudVNjcm9sbGFibGVJdGVtc30gZnJvbSAnLi9NZW51U2Nyb2xsYWJsZUl0ZW1zJztcblxuZXhwb3J0IGludGVyZmFjZSBIZWFkZXJNZW51UHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGNlbnRlckVsZW1lbnQ/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGxvZ29FbGVtZW50PzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyTWVudSA9ICh7Y2hpbGRyZW4sIGxvZ29FbGVtZW50ID0gbnVsbCwgY2VudGVyRWxlbWVudCA9IG51bGwsIC4uLnByb3BzfTogSGVhZGVyTWVudVByb3BzKSA9PiB7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdG9nZ2xlTWVudSA9ICgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHdpbmRvdy5zY3JvbGxUbygwLCAwKTtcbiAgICAgIHNldElzT3BlbihjdXJyZW50ID0+ICFjdXJyZW50KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY2xvc2VNZW51ID0gKCkgPT4gc2V0SXNPcGVuKGZhbHNlKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt7aGVpZ2h0OiAnNjRweCd9fSB7Li4ucHJvcHN9IGRhdGEtdWllLW5hbWU9XCJlbGVtZW50LWhlYWRlci1tZW51XCI+XG4gICAgICA8TWVudUNvbnRlbnQgb3Blbj17aXNPcGVufT5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCcsIHpJbmRleDogMn19IG9uQ2xpY2s9e2Nsb3NlTWVudX0+XG4gICAgICAgICAge2xvZ29FbGVtZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCd9fT57Y2VudGVyRWxlbWVudH08L2Rpdj5cbiAgICAgICAgPE1lbnVPcGVuQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17dG9nZ2xlTWVudX1cbiAgICAgICAgICBvcGVuPXtpc09wZW59XG4gICAgICAgICAgc3R5bGU9e3tqdXN0aWZ5U2VsZjogJ2VuZCcsIHBvc2l0aW9uOiBpc09wZW4gPyAnZml4ZWQnIDogdW5kZWZpbmVkLCByaWdodDogJzE2cHgnLCB0b3A6ICcyMXB4J319XG4gICAgICAgICAgZGF0YS11aWUtbmFtZT1cImRvLXRvZ2dsZS1oZWFkZXItbWVudVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxNZW51SXRlbXMgb25DbGljaz17Y2xvc2VNZW51fSBvcGVuPXtpc09wZW59PlxuICAgICAgICAgIDxNZW51U2Nyb2xsYWJsZUl0ZW1zPntjaGlsZHJlbn08L01lbnVTY3JvbGxhYmxlSXRlbXM+XG4gICAgICAgIDwvTWVudUl0ZW1zPlxuICAgICAgPC9NZW51Q29udGVudD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var HeaderMenu = function HeaderMenu(_ref) {
+  var children = _ref.children,
+      _ref$logoElement = _ref.logoElement,
+      logoElement = _ref$logoElement === void 0 ? null : _ref$logoElement,
+      _ref$centerElement = _ref.centerElement,
+      centerElement = _ref$centerElement === void 0 ? null : _ref$centerElement,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useState = (0, _react2.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var toggleMenu = function toggleMenu() {
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+      setIsOpen(function (current) {
+        return !current;
+      });
+    }
+  };
+
+  var closeMenu = function closeMenu() {
+    return setIsOpen(false);
+  };
+
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: _ref2
+  }, props, {
+    "data-uie-name": "element-header-menu"
+  }), (0, _react.jsx)(_MenuContent.MenuContent, {
+    open: isOpen
+  }, (0, _react.jsx)("div", {
+    css: _ref3,
+    onClick: closeMenu
+  }, logoElement), (0, _react.jsx)("div", {
+    css: _ref4
+  }, centerElement), (0, _react.jsx)(_MenuOpenButton.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.jsx)(_MenuItems.MenuItems, {
+    onClick: closeMenu,
+    open: isOpen
+  }, (0, _react.jsx)(_MenuScrollableItems.MenuScrollableItems, null, children))));
+};
+
+exports.HeaderMenu = HeaderMenu;
+//# sourceMappingURL=HeaderMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["HeaderMenu.tsx"],"names":["HeaderMenu","children","logoElement","centerElement","props","isOpen","setIsOpen","toggleMenu","window","scrollTo","current","closeMenu","justifySelf","position","undefined","right","top"],"mappings":";;;;;;;;;;;;;;;;;AAoBA;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAAqF;AAAA,MAAnFC,QAAmF,QAAnFA,QAAmF;AAAA,8BAAzEC,WAAyE;AAAA,MAAzEA,WAAyE,iCAA3D,IAA2D;AAAA,gCAArDC,aAAqD;AAAA,MAArDA,aAAqD,mCAArC,IAAqC;AAAA,MAA5BC,KAA4B;;AAC7G,kBAA4B,sBAAS,KAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,QAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;AACjCA,MAAAA,MAAM,CAACC,QAAP,CAAgB,CAAhB,EAAmB,CAAnB;AACAH,MAAAA,SAAS,CAAC,UAAAI,OAAO;AAAA,eAAI,CAACA,OAAL;AAAA,OAAR,CAAT;AACD;AACF,GALD;;AAOA,MAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,WAAML,SAAS,CAAC,KAAD,CAAf;AAAA,GAAlB;;AAEA,SACE;AAAK,IAAA,GAAG;AAAR,KAAgCF,KAAhC;AAAuC,qBAAc;AAArD,MACE,gBAAC,wBAAD;AAAa,IAAA,IAAI,EAAEC;AAAnB,KACE;AAAK,IAAA,GAAG,OAAR;AAA6D,IAAA,OAAO,EAAEM;AAAtE,KACGT,WADH,CADF,EAIE;AAAK,IAAA,GAAG;AAAR,KAAmDC,aAAnD,CAJF,EAKE,gBAAC,8BAAD;AACE,IAAA,OAAO,EAAEI,UADX;AAEE,IAAA,IAAI,EAAEF,MAFR;AAGE,IAAA,KAAK,EAAE;AAACO,MAAAA,WAAW,EAAE,KAAd;AAAqBC,MAAAA,QAAQ,EAAER,MAAM,GAAG,OAAH,GAAaS,SAAlD;AAA6DC,MAAAA,KAAK,EAAE,MAApE;AAA4EC,MAAAA,GAAG,EAAE;AAAjF,KAHT;AAIE,qBAAc;AAJhB,IALF,EAWE,gBAAC,oBAAD;AAAW,IAAA,OAAO,EAAEL,SAApB;AAA+B,IAAA,IAAI,EAAEN;AAArC,KACE,gBAAC,wCAAD,QAAsBJ,QAAtB,CADF,CAXF,CADF,CADF;AAmBD,CA/BM","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';\nimport {useState} from 'react';\n\nimport {MenuContent} from './MenuContent';\nimport {MenuItems} from './MenuItems';\nimport {MenuOpenButton} from './MenuOpenButton';\nimport {MenuScrollableItems} from './MenuScrollableItems';\n\nexport interface HeaderMenuProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  centerElement?: React.ReactNode;\n  logoElement?: React.ReactNode;\n}\n\nexport const HeaderMenu = ({children, logoElement = null, centerElement = null, ...props}: HeaderMenuProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggleMenu = () => {\n    if (typeof window !== 'undefined') {\n      window.scrollTo(0, 0);\n      setIsOpen(current => !current);\n    }\n  };\n\n  const closeMenu = () => setIsOpen(false);\n\n  return (\n    <div css={{height: '64px'}} {...props} data-uie-name=\"element-header-menu\">\n      <MenuContent open={isOpen}>\n        <div css={{alignSelf: 'center', display: 'flex', zIndex: 2}} onClick={closeMenu}>\n          {logoElement}\n        </div>\n        <div css={{alignSelf: 'center', display: 'flex'}}>{centerElement}</div>\n        <MenuOpenButton\n          onClick={toggleMenu}\n          open={isOpen}\n          style={{justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px'}}\n          data-uie-name=\"do-toggle-header-menu\"\n        />\n        <MenuItems onClick={closeMenu} open={isOpen}>\n          <MenuScrollableItems>{children}</MenuScrollableItems>\n        </MenuItems>\n      </MenuContent>\n    </div>\n  );\n};\n"],"file":"HeaderMenu.js"}

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

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

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

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

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

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+export declare type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;
+export declare const DESKTOP_HEADER_SUB_MENU_CLASSNAME = "desktopStyledHeaderSubMenu";
+export declare const DesktopStyledHeaderSubMenu: (props: DesktopStyledHeaderSubMenuProps<HTMLDivElement>) => jsx.JSX.Element;
+export interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {
+    open?: boolean;
+}
+export declare const MobileStyledHeaderSubMenu: (props: MobileStyledHeaderSubMenuProps) => jsx.JSX.Element;
+export interface HeaderSubMenuProps<T = HTMLParagraphElement> extends React.PropsWithRef<React.HTMLProps<T>> {
+    caption: string;
+    isOpen: boolean;
+}
+export declare const HeaderSubMenu: React.FC<HeaderSubMenuProps>;

package/src/Layout/headerMenu/HeaderSubMenu.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderSubMenu = exports.MobileStyledHeaderSubMenu = exports.DesktopStyledHeaderSubMenu = exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+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 _Identity = require("../../Identity");
+
+var _motions = require("../../Identity/motions");
+
+var _mediaQueries = require("../../mediaQueries");
+
+var _MenuSubLink = require("./MenuSubLink");
+
+var _MenuLink = require("./MenuLink");
+
+var _excluded = ["caption", "isOpen", "children"];
+
+var desktopStyledHeaderSubMenuStyle = function desktopStyledHeaderSubMenuStyle(theme, props) {
+  return (0, _defineProperty2["default"])({
+    alignItems: 'left',
+    backgroundColor: _Identity.COLOR.tint(theme.general.backgroundColor, 0.16),
+    borderRadius: '8px',
+    boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minWidth: '200px',
+    padding: '8px 8px',
+    span: {
+      '&:hover': {
+        backgroundColor: theme.general.backgroundColor,
+        borderRadius: '4px'
+      },
+      alignItems: 'center',
+      display: 'flex',
+      height: '30px',
+      margin: 0,
+      paddingLeft: '10px !important',
+      paddingRight: '10px !important',
+      whiteSpace: 'nowrap'
+    }
+  }, ".".concat(_MenuLink.MENU_LINK_CLASSNAME, ":nth-of-type(n+2)"), {
+    marginTop: '8px'
+  });
+};
+
+var DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';
+exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = DESKTOP_HEADER_SUB_MENU_CLASSNAME;
+
+var DesktopStyledHeaderSubMenu = function DesktopStyledHeaderSubMenu(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    className: DESKTOP_HEADER_SUB_MENU_CLASSNAME,
+    css: function css(theme) {
+      return desktopStyledHeaderSubMenuStyle(theme, props);
+    }
+  }, props));
+};
+
+exports.DesktopStyledHeaderSubMenu = DesktopStyledHeaderSubMenu;
+
+var mobileStyledHeaderSubMenuStyle = function mobileStyledHeaderSubMenuStyle(props) {
+  return {
+    '*': {
+      fontWeight: 200
+    },
+    alignItems: 'center',
+    borderTop: "1px solid ".concat(_Identity.COLOR.GRAY_LIGHTEN_72),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    marginTop: '16px',
+    paddingTop: '8px'
+  };
+};
+
+var MobileStyledHeaderSubMenu = function MobileStyledHeaderSubMenu(props) {
+  return (0, _react.jsx)("span", (0, _extends2["default"])({
+    css: mobileStyledHeaderSubMenuStyle(props)
+  }, props));
+};
+
+exports.MobileStyledHeaderSubMenu = MobileStyledHeaderSubMenu;
+
+var HeaderSubMenu = function HeaderSubMenu(_ref2) {
+  var caption = _ref2.caption,
+      isOpen = _ref2.isOpen,
+      children = _ref2.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var isDesktop = typeof window !== 'undefined' && window.matchMedia("(".concat(_mediaQueries.QUERY.desktop, ")")).matches;
+  return (0, _react.jsx)(_MenuSubLink.MenuSubLink, (0, _extends2["default"])({}, props, {
+    style: {
+      cursor: 'pointer',
+      display: 'inline-block',
+      position: 'relative',
+      textAlign: 'center'
+    }
+  }), (0, _react.jsx)("span", null, caption), (0, _react.jsx)(_Identity.Opacity, {
+    "in": isOpen && isDesktop,
+    timeout: _motions.DURATION.DEFAULT,
+    style: {
+      display: 'inline-block',
+      left: -18,
+      marginTop: 10,
+      paddingTop: 20,
+      position: 'absolute',
+      zIndex: 1
+    },
+    mountOnEnter: false,
+    unmountOnExit: false
+  }, (0, _react.jsx)(_Identity.YAxisMovement, {
+    "in": isOpen && isDesktop,
+    startValue: '-30px',
+    endValue: '0px',
+    style: {
+      display: 'inline-block'
+    },
+    timeout: _motions.DURATION.DEFAULT,
+    mountOnEnter: false,
+    unmountOnExit: true
+  }, (0, _react.jsx)(DesktopStyledHeaderSubMenu, null, children))), (0, _react.jsx)(_Identity.Opacity, {
+    "in": isOpen && !isDesktop,
+    timeout: _motions.DURATION.DEFAULT,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    style: {
+      display: 'block',
+      position: 'relative'
+    }
+  }, (0, _react.jsx)(_Identity.Slide, {
+    "in": isOpen && !isDesktop,
+    startValue: '-56%',
+    endValue: '0',
+    timeout: _motions.DURATION.DEFAULT,
+    mountOnEnter: false,
+    unmountOnExit: true
+  }, (0, _react.jsx)(MobileStyledHeaderSubMenu, null, children))));
+};
+
+exports.HeaderSubMenu = HeaderSubMenu;
+//# sourceMappingURL=HeaderSubMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["HeaderSubMenu.tsx"],"names":["desktopStyledHeaderSubMenuStyle","theme","props","alignItems","backgroundColor","COLOR","tint","general","borderRadius","boxShadow","display","flexDirection","justifyContent","minWidth","padding","span","height","margin","paddingLeft","paddingRight","whiteSpace","MENU_LINK_CLASSNAME","marginTop","DESKTOP_HEADER_SUB_MENU_CLASSNAME","DesktopStyledHeaderSubMenu","mobileStyledHeaderSubMenuStyle","fontWeight","borderTop","GRAY_LIGHTEN_72","paddingTop","MobileStyledHeaderSubMenu","HeaderSubMenu","caption","isOpen","children","isDesktop","window","matchMedia","QUERY","desktop","matches","cursor","position","textAlign","DURATION","DEFAULT","left","zIndex"],"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, Opacity, Slide, YAxisMovement} from '../../Identity';\nimport {DURATION} from '../../Identity/motions';\nimport {QUERY} from '../../mediaQueries';\nimport {Theme} from '../Theme';\nimport {MenuSubLink} from './MenuSubLink';\nimport {MENU_LINK_CLASSNAME} from './MenuLink';\n\nexport type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst desktopStyledHeaderSubMenuStyle: (theme: Theme, props: DesktopStyledHeaderSubMenuProps) => CSSObject = (\n  theme,\n  props,\n) => ({\n  alignItems: 'left',\n  backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n  borderRadius: '8px',\n  boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  minWidth: '200px',\n  padding: '8px 8px',\n  span: {\n    '&:hover': {\n      backgroundColor: theme.general.backgroundColor,\n      borderRadius: '4px',\n    },\n    alignItems: 'center',\n    display: 'flex',\n    height: '30px',\n    margin: 0,\n    paddingLeft: '10px !important',\n    paddingRight: '10px !important',\n    whiteSpace: 'nowrap',\n  },\n  [`.${MENU_LINK_CLASSNAME}:nth-of-type(n+2)`]: {\n    marginTop: '8px',\n  },\n});\n\nexport const DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';\n\nexport const DesktopStyledHeaderSubMenu = (props: DesktopStyledHeaderSubMenuProps) => (\n  <div\n    className={DESKTOP_HEADER_SUB_MENU_CLASSNAME}\n    css={(theme: Theme) => desktopStyledHeaderSubMenuStyle(theme, props)}\n    {...props}\n  />\n);\n\nexport interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nconst mobileStyledHeaderSubMenuStyle: (props: MobileStyledHeaderSubMenuProps) => CSSObject = props => ({\n  '*': {\n    fontWeight: 200,\n  },\n  alignItems: 'center',\n  borderTop: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  marginTop: '16px',\n  paddingTop: '8px',\n});\n\nexport const MobileStyledHeaderSubMenu = (props: MobileStyledHeaderSubMenuProps) => (\n  <span css={mobileStyledHeaderSubMenuStyle(props)} {...props} />\n);\n\nexport interface HeaderSubMenuProps<T = HTMLParagraphElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  caption: string;\n  isOpen: boolean;\n}\n\nexport const HeaderSubMenu: React.FC<HeaderSubMenuProps> = ({caption, isOpen, children, ...props}) => {\n  const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${QUERY.desktop})`).matches;\n  return (\n    <MenuSubLink\n      {...props}\n      style={{cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center'}}\n    >\n      <span>{caption}</span>\n      <Opacity\n        in={isOpen && isDesktop}\n        timeout={DURATION.DEFAULT}\n        style={{display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1}}\n        mountOnEnter={false}\n        unmountOnExit={false}\n      >\n        <YAxisMovement\n          in={isOpen && isDesktop}\n          startValue={'-30px'}\n          endValue={'0px'}\n          style={{display: 'inline-block'}}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <DesktopStyledHeaderSubMenu>{children}</DesktopStyledHeaderSubMenu>\n        </YAxisMovement>\n      </Opacity>\n      <Opacity\n        in={isOpen && !isDesktop}\n        timeout={DURATION.DEFAULT}\n        mountOnEnter={false}\n        unmountOnExit={false}\n        style={{display: 'block', position: 'relative'}}\n      >\n        <Slide\n          in={isOpen && !isDesktop}\n          startValue={'-56%'}\n          endValue={'0'}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <MobileStyledHeaderSubMenu>{children}</MobileStyledHeaderSubMenu>\n        </Slide>\n      </Opacity>\n    </MenuSubLink>\n  );\n};\n"],"file":"HeaderSubMenu.js"}

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

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

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

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

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react';
+import { TextProps } from '../../Text';
+export interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {
+    open?: boolean;
+}
+export declare const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject;
+export declare const MenuContent: (props: MenuContentProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuContent.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuContent = exports.menuContentStyle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _util = require("../../util");
+
+var _Content = require("../Content");
+
+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 menuContentStyle = function menuContentStyle(props) {
+  return _objectSpread(_objectSpread({}, (0, _Content.contentStyle)(props)), {}, {
+    alignItems: 'center',
+    display: 'grid',
+    gridColumnGap: '8px',
+    gridTemplateColumns: '1fr auto 1fr',
+    height: '64px',
+    justifyContent: 'space-between',
+    left: props.open ? 0 : undefined,
+    position: props.open ? 'fixed' : undefined,
+    width: props.open ? '100%' : undefined,
+    zIndex: props.open ? 10000 : undefined
+  });
+};
+
+exports.menuContentStyle = menuContentStyle;
+
+var filterMenuContentProps = function filterMenuContentProps(props) {
+  return (0, _util.filterProps)(props, ['open']);
+};
+
+var MenuContent = function MenuContent(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: menuContentStyle(props)
+  }, filterMenuContentProps(props)));
+};
+
+exports.MenuContent = MenuContent;
+//# sourceMappingURL=MenuContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuContent.tsx"],"names":["menuContentStyle","props","alignItems","display","gridColumnGap","gridTemplateColumns","height","justifyContent","left","open","undefined","position","width","zIndex","filterMenuContentProps","MenuContent"],"mappings":";;;;;;;;;;;;;AAoBA;;AAGA;;AACA;;;;;;AAMO,IAAMA,gBAA8D,GAAG,SAAjEA,gBAAiE,CAAAC,KAAK;AAAA,yCAC9E,2BAAaA,KAAb,CAD8E;AAEjFC,IAAAA,UAAU,EAAE,QAFqE;AAGjFC,IAAAA,OAAO,EAAE,MAHwE;AAIjFC,IAAAA,aAAa,EAAE,KAJkE;AAKjFC,IAAAA,mBAAmB,EAAE,cAL4D;AAMjFC,IAAAA,MAAM,EAAE,MANyE;AAOjFC,IAAAA,cAAc,EAAE,eAPiE;AAQjFC,IAAAA,IAAI,EAAEP,KAAK,CAACQ,IAAN,GAAa,CAAb,GAAiBC,SAR0D;AASjFC,IAAAA,QAAQ,EAAEV,KAAK,CAACQ,IAAN,GAAa,OAAb,GAAuBC,SATgD;AAUjFE,IAAAA,KAAK,EAAEX,KAAK,CAACQ,IAAN,GAAa,MAAb,GAAsBC,SAVoD;AAWjFG,IAAAA,MAAM,EAAEZ,KAAK,CAACQ,IAAN,GAAa,KAAb,GAAqBC;AAXoD;AAAA,CAA5E;;;;AAcP,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,KAAD;AAAA,SAA6B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA7B;AAAA,CAA/B;;AAEO,IAAMc,WAAW,GAAG,SAAdA,WAAc,CAACd,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAED,gBAAgB,CAACC,KAAD;AAA1B,KAAuCa,sBAAsB,CAACb,KAAD,CAA7D,EADyB;AAAA,CAApB","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';\n\nimport {TextProps} from '../../Text';\nimport {filterProps} from '../../util';\nimport {contentStyle} from '../Content';\n\nexport interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {\n  open?: boolean;\n}\n\nexport const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject = props => ({\n  ...contentStyle(props),\n  alignItems: 'center',\n  display: 'grid',\n  gridColumnGap: '8px',\n  gridTemplateColumns: '1fr auto 1fr',\n  height: '64px',\n  justifyContent: 'space-between',\n  left: props.open ? 0 : undefined,\n  position: props.open ? 'fixed' : undefined,\n  width: props.open ? '100%' : undefined,\n  zIndex: props.open ? 10000 : undefined,\n});\n\nconst filterMenuContentProps = (props: MenuContentProps) => filterProps(props, ['open']);\n\nexport const MenuContent = (props: MenuContentProps) => (\n  <div css={menuContentStyle(props)} {...filterMenuContentProps(props)} />\n);\n"],"file":"MenuContent.js"}

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

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

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

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

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

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import React from 'react';
+import { CSSObject, jsx } from '@emotion/react';
+import { Theme } from '../Theme';
+export interface MenuItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    open?: boolean;
+}
+export declare const menuItemsStyle: <T>(theme: Theme, props: MenuItemsProps<T>) => CSSObject;
+export declare const MenuItems: (props: MenuItemsProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuItems.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItems = exports.menuItemsStyle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _mediaQueries = require("../../mediaQueries");
+
+var _util = require("../../util");
+
+/*
+ * 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 */
+var menuItemsStyle = function menuItemsStyle(theme, props) {
+  return (0, _defineProperty2["default"])({
+    alignSelf: 'center',
+    display: 'flex',
+    justifySelf: 'end'
+  }, _mediaQueries.media[_mediaQueries.QueryKeys.TABLET_DOWN], {
+    backgroundColor: theme.general.backgroundColor,
+    bottom: 0,
+    left: 0,
+    overflowY: 'auto',
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    transform: props.open ? 'translateX(0)' : 'translateX(110%)',
+    transition: 'transform 0.25s ease',
+    zIndex: 1
+  });
+};
+
+exports.menuItemsStyle = menuItemsStyle;
+
+var filterMenuItemProps = function filterMenuItemProps(props) {
+  return (0, _util.filterProps)(props, ['open']);
+};
+
+var MenuItems = function MenuItems(props) {
+  return (0, _react2.jsx)("div", (0, _extends2["default"])({
+    css: function css(theme) {
+      return menuItemsStyle(theme, props);
+    }
+  }, filterMenuItemProps(props)));
+};
+
+exports.MenuItems = MenuItems;
+//# sourceMappingURL=MenuItems.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuItems.tsx"],"names":["menuItemsStyle","theme","props","alignSelf","display","justifySelf","media","QueryKeys","TABLET_DOWN","backgroundColor","general","bottom","left","overflowY","position","right","top","transform","open","transition","zIndex","filterMenuItemProps","MenuItems"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,cAAwE,GAAG,SAA3EA,cAA2E,CAACC,KAAD,EAAQC,KAAR;AAAA;AACtFC,IAAAA,SAAS,EAAE,QAD2E;AAEtFC,IAAAA,OAAO,EAAE,MAF6E;AAGtFC,IAAAA,WAAW,EAAE;AAHyE,KAIrFC,oBAAMC,wBAAUC,WAAhB,CAJqF,EAItD;AAC9BC,IAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcD,eADD;AAE9BE,IAAAA,MAAM,EAAE,CAFsB;AAG9BC,IAAAA,IAAI,EAAE,CAHwB;AAI9BC,IAAAA,SAAS,EAAE,MAJmB;AAK9BC,IAAAA,QAAQ,EAAE,OALoB;AAM9BC,IAAAA,KAAK,EAAE,CANuB;AAO9BC,IAAAA,GAAG,EAAE,CAPyB;AAQ9BC,IAAAA,SAAS,EAAEf,KAAK,CAACgB,IAAN,GAAa,eAAb,GAA+B,kBARZ;AAS9BC,IAAAA,UAAU,EAAE,sBATkB;AAU9BC,IAAAA,MAAM,EAAE;AAVsB,GAJsD;AAAA,CAAjF;;;;AAkBP,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACnB,KAAD;AAAA,SAA2B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA3B;AAAA,CAA5B;;AAEO,IAAMoB,SAAS,GAAG,SAAZA,SAAY,CAACpB,KAAD;AAAA,SACvB;AAAK,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,cAAc,CAACC,KAAD,EAAQC,KAAR,CAAhC;AAAA;AAAV,KAA8DmB,mBAAmB,CAACnB,KAAD,CAAjF,EADuB;AAAA,CAAlB","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 {QueryKeys, media} from '../../mediaQueries';\nimport {filterProps} from '../../util';\nimport {Theme} from '../Theme';\n\nexport interface MenuItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuItemsStyle: <T>(theme: Theme, props: MenuItemsProps<T>) => CSSObject = (theme, props) => ({\n  alignSelf: 'center',\n  display: 'flex',\n  justifySelf: 'end',\n  [media[QueryKeys.TABLET_DOWN]]: {\n    backgroundColor: theme.general.backgroundColor,\n    bottom: 0,\n    left: 0,\n    overflowY: 'auto',\n    position: 'fixed',\n    right: 0,\n    top: 0,\n    transform: props.open ? 'translateX(0)' : 'translateX(110%)',\n    transition: 'transform 0.25s ease',\n    zIndex: 1,\n  },\n});\n\nconst filterMenuItemProps = (props: MenuItemsProps) => filterProps(props, ['open']);\n\nexport const MenuItems = (props: MenuItemsProps) => (\n  <div css={(theme: Theme) => menuItemsStyle(theme, props)} {...filterMenuItemProps(props)} />\n);\n"],"file":"MenuItems.js"}

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

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

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

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

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react';
+import { LinkProps } from '../../Text';
+import { Theme } from '../Theme';
+export interface MenuLinkProps<T = HTMLAnchorElement> extends LinkProps<T> {
+    button?: boolean;
+}
+export declare const menuLinkStyle: <T>(theme: Theme, props: MenuLinkProps<T>) => CSSObject;
+export declare const MENU_LINK_CLASSNAME = "menu-link";
+export declare const filterMenuLinkProps: (props: MenuLinkProps) => Object;
+export declare const MenuLink: (props: MenuLinkProps) => jsx.JSX.Element;