update emotion

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 packages/*/build
 flow-typed
+es

.eslintrc.yml

@@ -12,7 +12,8 @@ globals:
 
 plugins: [
   react-hooks,
-  emotion
+  emotion,
+  "@emotion/",
 ]
 
 rules:
@@ -50,16 +51,17 @@ rules:
   eol-last:  ['warn', 'always']
 
   #badcode
-  no-unused-vars: ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }]
+  no-unused-vars: ['warn', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }]
   no-multi-assign: 'error'
   no-extra-semi: 'error'
   semi-style: 'error'
   no-unneeded-ternary: 'error'
   callback-return: 'error'
-  import/no-duplicates: 'error'
+  import/no-duplicates: 'warn'
+  import/first: 'warn'
   no-useless-computed-key: 'error'
-  no-var: 'error'
-  init-declarations: ['error', 'always']
+  no-var: 'warn'
+  init-declarations: ['warn', 'always']
   no-delete-var: 'error'
   no-restricted-globals: ['error']
   no-use-before-define: 'error'
@@ -69,10 +71,9 @@ rules:
   max-len: ['warn', { 'code': 150, 'ignoreComments': true, 'ignoreStrings': true, 'ignoreTemplateLiterals': true }]
 
   #es6
-  no-const-assign: 'error'
+  no-const-assign: 'warn'
   object-shorthand: 'error'
   prefer-arrow-callback: 'error'
-  prefer-const: 'error'
   prefer-destructuring: ['error', { 'object': true }]
   prefer-numeric-literals: 'error'
   prefer-rest-params: 'warn'
@@ -107,7 +108,6 @@ rules:
   react/jsx-no-duplicate-props: 'error'
   react/jsx-no-undef: ['warn', { allowGlobals: true }]
   react/jsx-pascal-case: 'warn'
-  react/jsx-tag-spacing: ['warn', 'always' ]
   react/jsx-uses-react: 'warn'
   react/jsx-uses-vars: 'warn'
   react/jsx-wrap-multilines: 'warn'
@@ -121,3 +121,6 @@ rules:
   emotion/no-vanilla: "error"
   emotion/import-from-emotion: "error"
   emotion/styled-import: "error"
+
+  #emotion plugin
+  "@emotion/pkg-renaming": "error"

__mocks__/style-mock.js

@@ -1 +1 @@
-module.exports = {};
+module.exports = {};

e2e/setup/setup.js

@@ -1 +0,0 @@
-

e2e/setup/setupTestFramework.js

@@ -10,4 +10,4 @@ if (E2E_DEBUG === 'true') {
   toMatchImageSnapshot = () => ({ pass: true });
 }
 
-expect.extend({ toMatchImageSnapshot });
+expect.extend({ toMatchImageSnapshot });

e2e/setup/testEnvironment.js

@@ -34,7 +34,7 @@ class PuppeteerEnvironment extends NodeEnvironment {
         height: 960,
       },
     });
-    
+
     this.global.__BROWSER_CONTEXT__ = await this.global.__BROWSER__.createIncognitoBrowserContext();
   }
 

es/BoostProvider.js

@@ -5,32 +5,25 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import { jsx as ___EmotionJSX } from "@emotion/core";
 import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { IconsProvider } from './components/Icon/IconsProvider';
 import { ModalProvider } from './components/Modal/ModalProvider';
 import { createTheme, Globals } from './theme';
-
-var BoostProvider =
-/*#__PURE__*/
-function (_React$Component) {
+var BoostProvider = /*#__PURE__*/function (_React$Component) {
   _inherits(BoostProvider, _React$Component);
-
   function BoostProvider(props) {
     var _this;
-
     _classCallCheck(this, BoostProvider);
-
     _this = _possibleConstructorReturn(this, _getPrototypeOf(BoostProvider).call(this, props));
     _this.theme = props.theme || createTheme();
     return _this;
   }
-
   _createClass(BoostProvider, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          children = _this$props.children,
-          icons = _this$props.icons;
+        children = _this$props.children,
+        icons = _this$props.icons;
       return ___EmotionJSX(ThemeProvider, {
         theme: this.theme
       }, ___EmotionJSX(Globals, {
@@ -40,8 +33,6 @@ function (_React$Component) {
       }, children)));
     }
   }]);
-
   return BoostProvider;
 }(React.Component);
-
 export { BoostProvider };

es/BoostProvider.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { IconsProvider } from './components/Icon/IconsProvider';
 import { ModalProvider } from './components/Modal/ModalProvider';
 import { createTheme, type Theme, Globals } from './theme';

es/EightBaseBoostProvider.__deprecated.js

@@ -6,17 +6,12 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import { jsx as ___EmotionJSX } from "@emotion/core";
 import React from 'react';
 import { BoostProvider } from './BoostProvider';
-export var EightBaseBoostProvider =
-/*#__PURE__*/
-function (_React$Component) {
+export var EightBaseBoostProvider = /*#__PURE__*/function (_React$Component) {
   _inherits(EightBaseBoostProvider, _React$Component);
-
   function EightBaseBoostProvider() {
     _classCallCheck(this, EightBaseBoostProvider);
-
     return _possibleConstructorReturn(this, _getPrototypeOf(EightBaseBoostProvider).apply(this, arguments));
   }
-
   _createClass(EightBaseBoostProvider, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -29,6 +24,5 @@ function (_React$Component) {
       return ___EmotionJSX(BoostProvider, this.props);
     }
   }]);
