@wireapp/react-ui-kit 8.14.3 → 8.14.6

package/src/Menu/TabBar.js

@@ -0,0 +1,105 @@
+"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");
+
+var _Text = require("../Text");
+
+var _util = require("../util");
+
+var _excluded = ["children"],
+    _excluded2 = ["block", "center", "color", "bold", "active", "fontSize", "textTransform"],
+    _excluded3 = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var tabBarStyle = function tabBarStyle(_ref) {
+  (0, _objectDestructuringEmpty2["default"])(_ref);
+  return {
+    display: 'flex',
+    width: '100%'
+  };
+};
+
+var filteredTabBarProps = function filteredTabBarProps(props) {
+  return (0, _util.filterProps)(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"])({
+    css: tabBarStyle(props)
+  }, filteredTabBarProps(props)), children);
+};
+
+exports.TabBar = TabBar;
+
+var tabBarItemStyle = function tabBarItemStyle(theme, _ref3) {
+  var _ref3$block = _ref3.block,
+      block = _ref3$block === void 0 ? true : _ref3$block,
+      _ref3$center = _ref3.center,
+      center = _ref3$center === void 0 ? true : _ref3$center,
+      _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? theme.general.color : _ref3$color,
+      _ref3$bold = _ref3.bold,
+      bold = _ref3$bold === void 0 ? true : _ref3$bold,
+      _ref3$active = _ref3.active,
+      active = _ref3$active === void 0 ? false : _ref3$active,
+      _ref3$fontSize = _ref3.fontSize,
+      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);
+  return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
+    block: block,
+    bold: bold,
+    center: center,
+    color: color,
+    fontSize: fontSize,
+    textTransform: textTransform
+  }, props))), {}, {
+    borderBottom: active ? "1px solid ".concat(_Identity.COLOR.GRAY_DARKEN_48) : "1px solid ".concat(_Identity.COLOR.GRAY_LIGHTEN_40),
+    cursor: 'pointer',
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+    opacity: active ? 1 : 0.56,
+    padding: '8px 0'
+  });
+};
+
+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"])({
+    css: function css(theme) {
+      return tabBarItemStyle(theme, props);
+    }
+  }, props), children);
+};
+
+exports.TabBarItem = TabBarItem;
+//# sourceMappingURL=TabBar.js.map

