feat: Update, cleanup and move necessary dependencies to peerDependencies

.babelrc

@@ -50,8 +50,38 @@
         ]
       ]
     },
+    "static": {
+      "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "lodash",
+        "inline-react-svg",
+        "dev-expression",
+        "react-docgen"
+      ],
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "loose": true
+          }
+        ],
+        "@babel/preset-react",
+        [
+          "@emotion/babel-preset-css-prop",
+          {
+            "autoLabel": false,
+            "labelFormat": "[filename]--[local]"
+          }
+        ]
+      ]
+    },
     "test": {
-      "plugins": ["@babel/plugin-proposal-class-properties", "lodash"],
+      "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "lodash",
+        "react-docgen",
+        "macros"
+      ],
       "presets": [
         [
           "@babel/preset-env",

.cz-config.js

@@ -32,7 +32,8 @@ module.exports = {
     { name: 'utils' },
     { name: 'docs' },
     { name: 'theme' },
-    { name: 'configs' }
+    { name: 'configs' },
+    { name: 'scripts' }
   ],
 
   allowCustomScopes: true,

.github/CONTRIBUTING.md

@@ -14,14 +14,14 @@ for bugfixes, minor versions for new features, and major versions for
 breaking changes. Our [release process](#Releases) is automated using [semantic-release](https://github.com/semantic-release/semantic-release)
 which adheres to the [conventional commit message format](https://www.conventionalcommits.org).
 
-As a result, our changelog is pretty tidy. You can [read our changelog on GitHub](https://github.com/sumup/circuit-ui/releases).
+As a result, our changelog is pretty tidy. You can [read our changelog on GitHub](https://github.com/sumup-oss/circuit-ui/releases).
 
 ## Bugs
 
-We use the [GitHub issues](https://github.com/sumup/circuit-ui/issues) to track
+We use the [GitHub issues](https://github.com/sumup-oss/circuit-ui/issues) to track
 all our bugs and feature requests.
 
-When [submitting a new issue](https://github.com/sumup/circuit-ui/issues/new),
+When [submitting a new issue](https://github.com/sumup-oss/circuit-ui/issues/new),
 please check that it hasn't already been raised by someone else. We've provided
 a template for new issues which will help you structure your issue to ensure it
 can be picked up and actioned easily.
@@ -31,7 +31,7 @@ experiencing and what you'd expect to experience.
 
 ## Proposing a change
 
-![Component pattern addition](/component-addition-flowchart.png)
+![Component pattern addition](https://circuit.sumup.com/images/component-addition-flowchart.png)
 
 ### Creating or changing a component
 
@@ -105,7 +105,7 @@ yarn fix
 
 While making changes to Circuit UI, you might want to test them in your
 application. You can do so by [linking the two projects](https://yarnpkg.com/lang/en/docs/cli/link/)
-locally. 
+locally.
 
 Inside the Circuit UI project folder, run:
 
@@ -132,7 +132,7 @@ no longer needed.
    the component in use, and proactively communicate with the teams responsible
    for those features. Give your reasoning about _why_ you believe the feature
    should be deprecated, and discuss the impact on the teams that rely on
-   that feature today. 
+   that feature today.
 2. **Decide on a timeline.** Based on the feedback you receive, come up with
    a timeline, including the people who are affected by the change. Generally
    speaking, 3-6 months is ample time. Document the planned date of removal
@@ -155,12 +155,12 @@ to the new component. For example, changing the SideNav component.
 
 ## Releases
 
-We have a couple of special branches that are automatically released whenever 
+We have a couple of special branches that are automatically released whenever
 you merge code into them.
 
 - `beta` — This is a branch you can use to test your changes integrated with
   other branches before it is ready to be PR'd to `canary`. It is also useful
-  if you need to deploy the changes somewhere to test them. `beta` is a 
+  if you need to deploy the changes somewhere to test them. `beta` is a
   throw-away branch that can be recreated from `canary` at any time.
 - `canary` - The step before `master`. This is where we prepare a group of
   changes for the next release. Code on `canary` should be tested and stable.
@@ -185,14 +185,13 @@ To install the most recent version from a release channel, run:
 yarn add @sumup/circuit-ui@<release-channel>
 ```
 
-
 ### Troubleshooting
 
-- **The release failed.** This can happen if you merge multiple times to a 
+- **The release failed.** This can happen if you merge multiple times to a
   release branch in short succession. The first CI job will fail because the
-  branch on GitHub is ahead of the branch that was checked out in CI. 
+  branch on GitHub is ahead of the branch that was checked out in CI.
   `semantic-release` will open an issue to alert you of the failure. You can
-  simply wait for the last CI job to finish. It should succeed and will 
+  simply wait for the last CI job to finish. It should succeed and will
   automatically close the issue.
 - **My commit doesn't show in the release notes.** Make sure that your commit
   message follows the [conventional commit format](https://www.conventionalcommits.org).

.storybook/.babelrc

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "lodash",
+    "inline-react-svg",
+    "macros"
+  ],
+  "presets": [
+    ["@babel/preset-env", { "loose": true }],
+    "@babel/preset-react",
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "autoLabel": false,
+        "labelFormat": "[filename]--[local]"
+      }
+    ]
+  ]
+}

.storybook/addons.js

@@ -1,6 +1,7 @@
-import '@storybook/addon-options/register';
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-jest/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-viewport/register';

docs/content/styles/components/BorderRadius.js → .storybook/components/BorderRadius.js

@@ -17,8 +17,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import Text from '../../../../src/components/Text';
-import { theme as themes } from '../../../../src';
+
+import { theme as themes, Text } from '../../src';
 
 const Box = styled('div')`
   ${({ theme, size }) => css`

docs/content/styles/components/BorderWidth.js → .storybook/components/BorderWidth.js

@@ -18,8 +18,8 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
-import Text from '../../../../src/components/Text';
-import { theme as themes } from '../../../../src';
+
+import { theme as themes, Text } from '../../src';
 
 const Box = styled('div')`
   ${({ theme, size }) => css`

docs/utils/Statuses.js → .storybook/components/Grid.js

@@ -13,25 +13,37 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import Badge from '../../src/components/Badge';
-import Text from '../../src/components/Text';
 
-const Stable = () => <Badge color={Badge.SUCCESS}>Stable</Badge>;
+import {
+  Grid as OriginalGrid,
+  Row as OriginalRow,
+  Col as OriginalCol
+} from '../../src';
 
-const Deprecated = () => <Badge color={Badge.DANGER}>Deprecated</Badge>;
-
-const InReview = () => <Badge color={Badge.WARNING}>In review</Badge>;
-
-const Experimental = () => <Badge color={Badge.NEUTRAL}>Experimental</Badge>;
+export const Grid = styled(OriginalGrid)`
+  ${({ theme }) => css`
+    background-color: ${theme.colors.n100};
+  `};
+`;
 
-const Description = styled(Text)`
+export const Row = styled(OriginalRow)`
   ${({ theme }) => css`
-    margin-left: ${theme.spacings.byte};
-    display: inline-block;
+    color: ${theme.colors.white};
   `};
 `;
 
-export default { Stable, InReview, Deprecated, Experimental, Description };
+export const Col = styled(OriginalCol)`
+  ${({ theme }) => css`
+    &:nth-of-type(n) {
+      background-color: ${theme.colors.b500};
+    }
+
+    &:nth-of-type(2n) {
+      background-color: ${theme.colors.b300};
+    }
+    color: ${theme.colors.white};
+    text-align: center;
+  `};
+`;

docs/content/styles/components/IconSize.js → .storybook/components/IconSize.js

@@ -18,8 +18,8 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
-import Text from '../../../../src/components/Text';
-import { theme as themes } from '../../../../src';
+
+import { theme as themes, Text } from '../../src';
 
 const Box = styled('div')`
   ${({ theme, size }) => css`

.storybook/components/Link.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+import { isStoryName, splitStoryName } from '../util/story-helpers';
+
+import { Text } from '../../src';
+
+const Link = ({ children, href, size, ...props }) => {
+  const storyName = decodeURIComponent(href);
+
+  if (isStoryName(storyName)) {
+    const [group, component, name = 'page'] = splitStoryName(storyName);
+    const kind = `${group}|${component}`;
+    return (
+      <LinkTo {...props} kind={kind} story={name}>
+        {children}
+      </LinkTo>
+    );
+  }
+
+  return (
+    <Text as="a" href={href} target="_blank" size={size} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+export default Link;

.storybook/components/MediaQueriesTable.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { withTheme, ThemeProvider } from 'emotion-theming';
+
+import { theme as themes, Table } from '../../src';
+
+const HEADERS = ['Breakpoint name', 'Query'];
+
+const renderBreakpoint = bp => {
+  if (typeof bp === 'number') {
+    return `(min-width: ${bp.toString()}px)`;
+  }
+
+  return bp;
+};
+
+const TableWrapper = withTheme(({ theme }) => (
+  <Table
+    headers={HEADERS}
+    rows={Object.keys(theme.breakpoints).map(bp => [
+      bp,
+      renderBreakpoint(theme.breakpoints[bp])
+    ])}
+  />
+));
+
+const MediaQueriesTable = () => (
+  <ThemeProvider theme={themes.circuit}>
+    <TableWrapper />
+  </ThemeProvider>
+);
+
+export default MediaQueriesTable;

docs/utils/Wrapper.js → .storybook/components/Preview.js

@@ -14,32 +14,16 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Preview as StorybookPreview } from '@storybook/addon-docs/blocks';
 import { ThemeProvider } from 'emotion-theming';
-import { Global, css } from '@emotion/core';
-import { BaseStyles, theme as themes } from '../../src/index';
 
-const styles = css`
-  div[class^='Sidebar__Footer'] {
-    display: none;
-  }
+import { theme as themes } from '../../src';
 
-  b,
-  strong {
-    font-weight: 700;
-  }
-`;
-
-const Wrapper = props => (
-  <ThemeProvider theme={themes.circuit}>
-    <BaseStyles />
-    <Global styles={styles} />
-    {props.children}
-  </ThemeProvider>
+// eslint-disable-next-line react/prop-types
+const Preview = ({ children, ...props }) => (
+  <StorybookPreview {...props}>
+    <ThemeProvider theme={themes.circuit}>{children}</ThemeProvider>
+  </StorybookPreview>
 );
 
-Wrapper.propTypes = {
-  children: PropTypes.children
-};
-
-export default Wrapper;
+export default Preview;

docs/content/styles/components/Spacing.js → .storybook/components/Spacing.js

@@ -18,8 +18,8 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
-import Text from '../../../../src/components/Text';
-import { theme as themes } from '../../../../src';
+
+import { theme as themes, Text } from '../../src';
 
 const Box = styled('div')`
   ${({ theme, spacingName }) => css`