FIX

.storybook/.babelrc

@@ -5,7 +5,7 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "emotion",
+    "@emotion",
     ["react-docgen", {}, "react-docgen-storybook"]
   ]
 }

.storybook/addons.js

@@ -1,4 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
-import "@storybook/addon-info";
 import '@storybook/addon-knobs/register';

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "deepscan.enable": true
+}

package.json

@@ -2,10 +2,88 @@
   "name": "push-ui",
   "version": "1.0.7",
   "description": "",
+  "homepage": "https://github.com/wearepush/push-ui#readme",
+  "bugs": {
+    "url": "https://github.com/wearepush/push-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wearepush/push-ui.git"
+  },
+  "license": "MIT",
+  "author": "wearepush",
   "main": "./lib/index.js",
+  "files": [
+    "README.md",
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run build:lib && npm run build:umd && npm run build:umd:min",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook",
+    "build:lib": "babel src --out-dir lib --ignore src/**/__tests__,src/**/__mocks__,src/**/*.stories.js",
+    "build:umd": "cross-env NODE_ENV=development webpack src/index.js -o dist/index.js",
+    "build:umd:min": "cross-env NODE_ENV=production webpack src/index.js -o dist/index.min.js",
+    "clean": "rimraf $(cd src; ls) dist lib",
+    "heroku-postbuild": "npm run build-storybook",
+    "lint": "eslint -c .eslintrc src",
+    "prepublishOnly": "npm run test:cov && npm run clean && npm run build",
+    "server": "node server.js",
+    "start": "start-storybook -p 6006",
+    "test": "cross-env NODE_ENV=test jest --runInBand",
+    "test:cov": "npm run test -- --coverage",
+    "test:watch": "npm test -- --watch",
+    "validate": " npm run test:cov && npm run clean && npm run build && npm run lint",
+    "preversion": "npm run lint",
+    "postversion": "git push && git push --tags"
+  },
+  "jest": {
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "src/**/*.js",
+      "!src/**/*.stories.js",
+      "!src/**/*.style.js",
+      "!src/**/*.theme.js",
+      "!src/**/__tests__/**/*.js"
+    ],
+    "coverageDirectory": "./coverage/",
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ],
+    "coverageReporters": [
+      "text",
+      "lcov",
+      "html"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "moduleFileExtensions": [
+      "jsx",
+      "js",
+      "json"
+    ],
+    "moduleNameMapper": {
+      "^.*\\.(css|scss)$": "identity-obj-proxy"
+    },
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "setupFiles": [
+      "<rootDir>/scripts/enzyme.config.js"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  },
   "dependencies": {
     "@emotion/core": "^11.0.0-next.8",
+    "@emotion/react": "^11.0.0-next.11",
     "@emotion/styled": "^11.0.0-next.8",
+    "@emotion/styled-base": "^11.0.0-next.3",
     "classnames": "^2.2.6",
     "express": "^4.17.1",
     "prop-types": "^15.7.2",
@@ -23,17 +101,16 @@
     "@babel/core": "^7.8.4",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
-    "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-info": "^5.3.13",
-    "@storybook/addon-knobs": "^5.3.13",
-    "@storybook/addon-links": "^5.3.13",
-    "@storybook/react": "^5.3.13",
+    "@storybook/addon-actions": "6.0.0-alpha.10",
+    "@storybook/addon-knobs": "6.0.0-alpha.10",
+    "@storybook/addon-links": "6.0.0-alpha.10",
+    "@storybook/react": "6.0.0-alpha.10",
     "autoprefixer": "^9.7.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
     "babel-plugin-css-modules-transform": "^1.6.2",
-    "babel-plugin-emotion": "^10.0.27",
+    "@emotion/babel-plugin": "^11.0.0-next.11",
     "babel-plugin-react-docgen": "^4.1.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -57,41 +134,9 @@
     "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11"
   },
-  "scripts": {
-    "start": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build": "npm run clean && npm run build:lib && npm run build:umd && npm run build:umd:min",
-    "build:lib": "babel src --out-dir lib --ignore src/**/__tests__,src/**/__mocks__,src/**/*.stories.js",
-    "build:umd": "cross-env NODE_ENV=development webpack src/index.js -o dist/index.js",
-    "build:umd:min": "cross-env NODE_ENV=production webpack src/index.js -o dist/index.min.js",
-    "heroku-postbuild": "npm run build-storybook",
-    "server": "node server.js",
-    "clean": "rimraf $(cd src; ls) dist lib",
-    "prepublishOnly": "npm run test:cov && npm run clean && npm run build",
-    "preversion": "npm run lint",
-    "postversion": "git push && git push --tags",
-    "validate": " npm run test:cov && npm run clean && npm run build && npm run lint",
-    "test": "cross-env NODE_ENV=test jest --runInBand",
-    "test:watch": "npm test -- --watch",
-    "test:cov": "npm run test -- --coverage",
-    "lint": "eslint -c .eslintrc src"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/wearepush/push-ui.git"
-  },
-  "author": "wearepush",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/wearepush/push-ui/issues"
+  "publishConfig": {
+    "access": "public"
   },
-  "homepage": "https://github.com/wearepush/push-ui#readme",
-  "files": [
-    "README.md",
-    "lib",
-    "dist"
-  ],
-  "npmName": "push-ui",
   "npmFileMap": [
     {
       "basePath": "/dist/",
@@ -100,48 +145,5 @@
       ]
     }
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.js",
-      "!src/**/*.stories.js",
-      "!src/**/*.style.js",
-      "!src/**/*.theme.js",
-      "!src/**/__tests__/**/*.js"
-    ],
-    "coverageReporters": [
-      "text",
-      "lcov",
-      "html"
-    ],
-    "moduleFileExtensions": [
-      "jsx",
-      "js",
-      "json"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/dist/"
-    ],
-    "moduleNameMapper": {
-      "^.*\\.(css|scss)$": "identity-obj-proxy"
-    },
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "testEnvironment": "jsdom",
-    "coverageDirectory": "./coverage/",
-    "collectCoverage": true,
-    "setupFiles": [
-      "<rootDir>/scripts/enzyme.config.js"
-    ],
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest"
-    }
-  }
+  "npmName": "push-ui"
 }