package/src/Menu/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TabBar.tsx"],"names":["tabBarStyle","display","width","filteredTabBarProps","props","TabBar","children","tabBarItemStyle","theme","block","center","color","general","bold","active","fontSize","textTransform","borderBottom","COLOR","GRAY_DARKEN_48","GRAY_LIGHTEN_40","cursor","flexGrow","justifyContent","opacity","padding","TabBarItem"],"mappings":";;;;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AAEA;;AACA;;;;;;;;;;AAIA,IAAMA,WAAoD,GAAG,SAAvDA,WAAuD,OAAQ;AAAA;AACnE,SAAO;AACLC,IAAAA,OAAO,EAAE,MADJ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAAP;AAID,CALD;;AAOA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD;AAAA,SAAwB,uBAAYA,KAAZ,EAAmB,EAAnB,CAAxB;AAAA,CAA5B;;AAEO,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,6BAAEC,QAAF;AAAA,MAAEA,QAAF,+BAAa,IAAb;AAAA,MAAsBF,KAAtB;AAAA,SACpB;AAAK,IAAA,GAAG,EAAEJ,WAAW,CAACI,KAAD;AAArB,KAAkCD,mBAAmB,CAACC,KAAD,CAArD,GACGE,QADH,CADoB;AAAA,CAAf;;;;AAUP,IAAMC,eAA0E,GAAG,SAA7EA,eAA6E,CACjFC,KADiF,SAY9E;AAAA,0BATDC,KASC;AAAA,MATDA,KASC,4BATO,IASP;AAAA,2BARDC,MAQC;AAAA,MARDA,MAQC,6BARQ,IAQR;AAAA,0BAPDC,KAOC;AAAA,MAPDA,KAOC,4BAPOH,KAAK,CAACI,OAAN,CAAcD,KAOrB;AAAA,yBANDE,IAMC;AAAA,MANDA,IAMC,2BANM,IAMN;AAAA,2BALDC,MAKC;AAAA,MALDA,MAKC,6BALQ,KAKR;AAAA,6BAJDC,QAIC;AAAA,MAJDA,QAIC,+BAJU,MAIV;AAAA,kCAHDC,aAGC;AAAA,MAHDA,aAGC,oCAHe,WAGf;AAAA,MAFEZ,KAEF;AACH,yCACK,qBAAUI,KAAV;AAAkBC,IAAAA,KAAK,EAALA,KAAlB;AAAyBI,IAAAA,IAAI,EAAJA,IAAzB;AAA+BH,IAAAA,MAAM,EAANA,MAA/B;AAAuCC,IAAAA,KAAK,EAALA,KAAvC;AAA8CI,IAAAA,QAAQ,EAARA,QAA9C;AAAwDC,IAAAA,aAAa,EAAbA;AAAxD,KAA0EZ,KAA1E,EADL;AAEEa,IAAAA,YAAY,EAAEH,MAAM,uBAAgBI,gBAAMC,cAAtB,wBAAsDD,gBAAME,eAA5D,CAFtB;AAGEC,IAAAA,MAAM,EAAE,SAHV;AAIEpB,IAAAA,OAAO,EAAE,MAJX;AAKEqB,IAAAA,QAAQ,EAAE,CALZ;AAMEC,IAAAA,cAAc,EAAE,QANlB;AAOEC,IAAAA,OAAO,EAAEV,MAAM,GAAG,CAAH,GAAO,IAPxB;AAQEW,IAAAA,OAAO,EAAE;AARX;AAUD,CAvBD;;AAyBO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,6BAAEpB,QAAF;AAAA,MAAEA,QAAF,+BAAa,IAAb;AAAA,MAAsBF,KAAtB;AAAA,SACxB;AAAM,IAAA,GAAG,EAAE,aAACI,KAAD;AAAA,aAAkBD,eAAe,CAACC,KAAD,EAAQJ,KAAR,CAAjC;AAAA;AAAX,KAAgEA,KAAhE,GACGE,QADH,CADwB;AAAA,CAAnB","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"],"file":"TabBar.js"}

package/src/Menu/index.d.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _MenuModal = require("./MenuModal");
+
+Object.keys(_MenuModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MenuModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MenuModal[key];
+    }
+  });
+});
+
+var _TabBar = require("./TabBar");
+
+Object.keys(_TabBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TabBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TabBar[key];
+    }
+  });
+});
+//# sourceMappingURL=index.d.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.d.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './MenuModal';\nexport * from './TabBar';\n"],"file":"index.d.js"}

package/src/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MenuModal';
+export * from './TabBar';

