@wireapp/react-ui-kit 8.17.9 → 9.0.0

package/src/Identity/AvatarGrid.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AvatarGrid = void 0;
-var _react = require("@emotion/react");
-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 _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 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) { _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 _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 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']);
-};
-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 = _objectWithoutProperties(_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, _extends({
-    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 +0,0 @@
-{"version":3,"file":"AvatarGrid.js","names":["avatarGridStyle","borderWidth","size","backgroundColor","COLOR","GRAY_DARKEN_48","borderColor","alignItems","border","borderRadius","display","gridGap","gridTemplateColumns","gridTemplateRows","height","justifyItems","minWidth","overflow","width","filteredAvatarGridProps","props","filterProps","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"],"sources":["AvatarGrid.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 {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"],"mappings":"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"}

package/src/Identity/AvatarGrid.md

@@ -1,74 +0,0 @@
-Demo:
-
-```js
-import {useState, useCallback} from 'react';
-import {Logo, COLOR, Avatar} from '@wireapp/react-ui-kit';
-
-const avatarBase64 =
-  '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';
-
-const base64ToArray = base64 => {
-  return new Uint8Array(Array.from(atob(base64)).map(letter => letter.charCodeAt(0)));
-};
-const imageArray = base64ToArray(avatarBase64);
-const imageBlob = new Blob([imageArray], {type: 'image/png'});
-const imageUrl = window.URL.createObjectURL(imageBlob);
-const FETCH_IMAGE_TIMEOUT_MS = 2000;
-const [imageData, setImageData] = useState(null);
-
-<div
-  style={{
-    alignItems: 'center',
-    display: 'grid',
-    gridGap: 16,
-    gridTemplateColumns: 'repeat(6, 1fr)',
-    justifyItems: 'center',
-  }}
->
-  <AvatarGrid
-    size={120}
-    items={[
-      {url: imageData, color: '#fb0807', name: 'Joe Doe'},
-      {url: imageData, color: '#2085C2', name: 'Bon Jovi'},
-      {url: imageData, color: '#EB7E00', name: 'Mick Jagger'},
-      {url: imageData, color: '#EB7E00', name: 'Freddy Mercury'},
-    ]}
-    fetchImages={useCallback(() => {
-      setTimeout(() => {
-        setImageData(imageUrl);
-      }, FETCH_IMAGE_TIMEOUT_MS);
-    }, [])}
-  />
-  <AvatarGrid
-    size={120}
-    items={[
-      {color: '#fb0807', name: 'Joe Doe'},
-      {url: imageData, color: '#2085C2', name: 'Bon Jovi'},
-      {color: '#EB7E00', name: 'Mick Jagger'},
-    ]}
-  />
-  <AvatarGrid
-    size={64}
-    items={[
-      {color: '#EB7E00', name: 'Mick Jagger'},
-      {color: '#359AD7', name: 'Freddy Mercury'},
-    ]}
-  />
-  <AvatarGrid size={64} items={[{color: '#EB7E00', name: 'Mick Jagger'}]} />
-  <AvatarGrid
-    size={32}
-    items={[
-      {color: '#fb0807', name: 'Joe Doe'},
-      {color: '#2085C2', name: 'Bon Jovi'},
-      {color: '#EB7E00', name: 'Mick Jagger'},
-    ]}
-  />
-  <AvatarGrid
-    items={[
-      {color: '#fb0807', name: 'Joe Doe'},
-      {url: imageData, color: '#2085C2', name: 'Bon Jovi'},
-      {color: '#EB7E00', name: 'Mick Jagger'},
-    ]}
-  />
-</div>;
-```

package/src/Identity/Logo.d.js

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

package/src/Identity/Logo.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Logo.d.js","names":[],"sources":["Logo.d.ts"],"sourcesContent":["/** @jsx jsx */\nimport { jsx } from '@emotion/react';\nimport { SVGIconProps } from '../Icon/SVGIcon';\nexport interface LogoProps<T = SVGSVGElement> extends SVGIconProps<T> {\n    hover?: boolean;\n}\nexport declare const Logo: ({ hover, ...props }: LogoProps) => jsx.JSX.Element;\n"],"mappings":""}

package/src/Identity/Logo.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Logo = void 0;
-var _react = require("@emotion/react");
-var _SVGIcon = require("../Icon/SVGIcon");
-var _motions = require("../Identity/motions");
-var _colors = require("./colors");
-var _excluded = ["hover"];
-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 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) { _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 _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 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.COLOR.shade(color, 0.06) : undefined
-    },
-    path: {
-      fill: color,
-      transition: _motions.defaultTransition
-    }
-  };
-};
-var Logo = function Logo(_ref2) {
-  var hover = _ref2.hover,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  return (0, _react.jsx)(_SVGIcon.SVGIcon, _extends({
-    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 +0,0 @@
-{"version":3,"file":"Logo.js","names":["logoStyle","theme","hover","color","general","fill","COLOR","shade","undefined","path","transition","defaultTransition","Logo","props"],"sources":["Logo.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\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"],"mappings":";;;;;;AAoBA;AAEA;AACA;AAEA;AAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAM/B,IAAMA,SAA8D,GAAG,SAAjEA,SAA8D,CAClEC,KAAK;EAAA,IACJC,KAAK,QAALA,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAGF,KAAK,CAACG,OAAO,CAACD,KAAK;EAAA,OAC/B;IACJ,cAAc,EAAE;MACdE,IAAI,EAAEH,KAAK,GAAGI,aAAK,CAACC,KAAK,CAACJ,KAAK,EAAE,IAAI,CAAC,GAAGK;IAC3C,CAAC;IACDC,IAAI,EAAE;MACJJ,IAAI,EAAEF,KAAK;MACXO,UAAU,EAAEC;IACd;EACF,CAAC;AAAA,CAAC;AAEK,IAAMC,IAAI,GAAG,SAAPA,IAAI;EAAA,IAAKV,KAAK,SAALA,KAAK;IAAKW,KAAK;EAAA,OACnC,gBAAC,gBAAO;IAAC,SAAS,EAAE,EAAG;IAAC,UAAU,EAAE,EAAG;IAAC,GAAG,EAAE,aAACZ,KAAY;MAAA,OAAKD,SAAS,CAACC,KAAK;QAAGC,KAAK,EAALA;MAAK,GAAKW,KAAK,EAAE;IAAA;EAAC,GAAKA,KAAK,GAC3G;IAAM,CAAC,EAAC;EAA2lC,EAAG,CAC9lC;AAAA,CACX;AAAC"}

package/src/Identity/Logo.md

@@ -1,7 +0,0 @@
-Demo:
-
-```js
-import {Logo, COLOR} from '@wireapp/react-ui-kit';
-
-<Logo scale={3} color={COLOR.RED} />;
-```

package/src/Identity/colors-v2.d.js

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

package/src/Identity/colors-v2.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors-v2.d.js","names":[],"sources":["colors-v2.d.ts"],"sourcesContent":["export declare const BASE_LIGHT_COLOR: Record<string, string>;\nexport declare const BASE_DARK_COLOR: Record<string, string>;\nexport declare const COLOR_V2: any;\n"],"mappings":""}

package/src/Identity/colors-v2.js

@@ -1,211 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COLOR_V2 = exports.BASE_LIGHT_COLOR = exports.BASE_DARK_COLOR = void 0;
-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) { _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; }
-/*
- * Wire
- * Copyright (C) 2022 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 BASE_LIGHT_COLOR = {
-  BLUE: '#0667c8',
-  GREEN: '#1d7833',
-  TURQUOISE: '#01718e',
-  PURPLE: '#8944ab',
-  RED: '#c20013',
-  AMBER: '#a25915'
-};
-exports.BASE_LIGHT_COLOR = BASE_LIGHT_COLOR;
-var BASE_DARK_COLOR = {
-  BLUE: '#54a6ff',
-  GREEN: '#30db5b',
-  TURQUOISE: '#5de6ff',
-  PURPLE: '#da8fff',
-  RED: '#ff7770',
-  AMBER: '#ffd426'
-};
-exports.BASE_DARK_COLOR = BASE_DARK_COLOR;
-var LIGHT_BLUE = {
-  BLUE_LIGHT_50: '#e7f0fa',
-  BLUE_LIGHT_100: '#cde1f4',
-  BLUE_LIGHT_200: '#9bc2e9',
-  BLUE_LIGHT_300: '#6aa4de',
-  BLUE_LIGHT_400: '#3885d3',
-  BLUE_LIGHT_500: BASE_LIGHT_COLOR.BLUE,
-  BLUE_LIGHT_600: '#0552a0',
-  BLUE_LIGHT_700: '#043e78',
-  BLUE_LIGHT_800: '#022950',
-  BLUE_LIGHT_900: '#19324d'
-};
-var DARK_BLUE = {
-  BLUE_DARK_50: '#eef7ff',
-  BLUE_DARK_100: '#ddedff',
-  BLUE_DARK_200: '#bbdbff',
-  BLUE_DARK_300: '#98caff',
-  BLUE_DARK_400: '#76b8ff',
-  BLUE_DARK_500: BASE_DARK_COLOR.BLUE,
-  BLUE_DARK_600: '#4385cc',
-  BLUE_DARK_700: '#326499',
-  BLUE_DARK_800: '#224266',
-  BLUE_DARK_900: '#19324d'
-};
-var LIGHT_GREEN = {
-  GREEN_LIGHT_50: '#e8f1ea',
-  GREEN_LIGHT_100: '#d2e4d6',
-  GREEN_LIGHT_200: '#a5c9ad',
-  GREEN_LIGHT_300: '#77ae85',
-  GREEN_LIGHT_400: '#4a935c',
-  GREEN_LIGHT_500: BASE_LIGHT_COLOR.GREEN,
-  GREEN_LIGHT_600: '#176029',
-  GREEN_LIGHT_700: '#11481f',
-  GREEN_LIGHT_800: '#0c3014',
-  GREEN_LIGHT_900: '#0e421b'
-};
-var DARK_GREEN = {
-  GREEN_DARK_50: '#ebfcef',
-  GREEN_DARK_100: '#d6f8de',
-  GREEN_DARK_200: '#acf1bd',
-  GREEN_DARK_300: '#83e99d',
-  GREEN_DARK_400: '#59e27c',
-  GREEN_DARK_500: BASE_DARK_COLOR.GREEN,
-  GREEN_DARK_600: '#26af49',
-  GREEN_DARK_700: '#1d8337',
-  GREEN_DARK_800: '#135824',
-  GREEN_DARK_900: '#0e421b'
-};
-var LIGHT_TURQUOISE = {
-  TURQUOISE_LIGHT_50: '#e5f1f3',
-  TURQUOISE_LIGHT_100: '#cce2e7',
-  TURQUOISE_LIGHT_200: '#99c6d0',
-  TURQUOISE_LIGHT_300: '#67a9b8',
-  TURQUOISE_LIGHT_400: '#348da1',
-  TURQUOISE_LIGHT_500: BASE_LIGHT_COLOR.TURQUOISE,
-  TURQUOISE_LIGHT_600: '#015a6e',
-  TURQUOISE_LIGHT_700: '#014352',
-  TURQUOISE_LIGHT_800: '#002d37',
-  TURQUOISE_LIGHT_900: '#1c454d'
-};
-var DARK_TURQUOISE = {
-  TURQUOISE_DARK_50: '#effdff',
-  TURQUOISE_DARK_100: '#dffaff',
-  TURQUOISE_DARK_200: '#bef5ff',
-  TURQUOISE_DARK_300: '#9ef0ff',
-  TURQUOISE_DARK_400: '#7debff',
-  TURQUOISE_DARK_500: BASE_DARK_COLOR.TURQUOISE,
-  TURQUOISE_DARK_600: '#4Ab8cc',
-  TURQUOISE_DARK_700: '#388a99',
-  TURQUOISE_DARK_800: '#255c66',
-  TURQUOISE_DARK_900: '#1c454d'
-};
-var LIGHT_PURPLE = {
-  PURPLE_LIGHT_50: '#f4edf7',
-  PURPLE_LIGHT_100: '#e7daee',
-  PURPLE_LIGHT_200: '#d0b4dd',
-  PURPLE_LIGHT_300: '#b88fcd',
-  PURPLE_LIGHT_400: '#a169bc',
-  PURPLE_LIGHT_500: BASE_LIGHT_COLOR.PURPLE,
-  PURPLE_LIGHT_600: '#6e3689',
-  PURPLE_LIGHT_700: '#522967',
-  PURPLE_LIGHT_800: '#371b44',
-  PURPLE_LIGHT_900: '#412b4d'
-};
-var DARK_PURPLE = {
-  PURPLE_DARK_50: '#fcf4ff',
-  PURPLE_DARK_100: '#f8e9ff',
-  PURPLE_DARK_200: '#f0d2ff',
-  PURPLE_DARK_300: '#e9bcff',
-  PURPLE_DARK_400: '#e1a5ff',
-  PURPLE_DARK_500: BASE_DARK_COLOR.PURPLE,
-  PURPLE_DARK_600: '#ae72cc',
-  PURPLE_DARK_700: '#835699',
-  PURPLE_DARK_800: '#573966',
-  PURPLE_DARK_900: '#412b4d'
-};
-var LIGHT_RED = {
-  RED_LIGHT_50: '#f9e6e8',
-  RED_LIGHT_100: '#f3ccd0',
-  RED_LIGHT_200: '#e799a1',
-  RED_LIGHT_300: '#da6671',
-  RED_LIGHT_400: '#ce3342',
-  RED_LIGHT_500: BASE_LIGHT_COLOR.RED,
-  RED_LIGHT_600: '#9b000f',
-  RED_LIGHT_700: '#74000b',
-  RED_LIGHT_800: '#4e0008',
-  RED_LIGHT_900: '#4d2422'
-};
-var DARK_RED = {
-  RED_DARK_50: '#fff2f1',
-  RED_DARK_100: '#ffe4e2',
-  RED_DARK_200: '#ffc9c6',
-  RED_DARK_300: '#ffada9',
-  RED_DARK_400: '#ff928d',
-  RED_DARK_500: BASE_DARK_COLOR.RED,
-  RED_DARK_600: '#cc5f5a',
-  RED_DARK_700: '#994743',
-  RED_DARK_800: '#66302d',
-  RED_DARK_900: '#4d2422'
-};
-var LIGHT_AMBER = {
-  AMBER_LIGHT_50: '#f6eee8',
-  AMBER_LIGHT_100: '#ecded0',
-  AMBER_LIGHT_200: '#dabda1',
-  AMBER_LIGHT_300: '#c79b73',
-  AMBER_LIGHT_400: '#b57A44',
-  AMBER_LIGHT_500: BASE_LIGHT_COLOR.AMBER,
-  AMBER_LIGHT_600: '#824711',
-  AMBER_LIGHT_700: '#61350d',
-  AMBER_LIGHT_800: '#412408',
-  AMBER_LIGHT_900: '#201204'
-};
-var DARK_AMBER = {
-  AMBER_DARK_50: '#fffbea',
-  AMBER_DARK_100: '#fff6d4',
-  AMBER_DARK_200: '#ffeea8',
-  AMBER_DARK_300: '#ffe57d',
-  AMBER_DARK_400: '#ffdd51',
-  AMBER_DARK_500: BASE_DARK_COLOR.AMBER,
-  AMBER_DARK_600: '#ccaa1e',
-  AMBER_DARK_700: '#997f17',
-  AMBER_DARK_800: '#66550f',
-  AMBER_DARK_900: '#4d400b'
-};
-var DARK = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DARK_BLUE), DARK_GREEN), DARK_TURQUOISE), DARK_PURPLE), DARK_RED), DARK_AMBER);
-var LIGHT = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_TURQUOISE), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
-var GRAYS = {
-  GRAY_10: '#fafafa',
-  GRAY_20: '#edeff0',
-  GRAY_30: '#e5e8ea',
-  GRAY_40: '#dce0e3',
-  GRAY_50: '#cbced1',
-  GRAY_60: '#9fa1a7',
-  GRAY_70: '#676b71',
-  GRAY_80: '#54585f',
-  GRAY_90: '#34373d',
-  GRAY_95: '#26272c',
-  GRAY_100: '#17181a'
-};
-var COLOR_V2 = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, BASE_DARK_COLOR), BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), {}, {
-  BLACK: '#000',
-  WHITE: '#fff'
-});
-exports.COLOR_V2 = COLOR_V2;
-//# sourceMappingURL=colors-v2.js.map

package/src/Identity/colors-v2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors-v2.js","names":["BASE_LIGHT_COLOR","BLUE","GREEN","TURQUOISE","PURPLE","RED","AMBER","BASE_DARK_COLOR","LIGHT_BLUE","BLUE_LIGHT_50","BLUE_LIGHT_100","BLUE_LIGHT_200","BLUE_LIGHT_300","BLUE_LIGHT_400","BLUE_LIGHT_500","BLUE_LIGHT_600","BLUE_LIGHT_700","BLUE_LIGHT_800","BLUE_LIGHT_900","DARK_BLUE","BLUE_DARK_50","BLUE_DARK_100","BLUE_DARK_200","BLUE_DARK_300","BLUE_DARK_400","BLUE_DARK_500","BLUE_DARK_600","BLUE_DARK_700","BLUE_DARK_800","BLUE_DARK_900","LIGHT_GREEN","GREEN_LIGHT_50","GREEN_LIGHT_100","GREEN_LIGHT_200","GREEN_LIGHT_300","GREEN_LIGHT_400","GREEN_LIGHT_500","GREEN_LIGHT_600","GREEN_LIGHT_700","GREEN_LIGHT_800","GREEN_LIGHT_900","DARK_GREEN","GREEN_DARK_50","GREEN_DARK_100","GREEN_DARK_200","GREEN_DARK_300","GREEN_DARK_400","GREEN_DARK_500","GREEN_DARK_600","GREEN_DARK_700","GREEN_DARK_800","GREEN_DARK_900","LIGHT_TURQUOISE","TURQUOISE_LIGHT_50","TURQUOISE_LIGHT_100","TURQUOISE_LIGHT_200","TURQUOISE_LIGHT_300","TURQUOISE_LIGHT_400","TURQUOISE_LIGHT_500","TURQUOISE_LIGHT_600","TURQUOISE_LIGHT_700","TURQUOISE_LIGHT_800","TURQUOISE_LIGHT_900","DARK_TURQUOISE","TURQUOISE_DARK_50","TURQUOISE_DARK_100","TURQUOISE_DARK_200","TURQUOISE_DARK_300","TURQUOISE_DARK_400","TURQUOISE_DARK_500","TURQUOISE_DARK_600","TURQUOISE_DARK_700","TURQUOISE_DARK_800","TURQUOISE_DARK_900","LIGHT_PURPLE","PURPLE_LIGHT_50","PURPLE_LIGHT_100","PURPLE_LIGHT_200","PURPLE_LIGHT_300","PURPLE_LIGHT_400","PURPLE_LIGHT_500","PURPLE_LIGHT_600","PURPLE_LIGHT_700","PURPLE_LIGHT_800","PURPLE_LIGHT_900","DARK_PURPLE","PURPLE_DARK_50","PURPLE_DARK_100","PURPLE_DARK_200","PURPLE_DARK_300","PURPLE_DARK_400","PURPLE_DARK_500","PURPLE_DARK_600","PURPLE_DARK_700","PURPLE_DARK_800","PURPLE_DARK_900","LIGHT_RED","RED_LIGHT_50","RED_LIGHT_100","RED_LIGHT_200","RED_LIGHT_300","RED_LIGHT_400","RED_LIGHT_500","RED_LIGHT_600","RED_LIGHT_700","RED_LIGHT_800","RED_LIGHT_900","DARK_RED","RED_DARK_50","RED_DARK_100","RED_DARK_200","RED_DARK_300","RED_DARK_400","RED_DARK_500","RED_DARK_600","RED_DARK_700","RED_DARK_800","RED_DARK_900","LIGHT_AMBER","AMBER_LIGHT_50","AMBER_LIGHT_100","AMBER_LIGHT_200","AMBER_LIGHT_300","AMBER_LIGHT_400","AMBER_LIGHT_500","AMBER_LIGHT_600","AMBER_LIGHT_700","AMBER_LIGHT_800","AMBER_LIGHT_900","DARK_AMBER","AMBER_DARK_50","AMBER_DARK_100","AMBER_DARK_200","AMBER_DARK_300","AMBER_DARK_400","AMBER_DARK_500","AMBER_DARK_600","AMBER_DARK_700","AMBER_DARK_800","AMBER_DARK_900","DARK","LIGHT","GRAYS","GRAY_10","GRAY_20","GRAY_30","GRAY_40","GRAY_50","GRAY_60","GRAY_70","GRAY_80","GRAY_90","GRAY_95","GRAY_100","COLOR_V2","BLACK","WHITE"],"sources":["colors-v2.ts"],"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\nexport const BASE_LIGHT_COLOR: Record<string, string> = {\n  BLUE: '#0667c8',\n  GREEN: '#1d7833',\n  TURQUOISE: '#01718e',\n  PURPLE: '#8944ab',\n  RED: '#c20013',\n  AMBER: '#a25915',\n};\n\nexport const BASE_DARK_COLOR: Record<string, string> = {\n  BLUE: '#54a6ff',\n  GREEN: '#30db5b',\n  TURQUOISE: '#5de6ff',\n  PURPLE: '#da8fff',\n  RED: '#ff7770',\n  AMBER: '#ffd426',\n};\n\nconst LIGHT_BLUE: Record<string, string> = {\n  BLUE_LIGHT_50: '#e7f0fa',\n  BLUE_LIGHT_100: '#cde1f4',\n  BLUE_LIGHT_200: '#9bc2e9',\n  BLUE_LIGHT_300: '#6aa4de',\n  BLUE_LIGHT_400: '#3885d3',\n  BLUE_LIGHT_500: BASE_LIGHT_COLOR.BLUE,\n  BLUE_LIGHT_600: '#0552a0',\n  BLUE_LIGHT_700: '#043e78',\n  BLUE_LIGHT_800: '#022950',\n  BLUE_LIGHT_900: '#19324d',\n};\n\nconst DARK_BLUE: Record<string, string> = {\n  BLUE_DARK_50: '#eef7ff',\n  BLUE_DARK_100: '#ddedff',\n  BLUE_DARK_200: '#bbdbff',\n  BLUE_DARK_300: '#98caff',\n  BLUE_DARK_400: '#76b8ff',\n  BLUE_DARK_500: BASE_DARK_COLOR.BLUE,\n  BLUE_DARK_600: '#4385cc',\n  BLUE_DARK_700: '#326499',\n  BLUE_DARK_800: '#224266',\n  BLUE_DARK_900: '#19324d',\n};\n\nconst LIGHT_GREEN: Record<string, string> = {\n  GREEN_LIGHT_50: '#e8f1ea',\n  GREEN_LIGHT_100: '#d2e4d6',\n  GREEN_LIGHT_200: '#a5c9ad',\n  GREEN_LIGHT_300: '#77ae85',\n  GREEN_LIGHT_400: '#4a935c',\n  GREEN_LIGHT_500: BASE_LIGHT_COLOR.GREEN,\n  GREEN_LIGHT_600: '#176029',\n  GREEN_LIGHT_700: '#11481f',\n  GREEN_LIGHT_800: '#0c3014',\n  GREEN_LIGHT_900: '#0e421b',\n};\n\nconst DARK_GREEN: Record<string, string> = {\n  GREEN_DARK_50: '#ebfcef',\n  GREEN_DARK_100: '#d6f8de',\n  GREEN_DARK_200: '#acf1bd',\n  GREEN_DARK_300: '#83e99d',\n  GREEN_DARK_400: '#59e27c',\n  GREEN_DARK_500: BASE_DARK_COLOR.GREEN,\n  GREEN_DARK_600: '#26af49',\n  GREEN_DARK_700: '#1d8337',\n  GREEN_DARK_800: '#135824',\n  GREEN_DARK_900: '#0e421b',\n};\n\nconst LIGHT_TURQUOISE: Record<string, string> = {\n  TURQUOISE_LIGHT_50: '#e5f1f3',\n  TURQUOISE_LIGHT_100: '#cce2e7',\n  TURQUOISE_LIGHT_200: '#99c6d0',\n  TURQUOISE_LIGHT_300: '#67a9b8',\n  TURQUOISE_LIGHT_400: '#348da1',\n  TURQUOISE_LIGHT_500: BASE_LIGHT_COLOR.TURQUOISE,\n  TURQUOISE_LIGHT_600: '#015a6e',\n  TURQUOISE_LIGHT_700: '#014352',\n  TURQUOISE_LIGHT_800: '#002d37',\n  TURQUOISE_LIGHT_900: '#1c454d',\n};\n\nconst DARK_TURQUOISE: Record<string, string> = {\n  TURQUOISE_DARK_50: '#effdff',\n  TURQUOISE_DARK_100: '#dffaff',\n  TURQUOISE_DARK_200: '#bef5ff',\n  TURQUOISE_DARK_300: '#9ef0ff',\n  TURQUOISE_DARK_400: '#7debff',\n  TURQUOISE_DARK_500: BASE_DARK_COLOR.TURQUOISE,\n  TURQUOISE_DARK_600: '#4Ab8cc',\n  TURQUOISE_DARK_700: '#388a99',\n  TURQUOISE_DARK_800: '#255c66',\n  TURQUOISE_DARK_900: '#1c454d',\n};\n\nconst LIGHT_PURPLE: Record<string, string> = {\n  PURPLE_LIGHT_50: '#f4edf7',\n  PURPLE_LIGHT_100: '#e7daee',\n  PURPLE_LIGHT_200: '#d0b4dd',\n  PURPLE_LIGHT_300: '#b88fcd',\n  PURPLE_LIGHT_400: '#a169bc',\n  PURPLE_LIGHT_500: BASE_LIGHT_COLOR.PURPLE,\n  PURPLE_LIGHT_600: '#6e3689',\n  PURPLE_LIGHT_700: '#522967',\n  PURPLE_LIGHT_800: '#371b44',\n  PURPLE_LIGHT_900: '#412b4d',\n};\n\nconst DARK_PURPLE: Record<string, string> = {\n  PURPLE_DARK_50: '#fcf4ff',\n  PURPLE_DARK_100: '#f8e9ff',\n  PURPLE_DARK_200: '#f0d2ff',\n  PURPLE_DARK_300: '#e9bcff',\n  PURPLE_DARK_400: '#e1a5ff',\n  PURPLE_DARK_500: BASE_DARK_COLOR.PURPLE,\n  PURPLE_DARK_600: '#ae72cc',\n  PURPLE_DARK_700: '#835699',\n  PURPLE_DARK_800: '#573966',\n  PURPLE_DARK_900: '#412b4d',\n};\n\nconst LIGHT_RED: Record<string, string> = {\n  RED_LIGHT_50: '#f9e6e8',\n  RED_LIGHT_100: '#f3ccd0',\n  RED_LIGHT_200: '#e799a1',\n  RED_LIGHT_300: '#da6671',\n  RED_LIGHT_400: '#ce3342',\n  RED_LIGHT_500: BASE_LIGHT_COLOR.RED,\n  RED_LIGHT_600: '#9b000f',\n  RED_LIGHT_700: '#74000b',\n  RED_LIGHT_800: '#4e0008',\n  RED_LIGHT_900: '#4d2422',\n};\n\nconst DARK_RED: Record<string, string> = {\n  RED_DARK_50: '#fff2f1',\n  RED_DARK_100: '#ffe4e2',\n  RED_DARK_200: '#ffc9c6',\n  RED_DARK_300: '#ffada9',\n  RED_DARK_400: '#ff928d',\n  RED_DARK_500: BASE_DARK_COLOR.RED,\n  RED_DARK_600: '#cc5f5a',\n  RED_DARK_700: '#994743',\n  RED_DARK_800: '#66302d',\n  RED_DARK_900: '#4d2422',\n};\n\nconst LIGHT_AMBER: Record<string, string> = {\n  AMBER_LIGHT_50: '#f6eee8',\n  AMBER_LIGHT_100: '#ecded0',\n  AMBER_LIGHT_200: '#dabda1',\n  AMBER_LIGHT_300: '#c79b73',\n  AMBER_LIGHT_400: '#b57A44',\n  AMBER_LIGHT_500: BASE_LIGHT_COLOR.AMBER,\n  AMBER_LIGHT_600: '#824711',\n  AMBER_LIGHT_700: '#61350d',\n  AMBER_LIGHT_800: '#412408',\n  AMBER_LIGHT_900: '#201204',\n};\n\nconst DARK_AMBER: Record<string, string> = {\n  AMBER_DARK_50: '#fffbea',\n  AMBER_DARK_100: '#fff6d4',\n  AMBER_DARK_200: '#ffeea8',\n  AMBER_DARK_300: '#ffe57d',\n  AMBER_DARK_400: '#ffdd51',\n  AMBER_DARK_500: BASE_DARK_COLOR.AMBER,\n  AMBER_DARK_600: '#ccaa1e',\n  AMBER_DARK_700: '#997f17',\n  AMBER_DARK_800: '#66550f',\n  AMBER_DARK_900: '#4d400b',\n};\n\nconst DARK: Record<string, string> = {\n  ...DARK_BLUE,\n  ...DARK_GREEN,\n  ...DARK_TURQUOISE,\n  ...DARK_PURPLE,\n  ...DARK_RED,\n  ...DARK_AMBER,\n};\n\nconst LIGHT: Record<string, string> = {\n  ...LIGHT_BLUE,\n  ...LIGHT_GREEN,\n  ...LIGHT_TURQUOISE,\n  ...LIGHT_PURPLE,\n  ...LIGHT_RED,\n  ...LIGHT_AMBER,\n};\n\nconst GRAYS: Record<string, string> = {\n  GRAY_10: '#fafafa',\n  GRAY_20: '#edeff0',\n  GRAY_30: '#e5e8ea',\n  GRAY_40: '#dce0e3',\n  GRAY_50: '#cbced1',\n  GRAY_60: '#9fa1a7',\n  GRAY_70: '#676b71',\n  GRAY_80: '#54585f',\n  GRAY_90: '#34373d',\n  GRAY_95: '#26272c',\n  GRAY_100: '#17181a',\n};\n\nexport const COLOR_V2: any = {\n  ...BASE_DARK_COLOR,\n  ...BASE_LIGHT_COLOR,\n  ...DARK,\n  ...LIGHT,\n  ...GRAYS,\n  BLACK: '#000',\n  WHITE: '#fff',\n};\n"],"mappings":"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"}

package/src/Identity/colors-v2.md

@@ -1,111 +0,0 @@
-```js
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
-import {COLOR, Container, H1, H2, H3, Line} from '@wireapp/react-ui-kit';
-import Color from 'color';
-import {COLOR_V2 as Colors, BASE_LIGHT_COLOR, BASE_DARK_COLOR} from './colors-v2';
-
-const colorElementStyle = props => ({
-  '&::after': {
-    alignItems: 'center',
-    color: '#fff',
-    content: 'attr(data-text)',
-    display: 'flex',
-    fontSize: '10px',
-    fontWeight: 600,
-    height: '100%',
-    justifyContent: 'center',
-    opacity: 0,
-    position: 'absolute',
-    textAlign: 'center',
-    textShadow: '#000 0 0 2px',
-    transform: 'scale(1.2)',
-    transition: 'all 0.2s ease-in-out',
-    whiteSpace: 'pre-wrap',
-    width: '100%',
-    zIndex: 1,
-  },
-  '&:hover::after': {
-    opacity: 1,
-    transform: 'scale(1)',
-  },
-  cursor: 'pointer',
-  backgroundColor: props.backgroundColor,
-  border: '1px solid black',
-  borderRadius: '40px',
-  display: 'inline-block',
-  height: '80px',
-  position: 'relative',
-  width: '80px',
-});
-
-const ColorElement = ({name, backgroundColor}) => {
-  return (
-    <div
-      onClick={() => navigator.clipboard.writeText(backgroundColor)}
-      css={colorElementStyle({backgroundColor})}
-      data-text={`${name}\n${backgroundColor}`}
-    />
-  );
-};
-
-const filterAndRenderColors = colorToFilter =>
-  Object.entries(Colors)
-    .filter(([name]) => name.includes(colorToFilter))
-    .map(([name, color]) => <ColorElement key={name} name={name} backgroundColor={color} />);
-
-<Container>
-  <H2>Light UI</H2>
-  <H3>Main Accent Colors</H3>
-
-  {Object.entries(BASE_LIGHT_COLOR).map(([name, color]) => (
-    <ColorElement key={name} name={name} backgroundColor={color} />
-  ))}
-
-  <H3>Blue</H3>
-  {filterAndRenderColors('BLUE_LIGHT')}
-
-  <H3>Green</H3>
-  {filterAndRenderColors('GREEN_LIGHT')}
-
-  <H3>Petrol</H3>
-  {filterAndRenderColors('PETROL_LIGHT')}
-
-  <H3>Purple</H3>
-  {filterAndRenderColors('PURPLE_LIGHT')}
-
-  <H3>Red</H3>
-  {filterAndRenderColors('RED_LIGHT')}
-
-  <H3>Amber</H3>
-  {filterAndRenderColors('AMBER_LIGHT')}
-
-  <H2>Dark UI</H2>
-  <H3>Main Accent Colors</H3>
-
-  {Object.entries(BASE_DARK_COLOR).map(([name, color]) => (
-    <ColorElement key={name} name={name} backgroundColor={color} />
-  ))}
-
-  <H3>Blue</H3>
-  {filterAndRenderColors('BLUE_DARK')}
-
-  <H3>Green</H3>
-  {filterAndRenderColors('GREEN_DARK')}
-
-  <H3>Petrol</H3>
-  {filterAndRenderColors('PETROL_DARK')}
-
-  <H3>Purple</H3>
-  {filterAndRenderColors('PURPLE_DARK')}
-
-  <H3>Red</H3>
-  {filterAndRenderColors('RED_DARK')}
-
-  <H3>Amber</H3>
-  {filterAndRenderColors('AMBER_DARK')}
-
-  <H2>Grays</H2>
-  {filterAndRenderColors('GRAY')}
-</Container>;
-```