@wireapp/react-ui-kit 8.13.9 → 8.14.1

package/src/Layout/Container.js

@@ -1,26 +1,4 @@
 "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
@@ -39,90 +17,39 @@ var _sizes = require("./sizes");
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerXXS = exports.ContainerXS = exports.ContainerSM = exports.ContainerMD = exports.ContainerLG = exports.Container = void 0;
 /** @jsx jsx */
-var LEVEL = {
-  lg: _sizes.WIDTH.DESKTOP_MAX,
-  md: _sizes.WIDTH.TABLET_MAX,
-  sm: _sizes.WIDTH.TABLET_MIN,
-  xs: _sizes.WIDTH.MOBILE,
-  xxs: _sizes.WIDTH.TINY
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const mediaQueries_1 = require("../mediaQueries");
+const util_1 = require("../util");
+const sizes_1 = require("./sizes");
+const LEVEL = {
+    lg: sizes_1.WIDTH.DESKTOP_MAX,
+    md: sizes_1.WIDTH.TABLET_MAX,
+    sm: sizes_1.WIDTH.TABLET_MIN,
+    xs: sizes_1.WIDTH.MOBILE,
+    xxs: sizes_1.WIDTH.TINY,
 };
-
-var containerStyle = function containerStyle(_ref) {
-  var _ref$centerText = _ref.centerText,
-      centerText = _ref$centerText === void 0 ? false : _ref$centerText,
-      _ref$level = _ref.level,
-      level = _ref$level === void 0 ? undefined : _ref$level,
-      _ref$verticalCenter = _ref.verticalCenter,
-      verticalCenter = _ref$verticalCenter === void 0 ? false : _ref$verticalCenter;
-  return (0, _defineProperty2["default"])({
+const containerStyle = ({ centerText = false, level = undefined, verticalCenter = false, }) => ({
     margin: verticalCenter ? 'auto' : '0 auto',
-    maxWidth: level ? "".concat(LEVEL[level], "px") : undefined,
+    maxWidth: level ? `${LEVEL[level]}px` : undefined,
     position: 'relative',
     textAlign: centerText ? 'center' : 'left',
-    width: '100%'
-  }, _mediaQueries.media[_mediaQueries.QueryKeys.DESKTOP], level ? undefined : {
-    padding: 0,
-    width: "".concat(_sizes.WIDTH.DESKTOP_MIN - _sizes.GUTTER * 2, "px")
-  });
-};
-
-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"])({
-    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"])({
-    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"])({
-    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"])({
-    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"])({
-    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"])({
-    ref: ref,
-    level: 'xxs'
-  }, props));
+    width: '100%',
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.DESKTOP]]: level
+        ? undefined
+        : {
+            padding: 0,
+            width: `${sizes_1.WIDTH.DESKTOP_MIN - sizes_1.GUTTER * 2}px`,
+        },
 });
-
-exports.ContainerXXS = ContainerXXS;
+const filterContainerProps = (props) => (0, util_1.filterProps)(props, ['centerText', 'level', 'verticalCenter']);
+exports.Container = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)("div", Object.assign({ ref: ref, css: containerStyle(props) }, filterContainerProps(props)))));
+exports.ContainerLG = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'lg' }, props))));
+exports.ContainerMD = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'md' }, props))));
+exports.ContainerSM = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'sm' }, props))));
+exports.ContainerXS = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'xs' }, props))));
+exports.ContainerXXS = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'xxs' }, props))));
 //# sourceMappingURL=Container.js.map