package/src/Menu/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _MenuModal = require("./MenuModal");
+
+Object.keys(_MenuModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MenuModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MenuModal[key];
+    }
+  });
+});
+
+var _TabBar = require("./TabBar");
+
+Object.keys(_TabBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TabBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TabBar[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/src/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAmBA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nexport * from './MenuModal';\nexport * from './TabBar';\n"],"file":"index.js"}

package/src/Misc/ButtonGroup.d.js

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

package/src/Misc/ButtonGroup.d.js.map

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

package/src/Misc/ButtonGroup.d.ts

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactElement } from 'react';
+interface GroupButtonProps<T = HTMLButtonElement> {
+    children?: ReactElement | string;
+    icon?: ReactElement;
+}
+declare const ButtonGroup: {
+    ({ children }: {
+        children: any;
+    }): jsx.JSX.Element;
+    Button: ({ children, icon, ...props }: GroupButtonProps) => jsx.JSX.Element;
+};
+export { ButtonGroup };

package/src/Misc/ButtonGroup.js

@@ -0,0 +1,113 @@
+"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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var buttonGroupStyle = function buttonGroupStyle() {
+  return {
+    display: 'flex',
+    alignItems: 'center'
+  };
+};
+
+var buttonStyle = function buttonStyle(theme, _ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return _objectSpread({
+    height: '32px',
+    borderRadius: '12px',
+    padding: '0 12px',
+    background: _Identity.COLOR_V2.WHITE,
+    border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE,
+    svg: {
+      fill: disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLACK
+    },
+    '&:not(:last-child)': {
+      borderTopRightRadius: '0',
+      borderBottomRightRadius: '0'
+    },
+    '&:not(:first-child)': {
+      borderTopLeftRadius: '0',
+      borderBottomLeftRadius: '0'
+    },
+    '&:first-child:last-child': {
+      borderRadius: '0'
+    }
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.GRAY_20
+    },
+    '&:hover': {
+      borderColor: _Identity.COLOR_V2.GRAY_50
+    },
+    '&:focus': {
+      borderColor: _Identity.COLOR_V2.GRAY_60
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
+      borderColor: _Identity.COLOR_V2.BLUE_LIGHT_300,
+      svg: {
+        fill: _Identity.COLOR_V2.BLUE
+      }
+    }
+  });
+};
+
+var ButtonGroup = function ButtonGroup(_ref2) {
+  var children = _ref2.children;
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return buttonGroupStyle(theme);
+    },
+    role: "group",
+    "aria-label": "Button Group"
+  }, children);
+};
+
+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"])({
+    css: function css(theme) {
+      return buttonStyle(theme, props);
+    }
+  }, props), icon, children && (0, _react.jsx)("span", {
+    css: /*#__PURE__*/(0, _react.css)({
+      marginLeft: !!icon && '6px',
+      fontSize: '12px',
+      fontWeight: 'bold',
+      lineHeight: '14px',
+      letterSpacing: '0.25px'
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Button;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbkdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RlUiLCJmaWxlIjoiQnV0dG9uR3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAyMiBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtSZWFjdEVsZW1lbnR9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7SWNvbkJ1dHRvblByb3BzfSBmcm9tICcuL0ljb25CdXR0b24nO1xuXG5jb25zdCBidXR0b25Hcm91cFN0eWxlOiA8VD4odGhlbWU6IFRoZW1lKSA9PiBDU1NPYmplY3QgPSAoKSA9PiAoe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxufSk7XG5cbmNvbnN0IGJ1dHRvblN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wczogSWNvbkJ1dHRvblByb3BzPFQ+KSA9PiBDU1NPYmplY3QgPSAodGhlbWUsIHtkaXNhYmxlZCA9IGZhbHNlfSkgPT4gKHtcbiAgaGVpZ2h0OiAnMzJweCcsXG4gIGJvcmRlclJhZGl1czogJzEycHgnLFxuICBwYWRkaW5nOiAnMCAxMnB4JyxcbiAgYmFja2dyb3VuZDogQ09MT1JfVjIuV0hJVEUsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke0NPTE9SX1YyLkdSQVlfNDB9YCxcbiAgY3Vyc29yOiAncG9pbnRlcicsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJhY2tncm91bmRDb2xvcjogZGlzYWJsZWQgPyBDT0xPUl9WMi5HUkFZXzIwIDogQ09MT1JfVjIuV0hJVEUsXG4gIHN2Zzoge1xuICAgIGZpbGw6IGRpc2FibGVkID8gQ09MT1JfVjIuR1JBWV83MCA6IENPTE9SX1YyLkJMQUNLLFxuICB9LFxuICAnJjpub3QoOmxhc3QtY2hpbGQpJzoge1xuICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiAnMCcsXG4gICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6ICcwJyxcbiAgfSxcbiAgJyY6bm90KDpmaXJzdC1jaGlsZCknOiB7XG4gICAgYm9yZGVyVG9wTGVmdFJhZGl1czogJzAnLFxuICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6ICcwJyxcbiAgfSxcbiAgJyY6Zmlyc3QtY2hpbGQ6bGFzdC1jaGlsZCc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcwJyxcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SX1YyLkdSQVlfMjAsXG4gICAgfSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBDT0xPUl9WMi5HUkFZXzUwLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMnOiB7XG4gICAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuR1JBWV82MCxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogQ09MT1JfVjIuQkxVRV9MSUdIVF81MCxcbiAgICAgIGJvcmRlckNvbG9yOiBDT0xPUl9WMi5CTFVFX0xJR0hUXzMwMCxcbiAgICAgIHN2Zzoge1xuICAgICAgICBmaWxsOiBDT0xPUl9WMi5CTFVFLFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbn0pO1xuXG5pbnRlcmZhY2UgR3JvdXBCdXR0b25Qcm9wczxUID0gSFRNTEJ1dHRvbkVsZW1lbnQ+IHtcbiAgY2hpbGRyZW4/OiBSZWFjdEVsZW1lbnQgfCBzdHJpbmc7XG4gIGljb24/OiBSZWFjdEVsZW1lbnQ7XG59XG5cbmNvbnN0IEJ1dHRvbkdyb3VwID0gKHtjaGlsZHJlbn0pID0+IChcbiAgPGRpdiBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGJ1dHRvbkdyb3VwU3R5bGUodGhlbWUpfSByb2xlPVwiZ3JvdXBcIiBhcmlhLWxhYmVsPVwiQnV0dG9uIEdyb3VwXCI+XG4gICAge2NoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmNvbnN0IEJ1dHRvbiA9ICh7Y2hpbGRyZW4sIGljb24sIC4uLnByb3BzfTogR3JvdXBCdXR0b25Qcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24gY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBidXR0b25TdHlsZSh0aGVtZSwgcHJvcHMpfSB7Li4ucHJvcHN9PlxuICAgICAge2ljb259XG4gICAgICB7Y2hpbGRyZW4gJiYgKFxuICAgICAgICA8c3BhblxuICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgbWFyZ2luTGVmdDogISFpY29uICYmICc2cHgnLFxuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcbiAgICAgICAgICAgIGxpbmVIZWlnaHQ6ICcxNHB4JyxcbiAgICAgICAgICAgIGxldHRlclNwYWNpbmc6ICcwLjI1cHgnLFxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICl9XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5CdXR0b25Hcm91cC5CdXR0b24gPSBCdXR0b247XG5cbmV4cG9ydCB7QnV0dG9uR3JvdXB9O1xuIl19 */")
+  }, children));
+};
+
+ButtonGroup.Button = Button;
+//# sourceMappingURL=ButtonGroup.js.map

