@wireapp/react-ui-kit 8.17.3 → 8.17.4

package/src/Layout/Column.js

@@ -1,38 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.filterColumnsProps = exports.Columns = exports.Column = 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");
 var _sizes = require("./sizes");
-/*
- * 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var filterColumnsProps = function filterColumnsProps(props) {
   return (0, _util.filterProps)(props, ['query']);
 };
@@ -40,7 +19,7 @@ exports.filterColumnsProps = filterColumnsProps;
 var columnsStyle = function columnsStyle(_ref) {
   var _ref$query = _ref.query,
     query = _ref$query === void 0 ? _mediaQueries.QueryKeys.MOBILE : _ref$query;
-  return (0, _defineProperty2["default"])({
+  return _defineProperty({
     display: 'flex',
     marginLeft: "-".concat(_sizes.GUTTER, "px")
   }, _mediaQueries.media[query], {
@@ -48,7 +27,7 @@ var columnsStyle = function columnsStyle(_ref) {
   });
 };
 var Columns = function Columns(props) {
-  return (0, _react2.jsx)("div", (0, _extends2["default"])({
+  return (0, _react2.jsx)("div", _extends({
     css: columnsStyle(props)
   }, filterColumnsProps(props)));
 };
@@ -63,7 +42,7 @@ var columnStyle = function columnStyle(props) {
   };
 };
 var Column = function Column(props) {
-  return (0, _react2.jsx)("div", (0, _extends2["default"])({
+  return (0, _react2.jsx)("div", _extends({
     css: columnStyle(props)
   }, props));
 };

package/src/Layout/Column.js.map

@@ -1 +1 @@
-{"version":3,"file":"Column.js","names":["filterColumnsProps","props","filterProps","columnsStyle","query","QueryKeys","MOBILE","display","marginLeft","GUTTER","media","flexDirection","Columns","columnStyle","flexBasis","flexGrow","flexShrink","Column"],"sources":["Column.tsx"],"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 {GUTTER} from './sizes';\n\nexport interface ColumnsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  query?: QueryKeys;\n}\n\nexport const filterColumnsProps = (props: ColumnsProps) => {\n  return filterProps(props, ['query']);\n};\n\nconst columnsStyle: <T>(props: ColumnsProps<T>) => CSSObject = ({query = QueryKeys.MOBILE}) => ({\n  display: 'flex',\n  marginLeft: `-${GUTTER}px`,\n  [media[query]]: {flexDirection: 'column'},\n});\n\nexport const Columns = (props: ColumnsProps) => <div css={columnsStyle(props)} {...filterColumnsProps(props)} />;\n\nexport type ColumnProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst columnStyle: <T>(props: ColumnProps<T>) => CSSObject = props => ({\n  display: 'block',\n  flexBasis: '0',\n  flexGrow: 1,\n  flexShrink: 1,\n  marginLeft: `${GUTTER}px`,\n});\n\nexport const Column = (props: ColumnProps) => <div css={columnStyle(props)} {...props} />;\n"],"mappings":";;;;;;;;;AAoBA;AACA;AAEA;AACA;AACA;AAzBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAYO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAmB,EAAK;EACzD,OAAO,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;AACtC,CAAC;AAAC;AAEF,IAAME,YAAsD,GAAG,SAAzDA,YAAsD;EAAA,sBAAKC,KAAK;IAALA,KAAK,2BAAGC,uBAAS,CAACC,MAAM;EAAA;IACvFC,OAAO,EAAE,MAAM;IACfC,UAAU,aAAMC,aAAM;EAAI,GACzBC,mBAAK,CAACN,KAAK,CAAC,EAAG;IAACO,aAAa,EAAE;EAAQ,CAAC;AAAA,CACzC;AAEK,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIX,KAAmB;EAAA,OAAK;IAAK,GAAG,EAAEE,YAAY,CAACF,KAAK;EAAE,GAAKD,kBAAkB,CAACC,KAAK,CAAC,EAAI;AAAA;AAAC;AAIjH,IAAMY,WAAoD,GAAG,SAAvDA,WAAoD,CAAGZ,KAAK;EAAA,OAAK;IACrEM,OAAO,EAAE,OAAO;IAChBO,SAAS,EAAE,GAAG;IACdC,QAAQ,EAAE,CAAC;IACXC,UAAU,EAAE,CAAC;IACbR,UAAU,YAAKC,aAAM;EACvB,CAAC;AAAA,CAAC;AAEK,IAAMQ,MAAM,GAAG,SAATA,MAAM,CAAIhB,KAAkB;EAAA,OAAK;IAAK,GAAG,EAAEY,WAAW,CAACZ,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}
+{"version":3,"file":"Column.js","names":["filterColumnsProps","props","filterProps","columnsStyle","query","QueryKeys","MOBILE","display","marginLeft","GUTTER","media","flexDirection","Columns","columnStyle","flexBasis","flexGrow","flexShrink","Column"],"sources":["Column.tsx"],"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 {GUTTER} from './sizes';\n\nexport interface ColumnsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  query?: QueryKeys;\n}\n\nexport const filterColumnsProps = (props: ColumnsProps) => {\n  return filterProps(props, ['query']);\n};\n\nconst columnsStyle: <T>(props: ColumnsProps<T>) => CSSObject = ({query = QueryKeys.MOBILE}) => ({\n  display: 'flex',\n  marginLeft: `-${GUTTER}px`,\n  [media[query]]: {flexDirection: 'column'},\n});\n\nexport const Columns = (props: ColumnsProps) => <div css={columnsStyle(props)} {...filterColumnsProps(props)} />;\n\nexport type ColumnProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst columnStyle: <T>(props: ColumnProps<T>) => CSSObject = props => ({\n  display: 'block',\n  flexBasis: '0',\n  flexGrow: 1,\n  flexShrink: 1,\n  marginLeft: `${GUTTER}px`,\n});\n\nexport const Column = (props: ColumnProps) => <div css={columnStyle(props)} {...props} />;\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AACA;AAA+B;AAAA;AAAA;AAMxB,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAmB,EAAK;EACzD,OAAO,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;AACtC,CAAC;AAAC;AAEF,IAAME,YAAsD,GAAG,SAAzDA,YAAsD;EAAA,sBAAKC,KAAK;IAALA,KAAK,2BAAGC,uBAAS,CAACC,MAAM;EAAA;IACvFC,OAAO,EAAE,MAAM;IACfC,UAAU,aAAMC,aAAM;EAAI,GACzBC,mBAAK,CAACN,KAAK,CAAC,EAAG;IAACO,aAAa,EAAE;EAAQ,CAAC;AAAA,CACzC;AAEK,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIX,KAAmB;EAAA,OAAK;IAAK,GAAG,EAAEE,YAAY,CAACF,KAAK;EAAE,GAAKD,kBAAkB,CAACC,KAAK,CAAC,EAAI;AAAA;AAAC;AAIjH,IAAMY,WAAoD,GAAG,SAAvDA,WAAoD,CAAGZ,KAAK;EAAA,OAAK;IACrEM,OAAO,EAAE,OAAO;IAChBO,SAAS,EAAE,GAAG;IACdC,QAAQ,EAAE,CAAC;IACXC,UAAU,EAAE,CAAC;IACbR,UAAU,YAAKC,aAAM;EACvB,CAAC;AAAA,CAAC;AAEK,IAAMQ,MAAM,GAAG,SAATA,MAAM,CAAIhB,KAAkB;EAAA,OAAK;IAAK,GAAG,EAAEY,WAAW,CAACZ,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}

package/src/Layout/Container.js

@@ -1,38 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerXXS = exports.ContainerXS = exports.ContainerSM = exports.ContainerMD = exports.ContainerLG = exports.Container = 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 _mediaQueries = require("../mediaQueries");
 var _util = require("../util");
 var _sizes = require("./sizes");
-/*
- * 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var LEVEL = {
   lg: _sizes.WIDTH.DESKTOP_MAX,
   md: _sizes.WIDTH.TABLET_MAX,
@@ -47,7 +26,7 @@ var containerStyle = function containerStyle(_ref) {
     level = _ref$level === void 0 ? undefined : _ref$level,
     _ref$verticalCenter = _ref.verticalCenter,
     verticalCenter = _ref$verticalCenter === void 0 ? false : _ref$verticalCenter;
-  return (0, _defineProperty2["default"])({
+  return _defineProperty({
     margin: verticalCenter ? 'auto' : '0 auto',
     maxWidth: level ? "".concat(LEVEL[level], "px") : undefined,
     position: 'relative',
@@ -62,42 +41,42 @@ var filterContainerProps = function filterContainerProps(props) {
   return (0, _util.filterProps)(props, ['centerText', 'level', 'verticalCenter']);
 };
 var Container = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", _extends({
     ref: ref,
     css: containerStyle(props)
   }, filterContainerProps(props)));
 });
 exports.Container = Container;
 var ContainerLG = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)(Container, (0, _extends2["default"])({
+  return (0, _react.jsx)(Container, _extends({
     ref: ref,
     level: 'lg'
   }, props));
 });
 exports.ContainerLG = ContainerLG;
 var ContainerMD = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)(Container, (0, _extends2["default"])({
+  return (0, _react.jsx)(Container, _extends({
     ref: ref,
     level: 'md'
   }, props));
 });
 exports.ContainerMD = ContainerMD;
 var ContainerSM = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)(Container, (0, _extends2["default"])({
+  return (0, _react.jsx)(Container, _extends({
     ref: ref,
     level: 'sm'
   }, props));
 });
 exports.ContainerSM = ContainerSM;
 var ContainerXS = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)(Container, (0, _extends2["default"])({
+  return (0, _react.jsx)(Container, _extends({
     ref: ref,
     level: 'xs'
   }, props));
 });
 exports.ContainerXS = ContainerXS;
 var ContainerXXS = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)(Container, (0, _extends2["default"])({
+  return (0, _react.jsx)(Container, _extends({
     ref: ref,
     level: 'xxs'
   }, props));

package/src/Layout/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","names":["LEVEL","lg","WIDTH","DESKTOP_MAX","md","TABLET_MAX","sm","TABLET_MIN","xs","MOBILE","xxs","TINY","containerStyle","centerText","level","undefined","verticalCenter","margin","maxWidth","position","textAlign","width","media","QueryKeys","DESKTOP","padding","DESKTOP_MIN","GUTTER","filterContainerProps","props","filterProps","Container","React","forwardRef","ref","ContainerLG","ContainerMD","ContainerSM","ContainerXS","ContainerXXS"],"sources":["Container.tsx"],"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 {QueryKeys, media} from '../mediaQueries';\nimport {filterProps} from '../util';\nimport {GUTTER, WIDTH} from './sizes';\n\nexport interface ContainerProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  centerText?: boolean;\n  level?: keyof Level;\n  verticalCenter?: boolean;\n}\n\nexport interface Level {\n  lg: number;\n  md: number;\n  sm: number;\n  xs: number;\n  xxs: number;\n}\n\nconst LEVEL: Level = {\n  lg: WIDTH.DESKTOP_MAX,\n  md: WIDTH.TABLET_MAX,\n  sm: WIDTH.TABLET_MIN,\n  xs: WIDTH.MOBILE,\n  xxs: WIDTH.TINY,\n};\n\nconst containerStyle: <T>(props: ContainerProps<T>) => CSSObject = ({\n  centerText = false,\n  level = undefined,\n  verticalCenter = false,\n}) => ({\n  margin: verticalCenter ? 'auto' : '0 auto',\n  maxWidth: level ? `${LEVEL[level]}px` : undefined,\n  position: 'relative',\n  textAlign: centerText ? 'center' : 'left',\n  width: '100%',\n  [media[QueryKeys.DESKTOP]]: level\n    ? undefined\n    : {\n        padding: 0,\n        width: `${WIDTH.DESKTOP_MIN - GUTTER * 2}px`,\n      },\n});\n\nconst filterContainerProps = (props: ContainerProps) => filterProps(props, ['centerText', 'level', 'verticalCenter']);\n\nexport const Container: React.FC<ContainerProps> = React.forwardRef<HTMLDivElement, ContainerProps>((props, ref) => (\n  <div ref={ref} css={containerStyle(props)} {...filterContainerProps(props)} />\n));\n\nexport type LevelContainerProps = Omit<ContainerProps, 'level'>;\n\nexport const ContainerLG = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'lg'} {...props} />\n));\nexport const ContainerMD = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'md'} {...props} />\n));\nexport const ContainerSM = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'sm'} {...props} />\n));\nexport const ContainerXS = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'xs'} {...props} />\n));\nexport const ContainerXXS = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'xxs'} {...props} />\n));\n"],"mappings":"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"}
+{"version":3,"file":"Container.js","names":["LEVEL","lg","WIDTH","DESKTOP_MAX","md","TABLET_MAX","sm","TABLET_MIN","xs","MOBILE","xxs","TINY","containerStyle","centerText","level","undefined","verticalCenter","margin","maxWidth","position","textAlign","width","media","QueryKeys","DESKTOP","padding","DESKTOP_MIN","GUTTER","filterContainerProps","props","filterProps","Container","React","forwardRef","ref","ContainerLG","ContainerMD","ContainerSM","ContainerXS","ContainerXXS"],"sources":["Container.tsx"],"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 {QueryKeys, media} from '../mediaQueries';\nimport {filterProps} from '../util';\nimport {GUTTER, WIDTH} from './sizes';\n\nexport interface ContainerProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  centerText?: boolean;\n  level?: keyof Level;\n  verticalCenter?: boolean;\n}\n\nexport interface Level {\n  lg: number;\n  md: number;\n  sm: number;\n  xs: number;\n  xxs: number;\n}\n\nconst LEVEL: Level = {\n  lg: WIDTH.DESKTOP_MAX,\n  md: WIDTH.TABLET_MAX,\n  sm: WIDTH.TABLET_MIN,\n  xs: WIDTH.MOBILE,\n  xxs: WIDTH.TINY,\n};\n\nconst containerStyle: <T>(props: ContainerProps<T>) => CSSObject = ({\n  centerText = false,\n  level = undefined,\n  verticalCenter = false,\n}) => ({\n  margin: verticalCenter ? 'auto' : '0 auto',\n  maxWidth: level ? `${LEVEL[level]}px` : undefined,\n  position: 'relative',\n  textAlign: centerText ? 'center' : 'left',\n  width: '100%',\n  [media[QueryKeys.DESKTOP]]: level\n    ? undefined\n    : {\n        padding: 0,\n        width: `${WIDTH.DESKTOP_MIN - GUTTER * 2}px`,\n      },\n});\n\nconst filterContainerProps = (props: ContainerProps) => filterProps(props, ['centerText', 'level', 'verticalCenter']);\n\nexport const Container: React.FC<ContainerProps> = React.forwardRef<HTMLDivElement, ContainerProps>((props, ref) => (\n  <div ref={ref} css={containerStyle(props)} {...filterContainerProps(props)} />\n));\n\nexport type LevelContainerProps = Omit<ContainerProps, 'level'>;\n\nexport const ContainerLG = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'lg'} {...props} />\n));\nexport const ContainerMD = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'md'} {...props} />\n));\nexport const ContainerSM = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'sm'} {...props} />\n));\nexport const ContainerXS = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'xs'} {...props} />\n));\nexport const ContainerXXS = React.forwardRef<HTMLDivElement, LevelContainerProps>((props, ref) => (\n  <Container ref={ref} level={'xxs'} {...props} />\n));\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAgBtC,IAAMA,KAAY,GAAG;EACnBC,EAAE,EAAEC,YAAK,CAACC,WAAW;EACrBC,EAAE,EAAEF,YAAK,CAACG,UAAU;EACpBC,EAAE,EAAEJ,YAAK,CAACK,UAAU;EACpBC,EAAE,EAAEN,YAAK,CAACO,MAAM;EAChBC,GAAG,EAAER,YAAK,CAACS;AACb,CAAC;AAED,IAAMC,cAA0D,GAAG,SAA7DA,cAA0D;EAAA,2BAC9DC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,kBAClBC,KAAK;IAALA,KAAK,2BAAGC,SAAS;IAAA,2BACjBC,cAAc;IAAdA,cAAc,oCAAG,KAAK;EAAA;IAEtBC,MAAM,EAAED,cAAc,GAAG,MAAM,GAAG,QAAQ;IAC1CE,QAAQ,EAAEJ,KAAK,aAAMd,KAAK,CAACc,KAAK,CAAC,UAAOC,SAAS;IACjDI,QAAQ,EAAE,UAAU;IACpBC,SAAS,EAAEP,UAAU,GAAG,QAAQ,GAAG,MAAM;IACzCQ,KAAK,EAAE;EAAM,GACZC,mBAAK,CAACC,uBAAS,CAACC,OAAO,CAAC,EAAGV,KAAK,GAC7BC,SAAS,GACT;IACEU,OAAO,EAAE,CAAC;IACVJ,KAAK,YAAKnB,YAAK,CAACwB,WAAW,GAAGC,aAAM,GAAG,CAAC;EAC1C,CAAC;AAAA,CACL;AAEF,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIC,KAAqB;EAAA,OAAK,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;AAAA;AAE9G,IAAME,SAAmC,gBAAGC,kBAAK,CAACC,UAAU,CAAiC,UAACJ,KAAK,EAAEK,GAAG;EAAA,OAC7G;IAAK,GAAG,EAAEA,GAAI;IAAC,GAAG,EAAEtB,cAAc,CAACiB,KAAK;EAAE,GAAKD,oBAAoB,CAACC,KAAK,CAAC,EAAI;AAAA,CAC/E,CAAC;AAAC;AAII,IAAMM,WAAW,gBAAGH,kBAAK,CAACC,UAAU,CAAsC,UAACJ,KAAK,EAAEK,GAAG;EAAA,OAC1F,gBAAC,SAAS;IAAC,GAAG,EAAEA,GAAI;IAAC,KAAK,EAAE;EAAK,GAAKL,KAAK,EAAI;AAAA,CAChD,CAAC;AAAC;AACI,IAAMO,WAAW,gBAAGJ,kBAAK,CAACC,UAAU,CAAsC,UAACJ,KAAK,EAAEK,GAAG;EAAA,OAC1F,gBAAC,SAAS;IAAC,GAAG,EAAEA,GAAI;IAAC,KAAK,EAAE;EAAK,GAAKL,KAAK,EAAI;AAAA,CAChD,CAAC;AAAC;AACI,IAAMQ,WAAW,gBAAGL,kBAAK,CAACC,UAAU,CAAsC,UAACJ,KAAK,EAAEK,GAAG;EAAA,OAC1F,gBAAC,SAAS;IAAC,GAAG,EAAEA,GAAI;IAAC,KAAK,EAAE;EAAK,GAAKL,KAAK,EAAI;AAAA,CAChD,CAAC;AAAC;AACI,IAAMS,WAAW,gBAAGN,kBAAK,CAACC,UAAU,CAAsC,UAACJ,KAAK,EAAEK,GAAG;EAAA,OAC1F,gBAAC,SAAS;IAAC,GAAG,EAAEA,GAAI;IAAC,KAAK,EAAE;EAAK,GAAKL,KAAK,EAAI;AAAA,CAChD,CAAC;AAAC;AACI,IAAMU,YAAY,gBAAGP,kBAAK,CAACC,UAAU,CAAsC,UAACJ,KAAK,EAAEK,GAAG;EAAA,OAC3F,gBAAC,SAAS;IAAC,GAAG,EAAEA,GAAI;IAAC,KAAK,EAAE;EAAM,GAAKL,KAAK,EAAI;AAAA,CACjD,CAAC;AAAC"}

package/src/Layout/Content.js

@@ -1,35 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.contentStyle = exports.Content = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _sizes = require("./sizes");
-/*
- * 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var contentStyle = function contentStyle(props) {
   return {
     display: 'flex',
@@ -40,7 +19,7 @@ var contentStyle = function contentStyle(props) {
 };
 exports.contentStyle = contentStyle;
 var Content = function Content(props) {
-  return (0, _react2.jsx)("div", (0, _extends2["default"])({
+  return (0, _react2.jsx)("div", _extends({
     css: contentStyle(props)
   }, props));
 };

package/src/Layout/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","names":["contentStyle","props","display","flexDirection","flexGrow","padding","GUTTER","Content"],"sources":["Content.tsx"],"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 {GUTTER} from './sizes';\n\nexport type ContentProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const contentStyle: <T>(props: ContentProps<T>) => CSSObject = props => ({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  padding: `0 ${GUTTER}px`,\n});\n\nexport const Content = (props: ContentProps) => <div css={contentStyle(props)} {...props} />;\n"],"mappings":";;;;;;;;AAoBA;AACA;AAEA;AAvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAQO,IAAMA,YAAsD,GAAG,SAAzDA,YAAsD,CAAGC,KAAK;EAAA,OAAK;IAC9EC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBC,QAAQ,EAAE,CAAC;IACXC,OAAO,cAAOC,aAAM;EACtB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIN,KAAmB;EAAA,OAAK;IAAK,GAAG,EAAED,YAAY,CAACC,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}
+{"version":3,"file":"Content.js","names":["contentStyle","props","display","flexDirection","flexGrow","padding","GUTTER","Content"],"sources":["Content.tsx"],"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 {GUTTER} from './sizes';\n\nexport type ContentProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const contentStyle: <T>(props: ContentProps<T>) => CSSObject = props => ({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  padding: `0 ${GUTTER}px`,\n});\n\nexport const Content = (props: ContentProps) => <div css={contentStyle(props)} {...props} />;\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AAA+B;AAAA;AAIxB,IAAMA,YAAsD,GAAG,SAAzDA,YAAsD,CAAGC,KAAK;EAAA,OAAK;IAC9EC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBC,QAAQ,EAAE,CAAC;IACXC,OAAO,cAAOC,aAAM;EACtB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIN,KAAmB;EAAA,OAAK;IAAK,GAAG,EAAED,YAAY,CAACC,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}

package/src/Layout/FlexBox.js

@@ -1,35 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.flexBoxStyle = exports.filterFlexBoxProps = exports.FlexBox = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _util = require("../util");
-/*
- * Wire
- * Copyright (C) 2017 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-
-/** @jsx jsx */
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var flexBoxStyle = function flexBoxStyle(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'flex-start' : _ref$align,
@@ -53,7 +32,7 @@ var filterFlexBoxProps = function filterFlexBoxProps(props) {
 };
 exports.filterFlexBoxProps = filterFlexBoxProps;
 var FlexBox = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", _extends({
     ref: ref,
     css: flexBoxStyle(props)
   }, filterFlexBoxProps(props)));