package/src/Layout/Container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Container.tsx"],"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","Container","React","forwardRef","ref","ContainerLG","ContainerMD","ContainerSM","ContainerXS","ContainerXXS"],"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 {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"],"file":"Container.js"}
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["Container.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAC9C,iCAA0B;AAE1B,kDAAiD;AACjD,kCAAoC;AACpC,mCAAsC;AAgBtC,MAAM,KAAK,GAAU;IACnB,EAAE,EAAE,aAAK,CAAC,WAAW;IACrB,EAAE,EAAE,aAAK,CAAC,UAAU;IACpB,EAAE,EAAE,aAAK,CAAC,UAAU;IACpB,EAAE,EAAE,aAAK,CAAC,MAAM;IAChB,GAAG,EAAE,aAAK,CAAC,IAAI;CAChB,CAAC;AAEF,MAAM,cAAc,GAA+C,CAAC,EAClE,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,SAAS,EACjB,cAAc,GAAG,KAAK,GACvB,EAAE,EAAE,CAAC,CAAC;IACL,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;IAC1C,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IACjD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;IACzC,KAAK,EAAE,MAAM;IACb,CAAC,oBAAK,CAAC,wBAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK;QAC/B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,GAAG,aAAK,CAAC,WAAW,GAAG,cAAM,GAAG,CAAC,IAAI;SAC7C;CACN,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAEzG,QAAA,SAAS,GAA6B,eAAK,CAAC,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAClH,wCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC,IAAM,oBAAoB,CAAC,KAAK,CAAC,EAAI,CAC/E,CAAC,CAAC;AAIU,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/F,iBAAC,iBAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,IAAM,KAAK,EAAI,CAChD,CAAC,CAAC;AACU,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/F,iBAAC,iBAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,IAAM,KAAK,EAAI,CAChD,CAAC,CAAC;AACU,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/F,iBAAC,iBAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,IAAM,KAAK,EAAI,CAChD,CAAC,CAAC;AACU,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/F,iBAAC,iBAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,IAAM,KAAK,EAAI,CAChD,CAAC,CAAC;AACU,QAAA,YAAY,GAAG,eAAK,CAAC,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChG,iBAAC,iBAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,IAAM,KAAK,EAAI,CACjD,CAAC,CAAC"}

package/src/Layout/Content.d.ts

@@ -3,4 +3,4 @@ import React from 'react';
 import { CSSObject, jsx } from '@emotion/react';
 export declare type ContentProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const contentStyle: <T>(props: ContentProps<T>) => CSSObject;
-export declare const Content: (props: ContentProps<HTMLDivElement>) => jsx.JSX.Element;
+export declare const Content: (props: React.HTMLProps<T>) => jsx.JSX.Element;

package/src/Layout/Content.js

@@ -1,20 +1,4 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Content = exports.contentStyle = 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
@@ -33,24 +17,17 @@ var _sizes = require("./sizes");
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
-/** @jsx jsx */
-var contentStyle = function contentStyle(props) {
-  return {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = exports.contentStyle = void 0;
+const react_1 = require("@emotion/react");
+const sizes_1 = require("./sizes");
+const contentStyle = props => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    padding: "0 ".concat(_sizes.GUTTER, "px")
-  };
-};
-
+    padding: `0 ${sizes_1.GUTTER}px`,
+});
 exports.contentStyle = contentStyle;
-
-var Content = function Content(props) {
-  return (0, _react2.jsx)("div", (0, _extends2["default"])({
-    css: contentStyle(props)
-  }, props));
-};
-
+const Content = (props) => (0, react_1.jsx)("div", Object.assign({ css: (0, exports.contentStyle)(props) }, props));
 exports.Content = Content;
 //# sourceMappingURL=Content.js.map

package/src/Layout/Content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Content.tsx"],"names":["contentStyle","props","display","flexDirection","flexGrow","padding","GUTTER","Content"],"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,YAAyD,CAAAC,KAAK;AAAA,SAAK;AAC9EC,IAAAA,OAAO,EAAE,MADqE;AAE9EC,IAAAA,aAAa,EAAE,QAF+D;AAG9EC,IAAAA,QAAQ,EAAE,CAHoE;AAI9EC,IAAAA,OAAO,cAAOC,aAAP;AAJuE,GAAL;AAAA,CAApE;;;;AAOA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACN,KAAD;AAAA,SAAyB;AAAK,IAAA,GAAG,EAAED,YAAY,CAACC,KAAD;AAAtB,KAAmCA,KAAnC,EAAzB;AAAA,CAAhB","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"],"file":"Content.js"}
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["Content.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAIH,0CAA8C;AAE9C,mCAA+B;AAIxB,MAAM,YAAY,GAA6C,KAAK,CAAC,EAAE,CAAC,CAAC;IAC9E,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,KAAK,cAAM,IAAI;CACzB,CAAC,CAAC;AALU,QAAA,YAAY,gBAKtB;AAEI,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,wCAAK,GAAG,EAAE,IAAA,oBAAY,EAAC,KAAK,CAAC,IAAM,KAAK,EAAI,CAAC;AAAhF,QAAA,OAAO,WAAyE"}