package/src/Misc/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ButtonGroup.tsx"],"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"],"mappings":";;;;;;;;;;;AAoBA;;;;;;AAGA;;;;;;;;AAIA,IAAMA,gBAAgD,GAAG,SAAnDA,gBAAmD;AAAA,SAAO;AAC9DC,IAAAA,OAAO,EAAE,MADqD;AAE9DC,IAAAA,UAAU,EAAE;AAFkD,GAAP;AAAA,CAAzD;;AAKA,IAAMC,WAAsE,GAAG,SAAzEA,WAAyE,CAACC,KAAD;AAAA,2BAASC,QAAT;AAAA,MAASA,QAAT,8BAAoB,KAApB;AAAA;AAC7EC,IAAAA,MAAM,EAAE,MADqE;AAE7EC,IAAAA,YAAY,EAAE,MAF+D;AAG7EC,IAAAA,OAAO,EAAE,QAHoE;AAI7EC,IAAAA,UAAU,EAAEC,mBAASC,KAJwD;AAK7EC,IAAAA,MAAM,sBAAeF,mBAASG,OAAxB,CALuE;AAM7EC,IAAAA,MAAM,EAAE,SANqE;AAO7Eb,IAAAA,OAAO,EAAE,MAPoE;AAQ7EC,IAAAA,UAAU,EAAE,QARiE;AAS7Ea,IAAAA,eAAe,EAAEV,QAAQ,GAAGK,mBAASM,OAAZ,GAAsBN,mBAASC,KATqB;AAU7EM,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAEb,QAAQ,GAAGK,mBAASS,OAAZ,GAAsBT,mBAASU;AAD1C,KAVwE;AAa7E,0BAAsB;AACpBC,MAAAA,oBAAoB,EAAE,GADF;AAEpBC,MAAAA,uBAAuB,EAAE;AAFL,KAbuD;AAiB7E,2BAAuB;AACrBC,MAAAA,mBAAmB,EAAE,GADA;AAErBC,MAAAA,sBAAsB,EAAE;AAFH,KAjBsD;AAqB7E,gCAA4B;AAC1BjB,MAAAA,YAAY,EAAE;AADY;AArBiD,KAwBzE,CAACF,QAAD,IAAa;AACf,wBAAoB;AAClBU,MAAAA,eAAe,EAAEL,mBAASM;AADR,KADL;AAIf,eAAW;AACTS,MAAAA,WAAW,EAAEf,mBAASgB;AADb,KAJI;AAOf,eAAW;AACTD,MAAAA,WAAW,EAAEf,mBAASiB;AADb,KAPI;AAUf,gBAAY;AACVZ,MAAAA,eAAe,EAAEL,mBAASkB,aADhB;AAEVH,MAAAA,WAAW,EAAEf,mBAASmB,cAFZ;AAGVZ,MAAAA,GAAG,EAAE;AACHC,QAAAA,IAAI,EAAER,mBAASoB;AADZ;AAHK;AAVG,GAxB4D;AAAA,CAA/E;;AAiDA,IAAMC,WAAW,GAAG,SAAdA,WAAc;AAAA,MAAEC,QAAF,SAAEA,QAAF;AAAA,SAClB;AAAK,IAAA,GAAG,EAAE,aAAC5B,KAAD;AAAA,aAAkBJ,gBAAgB,CAACI,KAAD,CAAlC;AAAA,KAAV;AAAqD,IAAA,IAAI,EAAC,OAA1D;AAAkE,kBAAW;AAA7E,KACG4B,QADH,CADkB;AAAA,CAApB;;;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,QAAkD;AAAA,MAAhDD,QAAgD,SAAhDA,QAAgD;AAAA,MAAtCE,IAAsC,SAAtCA,IAAsC;AAAA,MAA7BC,KAA6B;AAC/D,SACE;AAAQ,IAAA,GAAG,EAAE,aAAC/B,KAAD;AAAA,aAAkBD,WAAW,CAACC,KAAD,EAAQ+B,KAAR,CAA7B;AAAA;AAAb,KAA8DA,KAA9D,GACGD,IADH,EAEGF,QAAQ,IACP;AACE,IAAA,GAAG,+BAAE;AACHI,MAAAA,UAAU,EAAE,CAAC,CAACF,IAAF,IAAU,KADnB;AAEHG,MAAAA,QAAQ,EAAE,MAFP;AAGHC,MAAAA,UAAU,EAAE,MAHT;AAIHC,MAAAA,UAAU,EAAE,MAJT;AAKHC,MAAAA,aAAa,EAAE;AALZ,KAAF;AADL,KASGR,QATH,CAHJ,CADF;AAkBD,CAnBD;;AAqBAD,WAAW,CAACE,MAAZ,GAAqBA,MAArB","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"],"file":"ButtonGroup.js"}

