@wireapp/react-ui-kit 8.17.3 → 8.17.5

package/src/Menu/TabBar.js

@@ -1,14 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabBarItem = exports.TabBar = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _Identity = require("../Identity");
@@ -17,10 +12,16 @@ var _util = require("../util");
 var _excluded = ["children"],
   _excluded2 = ["block", "center", "color", "bold", "active", "fontSize", "textTransform"],
   _excluded3 = ["children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
 var tabBarStyle = function tabBarStyle(_ref) {
-  (0, _objectDestructuringEmpty2["default"])(_ref);
+  _objectDestructuringEmpty(_ref);
   return {
     display: 'flex',
     width: '100%'
@@ -32,8 +33,8 @@ var filteredTabBarProps = function filteredTabBarProps(props) {
 var TabBar = function TabBar(_ref2) {
   var _ref2$children = _ref2.children,
     children = _ref2$children === void 0 ? null : _ref2$children,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return (0, _react.jsx)("div", _extends({
     css: tabBarStyle(props)
   }, filteredTabBarProps(props)), children);
 };
@@ -53,7 +54,7 @@ var tabBarItemStyle = function tabBarItemStyle(theme, _ref3) {
     fontSize = _ref3$fontSize === void 0 ? '11px' : _ref3$fontSize,
     _ref3$textTransform = _ref3.textTransform,
     textTransform = _ref3$textTransform === void 0 ? 'uppercase' : _ref3$textTransform,
-    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+    props = _objectWithoutProperties(_ref3, _excluded2);
   return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
     block: block,
     bold: bold,
@@ -74,8 +75,8 @@ var tabBarItemStyle = function tabBarItemStyle(theme, _ref3) {
 var TabBarItem = function TabBarItem(_ref4) {
   var _ref4$children = _ref4.children,
     children = _ref4$children === void 0 ? null : _ref4$children,
-    props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
-  return (0, _react.jsx)("span", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  return (0, _react.jsx)("span", _extends({
     css: function css(theme) {
       return tabBarItemStyle(theme, props);
     }

package/src/Menu/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","names":["tabBarStyle","display","width","filteredTabBarProps","props","filterProps","TabBar","children","tabBarItemStyle","theme","block","center","color","general","bold","active","fontSize","textTransform","textStyle","borderBottom","COLOR","GRAY_DARKEN_48","GRAY_LIGHTEN_40","cursor","flexGrow","justifyContent","opacity","padding","TabBarItem"],"sources":["TabBar.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {TextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst tabBarStyle: <T>(props: TabBarProps<T>) => CSSObject = ({}) => {\n  return {\n    display: 'flex',\n    width: '100%',\n  };\n};\n\nconst filteredTabBarProps = (props: TabBarProps) => filterProps(props, []);\n\nexport const TabBar = ({children = null, ...props}: TabBarProps) => (\n  <div css={tabBarStyle(props)} {...filteredTabBarProps(props)}>\n    {children}\n  </div>\n);\n\nexport interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {\n  active: boolean;\n}\n\nconst tabBarItemStyle: <T>(theme: Theme, props: TabBarItemProps<T>) => CSSObject = (\n  theme,\n  {\n    block = true,\n    center = true,\n    color = theme.general.color,\n    bold = true,\n    active = false,\n    fontSize = '11px',\n    textTransform = 'uppercase',\n    ...props\n  },\n) => {\n  return {\n    ...textStyle(theme, {block, bold, center, color, fontSize, textTransform, ...props}),\n    borderBottom: active ? `1px solid ${COLOR.GRAY_DARKEN_48}` : `1px solid ${COLOR.GRAY_LIGHTEN_40}`,\n    cursor: 'pointer',\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'center',\n    opacity: active ? 1 : 0.56,\n    padding: '8px 0',\n  };\n};\n\nexport const TabBarItem = ({children = null, ...props}: TabBarItemProps) => (\n  <span css={(theme: Theme) => tabBarItemStyle(theme, props)} {...props}>\n    {children}\n  </span>\n);\n"],"mappings":";;;;;;;;;;;AAoBA;AACA;AAEA;AAEA;AACA;AAAoC;EAAA;EAAA;AAAA;AAAA;AAIpC,IAAMA,WAAoD,GAAG,SAAvDA,WAAoD,OAAW;EAAA;EACnE,OAAO;IACLC,OAAO,EAAE,MAAM;IACfC,KAAK,EAAE;EACT,CAAC;AACH,CAAC;AAED,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,KAAkB;EAAA,OAAK,IAAAC,iBAAW,EAACD,KAAK,EAAE,EAAE,CAAC;AAAA;AAEnE,IAAME,MAAM,GAAG,SAATA,MAAM;EAAA,2BAAKC,QAAQ;IAARA,QAAQ,+BAAG,IAAI;IAAKH,KAAK;EAAA,OAC/C;IAAK,GAAG,EAAEJ,WAAW,CAACI,KAAK;EAAE,GAAKD,mBAAmB,CAACC,KAAK,CAAC,GACzDG,QAAQ,CACL;AAAA,CACP;AAAC;AAMF,IAAMC,eAA0E,GAAG,SAA7EA,eAA0E,CAC9EC,KAAK,SAWF;EAAA,wBATDC,KAAK;IAALA,KAAK,4BAAG,IAAI;IAAA,qBACZC,MAAM;IAANA,MAAM,6BAAG,IAAI;IAAA,oBACbC,KAAK;IAALA,KAAK,4BAAGH,KAAK,CAACI,OAAO,CAACD,KAAK;IAAA,mBAC3BE,IAAI;IAAJA,IAAI,2BAAG,IAAI;IAAA,qBACXC,MAAM;IAANA,MAAM,6BAAG,KAAK;IAAA,uBACdC,QAAQ;IAARA,QAAQ,+BAAG,MAAM;IAAA,4BACjBC,aAAa;IAAbA,aAAa,oCAAG,WAAW;IACxBb,KAAK;EAGV,uCACK,IAAAc,eAAS,EAACT,KAAK;IAAGC,KAAK,EAALA,KAAK;IAAEI,IAAI,EAAJA,IAAI;IAAEH,MAAM,EAANA,MAAM;IAAEC,KAAK,EAALA,KAAK;IAAEI,QAAQ,EAARA,QAAQ;IAAEC,aAAa,EAAbA;EAAa,GAAKb,KAAK,EAAE;IACpFe,YAAY,EAAEJ,MAAM,uBAAgBK,eAAK,CAACC,cAAc,wBAAkBD,eAAK,CAACE,eAAe,CAAE;IACjGC,MAAM,EAAE,SAAS;IACjBtB,OAAO,EAAE,MAAM;IACfuB,QAAQ,EAAE,CAAC;IACXC,cAAc,EAAE,QAAQ;IACxBC,OAAO,EAAEX,MAAM,GAAG,CAAC,GAAG,IAAI;IAC1BY,OAAO,EAAE;EAAO;AAEpB,CAAC;AAEM,IAAMC,UAAU,GAAG,SAAbA,UAAU;EAAA,2BAAKrB,QAAQ;IAARA,QAAQ,+BAAG,IAAI;IAAKH,KAAK;EAAA,OACnD;IAAM,GAAG,EAAE,aAACK,KAAY;MAAA,OAAKD,eAAe,CAACC,KAAK,EAAEL,KAAK,CAAC;IAAA;EAAC,GAAKA,KAAK,GAClEG,QAAQ,CACJ;AAAA,CACR;AAAC"}
+{"version":3,"file":"TabBar.js","names":["tabBarStyle","display","width","filteredTabBarProps","props","filterProps","TabBar","children","tabBarItemStyle","theme","block","center","color","general","bold","active","fontSize","textTransform","textStyle","borderBottom","COLOR","GRAY_DARKEN_48","GRAY_LIGHTEN_40","cursor","flexGrow","justifyContent","opacity","padding","TabBarItem"],"sources":["TabBar.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {TextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst tabBarStyle: <T>(props: TabBarProps<T>) => CSSObject = ({}) => {\n  return {\n    display: 'flex',\n    width: '100%',\n  };\n};\n\nconst filteredTabBarProps = (props: TabBarProps) => filterProps(props, []);\n\nexport const TabBar = ({children = null, ...props}: TabBarProps) => (\n  <div css={tabBarStyle(props)} {...filteredTabBarProps(props)}>\n    {children}\n  </div>\n);\n\nexport interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {\n  active: boolean;\n}\n\nconst tabBarItemStyle: <T>(theme: Theme, props: TabBarItemProps<T>) => CSSObject = (\n  theme,\n  {\n    block = true,\n    center = true,\n    color = theme.general.color,\n    bold = true,\n    active = false,\n    fontSize = '11px',\n    textTransform = 'uppercase',\n    ...props\n  },\n) => {\n  return {\n    ...textStyle(theme, {block, bold, center, color, fontSize, textTransform, ...props}),\n    borderBottom: active ? `1px solid ${COLOR.GRAY_DARKEN_48}` : `1px solid ${COLOR.GRAY_LIGHTEN_40}`,\n    cursor: 'pointer',\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'center',\n    opacity: active ? 1 : 0.56,\n    padding: '8px 0',\n  };\n};\n\nexport const TabBarItem = ({children = null, ...props}: TabBarItemProps) => (\n  <span css={(theme: Theme) => tabBarItemStyle(theme, props)} {...props}>\n    {children}\n  </span>\n);\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AAEA;AACA;AAAoC;EAAA;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIpC,IAAMA,WAAoD,GAAG,SAAvDA,WAAoD,OAAW;EAAA;EACnE,OAAO;IACLC,OAAO,EAAE,MAAM;IACfC,KAAK,EAAE;EACT,CAAC;AACH,CAAC;AAED,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,KAAkB;EAAA,OAAK,IAAAC,iBAAW,EAACD,KAAK,EAAE,EAAE,CAAC;AAAA;AAEnE,IAAME,MAAM,GAAG,SAATA,MAAM;EAAA,2BAAKC,QAAQ;IAARA,QAAQ,+BAAG,IAAI;IAAKH,KAAK;EAAA,OAC/C;IAAK,GAAG,EAAEJ,WAAW,CAACI,KAAK;EAAE,GAAKD,mBAAmB,CAACC,KAAK,CAAC,GACzDG,QAAQ,CACL;AAAA,CACP;AAAC;AAMF,IAAMC,eAA0E,GAAG,SAA7EA,eAA0E,CAC9EC,KAAK,SAWF;EAAA,wBATDC,KAAK;IAALA,KAAK,4BAAG,IAAI;IAAA,qBACZC,MAAM;IAANA,MAAM,6BAAG,IAAI;IAAA,oBACbC,KAAK;IAALA,KAAK,4BAAGH,KAAK,CAACI,OAAO,CAACD,KAAK;IAAA,mBAC3BE,IAAI;IAAJA,IAAI,2BAAG,IAAI;IAAA,qBACXC,MAAM;IAANA,MAAM,6BAAG,KAAK;IAAA,uBACdC,QAAQ;IAARA,QAAQ,+BAAG,MAAM;IAAA,4BACjBC,aAAa;IAAbA,aAAa,oCAAG,WAAW;IACxBb,KAAK;EAGV,uCACK,IAAAc,eAAS,EAACT,KAAK;IAAGC,KAAK,EAALA,KAAK;IAAEI,IAAI,EAAJA,IAAI;IAAEH,MAAM,EAANA,MAAM;IAAEC,KAAK,EAALA,KAAK;IAAEI,QAAQ,EAARA,QAAQ;IAAEC,aAAa,EAAbA;EAAa,GAAKb,KAAK,EAAE;IACpFe,YAAY,EAAEJ,MAAM,uBAAgBK,eAAK,CAACC,cAAc,wBAAkBD,eAAK,CAACE,eAAe,CAAE;IACjGC,MAAM,EAAE,SAAS;IACjBtB,OAAO,EAAE,MAAM;IACfuB,QAAQ,EAAE,CAAC;IACXC,cAAc,EAAE,QAAQ;IACxBC,OAAO,EAAEX,MAAM,GAAG,CAAC,GAAG,IAAI;IAC1BY,OAAO,EAAE;EAAO;AAEpB,CAAC;AAEM,IAAMC,UAAU,GAAG,SAAbA,UAAU;EAAA,2BAAKrB,QAAQ;IAARA,QAAQ,+BAAG,IAAI;IAAKH,KAAK;EAAA,OACnD;IAAM,GAAG,EAAE,aAACK,KAAY;MAAA,OAAKD,eAAe,CAACC,KAAK,EAAEL,KAAK,CAAC;IAAA;EAAC,GAAKA,KAAK,GAClEG,QAAQ,CACJ;AAAA,CACR;AAAC"}

package/src/Misc/ButtonGroup.js

@@ -1,18 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ButtonGroup = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _Identity = require("../Identity");
 var _excluded = ["children", "icon"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 buttonGroupStyle = function buttonGroupStyle() {
   return {
     display: 'flex',
@@ -79,8 +79,8 @@ exports.ButtonGroup = ButtonGroup;
 var Button = function Button(_ref3) {
   var children = _ref3.children,
     icon = _ref3.icon,
-    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
-  return (0, _react.jsx)("button", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref3, _excluded);
+  return (0, _react.jsx)("button", _extends({
     css: function css(theme) {
       return buttonStyle(theme, props);
     }

package/src/Misc/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":["buttonGroupStyle","display","alignItems","buttonStyle","theme","disabled","height","borderRadius","padding","background","COLOR_V2","WHITE","border","GRAY_40","cursor","backgroundColor","GRAY_20","svg","fill","GRAY_70","BLACK","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderColor","GRAY_50","GRAY_60","BLUE_LIGHT_50","BLUE_LIGHT_300","BLUE","ButtonGroup","children","Button","icon","props","marginLeft","fontSize","fontWeight","lineHeight","letterSpacing"],"sources":["ButtonGroup.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 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 {ReactElement} from 'react';\n\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport {IconButtonProps} from './IconButton';\n\nconst buttonGroupStyle: <T>(theme: Theme) => CSSObject = () => ({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst buttonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (theme, {disabled = false}) => ({\n  height: '32px',\n  borderRadius: '12px',\n  padding: '0 12px',\n  background: COLOR_V2.WHITE,\n  border: `1px solid ${COLOR_V2.GRAY_40}`,\n  cursor: 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  backgroundColor: disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE,\n  svg: {\n    fill: disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLACK,\n  },\n  '&:not(:last-child)': {\n    borderTopRightRadius: '0',\n    borderBottomRightRadius: '0',\n  },\n  '&:not(:first-child)': {\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0',\n  },\n  '&:first-child:last-child': {\n    borderRadius: '0',\n  },\n  ...(!disabled && {\n    '&:hover, &:focus': {\n      backgroundColor: COLOR_V2.GRAY_20,\n    },\n    '&:hover': {\n      borderColor: COLOR_V2.GRAY_50,\n    },\n    '&:focus': {\n      borderColor: COLOR_V2.GRAY_60,\n    },\n    '&:active': {\n      backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n      borderColor: COLOR_V2.BLUE_LIGHT_300,\n      svg: {\n        fill: COLOR_V2.BLUE,\n      },\n    },\n  }),\n});\n\ninterface GroupButtonProps<T = HTMLButtonElement> {\n  children?: ReactElement | string;\n  icon?: ReactElement;\n}\n\nconst ButtonGroup = ({children}) => (\n  <div css={(theme: Theme) => buttonGroupStyle(theme)} role=\"group\" aria-label=\"Button Group\">\n    {children}\n  </div>\n);\n\nconst Button = ({children, icon, ...props}: GroupButtonProps) => {\n  return (\n    <button css={(theme: Theme) => buttonStyle(theme, props)} {...props}>\n      {icon}\n      {children && (\n        <span\n          css={{\n            marginLeft: !!icon && '6px',\n            fontSize: '12px',\n            fontWeight: 'bold',\n            lineHeight: '14px',\n            letterSpacing: '0.25px',\n          }}\n        >\n          {children}\n        </span>\n      )}\n    </button>\n  );\n};\n\nButtonGroup.Button = Button;\n\nexport {ButtonGroup};\n"],"mappings":";;;;;;;;AAoBA;AAA8C;AAAA;AAG9C;AAAqC;AAAA;AAAA;AAIrC,IAAMA,gBAAgD,GAAG,SAAnDA,gBAAgD;EAAA,OAAU;IAC9DC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE;EACd,CAAC;AAAA,CAAC;AAEF,IAAMC,WAAsE,GAAG,SAAzEA,WAAsE,CAAIC,KAAK;EAAA,yBAAGC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;EAAA;IACtGC,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE,MAAM;IACpBC,OAAO,EAAE,QAAQ;IACjBC,UAAU,EAAEC,kBAAQ,CAACC,KAAK;IAC1BC,MAAM,sBAAeF,kBAAQ,CAACG,OAAO,CAAE;IACvCC,MAAM,EAAE,SAAS;IACjBb,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,QAAQ;IACpBa,eAAe,EAAEV,QAAQ,GAAGK,kBAAQ,CAACM,OAAO,GAAGN,kBAAQ,CAACC,KAAK;IAC7DM,GAAG,EAAE;MACHC,IAAI,EAAEb,QAAQ,GAAGK,kBAAQ,CAACS,OAAO,GAAGT,kBAAQ,CAACU;IAC/C,CAAC;IACD,oBAAoB,EAAE;MACpBC,oBAAoB,EAAE,GAAG;MACzBC,uBAAuB,EAAE;IAC3B,CAAC;IACD,qBAAqB,EAAE;MACrBC,mBAAmB,EAAE,GAAG;MACxBC,sBAAsB,EAAE;IAC1B,CAAC;IACD,0BAA0B,EAAE;MAC1BjB,YAAY,EAAE;IAChB;EAAC,GACG,CAACF,QAAQ,IAAI;IACf,kBAAkB,EAAE;MAClBU,eAAe,EAAEL,kBAAQ,CAACM;IAC5B,CAAC;IACD,SAAS,EAAE;MACTS,WAAW,EAAEf,kBAAQ,CAACgB;IACxB,CAAC;IACD,SAAS,EAAE;MACTD,WAAW,EAAEf,kBAAQ,CAACiB;IACxB,CAAC;IACD,UAAU,EAAE;MACVZ,eAAe,EAAEL,kBAAQ,CAACkB,aAAa;MACvCH,WAAW,EAAEf,kBAAQ,CAACmB,cAAc;MACpCZ,GAAG,EAAE;QACHC,IAAI,EAAER,kBAAQ,CAACoB;MACjB;IACF;EACF,CAAC;AAAA,CACD;AAOF,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,IAAKC,QAAQ,SAARA,QAAQ;EAAA,OAC5B;IAAK,GAAG,EAAE,aAAC5B,KAAY;MAAA,OAAKJ,gBAAgB,CAACI,KAAK,CAAC;IAAA,CAAC;IAAC,IAAI,EAAC,OAAO;IAAC,cAAW;EAAc,GACxF4B,QAAQ,CACL;AAAA,CACP;AAAC;AAEF,IAAMC,MAAM,GAAG,SAATA,MAAM,QAAqD;EAAA,IAAhDD,QAAQ,SAARA,QAAQ;IAAEE,IAAI,SAAJA,IAAI;IAAKC,KAAK;EACvC,OACE;IAAQ,GAAG,EAAE,aAAC/B,KAAY;MAAA,OAAKD,WAAW,CAACC,KAAK,EAAE+B,KAAK,CAAC;IAAA;EAAC,GAAKA,KAAK,GAChED,IAAI,EACJF,QAAQ,IACP;IACE,GAAG,+BAAE;MACHI,UAAU,EAAE,CAAC,CAACF,IAAI,IAAI,KAAK;MAC3BG,QAAQ,EAAE,MAAM;MAChBC,UAAU,EAAE,MAAM;MAClBC,UAAU,EAAE,MAAM;MAClBC,aAAa,EAAE;IACjB,CAAC;EAAC,GAEDR,QAAQ,CAEZ,CACM;AAEb,CAAC;AAEDD,WAAW,CAACE,MAAM,GAAGA,MAAM"}
+{"version":3,"file":"ButtonGroup.js","names":["buttonGroupStyle","display","alignItems","buttonStyle","theme","disabled","height","borderRadius","padding","background","COLOR_V2","WHITE","border","GRAY_40","cursor","backgroundColor","GRAY_20","svg","fill","GRAY_70","BLACK","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderColor","GRAY_50","GRAY_60","BLUE_LIGHT_50","BLUE_LIGHT_300","BLUE","ButtonGroup","children","Button","icon","props","marginLeft","fontSize","fontWeight","lineHeight","letterSpacing"],"sources":["ButtonGroup.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 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 {ReactElement} from 'react';\n\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport {IconButtonProps} from './IconButton';\n\nconst buttonGroupStyle: <T>(theme: Theme) => CSSObject = () => ({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst buttonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (theme, {disabled = false}) => ({\n  height: '32px',\n  borderRadius: '12px',\n  padding: '0 12px',\n  background: COLOR_V2.WHITE,\n  border: `1px solid ${COLOR_V2.GRAY_40}`,\n  cursor: 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  backgroundColor: disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE,\n  svg: {\n    fill: disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLACK,\n  },\n  '&:not(:last-child)': {\n    borderTopRightRadius: '0',\n    borderBottomRightRadius: '0',\n  },\n  '&:not(:first-child)': {\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0',\n  },\n  '&:first-child:last-child': {\n    borderRadius: '0',\n  },\n  ...(!disabled && {\n    '&:hover, &:focus': {\n      backgroundColor: COLOR_V2.GRAY_20,\n    },\n    '&:hover': {\n      borderColor: COLOR_V2.GRAY_50,\n    },\n    '&:focus': {\n      borderColor: COLOR_V2.GRAY_60,\n    },\n    '&:active': {\n      backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n      borderColor: COLOR_V2.BLUE_LIGHT_300,\n      svg: {\n        fill: COLOR_V2.BLUE,\n      },\n    },\n  }),\n});\n\ninterface GroupButtonProps<T = HTMLButtonElement> {\n  children?: ReactElement | string;\n  icon?: ReactElement;\n}\n\nconst ButtonGroup = ({children}) => (\n  <div css={(theme: Theme) => buttonGroupStyle(theme)} role=\"group\" aria-label=\"Button Group\">\n    {children}\n  </div>\n);\n\nconst Button = ({children, icon, ...props}: GroupButtonProps) => {\n  return (\n    <button css={(theme: Theme) => buttonStyle(theme, props)} {...props}>\n      {icon}\n      {children && (\n        <span\n          css={{\n            marginLeft: !!icon && '6px',\n            fontSize: '12px',\n            fontWeight: 'bold',\n            lineHeight: '14px',\n            letterSpacing: '0.25px',\n          }}\n        >\n          {children}\n        </span>\n      )}\n    </button>\n  );\n};\n\nButtonGroup.Button = Button;\n\nexport {ButtonGroup};\n"],"mappings":";;;;;;AAoBA;AAGA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIrC,IAAMA,gBAAgD,GAAG,SAAnDA,gBAAgD;EAAA,OAAU;IAC9DC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE;EACd,CAAC;AAAA,CAAC;AAEF,IAAMC,WAAsE,GAAG,SAAzEA,WAAsE,CAAIC,KAAK;EAAA,yBAAGC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;EAAA;IACtGC,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE,MAAM;IACpBC,OAAO,EAAE,QAAQ;IACjBC,UAAU,EAAEC,kBAAQ,CAACC,KAAK;IAC1BC,MAAM,sBAAeF,kBAAQ,CAACG,OAAO,CAAE;IACvCC,MAAM,EAAE,SAAS;IACjBb,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,QAAQ;IACpBa,eAAe,EAAEV,QAAQ,GAAGK,kBAAQ,CAACM,OAAO,GAAGN,kBAAQ,CAACC,KAAK;IAC7DM,GAAG,EAAE;MACHC,IAAI,EAAEb,QAAQ,GAAGK,kBAAQ,CAACS,OAAO,GAAGT,kBAAQ,CAACU;IAC/C,CAAC;IACD,oBAAoB,EAAE;MACpBC,oBAAoB,EAAE,GAAG;MACzBC,uBAAuB,EAAE;IAC3B,CAAC;IACD,qBAAqB,EAAE;MACrBC,mBAAmB,EAAE,GAAG;MACxBC,sBAAsB,EAAE;IAC1B,CAAC;IACD,0BAA0B,EAAE;MAC1BjB,YAAY,EAAE;IAChB;EAAC,GACG,CAACF,QAAQ,IAAI;IACf,kBAAkB,EAAE;MAClBU,eAAe,EAAEL,kBAAQ,CAACM;IAC5B,CAAC;IACD,SAAS,EAAE;MACTS,WAAW,EAAEf,kBAAQ,CAACgB;IACxB,CAAC;IACD,SAAS,EAAE;MACTD,WAAW,EAAEf,kBAAQ,CAACiB;IACxB,CAAC;IACD,UAAU,EAAE;MACVZ,eAAe,EAAEL,kBAAQ,CAACkB,aAAa;MACvCH,WAAW,EAAEf,kBAAQ,CAACmB,cAAc;MACpCZ,GAAG,EAAE;QACHC,IAAI,EAAER,kBAAQ,CAACoB;MACjB;IACF;EACF,CAAC;AAAA,CACD;AAOF,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,IAAKC,QAAQ,SAARA,QAAQ;EAAA,OAC5B;IAAK,GAAG,EAAE,aAAC5B,KAAY;MAAA,OAAKJ,gBAAgB,CAACI,KAAK,CAAC;IAAA,CAAC;IAAC,IAAI,EAAC,OAAO;IAAC,cAAW;EAAc,GACxF4B,QAAQ,CACL;AAAA,CACP;AAAC;AAEF,IAAMC,MAAM,GAAG,SAATA,MAAM,QAAqD;EAAA,IAAhDD,QAAQ,SAARA,QAAQ;IAAEE,IAAI,SAAJA,IAAI;IAAKC,KAAK;EACvC,OACE;IAAQ,GAAG,EAAE,aAAC/B,KAAY;MAAA,OAAKD,WAAW,CAACC,KAAK,EAAE+B,KAAK,CAAC;IAAA;EAAC,GAAKA,KAAK,GAChED,IAAI,EACJF,QAAQ,IACP;IACE,GAAG,+BAAE;MACHI,UAAU,EAAE,CAAC,CAACF,IAAI,IAAI,KAAK;MAC3BG,QAAQ,EAAE,MAAM;MAChBC,UAAU,EAAE,MAAM;MAClBC,UAAU,EAAE,MAAM;MAClBC,aAAa,EAAE;IACjB,CAAC;EAAC,GAEDR,QAAQ,CAEZ,CACM;AAEb,CAAC;AAEDD,WAAW,CAACE,MAAM,GAAGA,MAAM"}

package/src/Misc/IconButton.js

@@ -1,20 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.iconButtonStyle = exports.IconButtonVariant = exports.IconButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _motions = require("../Identity/motions");
 var _Text = require("../Text");
 var _util = require("../util");
 var _excluded = ["children"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 IconButtonVariant;
 exports.IconButtonVariant = IconButtonVariant;
 (function (IconButtonVariant) {
@@ -91,8 +91,8 @@ var iconButtonStyle = function iconButtonStyle(theme, _ref) {
 exports.iconButtonStyle = iconButtonStyle;
 var IconButton = function IconButton(_ref2) {
   var children = _ref2.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  return (0, _react.jsx)("button", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return (0, _react.jsx)("button", _extends({
     css: function css(theme) {
       return iconButtonStyle(theme, props);
     }

package/src/Misc/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["IconButtonVariant","iconButtonStyle","theme","variant","PRIMARY","backgroundColor","disabled","border","borderRadius","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","height","IconButton","primaryDisabledBgColor","primaryBgColor","primaryDisabledBorderColor","primaryBorderColor","svg","fill","Input","placeholderColor","general","color","hoverPrimaryBgColor","borderColor","primaryHoverBorderColor","focusBorderColor","activePrimaryBgColor","primaryColor","SECONDARY","secondaryActiveBorderColor","children","props","filterButtonProps","filterProps","filterTextProps"],"sources":["IconButton.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {TextProps, filterTextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum IconButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: IconButtonVariant;\n  backgroundColor?: string;\n}\n\nexport const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (\n  theme,\n  {variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false},\n) => ({\n  border: 0,\n  borderRadius: '12px',\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: '40px',\n  height: '32px',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant === IconButtonVariant.PRIMARY && {\n    backgroundColor: disabled\n      ? theme.IconButton.primaryDisabledBgColor\n      : backgroundColor || theme.IconButton.primaryBgColor,\n    border: disabled\n      ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`\n      : `1px solid ${theme.IconButton.primaryBorderColor}`,\n    svg: {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.IconButton.hoverPrimaryBgColor,\n      },\n      '&:hover': {\n        borderColor: theme.IconButton.primaryHoverBorderColor,\n      },\n      '&:focus': {\n        borderColor: theme.IconButton.focusBorderColor,\n      },\n      '&:active': {\n        backgroundColor: theme.IconButton.activePrimaryBgColor,\n        borderColor: theme.IconButton.focusBorderColor,\n        svg: {\n          fill: theme.general.primaryColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === IconButtonVariant.SECONDARY && {\n    backgroundColor: 'inherit',\n    svg: {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus, &:active': {\n        svg: {\n          fill: theme.general.primaryColor,\n        },\n      },\n      '&:focus': {\n        border: `1px solid ${theme.IconButton.focusBorderColor}`,\n      },\n      '&:active': {\n        border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,\n        backgroundColor: theme.Input.backgroundColor,\n      },\n    }),\n  }),\n});\n\nexport const IconButton = ({children, ...props}: IconButtonProps) => (\n  <button css={(theme: Theme) => iconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {children}\n  </button>\n);\n\nconst filterButtonProps = (props: IconButtonProps) => {\n  return filterProps(filterTextProps(props) as IconButtonProps, ['backgroundColor']);\n};\n"],"mappings":"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"}
+{"version":3,"file":"IconButton.js","names":["IconButtonVariant","iconButtonStyle","theme","variant","PRIMARY","backgroundColor","disabled","border","borderRadius","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","height","IconButton","primaryDisabledBgColor","primaryBgColor","primaryDisabledBorderColor","primaryBorderColor","svg","fill","Input","placeholderColor","general","color","hoverPrimaryBgColor","borderColor","primaryHoverBorderColor","focusBorderColor","activePrimaryBgColor","primaryColor","SECONDARY","secondaryActiveBorderColor","children","props","filterButtonProps","filterProps","filterTextProps"],"sources":["IconButton.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {TextProps, filterTextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum IconButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: IconButtonVariant;\n  backgroundColor?: string;\n}\n\nexport const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (\n  theme,\n  {variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false},\n) => ({\n  border: 0,\n  borderRadius: '12px',\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: '40px',\n  height: '32px',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant === IconButtonVariant.PRIMARY && {\n    backgroundColor: disabled\n      ? theme.IconButton.primaryDisabledBgColor\n      : backgroundColor || theme.IconButton.primaryBgColor,\n    border: disabled\n      ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`\n      : `1px solid ${theme.IconButton.primaryBorderColor}`,\n    svg: {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.IconButton.hoverPrimaryBgColor,\n      },\n      '&:hover': {\n        borderColor: theme.IconButton.primaryHoverBorderColor,\n      },\n      '&:focus': {\n        borderColor: theme.IconButton.focusBorderColor,\n      },\n      '&:active': {\n        backgroundColor: theme.IconButton.activePrimaryBgColor,\n        borderColor: theme.IconButton.focusBorderColor,\n        svg: {\n          fill: theme.general.primaryColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === IconButtonVariant.SECONDARY && {\n    backgroundColor: 'inherit',\n    svg: {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus, &:active': {\n        svg: {\n          fill: theme.general.primaryColor,\n        },\n      },\n      '&:focus': {\n        border: `1px solid ${theme.IconButton.focusBorderColor}`,\n      },\n      '&:active': {\n        border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,\n        backgroundColor: theme.Input.backgroundColor,\n      },\n    }),\n  }),\n});\n\nexport const IconButton = ({children, ...props}: IconButtonProps) => (\n  <button css={(theme: Theme) => iconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {children}\n  </button>\n);\n\nconst filterButtonProps = (props: IconButtonProps) => {\n  return filterProps(filterTextProps(props) as IconButtonProps, ['backgroundColor']);\n};\n"],"mappings":";;;;;;AAoBA;AAEA;AAEA;AACA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAExBA,iBAAiB;AAAA;AAAA,WAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;AAAA,GAAjBA,iBAAiB,iCAAjBA,iBAAiB;AAUtB,IAAMC,eAA0E,GAAG,SAA7EA,eAA0E,CACrFC,KAAK;EAAA,wBACJC,OAAO;IAAPA,OAAO,6BAAGH,iBAAiB,CAACI,OAAO;IAAEC,eAAe,QAAfA,eAAe;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;EAAA;IAEvEC,MAAM,EAAE,CAAC;IACTC,YAAY,EAAE,MAAM;IACpBC,MAAM,EAAEH,QAAQ,GAAG,SAAS,GAAG,SAAS;IACxCI,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,YAAY,EAAE,MAAM;IACpBC,OAAO,EAAE,CAAC;IACVC,OAAO,EAAE,MAAM;IACfC,cAAc,EAAE,MAAM;IACtBC,WAAW,EAAE,cAAc;IAC3BC,UAAU,EAAEC,0BAAiB;IAC7BC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACd,kBAAkB,EAAE;MAClBL,cAAc,EAAE;IAClB;EAAC,GACGb,OAAO,KAAKH,iBAAiB,CAACI,OAAO;IACvCC,eAAe,EAAEC,QAAQ,GACrBJ,KAAK,CAACoB,UAAU,CAACC,sBAAsB,GACvClB,eAAe,IAAIH,KAAK,CAACoB,UAAU,CAACE,cAAc;IACtDjB,MAAM,EAAED,QAAQ,uBACCJ,KAAK,CAACoB,UAAU,CAACG,0BAA0B,wBAC3CvB,KAAK,CAACoB,UAAU,CAACI,kBAAkB,CAAE;IACtDC,GAAG,EAAE;MACHC,IAAI,EAAEtB,QAAQ,GAAGJ,KAAK,CAAC2B,KAAK,CAACC,gBAAgB,GAAG5B,KAAK,CAAC6B,OAAO,CAACC;IAChE;EAAC,GACG,CAAC1B,QAAQ,IAAI;IACf,kBAAkB,EAAE;MAClBD,eAAe,EAAEH,KAAK,CAACoB,UAAU,CAACW;IACpC,CAAC;IACD,SAAS,EAAE;MACTC,WAAW,EAAEhC,KAAK,CAACoB,UAAU,CAACa;IAChC,CAAC;IACD,SAAS,EAAE;MACTD,WAAW,EAAEhC,KAAK,CAACoB,UAAU,CAACc;IAChC,CAAC;IACD,UAAU,EAAE;MACV/B,eAAe,EAAEH,KAAK,CAACoB,UAAU,CAACe,oBAAoB;MACtDH,WAAW,EAAEhC,KAAK,CAACoB,UAAU,CAACc,gBAAgB;MAC9CT,GAAG,EAAE;QACHC,IAAI,EAAE1B,KAAK,CAAC6B,OAAO,CAACO;MACtB;IACF;EACF,CAAC,CACF,GACGnC,OAAO,KAAKH,iBAAiB,CAACuC,SAAS;IACzClC,eAAe,EAAE,SAAS;IAC1BsB,GAAG,EAAE;MACHC,IAAI,EAAEtB,QAAQ,GAAGJ,KAAK,CAAC2B,KAAK,CAACC,gBAAgB,GAAG5B,KAAK,CAAC6B,OAAO,CAACC;IAChE;EAAC,GACG,CAAC1B,QAAQ,IAAI;IACf,4BAA4B,EAAE;MAC5BqB,GAAG,EAAE;QACHC,IAAI,EAAE1B,KAAK,CAAC6B,OAAO,CAACO;MACtB;IACF,CAAC;IACD,SAAS,EAAE;MACT/B,MAAM,sBAAeL,KAAK,CAACoB,UAAU,CAACc,gBAAgB;IACxD,CAAC;IACD,UAAU,EAAE;MACV7B,MAAM,sBAAeL,KAAK,CAACoB,UAAU,CAACkB,0BAA0B,CAAE;MAClEnC,eAAe,EAAEH,KAAK,CAAC2B,KAAK,CAACxB;IAC/B;EACF,CAAC,CACF;AAAA,CACD;AAAC;AAEI,IAAMiB,UAAU,GAAG,SAAbA,UAAU;EAAA,IAAKmB,QAAQ,SAARA,QAAQ;IAAKC,KAAK;EAAA,OAC5C;IAAQ,GAAG,EAAE,aAACxC,KAAY;MAAA,OAAKD,eAAe,CAACC,KAAK,EAAEwC,KAAK,CAAC;IAAA;EAAC,GAAKC,iBAAiB,CAACD,KAAK,CAAC,GACvFD,QAAQ,CACF;AAAA,CACV;AAAC;AAEF,IAAME,iBAAiB,GAAG,SAApBA,iBAAiB,CAAID,KAAsB,EAAK;EACpD,OAAO,IAAAE,iBAAW,EAAC,IAAAC,qBAAe,EAACH,KAAK,CAAC,EAAqB,CAAC,iBAAiB,CAAC,CAAC;AACpF,CAAC"}

package/src/Misc/IsInViewport.js

@@ -1,32 +1,37 @@
 "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.IsInViewport = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _excluded = ["onEnterViewport", "disabled", "checkViewportOnce"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var IsInViewport = function IsInViewport(_ref) {
   var onEnterViewport = _ref.onEnterViewport,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$checkViewportOnc = _ref.checkViewportOnce,
     checkViewportOnce = _ref$checkViewportOnc === void 0 ? false : _ref$checkViewportOnc,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var element = (0, _react2.useRef)();
   (0, _react2.useEffect)(function () {
     var observer = undefined;
     if (onEnterViewport && !disabled) {
       observer = new IntersectionObserver(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1),
+        var _ref3 = _slicedToArray(_ref2, 1),
           isIntersecting = _ref3[0].isIntersecting;
         if (isIntersecting) {
           if (checkViewportOnce) {
@@ -45,7 +50,7 @@ var IsInViewport = function IsInViewport(_ref) {
       }
     };
   }, [onEnterViewport]);
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", _extends({
     ref: element
   }, props));
 };

package/src/Misc/IsInViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"IsInViewport.js","names":["IsInViewport","onEnterViewport","disabled","checkViewportOnce","props","element","useRef","useEffect","observer","undefined","IntersectionObserver","isIntersecting","disconnect","observe","current"],"sources":["IsInViewport.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React, {useEffect, useRef} from 'react';\n\nexport interface IsInViewportProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  checkViewportOnce?: boolean;\n  disabled?: boolean;\n  onEnterViewport?: () => void;\n}\n\nexport const IsInViewport = ({\n  onEnterViewport,\n  disabled = false,\n  checkViewportOnce = false,\n  ...props\n}: IsInViewportProps) => {\n  const element = useRef<HTMLDivElement>();\n  useEffect(() => {\n    let observer = undefined;\n    if (onEnterViewport && !disabled) {\n      observer = new IntersectionObserver(([{isIntersecting}]) => {\n        if (isIntersecting) {\n          if (checkViewportOnce) {\n            observer.disconnect();\n          }\n          if (onEnterViewport && !disabled) {\n            onEnterViewport();\n          }\n        }\n      });\n      observer.observe(element.current);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [onEnterViewport]);\n  return <div ref={element} {...props} />;\n};\n"],"mappings":";;;;;;;;;;;AAoBA;AACA;AAA+C;AAAA;AAAA;AAQxC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAKA;EAAA,IAJvBC,eAAe,QAAfA,eAAe;IAAA,qBACfC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,6BAChBC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IACtBC,KAAK;EAER,IAAMC,OAAO,GAAG,IAAAC,cAAM,GAAkB;EACxC,IAAAC,iBAAS,EAAC,YAAM;IACd,IAAIC,QAAQ,GAAGC,SAAS;IACxB,IAAIR,eAAe,IAAI,CAACC,QAAQ,EAAE;MAChCM,QAAQ,GAAG,IAAIE,oBAAoB,CAAC,iBAAwB;QAAA;UAArBC,cAAc,YAAdA,cAAc;QACnD,IAAIA,cAAc,EAAE;UAClB,IAAIR,iBAAiB,EAAE;YACrBK,QAAQ,CAACI,UAAU,EAAE;UACvB;UACA,IAAIX,eAAe,IAAI,CAACC,QAAQ,EAAE;YAChCD,eAAe,EAAE;UACnB;QACF;MACF,CAAC,CAAC;MACFO,QAAQ,CAACK,OAAO,CAACR,OAAO,CAACS,OAAO,CAAC;IACnC;IAEA,OAAO,YAAM;MACX,IAAIN,QAAQ,EAAE;QACZA,QAAQ,CAACI,UAAU,EAAE;MACvB;IACF,CAAC;EACH,CAAC,EAAE,CAACX,eAAe,CAAC,CAAC;EACrB,OAAO;IAAK,GAAG,EAAEI;EAAQ,GAAKD,KAAK,EAAI;AACzC,CAAC;AAAC"}
+{"version":3,"file":"IsInViewport.js","names":["IsInViewport","onEnterViewport","disabled","checkViewportOnce","props","element","useRef","useEffect","observer","undefined","IntersectionObserver","isIntersecting","disconnect","observe","current"],"sources":["IsInViewport.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React, {useEffect, useRef} from 'react';\n\nexport interface IsInViewportProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  checkViewportOnce?: boolean;\n  disabled?: boolean;\n  onEnterViewport?: () => void;\n}\n\nexport const IsInViewport = ({\n  onEnterViewport,\n  disabled = false,\n  checkViewportOnce = false,\n  ...props\n}: IsInViewportProps) => {\n  const element = useRef<HTMLDivElement>();\n  useEffect(() => {\n    let observer = undefined;\n    if (onEnterViewport && !disabled) {\n      observer = new IntersectionObserver(([{isIntersecting}]) => {\n        if (isIntersecting) {\n          if (checkViewportOnce) {\n            observer.disconnect();\n          }\n          if (onEnterViewport && !disabled) {\n            onEnterViewport();\n          }\n        }\n      });\n      observer.observe(element.current);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [onEnterViewport]);\n  return <div ref={element} {...props} />;\n};\n"],"mappings":";;;;;;;AAoBA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAKA;EAAA,IAJvBC,eAAe,QAAfA,eAAe;IAAA,qBACfC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,6BAChBC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IACtBC,KAAK;EAER,IAAMC,OAAO,GAAG,IAAAC,cAAM,GAAkB;EACxC,IAAAC,iBAAS,EAAC,YAAM;IACd,IAAIC,QAAQ,GAAGC,SAAS;IACxB,IAAIR,eAAe,IAAI,CAACC,QAAQ,EAAE;MAChCM,QAAQ,GAAG,IAAIE,oBAAoB,CAAC,iBAAwB;QAAA;UAArBC,cAAc,YAAdA,cAAc;QACnD,IAAIA,cAAc,EAAE;UAClB,IAAIR,iBAAiB,EAAE;YACrBK,QAAQ,CAACI,UAAU,EAAE;UACvB;UACA,IAAIX,eAAe,IAAI,CAACC,QAAQ,EAAE;YAChCD,eAAe,EAAE;UACnB;QACF;MACF,CAAC,CAAC;MACFO,QAAQ,CAACK,OAAO,CAACR,OAAO,CAACS,OAAO,CAAC;IACnC;IAEA,OAAO,YAAM;MACX,IAAIN,QAAQ,EAAE;QACZA,QAAQ,CAACI,UAAU,EAAE;MACvB;IACF,CAAC;EACH,CAAC,EAAE,CAACX,eAAe,CAAC,CAAC;EACrB,OAAO;IAAK,GAAG,EAAEI;EAAQ,GAAKD,KAAK,EAAI;AACzC,CAAC;AAAC"}

package/src/Misc/Loading.js

@@ -1,19 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Loading = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _Identity = require("../Identity");
 var _motions = require("../Identity/motions");
 var _templateObject;
 var _excluded = ["progress", "size", "color"];
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Loading = function Loading(_ref) {
   var _ref$progress = _ref.progress,
     progress = _ref$progress === void 0 ? undefined : _ref$progress,
@@ -21,12 +22,12 @@ var Loading = function Loading(_ref) {
     size = _ref$size === void 0 ? 43 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#218fd1' : _ref$color,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var pathLength = 125.68;
   var rotationOffset = -0.75;
   var rotationDelay = _motions.DURATION.EXTRA_LONG * rotationOffset;
-  var fillAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    0% {\n      stroke-dashoffset: ", ";\n    }\n    100% {\n      stroke-dashoffset: 0;\n    }\n  "])), pathLength + pathLength);
-  return (0, _react.jsx)("svg", (0, _extends2["default"])({
+  var fillAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      stroke-dashoffset: ", ";\n    }\n    100% {\n      stroke-dashoffset: 0;\n    }\n  "])), pathLength + pathLength);
+  return (0, _react.jsx)("svg", _extends({
     width: size,
     height: size,
     viewBox: "0 0 43 43",

package/src/Misc/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","names":["Loading","progress","undefined","size","color","props","pathLength","rotationOffset","rotationDelay","DURATION","EXTRA_LONG","fillAnimation","keyframes","COLOR","opaque","animation","ANIMATION","rotate","strokeDasharray","transformOrigin","defaultProps"],"sources":["Loading.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, keyframes} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {ANIMATION, DURATION} from '../Identity/motions';\n\nexport interface LoadingProps<T = SVGSVGElement> extends React.SVGProps<T> {\n  color?: string;\n  progress?: number;\n  size?: number;\n}\n\nexport const Loading = ({progress = undefined, size = 43, color = '#218fd1', ...props}: LoadingProps) => {\n  const pathLength = 125.68;\n  const rotationOffset = -0.75;\n  const rotationDelay = DURATION.EXTRA_LONG * rotationOffset;\n  const fillAnimation = keyframes`\n    0% {\n      stroke-dashoffset: ${pathLength + pathLength};\n    }\n    100% {\n      stroke-dashoffset: 0;\n    }\n  `;\n\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 43 43\" strokeWidth=\"3\" fill=\"none\" {...props}>\n      <circle cx=\"21.5\" cy=\"21.5\" r=\"20\" stroke={COLOR.opaque(color, 0.08)} />\n      <circle\n        css={\n          !progress && {\n            animation: `${fillAnimation} ${DURATION.EXTRA_LONG}ms ease-in-out infinite,\n              ${ANIMATION.rotate} ${DURATION.EXTRA_LONG}ms linear ${rotationDelay}ms infinite`,\n            strokeDasharray: pathLength,\n            transformOrigin: '50% 50%',\n          }\n        }\n        cx=\"21.5\"\n        cy=\"21.5\"\n        r=\"20\"\n        stroke={color}\n        strokeLinecap=\"round\"\n        strokeDasharray={pathLength}\n        strokeDashoffset={progress && `${pathLength - pathLength * progress}`}\n      />\n    </svg>\n  );\n};\n\nLoading.defaultProps = {\n  progress: undefined,\n  size: 43,\n};\n"],"mappings":";;;;;;;;;;AAoBA;AACA;AAEA;AACA;AAAwD;AAAA;AAQjD,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAAqF;EAAA,yBAAhFC,QAAQ;IAARA,QAAQ,8BAAGC,SAAS;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,SAAS;IAAKC,KAAK;EACnF,IAAMC,UAAU,GAAG,MAAM;EACzB,IAAMC,cAAc,GAAG,CAAC,IAAI;EAC5B,IAAMC,aAAa,GAAGC,iBAAQ,CAACC,UAAU,GAAGH,cAAc;EAC1D,IAAMI,aAAa,OAAGC,gBAAS,6LAENN,UAAU,GAAGA,UAAU,CAK/C;EAED,OACE;IAAK,KAAK,EAAEH,IAAK;IAAC,MAAM,EAAEA,IAAK;IAAC,OAAO,EAAC,WAAW;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,GAAKE,KAAK,GACvF;IAAQ,EAAE,EAAC,MAAM;IAAC,EAAE,EAAC,MAAM;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAEQ,eAAK,CAACC,MAAM,CAACV,KAAK,EAAE,IAAI;EAAE,EAAG,EACxE;IACE,GAAG,EACD,CAACH,QAAQ,IAAI;MACXc,SAAS,YAAKJ,aAAa,cAAIF,iBAAQ,CAACC,UAAU,qDAC9CM,kBAAS,CAACC,MAAM,cAAIR,iBAAQ,CAACC,UAAU,uBAAaF,aAAa,gBAAa;MAClFU,eAAe,EAAEZ,UAAU;MAC3Ba,eAAe,EAAE;IACnB,CACD;IACD,EAAE,EAAC,MAAM;IACT,EAAE,EAAC,MAAM;IACT,CAAC,EAAC,IAAI;IACN,MAAM,EAAEf,KAAM;IACd,aAAa,EAAC,OAAO;IACrB,eAAe,EAAEE,UAAW;IAC5B,gBAAgB,EAAEL,QAAQ,cAAOK,UAAU,GAAGA,UAAU,GAAGL,QAAQ;EAAG,EACtE,CACE;AAEV,CAAC;AAAC;AAEFD,OAAO,CAACoB,YAAY,GAAG;EACrBnB,QAAQ,EAAEC,SAAS;EACnBC,IAAI,EAAE;AACR,CAAC"}
+{"version":3,"file":"Loading.js","names":["Loading","progress","undefined","size","color","props","pathLength","rotationOffset","rotationDelay","DURATION","EXTRA_LONG","fillAnimation","keyframes","COLOR","opaque","animation","ANIMATION","rotate","strokeDasharray","transformOrigin","defaultProps"],"sources":["Loading.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, keyframes} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {ANIMATION, DURATION} from '../Identity/motions';\n\nexport interface LoadingProps<T = SVGSVGElement> extends React.SVGProps<T> {\n  color?: string;\n  progress?: number;\n  size?: number;\n}\n\nexport const Loading = ({progress = undefined, size = 43, color = '#218fd1', ...props}: LoadingProps) => {\n  const pathLength = 125.68;\n  const rotationOffset = -0.75;\n  const rotationDelay = DURATION.EXTRA_LONG * rotationOffset;\n  const fillAnimation = keyframes`\n    0% {\n      stroke-dashoffset: ${pathLength + pathLength};\n    }\n    100% {\n      stroke-dashoffset: 0;\n    }\n  `;\n\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 43 43\" strokeWidth=\"3\" fill=\"none\" {...props}>\n      <circle cx=\"21.5\" cy=\"21.5\" r=\"20\" stroke={COLOR.opaque(color, 0.08)} />\n      <circle\n        css={\n          !progress && {\n            animation: `${fillAnimation} ${DURATION.EXTRA_LONG}ms ease-in-out infinite,\n              ${ANIMATION.rotate} ${DURATION.EXTRA_LONG}ms linear ${rotationDelay}ms infinite`,\n            strokeDasharray: pathLength,\n            transformOrigin: '50% 50%',\n          }\n        }\n        cx=\"21.5\"\n        cy=\"21.5\"\n        r=\"20\"\n        stroke={color}\n        strokeLinecap=\"round\"\n        strokeDasharray={pathLength}\n        strokeDashoffset={progress && `${pathLength - pathLength * progress}`}\n      />\n    </svg>\n  );\n};\n\nLoading.defaultProps = {\n  progress: undefined,\n  size: 43,\n};\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AAAwD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjD,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAAqF;EAAA,yBAAhFC,QAAQ;IAARA,QAAQ,8BAAGC,SAAS;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,SAAS;IAAKC,KAAK;EACnF,IAAMC,UAAU,GAAG,MAAM;EACzB,IAAMC,cAAc,GAAG,CAAC,IAAI;EAC5B,IAAMC,aAAa,GAAGC,iBAAQ,CAACC,UAAU,GAAGH,cAAc;EAC1D,IAAMI,aAAa,OAAGC,gBAAS,4KAENN,UAAU,GAAGA,UAAU,CAK/C;EAED,OACE;IAAK,KAAK,EAAEH,IAAK;IAAC,MAAM,EAAEA,IAAK;IAAC,OAAO,EAAC,WAAW;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,GAAKE,KAAK,GACvF;IAAQ,EAAE,EAAC,MAAM;IAAC,EAAE,EAAC,MAAM;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAEQ,eAAK,CAACC,MAAM,CAACV,KAAK,EAAE,IAAI;EAAE,EAAG,EACxE;IACE,GAAG,EACD,CAACH,QAAQ,IAAI;MACXc,SAAS,YAAKJ,aAAa,cAAIF,iBAAQ,CAACC,UAAU,qDAC9CM,kBAAS,CAACC,MAAM,cAAIR,iBAAQ,CAACC,UAAU,uBAAaF,aAAa,gBAAa;MAClFU,eAAe,EAAEZ,UAAU;MAC3Ba,eAAe,EAAE;IACnB,CACD;IACD,EAAE,EAAC,MAAM;IACT,EAAE,EAAC,MAAM;IACT,CAAC,EAAC,IAAI;IACN,MAAM,EAAEf,KAAM;IACd,aAAa,EAAC,OAAO;IACrB,eAAe,EAAEE,UAAW;IAC5B,gBAAgB,EAAEL,QAAQ,cAAOK,UAAU,GAAGA,UAAU,GAAGL,QAAQ;EAAG,EACtE,CACE;AAEV,CAAC;AAAC;AAEFD,OAAO,CAACoB,YAAY,GAAG;EACrBnB,QAAQ,EAAEC,SAAS;EACnBC,IAAI,EAAE;AACR,CAAC"}

package/src/Misc/Pagination.js

@@ -1,19 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Pagination = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _Identity = require("../Identity");
 var _Layout = require("../Layout");
 var _Text = require("../Text");
 var _excluded = ["currentPage", "numberOfPages", "goPage", "previousPageComponent", "nextPageComponent"];
+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 _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "1uohtp9",
   styles: "flex-basis:100px"
@@ -55,7 +56,7 @@ var Pagination = function Pagination(_ref) {
     NextPageComponent = _ref$nextPageComponen === void 0 ? function () {
       return '>';
     } : _ref$nextPageComponen,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var isLastPage = currentPage === numberOfPages - 1;
   var isFirstPage = currentPage === 0;
   var renderPageList = function renderPageList() {
@@ -104,7 +105,7 @@ var Pagination = function Pagination(_ref) {
     }
     return pages;
   };
-  return (0, _react.jsx)(_Layout.FlexBox, (0, _extends2["default"])({
+  return (0, _react.jsx)(_Layout.FlexBox, _extends({
     align: "flex-end",
     "data-uie-name": "element-pagination"
   }, props), (0, _react.jsx)("div", {

package/src/Misc/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["Pagination","currentPage","numberOfPages","goPage","previousPageComponent","PreviousPageComponent","nextPageComponent","NextPageComponent","props","isLastPage","isFirstPage","renderPageList","lastPageIndex","spanLength","endLength","skipLength","normalizeCount","dots","key","renderPageNumber","pageIndex","color","COLOR","BLUE","margin","normalizedCurrent","Math","min","max","beforeCount","afterCount","pages","Array","from","nothing","index","splice"],"sources":["Pagination.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\nimport {COLOR} from '../Identity';\nimport {FlexBox} from '../Layout';\nimport {Bold, Link} from '../Text';\n\ninterface PaginationProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  currentPage?: number;\n  goPage?: (page: number) => void;\n  nextPageComponent?: any;\n  numberOfPages?: number;\n  previousPageComponent?: any;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  currentPage = 0,\n  numberOfPages = 1,\n  goPage,\n  previousPageComponent: PreviousPageComponent = () => '<',\n  nextPageComponent: NextPageComponent = () => '>',\n  ...props\n}) => {\n  const isLastPage = currentPage === numberOfPages - 1;\n  const isFirstPage = currentPage === 0;\n\n  const renderPageList = () => {\n    const lastPageIndex = numberOfPages - 1;\n    const spanLength = 1;\n    const endLength = 1;\n    const skipLength = 1;\n    const normalizeCount = endLength + skipLength + spanLength;\n    const dots = (key: string) => (\n      <Bold key={key} fontSize={'11px'}>\n        {'…'}\n      </Bold>\n    );\n    const renderPageNumber = pageIndex =>\n      currentPage === pageIndex ? (\n        <Bold\n          fontSize={'11px'}\n          key={pageIndex}\n          style={{color: COLOR.BLUE, margin: '0 8px'}}\n          data-uie-name=\"status-active-page\"\n        >\n          {pageIndex + 1}\n        </Bold>\n      ) : (\n        <Link key={pageIndex} style={{margin: '0 8px'}} onClick={() => goPage(pageIndex)} data-uie-name=\"go-page\">\n          {pageIndex + 1}\n        </Link>\n      );\n\n    const normalizedCurrent = Math.min(Math.max(currentPage, normalizeCount), lastPageIndex - normalizeCount);\n    const beforeCount = normalizedCurrent - spanLength - endLength;\n    const afterCount = lastPageIndex - endLength - normalizedCurrent - spanLength;\n\n    const pages = Array.from(Array(numberOfPages), (nothing, index) => renderPageNumber(index));\n    if (afterCount > skipLength) {\n      pages.splice(normalizedCurrent + spanLength + 1, afterCount, dots('dots-end'));\n    }\n    if (beforeCount > skipLength) {\n      pages.splice(endLength, beforeCount, dots('dots-start'));\n    }\n\n    return pages;\n  };\n\n  return (\n    <FlexBox align=\"flex-end\" data-uie-name=\"element-pagination\" {...props}>\n      <div css={{flexBasis: 100}}>\n        {!isFirstPage && (\n          <Link block onClick={() => goPage(currentPage - 1)} data-uie-name=\"go-previous-page\">\n            <PreviousPageComponent />\n          </Link>\n        )}\n      </div>\n      <div\n        css={{alignItems: 'flex-end', display: 'flex', flexDirection: 'row', margin: '0 auto'}}\n        data-uie-name=\"list-pages\"\n      >\n        {renderPageList()}\n      </div>\n      <div css={{display: 'flex', flexBasis: 100, justifyContent: 'flex-end'}}>\n        {!isLastPage && (\n          <Link block onClick={() => goPage(currentPage + 1)} data-uie-name=\"go-next-page\">\n            <NextPageComponent />\n          </Link>\n        )}\n      </div>\n    </FlexBox>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["Pagination","currentPage","numberOfPages","goPage","previousPageComponent","PreviousPageComponent","nextPageComponent","NextPageComponent","props","isLastPage","isFirstPage","renderPageList","lastPageIndex","spanLength","endLength","skipLength","normalizeCount","dots","key","renderPageNumber","pageIndex","color","COLOR","BLUE","margin","normalizedCurrent","Math","min","max","beforeCount","afterCount","pages","Array","from","nothing","index","splice"],"sources":["Pagination.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\nimport {COLOR} from '../Identity';\nimport {FlexBox} from '../Layout';\nimport {Bold, Link} from '../Text';\n\ninterface PaginationProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  currentPage?: number;\n  goPage?: (page: number) => void;\n  nextPageComponent?: any;\n  numberOfPages?: number;\n  previousPageComponent?: any;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  currentPage = 0,\n  numberOfPages = 1,\n  goPage,\n  previousPageComponent: PreviousPageComponent = () => '<',\n  nextPageComponent: NextPageComponent = () => '>',\n  ...props\n}) => {\n  const isLastPage = currentPage === numberOfPages - 1;\n  const isFirstPage = currentPage === 0;\n\n  const renderPageList = () => {\n    const lastPageIndex = numberOfPages - 1;\n    const spanLength = 1;\n    const endLength = 1;\n    const skipLength = 1;\n    const normalizeCount = endLength + skipLength + spanLength;\n    const dots = (key: string) => (\n      <Bold key={key} fontSize={'11px'}>\n        {'…'}\n      </Bold>\n    );\n    const renderPageNumber = pageIndex =>\n      currentPage === pageIndex ? (\n        <Bold\n          fontSize={'11px'}\n          key={pageIndex}\n          style={{color: COLOR.BLUE, margin: '0 8px'}}\n          data-uie-name=\"status-active-page\"\n        >\n          {pageIndex + 1}\n        </Bold>\n      ) : (\n        <Link key={pageIndex} style={{margin: '0 8px'}} onClick={() => goPage(pageIndex)} data-uie-name=\"go-page\">\n          {pageIndex + 1}\n        </Link>\n      );\n\n    const normalizedCurrent = Math.min(Math.max(currentPage, normalizeCount), lastPageIndex - normalizeCount);\n    const beforeCount = normalizedCurrent - spanLength - endLength;\n    const afterCount = lastPageIndex - endLength - normalizedCurrent - spanLength;\n\n    const pages = Array.from(Array(numberOfPages), (nothing, index) => renderPageNumber(index));\n    if (afterCount > skipLength) {\n      pages.splice(normalizedCurrent + spanLength + 1, afterCount, dots('dots-end'));\n    }\n    if (beforeCount > skipLength) {\n      pages.splice(endLength, beforeCount, dots('dots-start'));\n    }\n\n    return pages;\n  };\n\n  return (\n    <FlexBox align=\"flex-end\" data-uie-name=\"element-pagination\" {...props}>\n      <div css={{flexBasis: 100}}>\n        {!isFirstPage && (\n          <Link block onClick={() => goPage(currentPage - 1)} data-uie-name=\"go-previous-page\">\n            <PreviousPageComponent />\n          </Link>\n        )}\n      </div>\n      <div\n        css={{alignItems: 'flex-end', display: 'flex', flexDirection: 'row', margin: '0 auto'}}\n        data-uie-name=\"list-pages\"\n      >\n        {renderPageList()}\n      </div>\n      <div css={{display: 'flex', flexBasis: 100, justifyContent: 'flex-end'}}>\n        {!isLastPage && (\n          <Link block onClick={() => goPage(currentPage + 1)} data-uie-name=\"go-next-page\">\n            <NextPageComponent />\n          </Link>\n        )}\n      </div>\n    </FlexBox>\n  );\n};\n"],"mappings":"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"}

package/src/Misc/Pill.js

@@ -1,19 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pillStyle = exports.filterPillProps = exports.Pill = exports.PILL_TYPE = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _Identity = require("../Identity");
 var _motions = require("../Identity/motions");
 var _util = require("../util");
 var _templateObject;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 PILL_TYPE;
 exports.PILL_TYPE = PILL_TYPE;
 (function (PILL_TYPE) {
@@ -27,9 +27,9 @@ var pillStyle = function pillStyle(theme, _ref) {
     active = _ref$active === void 0 ? false : _ref$active,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? null : _ref$type;
-  var backgroundColors = (_backgroundColors = {}, (0, _defineProperty2["default"])(_backgroundColors, PILL_TYPE.error, _Identity.COLOR.RED_OPAQUE_32), (0, _defineProperty2["default"])(_backgroundColors, PILL_TYPE.success, _Identity.COLOR.GREEN_OPAQUE_32), (0, _defineProperty2["default"])(_backgroundColors, PILL_TYPE.warning, _Identity.COLOR.YELLOW_OPAQUE_32), _backgroundColors);
+  var backgroundColors = (_backgroundColors = {}, _defineProperty(_backgroundColors, PILL_TYPE.error, _Identity.COLOR.RED_OPAQUE_32), _defineProperty(_backgroundColors, PILL_TYPE.success, _Identity.COLOR.GREEN_OPAQUE_32), _defineProperty(_backgroundColors, PILL_TYPE.warning, _Identity.COLOR.YELLOW_OPAQUE_32), _backgroundColors);
   var backgroundColor = active ? '#eee' : type ? backgroundColors[type] : 'transparent';
-  var pillAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    0% {\n      background-color: transparent;\n    }\n    100% {\n      background-color: ", ";\n    }\n"])), backgroundColor);
+  var pillAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-color: transparent;\n    }\n    100% {\n      background-color: ", ";\n    }\n"])), backgroundColor);
   return {
     '&:first-of-type': {
       marginLeft: 0
@@ -58,7 +58,7 @@ var filterPillProps = function filterPillProps(props) {
 };
 exports.filterPillProps = filterPillProps;
 var Pill = function Pill(props) {
-  return (0, _react.jsx)("span", (0, _extends2["default"])({
+  return (0, _react.jsx)("span", _extends({
     css: function css(theme) {
       return pillStyle(theme, props);
     },

package/src/Misc/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","names":["PILL_TYPE","pillStyle","theme","active","type","backgroundColors","error","COLOR","RED_OPAQUE_32","success","GREEN_OPAQUE_32","warning","YELLOW_OPAQUE_32","backgroundColor","pillAnimation","keyframes","marginLeft","marginRight","animation","DURATION","DEFAULT","EASE","QUART","borderRadius","color","TEXT","general","cursor","undefined","display","fontSize","lineHeight","margin","minHeight","padding","textAlign","textDecoration","filterPillProps","props","filterProps","Pill"],"sources":["Pill.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, keyframes} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {DURATION, EASE} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {filterProps} from '../util';\n\nexport interface PillProps<T = HTMLSpanElement> extends React.HTMLProps<T> {\n  active?: boolean;\n  type?: PILL_TYPE;\n}\n\nexport enum PILL_TYPE {\n  error = 'ERROR',\n  success = 'SUCCESS',\n  warning = 'WARNING',\n}\n\nexport const pillStyle: <T>(theme: Theme, props: PillProps<T>) => CSSObject = (\n  theme,\n  {active = false, type = null},\n) => {\n  const backgroundColors = {\n    [PILL_TYPE.error]: COLOR.RED_OPAQUE_32,\n    [PILL_TYPE.success]: COLOR.GREEN_OPAQUE_32,\n    [PILL_TYPE.warning]: COLOR.YELLOW_OPAQUE_32,\n  };\n  const backgroundColor = active ? '#eee' : type ? backgroundColors[type] : 'transparent';\n  const pillAnimation = keyframes`\n    0% {\n      background-color: transparent;\n    }\n    100% {\n      background-color: ${backgroundColor};\n    }\n`;\n  return {\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n    '&:last-of-type': {\n      marginRight: 0,\n    },\n    animation: `${pillAnimation} ${DURATION.DEFAULT}ms ${EASE.QUART}`,\n    backgroundColor,\n    borderRadius: '160px',\n    color: active ? COLOR.TEXT : theme.general.color,\n    cursor: active ? 'default' : undefined,\n    display: 'inline-block',\n    fontSize: '12px',\n    lineHeight: '16px',\n    margin: type ? '12px 0 0 0' : '0 8px',\n    minHeight: '32px',\n    padding: '8px 24px',\n    textAlign: 'center',\n    textDecoration: 'none',\n  };\n};\n\nexport const filterPillProps = (props: PillProps) => filterProps(props, ['active']);\n\nexport const Pill = (props: PillProps) => (\n  <span\n    css={(theme: Theme) => pillStyle(theme, props)}\n    data-uie-name=\"element-pill\"\n    data-uie-status={props.type}\n    {...filterPillProps(props)}\n  />\n);\n"],"mappings":";;;;;;;;;;AAoBA;AACA;AAEA;AACA;AAEA;AAAoC;AAAA,IAOxBA,SAAS;AAAA;AAAA,WAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;AAAA,GAATA,SAAS,yBAATA,SAAS;AAMd,IAAMC,SAA8D,GAAG,SAAjEA,SAA8D,CACzEC,KAAK,QAEF;EAAA;EAAA,uBADFC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,IAAI;EAE5B,IAAMC,gBAAgB,gFACnBL,SAAS,CAACM,KAAK,EAAGC,eAAK,CAACC,aAAa,uDACrCR,SAAS,CAACS,OAAO,EAAGF,eAAK,CAACG,eAAe,uDACzCV,SAAS,CAACW,OAAO,EAAGJ,eAAK,CAACK,gBAAgB,qBAC5C;EACD,IAAMC,eAAe,GAAGV,MAAM,GAAG,MAAM,GAAGC,IAAI,GAAGC,gBAAgB,CAACD,IAAI,CAAC,GAAG,aAAa;EACvF,IAAMU,aAAa,OAAGC,gBAAS,mMAKPF,eAAe,CAExC;EACC,OAAO;IACL,iBAAiB,EAAE;MACjBG,UAAU,EAAE;IACd,CAAC;IACD,gBAAgB,EAAE;MAChBC,WAAW,EAAE;IACf,CAAC;IACDC,SAAS,YAAKJ,aAAa,cAAIK,iBAAQ,CAACC,OAAO,gBAAMC,aAAI,CAACC,KAAK,CAAE;IACjET,eAAe,EAAfA,eAAe;IACfU,YAAY,EAAE,OAAO;IACrBC,KAAK,EAAErB,MAAM,GAAGI,eAAK,CAACkB,IAAI,GAAGvB,KAAK,CAACwB,OAAO,CAACF,KAAK;IAChDG,MAAM,EAAExB,MAAM,GAAG,SAAS,GAAGyB,SAAS;IACtCC,OAAO,EAAE,cAAc;IACvBC,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,MAAM;IAClBC,MAAM,EAAE5B,IAAI,GAAG,YAAY,GAAG,OAAO;IACrC6B,SAAS,EAAE,MAAM;IACjBC,OAAO,EAAE,UAAU;IACnBC,SAAS,EAAE,QAAQ;IACnBC,cAAc,EAAE;EAClB,CAAC;AACH,CAAC;AAAC;AAEK,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAAgB;EAAA,OAAK,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;AAAA;AAAC;AAE7E,IAAME,IAAI,GAAG,SAAPA,IAAI,CAAIF,KAAgB;EAAA,OACnC;IACE,GAAG,EAAE,aAACpC,KAAY;MAAA,OAAKD,SAAS,CAACC,KAAK,EAAEoC,KAAK,CAAC;IAAA,CAAC;IAC/C,iBAAc,cAAc;IAC5B,mBAAiBA,KAAK,CAAClC;EAAK,GACxBiC,eAAe,CAACC,KAAK,CAAC,EAC1B;AAAA,CACH;AAAC"}
+{"version":3,"file":"Pill.js","names":["PILL_TYPE","pillStyle","theme","active","type","backgroundColors","error","COLOR","RED_OPAQUE_32","success","GREEN_OPAQUE_32","warning","YELLOW_OPAQUE_32","backgroundColor","pillAnimation","keyframes","marginLeft","marginRight","animation","DURATION","DEFAULT","EASE","QUART","borderRadius","color","TEXT","general","cursor","undefined","display","fontSize","lineHeight","margin","minHeight","padding","textAlign","textDecoration","filterPillProps","props","filterProps","Pill"],"sources":["Pill.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, keyframes} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {DURATION, EASE} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {filterProps} from '../util';\n\nexport interface PillProps<T = HTMLSpanElement> extends React.HTMLProps<T> {\n  active?: boolean;\n  type?: PILL_TYPE;\n}\n\nexport enum PILL_TYPE {\n  error = 'ERROR',\n  success = 'SUCCESS',\n  warning = 'WARNING',\n}\n\nexport const pillStyle: <T>(theme: Theme, props: PillProps<T>) => CSSObject = (\n  theme,\n  {active = false, type = null},\n) => {\n  const backgroundColors = {\n    [PILL_TYPE.error]: COLOR.RED_OPAQUE_32,\n    [PILL_TYPE.success]: COLOR.GREEN_OPAQUE_32,\n    [PILL_TYPE.warning]: COLOR.YELLOW_OPAQUE_32,\n  };\n  const backgroundColor = active ? '#eee' : type ? backgroundColors[type] : 'transparent';\n  const pillAnimation = keyframes`\n    0% {\n      background-color: transparent;\n    }\n    100% {\n      background-color: ${backgroundColor};\n    }\n`;\n  return {\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n    '&:last-of-type': {\n      marginRight: 0,\n    },\n    animation: `${pillAnimation} ${DURATION.DEFAULT}ms ${EASE.QUART}`,\n    backgroundColor,\n    borderRadius: '160px',\n    color: active ? COLOR.TEXT : theme.general.color,\n    cursor: active ? 'default' : undefined,\n    display: 'inline-block',\n    fontSize: '12px',\n    lineHeight: '16px',\n    margin: type ? '12px 0 0 0' : '0 8px',\n    minHeight: '32px',\n    padding: '8px 24px',\n    textAlign: 'center',\n    textDecoration: 'none',\n  };\n};\n\nexport const filterPillProps = (props: PillProps) => filterProps(props, ['active']);\n\nexport const Pill = (props: PillProps) => (\n  <span\n    css={(theme: Theme) => pillStyle(theme, props)}\n    data-uie-name=\"element-pill\"\n    data-uie-status={props.type}\n    {...filterPillProps(props)}\n  />\n);\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AAEA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA,IAOxBA,SAAS;AAAA;AAAA,WAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;AAAA,GAATA,SAAS,yBAATA,SAAS;AAMd,IAAMC,SAA8D,GAAG,SAAjEA,SAA8D,CACzEC,KAAK,QAEF;EAAA;EAAA,uBADFC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,IAAI;EAE5B,IAAMC,gBAAgB,+DACnBL,SAAS,CAACM,KAAK,EAAGC,eAAK,CAACC,aAAa,sCACrCR,SAAS,CAACS,OAAO,EAAGF,eAAK,CAACG,eAAe,sCACzCV,SAAS,CAACW,OAAO,EAAGJ,eAAK,CAACK,gBAAgB,qBAC5C;EACD,IAAMC,eAAe,GAAGV,MAAM,GAAG,MAAM,GAAGC,IAAI,GAAGC,gBAAgB,CAACD,IAAI,CAAC,GAAG,aAAa;EACvF,IAAMU,aAAa,OAAGC,gBAAS,kLAKPF,eAAe,CAExC;EACC,OAAO;IACL,iBAAiB,EAAE;MACjBG,UAAU,EAAE;IACd,CAAC;IACD,gBAAgB,EAAE;MAChBC,WAAW,EAAE;IACf,CAAC;IACDC,SAAS,YAAKJ,aAAa,cAAIK,iBAAQ,CAACC,OAAO,gBAAMC,aAAI,CAACC,KAAK,CAAE;IACjET,eAAe,EAAfA,eAAe;IACfU,YAAY,EAAE,OAAO;IACrBC,KAAK,EAAErB,MAAM,GAAGI,eAAK,CAACkB,IAAI,GAAGvB,KAAK,CAACwB,OAAO,CAACF,KAAK;IAChDG,MAAM,EAAExB,MAAM,GAAG,SAAS,GAAGyB,SAAS;IACtCC,OAAO,EAAE,cAAc;IACvBC,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,MAAM;IAClBC,MAAM,EAAE5B,IAAI,GAAG,YAAY,GAAG,OAAO;IACrC6B,SAAS,EAAE,MAAM;IACjBC,OAAO,EAAE,UAAU;IACnBC,SAAS,EAAE,QAAQ;IACnBC,cAAc,EAAE;EAClB,CAAC;AACH,CAAC;AAAC;AAEK,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAAgB;EAAA,OAAK,IAAAC,iBAAW,EAACD,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;AAAA;AAAC;AAE7E,IAAME,IAAI,GAAG,SAAPA,IAAI,CAAIF,KAAgB;EAAA,OACnC;IACE,GAAG,EAAE,aAACpC,KAAY;MAAA,OAAKD,SAAS,CAACC,KAAK,EAAEoC,KAAK,CAAC;IAAA,CAAC;IAC/C,iBAAc,cAAc;IAC5B,mBAAiBA,KAAK,CAAClC;EAAK,GACxBiC,eAAe,CAACC,KAAK,CAAC,EAC1B;AAAA,CACH;AAAC"}

package/src/Misc/childrenWithDefaultProps.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.childrenWithDefaultProps = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 childrenWithDefaultProps = function childrenWithDefaultProps(props) {
   return _react["default"].Children.map(props.children, function (node) {
     if (typeof node === 'string') {

package/src/Misc/childrenWithDefaultProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"childrenWithDefaultProps.js","names":["childrenWithDefaultProps","props","React","Children","map","children","node","isValidElement","console","error","elementChild","cloneElement","defaultProps"],"sources":["childrenWithDefaultProps.ts"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport React from 'react';\n\nexport interface ChildrenProps<T extends Element, P extends React.HTMLProps<T>> {\n  children: React.ReactNode;\n  defaultProps: P;\n}\n\nexport const childrenWithDefaultProps = <E extends Element, P extends any>(props: ChildrenProps<E, P>) =>\n  React.Children.map<React.ReactNode, React.ReactNode>(props.children, node => {\n    if (typeof node === 'string') {\n      return node;\n    }\n    if (!React.isValidElement<P>(node)) {\n      console.error('Invalid children', node);\n      return node;\n    }\n\n    const elementChild: React.ReactElement<P> = node;\n    return React.cloneElement<P>(elementChild, {...(props.defaultProps as any), ...(elementChild.props as any)});\n  });\n"],"mappings":";;;;;;;;AAmBA;AAA0B;AAAA;AAOnB,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwB,CAAsCC,KAA0B;EAAA,OACnGC,iBAAK,CAACC,QAAQ,CAACC,GAAG,CAAmCH,KAAK,CAACI,QAAQ,EAAE,UAAAC,IAAI,EAAI;IAC3E,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;MAC5B,OAAOA,IAAI;IACb;IACA,IAAI,eAACJ,iBAAK,CAACK,cAAc,CAAID,IAAI,CAAC,EAAE;MAClCE,OAAO,CAACC,KAAK,CAAC,kBAAkB,EAAEH,IAAI,CAAC;MACvC,OAAOA,IAAI;IACb;IAEA,IAAMI,YAAmC,GAAGJ,IAAI;IAChD,oBAAOJ,iBAAK,CAACS,YAAY,CAAID,YAAY,kCAAOT,KAAK,CAACW,YAAY,GAAcF,YAAY,CAACT,KAAK,EAAU;EAC9G,CAAC,CAAC;AAAA;AAAC"}
+{"version":3,"file":"childrenWithDefaultProps.js","names":["childrenWithDefaultProps","props","React","Children","map","children","node","isValidElement","console","error","elementChild","cloneElement","defaultProps"],"sources":["childrenWithDefaultProps.ts"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport React from 'react';\n\nexport interface ChildrenProps<T extends Element, P extends React.HTMLProps<T>> {\n  children: React.ReactNode;\n  defaultProps: P;\n}\n\nexport const childrenWithDefaultProps = <E extends Element, P extends any>(props: ChildrenProps<E, P>) =>\n  React.Children.map<React.ReactNode, React.ReactNode>(props.children, node => {\n    if (typeof node === 'string') {\n      return node;\n    }\n    if (!React.isValidElement<P>(node)) {\n      console.error('Invalid children', node);\n      return node;\n    }\n\n    const elementChild: React.ReactElement<P> = node;\n    return React.cloneElement<P>(elementChild, {...(props.defaultProps as any), ...(elementChild.props as any)});\n  });\n"],"mappings":";;;;;;AAmBA;AAA0B;AAAA;AAAA;AAAA;AAOnB,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwB,CAAsCC,KAA0B;EAAA,OACnGC,iBAAK,CAACC,QAAQ,CAACC,GAAG,CAAmCH,KAAK,CAACI,QAAQ,EAAE,UAAAC,IAAI,EAAI;IAC3E,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;MAC5B,OAAOA,IAAI;IACb;IACA,IAAI,eAACJ,iBAAK,CAACK,cAAc,CAAID,IAAI,CAAC,EAAE;MAClCE,OAAO,CAACC,KAAK,CAAC,kBAAkB,EAAEH,IAAI,CAAC;MACvC,OAAOA,IAAI;IACb;IAEA,IAAMI,YAAmC,GAAGJ,IAAI;IAChD,oBAAOJ,iBAAK,CAACS,YAAY,CAAID,YAAY,kCAAOT,KAAK,CAACW,YAAY,GAAcF,YAAY,CAACT,KAAK,EAAU;EAC9G,CAAC,CAAC;AAAA;AAAC"}