package/src/Layout/FlexBox.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { CSSObject } from '@emotion/react';
-import type { Property } from 'csstype';
+import { Property } from 'csstype';
 import React from 'react';
 export interface FlexBoxProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {
     align?: string;

package/src/Layout/FlexBox.js

@@ -1,20 +1,4 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FlexBox = exports.filterFlexBoxProps = exports.flexBoxStyle = 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
@@ -33,40 +17,21 @@ var _util = require("../util");
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexBox = exports.filterFlexBoxProps = exports.flexBoxStyle = void 0;
 /** @jsx jsx */
-var flexBoxStyle = function flexBoxStyle(_ref) {
-  var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'flex-start' : _ref$align,
-      _ref$column = _ref.column,
-      column = _ref$column === void 0 ? false : _ref$column,
-      _ref$justify = _ref.justify,
-      justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
-      _ref$flexWrap = _ref.flexWrap,
-      flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap;
-  return {
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const util_1 = require("../util");
+const flexBoxStyle = ({ align = 'flex-start', column = false, justify = 'flex-start', flexWrap = 'nowrap', }) => ({
     alignItems: align,
     display: 'flex',
     flexDirection: column ? 'column' : 'row',
     flexWrap: flexWrap,
-    justifyContent: justify
-  };
-};
-
+    justifyContent: justify,
+});
 exports.flexBoxStyle = flexBoxStyle;
-
-var filterFlexBoxProps = function filterFlexBoxProps(props) {
-  return (0, _util.filterProps)(props, ['align', 'column', 'justify', 'flexWrap']);
-};
-
+const filterFlexBoxProps = (props) => (0, util_1.filterProps)(props, ['align', 'column', 'justify', 'flexWrap']);
 exports.filterFlexBoxProps = filterFlexBoxProps;
-
-var FlexBox = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
-    ref: ref,
-    css: flexBoxStyle(props)
-  }, filterFlexBoxProps(props)));
-});
-
-exports.FlexBox = FlexBox;
+exports.FlexBox = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)("div", Object.assign({ ref: ref, css: (0, exports.flexBoxStyle)(props) }, (0, exports.filterFlexBoxProps)(props)))));
 //# sourceMappingURL=FlexBox.js.map

package/src/Layout/FlexBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FlexBox.tsx"],"names":["flexBoxStyle","align","column","justify","flexWrap","alignItems","display","flexDirection","justifyContent","filterFlexBoxProps","props","FlexBox","React","forwardRef","ref"],"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,YAAyD;AAAA,wBACpEC,KADoE;AAAA,MACpEA,KADoE,2BAC5D,YAD4D;AAAA,yBAEpEC,MAFoE;AAAA,MAEpEA,MAFoE,4BAE3D,KAF2D;AAAA,0BAGpEC,OAHoE;AAAA,MAGpEA,OAHoE,6BAG1D,YAH0D;AAAA,2BAIpEC,QAJoE;AAAA,MAIpEA,QAJoE,8BAIzD,QAJyD;AAAA,SAK/D;AACLC,IAAAA,UAAU,EAAEJ,KADP;AAELK,IAAAA,OAAO,EAAE,MAFJ;AAGLC,IAAAA,aAAa,EAAEL,MAAM,GAAG,QAAH,GAAc,KAH9B;AAILE,IAAAA,QAAQ,EAAEA,QAJL;AAKLI,IAAAA,cAAc,EAAEL;AALX,GAL+D;AAAA,CAA/D;;;;AAaA,IAAMM,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD;AAAA,SAChC,uBAAYA,KAAZ,EAAmB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,UAA/B,CAAnB,CADgC;AAAA,CAA3B;;;;AAGA,IAAMC,OAA+B,gBAAGC,mBAAMC,UAAN,CAA+C,UAACH,KAAD,EAAQI,GAAR;AAAA,SAC5F;AAAK,IAAA,GAAG,EAAEA,GAAV;AAAe,IAAA,GAAG,EAAEd,YAAY,CAACU,KAAD;AAAhC,KAA6CD,kBAAkB,CAACC,KAAD,CAA/D,EAD4F;AAAA,CAA/C,CAAxC","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 type {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"],"file":"FlexBox.js"}
+{"version":3,"file":"FlexBox.js","sourceRoot":"","sources":["FlexBox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,iCAA0B;AAE1B,kCAAoC;AAS7B,MAAM,YAAY,GAA6C,CAAC,EACrE,KAAK,GAAG,YAAY,EACpB,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,YAAY,EACtB,QAAQ,GAAG,QAAQ,GACpB,EAAE,EAAE,CAAC,CAAC;IACL,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;IACxC,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,OAAO;CACxB,CAAC,CAAC;AAXU,QAAA,YAAY,gBAWtB;AAEI,MAAM,kBAAkB,GAAG,CAAC,KAAmB,EAAE,EAAE,CACxD,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;AADpD,QAAA,kBAAkB,sBACkC;AAEpD,QAAA,OAAO,GAA2B,eAAK,CAAC,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5G,wCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAA,oBAAY,EAAC,KAAK,CAAC,IAAM,IAAA,0BAAkB,EAAC,KAAK,CAAC,EAAI,CAC3E,CAAC,CAAC"}

package/src/Layout/Footer.d.ts

@@ -1,6 +1,3 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
-declare type FooterProps = React.HTMLProps<HTMLElement>;
-export declare const Footer: (props: FooterProps) => jsx.JSX.Element;
-export {};
+export declare const Footer: (props: React.HTMLProps<HTMLElement>) => jsx.JSX.Element;

package/src/Layout/Footer.js

@@ -1,16 +1,4 @@
 "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"));