package/src/Misc/IconButton.d.js

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

package/src/Misc/IconButton.d.js.map

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

package/src/Misc/IconButton.d.ts

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react';
+import { Theme } from '../Layout';
+import { TextProps } from '../Text';
+export declare enum IconButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
+}
+export interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {
+    variant?: IconButtonVariant;
+    backgroundColor?: string;
+}
+export declare const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject;
+export declare const IconButton: ({ children, ...props }: IconButtonProps) => jsx.JSX.Element;

package/src/Misc/IconButton.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = exports.iconButtonStyle = exports.IconButtonVariant = 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var IconButtonVariant;
+exports.IconButtonVariant = IconButtonVariant;
+
+(function (IconButtonVariant) {
+  IconButtonVariant["PRIMARY"] = "primary";
+  IconButtonVariant["SECONDARY"] = "secondary";
+})(IconButtonVariant || (exports.IconButtonVariant = IconButtonVariant = {}));
+
+var iconButtonStyle = function iconButtonStyle(theme, _ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? IconButtonVariant.PRIMARY : _ref$variant,
+      backgroundColor = _ref.backgroundColor,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return _objectSpread(_objectSpread({
+    border: 0,
+    borderRadius: '12px',
+    cursor: disabled ? 'default' : 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '16px',
+    padding: 0,
+    outline: 'none',
+    textDecoration: 'none',
+    touchAction: 'manipulation',
+    transition: _motions.defaultTransition,
+    width: '40px',
+    height: '32px',
+    '&:hover, &:focus': {
+      textDecoration: 'none'
+    }
+  }, variant === IconButtonVariant.PRIMARY && _objectSpread({
+    backgroundColor: disabled ? theme.IconButton.primaryDisabledBgColor : backgroundColor || theme.IconButton.primaryBgColor,
+    border: disabled ? "1px solid ".concat(theme.IconButton.primaryDisabledBorderColor) : "1px solid ".concat(theme.IconButton.primaryBorderColor),
+    svg: {
+      fill: disabled ? theme.Input.placeholderColor : theme.general.color
+    }
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: theme.IconButton.hoverPrimaryBgColor
+    },
+    '&:hover': {
+      borderColor: theme.IconButton.primaryHoverBorderColor
+    },
+    '&:focus': {
+      borderColor: theme.IconButton.focusBorderColor
+    },
+    '&:active': {
+      backgroundColor: theme.IconButton.activePrimaryBgColor,
+      borderColor: theme.IconButton.focusBorderColor,
+      svg: {
+        fill: theme.general.primaryColor
+      }
+    }
+  })), variant === IconButtonVariant.SECONDARY && _objectSpread({
+    backgroundColor: 'inherit',
+    svg: {
+      fill: disabled ? theme.Input.placeholderColor : theme.general.color
+    }
+  }, !disabled && {
+    '&:hover, &:focus, &:active': {
+      svg: {
+        fill: theme.general.primaryColor
+      }
+    },
+    '&:focus': {
+      border: "1px solid ".concat(theme.IconButton.focusBorderColor)
+    },
+    '&:active': {
+      border: "1px solid ".concat(theme.IconButton.secondaryActiveBorderColor),
+      backgroundColor: theme.Input.backgroundColor
+    }
+  }));
+};
+
+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"])({
+    css: function css(theme) {
+      return iconButtonStyle(theme, props);
+    }
+  }, filterButtonProps(props)), children);
+};
+
+exports.IconButton = IconButton;
+
+var filterButtonProps = function filterButtonProps(props) {
+  return (0, _util.filterProps)((0, _Text.filterTextProps)(props), ['backgroundColor']);
+};
+//# sourceMappingURL=IconButton.js.map