-
   return EightBaseBoostProvider;
 }(React.Component);

es/common/Tag/Tag.js

@@ -9,45 +9,33 @@ import React, { PureComponent } from 'react';
 import pickBy from 'lodash/pickBy';
 var COLLECTED_PROPS = ['accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'alt', 'aria-busy', 'async', 'autoComplete', 'autoFocus', 'autoPlay', 'capture', 'cellPadding', 'cellSpacing', 'challenge', 'charSet', 'checked', 'children', 'cite', 'classID', 'className', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'controlsList', 'coords', 'crossOrigin', 'data', 'dateTime', 'default', 'defer', 'dir', 'disabled', 'download', 'draggable', 'encType', 'for', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'icon', 'id', 'inputMode', 'integrity', 'is', 'keyParams', 'keyType', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'nonce', 'noValidate', 'onBlur', 'onChange', 'onClick', 'onDoubleClick', 'onFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onScroll', 'onSubmit', 'open', 'optimum', 'options', 'pattern', 'placeholder', 'poster', 'preload', 'profile', 'radioGroup', 'readOnly', 'rel', 'required', 'reversed', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'tabIndex', 'target', 'title', 'to', 'type', 'useMap', 'value', 'width', 'wmode', 'wrap'];
 var HTML_TAGS = ['div', 'span', 'button', 'a', 'p', 'input', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'label', 'nav', 'img', 'pre', 'textarea'];
-
 var collectProps = function collectProps(props) {
   return pickBy(props, function (value, name) {
     return COLLECTED_PROPS.indexOf(name) !== -1 || /^data-/.test(name);
   });
 };
-
-var Tag =
-/*#__PURE__*/
-function (_PureComponent) {
+var Tag = /*#__PURE__*/function (_PureComponent) {
   _inherits(Tag, _PureComponent);
-
   function Tag() {
     _classCallCheck(this, Tag);
-
     return _possibleConstructorReturn(this, _getPrototypeOf(Tag).apply(this, arguments));
   }
-
   _createClass(Tag, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          TagComponent = _this$props.tagName,
-          modifiers = _this$props.modifiers,
-          props = _objectWithoutProperties(_this$props, ["tagName", "modifiers"]);
-
+        TagComponent = _this$props.tagName,
+        modifiers = _this$props.modifiers,
+        props = _objectWithoutProperties(_this$props, ["tagName", "modifiers"]);
       var collectedProps = HTML_TAGS.indexOf(TagComponent) === -1 ? props : collectProps(props);
-
       if (HTML_TAGS.indexOf(TagComponent) !== -1) {
         collectedProps.ref = props.insideRef;
       }
-
       return ___EmotionJSX(TagComponent, collectedProps);
     }
   }]);
-
   return Tag;
 }(PureComponent);
-
 Tag.defaultProps = {
   tagName: 'div'
 };

es/components/AsyncContent/AsyncContent.js

@@ -2,17 +2,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import { jsx as ___EmotionJSX } from "@emotion/core";
 import React from 'react';
 import { Loader } from '../Loader';
-
 var AsyncContent = function AsyncContent(_ref) {
   var loading = _ref.loading,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["loading", "children"]);
-
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, ["loading", "children"]);
   if (loading) {
     return ___EmotionJSX(Loader, props);
   }
-
   return children;
 };
-
 export { AsyncContent };

es/components/Avatar/Avatar.js

@@ -13,23 +13,20 @@ var CAMERA_ICON_SIZE = {
   xl: '24px',
   xxl: '24px'
 };
-
 var getInitials = function getInitials(firstName, lastName) {
   if (firstName && lastName) return firstName.slice(0, 1) + lastName.slice(0, 1);
   if (firstName && !lastName) return firstName.slice(0, 1);
   if (!firstName && lastName) return lastName.slice(0, 1);
   return DEFAULT_INITIALS;
 };
-
 function Avatar(_ref) {
   var src = _ref.src,
-      firstName = _ref.firstName,
-      lastName = _ref.lastName,
-      onPick = _ref.onPick,
-      pickLabel = _ref.pickLabel,
-      pickVariant = _ref.pickVariant,
-      rest = _objectWithoutProperties(_ref, ["src", "firstName", "lastName", "onPick", "pickLabel", "pickVariant"]);
-
+    firstName = _ref.firstName,
+    lastName = _ref.lastName,
+    onPick = _ref.onPick,
+    pickLabel = _ref.pickLabel,
+    pickVariant = _ref.pickVariant,
+    rest = _objectWithoutProperties(_ref, ["src", "firstName", "lastName", "onPick", "pickLabel", "pickVariant"]);
   var initials = getInitials(firstName, lastName);
   return ___EmotionJSX(AvatarTag, _extends({
     transparent: !!src,
@@ -56,7 +53,6 @@ function Avatar(_ref) {
     customSize: CAMERA_ICON_SIZE[rest.size || 'lg']
   }), ___EmotionJSX("div", null, pickLabel))));
 }
-
 Avatar.defaultProps = {
   size: 'lg',
   variant: 'circle',

es/components/Avatar/Avatar.stories.js

@@ -1,6 +1,6 @@
 import { jsx as ___EmotionJSX } from "@emotion/core";
-
 /* eslint-disable no-alert */
+
 import React from 'react';
 import { Avatar, Row, Column } from '../../';
 export default {