package/src/Layout/FlexBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexBox.js","names":["flexBoxStyle","align","column","justify","flexWrap","alignItems","display","flexDirection","justifyContent","filterFlexBoxProps","props","filterProps","FlexBox","React","forwardRef","ref"],"sources":["FlexBox.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2017 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 {Property} from 'csstype';\nimport React from 'react';\n\nimport {filterProps} from '../util';\n\nexport interface FlexBoxProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  align?: string;\n  column?: boolean;\n  flexWrap?: Property.FlexWrap;\n  justify?: string;\n}\n\nexport const flexBoxStyle: <T>(props: FlexBoxProps<T>) => CSSObject = ({\n  align = 'flex-start',\n  column = false,\n  justify = 'flex-start',\n  flexWrap = 'nowrap',\n}) => ({\n  alignItems: align,\n  display: 'flex',\n  flexDirection: column ? 'column' : 'row',\n  flexWrap: flexWrap,\n  justifyContent: justify,\n});\n\nexport const filterFlexBoxProps = (props: FlexBoxProps) =>\n  filterProps(props, ['align', 'column', 'justify', 'flexWrap']);\n\nexport const FlexBox: React.FC<FlexBoxProps> = React.forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => (\n  <div ref={ref} css={flexBoxStyle(props)} {...filterFlexBoxProps(props)} />\n));\n"],"mappings":";;;;;;;;AAoBA;AAEA;AAEA;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAcO,IAAMA,YAAsD,GAAG,SAAzDA,YAAsD;EAAA,sBACjEC,KAAK;IAALA,KAAK,2BAAG,YAAY;IAAA,mBACpBC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,oBACdC,OAAO;IAAPA,OAAO,6BAAG,YAAY;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;EAAA,OACd;IACLC,UAAU,EAAEJ,KAAK;IACjBK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAEL,MAAM,GAAG,QAAQ,GAAG,KAAK;IACxCE,QAAQ,EAAEA,QAAQ;IAClBI,cAAc,EAAEL;EAClB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMM,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAmB;EAAA,OACpD,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAAA;AAAC;AAE1D,IAAME,OAA+B,gBAAGC,kBAAK,CAACC,UAAU,CAA+B,UAACJ,KAAK,EAAEK,GAAG;EAAA,OACvG;IAAK,GAAG,EAAEA,GAAI;IAAC,GAAG,EAAEf,YAAY,CAACU,KAAK;EAAE,GAAKD,kBAAkB,CAACC,KAAK,CAAC,EAAI;AAAA,CAC3E,CAAC;AAAC"}
+{"version":3,"file":"FlexBox.js","names":["flexBoxStyle","align","column","justify","flexWrap","alignItems","display","flexDirection","justifyContent","filterFlexBoxProps","props","filterProps","FlexBox","React","forwardRef","ref"],"sources":["FlexBox.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2017 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 {Property} from 'csstype';\nimport React from 'react';\n\nimport {filterProps} from '../util';\n\nexport interface FlexBoxProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  align?: string;\n  column?: boolean;\n  flexWrap?: Property.FlexWrap;\n  justify?: string;\n}\n\nexport const flexBoxStyle: <T>(props: FlexBoxProps<T>) => CSSObject = ({\n  align = 'flex-start',\n  column = false,\n  justify = 'flex-start',\n  flexWrap = 'nowrap',\n}) => ({\n  alignItems: align,\n  display: 'flex',\n  flexDirection: column ? 'column' : 'row',\n  flexWrap: flexWrap,\n  justifyContent: justify,\n});\n\nexport const filterFlexBoxProps = (props: FlexBoxProps) =>\n  filterProps(props, ['align', 'column', 'justify', 'flexWrap']);\n\nexport const FlexBox: React.FC<FlexBoxProps> = React.forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => (\n  <div ref={ref} css={flexBoxStyle(props)} {...filterFlexBoxProps(props)} />\n));\n"],"mappings":";;;;;;AAoBA;AAEA;AAEA;AAAoC;AAAA;AAS7B,IAAMA,YAAsD,GAAG,SAAzDA,YAAsD;EAAA,sBACjEC,KAAK;IAALA,KAAK,2BAAG,YAAY;IAAA,mBACpBC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,oBACdC,OAAO;IAAPA,OAAO,6BAAG,YAAY;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;EAAA,OACd;IACLC,UAAU,EAAEJ,KAAK;IACjBK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAEL,MAAM,GAAG,QAAQ,GAAG,KAAK;IACxCE,QAAQ,EAAEA,QAAQ;IAClBI,cAAc,EAAEL;EAClB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMM,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAmB;EAAA,OACpD,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAAA;AAAC;AAE1D,IAAME,OAA+B,gBAAGC,kBAAK,CAACC,UAAU,CAA+B,UAACJ,KAAK,EAAEK,GAAG;EAAA,OACvG;IAAK,GAAG,EAAEA,GAAI;IAAC,GAAG,EAAEf,YAAY,CAACU,KAAK;EAAE,GAAKD,kBAAkB,CAACC,KAAK,CAAC,EAAI;AAAA,CAC3E,CAAC;AAAC"}