-
 /*
  * Wire
  * Copyright (C) 2018 Wire Swiss GmbH
@@ -29,11 +17,10 @@ var _react2 = _interopRequireDefault(require("react"));
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
 /** @jsx jsx */
-var Footer = function Footer(props) {
-  return (0, _react.jsx)("footer", props);
-};
-
+const react_1 = require("@emotion/react");
+const Footer = (props) => (0, react_1.jsx)("footer", Object.assign({}, props));
 exports.Footer = Footer;
 //# sourceMappingURL=Footer.js.map

package/src/Layout/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Footer.tsx"],"names":["Footer","props"],"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,MAAS,CAACC,KAAD;AAAA,SAAwB,0BAAYA,KAAZ,CAAxB;AAAA,CAAf","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"],"file":"Footer.js"}
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["Footer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAAmC;AAK5B,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,6CAAY,KAAK,EAAI,CAAC;AAAvD,QAAA,MAAM,UAAiD"}

package/src/Layout/Header.d.ts

@@ -3,4 +3,4 @@ import { CSSObject, jsx } from '@emotion/react';
 import React from 'react';
 export declare type HeaderProps<T = HTMLHeadingElement> = React.HTMLProps<T>;
 export declare const headerStyle: <T>(props: HeaderProps<T>) => CSSObject;
-export declare const Header: (props: HeaderProps<HTMLHeadingElement>) => jsx.JSX.Element;
+export declare const Header: (props: React.HTMLProps<T>) => jsx.JSX.Element;

package/src/Layout/Header.js

@@ -1,18 +1,4 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Header = exports.headerStyle = 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
@@ -31,24 +17,17 @@ var _react2 = _interopRequireDefault(require("react"));
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.headerStyle = void 0;
 /** @jsx jsx */
-var headerStyle = function headerStyle(props) {
-  return {
+const react_1 = require("@emotion/react");
+const headerStyle = props => ({
     alignItems: 'center',
     display: 'flex',
     height: '64px',
-    justifyContent: 'space-between'
-  };
-};
-
+    justifyContent: 'space-between',
+});
 exports.headerStyle = headerStyle;
-
-var Header = function Header(props) {
-  return (0, _react.jsx)("header", (0, _extends2["default"])({
-    css: headerStyle(props)
-  }, props));
-};
-
+const Header = (props) => (0, react_1.jsx)("header", Object.assign({ css: (0, exports.headerStyle)(props) }, props));
 exports.Header = Header;
 //# sourceMappingURL=Header.js.map

package/src/Layout/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Header.tsx"],"names":["headerStyle","props","alignItems","display","height","justifyContent","Header"],"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,WAAuD,CAAAC,KAAK;AAAA,SAAK;AAC5EC,IAAAA,UAAU,EAAE,QADgE;AAE5EC,IAAAA,OAAO,EAAE,MAFmE;AAG5EC,IAAAA,MAAM,EAAE,MAHoE;AAI5EC,IAAAA,cAAc,EAAE;AAJ4D,GAAL;AAAA,CAAlE;;;;AAOA,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACL,KAAD;AAAA,SAAwB;AAAQ,IAAA,GAAG,EAAED,WAAW,CAACC,KAAD;AAAxB,KAAqCA,KAArC,EAAxB;AAAA,CAAf","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"],"file":"Header.js"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["Header.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAKvC,MAAM,WAAW,GAA4C,KAAK,CAAC,EAAE,CAAC,CAAC;IAC5E,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;IACd,cAAc,EAAE,eAAe;CAChC,CAAC,CAAC;AALU,QAAA,WAAW,eAKrB;AAEI,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,2CAAQ,GAAG,EAAE,IAAA,mBAAW,EAAC,KAAK,CAAC,IAAM,KAAK,EAAI,CAAC;AAAhF,QAAA,MAAM,UAA0E"}