package/src/Misc/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IconButton.tsx"],"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"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AAEA;;AACA;;;;;;;;IAEYA,iB;;;WAAAA,iB;AAAAA,EAAAA,iB;AAAAA,EAAAA,iB;GAAAA,iB,iCAAAA,iB;;AAUL,IAAMC,eAA0E,GAAG,SAA7EA,eAA6E,CACxFC,KADwF;AAAA,0BAEvFC,OAFuF;AAAA,MAEvFA,OAFuF,6BAE7EH,iBAAiB,CAACI,OAF2D;AAAA,MAElDC,eAFkD,QAElDA,eAFkD;AAAA,2BAEjCC,QAFiC;AAAA,MAEjCA,QAFiC,8BAEtB,KAFsB;AAAA;AAIxFC,IAAAA,MAAM,EAAE,CAJgF;AAKxFC,IAAAA,YAAY,EAAE,MAL0E;AAMxFC,IAAAA,MAAM,EAAEH,QAAQ,GAAG,SAAH,GAAe,SANyD;AAOxFI,IAAAA,OAAO,EAAE,MAP+E;AAQxFC,IAAAA,UAAU,EAAE,QAR4E;AASxFC,IAAAA,cAAc,EAAE,QATwE;AAUxFC,IAAAA,YAAY,EAAE,MAV0E;AAWxFC,IAAAA,OAAO,EAAE,CAX+E;AAYxFC,IAAAA,OAAO,EAAE,MAZ+E;AAaxFC,IAAAA,cAAc,EAAE,MAbwE;AAcxFC,IAAAA,WAAW,EAAE,cAd2E;AAexFC,IAAAA,UAAU,EAAEC,0BAf4E;AAgBxFC,IAAAA,KAAK,EAAE,MAhBiF;AAiBxFC,IAAAA,MAAM,EAAE,MAjBgF;AAkBxF,wBAAoB;AAClBL,MAAAA,cAAc,EAAE;AADE;AAlBoE,KAqBpFb,OAAO,KAAKH,iBAAiB,CAACI,OAA9B;AACFC,IAAAA,eAAe,EAAEC,QAAQ,GACrBJ,KAAK,CAACoB,UAAN,CAAiBC,sBADI,GAErBlB,eAAe,IAAIH,KAAK,CAACoB,UAAN,CAAiBE,cAHtC;AAIFjB,IAAAA,MAAM,EAAED,QAAQ,uBACCJ,KAAK,CAACoB,UAAN,CAAiBG,0BADlB,wBAECvB,KAAK,CAACoB,UAAN,CAAiBI,kBAFlB,CAJd;AAOFC,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAEtB,QAAQ,GAAGJ,KAAK,CAAC2B,KAAN,CAAYC,gBAAf,GAAkC5B,KAAK,CAAC6B,OAAN,CAAcC;AAD3D;AAPH,KAUE,CAAC1B,QAAD,IAAa;AACf,wBAAoB;AAClBD,MAAAA,eAAe,EAAEH,KAAK,CAACoB,UAAN,CAAiBW;AADhB,KADL;AAIf,eAAW;AACTC,MAAAA,WAAW,EAAEhC,KAAK,CAACoB,UAAN,CAAiBa;AADrB,KAJI;AAOf,eAAW;AACTD,MAAAA,WAAW,EAAEhC,KAAK,CAACoB,UAAN,CAAiBc;AADrB,KAPI;AAUf,gBAAY;AACV/B,MAAAA,eAAe,EAAEH,KAAK,CAACoB,UAAN,CAAiBe,oBADxB;AAEVH,MAAAA,WAAW,EAAEhC,KAAK,CAACoB,UAAN,CAAiBc,gBAFpB;AAGVT,MAAAA,GAAG,EAAE;AACHC,QAAAA,IAAI,EAAE1B,KAAK,CAAC6B,OAAN,CAAcO;AADjB;AAHK;AAVG,GAVf,CArBoF,GAkDpFnC,OAAO,KAAKH,iBAAiB,CAACuC,SAA9B;AACFlC,IAAAA,eAAe,EAAE,SADf;AAEFsB,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAEtB,QAAQ,GAAGJ,KAAK,CAAC2B,KAAN,CAAYC,gBAAf,GAAkC5B,KAAK,CAAC6B,OAAN,CAAcC;AAD3D;AAFH,KAKE,CAAC1B,QAAD,IAAa;AACf,kCAA8B;AAC5BqB,MAAAA,GAAG,EAAE;AACHC,QAAAA,IAAI,EAAE1B,KAAK,CAAC6B,OAAN,CAAcO;AADjB;AADuB,KADf;AAMf,eAAW;AACT/B,MAAAA,MAAM,sBAAeL,KAAK,CAACoB,UAAN,CAAiBc,gBAAhC;AADG,KANI;AASf,gBAAY;AACV7B,MAAAA,MAAM,sBAAeL,KAAK,CAACoB,UAAN,CAAiBkB,0BAAhC,CADI;AAEVnC,MAAAA,eAAe,EAAEH,KAAK,CAAC2B,KAAN,CAAYxB;AAFnB;AATG,GALf,CAlDoF;AAAA,CAAnF;;;;AAwEA,IAAMiB,UAAU,GAAG,SAAbA,UAAa;AAAA,MAAEmB,QAAF,SAAEA,QAAF;AAAA,MAAeC,KAAf;AAAA,SACxB;AAAQ,IAAA,GAAG,EAAE,aAACxC,KAAD;AAAA,aAAkBD,eAAe,CAACC,KAAD,EAAQwC,KAAR,CAAjC;AAAA;AAAb,KAAkEC,iBAAiB,CAACD,KAAD,CAAnF,GACGD,QADH,CADwB;AAAA,CAAnB;;;;AAMP,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACD,KAAD,EAA4B;AACpD,SAAO,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAuD,CAAC,iBAAD,CAAvD,CAAP;AACD,CAFD","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"],"file":"IconButton.js"}