package/src/Layout/Footer.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Footer = void 0;
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /*
  * Wire
  * Copyright (C) 2018 Wire Swiss GmbH

package/src/Layout/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["Footer","props"],"sources":["Footer.tsx"],"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\ntype FooterProps = React.HTMLProps<HTMLElement>;\n\nexport const Footer = (props: FooterProps) => <footer {...props} />;\n"],"mappings":";;;;;;;AAoBA;AACA;AArBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAMO,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAkB;EAAA,OAAK,0BAAYA,KAAK,CAAI;AAAA;AAAC"}
+{"version":3,"file":"Footer.js","names":["Footer","props"],"sources":["Footer.tsx"],"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\ntype FooterProps = React.HTMLProps<HTMLElement>;\n\nexport const Footer = (props: FooterProps) => <footer {...props} />;\n"],"mappings":";;;;;;AAoBA;AACA;AAA0B;AArB1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAMO,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAkB;EAAA,OAAK,0BAAYA,KAAK,CAAI;AAAA;AAAC"}

package/src/Layout/Header.js

@@ -1,34 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.headerStyle = exports.Header = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var headerStyle = function headerStyle(props) {
   return {
     alignItems: 'center',
@@ -39,7 +18,7 @@ var headerStyle = function headerStyle(props) {
 };
 exports.headerStyle = headerStyle;
 var Header = function Header(props) {
-  return (0, _react.jsx)("header", (0, _extends2["default"])({
+  return (0, _react.jsx)("header", _extends({
     css: headerStyle(props)
   }, props));
 };

package/src/Layout/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":["headerStyle","props","alignItems","display","height","justifyContent","Header"],"sources":["Header.tsx"],"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\nexport type HeaderProps<T = HTMLHeadingElement> = React.HTMLProps<T>;\n\nexport const headerStyle: <T>(props: HeaderProps<T>) => CSSObject = props => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '64px',\n  justifyContent: 'space-between',\n});\n\nexport const Header = (props: HeaderProps) => <header css={headerStyle(props)} {...props} />;\n"],"mappings":";;;;;;;;AAoBA;AACA;AArBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAMO,IAAMA,WAAoD,GAAG,SAAvDA,WAAoD,CAAGC,KAAK;EAAA,OAAK;IAC5EC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,MAAM;IACfC,MAAM,EAAE,MAAM;IACdC,cAAc,EAAE;EAClB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAIL,KAAkB;EAAA,OAAK;IAAQ,GAAG,EAAED,WAAW,CAACC,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}
+{"version":3,"file":"Header.js","names":["headerStyle","props","alignItems","display","height","justifyContent","Header"],"sources":["Header.tsx"],"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\nexport type HeaderProps<T = HTMLHeadingElement> = React.HTMLProps<T>;\n\nexport const headerStyle: <T>(props: HeaderProps<T>) => CSSObject = props => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '64px',\n  justifyContent: 'space-between',\n});\n\nexport const Header = (props: HeaderProps) => <header css={headerStyle(props)} {...props} />;\n"],"mappings":";;;;;;AAoBA;AACA;AAA0B;AAAA;AAInB,IAAMA,WAAoD,GAAG,SAAvDA,WAAoD,CAAGC,KAAK;EAAA,OAAK;IAC5EC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,MAAM;IACfC,MAAM,EAAE,MAAM;IACdC,cAAc,EAAE;EAClB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAIL,KAAkB;EAAA,OAAK;IAAQ,GAAG,EAAED,WAAW,CAACC,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}

package/src/Layout/MatchMedia.js

@@ -1,46 +1,28 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useMatchMedia = exports.MatchMedia = exports.IsTabletUp = exports.IsTabletDown = exports.IsTablet = exports.IsMobileUp = exports.IsMobileDown = exports.IsMobile = exports.IsDesktopXL = exports.IsDesktop = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _mediaQueries = require("../mediaQueries");
 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; }
-/*
- * 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 */
-/* @jsxFrag React.Fragment */
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var useMatchMedia = function useMatchMedia(query) {
   var matchMedia = (0, _react2.useMemo)(function () {
     return window.matchMedia("(".concat(query, ")"));
   }, [query]);
   var _useState = (0, _react2.useState)(matchMedia.matches),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     isMatching = _useState2[0],
     setIsMatching = _useState2[1];
   var updateMatching = function updateMatching(event) {
@@ -65,49 +47,49 @@ var MatchMedia = function MatchMedia(_ref) {
 };
 exports.MatchMedia = MatchMedia;
 var IsDesktop = function IsDesktop(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.DESKTOP
   }, props));
 };
 exports.IsDesktop = IsDesktop;
 var IsDesktopXL = function IsDesktopXL(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.DESKTOP_XL
   }, props));
 };
 exports.IsDesktopXL = IsDesktopXL;
 var IsMobile = function IsMobile(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.MOBILE
   }, props));
 };
 exports.IsMobile = IsMobile;
 var IsMobileDown = function IsMobileDown(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.MOBILE_DOWN
   }, props));
 };
 exports.IsMobileDown = IsMobileDown;
 var IsMobileUp = function IsMobileUp(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.MOBILE_UP
   }, props));
 };
 exports.IsMobileUp = IsMobileUp;
 var IsTablet = function IsTablet(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.TABLET
   }, props));
 };
 exports.IsTablet = IsTablet;
 var IsTabletDown = function IsTabletDown(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.TABLET_DOWN
   }, props));
 };
 exports.IsTabletDown = IsTabletDown;
 var IsTabletUp = function IsTabletUp(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
+  return (0, _react.jsx)(MatchMedia, _extends({
     query: _mediaQueries.QueryKeys.TABLET_UP
   }, props));
 };

