@wireapp/react-ui-kit 8.14.1 → 8.14.4

package/src/Identity/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["Avatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["Avatar.tsx"],"names":["DEFAULT_AVATAR_SIZE","avatarStyle","color","COLOR","WHITE","url","borderColor","backgroundColor","GRAY","size","isAvatarGridItem","BORDER_SIZE_LIMIT","borderSize","borderWidth","fontSize","Math","ceil","alignItems","borderRadius","boxShadow","display","fontWeight","height","justifyContent","minHeight","minWidth","overflow","width","filteredAvatarProps","props","Avatar","forceInitials","name","fetchImage","scale","setScale","requestAnimationFrame","getInitials","split","filter","Boolean","map","initial","toUpperCase","join","substring","backgroundImage","backgroundPosition","backgroundSize","opacity","transform","transition","DURATION","DEFAULT","EASE","QUART"],"mappings":"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","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 {useEffect, useState} from 'react';\n\nimport {IsInViewport, IsInViewportProps} from '../Misc/';\nimport {filterProps} from '../util';\nimport {COLOR} from './colors';\nimport {DURATION, EASE} from './motions';\n\nexport const DEFAULT_AVATAR_SIZE = 28;\n\nexport interface AvatarProps<T = HTMLDivElement> extends IsInViewportProps<T> {\n  backgroundColor?: string;\n  borderColor?: string;\n  fetchImage?: () => void;\n  forceInitials?: boolean;\n  isAvatarGridItem?: boolean;\n  name?: string;\n  size?: number;\n  url?: string;\n}\n\nconst avatarStyle: <T>(props: AvatarProps<T>) => CSSObject = ({\n  color = COLOR.WHITE,\n  url,\n  borderColor,\n  backgroundColor = COLOR.GRAY,\n  size = DEFAULT_AVATAR_SIZE,\n  isAvatarGridItem,\n}) => {\n  const BORDER_SIZE_LIMIT = 32;\n  const borderSize = size > BORDER_SIZE_LIMIT ? 2 : 1;\n  const borderWidth = url ? 0 : borderSize;\n  const fontSize = `${Math.ceil(size / 2.2)}px`;\n\n  return {\n    alignItems: 'center',\n    backgroundColor: backgroundColor,\n    borderRadius: isAvatarGridItem ? '0' : '50%',\n    boxShadow: isAvatarGridItem ? 'none' : `inset 0 0 0 ${borderWidth}px ${borderColor}`,\n    color,\n    display: 'flex',\n    fontSize,\n    fontWeight: isAvatarGridItem ? 700 : 300,\n    height: `${size}px`,\n    justifyContent: 'center',\n    minHeight: `${size}px`,\n    minWidth: `${size}px`,\n    overflow: 'hidden',\n    width: `${size}px`,\n  };\n};\n\nconst filteredAvatarProps = (props: AvatarProps) =>\n  filterProps(props, [\n    'size',\n    'forceInitials',\n    'name',\n    'url',\n    'borderColor',\n    'backgroundColor',\n    'fetchImage',\n    'isAvatarGridItem',\n  ]);\n\nexport const Avatar = (props: AvatarProps) => {\n  const {url, forceInitials, name, fetchImage, isAvatarGridItem} = props;\n  const [scale, setScale] = useState(0);\n  useEffect(() => {\n    if (url) {\n      requestAnimationFrame(() => setScale(1));\n    }\n  }, [url]);\n  const getInitials = (name: string = '') =>\n    name\n      .split(' ')\n      .filter(Boolean)\n      .map(([initial]) => initial.toUpperCase())\n      .join('')\n      .substring(0, isAvatarGridItem ? 1 : 2);\n\n  return (\n    <IsInViewport\n      checkViewportOnce\n      onEnterViewport={fetchImage}\n      disabled={!!url}\n      css={avatarStyle(props)}\n      data-uie-name={!forceInitials && url ? 'element-avatar-image' : 'element-avatar-initials'}\n      {...filteredAvatarProps(props)}\n    >\n      {forceInitials || !url ? (\n        getInitials(name)\n      ) : (\n        <div\n          css={{\n            backgroundImage: url && `url(${url})`,\n            backgroundPosition: 'center',\n            backgroundSize: 'cover',\n            borderRadius: isAvatarGridItem ? '0' : '50%',\n            minHeight: '100%',\n            minWidth: '100%',\n            opacity: scale,\n            transform: `scale(${scale})`,\n            transition: `all ${DURATION.DEFAULT}ms ${EASE.QUART}`,\n            width: '100%',\n          }}\n        />\n      )}\n    </IsInViewport>\n  );\n};\n"],"file":"Avatar.js"}

package/src/Identity/AvatarGrid.js

@@ -1,72 +1,114 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2019 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.AvatarGrid = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const Misc_1 = require("../Misc/");
-const util_1 = require("../util");
-const Avatar_1 = require("./Avatar");
-const colors_1 = require("./colors");
-const avatarGridStyle = ({ borderWidth, size, backgroundColor = colors_1.COLOR.GRAY_DARKEN_48, borderColor = colors_1.COLOR.GRAY_DARKEN_48, }) => {
-    return {
-        alignItems: 'start',
-        backgroundColor: backgroundColor,
-        border: `${borderWidth}px solid ${borderColor}`,
-        borderRadius: '16%',
-        display: 'grid',
-        gridGap: borderWidth,
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-        height: `${size}px`,
-        justifyItems: 'center',
-        minWidth: `${size}px`,
-        overflow: 'hidden',
-        width: `${size}px`,
-    };
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@emotion/react");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Misc = require("../Misc/");
+
+var _util = require("../util");
+
+var _Avatar = require("./Avatar");
+
+var _colors = require("./colors");
+
+var _excluded = ["borderWidth", "size", "items", "fetchImages"];
+
+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 avatarGridStyle = function avatarGridStyle(_ref) {
+  var borderWidth = _ref.borderWidth,
+      size = _ref.size,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? _colors.COLOR.GRAY_DARKEN_48 : _ref$backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? _colors.COLOR.GRAY_DARKEN_48 : _ref$borderColor;
+  return {
+    alignItems: 'start',
+    backgroundColor: backgroundColor,
+    border: "".concat(borderWidth, "px solid ").concat(borderColor),
+    borderRadius: '16%',
+    display: 'grid',
+    gridGap: borderWidth,
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gridTemplateRows: 'repeat(2, 1fr)',
+    height: "".concat(size, "px"),
+    justifyItems: 'center',
+    minWidth: "".concat(size, "px"),
+    overflow: 'hidden',
+    width: "".concat(size, "px")
+  };
+};
+
+var filteredAvatarGridProps = function filteredAvatarGridProps(props) {
+  return (0, _util.filterProps)(props, ['backgroundColor', 'borderColor', 'items', 'size', 'borderWidth']);
 };
-const filteredAvatarGridProps = (props) => (0, util_1.filterProps)(props, ['backgroundColor', 'borderColor', 'items', 'size', 'borderWidth']);
-const AvatarGrid = (_a) => {
-    var { borderWidth = 1, size = Avatar_1.DEFAULT_AVATAR_SIZE, items, fetchImages } = _a, props = __rest(_a, ["borderWidth", "size", "items", "fetchImages"]);
-    const allProps = Object.assign({ borderWidth, items, size }, props);
-    const slicedItems = items.slice(0, 4);
-    const missing = 4 - slicedItems.length;
-    for (let index = 0; index < missing; index++) {
-        slicedItems.push(null);
-    }
-    return ((0, react_1.jsx)(Misc_1.IsInViewport, Object.assign({ checkViewportOnce: true, onEnterViewport: fetchImages, css: avatarGridStyle(allProps) }, filteredAvatarGridProps(allProps)), slicedItems.map(item => item ? ((0, react_1.jsx)(Avatar_1.Avatar, { key: Math.random().toString(), backgroundColor: item.backgroundColor || colors_1.COLOR.GRAY_DARKEN_80, url: item.url, color: item.color, forceInitials: item.forceInitials, isAvatarGridItem: true, name: item.name, size: size / 2 - borderWidth, style: { height: '100%', width: '100%' } })) : ((0, react_1.jsx)("div", { key: Math.random().toString(), css: {
-            backgroundColor: colors_1.COLOR.GRAY_DARKEN_80,
-            height: '100%',
-            width: '100%',
-        } })))));
+
+var AvatarGrid = function AvatarGrid(_ref2) {
+  var _ref2$borderWidth = _ref2.borderWidth,
+      borderWidth = _ref2$borderWidth === void 0 ? 1 : _ref2$borderWidth,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _Avatar.DEFAULT_AVATAR_SIZE : _ref2$size,
+      items = _ref2.items,
+      fetchImages = _ref2.fetchImages,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+
+  var allProps = _objectSpread({
+    borderWidth: borderWidth,
+    items: items,
+    size: size
+  }, props);
+
+  var slicedItems = items.slice(0, 4);
+  var missing = 4 - slicedItems.length;
+
+  for (var index = 0; index < missing; index++) {
+    slicedItems.push(null);
+  }
+
+  return (0, _react.jsx)(_Misc.IsInViewport, (0, _extends2["default"])({
+    checkViewportOnce: true,
+    onEnterViewport: fetchImages,
+    css: avatarGridStyle(allProps)
+  }, filteredAvatarGridProps(allProps)), slicedItems.map(function (item) {
+    return item ? (0, _react.jsx)(_Avatar.Avatar, {
+      key: Math.random().toString(),
+      backgroundColor: item.backgroundColor || _colors.COLOR.GRAY_DARKEN_80,
+      url: item.url,
+      color: item.color,
+      forceInitials: item.forceInitials,
+      isAvatarGridItem: true,
+      name: item.name,
+      size: size / 2 - borderWidth,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }) : (0, _react.jsx)("div", {
+      key: Math.random().toString(),
+      css: /*#__PURE__*/(0, _react.css)({
+        backgroundColor: _colors.COLOR.GRAY_DARKEN_80,
+        height: '100%',
+        width: '100%'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:AvatarGrid;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhckdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThGWSIsImZpbGUiOiJBdmF0YXJHcmlkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTkgV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7Q1NTT2JqZWN0LCBqc3h9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7QXZhdGFyUHJvcHN9IGZyb20gJy4uL0lkZW50aXR5Lyc7XG5pbXBvcnQge0lzSW5WaWV3cG9ydH0gZnJvbSAnLi4vTWlzYy8nO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0F2YXRhciwgREVGQVVMVF9BVkFUQVJfU0laRX0gZnJvbSAnLi9BdmF0YXInO1xuaW1wb3J0IHtDT0xPUn0gZnJvbSAnLi9jb2xvcnMnO1xuXG5pbnRlcmZhY2UgUHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGJhY2tncm91bmRDb2xvcj86IHN0cmluZztcbiAgYm9yZGVyQ29sb3I/OiBzdHJpbmc7XG4gIGJvcmRlcldpZHRoPzogbnVtYmVyO1xuICBmZXRjaEltYWdlcz86ICgpID0+IHZvaWQ7XG4gIGl0ZW1zOiBPbWl0PEF2YXRhclByb3BzLCAnYm9yZGVyQ29sb3InIHwgJ3NpemUnIHwgJ2JvcmRlckNvbG9yJyB8ICdpc0F2YXRhckdyaWRJdGVtJyB8ICdmZXRjaEltYWdlJz5bXTtcbiAgc2l6ZT86IG51bWJlcjtcbn1cblxuY29uc3QgYXZhdGFyR3JpZFN0eWxlOiA8VD4ocHJvcHM6IFByb3BzPFQ+KSA9PiBDU1NPYmplY3QgPSAoe1xuICBib3JkZXJXaWR0aCxcbiAgc2l6ZSxcbiAgYmFja2dyb3VuZENvbG9yID0gQ09MT1IuR1JBWV9EQVJLRU5fNDgsXG4gIGJvcmRlckNvbG9yID0gQ09MT1IuR1JBWV9EQVJLRU5fNDgsXG59KSA9PiB7XG4gIHJldHVybiB7XG4gICAgYWxpZ25JdGVtczogJ3N0YXJ0JyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGJhY2tncm91bmRDb2xvcixcbiAgICBib3JkZXI6IGAke2JvcmRlcldpZHRofXB4IHNvbGlkICR7Ym9yZGVyQ29sb3J9YCxcbiAgICBib3JkZXJSYWRpdXM6ICcxNiUnLFxuICAgIGRpc3BsYXk6ICdncmlkJyxcbiAgICBncmlkR2FwOiBib3JkZXJXaWR0aCxcbiAgICBncmlkVGVtcGxhdGVDb2x1bW5zOiAncmVwZWF0KDIsIDFmciknLFxuICAgIGdyaWRUZW1wbGF0ZVJvd3M6ICdyZXBlYXQoMiwgMWZyKScsXG4gICAgaGVpZ2h0OiBgJHtzaXplfXB4YCxcbiAgICBqdXN0aWZ5SXRlbXM6ICdjZW50ZXInLFxuICAgIG1pbldpZHRoOiBgJHtzaXplfXB4YCxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgd2lkdGg6IGAke3NpemV9cHhgLFxuICB9O1xufTtcblxuY29uc3QgZmlsdGVyZWRBdmF0YXJHcmlkUHJvcHMgPSAocHJvcHM6IFByb3BzKSA9PlxuICBmaWx0ZXJQcm9wcyhwcm9wcywgWydiYWNrZ3JvdW5kQ29sb3InLCAnYm9yZGVyQ29sb3InLCAnaXRlbXMnLCAnc2l6ZScsICdib3JkZXJXaWR0aCddKTtcblxuZXhwb3J0IGNvbnN0IEF2YXRhckdyaWQgPSAoe2JvcmRlcldpZHRoID0gMSwgc2l6ZSA9IERFRkFVTFRfQVZBVEFSX1NJWkUsIGl0ZW1zLCBmZXRjaEltYWdlcywgLi4ucHJvcHN9OiBQcm9wcykgPT4ge1xuICBjb25zdCBhbGxQcm9wcyA9IHtib3JkZXJXaWR0aCwgaXRlbXMsIHNpemUsIC4uLnByb3BzfTtcbiAgY29uc3Qgc2xpY2VkSXRlbXMgPSBpdGVtcy5zbGljZSgwLCA0KTtcbiAgY29uc3QgbWlzc2luZyA9IDQgLSBzbGljZWRJdGVtcy5sZW5ndGg7XG4gIGZvciAobGV0IGluZGV4ID0gMDsgaW5kZXggPCBtaXNzaW5nOyBpbmRleCsrKSB7XG4gICAgc2xpY2VkSXRlbXMucHVzaChudWxsKTtcbiAgfVxuICByZXR1cm4gKFxuICAgIDxJc0luVmlld3BvcnRcbiAgICAgIGNoZWNrVmlld3BvcnRPbmNlXG4gICAgICBvbkVudGVyVmlld3BvcnQ9e2ZldGNoSW1hZ2VzfVxuICAgICAgY3NzPXthdmF0YXJHcmlkU3R5bGUoYWxsUHJvcHMpfVxuICAgICAgey4uLmZpbHRlcmVkQXZhdGFyR3JpZFByb3BzKGFsbFByb3BzKX1cbiAgICA+XG4gICAgICB7c2xpY2VkSXRlbXMubWFwKGl0ZW0gPT5cbiAgICAgICAgaXRlbSA/IChcbiAgICAgICAgICA8QXZhdGFyXG4gICAgICAgICAgICBrZXk9e01hdGgucmFuZG9tKCkudG9TdHJpbmcoKX1cbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcj17aXRlbS5iYWNrZ3JvdW5kQ29sb3IgfHwgQ09MT1IuR1JBWV9EQVJLRU5fODB9XG4gICAgICAgICAgICB1cmw9e2l0ZW0udXJsfVxuICAgICAgICAgICAgY29sb3I9e2l0ZW0uY29sb3J9XG4gICAgICAgICAgICBmb3JjZUluaXRpYWxzPXtpdGVtLmZvcmNlSW5pdGlhbHN9XG4gICAgICAgICAgICBpc0F2YXRhckdyaWRJdGVtXG4gICAgICAgICAgICBuYW1lPXtpdGVtLm5hbWV9XG4gICAgICAgICAgICBzaXplPXtzaXplIC8gMiAtIGJvcmRlcldpZHRofVxuICAgICAgICAgICAgc3R5bGU9e3toZWlnaHQ6ICcxMDAlJywgd2lkdGg6ICcxMDAlJ319XG4gICAgICAgICAgLz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBrZXk9e01hdGgucmFuZG9tKCkudG9TdHJpbmcoKX1cbiAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SLkdSQVlfREFSS0VOXzgwLFxuICAgICAgICAgICAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSxcbiAgICAgICl9XG4gICAgPC9Jc0luVmlld3BvcnQ+XG4gICk7XG59O1xuIl19 */")
+    });
+  }));
 };
+
 exports.AvatarGrid = AvatarGrid;
 //# sourceMappingURL=AvatarGrid.js.map

package/src/Identity/AvatarGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGrid.js","sourceRoot":"","sources":["AvatarGrid.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAI9C,mCAAsC;AACtC,kCAAoC;AACpC,qCAAqD;AACrD,qCAA+B;AAW/B,MAAM,eAAe,GAAsC,CAAC,EAC1D,WAAW,EACX,IAAI,EACJ,eAAe,GAAG,cAAK,CAAC,cAAc,EACtC,WAAW,GAAG,cAAK,CAAC,cAAc,GACnC,EAAE,EAAE;IACH,OAAO;QACL,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,eAAe;QAChC,MAAM,EAAE,GAAG,WAAW,YAAY,WAAW,EAAE;QAC/C,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,WAAW;QACpB,mBAAmB,EAAE,gBAAgB;QACrC,gBAAgB,EAAE,gBAAgB;QAClC,MAAM,EAAE,GAAG,IAAI,IAAI;QACnB,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,GAAG,IAAI,IAAI;QACrB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG,IAAI,IAAI;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAE,EAAE,CAC/C,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,iBAAiB,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AAElF,MAAM,UAAU,GAAG,CAAC,EAAkF,EAAE,EAAE;QAAtF,EAAC,WAAW,GAAG,CAAC,EAAE,IAAI,GAAG,4BAAmB,EAAE,KAAK,EAAE,WAAW,OAAkB,EAAb,KAAK,cAA1E,+CAA2E,CAAD;IACnG,MAAM,QAAQ,mBAAI,WAAW,EAAE,KAAK,EAAE,IAAI,IAAK,KAAK,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC;IACvC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,EAAE;QAC5C,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;IACD,OAAO,CACL,iBAAC,mBAAY,kBACX,iBAAiB,QACjB,eAAe,EAAE,WAAW,EAC5B,GAAG,EAAE,eAAe,CAAC,QAAQ,CAAC,IAC1B,uBAAuB,CAAC,QAAQ,CAAC,GAEpC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,IAAI,CAAC,CAAC,CAAC,CACL,iBAAC,eAAM,IACL,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,IAAI,cAAK,CAAC,cAAc,EAC7D,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,QAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GAAG,CAAC,GAAG,WAAW,EAC5B,KAAK,EAAE,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC,GACtC,CACH,CAAC,CAAC,CAAC,CACF,0BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,GAAG,EAAE;YACH,eAAe,EAAE,cAAK,CAAC,cAAc;YACrC,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd,GACD,CACH,CACF,CACY,CAChB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,UAAU,cAwCrB"}
+{"version":3,"sources":["AvatarGrid.tsx"],"names":["avatarGridStyle","borderWidth","size","backgroundColor","COLOR","GRAY_DARKEN_48","borderColor","alignItems","border","borderRadius","display","gridGap","gridTemplateColumns","gridTemplateRows","height","justifyItems","minWidth","overflow","width","filteredAvatarGridProps","props","AvatarGrid","DEFAULT_AVATAR_SIZE","items","fetchImages","allProps","slicedItems","slice","missing","length","index","push","map","item","Math","random","toString","GRAY_DARKEN_80","url","color","forceInitials","name"],"mappings":";;;;;;;;;;;AAoBA;;;;;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;AAWA,IAAMA,eAAkD,GAAG,SAArDA,eAAqD,OAKrD;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,kCAFJC,eAEI;AAAA,MAFJA,eAEI,qCAFcC,cAAMC,cAEpB;AAAA,8BADJC,WACI;AAAA,MADJA,WACI,iCADUF,cAAMC,cAChB;AACJ,SAAO;AACLE,IAAAA,UAAU,EAAE,OADP;AAELJ,IAAAA,eAAe,EAAEA,eAFZ;AAGLK,IAAAA,MAAM,YAAKP,WAAL,sBAA4BK,WAA5B,CAHD;AAILG,IAAAA,YAAY,EAAE,KAJT;AAKLC,IAAAA,OAAO,EAAE,MALJ;AAMLC,IAAAA,OAAO,EAAEV,WANJ;AAOLW,IAAAA,mBAAmB,EAAE,gBAPhB;AAQLC,IAAAA,gBAAgB,EAAE,gBARb;AASLC,IAAAA,MAAM,YAAKZ,IAAL,OATD;AAULa,IAAAA,YAAY,EAAE,QAVT;AAWLC,IAAAA,QAAQ,YAAKd,IAAL,OAXH;AAYLe,IAAAA,QAAQ,EAAE,QAZL;AAaLC,IAAAA,KAAK,YAAKhB,IAAL;AAbA,GAAP;AAeD,CArBD;;AAuBA,IAAMiB,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,KAAD;AAAA,SAC9B,uBAAYA,KAAZ,EAAmB,CAAC,iBAAD,EAAoB,aAApB,EAAmC,OAAnC,EAA4C,MAA5C,EAAoD,aAApD,CAAnB,CAD8B;AAAA,CAAhC;;AAGO,IAAMC,UAAU,GAAG,SAAbA,UAAa,QAAwF;AAAA,gCAAtFpB,WAAsF;AAAA,MAAtFA,WAAsF,kCAAxE,CAAwE;AAAA,yBAArEC,IAAqE;AAAA,MAArEA,IAAqE,2BAA9DoB,2BAA8D;AAAA,MAAzCC,KAAyC,SAAzCA,KAAyC;AAAA,MAAlCC,WAAkC,SAAlCA,WAAkC;AAAA,MAAlBJ,KAAkB;;AAChH,MAAMK,QAAQ;AAAIxB,IAAAA,WAAW,EAAXA,WAAJ;AAAiBsB,IAAAA,KAAK,EAALA,KAAjB;AAAwBrB,IAAAA,IAAI,EAAJA;AAAxB,KAAiCkB,KAAjC,CAAd;;AACA,MAAMM,WAAW,GAAGH,KAAK,CAACI,KAAN,CAAY,CAAZ,EAAe,CAAf,CAApB;AACA,MAAMC,OAAO,GAAG,IAAIF,WAAW,CAACG,MAAhC;;AACA,OAAK,IAAIC,KAAK,GAAG,CAAjB,EAAoBA,KAAK,GAAGF,OAA5B,EAAqCE,KAAK,EAA1C,EAA8C;AAC5CJ,IAAAA,WAAW,CAACK,IAAZ,CAAiB,IAAjB;AACD;;AACD,SACE,gBAAC,kBAAD;AACE,IAAA,iBAAiB,MADnB;AAEE,IAAA,eAAe,EAAEP,WAFnB;AAGE,IAAA,GAAG,EAAExB,eAAe,CAACyB,QAAD;AAHtB,KAIMN,uBAAuB,CAACM,QAAD,CAJ7B,GAMGC,WAAW,CAACM,GAAZ,CAAgB,UAAAC,IAAI;AAAA,WACnBA,IAAI,GACF,gBAAC,cAAD;AACE,MAAA,GAAG,EAAEC,IAAI,CAACC,MAAL,GAAcC,QAAd,EADP;AAEE,MAAA,eAAe,EAAEH,IAAI,CAAC9B,eAAL,IAAwBC,cAAMiC,cAFjD;AAGE,MAAA,GAAG,EAAEJ,IAAI,CAACK,GAHZ;AAIE,MAAA,KAAK,EAAEL,IAAI,CAACM,KAJd;AAKE,MAAA,aAAa,EAAEN,IAAI,CAACO,aALtB;AAME,MAAA,gBAAgB,MANlB;AAOE,MAAA,IAAI,EAAEP,IAAI,CAACQ,IAPb;AAQE,MAAA,IAAI,EAAEvC,IAAI,GAAG,CAAP,GAAWD,WARnB;AASE,MAAA,KAAK,EAAE;AAACa,QAAAA,MAAM,EAAE,MAAT;AAAiBI,QAAAA,KAAK,EAAE;AAAxB;AATT,MADE,GAaF;AACE,MAAA,GAAG,EAAEgB,IAAI,CAACC,MAAL,GAAcC,QAAd,EADP;AAEE,MAAA,GAAG,+BAAE;AACHjC,QAAAA,eAAe,EAAEC,cAAMiC,cADpB;AAEHvB,QAAAA,MAAM,EAAE,MAFL;AAGHI,QAAAA,KAAK,EAAE;AAHJ,OAAF;AAFL,MAdiB;AAAA,GAApB,CANH,CADF;AAiCD,CAxCM","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 {AvatarProps} from '../Identity/';\nimport {IsInViewport} from '../Misc/';\nimport {filterProps} from '../util';\nimport {Avatar, DEFAULT_AVATAR_SIZE} from './Avatar';\nimport {COLOR} from './colors';\n\ninterface Props<T = HTMLDivElement> extends React.HTMLProps<T> {\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: number;\n  fetchImages?: () => void;\n  items: Omit<AvatarProps, 'borderColor' | 'size' | 'borderColor' | 'isAvatarGridItem' | 'fetchImage'>[];\n  size?: number;\n}\n\nconst avatarGridStyle: <T>(props: Props<T>) => CSSObject = ({\n  borderWidth,\n  size,\n  backgroundColor = COLOR.GRAY_DARKEN_48,\n  borderColor = COLOR.GRAY_DARKEN_48,\n}) => {\n  return {\n    alignItems: 'start',\n    backgroundColor: backgroundColor,\n    border: `${borderWidth}px solid ${borderColor}`,\n    borderRadius: '16%',\n    display: 'grid',\n    gridGap: borderWidth,\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    gridTemplateRows: 'repeat(2, 1fr)',\n    height: `${size}px`,\n    justifyItems: 'center',\n    minWidth: `${size}px`,\n    overflow: 'hidden',\n    width: `${size}px`,\n  };\n};\n\nconst filteredAvatarGridProps = (props: Props) =>\n  filterProps(props, ['backgroundColor', 'borderColor', 'items', 'size', 'borderWidth']);\n\nexport const AvatarGrid = ({borderWidth = 1, size = DEFAULT_AVATAR_SIZE, items, fetchImages, ...props}: Props) => {\n  const allProps = {borderWidth, items, size, ...props};\n  const slicedItems = items.slice(0, 4);\n  const missing = 4 - slicedItems.length;\n  for (let index = 0; index < missing; index++) {\n    slicedItems.push(null);\n  }\n  return (\n    <IsInViewport\n      checkViewportOnce\n      onEnterViewport={fetchImages}\n      css={avatarGridStyle(allProps)}\n      {...filteredAvatarGridProps(allProps)}\n    >\n      {slicedItems.map(item =>\n        item ? (\n          <Avatar\n            key={Math.random().toString()}\n            backgroundColor={item.backgroundColor || COLOR.GRAY_DARKEN_80}\n            url={item.url}\n            color={item.color}\n            forceInitials={item.forceInitials}\n            isAvatarGridItem\n            name={item.name}\n            size={size / 2 - borderWidth}\n            style={{height: '100%', width: '100%'}}\n          />\n        ) : (\n          <div\n            key={Math.random().toString()}\n            css={{\n              backgroundColor: COLOR.GRAY_DARKEN_80,\n              height: '100%',\n              width: '100%',\n            }}\n          />\n        ),\n      )}\n    </IsInViewport>\n  );\n};\n"],"file":"AvatarGrid.js"}

package/src/Identity/Logo.js

@@ -1,53 +1,62 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Logo = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const SVGIcon_1 = require("../Icon/SVGIcon");
-const motions_1 = require("../Identity/motions");
-const colors_1 = require("./colors");
-const logoStyle = (theme, { hover, color = theme.general.color }) => ({
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _SVGIcon = require("../Icon/SVGIcon");
+
+var _motions = require("../Identity/motions");
+
+var _colors = require("./colors");
+
+var _excluded = ["hover"];
+
+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 logoStyle = function logoStyle(theme, _ref) {
+  var hover = _ref.hover,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? theme.general.color : _ref$color;
+  return {
     '&:hover path': {
-        fill: hover ? colors_1.COLOR.shade(color, 0.06) : undefined,
+      fill: hover ? _colors.COLOR.shade(color, 0.06) : undefined
     },
     path: {
-        fill: color,
-        transition: motions_1.defaultTransition,
-    },
-});
-const Logo = (_a) => {
-    var { hover } = _a, props = __rest(_a, ["hover"]);
-    return ((0, react_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 57, realHeight: 18, css: (theme) => logoStyle(theme, Object.assign({ hover }, props)) }, props),
-        (0, react_1.jsx)("path", { d: "M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z" })));
+      fill: color,
+      transition: _motions.defaultTransition
+    }
+  };
+};
+
+var Logo = function Logo(_ref2) {
+  var hover = _ref2.hover,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  return (0, _react.jsx)(_SVGIcon.SVGIcon, (0, _extends2["default"])({
+    realWidth: 57,
+    realHeight: 18,
+    css: function css(theme) {
+      return logoStyle(theme, _objectSpread({
+        hover: hover
+      }, props));
+    }
+  }, props), (0, _react.jsx)("path", {
+    d: "M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z"
+  }));
 };
+
 exports.Logo = Logo;
 //# sourceMappingURL=Logo.js.map

package/src/Identity/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sourceRoot":"","sources":["Logo.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,6CAAsD;AACtD,iDAAsD;AAEtD,qCAA+B;AAM/B,MAAM,SAAS,GAAwD,CACrE,KAAK,EACL,EAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAC,EACpC,EAAE,CAAC,CAAC;IACJ,cAAc,EAAE;QACd,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,cAAK,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;KACnD;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,2BAAiB;KAC9B;CACF,CAAC,CAAC;AAEI,MAAM,IAAI,GAAG,CAAC,EAA4B,EAAE,EAAE;QAAhC,EAAC,KAAK,OAAsB,EAAjB,KAAK,cAAhB,SAAiB,CAAD;IAAiB,OAAA,CACpD,iBAAC,iBAAO,kBAAC,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,kBAAG,KAAK,IAAK,KAAK,EAAE,IAAM,KAAK;QAC3G,2BAAM,CAAC,EAAC,2lCAA2lC,GAAG,CAC9lC,CACX,CAAA;CAAA,CAAC;AAJW,QAAA,IAAI,QAIf"}
+{"version":3,"sources":["Logo.tsx"],"names":["logoStyle","theme","hover","color","general","fill","COLOR","shade","undefined","path","transition","defaultTransition","Logo","props"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAEA;;;;;;;;AAMA,IAAMA,SAA8D,GAAG,SAAjEA,SAAiE,CACrEC,KADqE;AAAA,MAEpEC,KAFoE,QAEpEA,KAFoE;AAAA,wBAE7DC,KAF6D;AAAA,MAE7DA,KAF6D,2BAErDF,KAAK,CAACG,OAAN,CAAcD,KAFuC;AAAA,SAGjE;AACJ,oBAAgB;AACdE,MAAAA,IAAI,EAAEH,KAAK,GAAGI,cAAMC,KAAN,CAAYJ,KAAZ,EAAmB,IAAnB,CAAH,GAA8BK;AAD3B,KADZ;AAIJC,IAAAA,IAAI,EAAE;AACJJ,MAAAA,IAAI,EAAEF,KADF;AAEJO,MAAAA,UAAU,EAAEC;AAFR;AAJF,GAHiE;AAAA,CAAvE;;AAaO,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,MAAEV,KAAF,SAAEA,KAAF;AAAA,MAAYW,KAAZ;AAAA,SAClB,gBAAC,gBAAD;AAAS,IAAA,SAAS,EAAE,EAApB;AAAwB,IAAA,UAAU,EAAE,EAApC;AAAwC,IAAA,GAAG,EAAE,aAACZ,KAAD;AAAA,aAAkBD,SAAS,CAACC,KAAD;AAASC,QAAAA,KAAK,EAALA;AAAT,SAAmBW,KAAnB,EAA3B;AAAA;AAA7C,KAAwGA,KAAxG,GACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,CADkB;AAAA,CAAb","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {SVGIcon, SVGIconProps} from '../Icon/SVGIcon';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {COLOR} from './colors';\n\nexport interface LogoProps<T = SVGSVGElement> extends SVGIconProps<T> {\n  hover?: boolean;\n}\n\nconst logoStyle: <T>(theme: Theme, props: LogoProps<T>) => CSSObject = (\n  theme,\n  {hover, color = theme.general.color},\n) => ({\n  '&:hover path': {\n    fill: hover ? COLOR.shade(color, 0.06) : undefined,\n  },\n  path: {\n    fill: color,\n    transition: defaultTransition,\n  },\n});\n\nexport const Logo = ({hover, ...props}: LogoProps) => (\n  <SVGIcon realWidth={57} realHeight={18} css={(theme: Theme) => logoStyle(theme, {hover, ...props})} {...props}>\n    <path d=\"M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z\" />\n  </SVGIcon>\n);\n"],"file":"Logo.js"}