package/src/Misc/IsInViewport.d.js

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

package/src/Misc/IsInViewport.d.js.map

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

package/src/Misc/IsInViewport.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+export interface IsInViewportProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    checkViewportOnce?: boolean;
+    disabled?: boolean;
+    onEnterViewport?: () => void;
+}
+export declare const IsInViewport: ({ onEnterViewport, disabled, checkViewportOnce, ...props }: IsInViewportProps) => jsx.JSX.Element;

package/src/Misc/IsInViewport.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+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; }
+
+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);
+  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),
+            isIntersecting = _ref3[0].isIntersecting;
+
+        if (isIntersecting) {
+          if (checkViewportOnce) {
+            observer.disconnect();
+          }
+
+          if (onEnterViewport && !disabled) {
+            onEnterViewport();
+          }
+        }
+      });
+      observer.observe(element.current);
+    }
+
+    return function () {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [onEnterViewport]);
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    ref: element
+  }, props));
+};
+
+exports.IsInViewport = IsInViewport;
+//# sourceMappingURL=IsInViewport.js.map

package/src/Misc/IsInViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IsInViewport.tsx"],"names":["IsInViewport","onEnterViewport","disabled","checkViewportOnce","props","element","observer","undefined","IntersectionObserver","isIntersecting","disconnect","observe","current"],"mappings":";;;;;;;;;;;;;;;;;AAoBA;;AACA;;;;;;;;AAQO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAKH;AAAA,MAJvBC,eAIuB,QAJvBA,eAIuB;AAAA,2BAHvBC,QAGuB;AAAA,MAHvBA,QAGuB,8BAHZ,KAGY;AAAA,mCAFvBC,iBAEuB;AAAA,MAFvBA,iBAEuB,sCAFH,KAEG;AAAA,MADpBC,KACoB;AACvB,MAAMC,OAAO,GAAG,qBAAhB;AACA,yBAAU,YAAM;AACd,QAAIC,QAAQ,GAAGC,SAAf;;AACA,QAAIN,eAAe,IAAI,CAACC,QAAxB,EAAkC;AAChCI,MAAAA,QAAQ,GAAG,IAAIE,oBAAJ,CAAyB,iBAAwB;AAAA;AAAA,YAArBC,cAAqB,YAArBA,cAAqB;;AAC1D,YAAIA,cAAJ,EAAoB;AAClB,cAAIN,iBAAJ,EAAuB;AACrBG,YAAAA,QAAQ,CAACI,UAAT;AACD;;AACD,cAAIT,eAAe,IAAI,CAACC,QAAxB,EAAkC;AAChCD,YAAAA,eAAe;AAChB;AACF;AACF,OATU,CAAX;AAUAK,MAAAA,QAAQ,CAACK,OAAT,CAAiBN,OAAO,CAACO,OAAzB;AACD;;AAED,WAAO,YAAM;AACX,UAAIN,QAAJ,EAAc;AACZA,QAAAA,QAAQ,CAACI,UAAT;AACD;AACF,KAJD;AAKD,GArBD,EAqBG,CAACT,eAAD,CArBH;AAsBA,SAAO;AAAK,IAAA,GAAG,EAAEI;AAAV,KAAuBD,KAAvB,EAAP;AACD,CA9BM","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"],"file":"IsInViewport.js"}

package/src/Misc/Loading.d.js

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

package/src/Misc/Loading.d.js.map

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

package/src/Misc/Loading.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+export interface LoadingProps<T = SVGSVGElement> extends React.SVGProps<T> {
+    color?: string;
+    progress?: number;
+    size?: number;
+}
+export declare const Loading: {
+    ({ progress, size, color, ...props }: LoadingProps): jsx.JSX.Element;
+    defaultProps: {
+        progress: any;
+        size: number;
+    };
+};