package/src/Layout/MatchMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"MatchMedia.js","names":["useMatchMedia","query","matchMedia","useMemo","window","useState","matches","isMatching","setIsMatching","updateMatching","event","useEffect","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"],"sources":["MatchMedia.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"MatchMedia.js","names":["useMatchMedia","query","matchMedia","useMemo","window","useState","matches","isMatching","setIsMatching","updateMatching","event","useEffect","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"],"sources":["MatchMedia.tsx"],"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"],"mappings":";;;;;;;AAqBA;AACA;AAEA;AAAiD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1C,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAAY,EAAK;EAC7C,IAAMC,UAAU,GAAG,IAAAC,eAAO,EAAC;IAAA,OAAMC,MAAM,CAACF,UAAU,YAAKD,KAAK,OAAI;EAAA,GAAE,CAACA,KAAK,CAAC,CAAC;EAE1E,gBAAoC,IAAAI,gBAAQ,EAACH,UAAU,CAACI,OAAO,CAAC;IAAA;IAAzDC,UAAU;IAAEC,aAAa;EAEhC,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAA0B,EAAK;IACrDF,aAAa,CAACE,KAAK,CAACJ,OAAO,CAAC;EAC9B,CAAC;EAED,IAAAK,iBAAS,EAAC,YAAM;IACdT,UAAU,CAACU,gBAAgB,CAAC,QAAQ,EAAEH,cAAc,CAAC;IACrD,OAAO;MAAA,OAAMP,UAAU,CAACW,mBAAmB,CAAC,QAAQ,EAAEJ,cAAc,CAAC;IAAA;EACvE,CAAC,EAAE,CAACP,UAAU,CAAC,CAAC;EAEhB,OAAOK,UAAU;AACnB,CAAC;AAAC;AAEK,IAAMO,UAAqC,GAAG,SAAxCA,UAAqC,OAA+B;EAAA,IAA1Bb,KAAK,QAALA,KAAK;IAAEc,QAAQ,QAARA,QAAQ;IAAEC,GAAG,QAAHA,GAAG;EACzE,IAAMC,UAAU,GAAGjB,aAAa,CAACkB,mBAAK,CAACjB,KAAK,CAAC,IAAIA,KAAK,CAAC;EACvD,IAAMM,UAAU,GAAGS,GAAG,GAAG,CAACC,UAAU,GAAGA,UAAU;EACjD,OAAOV,UAAU,GAAG,mDAAGQ,QAAQ,CAAI,GAAG,IAAI;AAC5C,CAAC;AAAC;AAIK,IAAMI,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACC;EAAQ,GAAKF,KAAK,EAAI;AAAA;AAAC;AACvG,IAAMG,WAAW,GAAG,SAAdA,WAAW,CAAIH,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACG;EAAW,GAAKJ,KAAK,EAAI;AAAA;AAAC;AAC5G,IAAMK,QAAQ,GAAG,SAAXA,QAAQ,CAAIL,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACK;EAAO,GAAKN,KAAK,EAAI;AAAA;AAAC;AACrG,IAAMO,YAAY,GAAG,SAAfA,YAAY,CAAIP,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACO;EAAY,GAAKR,KAAK,EAAI;AAAA;AAAC;AAC9G,IAAMS,UAAU,GAAG,SAAbA,UAAU,CAAIT,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACS;EAAU,GAAKV,KAAK,EAAI;AAAA;AAAC;AAC1G,IAAMW,QAAQ,GAAG,SAAXA,QAAQ,CAAIX,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACW;EAAO,GAAKZ,KAAK,EAAI;AAAA;AAAC;AACrG,IAAMa,YAAY,GAAG,SAAfA,YAAY,CAAIb,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACa;EAAY,GAAKd,KAAK,EAAI;AAAA;AAAC;AAC9G,IAAMe,UAAU,GAAG,SAAbA,UAAU,CAAIf,KAA2B;EAAA,OAAK,gBAAC,UAAU;IAAC,KAAK,EAAEC,uBAAS,CAACe;EAAU,GAAKhB,KAAK,EAAI;AAAA;AAAC"}

package/src/Layout/Spacer.js

@@ -1,12 +1,12 @@
 "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"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /*
  * Wire
  * Copyright (C) 2018 Wire Swiss GmbH

package/src/Layout/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":["Spacer","size","vertical","display","width","height"],"sources":["Spacer.tsx"],"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"],"mappings":";;;;;;;AAoBA;AACA;AArBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AASO,SAASA,MAAM,OAA6D;EAAA,qBAA3DC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;EAChD,OAAO;IAAK,KAAK,EAAEA,QAAQ,GAAG;MAACC,OAAO,EAAE,cAAc;MAAEC,KAAK,EAAEH;IAAI,CAAC,GAAG;MAACI,MAAM,EAAEJ;IAAI;EAAE,EAAG;AAC3F"}
+{"version":3,"file":"Spacer.js","names":["Spacer","size","vertical","display","width","height"],"sources":["Spacer.tsx"],"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"],"mappings":";;;;;;AAoBA;AACA;AAA0B;AArB1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AASO,SAASA,MAAM,OAA6D;EAAA,qBAA3DC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;EAChD,OAAO;IAAK,KAAK,EAAEA,QAAQ,GAAG;MAACC,OAAO,EAAE,cAAc;MAAEC,KAAK,EAAEH;IAAI,CAAC,GAAG;MAACI,MAAM,EAAEJ;IAAI;EAAE,EAAG;AAC3F"}