src/components/buttons/Button/Button.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { bool, func, node, number, oneOf, oneOfType, object, string } from "prop-types";
 import cx from "classnames";
-import { withTheme } from "@emotion/core";
+import { withTheme } from "@emotion/react";
 import { StyledButton, StyledLink } from "./Button.style";
 import { createComponentTheme } from "../../styles/_helpers/themeHelpers";
 

src/components/buttons/Button/Button.style.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { css } from "@emotion/core";
+import { css } from "@emotion/react";
 import { variant as useVariant } from "styled-system";
 
 const colorVariant = useVariant({

src/components/buttons/Button/index.stories.js

@@ -1,14 +1,10 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { withKnobs, select, boolean } from "@storybook/addon-knobs";
-import { withInfo } from "@storybook/addon-info";
 
-import Button, { ButtonComponent } from "./Button";
+import Button from "./Button";
 
 storiesOf("buttons/Button", module)
-  .addDecorator(withInfo({
-    propTables: [ButtonComponent],
-  }))
   .addDecorator(withKnobs)
   .add("default", () => (
     <Button

src/components/forms/FormCheckbox/index.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { withInfo } from "@storybook/addon-info";
 
 import withForm from "./../__mocks__/FormDecorator";
 import validate from "./__mocks__/validateCheckbox";
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf("forms/FormCheckbox", module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add("default", () => (
     <FormCheckbox placeholder="Remember me" name="remember" />

src/components/forms/FormDatePicker/index.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import withForm from './../__mocks__/FormDecorator';
 import { FormDatePicker } from '../../index';
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf('forms/FormDatePicker', module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add('default', () =>
     <FormDatePicker

src/components/forms/FormRadio/index.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import withForm from './../__mocks__/FormDecorator';
 import validate from './__mocks__/validateRadio';
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf('forms/FormRadio', module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add('default', () =>
     <FormRadio

src/components/forms/FormSelect/index.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import withForm from './../__mocks__/FormDecorator';
 import validate from './__mocks__/validateSelect';
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf('forms/FormSelect', module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add('default', () =>
     <FormSelect

src/components/forms/FormTextArea/index.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import withForm from './../__mocks__/FormDecorator';
 import validate from './__mocks__/validateTextArea';
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf('forms/FormTextArea', module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add('default', () =>
     <FormTextArea

src/components/forms/FormTextField/index.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import withForm from './../__mocks__/FormDecorator';
 import validate from './__mocks__/validateTextField';
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf('forms/FormTextField', module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add('default', () =>
     <Field

src/components/forms/FormTextMask/index.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import withForm from './../__mocks__/FormDecorator';
 import validate from './__mocks__/validateTextMask';
@@ -12,7 +11,6 @@ const form = {
 };
 
 storiesOf('forms/FormTextMask', module)
-  .addDecorator(withInfo)
   .addDecorator(withForm({ form }))
   .add('default', () =>
     <FormTextMask

src/components/inputs/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ import {
   string,
   node
 } from "prop-types";
-import { withTheme } from "@emotion/core";
+import { withTheme } from "@emotion/react";
 import cx from "classnames";
 import {
   StyledCheckbox,

src/components/inputs/Checkbox/index.stories.js

@@ -3,12 +3,10 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { withKnobs, boolean, select } from "@storybook/addon-knobs";
-import { withInfo } from "@storybook/addon-info";
 
 import Checkbox from "./Checkbox";
 
 storiesOf("inputs/Checkbox", module)
-  .addDecorator(withInfo)
   .addDecorator(withKnobs)
   .add("default", () => (
     <Checkbox

src/components/inputs/DatePicker/index.stories.js

@@ -2,12 +2,10 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import DatePicker from './DatePicker';
 
 storiesOf('inputs/DatePicker', module)
-  .addDecorator(withInfo)
   .addDecorator(withKnobs)
   .add('default', () =>
     <DatePicker