package/src/Layout/MatchMedia.js

@@ -1,28 +1,4 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IsTabletUp = exports.IsTabletDown = exports.IsTablet = exports.IsMobileUp = exports.IsMobileDown = exports.IsMobile = exports.IsDesktopXL = exports.IsDesktop = exports.MatchMedia = exports.useMatchMedia = void 0;
-
-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
@@ -41,107 +17,46 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IsTabletUp = exports.IsTabletDown = exports.IsTablet = exports.IsMobileUp = exports.IsMobileDown = exports.IsMobile = exports.IsDesktopXL = exports.IsDesktop = exports.MatchMedia = exports.useMatchMedia = void 0;
 /** @jsx jsx */
-
 /* @jsxFrag React.Fragment */
-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),
-      isMatching = _useState2[0],
-      setIsMatching = _useState2[1];
-
-  var updateMatching = function updateMatching(event) {
-    setIsMatching(event.matches);
-  };
-
-  (0, _react2.useEffect)(function () {
-    matchMedia.addEventListener('change', updateMatching);
-    return function () {
-      return matchMedia.removeEventListener('change', updateMatching);
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const mediaQueries_1 = require("../mediaQueries");
+const useMatchMedia = (query) => {
+    const matchMedia = (0, react_2.useMemo)(() => window.matchMedia(`(${query})`), [query]);
+    const [isMatching, setIsMatching] = (0, react_2.useState)(matchMedia.matches);
+    const updateMatching = (event) => {
+        setIsMatching(event.matches);
     };
-  }, [matchMedia]);
-  return isMatching;
+    (0, react_2.useEffect)(() => {
+        matchMedia.addEventListener('change', updateMatching);
+        return () => matchMedia.removeEventListener('change', updateMatching);
+    }, [matchMedia]);
+    return isMatching;
 };
-
 exports.useMatchMedia = useMatchMedia;
-
-var MatchMedia = function MatchMedia(_ref) {
-  var query = _ref.query,
-      children = _ref.children,
-      not = _ref.not;
-  var matchQuery = useMatchMedia(_mediaQueries.QUERY[query] || query);
-  var isMatching = not ? !matchQuery : matchQuery;
-  return isMatching ? (0, _react.jsx)(_react2["default"].Fragment, null, children) : null;
+const MatchMedia = ({ query, children, not }) => {
+    const matchQuery = (0, exports.useMatchMedia)(mediaQueries_1.QUERY[query] || query);
+    const isMatching = not ? !matchQuery : matchQuery;
+    return isMatching ? (0, react_1.jsx)(react_2.default.Fragment, null, children) : null;
 };
-
 exports.MatchMedia = MatchMedia;
-
-var IsDesktop = function IsDesktop(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.DESKTOP
-  }, props));
-};
-
+const IsDesktop = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.DESKTOP }, props));
 exports.IsDesktop = IsDesktop;
-
-var IsDesktopXL = function IsDesktopXL(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.DESKTOP_XL
-  }, props));
-};
-
+const IsDesktopXL = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.DESKTOP_XL }, props));
 exports.IsDesktopXL = IsDesktopXL;
-
-var IsMobile = function IsMobile(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.MOBILE
-  }, props));
-};
-
+const IsMobile = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE }, props));
 exports.IsMobile = IsMobile;
-
-var IsMobileDown = function IsMobileDown(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.MOBILE_DOWN
-  }, props));
-};
-
+const IsMobileDown = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE_DOWN }, props));
 exports.IsMobileDown = IsMobileDown;
-
-var IsMobileUp = function IsMobileUp(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.MOBILE_UP
-  }, props));
-};
-
+const IsMobileUp = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE_UP }, props));
 exports.IsMobileUp = IsMobileUp;
-
-var IsTablet = function IsTablet(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.TABLET
-  }, props));
-};
-
+const IsTablet = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET }, props));
 exports.IsTablet = IsTablet;
-
-var IsTabletDown = function IsTabletDown(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.TABLET_DOWN
-  }, props));
-};
-
+const IsTabletDown = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET_DOWN }, props));
 exports.IsTabletDown = IsTabletDown;
-
-var IsTabletUp = function IsTabletUp(props) {
-  return (0, _react.jsx)(MatchMedia, (0, _extends2["default"])({
-    query: _mediaQueries.QueryKeys.TABLET_UP
-  }, props));
-};
-
+const IsTabletUp = (props) => (0, react_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET_UP }, props));
 exports.IsTabletUp = IsTabletUp;
 //# sourceMappingURL=MatchMedia.js.map