diff --git a/CHANGELOG.md b/CHANGELOG.md
index 136bedd23de..13873380eda 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,50 @@
+# 4.0.0-alpha.14
+
+2018-July-11
+
+#### Bug Fixes
+
+-   Upgrade universal-dotenv to fix core-js dependency [#3874](https://github.com/storybooks/storybook/pull/3874)
+
+# 4.0.0-alpha.13
+
+2018-July-09
+
+#### Features
+
+-   Refactor addon-jest to use a parameter-based pattern [#3678](https://github.com/storybooks/storybook/pull/3678)
+
+#### Bug Fixes
+
+-   Upgrade universal-dotenv to fix babel-runtime [#3863](https://github.com/storybooks/storybook/pull/3863)
+
+#### Maintenance
+
+-   Added a test for parameter combination [#3844](https://github.com/storybooks/storybook/pull/3844)
+
+# 4.0.0-alpha.12
+
+2018-July-03
+
+#### Bug Fixes
+
+-   Fix non-polyfilled themed UI components [#3829](https://github.com/storybooks/storybook/pull/3829)
+
+# 4.0.0-alpha.11
+
+2018-July-02
+
+#### Features
+
+-   Storybook UI theming [#3628](https://github.com/storybooks/storybook/pull/3628)
+-   Replaced 'dotenv-webpack' with 'universal-dotenv' to support multiple dot env files (like CRA) [#3744](https://github.com/storybooks/storybook/pull/3744)
+-   Support other type of webpack configs [#3785](https://github.com/storybooks/storybook/pull/3785)
+
+#### Bug Fixes
+
+-   Marko: fix welcome component [#3796](https://github.com/storybooks/storybook/pull/3796)
+-   Addon-a11y: Run analysis on demand [#3690](https://github.com/storybooks/storybook/pull/3690)
+
 # 4.0.0-alpha.10
 
 2018-June-21
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 975d3d50656..267258d62b8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -71,8 +71,15 @@ Before these tests are ran, the project must be bootstrapped with the React Nati
 
 `yarn test --image`
 
-This option executes tests from `<rootdir>/examples/cra-kitchen-sink`
-In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date.
+This option executes tests from `<rootdir>/examples/official-storybook`
+In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date : 
+
+```javascript
+cd examples/official-storybook
+yarn build-storybook
+cd ../..
+yarn test --image
+```
 
 Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. (just like integration tests)
 
@@ -331,7 +338,7 @@ yarn bootstrap --reset --core
 
 ```sh
 # publish and tag the release
-npm run publish -- --concurrency 1 --npm-tag=alpha --force-publish=*
+npm run publish:alpha
 
 # update the release page
 open https://github.com/storybooks/storybook/releases
@@ -355,7 +362,7 @@ git commit -m "Changelog for vX.Y"
 yarn bootstrap --reset --core
 
 # publish and tag the release
-npm run publish -- --concurrency 1 --force-publish=*
+npm run publish
 
 # update the release page
 open https://github.com/storybooks/storybook/releases
diff --git a/addons/a11y/README.md b/addons/a11y/README.md
index c150afd5264..df2c841e0f4 100755
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@@ -67,6 +67,24 @@ storiesOf('button', module)
   ));
 ```
 
+If you want to add a11y globally to your stories, you can use the global Storybook decorator in your *.storybook/config.js* file:
+
+```js
+import { configure, addDecorator } from '@storybook/react';
+import { checkA11y } from '@storybook/addon-a11y';
+
+// pick all stories.js files within the src/ folder
+const req = require.context('../src', true, /stories\.js$/);
+
+addDecorator(checkA11y);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
+```
+
 ## Roadmap
 
 * Make UI accessibile
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index e7d37166fa2..5e2c350895f 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -25,16 +25,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/client-logger": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/client-logger": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "axe-core": "^3.0.3",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
-    "react-emotion": "^9.1.3"
+    "react-emotion": "^9.1.3",
+    "react-icons": "^2.2.7"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js
index 8e3617c81b1..d371ebc1035 100644
--- a/addons/a11y/src/components/Panel.js
+++ b/addons/a11y/src/components/Panel.js
@@ -1,65 +1,93 @@
 import React, { Component } from 'react';
-import addons from '@storybook/addons';
+import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-import { CHECK_EVENT_ID } from '../shared';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { ActionBar, ActionButton } from '@storybook/components';
+
+import { CHECK_EVENT_ID, RERUN_EVENT_ID, REQUEST_CHECK_EVENT_ID } from '../shared';
 
 import Tabs from './Tabs';
 import Report from './Report';
 
-const Passes = styled('span')({
-  color: '#0D6731',
-});
+const Passes = styled('span')(({ theme }) => ({
+  color: theme.successColor,
+}));
 
-const Violations = styled('span')({
-  color: '#AC2300',
-});
+const Violations = styled('span')(({ theme }) => ({
+  color: theme.failColor,
+}));
 
 class Panel extends Component {
-  constructor(props, ...args) {
-    super(props, ...args);
-    this.state = {
-      passes: [],
-      violations: [],
-    };
-    this.channel = addons.getChannel();
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
+  };
 
-    this.onUpdate = this.onUpdate.bind(this);
-  }
+  state = {
+    passes: [],
+    violations: [],
+  };
 
   componentDidMount() {
-    this.channel.on(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.on(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.on(STORY_RENDERED, this.requestCheck);
+    this.props.channel.on(RERUN_EVENT_ID, this.requestCheck);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.active && this.props.active) {
+      this.requestCheck();
+    }
   }
 
   componentWillUnmount() {
-    this.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.removeListener(STORY_RENDERED, this.requestCheck);
+    this.props.channel.removeListener(RERUN_EVENT_ID, this.requestCheck);
   }
 
-  onUpdate({ passes, violations }) {
+  onUpdate = ({ passes, violations }) => {
     this.setState({
       passes,
       violations,
     });
-  }
+  };
+
+  requestCheck = () => {
+    if (this.props.active) {
+      this.props.channel.emit(REQUEST_CHECK_EVENT_ID);
+    }
+  };
 
   render() {
     const { passes, violations } = this.state;
+    const { active } = this.props;
 
-    return (
-      <Tabs
-        tabs={[
-          {
-            label: <Violations>{violations.length} Violations</Violations>,
-            panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
-          },
-          {
-            label: <Passes>{passes.length} Passes</Passes>,
-            panel: <Report passes items={passes} empty="No a11y check passed" />,
-          },
-        ]}
-      />
-    );
+    return active ? (
+      <div>
+        <Tabs
+          tabs={[
+            {
+              label: <Violations>{violations.length} Violations</Violations>,
+              panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
+            },
+            {
+              label: <Passes>{passes.length} Passes</Passes>,
+              panel: <Report passes items={passes} empty="No a11y check passed" />,
+            },
+          ]}
+        />
+        <ActionBar>
+          <ActionButton onClick={this.requestCheck}>RERUN TEST</ActionButton>
+        </ActionBar>
+      </div>
+    ) : null;
   }
 }
 
diff --git a/addons/a11y/src/components/Report/Info.js b/addons/a11y/src/components/Report/Info.js
index 8b2679424d7..5c1a9b6cfaa 100644
--- a/addons/a11y/src/components/Report/Info.js
+++ b/addons/a11y/src/components/Report/Info.js
@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-const Wrapper = styled('div')({
-  backgroundColor: 'rgb(234, 234, 234)',
+const Wrapper = styled('div')(({ theme }) => ({
+  backgroundColor: theme.barFill,
   padding: '12px',
   marginBottom: '10px',
-});
+}));
 const Help = styled('p')({
   margin: '0 0 12px',
 });
 const Link = styled('a')({
   marginTop: '12px',
   textDecoration: 'underline',
-  color: 'rgb(130, 130, 130)',
+  color: 'inherit',
   display: 'block',
 });
 
diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js
index cae1eeb03e5..b865b7ffaf2 100644
--- a/addons/a11y/src/components/Report/Item.js
+++ b/addons/a11y/src/components/Report/Item.js
@@ -2,24 +2,34 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
+import IoChevronRight from 'react-icons/lib/io/chevron-right';
 
 import Info from './Info';
 import Tags from './Tags';
 import Elements from './Elements';
 
-const Wrapper = styled('div')({
+const Wrapper = styled('div')(({ theme }) => ({
   padding: '0 14px',
   cursor: 'pointer',
-  borderBottom: '1px solid rgb(234, 234, 234)',
-});
+  borderBottom: theme.mainBorder,
+}));
 
-const HeaderBar = styled('button')({
+const HeaderBar = styled('button')(({ theme }) => ({
   padding: '12px 0px',
   display: 'block',
   width: '100%',
   border: 0,
   background: 'none',
-});
+  color: 'inherit',
+
+  borderTop: '3px solid transparent',
+  borderBottom: '3px solid transparent',
+
+  '&:focus': {
+    outline: '0 none',
+    borderBottom: `3px solid ${theme.highlightColor}`,
+  },
+}));
 
 class Item extends Component {
   static propTypes = {
@@ -46,7 +56,19 @@ class Item extends Component {
 
     return (
       <Wrapper>
-        <HeaderBar onClick={this.onToggle}>{item.description}</HeaderBar>
+        <HeaderBar onClick={this.onToggle}>
+          <IoChevronRight
+            size={10}
+            color="#9DA5AB"
+            style={{
+              marginRight: '5px',
+              marginBottom: '2px',
+              transform: `rotate(${open ? 90 : 0}deg)`,
+              transition: 'transform 0.3s ease-in-out',
+            }}
+          />
+          {item.description}
+        </HeaderBar>
         {open && <Info item={item} />}
         {open && <Elements elements={item.nodes} passes={passes} />}
         {open && <Tags tags={item.tags} />}
diff --git a/addons/a11y/src/components/Report/RerunButton.js b/addons/a11y/src/components/Report/RerunButton.js
deleted file mode 100644
index f419e3b197b..00000000000
--- a/addons/a11y/src/components/Report/RerunButton.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'react-emotion';
-
-const RerunButton = styled('button')({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  border: 'none',
-  borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
-  borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
-  background: 'rgba(255, 255, 255, 0.5)',
-  padding: '5px 10px',
-  borderRadius: '4px 0 0 0',
-  color: 'rgba(0, 0, 0, 0.5)',
-  textTransform: 'uppercase',
-});
-
-export default RerunButton;
diff --git a/addons/a11y/src/components/Report/Tags.js b/addons/a11y/src/components/Report/Tags.js
index 2ad147f64cf..0800dbb6c29 100644
--- a/addons/a11y/src/components/Report/Tags.js
+++ b/addons/a11y/src/components/Report/Tags.js
@@ -9,14 +9,12 @@ const Wrapper = styled('div')({
   margin: '12px 0',
 });
 
-const Item = styled('div')({
+const Item = styled('div')(({ theme }) => ({
   margin: '0 6px',
   padding: '5px',
-  border: '1px solid rgb(234, 234, 234)',
-  borderRadius: '2px',
-  color: 'rgb(130, 130, 130)',
-  fontSize: '12px',
-});
+  border: theme.mainBorder,
+  borderRadius: theme.mainBorderRadius,
+}));
 
 function Tags({ tags }) {
   return <Wrapper>{tags.map(tag => <Item key={tag}>{tag}</Item>)}</Wrapper>;
diff --git a/addons/a11y/src/components/Report/index.js b/addons/a11y/src/components/Report/index.js
index 7a6b3e75eaa..d9897dfa681 100644
--- a/addons/a11y/src/components/Report/index.js
+++ b/addons/a11y/src/components/Report/index.js
@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import addons from '@storybook/addons';
 import { Placeholder } from '@storybook/components';
 
-import { RERUN_EVENT_ID } from '../../shared';
-
-import RerunButton from './RerunButton';
 import Item from './Item';
 
-function onRerunClick() {
-  const channel = addons.getChannel();
-  channel.emit(RERUN_EVENT_ID);
-}
-
 const Report = ({ items, empty, passes }) => (
   <div>
     {items.length ? (
@@ -20,7 +11,6 @@ const Report = ({ items, empty, passes }) => (
     ) : (
       <Placeholder>{empty}</Placeholder>
     )}
-    <RerunButton onClick={onRerunClick}>Re-run tests</RerunButton>
   </div>
 );
 
diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js
index 2bdd3efcfff..970b287249c 100644
--- a/addons/a11y/src/components/Tabs.js
+++ b/addons/a11y/src/components/Tabs.js
@@ -6,13 +6,14 @@ import styled from 'react-emotion';
 const Container = styled('div')({
   width: '100%',
   position: 'relative',
+  minHeight: '100%',
 });
 
-const List = styled('div')({
-  borderBottom: '1px solid rgb(234, 234, 234)',
+const List = styled('div')(({ theme }) => ({
+  borderBottom: theme.mainBorder,
   flexWrap: 'wrap',
   display: 'flex',
-});
+}));
 
 const Item = styled('button')(
   ({ active }) =>
@@ -22,9 +23,7 @@ const Item = styled('button')(
           fontWeight: 600,
         }
       : {},
-  {
-    color: 'rgb(68, 68, 68)',
-    fontSize: '11px',
+  ({ theme }) => ({
     textDecoration: 'none',
     textTransform: 'uppercase',
     padding: '10px 15px',
@@ -33,9 +32,16 @@ const Item = styled('button')(
     fontWeight: 500,
     opacity: 0.7,
     border: 'none',
+    borderTop: '3px solid transparent',
+    borderBottom: '3px solid transparent',
     background: 'none',
     flex: 1,
-  }
+
+    '&:focus': {
+      outline: '0 none',
+      borderBottom: `3px solid ${theme.highlightColor}`,
+    },
+  })
 );
 
 class Tabs extends Component {
diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js
index e330e75f4a9..7d579a9b66d 100644
--- a/addons/a11y/src/index.js
+++ b/addons/a11y/src/index.js
@@ -4,7 +4,7 @@ import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 
-import { CHECK_EVENT_ID, RERUN_EVENT_ID } from './shared';
+import { CHECK_EVENT_ID, REQUEST_CHECK_EVENT_ID } from './shared';
 
 let axeOptions = {};
 
@@ -23,11 +23,10 @@ const runA11yCheck = () => {
 
 const a11ySubscription = () => {
   const channel = addons.getChannel();
-  channel.on(Events.STORY_RENDERED, runA11yCheck);
-  channel.on(RERUN_EVENT_ID, runA11yCheck);
+  channel.on(REQUEST_CHECK_EVENT_ID, runA11yCheck);
+
   return () => {
-    channel.removeListener(Events.STORY_RENDERED, runA11yCheck);
-    channel.removeListener(RERUN_EVENT_ID, runA11yCheck);
+    channel.removeListener(REQUEST_CHECK_EVENT_ID, runA11yCheck);
   };
 };
 
diff --git a/addons/a11y/src/register.js b/addons/a11y/src/register.js
index 043797800f6..7074287dc6f 100644
--- a/addons/a11y/src/register.js
+++ b/addons/a11y/src/register.js
@@ -5,12 +5,12 @@ import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID } from './shared';
 
 function init() {
-  addons.register(ADDON_ID, () => {
+  addons.register(ADDON_ID, api => {
+    const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Accessibility',
-      render() {
-        return <Panel />;
-      },
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
     });
   });
 }
diff --git a/addons/a11y/src/shared/index.js b/addons/a11y/src/shared/index.js
index 2bcaf9d1968..5c810f2a67f 100755
--- a/addons/a11y/src/shared/index.js
+++ b/addons/a11y/src/shared/index.js
@@ -3,5 +3,6 @@ const ADDON_ID = '@storybook/addon-a11y';
 const PANEL_ID = `${ADDON_ID}/panel`;
 const CHECK_EVENT_ID = `${ADDON_ID}/check`;
 const RERUN_EVENT_ID = `${ADDON_ID}/rerun`;
+const REQUEST_CHECK_EVENT_ID = `${ADDON_ID}/request-check`;
 
-export { ADDON_ID, PANEL_ID, CHECK_EVENT_ID, RERUN_EVENT_ID };
+export { ADDON_ID, PANEL_ID, CHECK_EVENT_ID, RERUN_EVENT_ID, REQUEST_CHECK_EVENT_ID };
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 49a13d60b71..ccc3c7214d7 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -20,12 +20,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
-    "emotion": "^9.1.3",
+    "emotion-theming": "^9.1.2",
     "global": "^4.3.2",
     "lodash.isequal": "^4.5.0",
     "make-error": "^1.3.4",
diff --git a/addons/actions/src/components/ActionLogger/index.js b/addons/actions/src/components/ActionLogger/index.js
index d565ce46331..2a31e78831a 100644
--- a/addons/actions/src/components/ActionLogger/index.js
+++ b/addons/actions/src/components/ActionLogger/index.js
@@ -1,48 +1,48 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import Inspector from 'react-inspector';
-import { Actions, Action, Button, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
+import { withTheme } from 'emotion-theming';
 
-class ActionLogger extends Component {
-  getActionData() {
-    return this.props.actions.map(action => this.renderAction(action));
-  }
+import { ActionBar, ActionButton } from '@storybook/components';
 
-  renderAction(action) {
-    const counter = <Counter>{action.count}</Counter>;
-    return (
-      <Action key={action.id}>
-        <Countwrap>{action.count > 1 && counter}</Countwrap>
-        <InspectorContainer>
-          <Inspector
-            sortObjectKeys
-            showNonenumerable={false}
-            name={action.data.name}
-            data={action.data.args || action.data}
-          />
-        </InspectorContainer>
-      </Action>
-    );
-  }
+import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
 
-  render() {
-    return (
-      <Wrapper>
-        <Actions>{this.getActionData()}</Actions>
-        <Button onClick={this.props.onClear}>Clear</Button>
-      </Wrapper>
-    );
-  }
-}
+const ActionLogger = withTheme(({ actions, onClear, theme }) => (
+  <Wrapper>
+    <Actions>
+      {actions.map(action => (
+        <Action key={action.id}>
+          <Countwrap>{action.count > 1 && <Counter>{action.count}</Counter>}</Countwrap>
+          <InspectorContainer>
+            <Inspector
+              theme={theme.addonActionsTheme || 'chromeLight'}
+              sortObjectKeys
+              showNonenumerable={false}
+              name={action.data.name}
+              data={action.data.args || action.data}
+            />
+          </InspectorContainer>
+        </Action>
+      ))}
+    </Actions>
+
+    <ActionBar>
+      <ActionButton onClick={onClear}>CLEAR</ActionButton>
+    </ActionBar>
+  </Wrapper>
+));
 
 ActionLogger.propTypes = {
-  onClear: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
-  actions: PropTypes.array,
-};
-ActionLogger.defaultProps = {
-  onClear: () => {},
-  actions: [],
+  onClear: PropTypes.func.isRequired,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      count: PropTypes.node,
+      data: PropTypes.shape({
+        name: PropTypes.node.isRequired,
+        args: PropTypes.any,
+      }),
+    })
+  ).isRequired,
 };
 
 export default ActionLogger;
diff --git a/addons/actions/src/components/ActionLogger/style.js b/addons/actions/src/components/ActionLogger/style.js
index e2d4b67081f..202a547b82b 100644
--- a/addons/actions/src/components/ActionLogger/style.js
+++ b/addons/actions/src/components/ActionLogger/style.js
@@ -1,5 +1,4 @@
 import styled from 'react-emotion';
-import { Button as BaseButton } from '@storybook/components';
 
 export const Actions = styled('pre')({
   flex: 1,
@@ -12,24 +11,12 @@ export const Actions = styled('pre')({
 export const Action = styled('div')({
   display: 'flex',
   padding: '3px 3px 3px 0',
-  borderLeft: '5px solid white',
-  borderBottom: '1px solid #fafafa',
+  borderLeft: '5px solid transparent',
+  borderBottom: '1px solid transparent',
   transition: 'all 0.1s',
   alignItems: 'start',
 });
 
-export const Button = styled(BaseButton)({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  borderRadius: '4px 0 0 0',
-  textTransform: 'uppercase',
-  letterSpacing: 1,
-  paddingTop: 5,
-  paddingBottom: 5,
-  border: '0 none',
-});
-
 export const Counter = styled('div')({
   margin: '0 5px 0 5px',
   backgroundColor: '#777777',
@@ -51,4 +38,5 @@ export const Wrapper = styled('div')({
   flex: 1,
   display: 'flex',
   position: 'relative',
+  minHeight: '100%',
 });
diff --git a/addons/actions/src/containers/ActionLogger/index.js b/addons/actions/src/containers/ActionLogger/index.js
index df814b21ad8..6d78106dfb9 100644
--- a/addons/actions/src/containers/ActionLogger/index.js
+++ b/addons/actions/src/containers/ActionLogger/index.js
@@ -56,21 +56,25 @@ export default class ActionLogger extends React.Component {
   }
 
   render() {
+    const { active } = this.props;
     const props = {
       actions: this.state.actions,
       onClear: () => this.clearActions(),
     };
-    return <ActionLoggerComponent {...props} />;
+    return active ? <ActionLoggerComponent {...props} /> : null;
   }
 }
 
 ActionLogger.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  channel: PropTypes.object,
+  active: PropTypes.bool.isRequired,
+  channel: PropTypes.shape({
+    emit: PropTypes.func,
+    on: PropTypes.func,
+    removeListener: PropTypes.func,
+  }).isRequired,
   api: PropTypes.shape({
-    onStory: PropTypes.func.isRequired,
+    onStory: PropTypes.func,
+    getQueryParam: PropTypes.func,
+    setQueryParams: PropTypes.func,
   }).isRequired,
 };
-ActionLogger.defaultProps = {
-  channel: {},
-};
diff --git a/addons/actions/src/manager.js b/addons/actions/src/manager.js
index 0fc82a627c7..43eea1709d9 100644
--- a/addons/actions/src/manager.js
+++ b/addons/actions/src/manager.js
@@ -8,7 +8,8 @@ export function register() {
     const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Action Logger',
-      render: () => <ActionLogger channel={channel} api={api} />,
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <ActionLogger channel={channel} api={api} active={active} />,
     });
   });
 }
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index f6aa46398aa..37e842d7a6d 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -24,10 +24,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",
diff --git a/addons/backgrounds/src/BackgroundPanel.js b/addons/backgrounds/src/BackgroundPanel.js
index 4752d3c5d29..5d571fd1f08 100644
--- a/addons/backgrounds/src/BackgroundPanel.js
+++ b/addons/backgrounds/src/BackgroundPanel.js
@@ -16,14 +16,13 @@ const Title = styled('h5')({
   fontSize: 16,
 });
 
-const Pre = styled('pre')({
+const Pre = styled('pre')(({ theme }) => ({
   padding: '30px',
   display: 'block',
-  background: 'rgba(19,19,19,0.9)',
-  color: 'rgba(255,255,255,0.95)',
+  background: theme.fillColor,
   marginTop: '15px',
   lineHeight: '1.75em',
-});
+}));
 
 const List = styled('div')({
   display: 'inline-block',
@@ -47,13 +46,13 @@ const defaultBackground = {
 };
 
 const instructionsHtml = `
-import { storiesOf } from "@storybook/react";
-import { withBackgrounds } from "@storybook/addon-backgrounds";
+import { storiesOf } from '@storybook/react';
+import { withBackgrounds } from '@storybook/addon-backgrounds';
 
-storiesOf("First Component", module)
+storiesOf('First Component', module)
   .addDecorator(withBackgrounds([
-    { name: "twitter", value: "#00aced" },
-    { name: "facebook", value: "#3b5998" },
+    { name: 'twitter', value: '#00aced' },
+    { name: 'facebook', value: '#3b5998" },
   ]))
   .add("First Button", () => <button>Click me</button>);
 `.trim();
@@ -130,8 +129,11 @@ export default class BackgroundPanel extends Component {
   }
 
   render() {
+    const { active } = this.props;
     const backgrounds = [...this.state.backgrounds];
-
+    if (!active) {
+      return null;
+    }
     if (!backgrounds.length) return <Instructions />;
 
     const hasDefault = backgrounds.filter(x => x.default).length;
@@ -149,6 +151,7 @@ export default class BackgroundPanel extends Component {
   }
 }
 BackgroundPanel.propTypes = {
+  active: PropTypes.bool.isRequired,
   api: PropTypes.shape({
     getQueryParam: PropTypes.func,
     setQueryParams: PropTypes.func,
diff --git a/addons/backgrounds/src/Swatch.js b/addons/backgrounds/src/Swatch.js
index 02a7a7c0b7e..e518da10bfe 100644
--- a/addons/backgrounds/src/Swatch.js
+++ b/addons/backgrounds/src/Swatch.js
@@ -3,24 +3,26 @@ import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-const Button = styled('button')({
+const Button = styled('button')(({ theme }) => ({
   listStyle: 'none',
-  backgroundColor: '#fff',
+  backgroundColor: theme.barFill,
   textAlign: 'center',
-  border: '1px solid rgba(0,0,0,0.1)',
-  borderRadius: 4,
+  border: theme.mainBorder,
+  borderRadius: theme.mainBorderRadius,
+  color: 'inherit',
   cursor: 'pointer',
   display: 'inline-block',
   width: 175,
   verticalAlign: 'top',
   wordWrap: 'break-word',
   padding: 0,
-});
-const Block = styled('div')(({ bg }) => ({
+  overflow: 'hidden',
+}));
+
+const Block = styled('div')(({ bg, theme }) => ({
   height: 80,
-  borderRadius: '4px 4px 0 0',
   transition: 'opacity 0.25s ease-in-out',
-  borderBottom: '1px solid rgba(0,0,0,0.1)',
+  borderBottom: theme.mainBorder,
   background: bg,
   backgroundSize: 'cover',
   backgroundPosition: 'center',
diff --git a/addons/backgrounds/src/__tests__/BackgroundPanel.js b/addons/backgrounds/src/__tests__/BackgroundPanel.js
index 59eb89db51f..8c9f59aac76 100644
--- a/addons/backgrounds/src/__tests__/BackgroundPanel.js
+++ b/addons/backgrounds/src/__tests__/BackgroundPanel.js
@@ -30,26 +30,26 @@ jest.mock('global', () => ({
 
 describe('Background Panel', () => {
   it('should exist', () => {
-    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
+    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} active />);
 
     expect(backgroundPanel).toBeDefined();
   });
 
   it('should have a default background value of transparent', () => {
-    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
+    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} active />);
 
     expect(backgroundPanel.state().backgrounds).toHaveLength(0);
   });
 
   it('should show setup instructions if no colors provided', () => {
-    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
+    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} active />);
 
     expect(backgroundPanel.html().match(/Setup Instructions/gim).length).toBeGreaterThan(0);
   });
 
   it('should set the query string', () => {
     const SpiedChannel = new EventEmitter();
-    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} active />);
     SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(mockedApi.getQueryParam).toBeCalledWith('background');
@@ -57,7 +57,7 @@ describe('Background Panel', () => {
 
   it('should not unset the query string', () => {
     const SpiedChannel = new EventEmitter();
-    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} active />);
     SpiedChannel.emit(Events.UNSET, []);
 
     expect(mockedApi.setQueryParams).not.toHaveBeenCalled();
@@ -65,7 +65,9 @@ describe('Background Panel', () => {
 
   it('should accept colors through channel and render the correct swatches with a default swatch', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(backgrounds);
@@ -73,7 +75,9 @@ describe('Background Panel', () => {
 
   it('should allow setting a default swatch', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     const [head, ...tail] = backgrounds;
     const localBgs = [{ ...head, default: true }, ...tail];
     SpiedChannel.emit(Events.SET, localBgs);
@@ -88,7 +92,9 @@ describe('Background Panel', () => {
 
   it('should allow the default swatch become the background color', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     const [head, second, ...tail] = backgrounds;
     const localBgs = [head, { ...second, default: true }, ...tail];
     SpiedChannel.on('background', bg => {
@@ -106,7 +112,9 @@ describe('Background Panel', () => {
 
   it('should unset all swatches on receiving the background-unset message', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(backgrounds);
@@ -118,7 +126,9 @@ describe('Background Panel', () => {
 
   it('should set iframe background', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     backgroundPanel.setState({ backgrounds }); // force re-render
 
     backgroundPanel
diff --git a/addons/backgrounds/src/index.js b/addons/backgrounds/src/index.js
index 293d82d6106..859375d6607 100644
--- a/addons/backgrounds/src/index.js
+++ b/addons/backgrounds/src/index.js
@@ -15,6 +15,7 @@ export const withBackgrounds = makeDecorator({
   name: 'backgrounds',
   parameterName: 'backgrounds',
   skipIfNoParametersOrOptions: true,
+  allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const backgrounds = parameters || options;
 
diff --git a/addons/backgrounds/src/register.js b/addons/backgrounds/src/register.js
index 50d22ddbba6..c1a380e2544 100644
--- a/addons/backgrounds/src/register.js
+++ b/addons/backgrounds/src/register.js
@@ -10,6 +10,7 @@ addons.register(ADDON_ID, api => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Backgrounds',
-    render: () => <BackgroundPanel channel={channel} api={api} />,
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
   });
 });
diff --git a/addons/centered/package.json b/addons/centered/package.json
index db6de5f9f4c..61f6cda8924 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook decorator to center components",
   "license": "MIT",
   "author": "Muhammed Thanish <mnmtanish@gmail.com>",
diff --git a/addons/events/package.json b/addons/events/package.json
index 0813545c8e4..f7058dea590 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -19,10 +19,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "format-json": "^1.0.3",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",
diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.js
index adcab42e4b0..7061171ac8d 100644
--- a/addons/events/src/components/Panel.js
+++ b/addons/events/src/components/Panel.js
@@ -10,10 +10,12 @@ const Wrapper = styled('div')({
   width: '100%',
   boxSizing: 'border-box',
   padding: '10px',
+  minHeight: '100%',
 });
 
 export default class Events extends Component {
   static propTypes = {
+    active: PropTypes.bool.isRequired,
     channel: PropTypes.shape({
       on: PropTypes.func,
       emit: PropTypes.func,
@@ -43,10 +45,11 @@ export default class Events extends Component {
 
   render() {
     const { events } = this.state;
-    return (
+    const { active } = this.props;
+    return active ? (
       <Wrapper>
         {events.map(event => <Event key={event.name} {...event} onEmit={this.onEmit} />)}
       </Wrapper>
-    );
+    ) : null;
   }
 }
diff --git a/addons/events/src/manager.js b/addons/events/src/manager.js
index c5929d7d525..842bf3177d1 100644
--- a/addons/events/src/manager.js
+++ b/addons/events/src/manager.js
@@ -6,9 +6,11 @@ import { ADDON_ID, PANEL_ID } from './constants';
 
 export function register() {
   addons.register(ADDON_ID, () => {
+    const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Events',
-      render: () => <Panel channel={addons.getChannel()} />,
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <Panel channel={channel} active={active} />,
     });
   });
 }
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index c5a8a7e64e8..39a89cf924f 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook addon to display the GraphiQL IDE",
   "keywords": [
     "storybook"
diff --git a/addons/info/README.md b/addons/info/README.md
index 1c7e29f7bcc..f391e4de9f4 100644
--- a/addons/info/README.md
+++ b/addons/info/README.md
@@ -7,7 +7,7 @@
 [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
 [![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
 
-* * *
+---
 
 Storybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).
 Useful when you want to display usage or other types of documentation alongside your story.
@@ -25,7 +25,8 @@ npm i -D @storybook/addon-info
 ```
 
 ## Basic usage
-Then, add  `withInfo` as a decarator to your book of stories.
+
+Then, add `withInfo` as a decarator to your book of stories.
 It is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.
 
 It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
@@ -33,7 +34,9 @@ It is important to declare this decorator as **the first decorator**, otherwise
 ```js
 addDecorator(withInfo); // Globally in your .storybook/config.js.
 ```
+
 or
+
 ```js
 storiesOf('Component', module)
   .addDecorator(withInfo) // At your stories directly.
@@ -53,12 +56,13 @@ storiesOf('Component', module)
   .addParameters({
     info: {
       // Your settings
-    }
+    },
   })
-  .add('with some emoji', () => <Component/>);
+  .add('with some emoji', () => <Component />);
 ```
 
 ...or for each story individually:
+
 ```js
 import { storiesOf } from '@storybook/react';
 
@@ -67,12 +71,12 @@ import Component from './Component';
 storiesOf('Component', module)
   .add(
     'with some emoji',
-    () => <Component emoji/>,
-    { info : { inline: false, header: false } } // Make your component render inline with the additional info
+    () => <Component emoji />,
+    { info: { inline: true, header: false } } // Make your component render inline with the additional info
   )
   .add(
     'with no emoji',
-    () => <Component/>,
+    () => <Component />,
     { info: '☹️ no emojis' } // Add additional info text directly
   );
 ```
@@ -86,41 +90,36 @@ import Component from './Component';
 
 storiesOf('Component', module)
   .addParameters({
-    info: {               // Make a default for all stories in this book,
-      inline: true,       // where the components are inlined
+    info: {
+      // Make a default for all stories in this book,
+      inline: true, // where the components are inlined
       styles: {
         header: {
           h1: {
-            color: 'red'  // and the headers of the sections are red.
-          }
-        }
+            color: 'red', // and the headers of the sections are red.
+          },
+        },
       },
-    }
+    },
   })
-  .add(
-    'green version',
-    () => <Component green/>,
-    {
-      info: {
-        styles: stylesheet => ({        // Setting the style with a function
-          ...stylesheet,
-          header: {
-            ...stylesheet.header,
-            h1: {
-              ...stylesheet.header.h1,
-              color: 'green'            // Still inlined but with green headers!
-            }
-          }
-        })
-      }
-    })
-  .add(
-    'something else',
-    () => <Component different/>,
-    {
-      info: "This story has additional text added to the info!" // Still inlined and with red headers!
-    }
-  );
+  .add('green version', () => <Component green />, {
+    info: {
+      styles: stylesheet => ({
+        // Setting the style with a function
+        ...stylesheet,
+        header: {
+          ...stylesheet.header,
+          h1: {
+            ...stylesheet.header.h1,
+            color: 'green', // Still inlined but with green headers!
+          },
+        },
+      }),
+    },
+  })
+  .add('something else', () => <Component different />, {
+    info: 'This story has additional text added to the info!', // Still inlined and with red headers!
+  });
 ```
 
 It is also possible to disable the `info` addon entirely.
@@ -135,27 +134,22 @@ Depending on the scope at which you want to disable the addon, pass the followin
 ```
 
 ## Markdown
+
 The `info` addon also supports markdown.
 To use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.
 
-
 ```js
-storiesOf('Button', module)
-  .add(
-    'Button Component',
-    () => <Button />,
-    {
-      info: {
-        text: `
+storiesOf('Button', module).add('Button Component', () => <Button />, {
+  info: {
+    text: `
           description or documentation about my component, supports markdown
 
           ~~~js
           <Button>Click Here</Button>
           ~~~
-        `
-      }
-    }
-  );
+        `,
+  },
+});
 ```
 
 ## Setting Global Options
@@ -166,9 +160,11 @@ To configure default options for all usage of the info addon, pass a option obje
 // config.js
 import { withInfo } from '@storybook/addon-info';
 
-addDecorator(withInfo({
-  header: false, // Global configuration for the info addon across all of your stories.
-}));
+addDecorator(
+  withInfo({
+    header: false, // Global configuration for the info addon across all of your stories.
+  })
+);
 ```
 
 Configuration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.
@@ -274,40 +270,40 @@ Example:
 ```js
 // button.js
 // @flow
-import React from 'react'
+import React from 'react';
 
 const paddingStyles = {
   small: '4px 8px',
-  medium: '8px 16px'
-}
+  medium: '8px 16px',
+};
 
 const Button = ({
   size,
   ...rest
 }: {
   /** The size of the button */
-  size: 'small' | 'medium'
+  size: 'small' | 'medium',
 }) => {
   const style = {
-    padding: paddingStyles[size] || ''
-  }
-  return <button style={style} {...rest} />
-}
+    padding: paddingStyles[size] || '',
+  };
+  return <button style={style} {...rest} />;
+};
 Button.defaultProps = {
-  size: 'medium'
-}
+  size: 'medium',
+};
 
-export default Button
+export default Button;
 ```
+
 ```js
 // stories.js
-import React from "react";
+import React from 'react';
 
-import { storiesOf } from "@storybook/react";
-import { withInfo } from "@storybook/addon-info";
-import Button from "./button";
+import { storiesOf } from '@storybook/react';
+import Button from './button';
 
-const Red = props => <span style={{ color: "red" }} {...props} />;
+const Red = props => <span style={{ color: 'red' }} {...props} />;
 
 const TableComponent = ({ propDefinitions }) => {
   const props = propDefinitions.map(
@@ -341,12 +337,11 @@ const TableComponent = ({ propDefinitions }) => {
   );
 };
 
-storiesOf("Button", module).add(
-  "with text",
-  withInfo({
-    TableComponent
-  })(() => <Button>Hello Button</Button>)
-);
+storiesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {
+  info: {
+    TableComponent,
+  },
+});
 ```
 
 ### React Docgen Integration
@@ -359,10 +354,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /** Button component description */
-const DocgenButton = ({ disabled, label, style, onClick }) =>
+const DocgenButton = ({ disabled, label, style, onClick }) => (
   <button disabled={disabled} style={style} onClick={onClick}>
     {label}
-  </button>;
+  </button>
+);
 
 DocgenButton.defaultProps = {
   disabled: false,
diff --git a/addons/info/package.json b/addons/info/package.json
index ec5df366c29..27b7067ccb4 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "A Storybook addon to show additional information for your stories.",
   "repository": {
     "type": "git",
@@ -13,12 +13,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/client-logger": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/client-logger": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "core-js": "2.5.7",
-    "emotion": "^9.1.3",
     "global": "^4.3.2",
     "marksy": "^6.0.3",
     "nested-object-assign": "^1.0.1",
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index e935cd48a7a..cd708d7a0a6 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -33,6 +33,9 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1:hover {
@@ -1335,6 +1338,9 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1:hover {
diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js
index fa84c05a0ce..ff11d7a60d0 100644
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ b/addons/info/src/components/markdown/pre/copyButton.js
@@ -12,6 +12,7 @@ const Button = styled('button')(
     fontSize: 13,
     padding: '3px 10px',
     alignSelf: 'flex-start',
+    flexShrink: 0,
 
     ':hover': {
       backgroundColor: '#f4f7fa',
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
index 3813949ab15..b6abfae8ad9 100644
--- a/addons/info/src/index.js
+++ b/addons/info/src/index.js
@@ -87,6 +87,7 @@ function addInfo(storyFn, context, infoOptions) {
 export const withInfo = makeDecorator({
   name: 'withInfo',
   parameterName: 'info',
+  allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const storyOptions = parameters || options;
     const infoOptions = typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
diff --git a/addons/jest/README.md b/addons/jest/README.md
index a2180eaa571..9441c9499dc 100644
--- a/addons/jest/README.md
+++ b/addons/jest/README.md
@@ -31,17 +31,19 @@ When running **Jest**, be sure to save the results in a json file:
 ```
 
 You may want to add it the result file to `.gitignore`, since it's a generated file:
+
 ```
 jest-test-results.json
 ```
+
 But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you.
-We recommend to **do** check in the test results file so starting storybook from an clean git clone doesn't require running all tests first, 
-but this can mean you'll experience merge conflicts on this file in the future. (*re-generating this file is super easy though, just like lockfiles and snapshots*)
+We recommend to **do** check in the test results file so starting storybook from an clean git clone doesn't require running all tests first,
+but this can mean you'll experience merge conflicts on this file in the future. (_re-generating this file is super easy though, just like lockfiles and snapshots_)
 
 ## Generating the test results
 
-You need to make sure the generated test-results file exists before you start storybook.
-During development you will likely start jest in watch-mode 
+You need to make sure the generated test-restuls file exists before you start storybook.
+During development you will likely start jest in watch-mode
 and so the json file will be re-generated every time code or tests change.
 
 ```sh
@@ -50,9 +52,10 @@ npm run test:generate-output -- --watch
 
 This change will then be HMR (hot module reloaded) using webpack and displayed by this addon.
 
-If you want to pre-run jest automaticly during development or a static build, 
+If you want to pre-run jest automaticly during development or a static build,
 you may need to consider that if your tests fail, the script receives a non-0 exit code and will exit.
 You could create a `prebuild:storybook` npm script, which will never fail by appending `|| true`:
+
 ```json
 "scripts": {
   "test:generate-output": "jest --json --outputFile=.jest-test-results.json || true",
@@ -83,40 +86,57 @@ import results from '../.jest-test-results.json';
 import { withTests } from '@storybook/addon-jest';
 
 storiesOf('MyComponent', module)
-  .addDecorator(withTests({ results })('MyComponent', 'MyOtherComponent'))
-  .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
-    <div>Jest results in storybook</div>
-  ));
+  .addDecorator(withTests({ results }))
+  .add(
+    'This story shows test results from MyComponent.test.js and MyOtherComponent.test.js',
+    () => <div>Jest results in storybook</div>,
+    {
+      jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
+    }
+  );
 ```
 
-Or in order to avoid importing `.jest-test-results.json` in each story, you can create a simple file `withTests.js`:
+Or in order to avoid importing `.jest-test-results.json` in each story, simply add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
 
 ```js
-import results from '../.jest-test-results.json';
+import { addDecorator } from '@storybook/react'; // <- or your view layer
 import { withTests } from '@storybook/addon-jest';
 
-export default withTests({
-  results,
-});
+import results from '../.jest-test-results.json';
+
+addDecorator(
+  withTests({
+    results,
+  })
+);
 ```
 
 Then in your story:
 
 ```js
-// import your file
-import withTests from '.withTests';
-
 storiesOf('MyComponent', module)
-  .addDecorator(withTests('MyComponent', 'MyOtherComponent'))
-  .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
-    <div>Jest results in storybook</div>
-  ));
+  // Use .addParameters if you want the same tests displayed for all stories of the component
+  .addParameters({ jest: ['MyComponent', 'MyOtherComponent'] })
+  .add(
+    'This story shows test results from MyComponent.test.js and MyOtherComponent.test.js',
+    () => <div>Jest results in storybook</div>
+  );
+```
+
+### Disabling
+
+You can disable the addon for a single story by setting the `jest` parameter to `{disable: true}`:
+
+```js
+storiesOf('MyComponent', module).add('Story', () => <div>Jest results disabled here</div>, {
+  jest: { disable: true },
+});
 ```
 
 ### withTests(options)
 
-- **options.results**: OBJECT jest output results. *mandatory*
-- **filesExt**: STRING test file extention. *optional*. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
+- **options.results**: OBJECT jest output results. _mandatory_
+- **filesExt**: STRING test file extention. _optional_. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
 
 ## Usage with Angular
 
@@ -124,7 +144,7 @@ Assuming that you have created a test files `my.component.spec.ts` and `my-other
 
 Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
 
-In project`s `typings.d.ts` add
+In project`s`typings.d.ts` add
 
 ```ts
 declare module '*.json' {
@@ -133,29 +153,31 @@ declare module '*.json' {
 }
 ```
 
-Create a simple file `withTests.ts`:
+In your `.storybook/config.ts`:
 
 ```ts
-import * as results from '../.jest-test-results.json';
+import { addDecorator } from '@storybook/angular';
 import { withTests } from '@storybook/addon-jest';
 
-export const wTests = withTests({
-  results,
-  filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$'
-});
+import * as results from '../.jest-test-results.json';
+
+addDecorator(
+  withTests({
+    results,
+    filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
+  })
+);
 ```
 
 Then in your story:
 
 ```js
-// import your file
-import wTests from '.withTests';
-
 storiesOf('MyComponent', module)
-  .addDecorator(wTests('my.component', 'my-other.component'))
-  .add('This story shows test results from my.component.spec.ts and my-other.component.spec.ts', () => (
-    <div>Jest results in storybook</div>
-  ));
+  .addParameters({ jest: ['my.component', 'my-other.component'] })
+  .add(
+    'This story shows test results from my.component.spec.ts and my-other.component.spec.ts',
+    () => <div>Jest results in storybook</div>
+  );
 ```
 
 ##### Example [here](https://github.com/storybooks/storybook/tree/master/examples/angular-cli)
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 9ce0cea93ef..48158577808 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -25,13 +25,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
-    "react-emotion": "^9.1.3"
+    "react-emotion": "^9.1.3",
+    "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
     "react": "*"
diff --git a/addons/jest/src/components/Panel.js b/addons/jest/src/components/Panel.js
index 23b3a20ee98..2512aefb450 100644
--- a/addons/jest/src/components/Panel.js
+++ b/addons/jest/src/components/Panel.js
@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 
-import { baseFonts } from '@storybook/components';
-
 import Indicator from './Indicator';
 import Result, { FailedResult } from './Result';
 import provideJestResult from '../hoc/provideJestResult';
@@ -25,7 +23,6 @@ const Item = styled('li')({
 const NoTests = styled('div')({
   padding: '10px 20px',
   flex: 1,
-  ...baseFonts,
 });
 
 const FileTitle = styled('h2')({
@@ -139,7 +136,6 @@ const Content = styled(({ tests, className }) => (
 ))({
   padding: '10px 20px',
   flex: '1 1 0%',
-  ...baseFonts,
 });
 
 const Panel = ({ tests }) =>
diff --git a/addons/jest/src/hoc/provideJestResult.js b/addons/jest/src/hoc/provideJestResult.js
index aec752bc7e0..a72169a21ee 100644
--- a/addons/jest/src/hoc/provideJestResult.js
+++ b/addons/jest/src/hoc/provideJestResult.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const provideTests = Component => {
+const provideTests = Component =>
   class TestProvider extends React.Component {
     static propTypes = {
       channel: PropTypes.shape({
@@ -11,21 +11,22 @@ const provideTests = Component => {
       api: PropTypes.shape({
         onStory: PropTypes.func,
       }).isRequired,
+      active: PropTypes.bool,
+    };
+    static defaultProps = {
+      active: true,
     };
 
-    constructor(props) {
-      super(props);
-
-      this.state = {};
-      this.onAddTests = this.onAddTests.bind(this);
-    }
+    state = {};
 
     componentDidMount() {
-      this.stopListeningOnStory = this.props.api.onStory(() => {
+      const { channel, api } = this.props;
+
+      this.stopListeningOnStory = api.onStory(() => {
         this.onAddTests({});
       });
 
-      this.props.channel.on('storybook/tests/add_tests', this.onAddTests);
+      channel.on('storybook/tests/add_tests', this.onAddTests);
     }
 
     componentWillUnmount() {
@@ -35,16 +36,14 @@ const provideTests = Component => {
       this.props.channel.removeListener('storybook/tests/add_tests', this.onAddTests);
     }
 
-    onAddTests({ kind, storyName, tests }) {
+    onAddTests = ({ kind, storyName, tests }) => {
       this.setState({ kind, storyName, tests });
-    }
+    };
 
     render() {
-      return <Component {...this.state} />;
+      const { active } = this.props;
+      return active ? <Component {...this.state} /> : null;
     }
-  }
-
-  return TestProvider;
-};
+  };
 
 export default provideTests;
diff --git a/addons/jest/src/index.js b/addons/jest/src/index.js
index e302a7a0f07..49c7cca457b 100644
--- a/addons/jest/src/index.js
+++ b/addons/jest/src/index.js
@@ -1,7 +1,8 @@
 import addons from '@storybook/addons';
+import deprecate from 'util-deprecate';
 
 const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
-  testFiles.map(name => {
+  Array.from(testFiles).map(name => {
     if (jestTestResults && jestTestResults.testResults) {
       return {
         name,
@@ -27,9 +28,27 @@ export const withTests = userOptions => {
   };
   const options = Object.assign({}, defaultOptions, userOptions);
 
-  return (...testFiles) => (storyFn, { kind, story }) => {
-    emitAddTests({ kind, story, testFiles, options });
+  return (...args) => {
+    if (typeof args[0] === 'string') {
+      return deprecate((story, { kind }) => {
+        emitAddTests({ kind, story, testFiles: args, options });
 
-    return storyFn();
+        return story();
+      }, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
+    }
+
+    const [
+      story,
+      {
+        kind,
+        parameters: { jest: testFiles },
+      },
+    ] = args;
+
+    if (testFiles && !testFiles.disable) {
+      emitAddTests({ kind, story, testFiles, options });
+    }
+
+    return story();
   };
 };
diff --git a/addons/jest/src/register.js b/addons/jest/src/register.js
index 66639bb3b40..7300e64299b 100644
--- a/addons/jest/src/register.js
+++ b/addons/jest/src/register.js
@@ -4,11 +4,11 @@ import addons from '@storybook/addons';
 import PanelTitle from './components/PanelTitle';
 import Panel from './components/Panel';
 
-// Register the addon with a unique name.
 addons.register('storybook/tests', api => {
-  // Also need to set a unique name to the panel.
+  const channel = addons.getChannel();
   addons.addPanel('storybook/tests/panel', {
     title: <PanelTitle channel={addons.getChannel()} api={api} />,
-    render: () => <Panel channel={addons.getChannel()} api={api} />,
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
   });
 });
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index 5a7102487fe..f3465f75727 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook Addon Prop Editor Component",
   "repository": {
     "type": "git",
@@ -13,22 +13,20 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
-    "deep-equal": "^1.0.1",
+    "copy-to-clipboard": "^3.0.8",
     "escape-html": "^1.0.3",
+    "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
-    "insert-css": "^2.0.0",
-    "lodash.debounce": "^4.0.8",
-    "moment": "^2.22.2",
     "prop-types": "^15.6.1",
+    "qs": "^6.5.2",
     "react-color": "^2.14.1",
     "react-datetime": "^2.14.0",
     "react-emotion": "^9.1.3",
     "react-lifecycles-compat": "^3.0.4",
-    "react-textarea-autosize": "^6.1.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
diff --git a/addons/knobs/src/KnobManager.js b/addons/knobs/src/KnobManager.js
index 9ae2ca937a7..bd183225a50 100644
--- a/addons/knobs/src/KnobManager.js
+++ b/addons/knobs/src/KnobManager.js
@@ -1,5 +1,5 @@
 /* eslint no-underscore-dangle: 0 */
-import deepEqual from 'deep-equal';
+import deepEqual from 'fast-deep-equal';
 import escape from 'escape-html';
 
 import KnobStore from './KnobStore';
diff --git a/addons/knobs/src/KnobStore.js b/addons/knobs/src/KnobStore.js
index 6474abfb79e..18b5125245a 100644
--- a/addons/knobs/src/KnobStore.js
+++ b/addons/knobs/src/KnobStore.js
@@ -1,3 +1,6 @@
+const callArg = fn => fn();
+const callAll = fns => fns.forEach(callArg);
+
 export default class KnobStore {
   constructor() {
     this.store = {};
@@ -12,7 +15,12 @@ export default class KnobStore {
     this.store[key] = value;
     this.store[key].used = true;
     this.store[key].groupId = value.groupId;
-    this.callbacks.forEach(cb => cb());
+
+    // debounce the execution of the callbacks for 50 milliseconds
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(callAll, 50, this.callbacks);
   }
 
   get(key) {
diff --git a/addons/knobs/src/components/GroupTabs.js b/addons/knobs/src/components/GroupTabs.js
deleted file mode 100644
index bed567cf6c9..00000000000
--- a/addons/knobs/src/components/GroupTabs.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import styled from 'react-emotion';
-
-import { Placeholder } from '@storybook/components';
-
-const Wrapper = styled('div')({
-  flex: '1 1 auto',
-  display: 'flex',
-  flexDirection: 'column',
-  background: 'white',
-  borderRadius: 4,
-  border: 'solid 1px rgb(236, 236, 236)',
-  width: '100%',
-});
-
-const Bar = styled('div')({
-  display: 'flex',
-  flexWrap: 'wrap',
-  flexDirection: 'row',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  borderBottom: 'solid 1px #eaeaea',
-});
-
-const Content = styled('div')({
-  flex: '1 1 0',
-  display: 'flex',
-  overflow: 'auto',
-});
-
-const Tab = styled('button')(({ active }) => ({
-  fontSize: 11,
-  letterSpacing: '1px',
-  padding: '10px 15px',
-  textTransform: 'uppercase',
-  transition: 'opacity 0.3s',
-  opacity: active ? 1 : 0.5,
-  maxHeight: 60,
-  overflow: 'hidden',
-  cursor: 'pointer',
-  background: 'transparent',
-  border: 'none',
-}));
-
-class GroupTabs extends Component {
-  renderTab(name, group) {
-    const onClick = e => {
-      e.preventDefault();
-      this.props.onGroupSelect(name);
-    };
-
-    let { title } = group;
-    if (typeof title === 'function') {
-      title = title();
-    }
-
-    return (
-      <Tab
-        type="button"
-        key={name}
-        onClick={onClick}
-        role="tab"
-        active={this.props.selectedGroup === name}
-      >
-        {title}
-      </Tab>
-    );
-  }
-
-  render() {
-    const entries = this.props.groups ? Object.entries(this.props.groups) : null;
-
-    return entries && entries.length ? (
-      <Wrapper>
-        <Bar role="tablist">{entries.map(([key, value]) => this.renderTab(key, value))}</Bar>
-        <Content>
-          {entries.map(([key, value]) => {
-            const groupStyle = { display: 'none' };
-            if (key === this.props.selectedGroup) {
-              Object.assign(groupStyle, { flex: 1, display: 'flex' });
-            }
-            return (
-              <div key={key} style={groupStyle}>
-                {value.render()}
-              </div>
-            );
-          })}
-        </Content>
-      </Wrapper>
-    ) : (
-      <Placeholder>no groups available</Placeholder>
-    );
-  }
-}
-
-GroupTabs.defaultProps = {
-  groups: {},
-  onGroupSelect: () => {},
-  selectedGroup: null,
-};
-
-GroupTabs.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  groups: PropTypes.object,
-  onGroupSelect: PropTypes.func,
-  selectedGroup: PropTypes.string,
-};
-
-export default GroupTabs;
diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
index 509a250849f..c7446455323 100644
--- a/addons/knobs/src/components/Panel.js
+++ b/addons/knobs/src/components/Panel.js
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-
+import qs from 'qs';
+import { document } from 'global';
 import styled from 'react-emotion';
+import copy from 'copy-to-clipboard';
+
+import { Placeholder, TabWrapper, TabsState, ActionBar, ActionButton } from '@storybook/components';
 
-import { Placeholder } from '@storybook/components';
-import GroupTabs from './GroupTabs';
-import PropForm from './PropForm';
 import Types from './types';
+import PropForm from './PropForm';
 
 const getTimestamp = () => +new Date();
 
@@ -16,49 +18,21 @@ const PanelWrapper = styled('div')({
   width: '100%',
 });
 
-const PanelInner = styled('div')({
-  padding: '5px',
-  width: 'auto',
-  position: 'relative',
-});
-
-const ResetButton = styled('button')({
-  position: 'absolute',
-  bottom: 11,
-  right: 10,
-  border: 'none',
-  borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
-  borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
-  background: 'rgba(255, 255, 255, 0.5)',
-  padding: '5px 10px',
-  borderRadius: '4px 0 0 0',
-  color: 'rgba(0, 0, 0, 0.5)',
-  outline: 'none',
-});
-
-export default class Panel extends React.Component {
+export default class Panel extends PureComponent {
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.setKnobs = this.setKnobs.bind(this);
-    this.reset = this.reset.bind(this);
-    this.setOptions = this.setOptions.bind(this);
-    this.onGroupSelect = this.onGroupSelect.bind(this);
-
-    this.state = { knobs: {}, groupId: DEFAULT_GROUP_ID };
+    this.state = { knobs: {} };
     this.options = {};
 
     this.lastEdit = getTimestamp();
     this.loadedFromUrl = false;
   }
-
   componentDidMount() {
     this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
     this.props.channel.on('addon:knobs:setOptions', this.setOptions);
 
     this.stopListeningOnStory = this.props.api.onStory(() => {
-      this.setState({ knobs: [], groupId: DEFAULT_GROUP_ID });
+      this.setState({ knobs: {} });
       this.props.channel.emit('addon:knobs:reset');
     });
   }
@@ -68,15 +42,11 @@ export default class Panel extends React.Component {
     this.stopListeningOnStory();
   }
 
-  onGroupSelect(name) {
-    this.setState({ groupId: name });
-  }
-
-  setOptions(options = { timestamps: false }) {
+  setOptions = (options = { timestamps: false }) => {
     this.options = options;
-  }
+  };
 
-  setKnobs({ knobs, timestamp }) {
+  setKnobs = ({ knobs, timestamp }) => {
     const queryParams = {};
     const { api, channel } = this.props;
 
@@ -86,7 +56,6 @@ export default class Panel extends React.Component {
         // For the first time, get values from the URL and set them.
         if (!this.loadedFromUrl) {
           const urlValue = api.getQueryParam(`knob-${name}`);
-
           if (urlValue !== undefined) {
             // If the knob value present in url
             knob.value = Types[knob.type].deserialize(urlValue);
@@ -94,48 +63,63 @@ export default class Panel extends React.Component {
           }
         }
 
-        queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value);
+        // set all knobsquery params to be deleted from URL
+        queryParams[`knob-${name}`] = null;
       });
-      this.loadedFromUrl = true;
+
       api.setQueryParams(queryParams);
       this.setState({ knobs });
+
+      this.loadedFromUrl = true;
     }
-  }
+  };
 
-  reset() {
+  reset = () => {
     this.props.channel.emit('addon:knobs:reset');
-  }
+  };
 
-  emitChange(changedKnob) {
-    this.props.channel.emit('addon:knobs:knobChange', changedKnob);
-  }
-
-  handleChange(changedKnob) {
-    this.lastEdit = getTimestamp();
-    const { api } = this.props;
+  copy = () => {
+    const { location } = document;
+    const query = qs.parse(location.search.replace('?', ''));
     const { knobs } = this.state;
-    const { name, type, value } = changedKnob;
+
+    Object.entries(knobs).forEach(([name, knob]) => {
+      query[`knob-${name}`] = Types[knob.type].serialize(knob.value);
+    });
+
+    copy(`${location.origin + location.pathname}?${qs.stringify(query)}`);
+
+    // TODO: show some notification of this
+  };
+
+  emitChange = changedKnob => {
+    this.props.channel.emit('addon:knobs:knobChange', changedKnob);
+  };
+
+  handleChange = changedKnob => {
+    this.lastEdit = getTimestamp();
+    const { knobs } = this.state;
+    const { name } = changedKnob;
     const newKnobs = { ...knobs };
     newKnobs[name] = {
       ...newKnobs[name],
       ...changedKnob,
     };
 
-    this.setState({ knobs: newKnobs });
-
-    const queryParams = {};
-    queryParams[`knob-${name}`] = Types[type].serialize(value);
-
-    api.setQueryParams(queryParams);
     this.setState({ knobs: newKnobs }, this.emitChange(changedKnob));
-  }
+  };
 
-  handleClick(knob) {
+  handleClick = knob => {
     this.props.channel.emit('addon:knobs:knobClick', knob);
-  }
+  };
 
   render() {
-    const { knobs, groupId } = this.state;
+    const { knobs } = this.state;
+    const { active } = this.props;
+
+    if (!active) {
+      return null;
+    }
 
     const groups = {};
     const groupIds = [];
@@ -146,20 +130,23 @@ export default class Panel extends React.Component {
       const knobKeyGroupId = knobs[key].groupId;
       groupIds.push(knobKeyGroupId);
       groups[knobKeyGroupId] = {
-        render: () => <div id={knobKeyGroupId}>{knobKeyGroupId}</div>,
+        render: ({ active: groupActive, selected }) => (
+          <TabWrapper active={groupActive || selected === DEFAULT_GROUP_ID}>
+            <PropForm
+              knobs={knobsArray.filter(knob => knob.groupId === knobKeyGroupId)}
+              onFieldChange={this.handleChange}
+              onFieldClick={this.handleClick}
+            />
+          </TabWrapper>
+        ),
         title: knobKeyGroupId,
       };
     });
 
-    if (groupIds.length > 0) {
-      groups[DEFAULT_GROUP_ID] = {
-        render: () => <div id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</div>,
-        title: DEFAULT_GROUP_ID,
-      };
-      if (groupId !== DEFAULT_GROUP_ID) {
-        knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
-      }
-    }
+    groups[DEFAULT_GROUP_ID] = {
+      render: () => null,
+      title: DEFAULT_GROUP_ID,
+    };
 
     knobsArray = knobsArray.map(key => knobs[key]);
 
@@ -169,33 +156,38 @@ export default class Panel extends React.Component {
 
     return (
       <PanelWrapper>
-        {groupIds.length > 0 && (
-          <GroupTabs
-            groups={groups}
-            onGroupSelect={this.onGroupSelect}
-            selectedGroup={this.state.groupId}
-          />
-        )}
-        <PanelInner>
+        {groupIds.length > 0 ? (
+          <TabsState>
+            {Object.entries(groups).map(([k, v]) => (
+              <div id={k} title={v.title}>
+                {v.render}
+              </div>
+            ))}
+          </TabsState>
+        ) : (
           <PropForm
             knobs={knobsArray}
             onFieldChange={this.handleChange}
             onFieldClick={this.handleClick}
           />
-        </PanelInner>
-        <ResetButton onClick={this.reset}>RESET</ResetButton>
+        )}
+        <ActionBar>
+          <ActionButton onClick={this.copy}>COPY</ActionButton>
+          <ActionButton onClick={this.reset}>RESET</ActionButton>
+        </ActionBar>
       </PanelWrapper>
     );
   }
 }
 
 Panel.propTypes = {
+  active: PropTypes.bool.isRequired,
+  onReset: PropTypes.object, // eslint-disable-line
   channel: PropTypes.shape({
     emit: PropTypes.func,
     on: PropTypes.func,
     removeListener: PropTypes.func,
   }).isRequired,
-  onReset: PropTypes.object, // eslint-disable-line
   api: PropTypes.shape({
     onStory: PropTypes.func,
     getQueryParam: PropTypes.func,
diff --git a/addons/knobs/src/components/PropField.js b/addons/knobs/src/components/PropField.js
deleted file mode 100644
index 888d5a9e75b..00000000000
--- a/addons/knobs/src/components/PropField.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'react-emotion';
-
-import TypeMap from './types';
-
-const InvalidType = () => <span>Invalid Type</span>;
-
-const Field = styled('div')({
-  display: 'table-row',
-  padding: '5px',
-});
-const Label = styled('label')({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'top',
-  paddingRight: 5,
-  paddingTop: 5,
-  textAlign: 'right',
-  width: 80,
-  fontSize: 12,
-  color: 'rgb(68, 68, 68)',
-  fontWeight: 600,
-});
-
-export default function PropField({ onChange, onClick, knob }) {
-  const InputType = TypeMap[knob.type] || InvalidType;
-  return (
-    <Field>
-      <Label htmlFor={knob.name}>{!knob.hideLabel && `${knob.name}`}</Label>
-      <InputType knob={knob} onChange={onChange} onClick={onClick} />
-    </Field>
-  );
-}
-
-PropField.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.any,
-  }).isRequired,
-  onChange: PropTypes.func.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js
index 821b2410e33..0b07504a829 100644
--- a/addons/knobs/src/components/PropForm.js
+++ b/addons/knobs/src/components/PropForm.js
@@ -1,19 +1,19 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-import PropField from './PropField';
+import { Field } from '@storybook/components';
+import TypeMap from './types';
 
 const Form = styled('form')({
-  display: 'table',
   boxSizing: 'border-box',
   width: '100%',
-  borderCollapse: 'separate',
-  borderSpacing: '5px',
 });
 
-export default class propForm extends React.Component {
+const InvalidType = () => <span>Invalid Type</span>;
+
+export default class PropForm extends Component {
   makeChangeHandler(name, type) {
     return value => {
       const change = { name, type, value };
@@ -28,16 +28,12 @@ export default class propForm extends React.Component {
       <Form>
         {knobs.map(knob => {
           const changeHandler = this.makeChangeHandler(knob.name, knob.type);
+          const InputType = TypeMap[knob.type] || InvalidType;
+
           return (
-            <PropField
-              key={knob.name}
-              name={knob.name}
-              type={knob.type}
-              value={knob.value}
-              knob={knob}
-              onChange={changeHandler}
-              onClick={this.props.onFieldClick}
-            />
+            <Field key={knob.name} label={!knob.hideLabel && `${knob.name}`}>
+              <InputType knob={knob} onChange={changeHandler} onClick={this.props.onFieldClick} />
+            </Field>
           );
         })}
       </Form>
@@ -45,19 +41,15 @@ export default class propForm extends React.Component {
   }
 }
 
-propForm.displayName = 'propForm';
+PropForm.displayName = 'PropForm';
 
-propForm.defaultProps = {
-  knobs: [],
-};
-
-propForm.propTypes = {
+PropForm.propTypes = {
   knobs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
       value: PropTypes.any,
     })
-  ),
+  ).isRequired,
   onFieldChange: PropTypes.func.isRequired,
   onFieldClick: PropTypes.func.isRequired,
 };
diff --git a/addons/knobs/src/components/__tests__/GroupTabs.js b/addons/knobs/src/components/__tests__/GroupTabs.js
deleted file mode 100644
index aa978bedb96..00000000000
--- a/addons/knobs/src/components/__tests__/GroupTabs.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import GroupTabs from '../GroupTabs';
-
-describe('GroupTabs', () => {
-  test('should render only the selected group with display set other than "none"', () => {
-    const groups = {
-      test1: {
-        render() {
-          return <div id="test1">TEST 1</div>;
-        },
-      },
-      test2: {
-        render() {
-          return <div id="test2">TEST 2</div>;
-        },
-      },
-    };
-
-    const onGroupSelect = () => 'onGroupSelect';
-
-    const wrapper = shallow(
-      <GroupTabs groups={groups} onGroupSelect={onGroupSelect} selectedGroup="test2" />
-    );
-
-    expect(wrapper.find('#test1').parent()).toHaveStyle('display', 'none');
-    expect(wrapper.find('#test2').parent()).not.toHaveStyle('display', 'none');
-  });
-
-  test('should set onGroupSelected as onClick handlers of tabs', () => {
-    const groups = {
-      test1: {
-        title: 'test 1',
-        render() {
-          return <div>TEST 1</div>;
-        },
-      },
-    };
-    const onGroupSelect = jest.fn();
-    const preventDefault = jest.fn();
-    const wrapper = shallow(
-      <GroupTabs groups={groups} onGroupSelect={onGroupSelect} selectedGroup="test1" />
-    );
-    wrapper
-      .find('Styled(button)')
-      .dive()
-      .simulate('click', { preventDefault });
-
-    expect(onGroupSelect).toHaveBeenCalled();
-    expect(preventDefault).toHaveBeenCalled();
-  });
-
-  describe('when no groups are given', () => {
-    test('should render "no groups available"', () => {
-      const groups = {};
-      const onGroupSelect = () => 'onGroupSelect';
-      const wrapper = shallow(<GroupTabs groups={groups} onGroupSelect={onGroupSelect} />);
-
-      expect(wrapper.contains('no groups available')).toBe(true);
-    });
-  });
-});
diff --git a/addons/knobs/src/components/__tests__/Panel.js b/addons/knobs/src/components/__tests__/Panel.js
index ef0389705b6..dc9b17d163f 100644
--- a/addons/knobs/src/components/__tests__/Panel.js
+++ b/addons/knobs/src/components/__tests__/Panel.js
@@ -6,14 +6,14 @@ describe('Panel', () => {
   it('should subscribe to setKnobs event of channel', () => {
     const testChannel = { on: jest.fn() };
     const testApi = { onStory: jest.fn() };
-    shallow(<Panel channel={testChannel} api={testApi} />);
+    shallow(<Panel channel={testChannel} api={testApi} active />);
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
   });
 
   it('should subscribe to onStory event', () => {
     const testChannel = { on: jest.fn() };
     const testApi = { onStory: jest.fn() };
-    shallow(<Panel channel={testChannel} api={testApi} />);
+    shallow(<Panel channel={testChannel} api={testApi} active />);
 
     expect(testApi.onStory).toHaveBeenCalled();
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
@@ -41,7 +41,7 @@ describe('Panel', () => {
         onStory: jest.fn(),
       };
 
-      shallow(<Panel channel={testChannel} api={testApi} />);
+      shallow(<Panel channel={testChannel} api={testApi} active />);
       const setKnobsHandler = handlers['addon:knobs:setKnobs'];
 
       const knobs = {
@@ -67,7 +67,7 @@ describe('Panel', () => {
       expect(testChannel.emit).toHaveBeenCalledWith(e, knobFromUrl);
     });
 
-    it('should set query params when url params are already read', () => {
+    it('should remove query params when url params are already read', () => {
       const handlers = {};
 
       const testChannel = {
@@ -88,7 +88,7 @@ describe('Panel', () => {
         onStory: jest.fn(),
       };
 
-      const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);
+      const wrapper = shallow(<Panel channel={testChannel} api={testApi} active />);
       const setKnobsHandler = handlers['addon:knobs:setKnobs'];
 
       const knobs = {
@@ -109,8 +109,8 @@ describe('Panel', () => {
 
       setKnobsHandler({ knobs, timestamp: +new Date() });
       const knobFromStory = {
-        'knob-foo': knobs.foo.value,
-        'knob-baz': knobs.baz.value,
+        'knob-foo': null,
+        'knob-baz': null,
       };
 
       expect(testApi.setQueryParams).toHaveBeenCalledWith(knobFromStory);
@@ -130,7 +130,7 @@ describe('Panel', () => {
         onStory: jest.fn(),
       };
 
-      const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);
+      const wrapper = shallow(<Panel channel={testChannel} api={testApi} active />);
 
       const testChangedKnob = {
         name: 'foo',
@@ -140,8 +140,8 @@ describe('Panel', () => {
       wrapper.instance().handleChange(testChangedKnob);
       expect(testChannel.emit).toHaveBeenCalledWith('addon:knobs:knobChange', testChangedKnob);
 
-      const paramsChange = { 'knob-foo': 'changed text' };
-      expect(testApi.setQueryParams).toHaveBeenCalledWith(paramsChange);
+      // const paramsChange = { 'knob-foo': 'changed text' };
+      // expect(testApi.setQueryParams).toHaveBeenCalledWith(paramsChange);
     });
   });
 });
diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js
index 6ccfedb1ae2..28e2851dd37 100644
--- a/addons/knobs/src/components/types/Array.js
+++ b/addons/knobs/src/components/types/Array.js
@@ -1,24 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
 
-import Textarea from 'react-textarea-autosize';
-import debounce from 'lodash.debounce';
-
-const StyledTextarea = styled(Textarea)({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'middle',
-  height: '26px',
-  width: '100%',
-  maxWidth: '100%',
-  outline: 'none',
-  border: '1px solid #f7f4f4',
-  borderRadius: 2,
-  fontSize: 11,
-  padding: '5px',
-  color: '#555',
-});
+import { Textarea } from '@storybook/components';
 
 function formatArray(value, separator) {
   if (value === '') {
@@ -28,34 +11,21 @@ function formatArray(value, separator) {
 }
 
 class ArrayType extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      value: props.knob.value.join(props.knob.separator),
-    };
-
-    this.onChange = debounce(this.props.onChange, 200);
-  }
-
-  componentWillUnmount() {
-    this.onChange.cancel();
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = e => {
     const { knob } = this.props;
     const { value } = e.target;
     const newVal = formatArray(value, knob.separator);
-
-    this.setState({ value });
-    this.onChange(newVal);
+    this.props.onChange(newVal);
   };
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
-    return <StyledTextarea id={knob.name} value={value} onChange={this.handleChange} />;
+    return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
   }
 }
 
diff --git a/addons/knobs/src/components/types/Button.js b/addons/knobs/src/components/types/Button.js
index 7d375443526..85d08d30dd2 100644
--- a/addons/knobs/src/components/types/Button.js
+++ b/addons/knobs/src/components/types/Button.js
@@ -1,26 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import styled from 'react-emotion';
-
-const Button = styled('button')({
-  height: '26px',
-});
+import { Button } from '@storybook/components';
 
 const ButtonType = ({ knob, onClick }) => (
-  <Button type="button" id={knob.name} onClick={() => onClick(knob)}>
+  <Button type="button" onClick={() => onClick(knob)}>
     {knob.name}
   </Button>
 );
 
-ButtonType.defaultProps = {
-  knob: {},
-};
-
 ButtonType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-  }),
+  }).isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
index 3faf6ccd94a..0d3521f8611 100644
--- a/addons/knobs/src/components/types/Color.js
+++ b/addons/knobs/src/components/types/Color.js
@@ -4,22 +4,15 @@ import React from 'react';
 import { SketchPicker } from 'react-color';
 
 import styled from 'react-emotion';
-import debounce from 'lodash.debounce';
 
-const SwatchButton = styled('button')({
-  background: '#fff',
-  borderRadius: '1px',
-  border: '1px solid rgb(247, 244, 244)',
-  display: 'inline-block',
-  cursor: 'pointer',
-  width: '100%',
-  padding: 0,
-});
+import { Button } from '@storybook/components';
+
 const Swatch = styled('div')({
-  width: 'auto',
-  height: '20px',
-  borderRadius: '2px',
-  margin: 5,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 3,
+  width: 28,
 });
 const Popover = styled('div')({
   position: 'absolute',
@@ -27,23 +20,18 @@ const Popover = styled('div')({
 });
 
 class ColorType extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      displayColorPicker: false,
-      value: props.knob.value,
-    };
-
-    this.onChange = debounce(props.onChange, 200);
-  }
+  state = {
+    displayColorPicker: false,
+  };
 
   componentDidMount() {
     document.addEventListener('mousedown', this.handleWindowMouseDown);
   }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleWindowMouseDown);
-    this.onChange.cancel();
   }
 
   handleWindowMouseDown = e => {
@@ -62,35 +50,30 @@ class ColorType extends React.Component {
   };
 
   handleChange = color => {
-    this.setState({
-      value: color,
-    });
-
-    this.onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`);
+    this.props.onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`);
   };
 
   render() {
     const { knob } = this.props;
-    const { displayColorPicker, value } = this.state;
+    const { displayColorPicker } = this.state;
     const colorStyle = {
       background: knob.value,
     };
 
     return (
-      <div id={knob.name}>
-        <SwatchButton type="button" onClick={this.handleClick}>
-          <Swatch style={colorStyle} />
-        </SwatchButton>
+      <Button type="button" onClick={this.handleClick} size="flex">
+        {knob.value}
+        <Swatch style={colorStyle} />
         {displayColorPicker ? (
           <Popover
             innerRef={e => {
               this.popover = e;
             }}
           >
-            <SketchPicker color={value} onChange={this.handleChange} />
+            <SketchPicker color={knob.value} onChange={this.handleChange} />
           </Popover>
         ) : null}
-      </div>
+      </Button>
     );
   }
 }
diff --git a/addons/knobs/src/components/types/Date/index.js b/addons/knobs/src/components/types/Date/index.js
index b702295e336..edb8ffbb656 100644
--- a/addons/knobs/src/components/types/Date/index.js
+++ b/addons/knobs/src/components/types/Date/index.js
@@ -1,73 +1,43 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'react-emotion';
+
 import Datetime from 'react-datetime';
-import insertCss from 'insert-css';
-import debounce from 'lodash.debounce';
+
 import style from './styles';
 
-const customStyle = `
-  .rdt input {
-    outline: 0;
-    width: 100%;
-    border: 1px solid #f7f4f4;
-    border-radius: 2px;
-    font-size: 11px;
-    padding: 5px;
-    color: #555;
-    display: table-cell;
-    box-sizing: border-box;
-  }
-`;
-
-insertCss(style);
-insertCss(customStyle);
+const DateInput = styled(Datetime)(style);
 
 class DateType extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      value: props.knob.value,
-    };
-
-    this.onChange = debounce(props.onChange, 200);
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = date => {
     const value = date.valueOf();
-    this.setState({ value });
-
-    this.onChange(value);
+    this.props.onChange(value);
   };
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
     return (
-      <div>
-        <Datetime
-          id={knob.name}
-          value={value ? new Date(value) : null}
-          type="date"
-          onChange={this.handleChange}
-        />
-      </div>
+      <DateInput
+        value={knob.value ? new Date(knob.value) : null}
+        type="date"
+        onChange={this.handleChange}
+        size="flex"
+      />
     );
   }
 }
 
-DateType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
 DateType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.number,
-  }),
-  onChange: PropTypes.func,
+  }).isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 DateType.serialize = value => String(value);
diff --git a/addons/knobs/src/components/types/Date/styles.js b/addons/knobs/src/components/types/Date/styles.js
index db6b7bb5877..ef77a613205 100644
--- a/addons/knobs/src/components/types/Date/styles.js
+++ b/addons/knobs/src/components/types/Date/styles.js
@@ -1,219 +1,202 @@
-export default `
-  .rdt {
-    position: relative;
-  }
-  .rdtPicker {
-    display: none;
-    position: absolute;
-    width: 200px;
-    padding: 4px;
-    margin-top: 1px;
-    z-index: 99999 !important;
-    background: #fff;
-    box-shadow: 0 1px 3px rgba(0,0,0,.1);
-    border: 1px solid #f9f9f9;
-  }
-  .rdtOpen .rdtPicker {
-    display: block;
-  }
-  .rdtStatic .rdtPicker {
-    box-shadow: none;
-    position: static;
-  }
+import { Input } from '@storybook/components';
 
-  .rdtPicker .rdtTimeToggle {
-    text-align: center;
-    font-size:11px;
-  }
+export default ({ theme, size }) => ({
+  ...Input.sizes({ size, theme }),
+  '&.rdt': {
+    position: 'relative',
+  },
+  '& > input': {
+    width: '100%',
+    height: 32,
+    ...Input.styles({ theme }),
+    ...Input.alignment({ theme }),
+  },
+  '& .rdtPicker': {
+    display: 'none',
+    position: 'absolute',
+    width: 200,
+    padding: 4,
+    marginTop: 1,
+    zIndex: 99999,
+    background: theme.barFill,
+  },
+  '&.rdtOpen .rdtPicker': {
+    display: 'block',
+  },
+  '&.rdt .rdtPicker': {
+    boxShadow: 'none',
+    position: 'static',
+  },
 
-  .rdtPicker table {
-    width: 100%;
-    margin: 0;
-  }
-  .rdtPicker td,
-  .rdtPicker th {
-    text-align: center;
-    height: 28px;
-  }
-  .rdtPicker td {
-    cursor: pointer;
-  }
-  .rdtPicker td.rdtDay:hover,
-  .rdtPicker td.rdtHour:hover,
-  .rdtPicker td.rdtMinute:hover,
-  .rdtPicker td.rdtSecond:hover,
-  .rdtPicker .rdtTimeToggle:hover {
-    background: #eeeeee;
-    cursor: pointer;
-  }
-  .rdtPicker td.rdtOld,
-  .rdtPicker td.rdtNew {
-    color: #999999;
-  }
-  .rdtPicker td.rdtToday {
-    position: relative;
-  }
-  .rdtPicker td.rdtToday:before {
-    content: '';
-    display: inline-block;
-    border-left: 7px solid transparent;
-    border-bottom: 7px solid #428bca;
-    border-top-color: rgba(0, 0, 0, 0.2);
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-  }
-  .rdtPicker td.rdtActive,
-  .rdtPicker td.rdtActive:hover {
-    background-color: #428bca;
-    color: #fff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  }
-  .rdtPicker td.rdtActive.rdtToday:before {
-    border-bottom-color: #fff;
-  }
-  .rdtPicker td.rdtDisabled,
-  .rdtPicker td.rdtDisabled:hover {
-    background: none;
-    color: #999999;
-    cursor: not-allowed;
-  }
+  '& .rdtPicker .rdtTimeToggle': {
+    textAlign: 'center',
+    fontSize: 11,
+  },
 
-  .rdtPicker td span.rdtOld {
-    color: #999999;
-  }
-  .rdtPicker td span.rdtDisabled,
-  .rdtPicker td span.rdtDisabled:hover {
-    background: none;
-    color: #999999;
-    cursor: not-allowed;
-  }
-  .rdtPicker th {
-    border-bottom: 1px solid #f9f9f9;
-  }
-  .rdtPicker .dow {
-    width: 14.2857%;
-    font-size: 11px;
-    border-bottom: none;
-  }
-  .rdtPicker th.rdtSwitch {
-    width: 100px;
-    font-size: 11px;
-  }
-  .rdtPicker th.rdtNext,
-  .rdtPicker th.rdtPrev {
-    font-size: 11px;
-    vertical-align: top;
-  }
+  '& .rdtPicker table': {
+    width: '100%',
+    margin: 0,
+  },
+  '& .rdtPicker td, & .rdtPicker th': {
+    textAlign: 'center',
+    height: 32,
+    boxSizing: 'border-box',
+  },
+  '& .rdtPicker td': {
+    cursor: 'pointer',
+  },
+  '& .rdtPicker td.rdtDay:hover, & .rdtPicker td.rdtHour:hover, & .rdtPicker td.rdtMinute:hover, & .rdtPicker td.rdtSecond:hover, & .rdtPicker .rdtTimeToggle:hover': {
+    color: theme.highlightColor,
+    textDecoration: 'underline',
+    cursor: 'pointer',
+  },
+  '& .rdtPicker td.rdtOld, & .rdtPicker td.rdtNew': {
+    color: '#999999',
+  },
+  '& .rdtPicker td.rdtToday': {
+    position: 'relative',
+  },
+  '& .rdtPicker td.rdtToday:before': {
+    content: '""',
+    display: 'inline-block',
+    borderLeft: '7px solid transparent',
+    borderBottom: `7px solid ${theme.highlightColor}`,
+    borderTopColor: 'rgba(0, 0, 0, 0.2)',
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+  },
+  '& .rdtPicker td.rdtActive, & .rdtPicker td.rdtActive:hover': {
+    backgroundColor: theme.highlightColor,
+    color: '#fff',
+    textShadow:
+      '0 -1px 0 rgba(0,0,0,0.25), 0 1px 0 rgba(0,0,0,0.25), -1px 0 0 rgba(0,0,0,0.25), 1px 0 0 rgba(0,0,0,0.25)',
+  },
+  '& .rdtPicker td.rdtActive.rdtToday:before': {
+    borderBottomColor: '#fff',
+  },
+  '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
+    background: 'none',
+    color: '#999999',
+    cursor: 'not-allowed',
+  },
 
-  .rdtPrev span,
-  .rdtNext span {
-    display: block;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none;   /* Chrome/Safari/Opera */
-    -khtml-user-select: none;    /* Konqueror */
-    -moz-user-select: none;      /* Firefox */
-    -ms-user-select: none;       /* Internet Explorer/Edge */
-    user-select: none;
-  }
+  '& .rdtPicker td span.rdtOld': {
+    color: '#999999',
+  },
+  '& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover': {
+    background: 'none',
+    color: '#999999',
+    cursor: 'not-allowed',
+  },
+  '& .rdtPicker th': {
+    borderBottom: `1px solid ${theme.highlightColor}`,
+  },
+  '& .rdtPicker .dow': {
+    width: '14.2857%',
+    fontSize: 11,
+    borderBottom: 'none',
+  },
+  '& .rdtPicker th.rdtSwitch': {
+    width: 100,
+    fontSize: 11,
+  },
+  '& .rdtPicker th.rdtNext, & .rdtPicker th.rdtPrev': {
+    fontSize: 11,
+    verticalAlign: 'middle',
+  },
 
-  .rdtPicker th.rdtDisabled,
-  .rdtPicker th.rdtDisabled:hover {
-    background: none;
-    color: #999999;
-    cursor: not-allowed;
-  }
-  .rdtPicker thead tr:first-child th {
-    cursor: pointer;
-  }
-  .rdtPicker thead tr:first-child th:hover {
-    background: #eeeeee;
-  }
+  '& .rdtPrev span, & .rdtNext span': {
+    display: 'block',
+    userSelect: 'none',
+  },
 
-  .rdtPicker tfoot {
-    border-top: 1px solid #f9f9f9;
-  }
+  '& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover': {
+    background: 'none',
+    color: '#999999',
+    cursor: 'not-allowed',
+  },
+  '& .rdtPicker thead tr:first-child th': {
+    cursor: 'pointer',
+  },
+  '& .rdtPicker thead tr:first-child th:hover': {
+    color: theme.highlightColor,
+  },
 
-  .rdtPicker button {
-    border: none;
-    background: none;
-    cursor: pointer;
-  }
-  .rdtPicker button:hover {
-    background-color: #eee;
-  }
+  '& .rdtPicker tfoot': {
+    borderTop: '1px solid #f9f9f9',
+  },
 
-  .rdtPicker thead button {
-    width: 100%;
-    height: 100%;
-  }
+  '& .rdtPicker button': {
+    border: 'none',
+    background: 'none',
+    cursor: 'pointer',
+  },
+  '& .rdtPicker button:hover': {
+    color: theme.highlightColor,
+  },
 
-  td.rdtMonth,
-  td.rdtYear {
-    height: 50px;
-    width: 25%;
-    cursor: pointer;
-  }
-  td.rdtMonth:hover,
-  td.rdtYear:hover {
-    background: #eee;
-  }
+  '& .rdtPicker thead button': {
+    width: '100%',
+    height: '100%',
+  },
 
-  td.rdtDay {
-    font-size: 11px
-  }
+  '& td.rdtMonth, & td.rdtYear': {
+    height: 50,
+    width: '25%',
+    cursor: 'pointer',
+  },
+  '& td.rdtMonth:hover, & td.rdtYear:hover': {
+    color: theme.highlightColor,
+  },
 
-  .rdtCounters {
-    display: inline-block;
-  }
+  '& td.rdtDay': {
+    fontSize: 11,
+  },
 
-  .rdtCounters > div {
-    float: left;
-  }
+  '& .rdtCounters': {
+    display: 'inline-block',
+  },
 
-  .rdtCounter {
-    height: 100px;
-  }
+  '& .rdtCounters > div': {
+    float: 'left',
+  },
 
-  .rdtCounter {
-    width: 40px;
-  }
+  '& .rdtCounter': {
+    height: 100,
+    width: 40,
+  },
 
-  .rdtCounterSeparator {
-    line-height: 100px;
-  }
+  '& .rdtCounterSeparator': {
+    lineHeight: '100px',
+  },
 
-  .rdtCounter .rdtBtn {
-    height: 40%;
-    line-height: 40px;
-    cursor: pointer;
-    display: block;
-    font-size: 11px;
+  '& .rdtCounter .rdtBtn': {
+    height: '40%',
+    lineHeight: '40px',
+    cursor: 'pointer',
+    display: 'block',
+    fontSize: 11,
 
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none;   /* Chrome/Safari/Opera */
-    -khtml-user-select: none;    /* Konqueror */
-    -moz-user-select: none;      /* Firefox */
-    -ms-user-select: none;       /* Internet Explorer/Edge */
-    user-select: none;
-  }
-  .rdtCounter .rdtBtn:hover {
-    background: #eee;
-  }
-  .rdtCounter .rdtCount {
-    height: 20%;
-    font-size: 11px;
-  }
+    userSelect: 'none',
+  },
+  '& .rdtCounter .rdtBtn:hover': {
+    color: theme.highlightColor,
+  },
+  '& .rdtCounter .rdtCount': {
+    height: '20%',
+    fontSize: 11,
+  },
 
-  .rdtMilli {
-    vertical-align: middle;
-    padding-left: 8px;
-    width: 48px;
-  }
+  '& .rdtMilli': {
+    verticalSlign: 'middle',
+    paddingLeft: 8,
+    width: 48,
+  },
 
-  .rdtMilli input {
-    width: 100%;
-    font-size: 11px;
-    margin-top: 37px;
-  }
-`;
+  '& .rdtMilli input': {
+    width: '100%',
+    fontSize: 11,
+    marginTop: 37,
+  },
+});
diff --git a/addons/knobs/src/components/types/Files.js b/addons/knobs/src/components/types/Files.js
index 43f3e6117eb..0cb86bc123b 100644
--- a/addons/knobs/src/components/types/Files.js
+++ b/addons/knobs/src/components/types/Files.js
@@ -1,22 +1,12 @@
 import { FileReader } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import styled from 'react-emotion';
 
-const Input = styled('input')({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'middle',
-  height: '26px',
-  width: '100%',
-  maxWidth: '100%',
-  outline: 'none',
-  border: '1px solid #f7f4f4',
-  borderRadius: 2,
-  fontSize: 11,
-  padding: '5px',
-  color: '#555',
+import { Input } from '@storybook/components';
+
+const FileInput = styled(Input)({
+  paddingTop: 4,
 });
 
 function fileReaderPromise(file) {
@@ -28,12 +18,12 @@ function fileReaderPromise(file) {
 }
 
 const FilesType = ({ knob, onChange }) => (
-  <Input
-    id={knob.name}
+  <FileInput
     type="file"
     multiple
     onChange={e => Promise.all(Array.from(e.target.files).map(fileReaderPromise)).then(onChange)}
     accept={knob.accept}
+    size="flex"
   />
 );
 
diff --git a/addons/knobs/src/components/types/Number.js b/addons/knobs/src/components/types/Number.js
index 1c2fe118a3d..8936baeaec0 100644
--- a/addons/knobs/src/components/types/Number.js
+++ b/addons/knobs/src/components/types/Number.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import styled from 'react-emotion';
-import debounce from 'lodash.debounce';
+
+import { Input } from '@storybook/components';
 
 const base = {
   boxSizing: 'border-box',
@@ -15,11 +16,6 @@ const base = {
   color: '#444',
 };
 
-const TextInput = styled('input')(base, {
-  display: 'table-cell',
-  width: '100%',
-  verticalAlign: 'middle',
-});
 const RangeInput = styled('input')(base, {
   display: 'table-cell',
   flexGrow: 1,
@@ -37,78 +33,62 @@ const RangeWrapper = styled('div')({
 });
 
 class NumberType extends React.Component {
-  constructor(props) {
-    super(props);
-    let { value } = props.knob;
-    if (value === null || value === undefined) {
-      value = '';
-    }
-    this.state = { value };
-
-    this.onChange = debounce(props.onChange, 400);
-  }
-
-  componentWillUnmount() {
-    this.onChange.cancel();
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = event => {
     const { value } = event.target;
 
-    this.setState({ value });
-
     let parsedValue = Number(value);
 
     if (Number.isNaN(parsedValue) || value === '') {
       parsedValue = null;
     }
 
-    this.onChange(parsedValue);
+    this.props.onChange(parsedValue);
   };
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
     return knob.range ? (
       <RangeWrapper>
         <RangeLabel>{knob.min}</RangeLabel>
         <RangeInput
-          id={knob.name}
-          value={value}
+          value={knob.value}
           type="range"
           min={knob.min}
           max={knob.max}
           step={knob.step}
           onChange={this.handleChange}
         />
-        <RangeLabel>{`${value} / ${knob.max}`}</RangeLabel>
+        <RangeLabel>{`${knob.value} / ${knob.max}`}</RangeLabel>
       </RangeWrapper>
     ) : (
-      <TextInput
-        id={knob.name}
-        value={value}
+      <Input
+        value={knob.value}
         type="number"
         min={knob.min}
         max={knob.max}
         step={knob.step}
         onChange={this.handleChange}
+        size="flex"
       />
     );
   }
 }
 
-NumberType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
 NumberType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.number,
-  }),
-  onChange: PropTypes.func,
+    range: PropTypes.bool,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    step: PropTypes.number,
+  }).isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 NumberType.serialize = value => (value === null || value === undefined ? '' : String(value));
diff --git a/addons/knobs/src/components/types/Object.js b/addons/knobs/src/components/types/Object.js
index 59c25a5315a..08ef0f1c0cc 100644
--- a/addons/knobs/src/components/types/Object.js
+++ b/addons/knobs/src/components/types/Object.js
@@ -1,58 +1,38 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styled from 'react-emotion';
-
-import Textarea from 'react-textarea-autosize';
-import debounce from 'lodash.debounce';
-
-const StyledTextarea = styled(Textarea)({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'middle',
-  width: '100%',
-  outline: 'none',
-  border: '1px solid #f7f4f4',
-  borderRadius: 2,
-  fontSize: 11,
-  padding: '5px',
-  color: '#555',
-  fontFamily: 'monospace',
-});
+import PropTypes from 'prop-types';
+import deepEqual from 'fast-deep-equal';
+import { polyfill } from 'react-lifecycles-compat';
+import { Textarea } from '@storybook/components';
 
 class ObjectType extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    try {
-      this.state = {
-        value: JSON.stringify(props.knob.value, null, 2),
-        failed: false,
-      };
-    } catch (e) {
-      this.state = {
-        // if it can't be JSON stringified, it's probably some weird stuff
-        value: 'Default object cannot not be JSON stringified',
-        failed: true,
-      };
+  static getDerivedStateFromProps(props, state) {
+    if (!state || !deepEqual(props.knob.value, state.json)) {
+      try {
+        return {
+          value: JSON.stringify(props.knob.value, null, 2),
+          failed: false,
+          json: props.knob.value,
+        };
+      } catch (e) {
+        return { value: 'Object cannot be stringified', failed: true };
+      }
     }
-
-    this.onChange = debounce(props.onChange, 200);
-  }
-
-  componentWillUnmount() {
-    this.onChange.cancel();
+    return null;
   }
 
   handleChange = e => {
     const { value } = e.target;
 
     try {
-      const json = JSON.parse(e.target.value.trim());
-      this.onChange(json);
+      const json = JSON.parse(value.trim());
       this.setState({
         value,
+        json,
         failed: false,
       });
+      if (deepEqual(this.props.knob.value, this.state.json)) {
+        this.props.onChange(json);
+      }
     } catch (err) {
       this.setState({
         value,
@@ -62,40 +42,30 @@ class ObjectType extends Component {
   };
 
   render() {
-    const { knob } = this.props;
     const { value, failed } = this.state;
-    const extraStyle = {};
-
-    if (failed) {
-      extraStyle.border = '1px solid #fadddd';
-      extraStyle.backgroundColor = '#fff5f5';
-    }
 
     return (
-      <StyledTextarea
-        id={knob.name}
-        style={extraStyle}
+      <Textarea
+        valid={failed ? 'error' : null}
         value={value}
         onChange={this.handleChange}
+        size="flex"
       />
     );
   }
 }
 
-ObjectType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
 ObjectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  }),
-  onChange: PropTypes.func,
+  }).isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 ObjectType.serialize = object => JSON.stringify(object);
 ObjectType.deserialize = value => (value ? JSON.parse(value) : {});
 
+polyfill(ObjectType);
+
 export default ObjectType;
diff --git a/addons/knobs/src/components/types/Select.js b/addons/knobs/src/components/types/Select.js
index 050a8d3d0c5..ae85099fdc8 100644
--- a/addons/knobs/src/components/types/Select.js
+++ b/addons/knobs/src/components/types/Select.js
@@ -1,22 +1,9 @@
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'react-emotion';
 
-const Select = styled('select')({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'middle',
-  height: '26px',
-  width: '100%',
-  outline: 'none',
-  border: '1px solid #f7f4f4',
-  borderRadius: 2,
-  fontSize: 11,
-  padding: '5px',
-  color: '#555',
-});
+import { Select } from '@storybook/components';
 
-class SelectType extends React.Component {
+class SelectType extends Component {
   renderOptionList({ options }) {
     if (Array.isArray(options)) {
       return options.map(val => this.renderOption(val, val));
@@ -34,7 +21,7 @@ class SelectType extends React.Component {
     const { knob, onChange } = this.props;
 
     return (
-      <Select id={knob.name} value={knob.value} onChange={e => onChange(e.target.value)}>
+      <Select value={knob.value} onChange={e => onChange(e.target.value)} size="flex">
         {this.renderOptionList(knob)}
       </Select>
     );
diff --git a/addons/knobs/src/components/types/Text.js b/addons/knobs/src/components/types/Text.js
index 4ab68278981..594b3c35907 100644
--- a/addons/knobs/src/components/types/Text.js
+++ b/addons/knobs/src/components/types/Text.js
@@ -1,53 +1,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
 
-import Textarea from 'react-textarea-autosize';
-import debounce from 'lodash.debounce';
-
-const StyledTextarea = styled(Textarea)({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'middle',
-  height: '26px',
-  width: '100%',
-  maxWidth: '100%',
-  outline: 'none',
-  border: '1px solid #f7f4f4',
-  borderRadius: 2,
-  fontSize: 11,
-  padding: '5px',
-  color: '#555',
-});
+import { Textarea } from '@storybook/components';
 
 class TextType extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      value: props.knob.value,
-    };
-
-    this.onChange = debounce(props.onChange, 200);
-  }
-
-  componentWillUnmount() {
-    this.onChange.cancel();
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = event => {
     const { value } = event.target;
-
-    this.setState({ value });
-
-    this.onChange(value);
+    this.props.onChange(value);
   };
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
-    return <StyledTextarea id={knob.name} value={value} onChange={this.handleChange} />;
+    return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
   }
 }
 
diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js
index f78acd1dffe..6aec38d440c 100644
--- a/addons/knobs/src/index.js
+++ b/addons/knobs/src/index.js
@@ -77,6 +77,7 @@ export const withKnobs = makeDecorator({
   name: 'withKnobs',
   parameterName: 'knobs',
   skipIfNoParametersOrOptions: false,
+  allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const storyOptions = parameters || options;
     const allOptions = { ...defaultOptions, ...storyOptions };
diff --git a/addons/knobs/src/register.js b/addons/knobs/src/register.js
index b208cef4109..838fbc06202 100644
--- a/addons/knobs/src/register.js
+++ b/addons/knobs/src/register.js
@@ -4,9 +4,9 @@ import Panel from './components/Panel';
 
 addons.register('storybooks/storybook-addon-knobs', api => {
   const channel = addons.getChannel();
-
   addons.addPanel('storybooks/storybook-addon-knobs', {
     title: 'Knobs',
-    render: () => <Panel channel={channel} api={api} key="knobs-panel" />,
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <Panel channel={channel} api={api} key="knobs-panel" active={active} />,
   });
 });
diff --git a/addons/links/package.json b/addons/links/package.json
index 6a29a32e67b..03f2f0572c6 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Story Links addon for storybook",
   "keywords": [
     "storybook"
@@ -20,9 +20,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.1"
diff --git a/addons/notes/package.json b/addons/notes/package.json
index 4764206b17c..fd907e4fef7 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-notes",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
@@ -18,13 +18,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "marked": "^0.4.0",
     "prop-types": "^15.6.1",
-    "react-emotion": "^9.1.3",
-    "util-deprecate": "^1.0.2"
+    "react-emotion": "^9.1.3"
   },
   "peerDependencies": {
     "react": "*"
diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js
index 1f983df6da1..0da32aa7871 100644
--- a/addons/notes/src/index.js
+++ b/addons/notes/src/index.js
@@ -10,6 +10,7 @@ export const withNotes = makeDecorator({
   name: 'withNotes',
   parameterName: 'notes',
   skipIfNoParametersOrOptions: true,
+  allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const channel = addons.getChannel();
 
diff --git a/addons/notes/src/register.js b/addons/notes/src/register.js
index bae15140141..44ea49adbae 100644
--- a/addons/notes/src/register.js
+++ b/addons/notes/src/register.js
@@ -44,6 +44,7 @@ export class Notes extends React.Component {
   }
 
   render() {
+    const { active } = this.props;
     const { text } = this.state;
     const textAfterFormatted = text
       ? text
@@ -52,31 +53,34 @@ export class Notes extends React.Component {
           .replace(/\n/g, '<br />')
       : '';
 
-    return (
+    return active ? (
       <Panel
         className="addon-notes-container"
         dangerouslySetInnerHTML={{ __html: textAfterFormatted }}
       />
-    );
+    ) : null;
   }
 }
 
 Notes.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  channel: PropTypes.object,
-  // eslint-disable-next-line react/forbid-prop-types
-  api: PropTypes.object,
-};
-Notes.defaultProps = {
-  channel: {},
-  api: {},
+  active: PropTypes.bool.isRequired,
+  channel: PropTypes.shape({
+    on: PropTypes.func,
+    emit: PropTypes.func,
+    removeListener: PropTypes.func,
+  }).isRequired,
+  api: PropTypes.shape({
+    onStory: PropTypes.func,
+    getQueryParam: PropTypes.func,
+    setQueryParams: PropTypes.func,
+  }).isRequired,
 };
 
-// Register the addon with a unique name.
 addons.register('storybook/notes', api => {
-  // Also need to set a unique name to the panel.
+  const channel = addons.getChannel();
   addons.addPanel('storybook/notes/panel', {
     title: 'Notes',
-    render: () => <Notes channel={addons.getChannel()} api={api} />,
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <Notes channel={channel} api={api} active={active} />,
   });
 });
diff --git a/addons/options/package.json b/addons/options/package.json
index c4b312ead1c..053faf14cfb 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Options addon for storybook",
   "keywords": [
     "storybook"
@@ -19,7 +19,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0"
   },
   "peerDependencies": {
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index 908ad6b681a..711bc1c3a47 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
     "global": "^4.3.2",
@@ -24,10 +24,10 @@
     "read-pkg-up": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/react": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/react": "4.0.0-alpha.14",
     "enzyme-to-json": "^3.3.4",
     "react": "^16.4.0"
   }
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 2d9083d171d..c41576231a5 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Image snappshots addition to StoryShots base on puppeteer",
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
     "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/node-logger": "4.0.0-alpha.10",
+    "@storybook/node-logger": "4.0.0-alpha.14",
     "jest-image-snapshot": "^2.4.2",
     "puppeteer": "^1.4.0"
   },
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 5afcd93755b..62b5cccc6f1 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Stories addon for storybook",
   "keywords": [
     "storybook"
@@ -20,8 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "estraverse": "^4.2.0",
     "loader-utils": "^1.1.0",
diff --git a/addons/storysource/src/StoryPanel.js b/addons/storysource/src/StoryPanel.js
index 3b56f65723e..9e4b542f136 100644
--- a/addons/storysource/src/StoryPanel.js
+++ b/addons/storysource/src/StoryPanel.js
@@ -7,6 +7,7 @@ import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/pr
 import { createElement } from 'react-syntax-highlighter';
 import { EVENT_ID } from './';
 
+// TODO: take from theme
 const highlighterTheme = {
   ...darcula,
   'pre[class*="language-"]': {
@@ -175,7 +176,8 @@ export default class StoryPanel extends Component {
   };
 
   render() {
-    return (
+    const { active } = this.props;
+    return active ? (
       <SyntaxHighlighter
         language="jsx"
         showLineNumbers="true"
@@ -185,11 +187,12 @@ export default class StoryPanel extends Component {
       >
         {this.state.source}
       </SyntaxHighlighter>
-    );
+    ) : null;
   }
 }
 
 StoryPanel.propTypes = {
+  active: PropTypes.bool.isRequired,
   api: PropTypes.shape({
     selectStory: PropTypes.func.isRequired,
   }).isRequired,
diff --git a/addons/storysource/src/manager.js b/addons/storysource/src/manager.js
index 1523fefcea2..810da1c70f9 100644
--- a/addons/storysource/src/manager.js
+++ b/addons/storysource/src/manager.js
@@ -8,7 +8,8 @@ export function register() {
     const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Story',
-      render: () => <StoryPanel channel={channel} api={api} />,
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <StoryPanel channel={channel} api={api} active={active} />,
     });
   });
 }
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index fa6673e10f9..3052fc1f3c7 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook addon to change the viewport size to mobile",
   "keywords": [
     "storybook"
@@ -11,13 +11,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
-    "emotion": "^9.1.3",
     "global": "^4.3.2",
-    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",
     "util-deprecate": "^1.0.2"
diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 7a3b7bf1cdd..588530c8682 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -1,13 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { document } from 'global';
-import debounce from 'lodash.debounce';
-
 import styled from 'react-emotion';
 
+import { ActionBar, ActionButton, Button, Select, Field } from '@storybook/components';
+
 import { resetViewport, viewportsTransformer } from './viewportInfo';
-import { SelectViewport } from './SelectViewport';
-import { RotateViewport } from './RotateViewport';
 import {
   SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
   CONFIGURE_VIEWPORT_EVENT_ID,
@@ -17,14 +15,13 @@ import {
   DEFAULT_VIEWPORT,
 } from '../../shared';
 
-import { Button } from './styles';
-
 const storybookIframe = 'storybook-preview-iframe';
 const Container = styled('div')({
   padding: 15,
   width: '100%',
   boxSizing: 'border-box',
 });
+Container.displayName = 'Container';
 
 const getDefaultViewport = (viewports, candidateViewport) =>
   candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
@@ -32,35 +29,29 @@ const getDefaultViewport = (viewports, candidateViewport) =>
 const getViewports = viewports =>
   Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
 
-const setStoryDefaultViewportWait = 100;
-
 export class Panel extends Component {
   static defaultOptions = {
     viewports: INITIAL_VIEWPORTS,
     defaultViewport: DEFAULT_VIEWPORT,
   };
-
   static propTypes = {
-    channel: PropTypes.shape({}).isRequired,
-    api: PropTypes.shape({}).isRequired,
+    active: PropTypes.bool.isRequired,
+    api: PropTypes.shape({
+      selectStory: PropTypes.func.isRequired,
+    }).isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
   };
 
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      viewport: DEFAULT_VIEWPORT,
-      defaultViewport: DEFAULT_VIEWPORT,
-      viewports: viewportsTransformer(INITIAL_VIEWPORTS),
-      isLandscape: false,
-    };
-
-    this.previousViewport = DEFAULT_VIEWPORT;
-
-    this.setStoryDefaultViewport = debounce(
-      this.setStoryDefaultViewport,
-      setStoryDefaultViewportWait
-    );
-  }
+  state = {
+    viewport: DEFAULT_VIEWPORT,
+    defaultViewport: DEFAULT_VIEWPORT,
+    viewports: viewportsTransformer(INITIAL_VIEWPORTS),
+    isLandscape: false,
+  };
 
   componentDidMount() {
     const { channel, api } = this.props;
@@ -113,6 +104,7 @@ export class Panel extends Component {
   };
 
   iframe = undefined;
+  previousViewport = DEFAULT_VIEWPORT;
 
   changeViewport = viewport => {
     const { viewport: previousViewport } = this.state;
@@ -180,28 +172,39 @@ export class Panel extends Component {
       viewport,
       viewports,
     } = this.state;
+    const { active } = this.props;
 
-    const disableDefault = viewport === storyDefaultViewport;
+    const isResponsive = viewport === storyDefaultViewport;
 
-    return (
+    return active ? (
       <Container>
-        <SelectViewport
-          viewports={viewports}
-          defaultViewport={storyDefaultViewport}
-          activeViewport={viewport}
-          onChange={e => this.changeViewport(e.target.value)}
-        />
+        <Field label="Device">
+          <Select value={viewport} onChange={e => this.changeViewport(e.target.value)} size="flex">
+            {Object.entries(viewports).map(([key, { name }]) => (
+              <option value={key} key={key}>
+                {key === defaultViewport ? `${name} (Default)` : name}
+              </option>
+            ))}
+          </Select>
+        </Field>
 
-        <RotateViewport
-          onClick={this.toggleLandscape}
-          disabled={disableDefault}
-          active={isLandscape}
-        />
+        {!isResponsive ? (
+          <Field label="Rotate">
+            <Button onClick={this.toggleLandscape} active={isLandscape} size="flex">
+              {isLandscape ? 'rotate to portrait' : 'rotate to landscape'}
+            </Button>
+          </Field>
+        ) : null}
 
-        <Button onClick={() => this.changeViewport(storyDefaultViewport)} disabled={disableDefault}>
-          Reset Viewport
-        </Button>
+        <ActionBar>
+          <ActionButton
+            onClick={() => this.changeViewport(storyDefaultViewport)}
+            disabled={isResponsive}
+          >
+            RESET
+          </ActionButton>
+        </ActionBar>
       </Container>
-    );
+    ) : null;
   }
 }
diff --git a/addons/viewport/src/manager/components/RotateViewport.js b/addons/viewport/src/manager/components/RotateViewport.js
deleted file mode 100644
index 4473d26d2d9..00000000000
--- a/addons/viewport/src/manager/components/RotateViewport.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Label, Row, Button } from './styles';
-
-export const RotateViewport = ({ active, ...props }) => (
-  <Row>
-    <Label htmlFor="rotate">Rotate</Label>
-    <Button id="rotate" {...props}>
-      {active ? 'Vertical' : 'Landscape'}
-    </Button>
-  </Row>
-);
-
-RotateViewport.propTypes = {
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
-  active: PropTypes.bool,
-};
-
-RotateViewport.defaultProps = {
-  disabled: true,
-  active: false,
-};
diff --git a/addons/viewport/src/manager/components/SelectViewport.js b/addons/viewport/src/manager/components/SelectViewport.js
deleted file mode 100644
index 166b6797eab..00000000000
--- a/addons/viewport/src/manager/components/SelectViewport.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Label, Row, Select } from './styles';
-
-export function SelectViewport({ viewports, defaultViewport, activeViewport, onChange }) {
-  return (
-    <Row>
-      <Label htmlFor="device">Device</Label>
-      <Select id="device" value={activeViewport} onChange={onChange}>
-        {Object.entries(viewports).map(([key, { name }]) => (
-          <option value={key} key={key}>
-            {key === defaultViewport ? `(Default) ${name}` : name}
-          </option>
-        ))}
-      </Select>
-    </Row>
-  );
-}
-
-SelectViewport.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  activeViewport: PropTypes.string.isRequired,
-  viewports: PropTypes.shape({}).isRequired,
-  defaultViewport: PropTypes.string.isRequired,
-};
diff --git a/addons/viewport/src/manager/components/styles.js b/addons/viewport/src/manager/components/styles.js
deleted file mode 100644
index c1c84b95787..00000000000
--- a/addons/viewport/src/manager/components/styles.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from 'react-emotion';
-
-export const Row = styled('div')({
-  width: '100%',
-  display: 'flex',
-  marginBottom: 15,
-});
-
-export const Label = styled('label')({
-  width: 80,
-  marginRight: 15,
-});
-
-const actionColor = 'rgb(247, 247, 247)';
-
-const basebutton = {
-  color: 'rgb(85, 85, 85)',
-  width: '100%',
-  border: `1px solid ${actionColor}`,
-  backgroundColor: actionColor,
-  borderRadius: 4,
-  padding: 10,
-};
-
-export const Button = styled('button')(
-  basebutton,
-  ({ disabled }) =>
-    disabled
-      ? {
-          opacity: '0.5',
-          cursor: 'not-allowed',
-        }
-      : {}
-);
-
-export const Select = styled('select')(basebutton);
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index 6562e190749..ba83302ebdb 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { document } from 'global';
 
+import { ActionButton, Select } from '@storybook/components';
+
 import { Panel } from '../Panel';
 import { resetViewport, viewportsTransformer } from '../viewportInfo';
 import { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from '../../../shared';
@@ -9,8 +11,6 @@ import { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from '../../../shared';
 const initialViewportAt = index => Object.keys(INITIAL_VIEWPORTS)[index];
 const transformedInitialViewports = viewportsTransformer(INITIAL_VIEWPORTS);
 
-jest.mock('lodash.debounce', () => jest.fn(fn => fn));
-
 describe('Viewport/Panel', () => {
   const props = {
     channel: {
@@ -20,7 +20,9 @@ describe('Viewport/Panel', () => {
     },
     api: {
       onStory: jest.fn(),
+      selectStory: jest.fn(),
     },
+    active: true,
   };
 
   let subject;
@@ -324,16 +326,18 @@ describe('Viewport/Panel', () => {
 
     beforeEach(() => {
       subject.instance().changeViewport = jest.fn();
-      resetBtn = subject.find('Styled(button)');
+      resetBtn = subject.find(ActionButton);
     });
 
     it('enables the reset button if not default', () => {
       subject.setState({ viewport: 'responsive' });
-      resetBtn = subject.find('Styled(button)');
+
+      resetBtn = subject.find(ActionButton);
       expect(resetBtn).toHaveProp('disabled', true);
 
       subject.setState({ viewport: 'iphone6' });
-      resetBtn = subject.find('Styled(button)');
+
+      resetBtn = subject.find(ActionButton);
       expect(resetBtn).toHaveProp('disabled', false);
     });
 
@@ -347,32 +351,16 @@ describe('Viewport/Panel', () => {
     let select;
 
     beforeEach(() => {
-      select = subject.find('SelectViewport');
+      select = subject.find(Select);
       subject.instance().changeViewport = jest.fn();
     });
 
-    it('passes the activeViewport', () => {
-      expect(select.props()).toEqual(
-        expect.objectContaining({
-          activeViewport: DEFAULT_VIEWPORT,
-        })
-      );
+    it('passes the value', () => {
+      expect(select.props().value).toEqual('responsive');
     });
 
-    it('passes the defaultViewport', () => {
-      expect(select.props()).toEqual(
-        expect.objectContaining({
-          defaultViewport: DEFAULT_VIEWPORT,
-        })
-      );
-    });
-
-    it('passes the INITIAL_VIEWPORTS', () => {
-      expect(select.props()).toEqual(
-        expect.objectContaining({
-          viewports: transformedInitialViewports,
-        })
-      );
+    it('passes the children', () => {
+      expect(select.props().children).toHaveLength(8);
     });
 
     it('onChange it updates the viewport', () => {
@@ -386,34 +374,21 @@ describe('Viewport/Panel', () => {
     let toggle;
 
     beforeEach(() => {
-      toggle = subject.find('RotateViewport');
+      toggle = subject.find('Field[label="Rotate"]');
       jest.spyOn(subject.instance(), 'toggleLandscape');
       subject.instance().forceUpdate();
     });
 
-    it('passes the active prop based on the state of the panel', () => {
-      expect(toggle.props().active).toEqual(subject.state('isLandscape'));
+    it('renders viewport is not default', () => {
+      subject.setState({ viewport: 'iphone6' });
+      toggle = subject.find({ label: 'Rotate' });
+      expect(toggle).toExist();
     });
 
-    describe('is on the default viewport', () => {
-      beforeEach(() => {
-        subject.setState({ viewport: DEFAULT_VIEWPORT });
-      });
-
-      it('sets the disabled property', () => {
-        expect(toggle.props().disabled).toEqual(true);
-      });
-    });
-
-    describe('is on a non-default viewport', () => {
-      beforeEach(() => {
-        subject.setState({ viewport: 'iphone6' });
-        toggle = subject.find('RotateViewport');
-      });
-
-      it('the disabled property is false', () => {
-        expect(toggle.props().disabled).toEqual(false);
-      });
+    it('hidden the viewport is default', () => {
+      subject.setState({ viewport: DEFAULT_VIEWPORT });
+      toggle = subject.find({ label: 'Rotate' });
+      expect(toggle).not.toExist();
     });
   });
 });
diff --git a/addons/viewport/src/manager/components/tests/RotateViewport.test.js b/addons/viewport/src/manager/components/tests/RotateViewport.test.js
deleted file mode 100644
index 931d015bee8..00000000000
--- a/addons/viewport/src/manager/components/tests/RotateViewport.test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { RotateViewport } from '../RotateViewport';
-
-const setup = addition => {
-  const props = {
-    onClick: jest.fn(),
-    disabled: false,
-    ...addition,
-  };
-
-  const result = shallow(<RotateViewport {...props} />);
-
-  return { result, props };
-};
-
-describe('Viewport/RotateViewport', () => {
-  it('renders correctly', () => {
-    const { result } = setup();
-    expect(result).toMatchSnapshot();
-  });
-
-  it('has a click handler set via props', () => {
-    const { result, props } = setup();
-    const button = result.find('Styled(button)');
-    expect(button).toHaveProp('onClick');
-
-    button.simulate('click');
-    expect(props.onClick).toHaveBeenCalled();
-  });
-
-  it('renders the correctly if not-disabled', () => {
-    const { result } = setup({ disabled: false });
-    expect(result.find('Styled(button)')).toHaveProp('disabled', false);
-  });
-
-  it('renders the correctly if disabled', () => {
-    const { result } = setup({ disabled: true });
-    expect(result.find('Styled(button)')).toHaveProp('disabled', true);
-  });
-
-  it('renders the correctly if not-active', () => {
-    const { result } = setup({ active: false });
-    expect(result.html()).toContain('Landscape');
-  });
-
-  it('renders the correctly if active', () => {
-    const { result } = setup({ active: true });
-    expect(result.html()).toContain('Vertical');
-  });
-});
diff --git a/addons/viewport/src/manager/components/tests/SelectViewport.test.js b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
deleted file mode 100644
index 48a3b2c8c56..00000000000
--- a/addons/viewport/src/manager/components/tests/SelectViewport.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { SelectViewport } from '../SelectViewport';
-import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../../../shared';
-
-const setup = () => {
-  const props = {
-    onChange: jest.fn(),
-    activeViewport: DEFAULT_VIEWPORT,
-    viewports: INITIAL_VIEWPORTS,
-    defaultViewport: DEFAULT_VIEWPORT,
-  };
-
-  return { props, result: shallow(<SelectViewport {...props} />) };
-};
-
-describe('Viewport/SelectViewport', () => {
-  it('is correctly rendered', () => {
-    const { result } = setup();
-    expect(result).toMatchSnapshot();
-  });
-
-  it('has a default option first', () => {
-    const { result } = setup();
-    expect(result.find('Styled(select)').props().value).toEqual(DEFAULT_VIEWPORT);
-  });
-
-  it('has at least 1 option', () => {
-    const viewportKeys = Object.keys(INITIAL_VIEWPORTS);
-    expect(viewportKeys.length).toBeGreaterThan(0);
-  });
-
-  const viewportKeys = Object.keys(INITIAL_VIEWPORTS);
-  const { result } = setup();
-  viewportKeys.forEach(key => {
-    const { name } = INITIAL_VIEWPORTS[key];
-    const expectedText = key === DEFAULT_VIEWPORT ? `(Default) ${name}` : name;
-
-    it(`renders an option for ${name}`, () => {
-      const option = result.find(`option[value="${key}"]`);
-      expect(option.text()).toEqual(expectedText);
-    });
-  });
-});
diff --git a/addons/viewport/src/manager/components/tests/__snapshots__/RotateViewport.test.js.snap b/addons/viewport/src/manager/components/tests/__snapshots__/RotateViewport.test.js.snap
deleted file mode 100644
index 0fccf6e33fc..00000000000
--- a/addons/viewport/src/manager/components/tests/__snapshots__/RotateViewport.test.js.snap
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Viewport/RotateViewport renders correctly 1`] = `
-<Styled(div)>
-  <Styled(label)
-    htmlFor="rotate"
-  >
-    Rotate
-  </Styled(label)>
-  <Styled(button)
-    disabled={false}
-    id="rotate"
-    onClick={[MockFunction]}
-  >
-    Landscape
-  </Styled(button)>
-</Styled(div)>
-`;
diff --git a/addons/viewport/src/manager/components/tests/__snapshots__/SelectViewport.test.js.snap b/addons/viewport/src/manager/components/tests/__snapshots__/SelectViewport.test.js.snap
deleted file mode 100644
index 4c91854f075..00000000000
--- a/addons/viewport/src/manager/components/tests/__snapshots__/SelectViewport.test.js.snap
+++ /dev/null
@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Viewport/SelectViewport is correctly rendered 1`] = `
-<Styled(div)>
-  <Styled(label)
-    htmlFor="device"
-  >
-    Device
-  </Styled(label)>
-  <Styled(select)
-    id="device"
-    onChange={[MockFunction]}
-    value="responsive"
-  >
-    <option
-      key="responsive"
-      value="responsive"
-    >
-      (Default) Responsive
-    </option>
-    <option
-      key="iphone5"
-      value="iphone5"
-    >
-      iPhone 5
-    </option>
-    <option
-      key="iphone6"
-      value="iphone6"
-    >
-      iPhone 6
-    </option>
-    <option
-      key="iphone6p"
-      value="iphone6p"
-    >
-      iPhone 6 Plus
-    </option>
-    <option
-      key="ipad"
-      value="ipad"
-    >
-      iPad
-    </option>
-    <option
-      key="galaxys5"
-      value="galaxys5"
-    >
-      Galaxy S5
-    </option>
-    <option
-      key="nexus5x"
-      value="nexus5x"
-    >
-      Nexus 5X
-    </option>
-    <option
-      key="nexus6p"
-      value="nexus6p"
-    >
-      Nexus 6P
-    </option>
-  </Styled(select)>
-</Styled(div)>
-`;
diff --git a/addons/viewport/src/manager/index.js b/addons/viewport/src/manager/index.js
index 77cc056e1b6..b18b2a68874 100644
--- a/addons/viewport/src/manager/index.js
+++ b/addons/viewport/src/manager/index.js
@@ -7,12 +7,10 @@ import { ADDON_ID, PANEL_ID } from '../shared';
 
 const addChannel = api => {
   const channel = addons.getChannel();
-
   addons.addPanel(PANEL_ID, {
     title: 'Viewport',
-    render() {
-      return <Panel channel={channel} api={api} />;
-    },
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
   });
 };
 
diff --git a/addons/viewport/src/preview/withViewport.js b/addons/viewport/src/preview/withViewport.js
index a20e31f082a..4ddb2df239b 100644
--- a/addons/viewport/src/preview/withViewport.js
+++ b/addons/viewport/src/preview/withViewport.js
@@ -33,6 +33,7 @@ const applyViewportOptions = (options = {}) => {
 const withViewport = makeDecorator({
   name: 'withViewport',
   parameterName: 'viewport',
+  allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const storyOptions = parameters || options;
     const viewportOptions =
diff --git a/app/angular/bin/build.js b/app/angular/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/angular/bin/build.js
+++ b/app/angular/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/angular/package.json b/app/angular/package.json
index 124fc26e665..c58f6f17c5d 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
   "bugs": {
@@ -22,8 +22,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
-    "@storybook/node-logger": "4.0.0-alpha.10",
+    "@storybook/core": "4.0.0-alpha.14",
+    "@storybook/node-logger": "4.0.0-alpha.14",
     "angular2-template-loader": "^0.6.2",
     "babel-runtime": "^6.23.0",
     "core-js": "^2.5.7",
diff --git a/app/angular/src/demo/button.component.ts b/app/angular/src/demo/button.component.ts
index bb292c9793a..e716467f316 100644
--- a/app/angular/src/demo/button.component.ts
+++ b/app/angular/src/demo/button.component.ts
@@ -7,16 +7,16 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   `,
   styles: [
     `
-        button {
-          border: 1px solid #eee;
-          border-radius: 3px;
-          background-color: #FFFFFF;
-          cursor: pointer;
-          font-size: 15px;
-          padding: 3px 10px;
-          margin: 10px;
-        }
-      `,
+      button {
+        border: 1px solid #eee;
+        border-radius: 3px;
+        background-color: #ffffff;
+        cursor: pointer;
+        font-size: 15px;
+        padding: 3px 10px;
+        margin: 10px;
+      }
+    `,
   ],
 })
 export default class ButtonComponent {
diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts
index 9412e8bf246..a046ac2889f 100644
--- a/app/angular/src/demo/welcome.component.ts
+++ b/app/angular/src/demo/welcome.component.ts
@@ -46,34 +46,34 @@ import { Component, Output, EventEmitter } from '@angular/core';
   `,
   styles: [
     `
-        main {
-          margin: 15px;
-          max-width: 600;
-          lineHeight: 1.4;
-          fontFamily: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-        }
+      main {
+        margin: 15px;
+        max-width: 600;
+        line-height: 1.4;
+        fontfamily: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+      }
 
-        .note {
-          opacity: 0.5,
-        }
+      .note {
+        opacity: 0.5;
+      }
 
-        .inline-code {
-          font-size: 15px;
-          fontWeight: 600;
-          padding: 2px 5px;
-          border: 1px solid #eae9e9;
-          border-radius: 4px;
-          background-color: #f3f2f2;
-          color: #3a3a3a;
-        }
+      .inline-code {
+        font-size: 15px;
+        font-weight: 600;
+        padding: 2px 5px;
+        border: 1px solid #eae9e9;
+        border-radius: 4px;
+        background-color: #f3f2f2;
+        color: #3a3a3a;
+      }
 
-        a {
-          color: #1474f3;
-          text-decoration: none;
-          border-bottom: 1px solid #1474f3;
-          padding-bottom: 2px;
-        }
-      `,
+      a {
+        color: #1474f3;
+        text-decoration: none;
+        border-bottom: 1px solid #1474f3;
+        padding-bottom: 2px;
+      }
+    `,
   ],
 })
 export default class WelcomeComponent {
diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/angular/src/server/build.js
+++ b/app/angular/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/html/bin/build.js b/app/html/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/html/bin/build.js
+++ b/app/html/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/html/package.json b/app/html/package.json
index 1e1feadf87b..c12b6f425ba 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/html",
   "bugs": {
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
+    "@storybook/core": "4.0.0-alpha.14",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "html-loader": "^0.5.5",
diff --git a/app/html/src/server/build.js b/app/html/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/html/src/server/build.js
+++ b/app/html/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/marko/bin/build.js b/app/marko/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/marko/bin/build.js
+++ b/app/marko/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/marko/package.json b/app/marko/package.json
index 8dabe7dae2f..0a3a8696920 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/marko",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/app/marko",
   "bugs": {
@@ -22,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
+    "@storybook/core": "4.0.0-alpha.14",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "marko-loader": "^1.3.3",
@@ -31,7 +31,7 @@
     "react-dom": "^16.4.0"
   },
   "peerDependencies": {
-    "marko": "^4",
+    "marko": "^4.10.0",
     "marko-widgets": "^7.0.1"
   }
 }
diff --git a/app/marko/src/server/build.js b/app/marko/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/marko/src/server/build.js
+++ b/app/marko/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/mithril/bin/build.js b/app/mithril/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/mithril/bin/build.js
+++ b/app/mithril/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 37b0812e8ca..80ac19431df 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/mithril",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril",
   "bugs": {
@@ -22,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
+    "@storybook/core": "4.0.0-alpha.14",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.4.0",
diff --git a/app/mithril/src/server/build.js b/app/mithril/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/mithril/src/server/build.js
+++ b/app/mithril/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/polymer/bin/build.js b/app/polymer/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/polymer/bin/build.js
+++ b/app/polymer/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/polymer/package.json b/app/polymer/package.json
index a52213888d2..c9211b9b17f 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/polymer",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/polymer",
   "bugs": {
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
+    "@storybook/core": "4.0.0-alpha.14",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "babel-polyfill": "^6.26.0",
     "common-tags": "^1.8.0",
diff --git a/app/polymer/src/server/build.js b/app/polymer/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/polymer/src/server/build.js
+++ b/app/polymer/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/react-native/package.json b/app/react-native/package.json
index 3b70a54347b..16f61b93ea6 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -25,12 +25,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/channel-websocket": "4.0.0-alpha.10",
-    "@storybook/core": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
-    "@storybook/react-dev-utils": "^5.0.0",
-    "@storybook/ui": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/channel-websocket": "4.0.0-alpha.14",
+    "@storybook/core": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
+    "@storybook/ui": "4.0.0-alpha.14",
     "babel-loader": "^7.1.4",
     "babel-plugin-macros": "^2.2.2",
     "babel-plugin-syntax-async-functions": "^6.13.0",
@@ -47,7 +46,7 @@
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "commander": "^2.15.1",
-    "dotenv-webpack": "^1.5.6",
+    "dotenv-webpack": "^1.5.7",
     "express": "^4.16.3",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
@@ -55,9 +54,11 @@
     "json5": "^1.0.1",
     "prop-types": "^15.6.1",
     "raw-loader": "^0.5.1",
+    "react-dev-utils": "^6.0.0-next.3e165448",
     "react-native-compat": "^1.0.0",
     "react-native-iphone-x-helper": "^1.0.3",
     "shelljs": "^0.8.2",
+    "universal-dotenv": "^1.8.0",
     "url-parse": "^1.4.0",
     "uuid": "^3.2.1",
     "webpack": "^4.10.2",
diff --git a/app/react-native/src/server/config/webpack.config.js b/app/react-native/src/server/config/webpack.config.js
index 03758cae134..a9e3b90e892 100644
--- a/app/react-native/src/server/config/webpack.config.js
+++ b/app/react-native/src/server/config/webpack.config.js
@@ -1,7 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
+import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
+import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { indexHtmlPath } from '@storybook/core/server';
@@ -30,6 +31,7 @@ const getConfig = options => ({
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
     new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+    new webpack.DefinePlugin(getEnvironment().webpack),
     new Dotenv({ silent: true }),
     new webpack.DefinePlugin({
       storybookOptions: JSON.stringify(options),
diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js
index 3e32533ba09..7f81e629156 100644
--- a/app/react-native/src/server/config/webpack.config.prod.js
+++ b/app/react-native/src/server/config/webpack.config.prod.js
@@ -1,5 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
+import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { indexHtmlPath } from '@storybook/core/server';
@@ -37,6 +38,7 @@ const getConfig = options => {
         storybookOptions: JSON.stringify(options),
       }),
       new webpack.optimize.DedupePlugin(),
+      new webpack.DefinePlugin(getEnvironment().webpack),
       new Dotenv({ silent: true }),
     ],
     module: {
diff --git a/app/react/bin/build.js b/app/react/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/react/bin/build.js
+++ b/app/react/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/react/package.json b/app/react/package.json
index 9cd81d7f8b8..ecf5030f99c 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
   "bugs": {
@@ -22,8 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
-    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/core": "4.0.0-alpha.14",
     "babel-plugin-react-docgen": "^2.0.0-rc.1",
     "babel-preset-react": "^6.24.1",
     "common-tags": "^1.8.0",
@@ -31,6 +30,7 @@
     "global": "^4.3.2",
     "lodash.flattendeep": "^4.4.0",
     "prop-types": "^15.6.1",
+    "react-dev-utils": "^6.0.0-next.3e165448",
     "react-emotion": "^9.1.3"
   },
   "peerDependencies": {
diff --git a/app/react/src/server/build.js b/app/react/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/react/src/server/build.js
+++ b/app/react/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/vue/bin/build.js b/app/vue/bin/build.js
index 780773c6cd3..26142ec0af2 100755
--- a/app/vue/bin/build.js
+++ b/app/vue/bin/build.js
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 require('../dist/server/build');
diff --git a/app/vue/package.json b/app/vue/package.json
index 9f16cdfa2a1..04356dd9b44 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
   "bugs": {
@@ -22,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.0.0-alpha.10",
+    "@storybook/core": "4.0.0-alpha.14",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.4.0",
@@ -30,12 +30,12 @@
   },
   "devDependencies": {
     "vue": "^2.5.16",
-    "vue-loader": "^14.2.3",
+    "vue-loader": "15.x.x",
     "vue-template-compiler": "^2.5.16"
   },
   "peerDependencies": {
     "vue": "2.5.16",
-    "vue-loader": "14.2.3",
+    "vue-loader": "15.x.x",
     "vue-template-compiler": "2.5.16"
   }
 }
diff --git a/app/vue/src/server/build.js b/app/vue/src/server/build.js
index 24f2ffb2e14..d8abf06a439 100755
--- a/app/vue/src/server/build.js
+++ b/app/vue/src/server/build.js
@@ -1,5 +1,4 @@
 import { buildStatic } from '@storybook/core/server';
-
 import options from './options';
 
 buildStatic(options);
diff --git a/app/vue/src/server/wrapInitialConfig.js b/app/vue/src/server/wrapInitialConfig.js
index 87d2d6d6a3a..b4b66c8e49d 100644
--- a/app/vue/src/server/wrapInitialConfig.js
+++ b/app/vue/src/server/wrapInitialConfig.js
@@ -1,5 +1,8 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
 export default config => ({
   ...config,
+  plugins: [...config.plugins, new VueLoaderPlugin()],
   module: {
     ...config.module,
     rules: [
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
index 6b63fa9be76..c70e397f474 100644
--- a/docs/gatsby-config.js
+++ b/docs/gatsby-config.js
@@ -27,6 +27,7 @@ module.exports = {
         '/configurations/add-custom-head-tags/',
         '/configurations/serving-static-files/',
         '/configurations/env-vars/',
+        '/configurations/theming/',
         '/configurations/cli-options/',
       ],
       testing: [
diff --git a/docs/package.json b/docs/package.json
index e2452a83bab..121343fb9fe 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,27 +18,27 @@
     "storybook": "start-storybook -p 9009 -s src/pages"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.4.6",
-    "@storybook/addon-links": "^3.4.6",
-    "@storybook/addons": "^3.4.6",
-    "@storybook/react": "^3.4.6",
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-links": "^3.4.8",
+    "@storybook/addons": "^3.4.8",
+    "@storybook/react": "^3.4.8",
     "babel-loader": "^6.4.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.270",
-    "gatsby-link": "^1.6.44",
-    "gatsby-plugin-sharp": "^1.6.47",
-    "gatsby-remark-autolink-headers": "^1.4.18",
-    "gatsby-remark-copy-linked-files": "^1.5.35",
-    "gatsby-remark-images": "^1.5.66",
+    "gatsby": "^1.9.273",
+    "gatsby-link": "^1.6.45",
+    "gatsby-plugin-sharp": "^1.6.48",
+    "gatsby-remark-autolink-headers": "^1.4.19",
+    "gatsby-remark-copy-linked-files": "^1.5.37",
+    "gatsby-remark-images": "^1.5.67",
     "gatsby-remark-smartypants": "^1.4.12",
-    "gatsby-source-filesystem": "^1.5.38",
-    "gatsby-transformer-remark": "^1.7.42",
+    "gatsby-source-filesystem": "^1.5.39",
+    "gatsby-transformer-remark": "^1.7.44",
     "gh-pages": "^1.2.0",
     "global": "^4.3.2",
     "highlight.js": "^9.12.0",
     "lodash": "^4.17.10",
     "marked": "^0.4.0",
-    "prop-types": "^15.6.1",
+    "prop-types": "^15.6.2",
     "react": "^15.6.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^15.6.1",
diff --git a/docs/src/pages/addons/api/index.md b/docs/src/pages/addons/api/index.md
index 40bb16a7b56..1529c9c1226 100644
--- a/docs/src/pages/addons/api/index.md
+++ b/docs/src/pages/addons/api/index.md
@@ -28,9 +28,7 @@ See how we can use this:
 import addonAPI from '@storybook/addons';
 
 // Register the addon with a unique name.
-addonAPI.register('my-organisation/my-addon', storybookAPI => {
-
-});
+addonAPI.register('my-organisation/my-addon', storybookAPI => {});
 ```
 
 Now you'll get an instance to our StorybookAPI. See the [api docs](/addons/api#storybook-api) for Storybook API regarding using that.
@@ -43,18 +41,12 @@ See how you can use this method:
 ```js
 import addonAPI from '@storybook/addons';
 
-const MyPanel = () => (
-  <div>
-    This is a panel.
-  </div>
-);
+const MyPanel = () => <div>This is a panel.</div>;
 
 // give a unique name for the panel
 addonAPI.addPanel('my-organisation/my-addon/panel', {
   title: 'My Addon',
-  render: () => (
-    <MyPanel />
-  ),
+  render: () => <MyPanel />,
 });
 ```
 
@@ -71,11 +63,9 @@ addonAPI.register('my-organisation/my-addon', storybookAPI => {
   // Also need to set a unique name to the panel.
   addonAPI.addPanel('my-organisation/my-addon/panel', {
     title: 'Notes',
-    render: () => (
-      <Notes channel={addonAPI.getChannel()} api={storybookAPI}/>
-    ),
-  })
-})
+    render: () => <Notes channel={addonAPI.getChannel()} api={storybookAPI} />,
+  });
+});
 ```
 
 ## Storybook API
@@ -96,10 +86,7 @@ Let's say you've got a story like this:
 ```js
 import { storiesOf } from '@storybook/react';
 
-storiesOf('heading', module)
-  .add('with text', () => (
-    <h1>Hello world</h1>
-  ));
+storiesOf('heading', module).add('with text', () => <h1>Hello world</h1>);
 ```
 
 This is how you can select the above story:
@@ -107,7 +94,7 @@ This is how you can select the above story:
 ```js
 addonAPI.register('my-organisation/my-addon', storybookAPI => {
   storybookAPI.selectStory('heading', 'with text');
-})
+});
 ```
 
 ### storybookAPI.selectInCurrentKind()
@@ -161,7 +148,7 @@ This method allows you to get application url state with some changed params. Fo
 addonAPI.register('my-organisation/my-addon', storybookAPI => {
   const href = storybookAPI.getUrlState({
     selectedKind: 'kind',
-    selectedStory: 'story'
+    selectedStory: 'story',
   }).url;
 });
 ```
@@ -175,3 +162,33 @@ addonAPI.register('my-organisation/my-addon', storybookAPI => {
   storybookAPI.onStory((kind, story) => console.log(kind, story));
 });
 ```
+
+## `makeDecorator` API
+
+The `makeDecorator` API can be used to create decorators in the style of the official addons easily. Use it like so:
+
+```js
+import { makeDecorator } from '@storybook/addons';
+
+export makeDecorator({
+  name: 'withSomething',
+  parameterName: 'something',
+  wrapper: (storyFn, context, { parameters }) => {
+    // Do something with `parameters`, which are set via { something: ... }
+
+    // Note you may alter the story output if you like, although generally that's
+    // not advised
+    return storyFn(context);
+  }
+})
+```
+
+The options to `makeDecorator` are:
+
+- `name`: The name of the export (e.g. `withNotes`)
+- `parameterName`: The name of the parameter your addon uses. This should be unique.
+- `skipIfNoParametersOrOptions`: Don't run your decorator if the user hasn't set options (via `.addDecorator(withFoo(options)))`) or parameters (`.add('story', () => <Story/>, { foo: 'param' })`, or `.addParameters({foo: 'param'})`).
+- `allowDeprecatedUsage`: support the deprecated "wrapper" usage (`.add('story', () => withFoo(options)(() => <Story/>))`).
+- `wrapper`: your decorator function. Takes the `storyFn`, `context`, and both the `options` and `parameters` (as defined in `skipIfNoParametersOrOptions` above).
+
+Note if the parameters to a story include `{ foo: {disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will note be called.
diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md
index 95051649448..bb654966aff 100644
--- a/docs/src/pages/addons/using-addons/index.md
+++ b/docs/src/pages/addons/using-addons/index.md
@@ -32,14 +32,22 @@ Now when you are writing a story it like this and add some notes:
 ```js
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withNotes } from '@storybook/addon-notes';
 
 import Button from './Button';
 
-storiesOf('Button', module)
-  .add('with some emoji', () => (
-     withNotes('A very simple component')(() => <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>));
-  ));
+storiesOf('Button', module).add(
+  'with some emoji',
+  () => (
+    () => (
+      <Button onClick={action('clicked')}>
+        <span role="img" aria-label="so cool">
+          😀 😎 👍 💯
+        </span>
+      </Button>
+    ),
+    { notes: 'A very simple component' }
+  )
+);
 ```
 
 Then you'll be able to see those notes when you are viewing the story.
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index 61dba335768..de6d06808d9 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -21,11 +21,11 @@ As shown in the above image, there's a communication channel that the Manager Ap
 
 With an addon, you can add more functionality to Storybook. Here are a few things you could do:
 
--   Add a panel to Storybook (like Action Logger).
--   Interact with the story and the panel.
--   Set and get URL query params.
--   Select a story.
--   Register keyboard shortcuts (coming soon).
+- Add a panel to Storybook (like Action Logger).
+- Interact with the story and the panel.
+- Set and get URL query params.
+- Select a story.
+- Register keyboard shortcuts (coming soon).
 
 With this, you can write some pretty cool addons. Look at our [Addon gallery](/addons/addon-gallery) to have a look at some sample addons.
 
@@ -43,21 +43,26 @@ We write a story for our addon like this:
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { WithNotes } from '../notes-addon';
+import withNotes from '../notes-addon';
 
 import Button from './Button';
 
 storiesOf('Button', module)
-  .add('with text', () => (
-    <WithNotes notes={'This is a very simple Button and you can click on it.'}>
-      <Button onClick={action('clicked')}>Hello Button</Button>
-    </WithNotes>
-  ))
-  .add('with some emoji', () => (
-    <WithNotes notes={'Here we use some emoji as the Button text. Doesn&apos;t it look nice?'}>
-      <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
-    </WithNotes>
-  ));
+  .addDecorator(withNotes)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>, {
+    notes: 'This is a very simple Button and you can click on it.',
+  })
+  .add(
+    'with some emoji',
+    () => (
+      <Button onClick={action('clicked')}>
+        <span role="img" aria-label="so cool">
+          😀 😎 👍 💯
+        </span>
+      </Button>
+    ),
+    { notes: 'Here we use some emoji as the Button text. Doesn&apos;t it look nice?' }
+  );
 ```
 
 Then it will appear in the Notes panel like this:
@@ -79,23 +84,29 @@ Now we need to create two files, `register.js` and `index.js,` inside a director
 
 ## The Addon
 
-Let's add the following content to the `index.js`. It will expose a class called `WithNotes`, which wraps our story.
+Let's add the following content to the `index.js`. It will expose a decorator called `withNotes` which we use the `.addDecorator()` API to decorate all our stories.
+
+The `@storybook/addons` package contains a `makeDecorator` function which we can easily use to create such a decorator:
 
 ```js
 import React from 'react';
-import addons from '@storybook/addons';
+import addons, { makeDecorator } from '@storybook/addons';
 
-export class WithNotes extends React.Component {
-  render() {
-    const { children, notes } = this.props;
+export withNotes = makeDecorator({
+  name: 'withNotes',
+  parameterName: 'notes',
+  // This means don't run this decorator if the notes decorator is not set
+  skipIfNoParametersOrOptions: true,
+  wrapper: (getStory, context, {parameters}) => {
     const channel = addons.getChannel();
 
-    // send the notes to the channel.
-    channel.emit('kadira/notes/add_notes', notes);
-    // return children elements.
-    return children;
+    // Our simple API above simply sets the notes parameter to a string,
+    // which we send to the channel
+    channel.emit('MYADDON/add_notes', parameters);
+
+    return story(context);
   }
-}
+})
 ```
 
 In this case, our component can access something called the channel. It lets us communicate with the panel (where we display notes). It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API.
@@ -107,33 +118,27 @@ Then add the following code to the register.js.
 ```js
 import React from 'react';
 import addons from '@storybook/addons';
+import styled from 'emotion';
 
-const styles = {
-  notesPanel: {
-    margin: 10,
-    fontFamily: 'Arial',
-    fontSize: 14,
-    color: '#444',
-    width: '100%',
-    overflow: 'auto',
-  }
-};
+const NotesPanel = styled('div')({
+  margin: 10,
+  width: '100%',
+  overflow: 'auto',
+});
 
 class Notes extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {text: ''};
-    this.onAddNotes = this.onAddNotes.bind(this);
-  }
+  state = {
+    text: '',
+  };
 
-  onAddNotes(text) {
-    this.setState({text});
-  }
+  onAddNotes = text => {
+    this.setState({ text });
+  };
 
   componentDidMount() {
     const { channel, api } = this.props;
     // Listen to the notes and render it.
-    channel.on('kadira/notes/add_notes', this.onAddNotes);
+    channel.on('MYADDON/add_notes', this.onAddNotes);
 
     // Clear the current notes on every story change.
     this.stopListeningOnStory = api.onStory(() => {
@@ -143,37 +148,32 @@ class Notes extends React.Component {
 
   render() {
     const { text } = this.state;
-    const textAfterFormatted = text? text.trim().replace(/\n/g, '<br />') : "";
+    const { active } = this.props;
+    const textAfterFormatted = text ? text.trim().replace(/\n/g, '<br />') : '';
 
-    return (
-      <div style={styles.notesPanel}>
-        <div dangerouslySetInnerHTML={{__html: textAfterFormatted}} />
-      </div>
-    );
+    return active ? <NotesPanel dangerouslySetInnerHTML={{ __html: textAfterFormatted }} /> : null;
   }
 
   // This is some cleanup tasks when the Notes panel is unmounting.
   componentWillUnmount() {
-    if(this.stopListeningOnStory) {
+    if (this.stopListeningOnStory) {
       this.stopListeningOnStory();
     }
 
     this.unmounted = true;
     const { channel, api } = this.props;
-    channel.removeListener('kadira/notes/add_notes', this.onAddNotes);
+    channel.removeListener('MYADDON/add_notes', this.onAddNotes);
   }
 }
 
 // Register the addon with a unique name.
-addons.register('kadira/notes', (api) => {
+addons.register('MYADDON', api => {
   // Also need to set a unique name to the panel.
-  addons.addPanel('kadira/notes/panel', {
+  addons.addPanel('MYADDON/panel', {
     title: 'Notes',
-    render: () => (
-      <Notes channel={addons.getChannel()} api={api}/>
-    ),
-  })
-})
+    render: ({ active }) => <Notes channel={addons.getChannel()} api={api} active={active} />,
+  });
+});
 ```
 
 It will register our addon and add a panel. In this case, the panel represents a React component called `Notes`. That component has access to the channel and storybook api.
@@ -184,6 +184,8 @@ Then it will listen to the channel and render the notes text on the panel. Have
 
 It also listens to another event, called onStory, in the storybook API, which fires when the user selects a story. We use that event to clear the previous notes when selecting a story.
 
+Multiple addons can be loaded, but only a single panel can be shown, the render function will receive an `active` prop, which is true if the addon is shown. It is up to you to decide if this mean your component must be unmounted, or just visually hidden. This allows you to keep state but unmount expensive renderings.
+
 ### Register the addon
 
 Now, finally, we need to register the addon by importing it to the `.storybook/addons.js` file.
@@ -193,7 +195,7 @@ Now, finally, we need to register the addon by importing it to the `.storybook/a
 import '@storybook/addon-actions/register';
 
 // Our addon
-import '../src/notes-addon/register';
+import '../src/MYADDON/register';
 ```
 
 > Above code runs in the Manager App but not in the preview area.
@@ -204,23 +206,39 @@ That's it. Now you can create notes for any story as shown below:
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { WithNotes } from '../notes-addon';
+import withNotes from '../notes-addon';
 
 import Button from './Button';
 
 storiesOf('Button', module)
-  .add('with text', () => (
-    <WithNotes notes={'This is a very simple Button and you can click on it.'}>
-      <Button onClick={action('clicked')}>Hello Button</Button>
-    </WithNotes>
-  ))
-  .add('with some emojies', () => (
-    <WithNotes notes={'Here we use emojies as the Button text. Doesn&apos;t it look nice?'}>
-      <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
-    </WithNotes>
-  ));
+  .addDecorator(withNotes)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>, {
+    notes: 'This is a very simple Button and you can click on it.',
+  })
+  .add(
+    'with some emoji',
+    () => (
+      <Button onClick={action('clicked')}>
+        <span role="img" aria-label="so cool">
+          😀 😎 👍 💯
+        </span>
+      </Button>
+    ),
+    { notes: 'Here we use some emoji as the Button text. Doesn&apos;t it look nice?' }
+  );
 ```
 
+## Styling your addon
+
+We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user!
+
+We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withTheme` hoc from emotion. [Read more about theming](/configuration/theming).
+
+## Re-using existing components
+
+Wouldn't it be awesome if we provided you with some common used components you could use to build out your own addon quickly and fit in right away?
+Good news! WE DO! We publish most of storybook's UI components as a package: `@storybook/components`. You can check them out in [our storybook](https://storybooks.netlify.com) (pretty meta right?).
+
 ## Addon API
 
 Here we've only used a few functionalities of our [Addon API](/addons/api).
@@ -247,4 +265,3 @@ When you are developing your addon as a package, you can't use `npm link` to add
 ### Package Maintenance
 
 Your packaged Storybook addon needs to be written in ES5. If you are using ES6, then you need to transpile it.
-In that case, we recommend to use [React CDK](https://github.com/kadirahq/react-cdk) for that.
diff --git a/docs/src/pages/basics/exporting-storybook/index.md b/docs/src/pages/basics/exporting-storybook/index.md
index d222308e826..8987308ac99 100644
--- a/docs/src/pages/basics/exporting-storybook/index.md
+++ b/docs/src/pages/basics/exporting-storybook/index.md
@@ -22,16 +22,24 @@ Simply add the following NPM script:
 
 Then run `npm run storybook`.
 
-This will build the storybook configured in the Storybook directory into a static webpack and place it inside the `.out` directory.
+This will build the storybook configured in the Storybook directory into a static web app and place it inside the `.out` directory.
 Now you can deploy the content in the `.out` directory wherever you want.
 
-To test it locally, simply run the following commands:
+To test it locally, simply run the following commands with Python HTTP Server:
 
 ```sh
 cd .out
 python -m SimpleHTTPServer
 ```
 
+or Node HTTP Server:
+
+```sh
+npm install http-server -g
+cd .out
+http-server
+```
+
 ## Deploying to GitHub Pages
 
 Additionally, you can deploy Storybook directly into GitHub pages with our [storybook-deployer](https://github.com/storybooks/storybook-deployer) tool.
diff --git a/docs/src/pages/basics/guide-vue/index.md b/docs/src/pages/basics/guide-vue/index.md
index 134adbca5b7..21b754d4dd2 100644
--- a/docs/src/pages/basics/guide-vue/index.md
+++ b/docs/src/pages/basics/guide-vue/index.md
@@ -33,7 +33,7 @@ npm i --save-dev @storybook/vue
 
 ## Add vue and babel-core
 
-Make sure that you have `vue` and `babel-core` in your dependencies as well because we list is as a peerDependency:
+Make sure that you have `vue` and `babel-core` in your dependencies as well because we list it as a peerDependency:
 
 ```sh
 npm i --save vue
diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md
index 7a9e23eceb7..bad3692f69b 100644
--- a/docs/src/pages/basics/writing-stories/index.md
+++ b/docs/src/pages/basics/writing-stories/index.md
@@ -31,11 +31,13 @@ import { action } from '@storybook/addon-actions';
 import Button from '../components/Button';
 
 storiesOf('Button', module)
-  .add('with text', () => (
-    <Button onClick={action('clicked')}>Hello Button</Button>
-  ))
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => (
-    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
   ));
 ```
 
@@ -54,10 +56,10 @@ For example, you may write stories for your app inside the `src/components` dire
 ```js
 import { configure } from '@storybook/react';
 
-const req = require.context('../src/components', true, /\.stories\.js$/)
+const req = require.context('../src/components', true, /\.stories\.js$/);
 
 function loadStories() {
-  req.keys().forEach((filename) => req(filename))
+  req.keys().forEach(filename => req(filename));
 }
 
 configure(loadStories, module);
@@ -65,7 +67,7 @@ configure(loadStories, module);
 
 Here we use Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#require-context) to load modules dynamically. Have a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#require-context) to learn more about how to use require.context.
 
-The **React Native** packager resolves all the imports at build-time, so it's not possible to load modules dynamically. If you don't want to import all your stories manually you can use [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically create the import statements for all of your stories. 
+The **React Native** packager resolves all the imports at build-time, so it's not possible to load modules dynamically. If you don't want to import all your stories manually you can use [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically create the import statements for all of your stories.
 
 ## Using Decorators
 
@@ -77,13 +79,9 @@ import { storiesOf } from '@storybook/react';
 import MyComponent from '../my_component';
 
 storiesOf('MyComponent', module)
-  .addDecorator(story => (
-    <div style={{textAlign: 'center'}}>
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <div style={{ textAlign: 'center' }}>{story()}</div>)
   .add('without props', () => <MyComponent />)
-  .add('with some props', () => <MyComponent text="The Comp"/>);
+  .add('with some props', () => <MyComponent text="The Comp" />);
 ```
 
 Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.)
@@ -94,13 +92,9 @@ But, you can also add a decorator **globally** and it'll be applied to all the s
 import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
 
-addDecorator(story => (
-  <div style={{textAlign: 'center'}}>
-    {story()}
-  </div>
-));
+addDecorator(story => <div style={{ textAlign: 'center' }}>{story()}</div>);
 
-configure(function () {
+configure(function() {
   // ...
 }, module);
 ```
@@ -109,16 +103,15 @@ configure(function () {
 
 As of storybook 3.3, [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) can be used in storybook by default. All you need to do is import a markdown file, which extracts the raw markdown content into a string. You can then use that string in any addon that supports markdown (such as notes).
 
-
 ```js
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withMarkdownNotes } from '@storybook/addon-notes';
 import MyComponent from './MyComponent';
 import someMarkdownText from './someMarkdownText.md';
 
-storiesOf('Component', module)
-  .add('With Markdown', withMarkdownNotes(someMarkdownText)(() => <MyComponent/>));
+storiesOf('Component', module).add('With Markdown', () => <MyComponent />, {
+  notes: { markdown: someMarkdownText },
+});
 ```
 
 ## Nesting stories
@@ -132,22 +125,25 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import Button from '../components/Button';
 
-storiesOf('My App/Buttons/Simple', module)
-  .add('with text', () => (
-    <Button onClick={action('clicked')}>Hello Button</Button>
-  ));
+storiesOf('My App/Buttons/Simple', module).add('with text', () => (
+  <Button onClick={action('clicked')}>Hello Button</Button>
+));
 
-storiesOf('My App/Buttons/Emoji', module)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
-  ));
+storiesOf('My App/Buttons/Emoji', module).add('with some emoji', () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+));
 ```
 
-## Generating nesting path based on __dirname
+## Generating nesting path based on \_\_dirname
 
 The name is just a javascript string, by using a template literal, you can easily interpolate data.
 
 One example would be to use `base` from [`paths.macro`](https://github.com/storybooks/paths.macro):
+
 ```js
 import React from 'react';
 import base from 'paths.macro';
@@ -161,7 +157,7 @@ storiesOf(`Other|${base}/Dirname Example`, module)
   .add('story 2', () => <BaseButton label="Story 2" />);
 ```
 
-*This uses [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros)*.
+_This uses [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros)_.
 
 ## Run multiple storybooks
 
@@ -169,9 +165,9 @@ You can run multiple storybooks for different kinds of stories (or components).
 
 ```json
 {
-   "scripts": {
-     "start-storybook-for-theme": "start-storybook -p 9001 -c .storybook-theme",
-     "start-storybook-for-app": "start-storybook -p 8001 -c .storybook-app"
-   }
+  "scripts": {
+    "start-storybook-for-theme": "start-storybook -p 9001 -c .storybook-theme",
+    "start-storybook-for-app": "start-storybook -p 8001 -c .storybook-app"
+  }
 }
 ```
diff --git a/docs/src/pages/configurations/env-vars/index.md b/docs/src/pages/configurations/env-vars/index.md
index 682d1dabcc2..d2a7901366c 100644
--- a/docs/src/pages/configurations/env-vars/index.md
+++ b/docs/src/pages/configurations/env-vars/index.md
@@ -1,8 +1,7 @@
-* * *
-
+---
 id: 'env-vars'
-
-## title: 'Using Environment Variables'
+title: 'Using Environment Variables'
+---
 
 Sometimes, we may use configuration items inside Storybook. It might be a theme color, some client secret, or a JSON string. So, we usually tend to hard code them.
 
diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md
new file mode 100644
index 00000000000..6cb4c29c651
--- /dev/null
+++ b/docs/src/pages/configurations/theming/index.md
@@ -0,0 +1,83 @@
+---
+id: 'theming'
+title: 'Theming Storybook'
+---
+
+Storybook's manager UI is theme-able! You can change theme variables using [addon-options](https://github.com/storybooks/storybook/tree/master/addons/options).
+
+## Set a theme
+
+You can do this in an decorator, addon or in `config.js`. Changing theme at runtime is supported!
+
+```js
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  theme: {},
+});
+```
+
+When setting a theme, set a full theme object, the theme is replaced, not combined.
+
+## Get a theme
+
+We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark theme).
+
+You can get these themes like so:
+
+```js
+import { themes } from '@storybook/components';
+```
+
+## Theme variables
+
+```
+mainBackground: applied to root `background`, // 'linear-gradient(to bottom right, black, gray'
+mainBorder: applied to panels `border`, // '1px solid rgba(0,0,0,0.1)'
+mainBorderColor: applied for most borders, // 'rgba(0,0,0,0.1)'
+mainBorderRadius: applied to panels, buttons, inputs // 4
+mainFill: applied to panels `background`, // 'rgba(255,255,255,0.89)'
+barFill: applied to TabsBar `background`, // 'rgba(255,255,255,1)'
+inputFill: applied to Input `background`, // 'rgba(0,0,0,0.05)'
+mainTextFace: applied to root `font-family`,
+mainTextColor: applied to root & buttons & input `color`, // black
+mainTextSize: applied to root, // 13
+dimmedTextColor: applied in less important text, // 'rgba(0,0,0,0.4)'
+highlightColor: applied to indicate selection, // '#9fdaff'
+successColor: applied to indicate positive, // '#0edf62'
+failColor: applied to indicate negative, // '#ff3f3f'
+warnColor: applied to indicate ow-ow, // 'orange'
+monoTextFace: applied to pre,
+layoutMargin: applied to space panels, // 10
+overlayBackground: applied to overlay `background`, // 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))'
+```
+
+### Deep theming components
+
+All options above are single key options, in other words, they are variables, and their usage is fixed.
+
+We will extend the theming ability in the future and possibly add more deep theming ability.
+Right now we have identified the most likely thing you might want to change the appearance of more then just 1 variable so we allow you the deep-theme the header using: `brand`.
+
+```
+brand: {
+  background: 'url("/path/to/logo.svg")',
+}
+```
+
+The styles provided here support everything [emotion](https://emotion.sh/) does. So that included things like nested selectors!
+
+## Adding more theme variables for addons
+
+If addons have a need for specific theme variables, the user has to add them. 
+We advise addons to reuse the variables listed above as much as possible.
+
+Addon actions uses [react-inspector](https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js) which has themes of it's own. If you want to theme it (our themes do) you can add needs the following additional theme variables:
+
+```
+addonActionsTheme: {
+  ...chromeLight,
+  BASE_FONT_FAMILY: monoFonts.fontFamily,
+  BASE_BACKGROUND_COLOR: 'transparent',
+}
+```
diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md
index 83365957de0..11fa57263d6 100644
--- a/docs/src/pages/configurations/typescript-config/index.md
+++ b/docs/src/pages/configurations/typescript-config/index.md
@@ -21,15 +21,15 @@ We have had the best experience using `awesome-typescript-loader`, but other tut
 We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default):
 
 ```js
-const path = require("path");
-const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");
+const path = require('path');
+const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
 module.exports = (baseConfig, env, config) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
-    loader: require.resolve("awesome-typescript-loader")
+    loader: require.resolve('awesome-typescript-loader'),
   });
   config.plugins.push(new TSDocgenPlugin()); // optional
-  config.resolve.extensions.push(".ts", ".tsx");
+  config.resolve.extensions.push('.ts', '.tsx');
   return config;
 };
 ```
@@ -74,17 +74,17 @@ This is for the default configuration where `/stories` is a peer of `src`. If yo
 The very handy [Storybook Info addon](https://github.com/storybooks/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the Typescript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal:
 
 ```js
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { withInfo } from "@storybook/addon-info";
-import { action } from "@storybook/addon-actions";
-import TicTacToeCell from "./TicTacToeCell";
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import TicTacToeCell from './TicTacToeCell';
 
-const stories = storiesOf("Components", module);
+const stories = storiesOf('Components', module);
 
 stories.add(
-  "TicTacToeCell",
-  withInfo({ inline: true })(() => <TicTacToeCell value="X" position={{ x: 0, y: 0 }} onClick={action("onClick")} />)
+  'TicTacToeCell',
+  () => <TicTacToeCell value="X" position={{ x: 0, y: 0 }} onClick={action('onClick')} />,
+  { info: { inline: true } }
 );
 ```
 
@@ -92,48 +92,59 @@ stories.add(
 
 Please refer to the [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) docs for writing prop descriptions and other annotations to your Typescript interfaces.
 
-Additional annotation can be achieved by creating a `wInfo` higher order component:
+Additional annotation can be achieved by setting a default set of info parameters:
 
 ```js
-import { withInfo } from "@storybook/addon-info";
-const wInfoStyle = {
-  header: {
-    h1: {
-      marginRight: "20px",
-      fontSize: "25px",
-      display: "inline"
+// Globally in your .storybook/config.js, or alternatively, per-chapter
+addDecorator({
+  styles: {
+    header: {
+      h1: {
+        marginRight: '20px',
+        fontSize: '25px',
+        display: 'inline',
+      },
+      body: {
+        paddingTop: 0,
+        paddingBottom: 0,
+      },
+      h2: {
+        display: 'inline',
+        color: '#999',
+      },
     },
-    body: {
-      paddingTop: 0,
-      paddingBottom: 0
+    infoBody: {
+      backgroundColor: '#eee',
+      padding: '0px 5px',
+      lineHeight: '2',
     },
-    h2: {
-      display: "inline",
-      color: "#999"
-    }
   },
-  infoBody: {
-    backgroundColor: "#eee",
-    padding: "0px 5px",
-    lineHeight: "2"
-  }
-};
-export const wInfo = text => withInfo({ inline: true, source: false, styles: wInfoStyle, text: text });
+  inline: true,
+  source: false,
+});
 ```
 
 This can be used like so:
 
 ```js
-import React from "react";
+import React from 'react';
 
-import { storiesOf } from "@storybook/react";
-import { PrimaryButton } from "./Button";
-import { wInfo } from "../../utils";
-import { text, select, boolean } from "@storybook/addon-knobs/react";
+import { storiesOf } from '@storybook/react';
+import { PrimaryButton } from './Button';
+import { text, select, boolean } from '@storybook/addon-knobs/react';
 
-storiesOf("Components/Button", module).addWithJSX(
-  "basic PrimaryButton",
-  wInfo(`
+storiesOf('Components/Button', module).addWithJSX(
+  'basic PrimaryButton',
+  () => (
+    <PrimaryButton
+      label={text('label', 'Enroll')}
+      disabled={boolean('disabled', false)}
+      onClick={() => alert('hello there')}
+    />
+  ),
+  {
+    info: {
+      text: `
 
   ### Notes
 
@@ -148,13 +159,9 @@ storiesOf("Components/Button", module).addWithJSX(
   />
   ~~~
 
-`)(() => (
-    <PrimaryButton
-      label={text("label", "Enroll")}
-      disabled={boolean("disabled", false)}
-      onClick={() => alert("hello there")}
-    />
-  ))
+`,
+    },
+  }
 );
 ```
 
@@ -215,5 +222,5 @@ You will need to set up some scripts - these may help:
 
 ## Related Issues and Helpful Resources
 
-* [Storybook, React, TypeScript and Jest](https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7)
-* [React, Storybook & TypeScript](http://www.joshschreuder.me/react-storybooks-with-typescript/)
+- [Storybook, React, TypeScript and Jest](https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7)
+- [React, Storybook & TypeScript](http://www.joshschreuder.me/react-storybooks-with-typescript/)
diff --git a/docs/src/stories/data.js b/docs/src/stories/data.js
index 771f61fc299..816195daa62 100644
--- a/docs/src/stories/data.js
+++ b/docs/src/stories/data.js
@@ -36,7 +36,7 @@ export const docsData = {
     section: 'basics',
     title: 'Writing Stories',
     content: marked(`
-You need to write stories to show your components inside React Storybook.<br/>
+You need to write stories to show your components inside Storybook.<br/>
 We've a set of APIs allows you to write stories and do more with them.
 
 When you are writing stories, you can follow these guidelines<br/>
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 342b16456bd..5a4ee737c92 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -2,11 +2,11 @@
 # yarn lockfile v1
 
 
-"@storybook/addon-actions@3.4.6", "@storybook/addon-actions@^3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.4.6.tgz#70ca84a4754ea2969640428890d9a3c9369261f6"
+"@storybook/addon-actions@3.4.8", "@storybook/addon-actions@^3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.4.8.tgz#557bae7c7cc60be9d5199ff972b028de8b574f92"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.8"
     babel-runtime "^6.26.0"
     deep-equal "^1.0.1"
     glamor "^2.20.40"
@@ -17,52 +17,52 @@
     react-inspector "^2.2.2"
     uuid "^3.2.1"
 
-"@storybook/addon-links@3.4.6", "@storybook/addon-links@^3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.4.6.tgz#0e167c03932ddfcbeba02215af1a420c0d3f0843"
+"@storybook/addon-links@3.4.8", "@storybook/addon-links@^3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.4.8.tgz#303e2e37c8abf1861accc95dd9c5f9274bf528ad"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.8"
     babel-runtime "^6.26.0"
     global "^4.3.2"
     prop-types "^15.6.1"
 
-"@storybook/addons@3.4.6", "@storybook/addons@^3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.4.6.tgz#8275e46b8dfe7c751f2f18a431bc3339c999a2ae"
+"@storybook/addons@3.4.8", "@storybook/addons@^3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.4.8.tgz#ff1142d8f0963dd28b7c6f88dc9d3be170ac6600"
 
-"@storybook/channel-postmessage@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.4.6.tgz#acb7d6096bd060a3d224d7e753e33c22f21fabdb"
+"@storybook/channel-postmessage@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.4.8.tgz#4df9b315f6ceff07f33334a633f24c7b81a3ac28"
   dependencies:
-    "@storybook/channels" "3.4.6"
+    "@storybook/channels" "3.4.8"
     global "^4.3.2"
     json-stringify-safe "^5.0.1"
 
-"@storybook/channels@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.4.6.tgz#4147b4e171763f168cd523a3f83e7e125c9523c2"
+"@storybook/channels@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.4.8.tgz#df0aff0d20a9597402e76caa7e5ddb088ede3591"
 
-"@storybook/client-logger@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.4.6.tgz#2f2b271d6825c7325f999f6b17d7ef69984faa18"
+"@storybook/client-logger@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.4.8.tgz#82d6e1c2cb3e37184cc597a933f64b38fb61b88b"
 
-"@storybook/components@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.4.6.tgz#34bddcfa21bddc59ef57a052d157285fab7ba003"
+"@storybook/components@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.4.8.tgz#45934d9a25374e68152826a162e61b9732871eaf"
   dependencies:
     glamor "^2.20.40"
     glamorous "^4.12.1"
     prop-types "^15.6.1"
 
-"@storybook/core@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-3.4.6.tgz#3261dc89bff2c716579270da3f5cf83a374eca5c"
+"@storybook/core@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-3.4.8.tgz#a7f077175081b9e957cd3b04442c01606271fd2d"
   dependencies:
-    "@storybook/addons" "3.4.6"
-    "@storybook/channel-postmessage" "3.4.6"
-    "@storybook/client-logger" "3.4.6"
-    "@storybook/node-logger" "3.4.6"
-    "@storybook/ui" "3.4.6"
+    "@storybook/addons" "3.4.8"
+    "@storybook/channel-postmessage" "3.4.8"
+    "@storybook/client-logger" "3.4.8"
+    "@storybook/node-logger" "3.4.8"
+    "@storybook/ui" "3.4.8"
     autoprefixer "^7.2.6"
     babel-runtime "^6.26.0"
     chalk "^2.3.2"
@@ -94,9 +94,9 @@
     "@storybook/react-simple-di" "^1.2.1"
     babel-runtime "6.x.x"
 
-"@storybook/node-logger@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.4.6.tgz#aed4f5bd102e033391584ef82bd3fec055659448"
+"@storybook/node-logger@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.4.8.tgz#8f8abcd51920545c7458385b0b30199ae48ad78a"
   dependencies:
     npmlog "^4.1.2"
 
@@ -130,18 +130,18 @@
   dependencies:
     babel-runtime "^6.5.0"
 
-"@storybook/react@^3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.4.6.tgz#8bc0c1e10305d7539decb8f8c781b5970ff951ff"
+"@storybook/react@^3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.4.8.tgz#857b83778abb0547525637b084d2fe684a53fc81"
   dependencies:
-    "@storybook/addon-actions" "3.4.6"
-    "@storybook/addon-links" "3.4.6"
-    "@storybook/addons" "3.4.6"
-    "@storybook/channel-postmessage" "3.4.6"
-    "@storybook/client-logger" "3.4.6"
-    "@storybook/core" "3.4.6"
-    "@storybook/node-logger" "3.4.6"
-    "@storybook/ui" "3.4.6"
+    "@storybook/addon-actions" "3.4.8"
+    "@storybook/addon-links" "3.4.8"
+    "@storybook/addons" "3.4.8"
+    "@storybook/channel-postmessage" "3.4.8"
+    "@storybook/client-logger" "3.4.8"
+    "@storybook/core" "3.4.8"
+    "@storybook/node-logger" "3.4.8"
+    "@storybook/ui" "3.4.8"
     airbnb-js-shims "^1.4.1"
     babel-loader "^7.1.4"
     babel-plugin-macros "^2.2.0"
@@ -174,11 +174,11 @@
     webpack "^3.11.0"
     webpack-hot-middleware "^2.22.1"
 
-"@storybook/ui@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.4.6.tgz#c25c93d0843c4250b77b2a3614533a7d5790893d"
+"@storybook/ui@3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.4.8.tgz#73245f02a714cc3de0bb1b62261ec64b6d0d65ae"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.8"
     "@storybook/mantra-core" "^1.7.2"
     "@storybook/podda" "^1.2.3"
     "@storybook/react-komposer" "^2.0.3"
@@ -4605,9 +4605,9 @@ gatsby-cli@^1.1.58:
     yargs "^11.1.0"
     yurnalist "^0.2.1"
 
-gatsby-link@^1.6.44:
-  version "1.6.44"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.44.tgz#31912e66d3b21632ce27e5b7310ec88d9a75eac3"
+gatsby-link@^1.6.45:
+  version "1.6.45"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.45.tgz#6a28d377cd9eee4bf5454be5a9292550b5d1d929"
   dependencies:
     "@types/history" "^4.6.2"
     "@types/react-router-dom" "^4.2.2"
@@ -4622,9 +4622,21 @@ gatsby-module-loader@^1.0.11:
     babel-runtime "^6.26.0"
     loader-utils "^0.2.16"
 
-gatsby-plugin-sharp@^1.6.47:
-  version "1.6.47"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.47.tgz#bcad9de7f5f269d2415266583c0c3cf48611e165"
+gatsby-plugin-page-creator@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-1.0.1.tgz#6bad33a7f46cb5b87dbdaacc3c1bbd81ac63bc20"
+  dependencies:
+    babel-runtime "^6.26.0"
+    bluebird "^3.5.0"
+    chokidar "^1.7.0"
+    glob "^7.1.1"
+    lodash "^4.17.4"
+    parse-filepath "^1.0.1"
+    slash "^1.0.0"
+
+gatsby-plugin-sharp@^1.6.48:
+  version "1.6.48"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.48.tgz#9bb7515da9c7753b3065c51b2d35a0de5b9aa1f5"
   dependencies:
     async "^2.1.2"
     babel-runtime "^6.26.0"
@@ -4640,26 +4652,26 @@ gatsby-plugin-sharp@^1.6.47:
     sharp "^0.20.0"
     svgo "^0.7.2"
 
-gatsby-react-router-scroll@^1.0.17:
-  version "1.0.17"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.17.tgz#16b9c67da7f4a997ebb8c784f4feba2b23af4f98"
+gatsby-react-router-scroll@^1.0.18:
+  version "1.0.18"
+  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.18.tgz#616ffb801dbdbe4598611e2ff3861b91ac3eecbf"
   dependencies:
     babel-runtime "^6.26.0"
     scroll-behavior "^0.9.9"
     warning "^3.0.0"
 
-gatsby-remark-autolink-headers@^1.4.18:
-  version "1.4.18"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.18.tgz#7f1536b3c67b32d902da5cd96cc2de863b8c1f6f"
+gatsby-remark-autolink-headers@^1.4.19:
+  version "1.4.19"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.19.tgz#84417de2fc6fbe9914219999ae0e2616fc9c79a2"
   dependencies:
     babel-runtime "^6.26.0"
     github-slugger "^1.1.1"
     mdast-util-to-string "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-copy-linked-files@^1.5.35:
-  version "1.5.35"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.35.tgz#398cad86328309a57077e7a3e8c95d951756ab80"
+gatsby-remark-copy-linked-files@^1.5.37:
+  version "1.5.37"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.37.tgz#cfa2a055e6ba3dbb2fd9bbbd33a1211788bbd49e"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
@@ -4670,13 +4682,13 @@ gatsby-remark-copy-linked-files@^1.5.35:
     probe-image-size "^4.0.0"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-images@^1.5.66:
-  version "1.5.66"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.66.tgz#f852bca527676079cf679e0cd8b9299d9942acce"
+gatsby-remark-images@^1.5.67:
+  version "1.5.67"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.67.tgz#6b0db6873ea1a141d2b3ca211a05ab85c55922e2"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
-    gatsby-plugin-sharp "^1.6.47"
+    gatsby-plugin-sharp "^1.6.48"
     is-relative-url "^2.0.0"
     lodash "^4.17.4"
     slash "^1.0.0"
@@ -4691,9 +4703,9 @@ gatsby-remark-smartypants@^1.4.12:
     retext-smartypants "^2.0.0"
     unist-util-visit "^1.1.1"
 
-gatsby-source-filesystem@^1.5.38:
-  version "1.5.38"
-  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.38.tgz#9bf74c7bab280f552b074c72aff99f7bca45f927"
+gatsby-source-filesystem@^1.5.39:
+  version "1.5.39"
+  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.39.tgz#c7e49b7809632b53c827e66ff3ee0ba74ef62dd8"
   dependencies:
     babel-cli "^6.26.0"
     babel-runtime "^6.26.0"
@@ -4708,9 +4720,9 @@ gatsby-source-filesystem@^1.5.38:
     slash "^1.0.0"
     valid-url "^1.0.9"
 
-gatsby-transformer-remark@^1.7.42:
-  version "1.7.42"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.42.tgz#c7446dd1d1d98a799e1019476ea05fa170c6afe7"
+gatsby-transformer-remark@^1.7.44:
+  version "1.7.44"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.44.tgz#69b45f377a68484d1eab13f1feb7924428378ce1"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
@@ -4733,9 +4745,9 @@ gatsby-transformer-remark@^1.7.42:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby@^1.9.270:
-  version "1.9.270"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.270.tgz#9a0635c588618dbc11a34bb530c4390c26ef840f"
+gatsby@^1.9.273:
+  version "1.9.273"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.273.tgz#bf3d685cbd5112a55514ca0450888d2da95d4444"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"
@@ -4778,9 +4790,10 @@ gatsby@^1.9.270:
     gatsby-1-config-css-modules "^1.0.11"
     gatsby-1-config-extract-plugin "^1.0.3"
     gatsby-cli "^1.1.58"
-    gatsby-link "^1.6.44"
+    gatsby-link "^1.6.45"
     gatsby-module-loader "^1.0.11"
-    gatsby-react-router-scroll "^1.0.17"
+    gatsby-plugin-page-creator "^1.0.1"
+    gatsby-react-router-scroll "^1.0.18"
     glob "^7.1.1"
     graphql "^0.11.7"
     graphql-relay "^0.5.1"
@@ -8884,6 +8897,13 @@ prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 proper-lockfile@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-1.2.0.tgz#ceff5dd89d3e5f10fb75e1e8e76bc75801a59c34"
diff --git a/examples/angular-cli/.storybook/withTests.ts b/examples/angular-cli/.storybook/withTests.ts
deleted file mode 100644
index 20182378f10..00000000000
--- a/examples/angular-cli/.storybook/withTests.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as results from '../addon-jest.testresults.json';
-import { withTests } from '@storybook/addon-jest';
-
-export const wTests = withTests({
-  results,
-  filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
-});
diff --git a/examples/angular-cli/addon-jest.testresults.json b/examples/angular-cli/addon-jest.testresults.json
index e5de001fb18..f06e841cd8d 100644
--- a/examples/angular-cli/addon-jest.testresults.json
+++ b/examples/angular-cli/addon-jest.testresults.json
@@ -1 +1,101 @@
-{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTotalTestSuites":1,"numTotalTests":3,"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeys":[],"unmatched":0,"updated":0},"startTime":1530186110081,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1530186112997,"message":"","name":"/Users/jetbrains/IdeaProjects/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1530186110782,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
+{
+  "numFailedTestSuites": 0,
+  "numFailedTests": 0,
+  "numPassedTestSuites": 2,
+  "numPassedTests": 6,
+  "numPendingTestSuites": 0,
+  "numPendingTests": 0,
+  "numRuntimeErrorTestSuites": 0,
+  "numTotalTestSuites": 2,
+  "numTotalTests": 6,
+  "snapshot": {
+    "added": 0,
+    "didUpdate": false,
+    "failure": false,
+    "filesAdded": 0,
+    "filesRemoved": 0,
+    "filesUnmatched": 0,
+    "filesUpdated": 0,
+    "matched": 0,
+    "total": 0,
+    "unchecked": 0,
+    "uncheckedKeys": [],
+    "unmatched": 0,
+    "updated": 0
+  },
+  "startTime": 1527637782576,
+  "success": true,
+  "testResults": [
+    {
+      "assertionResults": [
+        {
+          "ancestorTitles": ["AppComponent"],
+          "failureMessages": [],
+          "fullName": "AppComponent should create the app",
+          "location": null,
+          "status": "passed",
+          "title": "should create the app"
+        },
+        {
+          "ancestorTitles": ["AppComponent"],
+          "failureMessages": [],
+          "fullName": "AppComponent should have as title 'app'",
+          "location": null,
+          "status": "passed",
+          "title": "should have as title 'app'"
+        },
+        {
+          "ancestorTitles": ["AppComponent"],
+          "failureMessages": [],
+          "fullName": "AppComponent should render title in a h1 tag",
+          "location": null,
+          "status": "passed",
+          "title": "should render title in a h1 tag"
+        }
+      ],
+      "endTime": 1527637787074,
+      "message": "",
+      "name":
+        "/Users/jetbrains/IdeaProjects/storybook/examples/angular-cli/dist/app/app.component.spec.ts",
+      "startTime": 1527637783974,
+      "status": "passed",
+      "summary": ""
+    },
+    {
+      "assertionResults": [
+        {
+          "ancestorTitles": ["AppComponent"],
+          "failureMessages": [],
+          "fullName": "AppComponent should create the app",
+          "location": null,
+          "status": "passed",
+          "title": "should create the app"
+        },
+        {
+          "ancestorTitles": ["AppComponent"],
+          "failureMessages": [],
+          "fullName": "AppComponent should have as title 'app'",
+          "location": null,
+          "status": "passed",
+          "title": "should have as title 'app'"
+        },
+        {
+          "ancestorTitles": ["AppComponent"],
+          "failureMessages": [],
+          "fullName": "AppComponent should render title in a h1 tag",
+          "location": null,
+          "status": "passed",
+          "title": "should render title in a h1 tag"
+        }
+      ],
+      "endTime": 1527637787196,
+      "message": "",
+      "name":
+        "/Users/jetbrains/IdeaProjects/storybook/examples/angular-cli/src/app/app.component.spec.ts",
+      "startTime": 1527637783968,
+      "status": "passed",
+      "summary": ""
+    }
+  ],
+  "wasInterrupted": false
+}
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index a9c3ff6cf9a..598b2d141e5 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -54,18 +54,18 @@
     "@angular-devkit/build-angular": "^0.6.0",
     "@angular/cli": "^6.0.7",
     "@angular/compiler-cli": "^6.0.3",
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-jest": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/angular": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-jest": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/angular": "4.0.0-alpha.14",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.3",
     "@types/jest": "^22.2.3",
diff --git a/examples/angular-cli/src/stories/addon-jest.stories.ts b/examples/angular-cli/src/stories/addon-jest.stories.ts
index 0e71c9641fb..918fe5550c7 100644
--- a/examples/angular-cli/src/stories/addon-jest.stories.ts
+++ b/examples/angular-cli/src/stories/addon-jest.stories.ts
@@ -1,10 +1,23 @@
 import { storiesOf } from '@storybook/angular';
+import { withTests } from '@storybook/addon-jest';
+
 import { AppComponent } from '../app/app.component';
-import { wTests } from '../../.storybook/withTests';
+import * as results from '../../addon-jest.testresults.json';
 
 storiesOf('Addon|Jest', module)
-  .addDecorator(wTests('app.component'))
-  .add('app.component with jest tests', () => ({
-    component: AppComponent,
-    props: {},
-  }));
+  .addDecorator(
+    withTests({
+      results,
+      filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
+    })
+  )
+  .add(
+    'app.component with jest tests',
+    () => ({
+      component: AppComponent,
+      props: {},
+    }),
+    {
+      jest: 'app.component',
+    }
+  );
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 2255dd18dbd..28ae5c7d003 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -18,21 +18,21 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.0.0-alpha.10",
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-events": "4.0.0-alpha.10",
-    "@storybook/addon-info": "4.0.0-alpha.10",
-    "@storybook/addon-jest": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/client-logger": "4.0.0-alpha.10",
-    "@storybook/react": "4.0.0-alpha.10",
+    "@storybook/addon-a11y": "4.0.0-alpha.14",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-events": "4.0.0-alpha.14",
+    "@storybook/addon-info": "4.0.0-alpha.14",
+    "@storybook/addon-jest": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/client-logger": "4.0.0-alpha.14",
+    "@storybook/react": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.0",
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
index 587f57a8dae..cedc3dd0594 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -181,7 +181,7 @@ exports[`Storyshots Button addons composition 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -385,7 +385,7 @@ exports[`Storyshots Button with new info 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index d7a49c5cf19..bfa4d7392ad 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,23 +13,23 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.0.0-alpha.10",
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-events": "4.0.0-alpha.10",
-    "@storybook/addon-jest": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addon-viewport": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/core": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
-    "@storybook/html": "4.0.0-alpha.10",
+    "@storybook/addon-a11y": "4.0.0-alpha.14",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-events": "4.0.0-alpha.14",
+    "@storybook/addon-jest": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addon-viewport": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/core": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
+    "@storybook/html": "4.0.0-alpha.14",
     "babel-core": "^6.26.0",
     "babel-runtime": "^6.26.0",
     "eventemitter3": "^3.1.0",
diff --git a/examples/html-kitchen-sink/stories/addon-jest.stories.js b/examples/html-kitchen-sink/stories/addon-jest.stories.js
index 543cc564231..96df36d89e8 100644
--- a/examples/html-kitchen-sink/stories/addon-jest.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-jest.stories.js
@@ -3,10 +3,6 @@ import { storiesOf } from '@storybook/html';
 import { withTests } from '@storybook/addon-jest';
 import results from './addon-jest.testresults.json';
 
-const withTestsFiles = withTests({
-  results,
-});
-
 storiesOf('Addons|jest', module)
-  .addDecorator(withTestsFiles('addon-jest'))
-  .add('withTests', () => 'This story shows test results');
+  .addDecorator(withTests({ results }))
+  .add('withTests', () => 'This story shows test results', { jest: 'addon-jest' });
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 71d2e4f459a..06cefbf5dd3 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -23,12 +23,12 @@
     "marko-widgets": "^7.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/marko": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/marko": "4.0.0-alpha.14",
     "babel-core": "^6.26.0",
     "prettier": "^1.13.4",
     "webpack": "^4.10.2"
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 437bfa146dd..379f71afcb5 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,18 +10,18 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addon-viewport": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/mithril": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addon-viewport": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/mithril": "4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "webpack": "^4.10.2"
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index a1b6fdd1c91..7ba49608848 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -15,6 +15,7 @@ addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded');
 setOptions({
   hierarchySeparator: /\/|\./,
   hierarchyRootSeparator: /\|/,
+  theme: themes.dark,
 });
 
 addDecorator(story => <ThemeProvider theme={themes.normal}>{story()}</ThemeProvider>);
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index d18389da6f9..e2f27798776 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -12,27 +12,27 @@
     "storybook": "start-storybook -p 9011 -c ./ -s built-storybooks"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.0.0-alpha.10",
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-events": "4.0.0-alpha.10",
-    "@storybook/addon-graphql": "4.0.0-alpha.10",
-    "@storybook/addon-info": "4.0.0-alpha.10",
-    "@storybook/addon-jest": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots-puppeteer": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addon-viewport": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
-    "@storybook/node-logger": "4.0.0-alpha.10",
-    "@storybook/react": "4.0.0-alpha.10",
+    "@storybook/addon-a11y": "4.0.0-alpha.14",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-events": "4.0.0-alpha.14",
+    "@storybook/addon-graphql": "4.0.0-alpha.14",
+    "@storybook/addon-info": "4.0.0-alpha.14",
+    "@storybook/addon-jest": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots-puppeteer": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addon-viewport": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
+    "@storybook/node-logger": "4.0.0-alpha.14",
+    "@storybook/react": "4.0.0-alpha.14",
     "babel-runtime": "^6.26.0",
     "cors": "^2.8.4",
     "emotion": "^9.1.3",
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index e0a17b8e673..74b0823d8e6 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -113,14 +113,6 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Decorated Action (deprecated) 1`] = `
-<button
-  class="css-1qwzad5"
->
-  Native Event
-</button>
-`;
-
 exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
 <button
   class="css-1qwzad5"
@@ -244,3 +236,11 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
   Object (configured depth: 2)
 </button>
 `;
+
+exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
+<button
+  class="css-1qwzad5"
+>
+  Native Event
+</button>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
index 129514ebf52..ddcf188c21b 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addons|Backgrounds disabled via [] 1`] = `
+<button>
+  This one should not use backgrounds
+</button>
+`;
+
 exports[`Storyshots Addons|Backgrounds overriden 1`] = `
 <button>
   This one should have different backgrounds
 </button>
 `;
 
+exports[`Storyshots Addons|Backgrounds skipped via disable:true 1`] = `
+<button>
+  This one should not use backgrounds either
+</button>
+`;
+
 exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
@@ -18,31 +30,19 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds, parameters disabled via [] 1`] = `
-<button>
-  This one should not use backgrounds
-</button>
-`;
-
-exports[`Storyshots Addons|Backgrounds, parameters overriden 1`] = `
+exports[`Storyshots Addons|Backgrounds.deprecated overriden 1`] = `
 <button>
   This one should have different backgrounds
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds, parameters skipped via disable:true 1`] = `
-<button>
-  This one should not use backgrounds either
-</button>
-`;
-
-exports[`Storyshots Addons|Backgrounds, parameters story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds.deprecated story 1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds, parameters story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds.deprecated story 2 1`] = `
 <button>
   This one too!
 </button>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index ad487ed5f71..33ebbe96475 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -13,7 +13,7 @@ exports[`Storyshots Addons|Events Logger 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Events/WithEvents (deprecated) Logger 1`] = `
+exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
 <div
   class="css-1ruxp1v"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 04f742dd04c..4f7e22b7e24 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -48,7 +48,7 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
           <div
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
           >
-            Info could be used as a global or local decorator as well.
+            Info can take options via the global or local decorator as well.
           </div>
         </div>
         <div>
@@ -98,7 +98,7 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -404,7 +404,7 @@ exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -586,7 +586,7 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -816,10 +816,10 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
           style="margin-bottom:0"
         >
           <h4
-            id="you-can-use-markdown-in-your-withinfo()-description."
+            id="you-can-use-markdown-in-your-withinfo-description."
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
           >
-            You can use markdown in your withInfo() description.
+            You can use markdown in your withInfo description.
           </h4>
           <div
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
@@ -917,7 +917,7 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1217,7 +1217,7 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1529,7 +1529,7 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1802,7 +1802,7 @@ exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component fo
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -1998,7 +1998,7 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -2241,7 +2241,7 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -2512,7 +2512,7 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -3482,7 +3482,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -4268,7 +4268,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -4549,7 +4549,7 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -5001,7 +5001,7 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -5492,7 +5492,7 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -5765,7 +5765,7 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -6001,10 +6001,10 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
           style="margin-bottom:0"
         >
           <h4
-            id="you-can-use-markdown-in-your-withinfo()-description."
+            id="you-can-use-markdown-in-your-withinfo-description."
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
           >
-            You can use markdown in your withInfo() description.
+            You can use markdown in your withInfo description.
           </h4>
           <div
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
@@ -6102,7 +6102,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -6402,7 +6402,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -6672,7 +6672,7 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -6917,7 +6917,7 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
             </div>
           </div>
           <button
-            class="css-zvhq5i"
+            class="css-1naocv3"
           >
             <div
               class="css-lvl6aa"
@@ -7216,7 +7216,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -7667,7 +7667,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -8402,7 +8402,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -8704,7 +8704,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
               </div>
             </div>
             <button
-              class="css-zvhq5i"
+              class="css-1naocv3"
             >
               <div
                 class="css-lvl6aa"
@@ -8887,3 +8887,334 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
   </div>
 </div>
 `;
+
+exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`] = `
+<div>
+  <div
+    style="position:relative;z-index:0"
+  >
+    <button>
+      Button
+    </button>
+  </div>
+  <button
+    style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
+    type="button"
+  >
+    Show Info
+  </button>
+  <div
+    style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
+  >
+    <button
+      style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
+      type="button"
+    >
+      ×
+    </button>
+    <div>
+      <div
+        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
+      >
+        <div
+          style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
+        >
+          <h1
+            style="margin:0;padding:0;font-size:35px"
+          >
+            Addons|Info.deprecated
+          </h1>
+          <h2
+            style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
+          >
+            Displays Markdown in description
+          </h2>
+        </div>
+        <div
+          style="margin-bottom:0"
+        >
+          <h4
+            id="you-can-use-markdown-in-your-withinfo-description."
+            style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
+          >
+            You can use markdown in your withInfo description.
+          </h4>
+          <div
+            style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
+          >
+            Sometimes you might want to manually include some code examples:
+          </div>
+          <pre
+            class="language-js"
+            style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+          >
+            <code
+              class="language-js"
+              style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa"
+            >
+              const Button = () =&gt; &lt;button /&gt;;
+            </code>
+          </pre>
+          <div
+            style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
+          >
+            Maybe include a 
+            <a
+              href="http://storybook.js.org"
+              rel="noopener noreferrer"
+              style="color:#3498db"
+              target="_blank"
+            >
+              link
+            </a>
+             to your project as well.
+          </div>
+        </div>
+        <div>
+          <h1
+            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
+          >
+            Story Source
+          </h1>
+          <pre
+            class="css-r8d96o"
+          >
+            <div>
+              <div
+                style="padding-left:18px;padding-right:3px"
+              >
+                <span
+                  style="color:#777"
+                >
+                  &lt;BaseButton
+                </span>
+                <span>
+                  <span>
+                     
+                    <span>
+                      onClick
+                    </span>
+                    <span>
+                      =
+                      <span>
+                        {
+                        <span
+                          style="color:#170"
+                        >
+                          clicked
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
+                  <span>
+                     
+                    <span>
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span>
+                        "
+                        <span
+                          style="color:#22a;word-break:break-word"
+                        >
+                          Button
+                        </span>
+                        "
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style="color:#777"
+                >
+                  /&gt;
+                </span>
+              </div>
+            </div>
+            <button
+              class="css-1naocv3"
+            >
+              <div
+                class="css-lvl6aa"
+              >
+                <div
+                  style="margin-bottom:6px"
+                >
+                  Copied!
+                </div>
+                <div>
+                  Copy
+                </div>
+              </div>
+            </button>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style="margin:20px 0 0 0"
+            >
+              "BaseButton" Component
+            </h2>
+            <table
+              class="css-1uhv8nx"
+            >
+              <thead>
+                <tr>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    property
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    propType
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    required
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    default
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    <span
+                      style="color:#a11"
+                    >
+                      false
+                    </span>
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    label
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    yes
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    <span
+                      style="color:#170"
+                    >
+                      onClick
+                    </span>
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    style
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    <span
+                      style="color:#666"
+                    >
+                      {}
+                    </span>
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
index 7b7eda040cd..96b47dad9fa 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -36,7 +36,7 @@ exports[`Storyshots Addons|Knobs.withKnobs triggers actions via button 1`] = `
 
 exports[`Storyshots Addons|Knobs.withKnobs tweaks static values 1`] = `
 <div
-  style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
+  style="background-color:#dedede;border:2px dashed silver;border-radius:10px;padding:10px"
 >
   <p>
     My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
@@ -74,16 +74,12 @@ exports[`Storyshots Addons|Knobs.withKnobs tweaks static values 1`] = `
       src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII="
     />
   </p>
-  <hr />
-  <p>
-    PS. My shirt pocket contains: 
-  </p>
 </div>
 `;
 
 exports[`Storyshots Addons|Knobs.withKnobs tweaks static values organized in groups 1`] = `
 <div
-  style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
+  style="background-color:rgba(126, 211, 33, 0.22);border:2px dashed silver;border-radius:10px;padding:10px"
 >
   <h1>
     General Information
diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
index a8dd3941c96..94e74767d4a 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,17 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Notes using decorator arguments, withMarkdownNotes 1`] = `
-<button>
-  Button with notes - check the notes panel for details
-</button>
-`;
-
-exports[`Storyshots Addons|Notes using decorator arguments, withNotes 1`] = `
-<button>
-  Button with notes - check the notes panel for details
-</button>
-`;
-
 exports[`Storyshots Addons|Notes with a markdown table 1`] = `
 <button>
   Button with notes - check the notes panel for details
@@ -35,3 +23,15 @@ exports[`Storyshots Addons|Notes withNotes rendering inline, github-flavored mar
   Button with notes - check the notes panel for details
 </button>
 `;
+
+exports[`Storyshots Addons|Notes.deprecated using decorator arguments, withMarkdownNotes 1`] = `
+<button>
+  Button with notes - check the notes panel for details
+</button>
+`;
+
+exports[`Storyshots Addons|Notes.deprecated using decorator arguments, withNotes 1`] = `
+<button>
+  Button with notes - check the notes panel for details
+</button>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
index 17da990704e..9f7e1f3f1f3 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Addons|Viewport default 1`] = `
 <div
-  class="css-9por5e"
+  class="css-0"
 >
   I don't have problems being rendered using the default viewport.
 </div>
@@ -10,7 +10,7 @@ exports[`Storyshots Addons|Viewport default 1`] = `
 
 exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
 <div
-  class="css-9por5e"
+  class="css-0"
 >
   I've inherited 
   <b>
@@ -20,9 +20,21 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`]
 </div>
 `;
 
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "Viewport" component (deprecated) 1`] = `
+exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
 <div
-  class="css-9por5e"
+  class="css-0"
+>
+  I respect my parents but I should be looking good on 
+  <b>
+    iPad
+  </b>
+  .
+</div>
+`;
+
+exports[`Storyshots Addons|Viewport.deprecated Overridden via "Viewport" component 1`] = `
+<div
+  class="css-0"
 >
   I respect my parents but I should be looking good on 
   <b>
@@ -32,9 +44,9 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi
 </div>
 `;
 
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" decorator (deprecated) 1`] = `
+exports[`Storyshots Addons|Viewport.deprecated Overridden via "withViewport" decorator 1`] = `
 <div
-  class="css-9por5e"
+  class="css-0"
 >
   I respect my parents but I should be looking good on 
   <b>
@@ -44,18 +56,6 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi
 </div>
 `;
 
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
-<div
-  class="css-9por5e"
->
-  I respect my parents but I should be looking good on 
-  <b>
-    iPad
-  </b>
-  .
-</div>
-`;
-
 exports[`Storyshots Addons|Viewport.withViewport onViewportChange 1`] = `
 <div
   class="css-1ruxp1v"
diff --git a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
index 05dfd93da38..c6e4179d57b 100644
--- a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Core|Events Force re-render 1`] = `
 <button
-  class="css-191qq9b"
+  class="css-1riodoz"
 >
   Clicked: 0
 </button>
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index 62f4cacb43c..2f5422f7006 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -50,9 +50,6 @@ storiesOf('Addons|Actions', module)
       Moving away from this story will persist the action logger
     </Button>
   ))
-  .add('Decorated Action (deprecated)', () => (
-    <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
-  ))
   .add('Circular Payload', () => {
     const circular = { foo: {} };
     circular.foo.circular = circular;
@@ -160,3 +157,7 @@ storiesOf('Addons|Actions', module)
       </div>
     );
   });
+
+storiesOf('Addons|Actions.deprecated', module).add('Decorated Action', () => (
+  <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
+));
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index de9048fc519..69578df885d 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -5,25 +5,6 @@ import backgrounds, { withBackgrounds } from '@storybook/addon-backgrounds';
 import BaseButton from '../components/BaseButton';
 
 storiesOf('Addons|Backgrounds', module)
-  .addDecorator(
-    backgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
-  .add('story 1', () => (
-    <BaseButton label="You should be able to switch backgrounds for this story" />
-  ))
-  .add('story 2', () => <BaseButton label="This one too!" />)
-  .add(
-    'overriden',
-    backgrounds([
-      { name: 'red', value: '#F44336' },
-      { name: 'blue', value: '#2196F3', default: true },
-    ])(() => <BaseButton label="This one should have different backgrounds" />)
-  );
-
-storiesOf('Addons|Backgrounds, parameters', module)
   .addDecorator(withBackgrounds)
   .addParameters({
     backgrounds: [
@@ -51,3 +32,22 @@ storiesOf('Addons|Backgrounds, parameters', module)
       backgrounds: { disable: true },
     }
   );
+
+storiesOf('Addons|Backgrounds.deprecated', module)
+  .addDecorator(
+    backgrounds([
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998', default: true },
+    ])
+  )
+  .add('story 1', () => (
+    <BaseButton label="You should be able to switch backgrounds for this story" />
+  ))
+  .add('story 2', () => <BaseButton label="This one too!" />)
+  .add(
+    'overriden',
+    backgrounds([
+      { name: 'red', value: '#F44336' },
+      { name: 'blue', value: '#2196F3', default: true },
+    ])(() => <BaseButton label="This one should have different backgrounds" />)
+  );
diff --git a/examples/official-storybook/stories/addon-events.stories.js b/examples/official-storybook/stories/addon-events.stories.js
index d83842b8e16..1fc4a76185c 100644
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@@ -72,7 +72,7 @@ storiesOf('Addons|Events', module)
   .add('Logger', () => <Logger emitter={emitter} />);
 
 const WithEvents = withEvents;
-storiesOf('Addons|Events/WithEvents (deprecated)', module)
+storiesOf('Addons|Events.deprecated', module)
   .addDecorator(story => (
     <WithEvents emit={emit} events={events}>
       {story()}
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index 9f048859716..80c8630509b 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -11,11 +11,10 @@ import TableComponent from '../components/TableComponent';
 import externalMdDocs from './addon-info-resources/EXAMPLE.md';
 
 storiesOf('Addons|Info.React Docgen', module)
+  .addDecorator(withInfo)
   .add(
     'Comments from PropType declarations',
-    withInfo(
-      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
-    )(() => (
+    () => (
       <DocgenButton
         onClick={action('clicked')}
         label="Docgen Button"
@@ -33,29 +32,39 @@ storiesOf('Addons|Info.React Docgen', module)
         }}
         arrayOf={[1, 2, 3]}
       />
-    ))
+    ),
+    {
+      info:
+        'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
+    }
   )
   .add(
     'Comments from Flow declarations',
-    withInfo(
-      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
-    )(() => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />)
+    () => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />,
+    {
+      info:
+        'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
+    }
   )
   .add(
     'Comments from component declaration',
-    withInfo(
-      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
-    )(() => <BaseButton onClick={action('clicked')} label="Button" />)
+    () => <BaseButton onClick={action('clicked')} label="Button" />,
+    {
+      info:
+        'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
+    }
   )
   .add(
     'Comments from named export component declaration',
-    withInfo(
-      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
-    )(() => <NamedExportButton onClick={action('clicked')} label="Button" />)
+    () => <NamedExportButton onClick={action('clicked')} label="Button" />,
+    {
+      info:
+        'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
+    }
   );
 
 const markdownDescription = `
-#### You can use markdown in your withInfo() description.
+#### You can use markdown in your withInfo description.
 
 Sometimes you might want to manually include some code examples:
 ~~~js
@@ -66,21 +75,27 @@ Maybe include a [link](http://storybook.js.org) to your project as well.
 `;
 
 storiesOf('Addons|Info.Markdown', module)
+  .addDecorator(withInfo)
   .add(
     'Displays Markdown in description',
-    withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
+    () => <BaseButton onClick={action('clicked')} label="Button" />,
+    { info: markdownDescription }
   )
   .add(
     'From internal Markdown file',
-    withInfo(`
+    () => <BaseButton onClick={action('clicked')} label="Button" />,
+    {
+      info: `
       # internal
       ## markdown
       file
-    `)(() => <BaseButton onClick={action('clicked')} label="Button" />)
+    `,
+    }
   )
   .add(
     'From external Markdown file',
-    withInfo(externalMdDocs)(() => <BaseButton onClick={action('clicked')} label="Button" />)
+    () => <BaseButton onClick={action('clicked')} label="Button" />,
+    { info: externalMdDocs }
   );
 
 const JSXDescription = (
@@ -100,70 +115,87 @@ const JSXDescription = (
   </div>
 );
 
-storiesOf('Addons|Info.JSX', module).add(
-  'Displays JSX in description',
-  withInfo({ text: JSXDescription })(() => (
-    <BaseButton onClick={action('clicked')} label="Button" />
-  ))
-);
+storiesOf('Addons|Info.JSX', module)
+  .addDecorator(withInfo)
+  .add(
+    'Displays JSX in description',
+    () => <BaseButton onClick={action('clicked')} label="Button" />,
+    {
+      info: { text: JSXDescription },
+    }
+  );
 
-storiesOf('Addons|Info.Options.inline', module).add(
-  'Inlines component inside story',
-  withInfo({
-    text: 'Component should be inlined between description and PropType table',
-    inline: true, // Displays info inline vs click button to view
-  })(() => <BaseButton label="Button" />)
-);
+storiesOf('Addons|Info.Options.inline', module)
+  .addDecorator(withInfo)
+  .add('Inlines component inside story', () => <BaseButton label="Button" />, {
+    info: {
+      text: 'Component should be inlined between description and PropType table',
+      inline: true, // Displays info inline vs click button to view
+    },
+  });
 
-storiesOf('Addons|Info.Options.excludedPropTypes', module).add(
-  'Excludes propTypes that are in the excludedPropTypes array',
-  withInfo({
-    text: 'Label propType should be excluded',
-    excludedPropTypes: ['label'],
-  })(() => <BaseButton label="Button" />)
-);
+storiesOf('Addons|Info.Options.excludedPropTypes', module)
+  .addDecorator(withInfo)
+  .add(
+    'Excludes propTypes that are in the excludedPropTypes array',
+    () => <BaseButton label="Button" />,
+    {
+      info: {
+        text: 'Label propType should be excluded',
+        excludedPropTypes: ['label'],
+      },
+    }
+  );
 
-storiesOf('Addons|Info.Options.header', module).add(
-  'Shows or hides Info Addon header',
-  withInfo({
-    text: 'The Info Addon header should be hidden',
-    header: false, // Toggles display of header with component name and description
-  })(() => <BaseButton label="Button" />)
-);
+storiesOf('Addons|Info.Options.header', module)
+  .addDecorator(withInfo)
+  .add('Shows or hides Info Addon header', () => <BaseButton label="Button" />, {
+    info: {
+      text: 'The Info Addon header should be hidden',
+      header: false, // Toggles display of header with component name and description
+    },
+  });
 
-storiesOf('Addons|Info.Options.source', module).add(
-  'Shows or hides Info Addon source',
-  withInfo({
-    text: 'The Info Addon source section should be hidden',
-    source: false, // Displays the source of story Component
-  })(() => <BaseButton label="Button" />)
-);
+storiesOf('Addons|Info.Options.source', module)
+  .addDecorator(withInfo)
+  .add('Shows or hides Info Addon source', () => <BaseButton label="Button" />, {
+    info: {
+      text: 'The Info Addon source section should be hidden',
+      source: false, // Displays the source of story Component
+    },
+  });
 
-storiesOf('Addons|Info.Options.propTables', module).add(
-  'Shows additional component prop tables',
-  withInfo({
-    text: 'There should be a prop table added for a component not included in the story',
-    propTables: [FlowTypeButton],
-  })(() => <BaseButton label="Button" />)
-);
+storiesOf('Addons|Info.Options.propTables', module)
+  .addDecorator(withInfo)
+  .add('Shows additional component prop tables', () => <BaseButton label="Button" />, {
+    info: {
+      text: 'There should be a prop table added for a component not included in the story',
+      propTables: [FlowTypeButton],
+    },
+  });
 
-storiesOf('Addons|Info.Options.propTablesExclude', module).add(
-  'Exclude component from prop tables',
-  withInfo({
-    text: 'This can exclude extraneous components from being displayed in prop tables.',
-    propTablesExclude: [FlowTypeButton],
-  })(() => (
-    <div>
-      <BaseButton label="Button" />
-      <FlowTypeButton label="Flow Typed Button" />
-    </div>
-  ))
-);
+storiesOf('Addons|Info.Options.propTablesExclude', module)
+  .addDecorator(withInfo)
+  .add(
+    'Exclude component from prop tables',
+    () => (
+      <div>
+        <BaseButton label="Button" />
+        <FlowTypeButton label="Flow Typed Button" />
+      </div>
+    ),
+    {
+      info: {
+        text: 'This can exclude extraneous components from being displayed in prop tables.',
+        propTablesExclude: [FlowTypeButton],
+      },
+    }
+  );
 
 storiesOf('Addons|Info.Options.styles', module)
-  .add(
-    'Extend info styles with an object',
-    withInfo({
+  .addDecorator(withInfo)
+  .add('Extend info styles with an object', () => <BaseButton label="Button" />, {
+    info: {
       styles: {
         button: {
           base: {
@@ -176,11 +208,10 @@ storiesOf('Addons|Info.Options.styles', module)
           },
         },
       },
-    })(() => <BaseButton label="Button" />)
-  )
-  .add(
-    'Full control over styles using a function',
-    withInfo({
+    },
+  })
+  .add('Full control over styles using a function', () => <BaseButton label="Button" />, {
+    info: {
       styles: stylesheet => ({
         ...stylesheet,
         header: {
@@ -191,20 +222,19 @@ storiesOf('Addons|Info.Options.styles', module)
           },
         },
       }),
-    })(() => <BaseButton label="Button" />)
-  );
+    },
+  });
 
-storiesOf('Addons|Info.Options.TableComponent', module).add(
-  'Use a custom component for the table',
-  withInfo({
-    TableComponent,
-  })(() => <BaseButton label="Button" />)
-);
+storiesOf('Addons|Info.Options.TableComponent', module)
+  .addDecorator(withInfo)
+  .add('Use a custom component for the table', () => <BaseButton label="Button" />, {
+    info: {
+      TableComponent,
+    },
+  });
 
 storiesOf('Addons|Info.Decorator', module)
-  .addDecorator((story, context) =>
-    withInfo('Info could be used as a global or local decorator as well.')(story)(context)
-  )
+  .addDecorator(withInfo('Info can take options via the global or local decorator as well.'))
   .add('Use Info as story decorator', () => <BaseButton label="Button" />);
 
 const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
@@ -213,123 +243,138 @@ const Input = hoc(() => <input type="text" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addons|Info.GitHub issues', module).add(
-  '#1814',
-  withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
-    <div>
-      <Input />
-      <TextArea />
-    </div>
-  ))
-);
+storiesOf('Addons|Info.GitHub issues', module)
+  .addDecorator(withInfo)
+  .add(
+    '#1814',
+    () => (
+      <div>
+        <Input />
+        <TextArea />
+      </div>
+    ),
+    {
+      info: 'Allow Duplicate DisplayNames for HOC #1814',
+    }
+  );
 
-storiesOf('Addons|Info.Options.maxPropsIntoLine === 0', module).add(
-  'Object and array props are broken to lines',
-  withInfo({
-    text: 'Component should be inlined between description and PropType table',
-    inline: true,
-    maxPropsIntoLine: 0,
-  })(() => (
-    <BaseButton
-      label="Button"
-      object={{
-        one: 'Object and array properties',
-        two: 'will be broken to different lines',
-        three: 'if greater than `maxPropsIntoLine` option threshold.',
-      }}
-      array={['one', 'two', 'three', 'four']}
-      arrayOfObjects={[
-        {
-          one: 'Object and array properties will be broken to different lines',
-          two: 'if greater than `maxPropsIntoLine` option threshold.',
-          object: {
-            object1: {
-              one: 'one',
-              two: 'two',
-              three: 'three',
-            },
-            array: ['one', 'two', 'three'],
-            object2: {
-              object: {
+storiesOf('Addons|Info.Options.maxPropsIntoLine === 0', module)
+  .addDecorator(withInfo)
+  .add(
+    'Object and array props are broken to lines',
+    () => (
+      <BaseButton
+        label="Button"
+        object={{
+          one: 'Object and array properties',
+          two: 'will be broken to different lines',
+          three: 'if greater than `maxPropsIntoLine` option threshold.',
+        }}
+        array={['one', 'two', 'three', 'four']}
+        arrayOfObjects={[
+          {
+            one: 'Object and array properties will be broken to different lines',
+            two: 'if greater than `maxPropsIntoLine` option threshold.',
+            object: {
+              object1: {
                 one: 'one',
                 two: 'two',
                 three: 'three',
               },
-              array: [
-                'one',
-                'two',
-                {
-                  object: {
-                    object: {
-                      one: 'one',
-                      two: 'two',
-                      three: 'three',
-                    },
-                    array: ['one', 'two', 'three'],
-                  },
+              array: ['one', 'two', 'three'],
+              object2: {
+                object: {
+                  one: 'one',
+                  two: 'two',
+                  three: 'three',
                 },
-              ],
+                array: [
+                  'one',
+                  'two',
+                  {
+                    object: {
+                      object: {
+                        one: 'one',
+                        two: 'two',
+                        three: 'three',
+                      },
+                      array: ['one', 'two', 'three'],
+                    },
+                  },
+                ],
+              },
             },
           },
-        },
-      ]}
-    />
-  ))
-);
+        ]}
+      />
+    ),
+    {
+      info: {
+        text: 'Component should be inlined between description and PropType table',
+        inline: true,
+        maxPropsIntoLine: 0,
+      },
+    }
+  );
 
-storiesOf('Addons|Info.Options.maxPropsIntoLine === 3', module).add(
-  'Object and array props are broken to lines',
-  withInfo({
-    text: 'Component should be inlined between description and PropType table',
-    inline: true,
-    maxPropsIntoLine: 3,
-  })(() => (
-    <BaseButton
-      label="Button"
-      object={{
-        one: 'Object and array properties',
-        two: 'will be broken to different lines',
-        three: 'if greater than `maxPropsIntoLine` option threshold.',
-      }}
-      array={['one', 'two', 'three', 'four']}
-      arrayOfObjects={[
-        {
-          one: 'Object and array properties will be broken to different lines',
-          two: 'if greater than `maxPropsIntoLine` option threshold.',
-          object: {
-            object1: {
-              one: 'one',
-              two: 'two',
-              three: 'three',
-            },
-            array: ['one', 'two', 'three'],
-            object2: {
-              object: {
+storiesOf('Addons|Info.Options.maxPropsIntoLine === 3', module)
+  .addDecorator(withInfo)
+  .add(
+    'Object and array props are broken to lines',
+    () => (
+      <BaseButton
+        label="Button"
+        object={{
+          one: 'Object and array properties',
+          two: 'will be broken to different lines',
+          three: 'if greater than `maxPropsIntoLine` option threshold.',
+        }}
+        array={['one', 'two', 'three', 'four']}
+        arrayOfObjects={[
+          {
+            one: 'Object and array properties will be broken to different lines',
+            two: 'if greater than `maxPropsIntoLine` option threshold.',
+            object: {
+              object1: {
                 one: 'one',
                 two: 'two',
                 three: 'three',
               },
-              array: [
-                'one',
-                'two',
-                {
-                  object: {
-                    object: {
-                      one: 'one',
-                      two: 'two',
-                      three: 'three',
-                    },
-                    array: ['one', 'two', 'three'],
-                  },
+              array: ['one', 'two', 'three'],
+              object2: {
+                object: {
+                  one: 'one',
+                  two: 'two',
+                  three: 'three',
                 },
-              ],
+                array: [
+                  'one',
+                  'two',
+                  {
+                    object: {
+                      object: {
+                        one: 'one',
+                        two: 'two',
+                        three: 'three',
+                      },
+                      array: ['one', 'two', 'three'],
+                    },
+                  },
+                ],
+              },
             },
           },
-        },
-      ]}
-    />
-  ))
-);
+        ]}
+      />
+    ),
+    {
+      info: {
+        text: 'Component should be inlined between description and PropType table',
+        inline: true,
+        maxPropsIntoLine: 3,
+      },
+    }
+  );
 
 storiesOf('Addons|Info.Parameters', module)
   .addDecorator(
@@ -386,3 +431,8 @@ storiesOf('Addons|Info.Parameters', module)
     () => <BaseButton onClick={action('clicked')} label="Button" />,
     { info: { disable: true } }
   );
+
+storiesOf('Addons|Info.deprecated', module).add(
+  'Displays Markdown in description',
+  withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
+);
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index 3cb6f913590..2e612898bb1 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -4,14 +4,14 @@ import { storiesOf } from '@storybook/react';
 import { withTests } from '@storybook/addon-jest';
 import results from './addon-jest.testresults.json';
 
-const withTestsFiles = withTests({
-  results,
-});
-
 storiesOf('Addons|jest', module)
-  .addDecorator(withTestsFiles('addon-jest'))
-  .add('withTests', () => (
-    <div>
-      <p>Hello</p>
-    </div>
-  ));
+  .addDecorator(withTests({ results }))
+  .add(
+    'withTests',
+    () => (
+      <div>
+        <p>Hello</p>
+      </div>
+    ),
+    { jest: 'addon-jest' }
+  );
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index 54d90f84d50..76ca5f7566c 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -47,10 +47,11 @@ storiesOf('Addons|Knobs.withKnobs', module)
     const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
     const years = number('Years in NY', 9);
 
-    const backgroundColor = color('background', '#ffff00');
+    const backgroundColor = color('background', '#dedede');
     const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
     const otherStyles = object('Styles', {
-      border: '3px solid #ff00ff',
+      border: '2px dashed silver',
+      borderRadius: 10,
       padding: '10px',
     });
     const nice = boolean('Nice', true);
@@ -79,8 +80,6 @@ storiesOf('Addons|Knobs.withKnobs', module)
         <p>
           When I am happy I look like this: <img src={images[0]} alt="happy" />
         </p>
-        <hr />
-        <p>PS. My shirt pocket contains: </p>
       </div>
     );
   })
@@ -118,10 +117,14 @@ storiesOf('Addons|Knobs.withKnobs', module)
     const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
 
     // Display
-    const backgroundColor = color('Color', '#ffff00', GROUP_IDS.DISPLAY);
+    const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
     const otherStyles = object(
       'Styles',
-      { border: '3px solid #ff00ff', padding: '10px' },
+      {
+        border: '2px dashed silver',
+        borderRadius: 10,
+        padding: '10px',
+      },
       GROUP_IDS.DISPLAY
     );
 
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index f76e0907a08..da8ce065f78 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -47,8 +47,13 @@ storiesOf('Addons|Notes', module)
   .add('withNotes rendering inline, github-flavored markdown', baseStory, {
     notes: { markdown: markdownString },
   })
-  .add('using decorator arguments, withNotes', withNotes('Notes into withNotes')(baseStory))
-  .add('using decorator arguments, withMarkdownNotes', withMarkdownNotes(markdownString)(baseStory))
   .add('with a markdown table', baseStory, {
     notes: { markdown: markdownTable },
   });
+
+storiesOf('Addons|Notes.deprecated', module)
+  .add('using decorator arguments, withNotes', withNotes('Notes into withNotes')(baseStory))
+  .add(
+    'using decorator arguments, withMarkdownNotes',
+    withMarkdownNotes(markdownString)(baseStory)
+  );
diff --git a/examples/official-storybook/stories/addon-viewport.stories.js b/examples/official-storybook/stories/addon-viewport.stories.js
index e8e1cc76670..b0242fabf8c 100644
--- a/examples/official-storybook/stories/addon-viewport.stories.js
+++ b/examples/official-storybook/stories/addon-viewport.stories.js
@@ -3,13 +3,12 @@ import { storiesOf } from '@storybook/react';
 
 import styled from 'react-emotion';
 
-import { baseFonts } from '@storybook/components';
 import { Viewport, withViewport } from '@storybook/addon-viewport';
 import EventEmitter from 'eventemitter3';
 
 import Logger from './Logger';
 
-const Panel = styled('div')({ baseFonts });
+const Panel = styled('div')();
 
 storiesOf('Addons|Viewport', module).add('default', () => (
   <Panel>I don't have problems being rendered using the default viewport.</Panel>
@@ -30,22 +29,7 @@ storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
       </Panel>
     ),
     { viewport: 'ipad' }
-  )
-  .add(
-    'Overridden via "withViewport" decorator (deprecated)',
-    withViewport('iphone6')(() => (
-      <Panel>
-        I respect my parents but I should be looking good on <b>iPhone 6</b>.
-      </Panel>
-    ))
-  )
-  .add('Overridden via "Viewport" component (deprecated)', () => (
-    <Viewport name="iphone6p">
-      <Panel>
-        I respect my parents but I should be looking good on <b>iPhone 6 Plus</b>.
-      </Panel>
-    </Viewport>
-  ));
+  );
 
 const emitter = new EventEmitter();
 
@@ -61,3 +45,21 @@ storiesOf('Addons|Viewport.withViewport', module)
     })
   )
   .add('onViewportChange', () => <Logger title="Select device/viewport" emitter={emitter} />);
+
+storiesOf('Addons|Viewport.deprecated', module)
+  .addDecorator(withViewport('kindleFire2'))
+  .add(
+    'Overridden via "withViewport" decorator',
+    withViewport('iphone6')(() => (
+      <Panel>
+        I respect my parents but I should be looking good on <b>iPhone 6</b>.
+      </Panel>
+    ))
+  )
+  .add('Overridden via "Viewport" component', () => (
+    <Viewport name="iphone6p">
+      <Panel>
+        I respect my parents but I should be looking good on <b>iPhone 6 Plus</b>.
+      </Panel>
+    </Viewport>
+  ));
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index 05ee533de46..51ac1220ae8 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polymer-cli",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -9,15 +9,15 @@
   },
   "dependencies": {
     "@polymer/polymer": "^2.6.0",
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addon-viewport": "4.0.0-alpha.10",
-    "@storybook/polymer": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addon-viewport": "4.0.0-alpha.14",
+    "@storybook/polymer": "4.0.0-alpha.14",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "global": "^4.3.2",
     "lit-html": "^0.10.0",
diff --git a/examples/react-native-typescript/src/App.tsx b/examples/react-native-typescript/src/App.tsx
index 4002a323bd3..bf2799e2bb1 100644
--- a/examples/react-native-typescript/src/App.tsx
+++ b/examples/react-native-typescript/src/App.tsx
@@ -5,40 +5,13 @@
  */
 
 import * as React from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 
 const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' +
-    'Cmd+D or shake for dev menu',
-  android: 'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
 });
 
-interface Props {};
-
-export default class App extends React.Component<Props> {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native (with Typescript)!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit App.js
-        </Text>
-        <Text style={styles.instructions}>
-          {instructions}
-        </Text>
-      </View>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -57,3 +30,17 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
+
+interface Props {}
+
+export default class App extends React.Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>Welcome to React Native (with Typescript)!</Text>
+        <Text style={styles.instructions}>To get started, edit App.js</Text>
+        <Text style={styles.instructions}>{instructions}</Text>
+      </View>
+    );
+  }
+}
diff --git a/examples/react-native-typescript/src/__tests__/App.tsx b/examples/react-native-typescript/src/__tests__/App.tsx
index d0b9ee3165c..fa45c702067 100644
--- a/examples/react-native-typescript/src/__tests__/App.tsx
+++ b/examples/react-native-typescript/src/__tests__/App.tsx
@@ -6,7 +6,5 @@ import App from '../App';
 import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
-  const tree = renderer.create(
-    <App />
-  );
+  renderer.create(<App />);
 });
diff --git a/examples/react-native-typescript/storybook/stories/Welcome/index.tsx b/examples/react-native-typescript/storybook/stories/Welcome/index.tsx
index f28d643bc33..250753e4c15 100644
--- a/examples/react-native-typescript/storybook/stories/Welcome/index.tsx
+++ b/examples/react-native-typescript/storybook/stories/Welcome/index.tsx
@@ -7,9 +7,9 @@ interface Props {
 }
 */
 
-type Props = {
-  showApp: () => void,
-};
+interface Props {
+  showApp: () => void;
+}
 
 export default class Welcome extends React.Component<Props> {
   styles = {
@@ -31,7 +31,9 @@ export default class Welcome extends React.Component<Props> {
 
   showApp(event) {
     event.preventDefault();
-    if (this.props.showApp) this.props.showApp();
+    if (this.props.showApp) {
+      this.props.showApp();
+    }
   }
 
   render() {
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index d7da40f296c..c32cb064b26 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-example",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -13,18 +13,18 @@
     "vuex": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-backgrounds": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addon-storysource": "4.0.0-alpha.10",
-    "@storybook/addon-viewport": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/vue": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addon-storysource": "4.0.0-alpha.14",
+    "@storybook/addon-viewport": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/vue": "4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
@@ -32,7 +32,7 @@
     "cross-env": "^5.1.6",
     "file-loader": "^1.1.11",
     "svg-url-loader": "^2.3.2",
-    "vue-loader": "^14.2.3",
+    "vue-loader": "^15.2.4",
     "webpack": "^4.10.2",
     "webpack-dev-server": "^3.1.4"
   }
diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js
index 5791e9ab0a0..9c5664d6605 100644
--- a/examples/vue-kitchen-sink/webpack.config.js
+++ b/examples/vue-kitchen-sink/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = {
   entry: './src/index.js',
@@ -8,6 +9,7 @@ module.exports = {
     publicPath: '/dist/',
     filename: 'build.js',
   },
+  plugins: [new VueLoaderPlugin()],
   module: {
     rules: [
       {
diff --git a/lerna.json b/lerna.json
index eee2a5dc452..1340310c54c 100644
--- a/lerna.json
+++ b/lerna.json
@@ -7,5 +7,5 @@
     }
   },
   "concurrency": 1,
-  "version": "4.0.0-alpha.10"
+  "version": "4.0.0-alpha.14"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 0502c4b4fcc..e02972bdbac 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -20,7 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "4.0.0-alpha.10",
+    "@storybook/channels": "4.0.0-alpha.14",
+    "@storybook/components": "4.0.0-alpha.14",
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"
   }
diff --git a/lib/addons/src/index.js b/lib/addons/src/index.js
index 960ace6fb01..dbb90befe71 100644
--- a/lib/addons/src/index.js
+++ b/lib/addons/src/index.js
@@ -1,5 +1,6 @@
 // Resolves to window in browser and to global in node
 import global from 'global';
+import { TabWrapper } from '@storybook/components';
 
 export mockChannel from './storybook-channel-mock';
 export { makeDecorator } from './make-decorator';
@@ -52,7 +53,16 @@ export class AddonStore {
   }
 
   addPanel(name, panel) {
-    this.panels[name] = panel;
+    // supporting legacy addons, which have not migrated to the active-prop
+    const original = panel.render;
+    if (original && original.toString() && !original.toString().match(/active/)) {
+      this.panels[name] = {
+        ...panel,
+        render: ({ active }) => TabWrapper({ active, render: original }),
+      };
+    } else {
+      this.panels[name] = panel;
+    }
   }
 
   register(name, loader) {
diff --git a/lib/addons/src/make-decorator.js b/lib/addons/src/make-decorator.js
index dc2669b3561..e7df28f726f 100644
--- a/lib/addons/src/make-decorator.js
+++ b/lib/addons/src/make-decorator.js
@@ -15,6 +15,7 @@ export const makeDecorator = ({
   parameterName,
   wrapper,
   skipIfNoParametersOrOptions = false,
+  allowDeprecatedUsage = false,
 }) => {
   const decorator = options => (getStory, context) => {
     const parameters = context.parameters && context.parameters[parameterName];
@@ -44,11 +45,17 @@ export const makeDecorator = ({
         return decorator(...args)(...innerArgs);
       }
 
-      // Used to wrap a story directly .add('story', decorator(options)(() => <Story />))
-      //   This is now deprecated:
-      return deprecate(
-        context => decorator(...args)(innerArgs[0], context),
-        `Passing stories directly into ${name}() is deprecated, instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`
+      if (allowDeprecatedUsage) {
+        // Used to wrap a story directly .add('story', decorator(options)(() => <Story />))
+        //   This is now deprecated:
+        return deprecate(
+          context => decorator(...args)(innerArgs[0], context),
+          `Passing stories directly into ${name}() is deprecated, instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`
+        );
+      }
+
+      throw new Error(
+        `Passing stories directly into ${name}() is not allowed, instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`
       );
     };
   };
diff --git a/lib/addons/src/make-decorator.test.js b/lib/addons/src/make-decorator.test.js
index e6e94ae7e74..9beb3a70651 100644
--- a/lib/addons/src/make-decorator.test.js
+++ b/lib/addons/src/make-decorator.test.js
@@ -103,10 +103,15 @@ describe('makeDecorator', () => {
     expect(story).toHaveBeenCalled();
   });
 
-  it('passes options added at story time, but with a deprecation warning', () => {
+  it('passes options added at story time, but with a deprecation warning, if allowed', () => {
     deprecatedFns = [];
     const wrapper = jest.fn();
-    const decorator = makeDecorator({ wrapper, name: 'test', parameterName: 'test' });
+    const decorator = makeDecorator({
+      wrapper,
+      name: 'test',
+      parameterName: 'test',
+      allowDeprecatedUsage: true,
+    });
     const options = 'test-val';
     const story = jest.fn();
     const decoratedStory = decorator(options)(story);
@@ -121,4 +126,17 @@ describe('makeDecorator', () => {
     });
     expect(deprecatedFns[0].deprecatedFn).toHaveBeenCalled();
   });
+
+  it('throws if options are added at storytime, if not allowed', () => {
+    const wrapper = jest.fn();
+    const decorator = makeDecorator({
+      wrapper,
+      name: 'test',
+      parameterName: 'test',
+      allowDeprecatedUsage: false,
+    });
+    const options = 'test-val';
+    const story = jest.fn();
+    expect(() => decorator(options)(story)).toThrow(/not allowed/);
+  });
 });
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index 4b04e9e140c..42b480f909d 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "4.0.0-alpha.10",
+    "@storybook/channels": "4.0.0-alpha.14",
     "global": "^4.3.2",
     "json-stringify-safe": "^5.0.1"
   }
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index 8f4a2a0af00..66070c09c27 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "4.0.0-alpha.10",
+    "@storybook/channels": "4.0.0-alpha.14",
     "global": "^4.3.2"
   }
 }
diff --git a/lib/channels/package.json b/lib/channels/package.json
index c0981f2794c..e4939633ada 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/lib/cli/package.json b/lib/cli/package.json
index f9de4f743bb..cd64b6da72d 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -25,7 +25,7 @@
     "test-latest-cra": "cd test && ./test_latest_cra.sh"
   },
   "dependencies": {
-    "@storybook/codemod": "4.0.0-alpha.10",
+    "@storybook/codemod": "4.0.0-alpha.14",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-register": "^6.26.0",
@@ -42,28 +42,28 @@
     "update-notifier": "^2.5.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-centered": "4.0.0-alpha.10",
-    "@storybook/addon-graphql": "4.0.0-alpha.10",
-    "@storybook/addon-info": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/addon-links": "4.0.0-alpha.10",
-    "@storybook/addon-notes": "4.0.0-alpha.10",
-    "@storybook/addon-options": "4.0.0-alpha.10",
-    "@storybook/addon-storyshots": "4.0.0-alpha.10",
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/angular": "4.0.0-alpha.10",
-    "@storybook/channel-postmessage": "4.0.0-alpha.10",
-    "@storybook/channel-websocket": "4.0.0-alpha.10",
-    "@storybook/channels": "4.0.0-alpha.10",
-    "@storybook/html": "4.0.0-alpha.10",
-    "@storybook/marko": "4.0.0-alpha.10",
-    "@storybook/mithril": "4.0.0-alpha.10",
-    "@storybook/polymer": "4.0.0-alpha.10",
-    "@storybook/react": "4.0.0-alpha.10",
-    "@storybook/react-native": "4.0.0-alpha.10",
-    "@storybook/ui": "4.0.0-alpha.10",
-    "@storybook/vue": "4.0.0-alpha.10",
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-centered": "4.0.0-alpha.14",
+    "@storybook/addon-graphql": "4.0.0-alpha.14",
+    "@storybook/addon-info": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/addon-links": "4.0.0-alpha.14",
+    "@storybook/addon-notes": "4.0.0-alpha.14",
+    "@storybook/addon-options": "4.0.0-alpha.14",
+    "@storybook/addon-storyshots": "4.0.0-alpha.14",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/angular": "4.0.0-alpha.14",
+    "@storybook/channel-postmessage": "4.0.0-alpha.14",
+    "@storybook/channel-websocket": "4.0.0-alpha.14",
+    "@storybook/channels": "4.0.0-alpha.14",
+    "@storybook/html": "4.0.0-alpha.14",
+    "@storybook/marko": "4.0.0-alpha.14",
+    "@storybook/mithril": "4.0.0-alpha.14",
+    "@storybook/polymer": "4.0.0-alpha.14",
+    "@storybook/react": "4.0.0-alpha.14",
+    "@storybook/react-native": "4.0.0-alpha.14",
+    "@storybook/ui": "4.0.0-alpha.14",
+    "@storybook/vue": "4.0.0-alpha.14",
     "check-node-version": "3.2.0",
     "npx": "10.2.0"
   }
diff --git a/lib/cli/test/snapshots/angular-cli/package.json b/lib/cli/test/snapshots/angular-cli/package.json
index f8539f8ba54..5fd4870a80e 100644
--- a/lib/cli/test/snapshots/angular-cli/package.json
+++ b/lib/cli/test/snapshots/angular-cli/package.json
@@ -44,10 +44,10 @@
     "ts-node": "1.2.1",
     "tslint": "^4.3.0",
     "typescript": "~2.4.0",
-    "@storybook/angular": "^4.0.0-alpha.10",
-    "@storybook/addon-notes": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10"
+    "@storybook/angular": "^4.0.0-alpha.14",
+    "@storybook/addon-notes": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14"
   }
 }
diff --git a/lib/cli/test/snapshots/marko/package.json b/lib/cli/test/snapshots/marko/package.json
index 6d68e18203b..d0aba49796b 100644
--- a/lib/cli/test/snapshots/marko/package.json
+++ b/lib/cli/test/snapshots/marko/package.json
@@ -7,9 +7,9 @@
     "marko": "^4.9.7"
   },
   "devDependencies": {
-    "@storybook/marko": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-knobs": "^4.0.0-alpha.10",
+    "@storybook/marko": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-knobs": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0"
   },
diff --git a/lib/cli/test/snapshots/meteor/package.json b/lib/cli/test/snapshots/meteor/package.json
index a8a48ef0cd0..608ee47adcc 100644
--- a/lib/cli/test/snapshots/meteor/package.json
+++ b/lib/cli/test/snapshots/meteor/package.json
@@ -19,9 +19,9 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "babel-root-slash-import": "^1.1.0",
-    "@storybook/react": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10"
+    "@storybook/react": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14"
   }
 }
diff --git a/lib/cli/test/snapshots/mithril/package.json b/lib/cli/test/snapshots/mithril/package.json
index 2794aba3ba1..682ca1748a9 100644
--- a/lib/cli/test/snapshots/mithril/package.json
+++ b/lib/cli/test/snapshots/mithril/package.json
@@ -12,10 +12,10 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
-    "@storybook/mithril": "^4.0.0-alpha.10",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
+    "@storybook/mithril": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-plugin-transform-react-jsx": "^6.24.1"
   }
diff --git a/lib/cli/test/snapshots/polymer/package.json b/lib/cli/test/snapshots/polymer/package.json
index 98357dbba31..9b344c41c70 100644
--- a/lib/cli/test/snapshots/polymer/package.json
+++ b/lib/cli/test/snapshots/polymer/package.json
@@ -12,7 +12,7 @@
     "@polymer/polymer": "^2.2.0"
   },
   "devDependencies": {
-    "@storybook/polymer": "^4.0.0-alpha.10",
+    "@storybook/polymer": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "polymer-webpack-loader": "^2.0.2"
diff --git a/lib/cli/test/snapshots/react/package.json b/lib/cli/test/snapshots/react/package.json
index ab5b6a60822..35987eeac18 100644
--- a/lib/cli/test/snapshots/react/package.json
+++ b/lib/cli/test/snapshots/react/package.json
@@ -20,10 +20,10 @@
     "rollup-plugin-commonjs": "^8.2.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
-    "@storybook/react": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0"
   }
diff --git a/lib/cli/test/snapshots/react_native/package.json b/lib/cli/test/snapshots/react_native/package.json
index bbb80023066..71b53f6a222 100644
--- a/lib/cli/test/snapshots/react_native/package.json
+++ b/lib/cli/test/snapshots/react_native/package.json
@@ -16,10 +16,10 @@
     "babel-preset-react-native": "3.0.1",
     "jest": "20.0.4",
     "react-test-renderer": "16.0.0-alpha.12",
-    "@storybook/react-native": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react-native": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "react-dom": "16.0.0-alpha.12",
diff --git a/lib/cli/test/snapshots/react_native_scripts/package.json b/lib/cli/test/snapshots/react_native_scripts/package.json
index 913ae901ad0..59c5a8d69ec 100644
--- a/lib/cli/test/snapshots/react_native_scripts/package.json
+++ b/lib/cli/test/snapshots/react_native_scripts/package.json
@@ -6,10 +6,10 @@
     "react-native-scripts": "1.3.1",
     "jest-expo": "~20.0.0",
     "react-test-renderer": "16.0.0-alpha.12",
-    "@storybook/react-native": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react-native": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "react-dom": "16.0.0-alpha.12",
diff --git a/lib/cli/test/snapshots/react_project/package.json b/lib/cli/test/snapshots/react_project/package.json
index 87247516858..87c69cbb15f 100644
--- a/lib/cli/test/snapshots/react_project/package.json
+++ b/lib/cli/test/snapshots/react_project/package.json
@@ -13,10 +13,10 @@
     "babel-preset-react": "^6.24.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "@storybook/react": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0"
   },
diff --git a/lib/cli/test/snapshots/react_scripts/package.json b/lib/cli/test/snapshots/react_scripts/package.json
index 2de4804c232..eeca2e6b1af 100644
--- a/lib/cli/test/snapshots/react_scripts/package.json
+++ b/lib/cli/test/snapshots/react_scripts/package.json
@@ -16,10 +16,10 @@
     "build-storybook": "build-storybook -s public"
   },
   "devDependencies": {
-    "@storybook/react": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0"
   }
diff --git a/lib/cli/test/snapshots/sfc_vue/package.json b/lib/cli/test/snapshots/sfc_vue/package.json
index b40673f0f40..de992379579 100644
--- a/lib/cli/test/snapshots/sfc_vue/package.json
+++ b/lib/cli/test/snapshots/sfc_vue/package.json
@@ -49,10 +49,10 @@
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0",
-    "@storybook/vue": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/vue": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-preset-vue": "^2.0.2"
   },
   "engines": {
diff --git a/lib/cli/test/snapshots/update_package_organisations/package.json b/lib/cli/test/snapshots/update_package_organisations/package.json
index 1627ba73d03..d6fb69e56ea 100644
--- a/lib/cli/test/snapshots/update_package_organisations/package.json
+++ b/lib/cli/test/snapshots/update_package_organisations/package.json
@@ -8,8 +8,8 @@
     "react-scripts": "0.9.x"
   },
   "devDependencies": {
-    "@storybook/react": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0"
   },
diff --git a/lib/cli/test/snapshots/vue/package.json b/lib/cli/test/snapshots/vue/package.json
index cfc63e2a833..61e00bd788d 100644
--- a/lib/cli/test/snapshots/vue/package.json
+++ b/lib/cli/test/snapshots/vue/package.json
@@ -34,10 +34,10 @@
     "rollup-plugin-serve": "^0.4.0",
     "rollup-plugin-vue": "^2.4.0",
     "rollup-watch": "^4.0.0",
-    "@storybook/vue": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/vue": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-preset-vue": "^2.0.2"
   }
 }
diff --git a/lib/cli/test/snapshots/webpack_react/package.json b/lib/cli/test/snapshots/webpack_react/package.json
index 197d684fea1..44cb859acdf 100644
--- a/lib/cli/test/snapshots/webpack_react/package.json
+++ b/lib/cli/test/snapshots/webpack_react/package.json
@@ -17,10 +17,10 @@
     "babel-loader": "^7.1.2",
     "babel-preset-react": "^6.24.1",
     "webpack": "^3.5.5",
-    "@storybook/react": "^4.0.0-alpha.10",
-    "@storybook/addon-actions": "^4.0.0-alpha.10",
-    "@storybook/addon-links": "^4.0.0-alpha.10",
-    "@storybook/addons": "^4.0.0-alpha.10",
+    "@storybook/react": "^4.0.0-alpha.14",
+    "@storybook/addon-actions": "^4.0.0-alpha.14",
+    "@storybook/addon-links": "^4.0.0-alpha.14",
+    "@storybook/addons": "^4.0.0-alpha.14",
     "babel-runtime": "^6.26.0"
   }
 }
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 3ed1007b198..153583ced57 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 835f6bdcb91..5277a8ace90 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "repository": {
     "type": "git",
diff --git a/lib/components/package.json b/lib/components/package.json
index a9f075f78a5..a2744b029ee 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Core Storybook Components",
   "repository": {
     "type": "git",
@@ -22,12 +22,15 @@
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.6.1",
     "react-emotion": "^9.1.3",
-    "react-split-pane": "^0.1.77"
+    "react-inspector": "^2.3.0",
+    "react-split-pane": "^0.1.77",
+    "react-textarea-autosize": "^6.1.0",
+    "render-fragment": "^0.1.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/addon-knobs": "4.0.0-alpha.10",
-    "@storybook/react": "4.0.0-alpha.10"
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/addon-knobs": "4.0.0-alpha.14",
+    "@storybook/react": "4.0.0-alpha.14"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/lib/components/src/addon_panel/__snapshots__/index.stories.storyshot b/lib/components/src/addon_panel/__snapshots__/index.stories.storyshot
index 58a348c1336..e9f34f16a1c 100644
--- a/lib/components/src/addon_panel/__snapshots__/index.stories.storyshot
+++ b/lib/components/src/addon_panel/__snapshots__/index.stories.storyshot
@@ -5,51 +5,34 @@ exports[`Storyshots Components|AddonPanel default 1`] = `
   style="height:calc(100vh - 20px)"
 >
   <div
-    class="css-yslj3j"
+    class="css-d7g4da"
   >
     <div
-      class="css-6km6mc"
+      class="css-1whcqvw"
       role="tablist"
     >
-      <div
-        class="css-4nm8j5"
+      <button
+        class="css-xcko46"
         role="tab"
         type="button"
       >
         Test 1
-      </div>
-      <div
-        class="css-bf047d"
+      </button>
+      <button
+        class="css-1hf831j"
         role="tab"
-        selected=""
         type="button"
       >
         Test 2
-      </div>
+      </button>
     </div>
     <div
-      class="css-1k5wv3o"
+      class="css-18lpvrh"
     >
       <div
-        class="css-1hyfx7x"
-        hidden=""
-        role="tabpanel"
+        id="test2"
       >
-        <div
-          id="test1"
-        >
-          TEST 1
-        </div>
-      </div>
-      <div
-        class="css-13pmxen"
-        role="tabpanel"
-      >
-        <div
-          id="test2"
-        >
-          TEST 2
-        </div>
+        TEST 2
       </div>
     </div>
   </div>
diff --git a/lib/components/src/addon_panel/index.js b/lib/components/src/addon_panel/index.js
index c5ec62175e6..9145bd9f9e0 100644
--- a/lib/components/src/addon_panel/index.js
+++ b/lib/components/src/addon_panel/index.js
@@ -1,133 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
 
-import { baseFonts, Placeholder } from '../';
+import { Tabs } from '../';
 
-const Wrapper = styled('div')(({ theme }) => ({
-  flex: '1 1 auto',
-  display: 'flex',
-  flexDirection: 'column',
-  background: theme.mainFill,
-  borderRadius: 4,
-  border: theme.mainBorder,
-  overflow: 'hidden',
-  width: '100%',
-  height: '100%',
-  boxSizing: 'border-box',
-}));
-
-export const TabBar = styled('div')({
-  display: 'flex',
-  flexWrap: 'wrap',
-  flexDirection: 'row',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  borderBottom: 'solid 1px #eaeaea',
-});
-
-const Content = styled('div')({
-  flex: '1 1 0',
-  display: 'flex',
-  overflow: 'auto',
-  height: '100%',
-  width: '100%',
-});
-
-const TabButton = styled('div')(
-  baseFonts,
-  {
-    fontSize: 11,
-    letterSpacing: '1px',
-    padding: '10px 15px',
-    textTransform: 'uppercase',
-    transition: 'opacity 0.3s',
-    maxHeight: 60,
-    overflow: 'hidden',
-    cursor: 'pointer',
-    background: 'transparent',
-    border: 'none',
-  },
-  ({ selected }) =>
-    selected
-      ? {
-          opacity: 1,
-        }
-      : {
-          opacity: 0.5,
-        }
+const AddonPanel = ({ panels, onPanelSelect, selectedPanel, ...rest }) => (
+  <Tabs {...rest} absolute bordered selected={selectedPanel} onSelect={onPanelSelect}>
+    {Object.entries(panels).map(([k, v]) => (
+      <div key={k} id={k} title={v.title}>
+        {v.render}
+      </div>
+    ))}
+  </Tabs>
 );
-
-const Panel = styled('div')(
-  ({ hidden }) => (hidden ? { display: 'none' } : { display: 'flex', flex: 1 })
-);
-
-export const Tab = ({ selected, name, title, onSelect }) => {
-  const onClick = e => {
-    e.preventDefault();
-    onSelect(name);
-  };
-
-  return (
-    <TabButton type="button" key={name} selected={selected} onClick={onClick} role="tab">
-      {typeof title === 'function' ? title() : title}
-    </TabButton>
-  );
+AddonPanel.propTypes = {
+  selectedPanel: PropTypes.string,
+  onPanelSelect: PropTypes.func.isRequired,
+  panels: PropTypes.objectOf(
+    PropTypes.shape({
+      title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      render: PropTypes.func,
+    })
+  ).isRequired,
 };
-
-Tab.propTypes = {
-  selected: PropTypes.bool.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-const AddonPanel = ({ panels, selectedPanel, onPanelSelect }) => {
-  const hasPanels = panels && Object.keys(panels).length;
-
-  return hasPanels ? (
-    <Wrapper>
-      <TabBar role="tablist">
-        {Object.entries(panels).map(([name, data]) => (
-          <Tab
-            key={name}
-            selected={name === selectedPanel}
-            name={name}
-            title={data.title}
-            onSelect={onPanelSelect}
-          />
-        ))}
-      </TabBar>
-      <Content>
-        {Object.keys(panels)
-          .sort()
-          .map(name => {
-            const panel = panels[name];
-
-            return (
-              <Panel key={name} hidden={name !== selectedPanel} role="tabpanel">
-                {panel.render()}
-              </Panel>
-            );
-          })}
-      </Content>
-    </Wrapper>
-  ) : (
-    <Placeholder>no panels available</Placeholder>
-  );
-};
-
 AddonPanel.defaultProps = {
-  panels: {},
-  onPanelSelect: () => {},
   selectedPanel: null,
 };
 
-AddonPanel.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  panels: PropTypes.object,
-  onPanelSelect: PropTypes.func,
-  selectedPanel: PropTypes.string,
-};
-
 export default AddonPanel;
diff --git a/lib/components/src/addon_panel/index.stories.js b/lib/components/src/addon_panel/index.stories.js
index 7a3dbfb0f62..43200a0277c 100644
--- a/lib/components/src/addon_panel/index.stories.js
+++ b/lib/components/src/addon_panel/index.stories.js
@@ -7,15 +7,23 @@ import AddonPanel from './index';
 const panels = {
   test1: {
     title: 'Test 1',
-    render() {
-      return <div id="test1">TEST 1</div>;
-    },
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) =>
+      active ? (
+        <div id="test1" key={key}>
+          TEST 1
+        </div>
+      ) : null,
   },
   test2: {
     title: 'Test 2',
-    render() {
-      return <div id="test2">TEST 2</div>;
-    },
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) =>
+      active ? (
+        <div id="test2" key={key}>
+          TEST 2
+        </div>
+      ) : null,
   },
 };
 
diff --git a/lib/components/src/addon_panel/index.test.js b/lib/components/src/addon_panel/index.test.js
index 125384ecdcf..d0b7561b691 100644
--- a/lib/components/src/addon_panel/index.test.js
+++ b/lib/components/src/addon_panel/index.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import AddonPanel from './index';
 
 describe('manager.ui.components.addon_panel.index', () => {
@@ -7,34 +7,44 @@ describe('manager.ui.components.addon_panel.index', () => {
     const panels = {
       test1: {
         title: 'TEST 1',
-        render() {
-          return <div id="test1">TEST 1</div>;
-        },
+        // eslint-disable-next-line react/prop-types
+        render: ({ active, key }) =>
+          active ? (
+            <div id="test1" key={key}>
+              TEST 1
+            </div>
+          ) : null,
       },
       test2: {
         title: 'TEST 2',
-        render() {
-          return <div id="test2">TEST 2</div>;
-        },
+        // eslint-disable-next-line react/prop-types
+        render: ({ active, key }) =>
+          active ? (
+            <div id="test2" key={key}>
+              TEST 2
+            </div>
+          ) : null,
       },
     };
 
-    const onPanelSelect = () => 'onPanelSelect';
+    const onPanelSelect = jest.fn();
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <AddonPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel="test2" />
     );
 
-    expect(wrapper.find('#test1').parent()).toHaveProp('hidden', true);
-    expect(wrapper.find('#test2').parent()).not.toHaveProp('hidden', true);
+    expect(wrapper.find('#test2')).toExist();
+    expect(wrapper.find('Tab').at(0)).toHaveProp('active', false);
+    expect(wrapper.find('Tab').at(1)).toHaveProp('active', true);
   });
 
   test('should set onPanelSelected as onClick handlers of tabs', () => {
     const panels = {
       test1: {
         title: 'TEST 1',
-        render() {
-          return <div>TEST 1</div>;
+        // eslint-disable-next-line react/prop-types
+        render({ key }) {
+          return <div key={key}>TEST 1</div>;
         },
       },
     };
@@ -45,6 +55,7 @@ describe('manager.ui.components.addon_panel.index', () => {
     );
 
     wrapper
+      .dive()
       .find('Tab')
       .dive()
       .simulate('click', { preventDefault });
@@ -57,7 +68,7 @@ describe('manager.ui.components.addon_panel.index', () => {
     test('should render "no panels available"', () => {
       const panels = {};
       const onPanelSelect = () => 'onPanelSelect';
-      const wrapper = shallow(<AddonPanel panels={panels} onPanelSelect={onPanelSelect} />);
+      const wrapper = shallow(<AddonPanel panels={panels} onPanelSelect={onPanelSelect} />).dive();
 
       expect(wrapper.contains('no panels available')).toBe(true);
     });
diff --git a/lib/components/src/form/__snapshots__/button.stories.storyshot b/lib/components/src/form/__snapshots__/button.stories.storyshot
index 82eaa081b75..7d9432bda01 100644
--- a/lib/components/src/form/__snapshots__/button.stories.storyshot
+++ b/lib/components/src/form/__snapshots__/button.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components|Form/Button with onclick 1`] = `
 <button
-  class="css-191qq9b"
+  class="css-lopq8z"
 >
   Submit
 </button>
diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot
new file mode 100644
index 00000000000..a40a3422bd6
--- /dev/null
+++ b/lib/components/src/form/__snapshots__/form.stories.storyshot
@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components|Form/Button alignment 1`] = `
+Array [
+  <button
+    class="css-1vmbacw"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-vb63mh"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-k5xbe4"
+  >
+    click this button
+  </button>,
+]
+`;
+
+exports[`Storyshots Components|Form/Button sizes 1`] = `
+Array [
+  <button
+    class="css-1riodoz"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-17iy6hf"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-k5xbe4"
+  >
+    click this button
+  </button>,
+]
+`;
+
+exports[`Storyshots Components|Form/Button validations 1`] = `
+Array [
+  <button
+    class="css-1n7kxml"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-1dbq55u"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-1yfwphr"
+  >
+    click this button
+  </button>,
+  <button
+    class="css-k5xbe4"
+  >
+    click this button
+  </button>,
+]
+`;
+
+exports[`Storyshots Components|Form/Button with knobs 1`] = `
+<button
+  class="css-1riodoz"
+>
+  💌  love letter to storybook team
+</button>
+`;
+
+exports[`Storyshots Components|Form/Select sizes 1`] = `
+Array [
+  <select
+    class="css-1rk2lkr"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+  <select
+    class="css-p3s1kf"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+  <select
+    class="css-13k1zov"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+]
+`;
+
+exports[`Storyshots Components|Form/Select validations 1`] = `
+Array [
+  <select
+    class="css-1pvc7qr"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+  <select
+    class="css-kdddv2"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+  <select
+    class="css-1hyanqr"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+  <select
+    class="css-13k1zov"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>,
+]
+`;
+
+exports[`Storyshots Components|Form/Textarea alignment 1`] = `
+Array [
+  <textarea
+    align="end"
+    class="css-ikfdgv"
+    style="height:0"
+  >
+    text
+  </textarea>,
+  <textarea
+    align="center"
+    class="css-7knv9k"
+    style="height:0"
+  >
+    text
+  </textarea>,
+  <textarea
+    align="start"
+    class="css-33eu3a"
+    style="height:0"
+  >
+    text
+  </textarea>,
+]
+`;
+
+exports[`Storyshots Components|Form/Textarea sizes 1`] = `
+Array [
+  <textarea
+    class="css-1qzrepe"
+    style="height:0"
+  >
+    text
+  </textarea>,
+  <textarea
+    class="css-1lgydmp"
+    style="height:0"
+  >
+    text
+  </textarea>,
+  <textarea
+    class="css-33eu3a"
+    style="height:0"
+  >
+    text
+  </textarea>,
+]
+`;
+
+exports[`Storyshots Components|Form/Textarea validations 1`] = `
+Array [
+  <textarea
+    class="css-sfd7lm"
+    style="height:0"
+    valid="error"
+  >
+    text
+  </textarea>,
+  <textarea
+    class="css-j4g7hp"
+    style="height:0"
+    valid="warn"
+  >
+    text
+  </textarea>,
+  <textarea
+    class="css-1rb826s"
+    style="height:0"
+    valid="valid"
+  >
+    text
+  </textarea>,
+  <textarea
+    class="css-33eu3a"
+    style="height:0"
+  >
+    text
+  </textarea>,
+]
+`;
+
+exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = `
+<textarea
+  class="css-33eu3a"
+  style="height:0"
+>
+  OMG, multiple lines!
+
+That is amazing
+</textarea>
+`;
diff --git a/lib/components/src/form/button.js b/lib/components/src/form/button.js
deleted file mode 100644
index 41812381b2c..00000000000
--- a/lib/components/src/form/button.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from 'react-emotion';
-import { baseFonts } from '../theme';
-
-export default styled('button')({
-  ...baseFonts,
-  border: 'none',
-  boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
-  backgroundColor: 'rgb(255, 255, 255)',
-  padding: '4px 10px 7px',
-  borderRadius: 4,
-  cursor: 'pointer',
-  transition: 'box-shadow 0.15s ease-out',
-  ':hover': {
-    transition: 'background-color 0.15s ease-out',
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
-  },
-  ':focus': {
-    transition: 'background-color 0.15s ease-out',
-    outline: 'none',
-    boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
-  },
-  ':active': {
-    transition: 'none',
-    backgroundColor: 'rgb(247, 247, 247)',
-  },
-});
diff --git a/lib/components/src/form/button.stories.js b/lib/components/src/form/button.stories.js
deleted file mode 100644
index caba82eab12..00000000000
--- a/lib/components/src/form/button.stories.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text } from '@storybook/addon-knobs';
-
-import Button from './button';
-
-storiesOf('Components|Form/Button', module)
-  .addDecorator(withKnobs)
-  .add('with onclick', () => <Button onClick={action('click')}>{text('Text', 'Submit')}</Button>);
diff --git a/lib/components/src/form/field.js b/lib/components/src/form/field.js
new file mode 100644
index 00000000000..c7730ff9a67
--- /dev/null
+++ b/lib/components/src/form/field.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+
+const Wrapper = styled('label')(({ theme }) => ({
+  width: '100%',
+  boxSizing: 'border-box',
+  display: 'flex',
+  margin: '8px 0',
+  borderBottom: theme.mainBorder,
+  padding: '0 8px 8px 8px',
+
+  '&:last-child': {
+    borderBottom: '0 none',
+    paddingBottom: 0,
+  },
+}));
+
+const Label = styled('span')({
+  minWidth: 100,
+  minHeight: 32,
+  marginRight: 16,
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  lineHeight: '16px',
+});
+
+const Field = ({ label, children }) => (
+  <Wrapper>
+    {label ? (
+      <Label>
+        <span>{label}</span>
+      </Label>
+    ) : null}
+    {children}
+  </Wrapper>
+);
+Field.propTypes = {
+  label: PropTypes.node,
+  children: PropTypes.node.isRequired,
+};
+Field.defaultProps = {
+  label: undefined,
+};
+
+export default Field;
diff --git a/lib/components/src/form/form.stories.js b/lib/components/src/form/form.stories.js
new file mode 100644
index 00000000000..5c2e1bc9efb
--- /dev/null
+++ b/lib/components/src/form/form.stories.js
@@ -0,0 +1,93 @@
+import React, { Fragment } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+import { Button, Select, Textarea } from './input';
+
+storiesOf('Components|Form/Select', module)
+  .addDecorator(withKnobs)
+  .add('sizes', () => (
+    <Fragment>
+      {['auto', 'flex', '100%'].map(size => (
+        <Select key={size} value="val2" onChange={action('onChange')} size={size}>
+          <option value="val1">Value 1</option>
+          <option value="val2">Value 2</option>
+          <option value="val3">Value 3</option>
+        </Select>
+      ))}
+    </Fragment>
+  ))
+  .add('validations', () => (
+    <Fragment>
+      {['error', 'warn', 'valid', null].map(valid => (
+        <Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
+          <option value="val1">Value 1</option>
+          <option value="val2">Value 2</option>
+          <option value="val3">Value 3</option>
+        </Select>
+      ))}
+    </Fragment>
+  ));
+storiesOf('Components|Form/Button', module)
+  .addDecorator(withKnobs)
+  .add('with knobs', () => (
+    <Button onClick={action('send loveletter')}>
+      {`💌  love letter to `}
+      {text('Name', 'storybook team')}
+    </Button>
+  ))
+  .add('sizes', () => (
+    <Fragment>
+      {['auto', 'flex', '100%'].map(size => (
+        <Button key={size} size={size}>
+          click this button
+        </Button>
+      ))}
+    </Fragment>
+  ))
+  .add('validations', () => (
+    <Fragment>
+      {['error', 'warn', 'valid', null].map(valid => (
+        <Button key={valid} size="100%" valid={valid}>
+          click this button
+        </Button>
+      ))}
+    </Fragment>
+  ))
+  .add('alignment', () => (
+    <Fragment>
+      {['end', 'center', 'start'].map(align => (
+        <Button key={align} size="100%" align={align}>
+          click this button
+        </Button>
+      ))}
+    </Fragment>
+  ));
+
+storiesOf('Components|Form/Textarea', module)
+  .addDecorator(withKnobs)
+  .add('with knobs (controlled)', () => (
+    <Textarea value={text('Name', `OMG, multiple lines!\n\nThat is amazing`)} size="100%" />
+  ))
+  .add('sizes', () => (
+    <Fragment>
+      {['auto', 'flex', '100%'].map(size => (
+        <Textarea key={size} defaultValue="text" size={size} />
+      ))}
+    </Fragment>
+  ))
+  .add('validations', () => (
+    <Fragment>
+      {['error', 'warn', 'valid', null].map(valid => (
+        <Textarea key={valid} defaultValue="text" size="100%" valid={valid} />
+      ))}
+    </Fragment>
+  ))
+  .add('alignment', () => (
+    <Fragment>
+      {['end', 'center', 'start'].map(align => (
+        <Textarea key={align} defaultValue="text" size="100%" align={align} />
+      ))}
+    </Fragment>
+  ));
diff --git a/lib/components/src/form/input.js b/lib/components/src/form/input.js
new file mode 100644
index 00000000000..349f5ed4272
--- /dev/null
+++ b/lib/components/src/form/input.js
@@ -0,0 +1,95 @@
+import styled from 'react-emotion';
+
+import TextareaAutoResize from 'react-textarea-autosize';
+
+const styles = ({ theme }) => ({
+  padding: '0 10px',
+  color: theme.mainTextColor,
+  background: theme.inputFill,
+  borderRadius: theme.mainBorderRadius,
+
+  transition: 'border-bottom-color .3s linear',
+  border: '0 solid transparent',
+  borderTop: '3px solid transparent',
+  borderBottom: '3px solid transparent',
+  boxSizing: 'border-box',
+  position: 'relative',
+
+  '&:focus': {
+    outline: '0 none',
+    borderBottomColor: theme.highlightColor,
+  },
+});
+const sizes = ({ size }) => {
+  switch (size) {
+    case '100%': {
+      return { width: '100%' };
+    }
+    case 'flex': {
+      return { flex: 1 };
+    }
+    case 'auto':
+    default: {
+      return { display: 'inline' };
+    }
+  }
+};
+const alignment = ({ align }) => {
+  switch (align) {
+    case 'end': {
+      return { textAlign: 'right' };
+    }
+    case 'center': {
+      return { textAlign: 'center' };
+    }
+    case 'start':
+    default: {
+      return { textAlign: 'left' };
+    }
+  }
+};
+const validation = ({ valid, theme }) => {
+  switch (valid) {
+    case 'valid': {
+      return { borderBottomColor: theme.successColor };
+    }
+    case 'error': {
+      return { borderBottomColor: theme.failColor };
+    }
+    case 'warn': {
+      return { borderBottomColor: theme.warnColor };
+    }
+    case undefined:
+    case null:
+    default: {
+      return {};
+    }
+  }
+};
+
+export const Input = styled('input')(styles, sizes, alignment, validation, { minHeight: 32 });
+Input.styles = styles;
+Input.sizes = sizes;
+Input.alignment = alignment;
+Input.displayName = 'Input';
+export const Select = styled('select')(styles, sizes, alignment, validation, {
+  height: 32,
+  userSelect: 'none',
+  paddingRight: 20,
+});
+Select.displayName = 'Select';
+export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, validation, {
+  minHeight: 32,
+  paddingTop: 5,
+  paddingBottom: 5,
+  overflow: 'visible',
+});
+Textarea.displayName = 'Textarea';
+
+export const Button = styled('button')(styles, sizes, alignment, validation, {
+  cursor: 'pointer',
+  userSelect: 'none',
+  minHeight: 32,
+  boxSizing: 'border-box',
+});
+Button.displayName = 'Button';
diff --git a/lib/components/src/header/__snapshots__/header.stories.storyshot b/lib/components/src/header/__snapshots__/header.stories.storyshot
index 451915f9d76..550ae093cc2 100644
--- a/lib/components/src/header/__snapshots__/header.stories.storyshot
+++ b/lib/components/src/header/__snapshots__/header.stories.storyshot
@@ -1,49 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Components|Header mobile-view 1`] = `
-<div
-  class="css-1ct5egv"
->
-  <button
-    class="css-r41s90"
-  >
-    ☰
-  </button>
-  <a
-    class="css-5m3y99"
-    href="http://google.com"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <h3
-      class="css-1852r2"
-    >
-      name
-    </h3>
-  </a>
-  <button
-    class="css-1sibdyl"
-  >
-    ⌘
-  </button>
-</div>
-`;
-
 exports[`Storyshots Components|Header simple 1`] = `
 <div
   class="css-5xz1i6"
 >
   <a
-    class="css-108o064"
-    href="http://google.com"
+    class="css-ypfoxr"
+    href="http://example.com"
     rel="noopener noreferrer"
     target="_blank"
   >
-    <h3
-      class="css-1852r2"
-    >
-      name
-    </h3>
+    name
   </a>
   <button
     class="css-i6e0jg"
diff --git a/lib/components/src/header/header.js b/lib/components/src/header/header.js
index 70c02bed4ef..2448a97846d 100755
--- a/lib/components/src/header/header.js
+++ b/lib/components/src/header/header.js
@@ -2,22 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 
-const Wrapper = styled('div')(({ isMobileDevice }) => ({
-  margin: isMobileDevice ? '10px 0' : '0 0 10px',
+const Wrapper = styled('div')(({ theme }) => ({
+  margin: '0 0 10px',
   display: 'flex',
+  ...theme.brand,
 }));
 
-const HeadingLink = styled('a')(({ isMobileDevice }) => ({
+const HeadingLink = styled('a')({
   textDecoration: 'none',
   flexGrow: 1,
   display: 'flex',
   alignItems: 'center',
-  color: 'currentColor',
   justifyContent: 'center',
-  border: isMobileDevice ? 'none' : '1px solid rgba(0, 0, 0, 0.1)',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
   borderRadius: 2,
-}));
-const Heading = styled('h3')({
   textTransform: 'uppercase',
   letterSpacing: '1.5px',
   fontSize: '12px',
@@ -30,7 +28,7 @@ const Heading = styled('h3')({
   overflow: 'hidden',
 });
 
-const iconStyle = ({ isMobileDevice }) => ({
+const ShortHelpButton = styled('button')({
   textTransform: 'uppercase',
   fontSize: 12,
   fontWeight: 'bolder',
@@ -41,47 +39,24 @@ const iconStyle = ({ isMobileDevice }) => ({
   cursor: 'pointer',
   display: 'inlineBlock',
   padding: 0,
-  margin: isMobileDevice ? '0 15px' : '0 0 0 5px',
+  margin: '0 0 0 5px',
   backgroundColor: 'inherit',
   outline: 0,
   width: 30,
   flexShrink: 0,
 });
 
-const BurgerButton = styled('button')(iconStyle({ isMobileDevice: true }), {
-  paddingBottom: 2,
-});
-const ShortHelpButton = styled('button')(iconStyle);
-
-const Header = ({
-  openShortcutsHelp,
-  onBurgerButtonClick,
-  name,
-  url,
-  enableShortcutsHelp,
-  isMobileDevice,
-}) => (
+const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp, isMobileDevice }) => (
   <Wrapper isMobileDevice={isMobileDevice}>
-    {isMobileDevice && <BurgerButton onClick={onBurgerButtonClick}>☰</BurgerButton>}
-    <HeadingLink
-      isMobileDevice={isMobileDevice}
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <Heading>{name}</Heading>
+    <HeadingLink href={url} target="_blank" rel="noopener noreferrer">
+      {name}
     </HeadingLink>
-    {enableShortcutsHelp && (
-      <ShortHelpButton isMobileDevice={isMobileDevice} onClick={openShortcutsHelp}>
-        ⌘
-      </ShortHelpButton>
-    )}
+    {enableShortcutsHelp && <ShortHelpButton onClick={openShortcutsHelp}>⌘</ShortHelpButton>}
   </Wrapper>
 );
 
 Header.defaultProps = {
   openShortcutsHelp: null,
-  onBurgerButtonClick: null,
   enableShortcutsHelp: true,
   name: '',
   url: '',
@@ -90,7 +65,6 @@ Header.defaultProps = {
 
 Header.propTypes = {
   openShortcutsHelp: PropTypes.func,
-  onBurgerButtonClick: PropTypes.func,
   name: PropTypes.string,
   url: PropTypes.string,
   isMobileDevice: PropTypes.bool,
diff --git a/lib/components/src/header/header.stories.js b/lib/components/src/header/header.stories.js
index a6af9614d98..f9e1767e9b2 100644
--- a/lib/components/src/header/header.stories.js
+++ b/lib/components/src/header/header.stories.js
@@ -5,15 +5,7 @@ import { action } from '@storybook/addon-actions';
 import Header from './header';
 
 const openShortcutsHelp = action('openShortcutsHelp');
-storiesOf('Components|Header', module)
-  .add('simple', () => (
-    <Header name="name" url="http://google.com" openShortcutsHelp={openShortcutsHelp} />
-  ))
-  .add('mobile-view', () => (
-    <Header
-      name="name"
-      url="http://google.com"
-      openShortcutsHelp={openShortcutsHelp}
-      isMobileDevice
-    />
-  ));
+
+storiesOf('Components|Header', module).add('simple', () => (
+  <Header name="name" url="http://example.com" openShortcutsHelp={openShortcutsHelp} />
+));
diff --git a/lib/components/src/index.js b/lib/components/src/index.js
index b3497661f4e..d98ab0479f0 100644
--- a/lib/components/src/index.js
+++ b/lib/components/src/index.js
@@ -1,7 +1,7 @@
-import { baseFonts, monoFonts, normal } from './theme';
+import { baseFonts, monoFonts, normal, dark } from './theme';
 
 export { baseFonts, monoFonts };
-export const themes = { normal };
+export const themes = { normal, dark };
 
 export { default as RoutedLink } from './navigation/RoutedLink';
 export { default as MenuLink } from './navigation/MenuLink';
@@ -9,7 +9,11 @@ export { default as HighlightButton } from './highlight_button';
 export { default as Table } from './table/table';
 export { Td, Th } from './table/cell';
 
-export { default as Button } from './form/button';
+export { Button, Input, Select, Textarea } from './form/input';
+export { default as Field } from './form/field';
+
+export { Tabs, TabsState, TabWrapper } from './tabs/tabs';
+export { ActionBar, ActionButton } from './panel_actionbar/panel_actionbar';
 export { default as Placeholder } from './placeholder/placeholder';
 export { default as AddonPanel } from './addon_panel/index';
 export { default as Layout } from './layout/index';
diff --git a/lib/components/src/layout/__snapshots__/index.stories.storyshot b/lib/components/src/layout/__snapshots__/index.stories.storyshot
index 27a85f90156..d222bb702f3 100644
--- a/lib/components/src/layout/__snapshots__/index.stories.storyshot
+++ b/lib/components/src/layout/__snapshots__/index.stories.storyshot
@@ -1,581 +1,604 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components|Layout addon panel in right 1`] = `
-<div
-  class="css-183j64z"
->
+<div>
   <div
-    class="SplitPane  vertical "
-    style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
+    class="css-16z7x6f"
   >
     <div
-      class="Pane vertical Pane1  "
-      style="flex:none;position:relative;outline:none;width:250px"
+      class="SplitPane  vertical "
+      style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
     >
       <div
-        class="css-1kbxkw2"
+        class="Pane vertical Pane1  "
+        style="flex:none;position:relative;outline:none;width:250px"
       >
         <div
-          class="css-9in0fq"
+          class="css-1kbxkw2"
         >
           <div
-            style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            class="css-9in0fq"
           >
-            Stories
+            <div
+              style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            >
+              Stories
+            </div>
+          </div>
+          <div
+            class="css-owlojx"
+            direction="vertical"
+          >
+            <div
+              class="css-19oxd4p"
+              direction="vertical"
+            />
           </div>
         </div>
-        <div
-          class="css-owlojx"
-          direction="vertical"
-        >
-          <div
-            class="css-19oxd4p"
-            direction="vertical"
-          />
-        </div>
       </div>
-    </div>
-    <span
-      class="Resizer vertical "
-      style="cursor:col-resize;height:auto;width:10px;z-index:1"
-    />
-    <div
-      class="Pane vertical Pane2  "
-      style="flex:1;position:relative;outline:none"
-    >
+      <span
+        class="Resizer vertical "
+        style="cursor:col-resize;height:auto;width:10px;z-index:1"
+      />
       <div
-        class="SplitPane  vertical "
-        style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
+        class="Pane vertical Pane2  "
+        style="flex:1;position:relative;outline:none"
       >
         <div
-          class="Pane vertical Pane1  "
-          style="flex:1;position:relative;outline:none"
+          class="SplitPane  vertical "
+          style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
         >
           <div
-            class="css-1e1vreg"
+            class="Pane vertical Pane1  "
+            style="flex:1;position:relative;outline:none"
           >
             <div
-              class="css-whpk08"
-            />
-            <div
-              class="css-vfn1gp"
+              class="css-1e1vreg"
             >
               <div
-                style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                class="css-1nsb3py"
+              />
+              <div
+                class="css-1xkk3c8"
               >
-                Preview
+                <div
+                  style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                >
+                  Preview
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <span
-          class="Resizer vertical "
-          style="cursor:col-resize;height:100%;width:10px;z-index:1"
-        />
-        <div
-          class="Pane vertical Pane2  "
-          style="flex:none;position:relative;outline:none;width:400px"
-        >
+          <span
+            class="Resizer vertical "
+            style="cursor:col-resize;height:100%;width:10px;z-index:1"
+          />
           <div
-            class="css-1929wko"
+            class="Pane vertical Pane2  "
+            style="flex:none;position:relative;outline:none;width:400px"
           >
             <div
-              class="css-nq4yle"
-              direction="vertical"
+              class="css-1929wko"
             >
               <div
-                class="css-19oxd4p"
+                class="css-nq4yle"
                 direction="vertical"
-              />
-            </div>
-            <div
-              style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
-            >
-              Addon
+              >
+                <div
+                  class="css-19oxd4p"
+                  direction="vertical"
+                />
+              </div>
+              <div
+                style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+              >
+                Addon
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div />
+  <div />
 </div>
 `;
 
 exports[`Storyshots Components|Layout default 1`] = `
-<div
-  class="css-183j64z"
->
+<div>
   <div
-    class="SplitPane  vertical "
-    style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
+    class="css-16z7x6f"
   >
     <div
-      class="Pane vertical Pane1  "
-      style="flex:none;position:relative;outline:none;width:250px"
+      class="SplitPane  vertical "
+      style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
     >
       <div
-        class="css-1kbxkw2"
+        class="Pane vertical Pane1  "
+        style="flex:none;position:relative;outline:none;width:250px"
       >
         <div
-          class="css-9in0fq"
+          class="css-1kbxkw2"
         >
           <div
-            style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            class="css-9in0fq"
           >
-            Stories
+            <div
+              style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            >
+              Stories
+            </div>
+          </div>
+          <div
+            class="css-owlojx"
+            direction="vertical"
+          >
+            <div
+              class="css-19oxd4p"
+              direction="vertical"
+            />
           </div>
         </div>
-        <div
-          class="css-owlojx"
-          direction="vertical"
-        >
-          <div
-            class="css-19oxd4p"
-            direction="vertical"
-          />
-        </div>
       </div>
-    </div>
-    <span
-      class="Resizer vertical "
-      style="cursor:col-resize;height:auto;width:10px;z-index:1"
-    />
-    <div
-      class="Pane vertical Pane2  "
-      style="flex:1;position:relative;outline:none"
-    >
+      <span
+        class="Resizer vertical "
+        style="cursor:col-resize;height:auto;width:10px;z-index:1"
+      />
       <div
-        class="SplitPane  horizontal "
-        style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
+        class="Pane vertical Pane2  "
+        style="flex:1;position:relative;outline:none"
       >
         <div
-          class="Pane horizontal Pane1  "
-          style="flex:1;position:relative;outline:none"
+          class="SplitPane  horizontal "
+          style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
         >
           <div
-            class="css-xlbk67"
+            class="Pane horizontal Pane1  "
+            style="flex:1;position:relative;outline:none"
           >
             <div
-              class="css-whpk08"
-            />
-            <div
-              class="css-vfn1gp"
+              class="css-xlbk67"
             >
               <div
-                style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                class="css-1nsb3py"
+              />
+              <div
+                class="css-1xkk3c8"
               >
-                Preview
+                <div
+                  style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                >
+                  Preview
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <span
-          class="Resizer horizontal "
-          style="cursor:row-resize;height:10px;width:100%;z-index:1"
-        />
-        <div
-          class="Pane horizontal Pane2  "
-          style="flex:none;position:relative;outline:none;height:200px;display:flex"
-        >
+          <span
+            class="Resizer horizontal "
+            style="cursor:row-resize;height:10px;width:100%;z-index:1"
+          />
           <div
-            class="css-1fxkhug"
+            class="Pane horizontal Pane2  "
+            style="flex:none;position:relative;outline:none;height:200px;display:flex"
           >
             <div
-              class="css-1fpokv0"
-              direction="horizontal"
+              class="css-hys0kv"
             >
               <div
-                class="css-1nvj8jd"
+                class="css-1fpokv0"
                 direction="horizontal"
-              />
-            </div>
-            <div
-              style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
-            >
-              Addon
+              >
+                <div
+                  class="css-1nvj8jd"
+                  direction="horizontal"
+                />
+              </div>
+              <div
+                style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+              >
+                Addon
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div />
+  <div />
 </div>
 `;
 
 exports[`Storyshots Components|Layout full screen 1`] = `
-<div
-  class="css-183j64z"
->
+<div>
   <div
-    class="SplitPane  vertical disabled"
-    style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
+    class="css-16z7x6f"
   >
     <div
-      class="Pane vertical Pane1  "
-      style="flex:none;position:relative;outline:none;width:1px"
+      class="SplitPane  vertical disabled"
+      style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
     >
       <div
-        class="css-1aqo4nl"
+        class="Pane vertical Pane1  "
+        style="flex:none;position:relative;outline:none;width:1px"
       >
         <div
-          class="css-9in0fq"
+          class="css-1aqo4nl"
         >
           <div
-            style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            class="css-9in0fq"
           >
-            Stories
+            <div
+              style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            >
+              Stories
+            </div>
+          </div>
+          <div
+            class="css-owlojx"
+            direction="vertical"
+          >
+            <div
+              class="css-19oxd4p"
+              direction="vertical"
+            />
           </div>
         </div>
-        <div
-          class="css-owlojx"
-          direction="vertical"
-        >
-          <div
-            class="css-19oxd4p"
-            direction="vertical"
-          />
-        </div>
       </div>
-    </div>
-    <span
-      class="Resizer vertical disabled"
-      style="height:auto;width:10px;z-index:1"
-    />
-    <div
-      class="Pane vertical Pane2  "
-      style="flex:1;position:relative;outline:none"
-    >
+      <span
+        class="Resizer vertical disabled"
+        style="height:auto;width:10px;z-index:1"
+      />
       <div
-        class="SplitPane  horizontal disabled"
-        style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
+        class="Pane vertical Pane2  "
+        style="flex:1;position:relative;outline:none"
       >
         <div
-          class="Pane horizontal Pane1  "
-          style="flex:1;position:relative;outline:none"
+          class="SplitPane  horizontal disabled"
+          style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
         >
           <div
-            class="css-xlbk67"
+            class="Pane horizontal Pane1  "
+            style="flex:1;position:relative;outline:none"
           >
             <div
-              class="css-whpk08"
-            />
-            <div
-              class="css-1k65ze8"
+              class="css-xlbk67"
             >
               <div
-                style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                class="css-1nsb3py"
+              />
+              <div
+                class="css-15swx87"
               >
-                Preview
+                <div
+                  style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                >
+                  Preview
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <span
-          class="Resizer horizontal disabled"
-          style="height:10px;width:100%;z-index:1"
-        />
-        <div
-          class="Pane horizontal Pane2  "
-          style="flex:none;position:relative;outline:none;height:1px;display:flex"
-        >
+          <span
+            class="Resizer horizontal disabled"
+            style="height:10px;width:100%;z-index:1"
+          />
           <div
-            class="css-1vc1w07"
+            class="Pane horizontal Pane2  "
+            style="flex:none;position:relative;outline:none;height:1px;display:flex"
           >
             <div
-              class="css-1fpokv0"
-              direction="horizontal"
+              class="css-1yfjvq7"
             >
               <div
-                class="css-1nvj8jd"
+                class="css-1fpokv0"
                 direction="horizontal"
-              />
-            </div>
-            <div
-              style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
-            >
-              Addon
+              >
+                <div
+                  class="css-1nvj8jd"
+                  direction="horizontal"
+                />
+              </div>
+              <div
+                style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+              >
+                Addon
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div />
+  <div />
 </div>
 `;
 
 exports[`Storyshots Components|Layout mobile 1`] = `
-<div
-  class="css-f1rc4w"
->
-  <div>
-    <div
-      class="css-1kes5pl"
-    >
+<div>
+  <div
+    class="css-1nhql0h"
+  >
+    <div>
       <div
-        class="css-6km6mc"
+        class="css-1kes5pl"
       >
         <div
-          class="css-4nm8j5"
-          role="tab"
-          type="button"
+          class="css-1whcqvw"
         >
-          Navigator
-        </div>
-        <div
-          class="css-bf047d"
-          role="tab"
-          selected=""
-          type="button"
-        >
-          Preview
-        </div>
-        <div
-          class="css-4nm8j5"
-          role="tab"
-          type="button"
-        >
-          Addons
+          <button
+            class="css-xcko46"
+            role="tab"
+            type="button"
+          >
+            Navigator
+          </button>
+          <button
+            class="css-1hf831j"
+            role="tab"
+            type="button"
+          >
+            Preview
+          </button>
+          <button
+            class="css-xcko46"
+            role="tab"
+            type="button"
+          >
+            Addons
+          </button>
         </div>
       </div>
-    </div>
-    <div
-      class="css-1hyfx7x"
-    >
       <div
-        class="css-9in0fq"
+        class="css-1hyfx7x"
       >
         <div
-          style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+          class="css-9in0fq"
         >
-          Stories
+          <div
+            style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+          >
+            Stories
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="css-1387n1o"
-      selected=""
-    >
       <div
-        class="css-9in0fq"
+        class="css-1p46ag7"
+        selected=""
       >
         <div
-          style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+          class="css-9in0fq"
         >
-          Preview
+          <div
+            style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+          >
+            Preview
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="css-1hyfx7x"
-    >
       <div
-        style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+        class="css-1hyfx7x"
       >
-        Addon
+        <div
+          style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+        >
+          Addon
+        </div>
       </div>
     </div>
   </div>
+  <div />
+  <div />
 </div>
 `;
 
 exports[`Storyshots Components|Layout no addon panel 1`] = `
-<div
-  class="css-183j64z"
->
+<div>
   <div
-    class="SplitPane  vertical "
-    style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
+    class="css-16z7x6f"
   >
     <div
-      class="Pane vertical Pane1  "
-      style="flex:none;position:relative;outline:none;width:250px"
+      class="SplitPane  vertical "
+      style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
     >
       <div
-        class="css-1kbxkw2"
+        class="Pane vertical Pane1  "
+        style="flex:none;position:relative;outline:none;width:250px"
       >
         <div
-          class="css-9in0fq"
+          class="css-1kbxkw2"
         >
           <div
-            style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            class="css-9in0fq"
           >
-            Stories
+            <div
+              style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            >
+              Stories
+            </div>
+          </div>
+          <div
+            class="css-owlojx"
+            direction="vertical"
+          >
+            <div
+              class="css-19oxd4p"
+              direction="vertical"
+            />
           </div>
         </div>
-        <div
-          class="css-owlojx"
-          direction="vertical"
-        >
-          <div
-            class="css-19oxd4p"
-            direction="vertical"
-          />
-        </div>
       </div>
-    </div>
-    <span
-      class="Resizer vertical "
-      style="cursor:col-resize;height:auto;width:10px;z-index:1"
-    />
-    <div
-      class="Pane vertical Pane2  "
-      style="flex:1;position:relative;outline:none"
-    >
+      <span
+        class="Resizer vertical "
+        style="cursor:col-resize;height:auto;width:10px;z-index:1"
+      />
       <div
-        class="SplitPane  horizontal disabled"
-        style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
+        class="Pane vertical Pane2  "
+        style="flex:1;position:relative;outline:none"
       >
         <div
-          class="Pane horizontal Pane1  "
-          style="flex:1;position:relative;outline:none"
+          class="SplitPane  horizontal disabled"
+          style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
         >
           <div
-            class="css-xlbk67"
+            class="Pane horizontal Pane1  "
+            style="flex:1;position:relative;outline:none"
           >
             <div
-              class="css-whpk08"
-            />
-            <div
-              class="css-vfn1gp"
+              class="css-xlbk67"
             >
               <div
-                style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                class="css-1nsb3py"
+              />
+              <div
+                class="css-1xkk3c8"
               >
-                Preview
+                <div
+                  style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                >
+                  Preview
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <span
-          class="Resizer horizontal disabled"
-          style="height:10px;width:100%;z-index:1"
-        />
-        <div
-          class="Pane horizontal Pane2  "
-          style="flex:none;position:relative;outline:none;height:1px;display:flex"
-        >
+          <span
+            class="Resizer horizontal disabled"
+            style="height:10px;width:100%;z-index:1"
+          />
           <div
-            class="css-1vc1w07"
+            class="Pane horizontal Pane2  "
+            style="flex:none;position:relative;outline:none;height:1px;display:flex"
           >
             <div
-              class="css-1fpokv0"
-              direction="horizontal"
+              class="css-1yfjvq7"
             >
               <div
-                class="css-1nvj8jd"
+                class="css-1fpokv0"
                 direction="horizontal"
-              />
-            </div>
-            <div
-              style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
-            >
-              Addon
+              >
+                <div
+                  class="css-1nvj8jd"
+                  direction="horizontal"
+                />
+              </div>
+              <div
+                style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+              >
+                Addon
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div />
+  <div />
 </div>
 `;
 
 exports[`Storyshots Components|Layout no stories panel 1`] = `
-<div
-  class="css-183j64z"
->
+<div>
   <div
-    class="SplitPane  vertical disabled"
-    style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
+    class="css-16z7x6f"
   >
     <div
-      class="Pane vertical Pane1  "
-      style="flex:none;position:relative;outline:none;width:1px"
+      class="SplitPane  vertical disabled"
+      style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;flex-direction:row;left:0;right:0"
     >
       <div
-        class="css-1aqo4nl"
+        class="Pane vertical Pane1  "
+        style="flex:none;position:relative;outline:none;width:1px"
       >
         <div
-          class="css-9in0fq"
+          class="css-1aqo4nl"
         >
           <div
-            style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            class="css-9in0fq"
           >
-            Stories
+            <div
+              style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
+            >
+              Stories
+            </div>
+          </div>
+          <div
+            class="css-owlojx"
+            direction="vertical"
+          >
+            <div
+              class="css-19oxd4p"
+              direction="vertical"
+            />
           </div>
         </div>
-        <div
-          class="css-owlojx"
-          direction="vertical"
-        >
-          <div
-            class="css-19oxd4p"
-            direction="vertical"
-          />
-        </div>
       </div>
-    </div>
-    <span
-      class="Resizer vertical disabled"
-      style="height:auto;width:10px;z-index:1"
-    />
-    <div
-      class="Pane vertical Pane2  "
-      style="flex:1;position:relative;outline:none"
-    >
+      <span
+        class="Resizer vertical disabled"
+        style="height:auto;width:10px;z-index:1"
+      />
       <div
-        class="SplitPane  horizontal "
-        style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
+        class="Pane vertical Pane2  "
+        style="flex:1;position:relative;outline:none"
       >
         <div
-          class="Pane horizontal Pane1  "
-          style="flex:1;position:relative;outline:none"
+          class="SplitPane  horizontal "
+          style="display:flex;flex:1;height:100%;position:absolute;outline:none;overflow:hidden;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;bottom:0;flex-direction:column;min-height:100%;top:0;width:100%"
         >
           <div
-            class="css-xlbk67"
+            class="Pane horizontal Pane1  "
+            style="flex:1;position:relative;outline:none"
           >
             <div
-              class="css-whpk08"
-            />
-            <div
-              class="css-vfn1gp"
+              class="css-xlbk67"
             >
               <div
-                style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                class="css-1nsb3py"
+              />
+              <div
+                class="css-1xkk3c8"
               >
-                Preview
+                <div
+                  style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
+                >
+                  Preview
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <span
-          class="Resizer horizontal "
-          style="cursor:row-resize;height:10px;width:100%;z-index:1"
-        />
-        <div
-          class="Pane horizontal Pane2  "
-          style="flex:none;position:relative;outline:none;height:200px;display:flex"
-        >
+          <span
+            class="Resizer horizontal "
+            style="cursor:row-resize;height:10px;width:100%;z-index:1"
+          />
           <div
-            class="css-1fxkhug"
+            class="Pane horizontal Pane2  "
+            style="flex:none;position:relative;outline:none;height:200px;display:flex"
           >
             <div
-              class="css-1fpokv0"
-              direction="horizontal"
+              class="css-hys0kv"
             >
               <div
-                class="css-1nvj8jd"
+                class="css-1fpokv0"
                 direction="horizontal"
-              />
-            </div>
-            <div
-              style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
-            >
-              Addon
+              >
+                <div
+                  class="css-1nvj8jd"
+                  direction="horizontal"
+                />
+              </div>
+              <div
+                style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
+              >
+                Addon
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div />
+  <div />
 </div>
 `;
diff --git a/lib/components/src/layout/desktop.js b/lib/components/src/layout/desktop.js
index 91d4b2409e5..036703466d3 100644
--- a/lib/components/src/layout/desktop.js
+++ b/lib/components/src/layout/desktop.js
@@ -36,8 +36,8 @@ const AddonPanelWrapper = styled('div')(
     width: '100%',
     height: '100%',
     padding: addonPanelInRight
-      ? `${layoutMargin} ${layoutMargin} ${layoutMargin} 0`
-      : `0px ${layoutMargin} ${layoutMargin} 0`,
+      ? `${layoutMargin}px ${layoutMargin}px ${layoutMargin}px 0`
+      : `0 ${layoutMargin}px ${layoutMargin}px 0`,
     boxSizing: 'border-box',
   })
 );
@@ -65,8 +65,8 @@ const ContentPanel = styled('div')(
     width: '100%',
     height: '100%',
     padding: addonPanelInRight
-      ? `${layoutMargin} 0 ${layoutMargin} 0`
-      : `${layoutMargin} ${layoutMargin} 0 0`,
+      ? `${layoutMargin}px 0 ${layoutMargin}px 0`
+      : `${layoutMargin}px ${layoutMargin}px 0 0`,
     paddingTop: storiesPanelOnTop ? 0 : layoutMargin,
   })
 );
@@ -107,13 +107,13 @@ const PreviewWrapper = styled('div')(
 );
 
 const DragBlockOverlay = styled('div')(({ isDragging }) => ({
+  zIndex: isDragging ? 2 : 0,
   display: isDragging ? 'block' : 'none',
   position: 'absolute',
-  top: '0px',
-  right: '0px',
-  bottom: '0px',
-  left: '0px',
-  zIndex: 1,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
 }));
 
 const defaultSizes = {
@@ -277,8 +277,8 @@ class Layout extends Component {
               }}
             >
               <Preview />
+              <Dimensions {...previewPanelDimensions} />
             </PreviewWrapper>
-            <Dimensions {...previewPanelDimensions} />
           </ContentPanel>
           <AddonPanelWrapper {...{ showAddonPanel, addonPanelInRight }}>
             <USplit shift={-5} split={addonSplit} />
diff --git a/lib/components/src/layout/desktop.test.js b/lib/components/src/layout/desktop.test.js
index aa9f81303a2..d6b7be347dc 100755
--- a/lib/components/src/layout/desktop.test.js
+++ b/lib/components/src/layout/desktop.test.js
@@ -5,6 +5,16 @@ import Layout from './desktop';
 const StoriesPanel = () => null;
 const AddonPanel = () => null;
 const Preview = () => null;
+const SearchBox = () => null;
+const ShortcutsHelp = () => null;
+
+const componentStubs = {
+  storiesPanel: () => <StoriesPanel />,
+  addonPanel: () => <AddonPanel />,
+  preview: () => <Preview />,
+  searchBox: () => <SearchBox />,
+  shortcutsHelp: () => <ShortcutsHelp />,
+};
 
 describe('manager.ui.components.layout.index', () => {
   describe('with default options', () => {
@@ -15,9 +25,7 @@ describe('manager.ui.components.layout.index', () => {
           showAddonPanel
           addonPanelInRight={false}
           goFullScreen={false}
-          storiesPanel={() => <StoriesPanel />}
-          addonPanel={() => <AddonPanel />}
-          preview={() => <Preview />}
+          {...componentStubs}
         />
       );
 
@@ -32,9 +40,7 @@ describe('manager.ui.components.layout.index', () => {
           showAddonPanel
           addonPanelInRight={false}
           goFullScreen={false}
-          storiesPanel={() => <StoriesPanel />}
-          addonPanel={() => <AddonPanel />}
-          preview={() => <Preview />}
+          {...componentStubs}
         />
       );
 
@@ -57,9 +63,7 @@ describe('manager.ui.components.layout.index', () => {
           showAddonPanel={false}
           showStoriesPanel={false}
           addonPanelInRight={false}
-          storiesPanel={() => <StoriesPanel />}
-          addonPanel={() => <AddonPanel />}
-          preview={() => <Preview />}
+          {...componentStubs}
         />
       );
 
@@ -77,9 +81,7 @@ describe('manager.ui.components.layout.index', () => {
           showAddonPanel
           addonPanelInRight={false}
           goFullScreen={false}
-          storiesPanel={() => <StoriesPanel />}
-          addonPanel={() => <AddonPanel />}
-          preview={() => <Preview />}
+          {...componentStubs}
         />
       );
 
@@ -98,9 +100,7 @@ describe('manager.ui.components.layout.index', () => {
           showAddonPanel={false}
           goFullScreen={false}
           addonPanelInRight={false}
-          storiesPanel={() => <StoriesPanel />}
-          addonPanel={() => <AddonPanel />}
-          preview={() => <Preview />}
+          {...componentStubs}
         />
       );
 
diff --git a/lib/components/src/layout/dimensions.js b/lib/components/src/layout/dimensions.js
index 444d9913560..f4d0deb5aab 100644
--- a/lib/components/src/layout/dimensions.js
+++ b/lib/components/src/layout/dimensions.js
@@ -3,21 +3,20 @@ import React, { Component } from 'react';
 
 import styled from 'react-emotion';
 
-import { baseFonts } from '../';
-
 const DISPLAY_TIMEOUT = 1000;
 
 const Container = styled('div')({
   position: 'absolute',
-  padding: 5,
-  bottom: 10,
-  right: 10,
+  padding: '5px 8px',
+  bottom: 0,
+  right: 0,
   backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  borderRadius: '5px 0 0 0',
 });
 
-const Section = styled('span')(baseFonts, { fontSize: 12 });
+const Section = styled('span')({ fontSize: 12 });
 
-const Delimiter = styled('span')(baseFonts, {
+const Delimiter = styled('span')({
   margin: '0px 5px',
   fontSize: 12,
 });
diff --git a/lib/components/src/layout/index.js b/lib/components/src/layout/index.js
index 4bacbfb176b..f23f9cd051d 100755
--- a/lib/components/src/layout/index.js
+++ b/lib/components/src/layout/index.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 import { ThemeProvider } from 'emotion-theming';
 
-import { normal } from '../theme';
+import { themes } from '../';
 
 import MobileLayout from './mobile';
 import DesktopLayout from './desktop';
 
 export const Root = styled('div')(
   ({ theme }) => ({
-    backgroundColor: theme.mainBackground,
+    background: theme.mainBackground,
     fontFamily: theme.mainTextFace,
     color: theme.mainTextColor,
     fontSize: theme.mainTextSize,
@@ -47,45 +47,55 @@ const StoriesPanelInner = styled('div')({
 const Layout = props => {
   const {
     isMobileDevice,
+    theme,
     addonPanel: AddonPanel,
     storiesPanel: StoriesPanel,
     preview: Preview,
+    shortcutsHelp: ShortcutsHelp,
+    searchBox: SearchBox,
   } = props;
 
   return (
-    <ThemeProvider theme={normal}>
-      <Root isMobileDevice={isMobileDevice}>
-        {isMobileDevice ? (
-          <MobileLayout>
-            <StoriesPanelInner>
-              <StoriesPanel />
-            </StoriesPanelInner>
-            <StoriesPanelInner>
-              <Preview />
-            </StoriesPanelInner>
-            <AddonPanel />
-          </MobileLayout>
-        ) : (
-          <DesktopLayout {...props} />
-        )}
-      </Root>
+    <ThemeProvider theme={theme || themes.normal}>
+      <div>
+        <Root isMobileDevice={isMobileDevice}>
+          {isMobileDevice ? (
+            <MobileLayout>
+              <StoriesPanelInner>
+                <StoriesPanel />
+              </StoriesPanelInner>
+              <StoriesPanelInner>
+                <Preview />
+              </StoriesPanelInner>
+              <AddonPanel />
+            </MobileLayout>
+          ) : (
+            <DesktopLayout {...props} />
+          )}
+        </Root>
+        <ShortcutsHelp />
+        <SearchBox />
+      </div>
     </ThemeProvider>
   );
 };
 
 Layout.propTypes = {
+  theme: PropTypes.shape({}),
   showStoriesPanel: PropTypes.bool.isRequired,
   showAddonPanel: PropTypes.bool.isRequired,
   goFullScreen: PropTypes.bool.isRequired,
   storiesPanel: PropTypes.func.isRequired,
   preview: PropTypes.func.isRequired,
   addonPanel: PropTypes.func.isRequired,
+  shortcutsHelp: PropTypes.func.isRequired,
+  searchBox: PropTypes.func.isRequired,
   addonPanelInRight: PropTypes.bool.isRequired,
-  isMobileDevice: PropTypes.bool,
+  isMobileDevice: PropTypes.bool.isRequired,
 };
 
 Layout.defaultProps = {
-  isMobileDevice: false,
+  theme: null,
 };
 
 export default Layout;
diff --git a/lib/components/src/layout/index.stories.js b/lib/components/src/layout/index.stories.js
index 0987f588c0d..3df7783a2a7 100644
--- a/lib/components/src/layout/index.stories.js
+++ b/lib/components/src/layout/index.stories.js
@@ -10,9 +10,13 @@ const panelStyle = {
   color: 'white',
 };
 
-const mockStoriesPanel = () => <div style={{ ...panelStyle, background: '#4abdac' }}>Stories</div>;
-const mockAddonPanel = () => <div style={{ ...panelStyle, background: '#fc4a1a' }}>Addon</div>;
-const mockPreviewPanel = () => <div style={{ ...panelStyle, background: '#f7b733' }}>Preview</div>;
+const componentStubs = {
+  storiesPanel: () => <div style={{ ...panelStyle, background: '#4abdac' }}>Stories</div>,
+  addonPanel: () => <div style={{ ...panelStyle, background: '#fc4a1a' }}>Addon</div>,
+  preview: () => <div style={{ ...panelStyle, background: '#f7b733' }}>Preview</div>,
+  searchBox: () => <div />,
+  shortcutsHelp: () => <div />,
+};
 
 storiesOf('Components|Layout', module)
   .add('default', () => (
@@ -21,9 +25,8 @@ storiesOf('Components|Layout', module)
       showAddonPanel
       goFullScreen={false}
       addonPanelInRight={false}
-      storiesPanel={mockStoriesPanel}
-      addonPanel={mockAddonPanel}
-      preview={mockPreviewPanel}
+      isMobileDevice={false}
+      {...componentStubs}
     />
   ))
   .add('mobile', () => (
@@ -33,9 +36,7 @@ storiesOf('Components|Layout', module)
       showAddonPanel
       goFullScreen={false}
       addonPanelInRight={false}
-      storiesPanel={mockStoriesPanel}
-      addonPanel={mockAddonPanel}
-      preview={mockPreviewPanel}
+      {...componentStubs}
     />
   ))
   .add('full screen', () => (
@@ -44,9 +45,8 @@ storiesOf('Components|Layout', module)
       showAddonPanel={false}
       goFullScreen
       addonPanelInRight={false}
-      storiesPanel={mockStoriesPanel}
-      addonPanel={mockAddonPanel}
-      preview={mockPreviewPanel}
+      isMobileDevice={false}
+      {...componentStubs}
     />
   ))
   .add('no stories panel', () => (
@@ -55,9 +55,8 @@ storiesOf('Components|Layout', module)
       showAddonPanel
       goFullScreen={false}
       addonPanelInRight={false}
-      storiesPanel={mockStoriesPanel}
-      addonPanel={mockAddonPanel}
-      preview={mockPreviewPanel}
+      isMobileDevice={false}
+      {...componentStubs}
     />
   ))
   .add('no addon panel', () => (
@@ -66,9 +65,8 @@ storiesOf('Components|Layout', module)
       showAddonPanel={false}
       goFullScreen={false}
       addonPanelInRight={false}
-      storiesPanel={mockStoriesPanel}
-      addonPanel={mockAddonPanel}
-      preview={mockPreviewPanel}
+      isMobileDevice={false}
+      {...componentStubs}
     />
   ))
   .add('addon panel in right', () => (
@@ -77,8 +75,7 @@ storiesOf('Components|Layout', module)
       showAddonPanel
       goFullScreen={false}
       addonPanelInRight
-      storiesPanel={mockStoriesPanel}
-      addonPanel={mockAddonPanel}
-      preview={mockPreviewPanel}
+      isMobileDevice={false}
+      {...componentStubs}
     />
   ));
diff --git a/lib/components/src/layout/mobile.js b/lib/components/src/layout/mobile.js
index 3e8391c0b31..3b54d8c050c 100644
--- a/lib/components/src/layout/mobile.js
+++ b/lib/components/src/layout/mobile.js
@@ -2,7 +2,7 @@ import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 
-import { TabBar, Tab } from '../addon_panel/index';
+import { Tab, TabBar } from '../tabs/tabs';
 
 const MobilePanel = styled('div')(
   ({ selected }) =>
@@ -12,7 +12,7 @@ const MobilePanel = styled('div')(
           position: 'fixed',
           top: 0,
           left: 0,
-          height: 'calc(100vh - 34px)',
+          height: 'calc(100vh - 40px)',
           width: '100vw',
           overflow: 'auto',
           WebkitOverflowScrolling: 'touch',
@@ -45,7 +45,7 @@ export default class Layout extends Component {
               <Tab
                 key={MobileTabs[i]}
                 name={MobileTabs[i]}
-                selected={i === index}
+                active={i === index}
                 title={MobileTabs[i] || `${i}`}
                 onSelect={() => this.setState({ index: i })}
               />
diff --git a/lib/components/src/navigation/MenuLink.js b/lib/components/src/navigation/MenuLink.js
index 16c7927c446..5cfa9ec1c80 100644
--- a/lib/components/src/navigation/MenuLink.js
+++ b/lib/components/src/navigation/MenuLink.js
@@ -3,9 +3,9 @@ import styled from 'react-emotion';
 import RoutedLink from './RoutedLink';
 
 const MenuLink = styled(RoutedLink, { rootEl: 'a' })(
-  {
+  ({ theme }) => ({
     display: 'block',
-    color: '#828282',
+    color: theme.dimmedTextColor,
     textDecoration: 'none',
     fontSize: '13px',
     lineHeight: '16px',
@@ -13,7 +13,7 @@ const MenuLink = styled(RoutedLink, { rootEl: 'a' })(
     marginLeft: '5px',
     position: 'relative',
     zIndex: 1,
-  },
+  }),
   ({ active }) =>
     active
       ? {
diff --git a/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot b/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot
index 351bda1a59f..5ce7038a2cc 100644
--- a/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot
+++ b/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components|Navigation/MenuLink active 1`] = `
 <a
-  class="css-1xfwvjl"
+  class="css-oato19"
   href="http://google.com"
 >
   Link
@@ -11,7 +11,7 @@ exports[`Storyshots Components|Navigation/MenuLink active 1`] = `
 
 exports[`Storyshots Components|Navigation/MenuLink default 1`] = `
 <a
-  class="css-1enusis"
+  class="css-1jhmhe9"
   href="http://google.com"
 >
   Link
@@ -23,7 +23,7 @@ exports[`Storyshots Components|Navigation/MenuLink with knobs 1`] = `
   style="width:90px"
 >
   <a
-    class="css-1xfwvjl"
+    class="css-oato19"
     href="/"
   >
     Menu link item
diff --git a/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot b/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
new file mode 100644
index 00000000000..5ca63b506ed
--- /dev/null
+++ b/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
+<ul
+  class="css-1bx3lfx"
+>
+  <li
+    class="css-wo86af"
+  >
+    <button
+      class="css-hu94vo"
+    >
+      Nr1
+    </button>
+  </li>
+  <li
+    class="css-11rvrtb"
+  >
+    <button
+      class="css-hu94vo"
+    >
+      Nr2
+    </button>
+  </li>
+  <li
+    class="css-11rvrtb"
+  >
+    <button
+      class="css-hu94vo"
+    >
+      Nr3
+    </button>
+  </li>
+</ul>
+`;
+
+exports[`Storyshots Components|PanelActionBar single item 1`] = `
+<ul
+  class="css-1bx3lfx"
+>
+  <li
+    class="css-wo86af"
+  >
+    <button
+      class="css-hu94vo"
+    >
+      CLEAR
+    </button>
+  </li>
+</ul>
+`;
diff --git a/lib/components/src/panel_actionbar/panel_actionbar.js b/lib/components/src/panel_actionbar/panel_actionbar.js
new file mode 100644
index 00000000000..af38ae8147e
--- /dev/null
+++ b/lib/components/src/panel_actionbar/panel_actionbar.js
@@ -0,0 +1,70 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+
+import styled from 'react-emotion';
+
+const Container = styled('ul')(({ theme }) => ({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  maxWidth: '100%',
+  display: 'flex',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+
+  borderTop: theme.mainBorder,
+  borderLeft: theme.mainBorder,
+  background: theme.barFill,
+  borderRadius: `${theme.mainBorderRadius}px 0 0 0`,
+}));
+
+export const ActionButton = styled('button')(({ theme }) => ({
+  border: '0 none',
+  display: 'block',
+  background: 'none',
+  padding: '0 10px',
+
+  textTransform: 'inherit',
+  letterSpacing: 'inherit',
+  fontSize: 'inherit',
+  color: 'inherit',
+
+  borderTop: '2px solid transparent',
+  borderBottom: '2px solid transparent',
+
+  '&:focus': {
+    borderBottom: `2px solid ${theme.highlightColor}`,
+    outline: '0 none',
+  },
+}));
+ActionButton.displayName = 'ActionButton';
+
+export const ActionItem = styled('li')(({ first, theme }) => ({
+  display: 'flex',
+  position: 'relative',
+  listStyle: 'none',
+  padding: 0,
+  height: 26,
+  fontSize: 11,
+  letterSpacing: 1,
+  textTransform: 'uppercase',
+
+  borderLeft: first ? '0 none' : `1px solid ${theme.mainBorderColor}`,
+}));
+ActionItem.displayName = 'ActionItem';
+
+export const ActionBar = ({ children }) => (
+  <Container>
+    {Children.toArray(children).map((item, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <ActionItem key={index} first={index === 0}>
+        {item}
+      </ActionItem>
+    ))}
+  </Container>
+);
+
+ActionBar.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/lib/components/src/panel_actionbar/panel_actionbar.stories.js b/lib/components/src/panel_actionbar/panel_actionbar.stories.js
new file mode 100644
index 00000000000..4933db29a27
--- /dev/null
+++ b/lib/components/src/panel_actionbar/panel_actionbar.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ActionBar, ActionButton } from './panel_actionbar';
+
+const action1 = action('action1');
+storiesOf('Components|PanelActionBar', module)
+  .add('single item', () => (
+    <ActionBar>
+      <ActionButton onClick={action1}>CLEAR</ActionButton>
+    </ActionBar>
+  ))
+  .add('3 items', () => (
+    <ActionBar>
+      <ActionButton onClick={action1}>Nr1</ActionButton>
+      <ActionButton onClick={action1}>Nr2</ActionButton>
+      <ActionButton onClick={action1}>Nr3</ActionButton>
+    </ActionBar>
+  ));
diff --git a/lib/components/src/placeholder/placeholder.js b/lib/components/src/placeholder/placeholder.js
index 69a4f5f7c46..fd9695c5148 100644
--- a/lib/components/src/placeholder/placeholder.js
+++ b/lib/components/src/placeholder/placeholder.js
@@ -1,8 +1,6 @@
 import styled from 'react-emotion';
 
-import { baseFonts } from '../';
-
-export default styled('p')(baseFonts, {
+export default styled('p')({
   fontSize: '11px',
   display: 'block',
   textAlign: 'center',
diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
new file mode 100644
index 00000000000..c22fc603a51
--- /dev/null
+++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
@@ -0,0 +1,507 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
+<div
+  style="height:calc(100vh - 20px)"
+>
+  <div
+    class="css-8a9ncn"
+  >
+    <div
+      class="css-1whcqvw"
+      role="tablist"
+    >
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #1
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #2
+      </button>
+      <button
+        class="css-1hf831j"
+        role="tab"
+        type="button"
+      >
+        Tab with scroll
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #4
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #5
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #6
+      </button>
+    </div>
+    <div
+      class="css-1bx5ylf"
+    >
+      <div
+        id="test2"
+        style="background:hotpink;min-height:100%;display:none"
+      >
+        CONTENT 2
+      </div>
+      <div
+        id="test3"
+      >
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
+      <div
+        class="css-1hyfx7x"
+      >
+        <div>
+          CONTENT 6
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
+<div
+  style="height:calc(100vh - 20px)"
+>
+  <div
+    class="css-8a9ncn"
+  >
+    <div
+      class="css-1whcqvw"
+      role="tablist"
+    >
+      <button
+        class="css-1hf831j"
+        role="tab"
+        type="button"
+      >
+        Tab title #1
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #2
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab with scroll
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #4
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #5
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #6
+      </button>
+    </div>
+    <div
+      class="css-1bx5ylf"
+    >
+      <div
+        id="test1"
+      >
+        CONTENT 1
+      </div>
+      <div
+        id="test2"
+        style="background:hotpink;min-height:100%;display:none"
+      >
+        CONTENT 2
+      </div>
+      <div
+        class="css-1hyfx7x"
+      >
+        <div>
+          CONTENT 6
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Tabs stateful - static 1`] = `
+<div
+  style="height:calc(100vh - 20px)"
+>
+  <div
+    class="css-8a9ncn"
+  >
+    <div
+      class="css-1whcqvw"
+      role="tablist"
+    >
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        With a function
+      </button>
+      <button
+        class="css-1hf831j"
+        role="tab"
+        type="button"
+      >
+        With markup
+      </button>
+    </div>
+    <div
+      class="css-1bx5ylf"
+    >
+      <div
+        class="css-13o7eu2"
+        role="tabpanel"
+      >
+        <div>
+          test2 is always active (but visually hidden)
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
+<div
+  style="height:calc(100vh - 20px)"
+>
+  <div
+    class="css-d7g4da"
+  >
+    <div
+      class="css-1whcqvw"
+      role="tablist"
+    >
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #1
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #2
+      </button>
+      <button
+        class="css-1hf831j"
+        role="tab"
+        type="button"
+      >
+        Tab with scroll
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #4
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #5
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #6
+      </button>
+    </div>
+    <div
+      class="css-18lpvrh"
+    >
+      <div
+        id="test2"
+        style="background:hotpink;min-height:100%;display:none"
+      >
+        CONTENT 2
+      </div>
+      <div
+        id="test3"
+      >
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
+      <div
+        class="css-1hyfx7x"
+      >
+        <div>
+          CONTENT 6
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
+<div
+  style="height:calc(100vh - 20px)"
+>
+  <div
+    class="css-8a9ncn"
+  >
+    <div
+      class="css-1whcqvw"
+      role="tablist"
+    >
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #1
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #2
+      </button>
+      <button
+        class="css-1hf831j"
+        role="tab"
+        type="button"
+      >
+        Tab with scroll
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #4
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #5
+      </button>
+      <button
+        class="css-xcko46"
+        role="tab"
+        type="button"
+      >
+        Tab title #6
+      </button>
+    </div>
+    <div
+      class="css-1bx5ylf"
+    >
+      <div
+        id="test2"
+        style="background:hotpink;min-height:100%;display:none"
+      >
+        CONTENT 2
+      </div>
+      <div
+        id="test3"
+      >
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
+      <div
+        class="css-1hyfx7x"
+      >
+        <div>
+          CONTENT 6
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Tabs stateless - empty 1`] = `
+<div
+  style="height:calc(100vh - 20px)"
+>
+  <p
+    class="css-hftiue"
+  >
+    no panels available
+  </p>
+</div>
+`;
diff --git a/lib/components/src/tabs/tabs.js b/lib/components/src/tabs/tabs.js
new file mode 100644
index 00000000000..63b21e0f1b2
--- /dev/null
+++ b/lib/components/src/tabs/tabs.js
@@ -0,0 +1,233 @@
+import React, { Component } from 'react';
+
+import Fragment from 'render-fragment';
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+
+import { Placeholder } from '../';
+
+const Wrapper = styled('div')(
+  ({ theme, bordered }) =>
+    bordered
+      ? {
+          overflow: 'hidden',
+          background: theme.mainFill,
+          borderRadius: theme.mainBorderRadius,
+          border: theme.mainBorder,
+        }
+      : {},
+  ({ absolute }) =>
+    absolute
+      ? {
+          width: '100%',
+          height: '100%',
+          boxSizing: 'border-box',
+          display: 'flex',
+          flexDirection: 'column',
+        }
+      : {
+          display: 'block',
+        }
+);
+
+export const TabBar = styled('div')(({ theme }) => ({
+  background: theme.barFill,
+  borderBottom: theme.mainBorder,
+  overflow: 'auto',
+  padding: '0 8px',
+  whiteSpace: 'nowrap',
+  height: 40,
+}));
+
+const TabButton = styled('button')(
+  {
+    whiteSpace: 'normal',
+    display: 'inline-flex',
+    overflow: 'hidden',
+    verticalAlign: 'top',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+
+    '&:empty': {
+      display: 'none',
+    },
+  },
+  ({ theme }) => ({
+    fontSize: 11,
+    letterSpacing: '1px',
+    padding: '0 8px',
+    textTransform: 'uppercase',
+    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
+    height: 40,
+    lineHeight: '12px',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    background: 'transparent',
+    border: '0 solid transparent',
+    borderTop: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+
+    '&:focus': {
+      outline: '0 none',
+      borderBottomColor: theme.highlightColor,
+    },
+  }),
+  ({ active, theme }) =>
+    active
+      ? {
+          color: theme.mainTextColor,
+          borderBottomColor: theme.barSelectedColor,
+        }
+      : {
+          color: theme.dimmedTextColor,
+          borderBottomColor: 'transparent',
+        }
+);
+
+const Content = styled('div')(
+  {
+    display: 'block',
+    position: 'relative',
+  },
+  ({ absolute }) =>
+    absolute
+      ? {
+          position: 'relative',
+          overflow: 'auto',
+          flex: 1,
+          width: '100%',
+        }
+      : {}
+);
+
+export const Tab = ({ active, name, title, onSelect }) => {
+  const onClick = e => {
+    e.preventDefault();
+    onSelect(name);
+  };
+
+  return (
+    <TabButton type="button" key={name} active={active} onClick={onClick} role="tab">
+      {typeof title === 'function' ? title() : title}
+    </TabButton>
+  );
+};
+
+Tab.propTypes = {
+  active: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+const VisuallyHidden = styled('div')(
+  ({ active }) => (active ? { display: 'block' } : { display: 'none' })
+);
+export const TabWrapper = ({ active, render, children }) => (
+  <VisuallyHidden active={active}>{render ? render() : children}</VisuallyHidden>
+);
+TabWrapper.propTypes = {
+  active: PropTypes.bool.isRequired,
+  render: PropTypes.func,
+  children: PropTypes.node,
+};
+TabWrapper.defaultProps = {
+  render: undefined,
+  children: undefined,
+};
+
+export const panelProps = {
+  active: PropTypes.bool,
+};
+
+export const Tabs = ({ children, selected, onSelect, absolute, bordered }) => {
+  const list = React.Children.toArray(children).map(
+    ({ props: { title, id, children: childrenOfChild } }, index) => {
+      const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
+      return {
+        active: selected ? id === selected : index === 0,
+        title,
+        id,
+        render:
+          typeof content === 'function'
+            ? content
+            : // eslint-disable-next-line react/prop-types
+              ({ active }) => (
+                <VisuallyHidden active={active} role="tabpanel">
+                  {content}
+                </VisuallyHidden>
+              ),
+      };
+    }
+  );
+
+  return list.length ? (
+    <Wrapper absolute={absolute} bordered={bordered}>
+      <TabBar role="tablist">
+        {list.map(({ title, id, active }) => (
+          <Tab key={`${id}-bar`} active={active} name={id} title={title} onSelect={onSelect} />
+        ))}
+      </TabBar>
+      <Content absolute={absolute}>
+        {list.map(({ id, active, render }) => (
+          <Fragment key={`${id}-panel`}>
+            {render({
+              active,
+              selected,
+            })}
+          </Fragment>
+        ))}
+      </Content>
+    </Wrapper>
+  ) : (
+    <Placeholder>no panels available</Placeholder>
+  );
+};
+Tabs.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node),
+  selected: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  absolute: PropTypes.bool.isRequired,
+  bordered: PropTypes.bool.isRequired,
+};
+Tabs.defaultProps = {
+  children: [],
+  selected: null,
+};
+
+export class TabsState extends Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.node),
+    initial: PropTypes.string,
+    absolute: PropTypes.bool,
+    bordered: PropTypes.bool,
+  };
+  static defaultProps = {
+    children: [],
+    initial: null,
+    absolute: false,
+    bordered: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selected: props.initial,
+    };
+  }
+  render() {
+    const { bordered, absolute, children } = this.props;
+    return (
+      <Tabs
+        bordered={bordered || true}
+        absolute={absolute || false}
+        selected={this.state.selected}
+        onSelect={id => this.setState({ selected: id })}
+      >
+        {children}
+      </Tabs>
+    );
+  }
+}
diff --git a/lib/components/src/tabs/tabs.stories.js b/lib/components/src/tabs/tabs.stories.js
new file mode 100644
index 00000000000..6fc152af068
--- /dev/null
+++ b/lib/components/src/tabs/tabs.stories.js
@@ -0,0 +1,139 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { Tabs, TabsState, panelProps, TabWrapper } from './tabs';
+
+const colours = [...new Array(15)].map((_, i) =>
+  Math.floor((1 / 15) * i * 16777215)
+    .toString(16)
+    .padStart(6, '0')
+);
+
+function fibonacci(num, memo = {}) {
+  if (memo[num]) return memo[num];
+  if (num <= 1) return 1;
+
+  // eslint-disable-next-line no-param-reassign
+  memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);
+  return memo[num];
+}
+
+const panels = {
+  test1: {
+    title: 'Tab title #1',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) =>
+      active ? (
+        <div id="test1" key={key}>
+          CONTENT 1
+        </div>
+      ) : null,
+  },
+  test2: {
+    title: 'Tab title #2',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) => (
+      <div
+        key={key}
+        id="test2"
+        style={{ background: 'hotpink', minHeight: '100%', display: active ? 'block' : 'none' }}
+      >
+        CONTENT 2
+      </div>
+    ),
+  },
+  test3: {
+    title: 'Tab with scroll',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) =>
+      active ? (
+        <div id="test3" key={key}>
+          {colours.map((colour, i) => (
+            <div
+              key={colour}
+              style={{
+                background: `#${colour}`,
+                height: 30 + fibonacci(i + 5) / 10,
+              }}
+            />
+          ))}
+        </div>
+      ) : null,
+  },
+  test4: {
+    title: 'Tab title #4',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) =>
+      active ? (
+        <div key={key} id="test4">
+          CONTENT 4
+        </div>
+      ) : null,
+  },
+  test5: {
+    title: 'Tab title #5',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) =>
+      active ? (
+        <div key={key} id="test5">
+          CONTENT 5
+        </div>
+      ) : null,
+  },
+  test6: {
+    title: 'Tab title #6',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active, key }) => (
+      <TabWrapper key={key} active={active} render={() => <div>CONTENT 6</div>} />
+    ),
+  },
+};
+panels.test1.propTypes = panelProps;
+panels.test2.propTypes = panelProps;
+panels.test3.propTypes = panelProps;
+panels.test4.propTypes = panelProps;
+panels.test5.propTypes = panelProps;
+panels.test6.propTypes = panelProps;
+
+const onSelect = action('onSelect');
+
+const content = Object.entries(panels).map(([k, v]) => (
+  <div key={k} id={k} title={v.title}>
+    {v.render}
+  </div>
+));
+
+storiesOf('Components|Tabs', module)
+  .addDecorator(s => <div style={{ height: 'calc(100vh - 20px)' }}>{s()}</div>)
+  .add('stateful - static', () => (
+    <TabsState initial="test2">
+      <div id="test1" title="With a function">
+        {({ active, selected }) => (active ? <div>{selected} is selected</div> : null)}
+      </div>
+      <div id="test2" title="With markup">
+        <div>test2 is always active (but visually hidden)</div>
+      </div>
+    </TabsState>
+  ))
+  .add('stateful - dynamic', () => (
+    <TabsState initial="test3">
+      {Object.entries(panels).map(([k, v]) => (
+        <div key={k} id={k} title={v.title}>
+          {v.render}
+        </div>
+      ))}
+    </TabsState>
+  ))
+  .add('stateful - no initial', () => <TabsState>{content}</TabsState>)
+  .add('stateless - bordered', () => (
+    <Tabs bordered absolute={false} selected="test3" onSelect={onSelect}>
+      {content}
+    </Tabs>
+  ))
+  .add('stateless - absolute', () => (
+    <Tabs bordered absolute selected="test3" onSelect={onSelect}>
+      {content}
+    </Tabs>
+  ))
+  .add('stateless - empty', () => <Tabs onSelect={onSelect} bordered absolute />);
diff --git a/lib/components/src/theme.js b/lib/components/src/theme.js
index fd0de1dfeeb..491e6a1f69f 100644
--- a/lib/components/src/theme.js
+++ b/lib/components/src/theme.js
@@ -1,3 +1,5 @@
+import { chromeDark, chromeLight } from 'react-inspector';
+
 export const baseFonts = {
   fontFamily:
     '-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", "Arial", sans-serif',
@@ -13,13 +15,65 @@ export const monoFonts = {
 };
 
 export const normal = {
-  mainBackground: '#F7F7F7',
+  mainBackground: '#F7F7F7 linear-gradient(to bottom right, #EEEEEE, #FFFFFF)',
   mainBorder: '1px solid rgba(0,0,0,0.1)',
+  mainBorderColor: 'rgba(0,0,0,0.1)',
   mainBorderRadius: 4,
-  mainFill: 'rgba(255,255,255,0.99)',
+  mainFill: 'rgba(255,255,255,0.89)',
+  barFill: 'rgba(255,255,255,1)',
+  barSelectedColor: 'rgba(0,0,0,0.1)',
+  inputFill: 'rgba(0,0,0,0.05)',
   mainTextFace: baseFonts.fontFamily,
   mainTextColor: baseFonts.color,
+  dimmedTextColor: 'rgba(0,0,0,0.4)',
+  highlightColor: '#9fdaff',
+  successColor: '#0edf62',
+  failColor: '#ff3f3f',
+  warnColor: 'orange',
   mainTextSize: 13,
-  monoTextFace: monoFonts.color,
-  layoutMargin: '10px',
+  monoTextFace: monoFonts.fontFamily,
+  layoutMargin: 10,
+  overlayBackground:
+    'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))',
+
+  brand: {},
+
+  addonActionsTheme: {
+    ...chromeLight,
+    BASE_FONT_FAMILY: monoFonts.fontFamily,
+    BASE_BACKGROUND_COLOR: 'transparent',
+  },
+};
+
+export const dark = {
+  mainBackground: '#112 linear-gradient(to right, #112, #333)',
+  mainBorder: '1px solid rgba(255,255,255,0.1)',
+  mainBorderColor: 'rgba(255,255,255,0.1)',
+  mainBorderRadius: 4,
+  mainFill: 'rgba(255,255,255,0.1)',
+  barFill: 'rgba(0,0,0,1)',
+  barSelectedColor: 'rgba(255,255,255,0.4)',
+  inputFill: 'rgba(0,0,0,1)',
+  mainTextFace: baseFonts.fontFamily,
+  mainTextColor: '#efefef',
+  dimmedTextColor: 'rgba(255,255,255,0.4)',
+  highlightColor: '#9fdaff',
+  successColor: '#0edf62',
+  failColor: '#ff3f3f',
+  warnColor: 'orange',
+  mainTextSize: 13,
+  monoTextFace: monoFonts.fontFamily,
+  layoutMargin: 10,
+  overlayBackground:
+    'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',
+
+  brand: {
+    background: 'rgba(0,0,0,1)',
+  },
+
+  addonActionsTheme: {
+    ...chromeDark,
+    BASE_FONT_FAMILY: monoFonts.fontFamily,
+    BASE_BACKGROUND_COLOR: 'transparent',
+  },
 };
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 957bf407be0..a68e8010866 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Event names used in storybook core",
   "license": "MIT",
   "main": "index.js"
diff --git a/lib/core/package.json b/lib/core/package.json
index 66607b0a7dd..d334ffe3689 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Storybook framework-agnostic API",
   "homepage": "https://github.com/storybooks/storybook/tree/master/lib/core",
   "bugs": {
@@ -16,13 +16,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.10",
-    "@storybook/channel-postmessage": "4.0.0-alpha.10",
-    "@storybook/client-logger": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
-    "@storybook/node-logger": "4.0.0-alpha.10",
-    "@storybook/react-dev-utils": "^5.0.0",
-    "@storybook/ui": "4.0.0-alpha.10",
+    "@storybook/addons": "4.0.0-alpha.14",
+    "@storybook/channel-postmessage": "4.0.0-alpha.14",
+    "@storybook/client-logger": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
+    "@storybook/node-logger": "4.0.0-alpha.14",
+    "@storybook/ui": "4.0.0-alpha.14",
     "airbnb-js-shims": "^1.6.0",
     "autoprefixer": "^8.6.0",
     "babel-loader": "^7.1.4",
@@ -38,26 +37,28 @@
     "commander": "^2.15.1",
     "core-js": "^2.5.7",
     "css-loader": "^0.28.11",
-    "dotenv": "^5.0.1",
-    "dotenv-webpack": "^1.5.6",
+    "dotenv-webpack": "^1.5.7",
     "emotion": "^9.1.3",
     "express": "^4.16.3",
     "file-loader": "^1.1.11",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
     "html-webpack-plugin": "^3.2.0",
+    "interpret": "^1.1.0",
     "json5": "^1.0.1",
     "postcss-flexbugs-fixes": "^3.3.1",
     "postcss-loader": "^2.1.5",
     "prop-types": "^15.6.1",
     "qs": "^6.5.2",
     "raw-loader": "^0.5.1",
+    "react-dev-utils": "^6.0.0-next.3e165448",
     "react-emotion": "^9.1.3",
     "redux": "^4.0.0",
     "serve-favicon": "^2.5.0",
     "shelljs": "^0.8.2",
     "style-loader": "^0.21.0",
     "svg-url-loader": "^2.3.2",
+    "universal-dotenv": "^1.8.0",
     "url-loader": "^1.0.1",
     "webpack": "^4.10.2",
     "webpack-dev-middleware": "^3.1.3",
diff --git a/lib/core/src/client/preview/client_api.test.js b/lib/core/src/client/preview/client_api.test.js
index 014df478981..55989d26af0 100644
--- a/lib/core/src/client/preview/client_api.test.js
+++ b/lib/core/src/client/preview/client_api.test.js
@@ -298,4 +298,48 @@ describe('preview.client_api', () => {
       expect(stories[1]).toHaveBeenCalled();
     });
   });
+
+  describe('parameters', () => {
+    it('collects parameters across different modalities', () => {
+      const storyStore = { addStory: jest.fn(), hasStory: () => false };
+
+      const api = new ClientAPI({ storyStore });
+      api.addParameters({ a: 'global', b: 'global', c: 'global' });
+
+      const kind = api.storiesOf('kind', module);
+      kind.addParameters({ b: 'kind', c: 'kind' });
+
+      kind.add('story', jest.fn(), { c: 'story' });
+
+      expect(storyStore.addStory).toHaveBeenCalledWith('kind', 'story', expect.any(Function), {
+        a: 'global',
+        b: 'kind',
+        c: 'story',
+        fileName: module.filename,
+      });
+    });
+
+    it('combines object parameters per-key', () => {
+      const storyStore = { addStory: jest.fn(), hasStory: () => false };
+
+      const api = new ClientAPI({ storyStore });
+      api.addParameters({ addon: { a: 'global', b: 'global', c: 'global', sub: { d: 'global' } } });
+
+      const kind = api.storiesOf('kind', module);
+      kind.addParameters({ addon: { b: 'kind', c: 'kind', sub: { e: 'kind' } } });
+
+      kind.add('story', jest.fn(), { addon: { c: 'story', sub: { f: 'story' } } });
+
+      expect(storyStore.addStory).toHaveBeenCalledWith('kind', 'story', expect.any(Function), {
+        addon: {
+          a: 'global',
+          b: 'kind',
+          c: 'story',
+          // Sub objects inside addons are *not* merged
+          sub: { f: 'story' },
+        },
+        fileName: module.filename,
+      });
+    });
+  });
 });
diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js
index 97d002c1b05..2901804c476 100644
--- a/lib/core/src/server/config.js
+++ b/lib/core/src/server/config.js
@@ -1,11 +1,9 @@
-/* eslint-disable global-require, import/no-dynamic-require */
-import fs from 'fs';
-import path from 'path';
 import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
 import { createDefaultWebpackConfig } from './config/defaults/webpack.config';
 import devBabelConfig from './config/babel';
 import loadBabelConfig from './babel_config';
+import loadCustomConfig from './loadCustomWebpackConfig';
 
 const noopWrapper = config => config;
 
@@ -86,15 +84,13 @@ export default options => {
 
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
-  const customConfigPath = path.resolve(configDir, 'webpack.config.js');
+  const customConfig = loadCustomConfig(configDir);
 
-  if (!fs.existsSync(customConfigPath)) {
+  if (customConfig === null) {
     informAboutCustomConfig(defaultConfigName);
     return defaultConfig;
   }
 
-  const customConfig = require(customConfigPath);
-
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
     return customConfig(wrapBasicConfig(config), configType, defaultConfig);
diff --git a/lib/core/src/server/config/env.js b/lib/core/src/server/config/env.js
index d2747437e83..3b39d07c38d 100644
--- a/lib/core/src/server/config/env.js
+++ b/lib/core/src/server/config/env.js
@@ -1,3 +1 @@
-import dotenv from 'dotenv';
-
-dotenv.config();
+import 'universal-dotenv';
diff --git a/lib/core/src/server/config/webpack.config.js b/lib/core/src/server/config/webpack.config.js
index d0cfb33f9c2..9e81a1ab9e9 100644
--- a/lib/core/src/server/config/webpack.config.js
+++ b/lib/core/src/server/config/webpack.config.js
@@ -1,8 +1,9 @@
 import path from 'path';
 import webpack from 'webpack';
+import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
+import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
@@ -66,6 +67,7 @@ export default ({ configDir, quiet, babelOptions }) => {
       new CaseSensitivePathsPlugin(),
       new WatchMissingNodeModulesPlugin(nodeModulesPaths),
       quiet ? null : new webpack.ProgressPlugin(),
+      new webpack.DefinePlugin(getEnvironment().webpack),
       new Dotenv({ silent: true }),
     ].filter(Boolean),
     module: {
diff --git a/lib/core/src/server/config/webpack.config.prod.js b/lib/core/src/server/config/webpack.config.prod.js
index 1eda5a25376..082435548c5 100644
--- a/lib/core/src/server/config/webpack.config.prod.js
+++ b/lib/core/src/server/config/webpack.config.prod.js
@@ -1,6 +1,7 @@
 import webpack from 'webpack';
+import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import { version } from '../../../package.json';
@@ -44,6 +45,7 @@ export default ({ configDir, babelOptions }) => ({
     }),
     new InterpolateHtmlPlugin(process.env),
     new webpack.DefinePlugin(loadEnv({ production: true })),
+    new webpack.DefinePlugin(getEnvironment().webpack),
     new Dotenv({ silent: true }),
   ],
   module: {
diff --git a/lib/core/src/server/loadCustomWebpackConfig.js b/lib/core/src/server/loadCustomWebpackConfig.js
new file mode 100644
index 00000000000..4e3e47534d6
--- /dev/null
+++ b/lib/core/src/server/loadCustomWebpackConfig.js
@@ -0,0 +1,86 @@
+/* eslint-disable global-require, import/no-dynamic-require */
+import fs from 'fs';
+import path from 'path';
+import interpret from 'interpret';
+import { logger } from '@storybook/node-logger';
+
+// Copied and modified from
+// https://github.com/webpack/webpack-cli/blob/ca504de8c7c0ea66278021b72fa6a953e3ffa43c/bin/convert-argv.js#L102-L119
+function registerCompiler(moduleDescriptor) {
+  if (!moduleDescriptor) {
+    return 0;
+  }
+
+  if (typeof moduleDescriptor === 'string') {
+    require(moduleDescriptor);
+    return 1;
+  }
+
+  if (!Array.isArray(moduleDescriptor)) {
+    moduleDescriptor.register(require(moduleDescriptor.module));
+    return 1;
+  }
+
+  let registered = 0;
+
+  for (let i = 0; i < moduleDescriptor.length; i += 1) {
+    try {
+      registered += registerCompiler(moduleDescriptor[i]);
+      break;
+    } catch (e) {
+      // do nothing
+    }
+  }
+
+  return registered;
+}
+
+// Copied and modified from
+// https://github.com/webpack/webpack-cli/blob/ca504de8c7c0ea66278021b72fa6a953e3ffa43c/bin/convert-argv.js#L121-L137
+function requireConfig(configPath) {
+  const config = require(configPath);
+
+  const isES6DefaultExported =
+    typeof config === 'object' && config !== null && typeof config.default !== 'undefined';
+
+  return isES6DefaultExported ? config.default : config;
+}
+
+// Copied and modified from
+// https://github.com/webpack/webpack-cli/blob/ca504de8c7c0ea66278021b72fa6a953e3ffa43c/bin/convert-argv.js#L45-L143
+export default configDir => {
+  const extensions = Object.keys(interpret.extensions).sort((a, b) => {
+    if (a === '.js') {
+      return -1;
+    }
+    if (b === '.js') {
+      return 1;
+    }
+    return a.length - b.length;
+  });
+  const customConfigCandidates = ['webpack.config', 'webpackfile']
+    .map(filename =>
+      extensions.map(ext => ({
+        path: path.resolve(configDir, filename + ext),
+        ext,
+      }))
+    )
+    .reduce((a, i) => a.concat(i), []);
+
+  for (let i = 0; i < customConfigCandidates.length; i += 1) {
+    const customConfigPath = customConfigCandidates[i].path;
+    if (fs.existsSync(customConfigPath)) {
+      if (registerCompiler(interpret.extensions[customConfigCandidates[i].ext]) === 0) {
+        logger.warn(`=> Custom configuration file ${customConfigPath} is detected`);
+        logger.warn(`   but impossible to import loader for ${customConfigCandidates[i].ext}`);
+      }
+      try {
+        return requireConfig(customConfigPath);
+      } catch (e) {
+        // do nothing
+      }
+    }
+  }
+
+  return null;
+};
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 0d87f6e9209..ec8df4cb87b 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index d00b35ab395..0b27a6f8162 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.14",
   "description": "Core Storybook UI",
   "repository": {
     "type": "git",
@@ -15,14 +15,16 @@
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {
-    "@storybook/components": "4.0.0-alpha.10",
-    "@storybook/core-events": "4.0.0-alpha.10",
+    "@ndelangen/react-treebeard": "^2.1.0",
+    "@storybook/components": "4.0.0-alpha.14",
+    "@storybook/core-events": "4.0.0-alpha.14",
     "@storybook/mantra-core": "^1.7.2",
     "@storybook/podda": "^1.2.3",
     "@storybook/react-komposer": "^2.0.4",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
     "emotion": "^9.1.3",
+    "emotion-theming": "^9.1.2",
     "events": "^2.1.0",
     "fuse.js": "^3.2.0",
     "global": "^4.3.2",
@@ -37,12 +39,11 @@
     "react-fuzzy": "^0.5.2",
     "react-icons": "^2.2.7",
     "react-lifecycles-compat": "^3.0.4",
-    "react-modal": "^3.4.5",
-    "react-treebeard": "^2.1.0"
+    "react-modal": "^3.4.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.10",
-    "@storybook/react": "4.0.0-alpha.10"
+    "@storybook/addon-actions": "4.0.0-alpha.14",
+    "@storybook/react": "4.0.0-alpha.14"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js
index ad9e9ad0457..a8b9e22af2a 100755
--- a/lib/ui/src/modules/api/index.js
+++ b/lib/ui/src/modules/api/index.js
@@ -11,6 +11,7 @@ export default {
       hierarchySeparator: '/',
       hierarchyRootSeparator: null,
       sidebarAnimations: true,
+      theme: null,
     },
   },
   load({ clientStore, provider }, _actions) {
diff --git a/lib/ui/src/modules/ui/components/__snapshots__/menu_item.stories.storyshot b/lib/ui/src/modules/ui/components/__snapshots__/menu_item.stories.storyshot
index ef1c1f9018f..ac20b6db658 100644
--- a/lib/ui/src/modules/ui/components/__snapshots__/menu_item.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/__snapshots__/menu_item.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots ui/MenuItem default 1`] = `
+exports[`Storyshots UI|MenuItem default 1`] = `
 <div
   role="menuitem"
   tabindex="0"
diff --git a/lib/ui/src/modules/ui/components/menu_item.stories.js b/lib/ui/src/modules/ui/components/menu_item.stories.js
index f48e2a1cf2e..23971b87c18 100644
--- a/lib/ui/src/modules/ui/components/menu_item.stories.js
+++ b/lib/ui/src/modules/ui/components/menu_item.stories.js
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import MenuItem from './menu_item';
 
-storiesOf('ui/MenuItem', module).add('default', () => (
+storiesOf('UI|MenuItem', module).add('default', () => (
   <MenuItem title="title" onClick={action('onClick')}>
     Content
   </MenuItem>
diff --git a/lib/ui/src/modules/ui/components/search_box.js b/lib/ui/src/modules/ui/components/search_box.js
index 767ccbc21bc..1643c541aea 100644
--- a/lib/ui/src/modules/ui/components/search_box.js
+++ b/lib/ui/src/modules/ui/components/search_box.js
@@ -1,28 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'react-emotion';
+import { polyfill } from 'react-lifecycles-compat';
 
 import ReactModal from 'react-modal';
 import FuzzySearch from 'react-fuzzy';
-import { baseFonts } from '@storybook/components';
-
-const modalStyle = {
-  content: {
-    top: '100px',
-    right: 'auto',
-    bottom: 'auto',
-    left: '50%',
-    marginLeft: '-215px',
-    border: 'none',
-    padding: 0,
-    overflow: 'visible',
-    ...baseFonts,
-  },
-  overlay: {
-    background: 'transparent',
-    zIndex: '1',
-  },
-};
+import { withTheme } from 'emotion-theming';
+import { css } from 'emotion';
 
 const formatStories = stories => {
   const formattedStories = [];
@@ -78,60 +62,73 @@ const suggestionTemplate = (props, state, styles, clickHandler) =>
     </SuggestionWrapper>
   ));
 
-export default class SearchBox extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onSelect = this.onSelect.bind(this);
-    this.fireOnStory = this.fireOnStory.bind(this);
-    this.fireOnKind = this.fireOnKind.bind(this);
-    this.inputRef = this.inputRef.bind(this);
-    this.onModalOpen = this.onModalOpen.bind(this);
+class SearchBox extends React.Component {
+  state = {};
+  static getDerivedStateFromProps({ theme }) {
+    return {
+      modalClass: css({
+        fontSize: theme.mainTextColor,
+        fontFamily: theme.mainTextFace,
+        color: theme.mainTextColor,
+      }),
+      overlayClass: css({
+        position: 'fixed',
+        height: '100vh',
+        width: '100vw',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: theme.overlayBackground,
+        zIndex: 1,
+      }),
+    };
   }
-
-  onSelect(selected) {
+  onSelect = selected => {
     const { onClose } = this.props;
+
     if (selected.type === 'story') {
       this.fireOnStory(selected.value, selected.kind);
     } else {
       this.fireOnKind(selected.value);
     }
     onClose();
-  }
+  };
 
-  onModalOpen() {
-    if (this.input != null) {
-      this.input.focus();
+  onModalOpen = () => {
+    if (this.inputRef.refs.searchBox !== null) {
+      this.inputRef.refs.searchBox.focus();
     }
-  }
+  };
 
-  fireOnKind(kind) {
+  fireOnKind = kind => {
     const { onSelectStory } = this.props;
     if (onSelectStory) {
       onSelectStory(kind, null);
     }
-  }
+  };
 
-  fireOnStory(story, kind) {
+  fireOnStory = (story, kind) => {
     const { onSelectStory } = this.props;
     if (onSelectStory) {
       onSelectStory(kind, story);
     }
-  }
-
-  inputRef(fuzzy) {
-    if (fuzzy != null) {
-      this.input = fuzzy.refs.searchBox;
-    }
-  }
+  };
 
   render() {
+    const { showSearchBox, onClose } = this.props;
+    const { overlayClass, modalClass } = this.state;
+
     return (
       <ReactModal
-        isOpen={this.props.showSearchBox}
+        isOpen={showSearchBox}
         onAfterOpen={this.onModalOpen}
-        onRequestClose={this.props.onClose}
-        style={modalStyle}
+        onRequestClose={onClose}
+        className={modalClass}
+        overlayClassName={overlayClass}
         contentLabel="Search"
         shouldReturnFocusAfterClose={false}
       >
@@ -140,7 +137,7 @@ export default class SearchBox extends React.Component {
           onSelect={this.onSelect}
           keys={['value', 'type']}
           resultsTemplate={suggestionTemplate}
-          innerRef={inputRef => {
+          ref={inputRef => {
             this.inputRef = inputRef;
           }}
         />
@@ -157,3 +154,7 @@ SearchBox.propTypes = {
   onSelectStory: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
+
+export { SearchBox };
+polyfill(SearchBox);
+export default withTheme(SearchBox);
diff --git a/lib/ui/src/modules/ui/components/search_box.stories.js b/lib/ui/src/modules/ui/components/search_box.stories.js
index 60e59fce139..2d2d90819e7 100644
--- a/lib/ui/src/modules/ui/components/search_box.stories.js
+++ b/lib/ui/src/modules/ui/components/search_box.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { document, navigator } from 'global';
 
-import SearchBox from './search_box';
+import Component from './search_box';
 
 const stories = [
   {
@@ -23,11 +23,11 @@ if (rootElement != null) {
 // For some reason react-modal causes an segfault (infinite loop maybe?)
 // when rendered by storyshots/react-test-renderer
 if (!navigator.userAgent.match(/Node\.js/) && !navigator.userAgent.match(/jsdom/)) {
-  storiesOf('ui/SearchBox', module)
+  storiesOf('UI|SearchBox', module)
     .add('default', () => (
-      <SearchBox showSearchBox onSelectStory={onSelectStory} onClose={onClose} />
+      <Component showSearchBox onSelectStory={onSelectStory} onClose={onClose} />
     ))
     .add('with stories', () => (
-      <SearchBox showSearchBox onSelectStory={onSelectStory} onClose={onClose} stories={stories} />
+      <Component showSearchBox onSelectStory={onSelectStory} onClose={onClose} stories={stories} />
     ));
 }
diff --git a/lib/ui/src/modules/ui/components/search_box.test.js b/lib/ui/src/modules/ui/components/search_box.test.js
index a46043bd710..2665002c7c4 100644
--- a/lib/ui/src/modules/ui/components/search_box.test.js
+++ b/lib/ui/src/modules/ui/components/search_box.test.js
@@ -3,17 +3,23 @@ import React from 'react';
 import ReactModal from 'react-modal';
 import FuzzySearch from 'react-fuzzy';
 
-import SearchBox from './search_box';
+import { SearchBox } from './search_box';
 
-describe('manager.ui.components.search_box', () => {
+const setup = (props = {}) => {
   const defaultProps = {
     showSearchBox: false,
     onSelectStory: () => undefined,
     onClose: () => undefined,
   };
+  return {
+    wrap: shallow(<SearchBox {...defaultProps} {...props} theme={{}} />),
+  };
+};
+
+describe('manager.ui.components.search_box', () => {
   describe('render', () => {
     test('should render FuzzySearch inside ReactModal', () => {
-      const wrap = shallow(<SearchBox {...defaultProps} showSearchBox />);
+      const { wrap } = setup({ showSearchBox: true });
 
       const modal = wrap.find(ReactModal);
       expect(modal).toExist();
@@ -32,7 +38,8 @@ describe('manager.ui.components.search_box', () => {
           stories: ['b', 'c'],
         },
       ];
-      const wrap = shallow(<SearchBox {...defaultProps} stories={stories} />);
+      const { wrap } = setup({ stories });
+
       const search = wrap.find(FuzzySearch);
 
       const expectedList = [
@@ -61,7 +68,7 @@ describe('manager.ui.components.search_box', () => {
   describe('events', () => {
     test('should call the onClose prop when modal requests it', () => {
       const onClose = jest.fn();
-      const wrap = shallow(<SearchBox {...defaultProps} onClose={onClose} />);
+      const { wrap } = setup({ onClose });
 
       const modal = wrap.find(ReactModal);
       modal.simulate('requestClose');
@@ -72,9 +79,7 @@ describe('manager.ui.components.search_box', () => {
     test('should handle selecting a kind', () => {
       const onSelectStory = jest.fn();
       const onClose = jest.fn();
-      const wrap = shallow(
-        <SearchBox {...defaultProps} onSelectStory={onSelectStory} onClose={onClose} />
-      );
+      const { wrap } = setup({ onSelectStory, onClose });
 
       const modal = wrap.find(FuzzySearch);
       modal.simulate('select', {
@@ -89,9 +94,7 @@ describe('manager.ui.components.search_box', () => {
     test('should handle selecting a story', () => {
       const onSelectStory = jest.fn();
       const onClose = jest.fn();
-      const wrap = shallow(
-        <SearchBox {...defaultProps} onSelectStory={onSelectStory} onClose={onClose} />
-      );
+      const { wrap } = setup({ onSelectStory, onClose });
 
       const modal = wrap.find(FuzzySearch);
       modal.simulate('select', {
@@ -113,14 +116,7 @@ describe('manager.ui.components.search_box', () => {
       ];
       const onSelectStory = jest.fn();
       const onClose = jest.fn();
-      const wrap = shallow(
-        <SearchBox
-          onSelectStory={onSelectStory}
-          onClose={onClose}
-          stories={stories}
-          showSearchBox
-        />
-      );
+      const { wrap } = setup({ onSelectStory, onClose, stories, showSearchBox: true });
 
       const modal = wrap.find(FuzzySearch).dive();
       modal.find('input').simulate('change', {
diff --git a/lib/ui/src/modules/ui/components/shortcuts_help.js b/lib/ui/src/modules/ui/components/shortcuts_help.js
index ee0d8cd68c5..9a8bb96eeca 100755
--- a/lib/ui/src/modules/ui/components/shortcuts_help.js
+++ b/lib/ui/src/modules/ui/components/shortcuts_help.js
@@ -1,12 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import styled from 'react-emotion';
+import { css } from 'emotion';
+import { withTheme } from 'emotion-theming';
+import { polyfill } from 'react-lifecycles-compat';
 
 import ReactModal from 'react-modal';
-import { baseFonts } from '@storybook/components';
 
 const Command = styled('b')(
-  ({ isLast, isFirst }) => {
+  ({ isLast, isFirst, theme }) => {
     switch (true) {
       case isFirst && isLast: {
         return {
@@ -17,15 +19,15 @@ const Command = styled('b')(
       }
       case isFirst: {
         return {
-          borderRight: '1px solid silver',
-          borderRadius: '2px 0 0 2px',
+          borderRight: theme.mainBorder,
+          borderRadius: `${theme.mainBorderRadius} 0 0 ${theme.mainBorderRadius}`,
           marginRight: 0,
         };
       }
       case isLast: {
         return {
           borderRight: '0 none',
-          borderRadius: '0 2px 2px 0',
+          borderRadius: `0 ${theme.mainBorderRadius} ${theme.mainBorderRadius} 0`,
           marginRight: 9,
         };
       }
@@ -38,44 +40,32 @@ const Command = styled('b')(
       }
     }
   },
-  {
+  ({ theme }) => ({
     padding: '2px 10px',
-    backgroundColor: '#eee',
+    backgroundColor: theme.inputFill,
+    color: 'inherit',
     lineHeight: '36px',
     minWidth: 50,
     display: 'inline-block',
     textAlign: 'center',
-  }
+  })
 );
 
 const Title = styled('h4')({
   marginTop: 0,
   textAlign: 'left',
+  color: 'inherit',
 });
 
-const CommandDescription = styled('span')(baseFonts, {
+const Table = styled('table')({
+  borderCollapse: 'collapse',
+});
+
+const CommandDescription = styled('span')({
   fontSize: 12,
+  color: 'inherit',
 });
 
-const modalStyles = {
-  content: {
-    left: '50%',
-    bottom: 'initial',
-    right: 'initial',
-    width: 440,
-    marginLeft: -220,
-    border: 'none',
-    overflow: 'visible',
-    fontSize: 14,
-
-    ...baseFonts,
-  },
-  overlay: {
-    backgroundColor: 'rgba(0, 0, 0, 0.74902)',
-    zIndex: 1,
-  },
-};
-
 // manage two separate shortcut keys for
 // 'mac' & other (windows, linux) platforms
 export function getShortcuts(platform) {
@@ -120,18 +110,20 @@ Keys.propTypes = {
 export const Shortcuts = ({ appShortcuts }) => (
   <div>
     <Title>Keyboard Shortcuts</Title>
-    <table>
-      {appShortcuts.map(shortcut => (
-        <tr key={shortcut.name}>
-          <td>
-            <Keys shortcutKeys={shortcut.keys} />
-          </td>
-          <td>
-            <CommandDescription>{shortcut.name}</CommandDescription>
-          </td>
-        </tr>
-      ))}
-    </table>
+    <Table>
+      <tbody>
+        {appShortcuts.map(shortcut => (
+          <tr key={shortcut.name}>
+            <td>
+              <Keys shortcutKeys={shortcut.keys} />
+            </td>
+            <td>
+              <CommandDescription>{shortcut.name}</CommandDescription>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
   </div>
 );
 
@@ -144,15 +136,48 @@ Shortcuts.propTypes = {
   ).isRequired,
 };
 
-// eslint-disable-next-line react/prefer-stateless-function
-export class ShortcutsHelp extends Component {
+class ShortcutsHelp extends Component {
+  state = {};
+  static getDerivedStateFromProps({ theme }) {
+    return {
+      modalClass: css({
+        position: 'absolute',
+        border: theme.mainBorder,
+        borderRadius: theme.mainBorderRadius,
+        boxSizing: 'border-box',
+        padding: 32,
+        top: 32,
+        left: '50%',
+        width: 440,
+        outline: '0 none',
+        marginLeft: -220,
+        overflow: 'visible',
+        background: theme.barFill,
+        fontSize: theme.mainTextColor,
+        fontFamily: theme.mainTextFace,
+        color: theme.mainTextColor,
+      }),
+      overlayClass: css({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: theme.overlayBackground,
+        zIndex: 1,
+      }),
+    };
+  }
   render() {
     const { isOpen, onClose, platform } = this.props;
+    const { overlayClass, modalClass } = this.state;
+
     return (
       <ReactModal
         isOpen={isOpen}
         onRequestClose={onClose}
-        style={modalStyles}
+        className={modalClass}
+        overlayClassName={overlayClass}
         contentLabel="Shortcuts"
       >
         <Shortcuts appShortcuts={getShortcuts(platform)} />
@@ -171,4 +196,5 @@ ShortcutsHelp.defaultProps = {
   onClose: () => {},
 };
 
-export default ShortcutsHelp;
+polyfill(ShortcutsHelp);
+export default withTheme(ShortcutsHelp);
diff --git a/lib/ui/src/modules/ui/components/shortcuts_help.stories.js b/lib/ui/src/modules/ui/components/shortcuts_help.stories.js
index f2cba56aebd..804b7481b9d 100644
--- a/lib/ui/src/modules/ui/components/shortcuts_help.stories.js
+++ b/lib/ui/src/modules/ui/components/shortcuts_help.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { document, navigator } from 'global';
 
-import { ShortcutsHelp } from './shortcuts_help';
+import ShortcutsHelp from './shortcuts_help';
 
 const onClose = action('onClose');
 
@@ -16,7 +16,7 @@ if (rootElement != null) {
 // For some reason react-modal causes an segfault (infinite loop maybe?)
 // when rendered by storyshots/react-test-renderer
 if (!navigator.userAgent.match(/Node\.js/) && !navigator.userAgent.match(/jsdom/)) {
-  storiesOf('ui/ShortcutHelp', module).add('default', () => (
+  storiesOf('UI|ShortcutHelp', module).add('default', () => (
     <ShortcutsHelp isOpen onClose={onClose} />
   ));
 }
diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
index 41b538903b1..d9837155581 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
+exports[`Storyshots UI|stories/StoriesPanel default 1`] = `
 <div
   class="css-3dwd22"
 >
@@ -8,15 +8,11 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
     class="css-5xz1i6"
   >
     <a
-      class="css-108o064"
+      class="css-ypfoxr"
       href=""
       rel="noopener noreferrer"
       target="_blank"
-    >
-      <h3
-        class="css-1852r2"
-      />
-    </a>
+    />
     <button
       class="css-i6e0jg"
     >
@@ -27,7 +23,7 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
     class="css-79elbk"
   >
     <input
-      class="css-11zcadk"
+      class="css-1yhj4t5"
       name="filter-text"
       placeholder="Filter"
       type="text"
@@ -37,7 +33,7 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is empty 1`] = `
+exports[`Storyshots UI|stories/StoriesPanel storiesHierarchies exists but is empty 1`] = `
 <div
   class="css-3dwd22"
 >
@@ -45,15 +41,11 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is emp
     class="css-5xz1i6"
   >
     <a
-      class="css-108o064"
+      class="css-ypfoxr"
       href=""
       rel="noopener noreferrer"
       target="_blank"
-    >
-      <h3
-        class="css-1852r2"
-      />
-    </a>
+    />
     <button
       class="css-i6e0jg"
     >
@@ -64,7 +56,7 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is emp
     class="css-79elbk"
   >
     <input
-      class="css-11zcadk"
+      class="css-1yhj4t5"
       name="filter-text"
       placeholder="Filter"
       type="text"
@@ -74,7 +66,7 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is emp
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
+exports[`Storyshots UI|stories/StoriesPanel when open on mobile device 1`] = `
 <div
   class="css-nk32ej"
 >
@@ -82,15 +74,11 @@ exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
     class="css-5xz1i6"
   >
     <a
-      class="css-108o064"
+      class="css-ypfoxr"
       href=""
       rel="noopener noreferrer"
       target="_blank"
-    >
-      <h3
-        class="css-1852r2"
-      />
-    </a>
+    />
     <button
       class="css-i6e0jg"
     >
@@ -101,7 +89,7 @@ exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
     class="css-79elbk"
   >
     <input
-      class="css-11zcadk"
+      class="css-1yhj4t5"
       name="filter-text"
       placeholder="Filter"
       type="text"
@@ -111,7 +99,7 @@ exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
+exports[`Storyshots UI|stories/StoriesPanel with storiesHierarchies prop 1`] = `
 <div
   class="css-3dwd22"
 >
@@ -119,15 +107,11 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
     class="css-5xz1i6"
   >
     <a
-      class="css-108o064"
+      class="css-ypfoxr"
       href=""
       rel="noopener noreferrer"
       target="_blank"
-    >
-      <h3
-        class="css-1852r2"
-      />
-    </a>
+    />
     <button
       class="css-i6e0jg"
     >
@@ -138,7 +122,7 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
     class="css-79elbk"
   >
     <input
-      class="css-11zcadk"
+      class="css-1yhj4t5"
       name="filter-text"
       placeholder="Filter"
       type="text"
@@ -149,17 +133,17 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
     class="css-7w6khc"
   >
     <ul
-      style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
+      class="css-h3ek8a"
     >
       <li
-        style="position:relative"
+        class="css-79elbk"
       >
         <span>
           <ul
-            style="padding-left:19px;list-style:none"
+            class="css-vq3qyb"
           >
             <li
-              style="position:relative"
+              class="css-79elbk"
             >
               <div
                 data-name="kk"
@@ -167,9 +151,7 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
                 style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
                 tabindex="0"
               >
-                <div
-                  data-radium="true"
-                >
+                <div>
                   <div
                     style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                   >
@@ -180,7 +162,7 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
                         fill="currentColor"
                         height="10"
                         preserveAspectRatio="xMidYMid meet"
-                        style="vertical-align:top;fill:#9DA5AB"
+                        style="vertical-align:top;fill:currentColor"
                         viewBox="0 0 40 40"
                         width="10"
                       >
@@ -193,10 +175,10 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
                     </div>
                   </div>
                   <div
-                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                    class="css-1si3szf"
                   >
                     <div
-                      style="line-height:18px;padding:1px 0 5px"
+                      class="css-h8sbw5"
                     >
                       kk
                     </div>
@@ -205,22 +187,22 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
               </div>
               <span>
                 <ul
-                  style="padding-left:19px;list-style:none"
+                  class="css-vq3qyb"
                 >
                   <li
-                    style="position:relative"
+                    class="css-79elbk"
                   >
                     <a
-                      class="css-1xfwvjl"
+                      class="css-oato19"
                       href="?selectedKind=kk&selectedStory=bb&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                     >
-                      <div
-                        data-radium="true"
-                      >
+                      <div>
                         <div
-                          style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                          class="css-1si3szf"
                         >
-                          <div>
+                          <div
+                            class="css-0"
+                          >
                             bb
                           </div>
                         </div>
diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot
index 48d7bcbe53a..06a4eab21da 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots ui/stories/TextFilter with filterText 1`] = `
+exports[`Storyshots UI|stories/TextFilter with filterText 1`] = `
 <div
   class="css-79elbk"
 >
   <input
-    class="css-11zcadk"
+    class="css-1yhj4t5"
     name="filter-text"
     placeholder="Filter"
     type="text"
@@ -19,12 +19,12 @@ exports[`Storyshots ui/stories/TextFilter with filterText 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/TextFilter without filterText 1`] = `
+exports[`Storyshots UI|stories/TextFilter without filterText 1`] = `
 <div
   class="css-79elbk"
 >
   <input
-    class="css-11zcadk"
+    class="css-1yhj4t5"
     name="filter-text"
     placeholder="Filter"
     type="text"
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
index 91a74e4a4f6..d7f6aa967c0 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
@@ -26,7 +26,7 @@ const decorator = withLifecyle({
 const storiesHierarchies = createHierarchies([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
 const openShortcutsHelp = action('openShortcutsHelp');
 const onStoryFilter = action('onStoryFilter');
-storiesOf('ui/stories/StoriesPanel', module)
+storiesOf('UI|stories/StoriesPanel', module)
   .addDecorator(decorator)
   .add('default', () => (
     <StoriesPanel
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
index d29c2191da5..da286b27e16 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots ui/stories/Stories empty 1`] = `
+exports[`Storyshots UI|stories/Stories empty 1`] = `
 <div
   class="css-7w6khc"
 >
   <ul
-    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
+    class="css-h3ek8a"
   >
     <li
-      style="position:relative"
+      class="css-79elbk"
     >
       <span>
         <ul
-          style="padding-left:19px;list-style:none"
+          class="css-vq3qyb"
         />
       </span>
     </li>
@@ -20,22 +20,22 @@ exports[`Storyshots ui/stories/Stories empty 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/Stories simple 1`] = `
+exports[`Storyshots UI|stories/Stories simple 1`] = `
 <div
   class="css-7w6khc"
 >
   <ul
-    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
+    class="css-h3ek8a"
   >
     <li
-      style="position:relative"
+      class="css-79elbk"
     >
       <span>
         <ul
-          style="padding-left:19px;list-style:none"
+          class="css-vq3qyb"
         >
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="a"
@@ -43,9 +43,7 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -56,7 +54,7 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -69,10 +67,10 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     a
                   </div>
@@ -82,7 +80,7 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
             <span />
           </li>
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="b"
@@ -90,9 +88,7 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -103,7 +99,7 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -116,10 +112,10 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     b
                   </div>
@@ -128,22 +124,22 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
             </div>
             <span>
               <ul
-                style="padding-left:19px;list-style:none"
+                class="css-vq3qyb"
               >
                 <li
-                  style="position:relative"
+                  class="css-79elbk"
                 >
                   <a
-                    class="css-1enusis"
+                    class="css-1jhmhe9"
                     href="?selectedKind=b&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
-                    <div
-                      data-radium="true"
-                    >
+                    <div>
                       <div
-                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                        class="css-1si3szf"
                       >
-                        <div>
+                        <div
+                          class="css-0"
+                        >
                           b1
                         </div>
                       </div>
@@ -152,19 +148,19 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
                   <span />
                 </li>
                 <li
-                  style="position:relative"
+                  class="css-79elbk"
                 >
                   <a
-                    class="css-1xfwvjl"
+                    class="css-oato19"
                     href="?selectedKind=b&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
-                    <div
-                      data-radium="true"
-                    >
+                    <div>
                       <div
-                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                        class="css-1si3szf"
                       >
-                        <div>
+                        <div
+                          class="css-0"
+                        >
                           b2
                         </div>
                       </div>
@@ -182,22 +178,22 @@ exports[`Storyshots ui/stories/Stories simple 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is defined 1`] = `
+exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is defined 1`] = `
 <div
   class="css-7w6khc"
 >
   <ul
-    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
+    class="css-h3ek8a"
   >
     <li
-      style="position:relative"
+      class="css-79elbk"
     >
       <span>
         <ul
-          style="padding-left:19px;list-style:none"
+          class="css-vq3qyb"
         >
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="some"
@@ -205,9 +201,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -218,7 +212,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -231,10 +225,10 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     some
                   </div>
@@ -244,7 +238,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
             <span />
           </li>
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="another"
@@ -252,9 +246,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -265,7 +257,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -278,10 +270,10 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     another
                   </div>
@@ -290,10 +282,10 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
             </div>
             <span>
               <ul
-                style="padding-left:19px;list-style:none"
+                class="css-vq3qyb"
               >
                 <li
-                  style="position:relative"
+                  class="css-79elbk"
                 >
                   <div
                     data-name="space"
@@ -301,9 +293,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                     style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
                     tabindex="0"
                   >
-                    <div
-                      data-radium="true"
-                    >
+                    <div>
                       <div
                         style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                       >
@@ -314,7 +304,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                             fill="currentColor"
                             height="10"
                             preserveAspectRatio="xMidYMid meet"
-                            style="vertical-align:top;fill:#9DA5AB"
+                            style="vertical-align:top;fill:currentColor"
                             viewBox="0 0 40 40"
                             width="10"
                           >
@@ -327,10 +317,10 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                         </div>
                       </div>
                       <div
-                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                        class="css-1si3szf"
                       >
                         <div
-                          style="line-height:18px;padding:1px 0 5px"
+                          class="css-h8sbw5"
                         >
                           space
                         </div>
@@ -339,10 +329,10 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                   </div>
                   <span>
                     <ul
-                      style="padding-left:19px;list-style:none"
+                      class="css-vq3qyb"
                     >
                       <li
-                        style="position:relative"
+                        class="css-79elbk"
                       >
                         <div
                           data-name="20"
@@ -350,9 +340,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                           style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
                           tabindex="0"
                         >
-                          <div
-                            data-radium="true"
-                          >
+                          <div>
                             <div
                               style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                             >
@@ -363,7 +351,7 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                                   fill="currentColor"
                                   height="10"
                                   preserveAspectRatio="xMidYMid meet"
-                                  style="vertical-align:top;fill:#9DA5AB"
+                                  style="vertical-align:top;fill:currentColor"
                                   viewBox="0 0 40 40"
                                   width="10"
                                 >
@@ -376,10 +364,10 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                               </div>
                             </div>
                             <div
-                              style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                              class="css-1si3szf"
                             >
                               <div
-                                style="line-height:18px;padding:1px 0 5px"
+                                class="css-h8sbw5"
                               >
                                 20
                               </div>
@@ -388,22 +376,22 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                         </div>
                         <span>
                           <ul
-                            style="padding-left:19px;list-style:none"
+                            class="css-vq3qyb"
                           >
                             <li
-                              style="position:relative"
+                              class="css-79elbk"
                             >
                               <a
-                                class="css-1enusis"
+                                class="css-1jhmhe9"
                                 href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
-                                <div
-                                  data-radium="true"
-                                >
+                                <div>
                                   <div
-                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                    class="css-1si3szf"
                                   >
-                                    <div>
+                                    <div
+                                      class="css-0"
+                                    >
                                       b1
                                     </div>
                                   </div>
@@ -412,19 +400,19 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
                               <span />
                             </li>
                             <li
-                              style="position:relative"
+                              class="css-79elbk"
                             >
                               <a
-                                class="css-1xfwvjl"
+                                class="css-oato19"
                                 href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
-                                <div
-                                  data-radium="true"
-                                >
+                                <div>
                                   <div
-                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                    class="css-1si3szf"
                                   >
-                                    <div>
+                                    <div
+                                      class="css-0"
+                                    >
                                       b2
                                     </div>
                                   </div>
@@ -448,22 +436,22 @@ exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is de
 </div>
 `;
 
-exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is provided 1`] = `
+exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is provided 1`] = `
 <div
   class="css-7w6khc"
 >
   <ul
-    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
+    class="css-h3ek8a"
   >
     <li
-      style="position:relative"
+      class="css-79elbk"
     >
       <span>
         <ul
-          style="padding-left:19px;list-style:none"
+          class="css-vq3qyb"
         >
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="another"
@@ -471,9 +459,7 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -484,7 +470,7 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -497,10 +483,10 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     <span>
                       ano
@@ -519,10 +505,10 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
             </div>
             <span>
               <ul
-                style="padding-left:19px;list-style:none"
+                class="css-vq3qyb"
               >
                 <li
-                  style="position:relative"
+                  class="css-79elbk"
                 >
                   <div
                     data-name="space"
@@ -530,9 +516,7 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                     style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
                     tabindex="0"
                   >
-                    <div
-                      data-radium="true"
-                    >
+                    <div>
                       <div
                         style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                       >
@@ -543,7 +527,7 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                             fill="currentColor"
                             height="10"
                             preserveAspectRatio="xMidYMid meet"
-                            style="vertical-align:top;fill:#9DA5AB"
+                            style="vertical-align:top;fill:currentColor"
                             viewBox="0 0 40 40"
                             width="10"
                           >
@@ -556,10 +540,10 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                         </div>
                       </div>
                       <div
-                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                        class="css-1si3szf"
                       >
                         <div
-                          style="line-height:18px;padding:1px 0 5px"
+                          class="css-h8sbw5"
                         >
                           space
                         </div>
@@ -568,10 +552,10 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                   </div>
                   <span>
                     <ul
-                      style="padding-left:19px;list-style:none"
+                      class="css-vq3qyb"
                     >
                       <li
-                        style="position:relative"
+                        class="css-79elbk"
                       >
                         <div
                           data-name="20"
@@ -579,9 +563,7 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                           style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
                           tabindex="0"
                         >
-                          <div
-                            data-radium="true"
-                          >
+                          <div>
                             <div
                               style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                             >
@@ -592,7 +574,7 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                                   fill="currentColor"
                                   height="10"
                                   preserveAspectRatio="xMidYMid meet"
-                                  style="vertical-align:top;fill:#9DA5AB"
+                                  style="vertical-align:top;fill:currentColor"
                                   viewBox="0 0 40 40"
                                   width="10"
                                 >
@@ -605,10 +587,10 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                               </div>
                             </div>
                             <div
-                              style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                              class="css-1si3szf"
                             >
                               <div
-                                style="line-height:18px;padding:1px 0 5px"
+                                class="css-h8sbw5"
                               >
                                 20
                               </div>
@@ -617,22 +599,22 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                         </div>
                         <span>
                           <ul
-                            style="padding-left:19px;list-style:none"
+                            class="css-vq3qyb"
                           >
                             <li
-                              style="position:relative"
+                              class="css-79elbk"
                             >
                               <a
-                                class="css-1enusis"
+                                class="css-1jhmhe9"
                                 href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
-                                <div
-                                  data-radium="true"
-                                >
+                                <div>
                                   <div
-                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                    class="css-1si3szf"
                                   >
-                                    <div>
+                                    <div
+                                      class="css-0"
+                                    >
                                       b1
                                     </div>
                                   </div>
@@ -641,19 +623,19 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
                               <span />
                             </li>
                             <li
-                              style="position:relative"
+                              class="css-79elbk"
                             >
                               <a
-                                class="css-1xfwvjl"
+                                class="css-oato19"
                                 href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
-                                <div
-                                  data-radium="true"
-                                >
+                                <div>
                                   <div
-                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                    class="css-1si3szf"
                                   >
-                                    <div>
+                                    <div
+                                      class="css-0"
+                                    >
                                       b2
                                     </div>
                                   </div>
@@ -677,22 +659,22 @@ exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is p
 </div>
 `;
 
-exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is defined 1`] = `
+exports[`Storyshots UI|stories/Stories without hierarchy - hierarchySeparator is defined 1`] = `
 <div
   class="css-7w6khc"
 >
   <ul
-    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
+    class="css-h3ek8a"
   >
     <li
-      style="position:relative"
+      class="css-79elbk"
     >
       <span>
         <ul
-          style="padding-left:19px;list-style:none"
+          class="css-vq3qyb"
         >
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="some.name.item1"
@@ -700,9 +682,7 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -713,7 +693,7 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -726,10 +706,10 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     some.name.item1
                   </div>
@@ -739,7 +719,7 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
             <span />
           </li>
           <li
-            style="position:relative"
+            class="css-79elbk"
           >
             <div
               data-name="another.space.20"
@@ -747,9 +727,7 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
               style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
               tabindex="0"
             >
-              <div
-                data-radium="true"
-              >
+              <div>
                 <div
                   style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
@@ -760,7 +738,7 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
                       fill="currentColor"
                       height="10"
                       preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:#9DA5AB"
+                      style="vertical-align:top;fill:currentColor"
                       viewBox="0 0 40 40"
                       width="10"
                     >
@@ -773,10 +751,10 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
                   </div>
                 </div>
                 <div
-                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                  class="css-1si3szf"
                 >
                   <div
-                    style="line-height:18px;padding:1px 0 5px"
+                    class="css-h8sbw5"
                   >
                     another.space.20
                   </div>
@@ -785,22 +763,22 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
             </div>
             <span>
               <ul
-                style="padding-left:19px;list-style:none"
+                class="css-vq3qyb"
               >
                 <li
-                  style="position:relative"
+                  class="css-79elbk"
                 >
                   <a
-                    class="css-1enusis"
+                    class="css-1jhmhe9"
                     href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
-                    <div
-                      data-radium="true"
-                    >
+                    <div>
                       <div
-                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                        class="css-1si3szf"
                       >
-                        <div>
+                        <div
+                          class="css-0"
+                        >
                           b1
                         </div>
                       </div>
@@ -809,19 +787,19 @@ exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is
                   <span />
                 </li>
                 <li
-                  style="position:relative"
+                  class="css-79elbk"
                 >
                   <a
-                    class="css-1xfwvjl"
+                    class="css-oato19"
                     href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
-                    <div
-                      data-radium="true"
-                    >
+                    <div>
                       <div
-                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                        class="css-1si3szf"
                       >
-                        <div>
+                        <div
+                          class="css-0"
+                        >
                           b2
                         </div>
                       </div>
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
index ca0e63a9856..b6bd12c525a 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
@@ -1,4 +1,4 @@
-import { Treebeard } from 'react-treebeard';
+import { Treebeard } from '@ndelangen/react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
index dff9e319cdd..91ce0bc7f4f 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
@@ -52,7 +52,7 @@ const decorator = withLifecyle({
   },
 });
 
-storiesOf('ui/stories/Stories', module)
+storiesOf('UI|stories/Stories', module)
   .addDecorator(decorator)
   .add('empty', () => (
     <Stories
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
index 49b65701612..98673e73e26 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
@@ -1,4 +1,4 @@
-import { decorators } from 'react-treebeard';
+import { decorators } from '@ndelangen/react-treebeard';
 import IoChevronRight from 'react-icons/lib/io/chevron-right';
 import React from 'react';
 import PropTypes from 'prop-types';
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
index 412e0cbdb78..6bbe32c34c4 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
@@ -2,17 +2,17 @@ import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
-const TreeHeader = styled('h4')({
+const TreeHeader = styled('h4')(({ theme }) => ({
   textTransform: 'uppercase',
   letterSpacing: '1.2px',
   fontSize: '12px',
   fontWeight: 'normal',
-  color: '#828282',
+  color: theme.dimmedTextColor,
   textAlign: 'left',
   padding: '0 13px 5px 13px',
   margin: 0,
   overflow: 'hidden',
-});
+}));
 
 TreeHeader.propTypes = {
   children: PropTypes.string.isRequired,
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_style.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_style.js
index f7e8574f55f..14a3f306fb0 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_style.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_style.js
@@ -1,14 +1,13 @@
-import { baseFonts } from '@storybook/components';
-
 const toggleWidth = '24px';
 
 export default {
   tree: {
     base: {
+      color: 'inherit',
       listStyle: 'none',
       margin: 0,
       padding: '5px',
-      fontFamily: baseFonts.fontFamily,
+      fontFamily: 'inherit',
       fontSize: '15px',
       minWidth: '200px',
       marginLeft: '-19px',
@@ -45,7 +44,7 @@ export default {
         width: 10,
         arrow: {
           verticalAlign: 'top',
-          fill: '#9DA5AB',
+          fill: 'currentColor',
         },
       },
       header: {
diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js
index c7d015f94c4..60e10aa8ecf 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js
@@ -21,7 +21,7 @@ const Input = styled('input')(({ theme }) => ({
   boxSizing: 'border-box',
   height: 26,
   background: theme.mainFill,
-  border: theme.mainBorder,
+  border: '0 none',
   outline: 'none',
   borderRadius: 2,
 }));
diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js
index d4beb516191..fe41c794043 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js
@@ -6,7 +6,7 @@ import TextFilter from './text_filter';
 
 const onChange = action('onChange');
 const onClear = action('onClear');
-storiesOf('ui/stories/TextFilter', module)
+storiesOf('UI|stories/TextFilter', module)
   .add('without filterText', () => <TextFilter onChange={onChange} onClear={onClear} />)
   .add('with filterText', () => (
     <TextFilter text="Filter Text" onChange={onChange} onClear={onClear} />
diff --git a/lib/ui/src/modules/ui/configs/handle_routing.js b/lib/ui/src/modules/ui/configs/handle_routing.js
index fb6366b97f8..1b4e1043273 100755
--- a/lib/ui/src/modules/ui/configs/handle_routing.js
+++ b/lib/ui/src/modules/ui/configs/handle_routing.js
@@ -18,7 +18,6 @@ export function getUrlState(data) {
   const { selectedAddonPanel: addonPanel } = data;
 
   const urlObj = {
-    ...customQueryParams,
     selectedKind,
     selectedStory,
     full: Number(full),
@@ -26,6 +25,7 @@ export function getUrlState(data) {
     stories: Number(stories),
     panelRight: Number(panelRight),
     addonPanel,
+    ...customQueryParams,
   };
 
   const url = `?${qs.stringify(urlObj)}`;
diff --git a/lib/ui/src/modules/ui/configs/handle_routing.test.js b/lib/ui/src/modules/ui/configs/handle_routing.test.js
index 2bb1f52a7af..5bf2c83b467 100755
--- a/lib/ui/src/modules/ui/configs/handle_routing.test.js
+++ b/lib/ui/src/modules/ui/configs/handle_routing.test.js
@@ -23,9 +23,6 @@ describe('manager.ui.config.handle_routing', () => {
       const state = {
         selectedKind: 'kk',
         selectedStory: 'ss',
-        customQueryParams: {
-          customText: 'test',
-        },
         shortcutOptions: {
           goFullScreen: false,
           showAddonPanel: true,
@@ -33,12 +30,15 @@ describe('manager.ui.config.handle_routing', () => {
           addonPanelInRight: true,
         },
         selectedAddonPanel: 'pp',
+        customQueryParams: {
+          customText: 'test',
+        },
       };
       const clientStore = {
         getAll: () => state,
       };
       const url =
-        '?customText=test&selectedKind=kk&selectedStory=ss&full=0&addons=1&stories=1&panelRight=1&addonPanel=pp';
+        '?selectedKind=kk&selectedStory=ss&full=0&addons=1&stories=1&panelRight=1&addonPanel=pp&customText=test';
 
       const d = {
         url,
diff --git a/lib/ui/src/modules/ui/containers/addon_panel.js b/lib/ui/src/modules/ui/containers/addon_panel.js
index c7080c368a4..32c20cc4822 100644
--- a/lib/ui/src/modules/ui/containers/addon_panel.js
+++ b/lib/ui/src/modules/ui/containers/addon_panel.js
@@ -14,4 +14,7 @@ export function mapper(state, props, { context, actions }) {
   };
 }
 
-export default compose(genPoddaLoader(mapper))(AddonPanel);
+export default compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+)(AddonPanel);
diff --git a/lib/ui/src/modules/ui/containers/header.js b/lib/ui/src/modules/ui/containers/header.js
index 8199f91713b..28054e3a27d 100755
--- a/lib/ui/src/modules/ui/containers/header.js
+++ b/lib/ui/src/modules/ui/containers/header.js
@@ -34,4 +34,7 @@ export const mapper = (state, props, { actions }) => {
   };
 };
 
-export default compose(genPoddaLoader(mapper))(Header);
+export default compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+)(Header);
diff --git a/lib/ui/src/modules/ui/containers/layout.js b/lib/ui/src/modules/ui/containers/layout.js
index 5f573000908..4e73a45f5d5 100755
--- a/lib/ui/src/modules/ui/containers/layout.js
+++ b/lib/ui/src/modules/ui/containers/layout.js
@@ -4,7 +4,7 @@ import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
 
 export const mapper = state => {
-  const { shortcutOptions, isMobileDevice } = state;
+  const { shortcutOptions, isMobileDevice, uiOptions } = state;
   const currentOptions = pick(
     shortcutOptions,
     'showStoriesPanel',
@@ -16,7 +16,11 @@ export const mapper = state => {
   return {
     ...currentOptions,
     isMobileDevice,
+    ...uiOptions,
   };
 };
 
-export default compose(genPoddaLoader(mapper))(Layout);
+export default compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+)(Layout);
diff --git a/lib/ui/src/modules/ui/containers/routed_link.js b/lib/ui/src/modules/ui/containers/routed_link.js
index c933175a25a..a13795924f6 100644
--- a/lib/ui/src/modules/ui/containers/routed_link.js
+++ b/lib/ui/src/modules/ui/containers/routed_link.js
@@ -12,7 +12,10 @@ export function mapper(state, props) {
   };
 }
 
-const composer = compose(genPoddaLoader(mapper));
+const composer = compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+);
 
 const ComposedMenuLink = composer(MenuLink);
 export { ComposedMenuLink as MenuLink };
diff --git a/lib/ui/src/modules/ui/containers/search_box.js b/lib/ui/src/modules/ui/containers/search_box.js
index cb275adafcc..2d03772323c 100644
--- a/lib/ui/src/modules/ui/containers/search_box.js
+++ b/lib/ui/src/modules/ui/containers/search_box.js
@@ -1,4 +1,4 @@
-import SearchBox from '../components/search_box';
+import SearchBoxComponent from '../components/search_box';
 import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
 
@@ -16,4 +16,7 @@ export const mapper = (state, props, { actions }) => {
   };
 };
 
-export default compose(genPoddaLoader(mapper))(SearchBox);
+export default compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+)(SearchBoxComponent);
diff --git a/lib/ui/src/modules/ui/containers/shortcuts_help.js b/lib/ui/src/modules/ui/containers/shortcuts_help.js
index 09c43e40619..09e6843790d 100755
--- a/lib/ui/src/modules/ui/containers/shortcuts_help.js
+++ b/lib/ui/src/modules/ui/containers/shortcuts_help.js
@@ -1,5 +1,5 @@
 import { window } from 'global';
-import { ShortcutsHelp } from '../components/shortcuts_help';
+import ShortcutsHelp from '../components/shortcuts_help';
 import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
 
@@ -14,4 +14,7 @@ export const mapper = (state, props, { actions }) => {
   return data;
 };
 
-export default compose(genPoddaLoader(mapper))(ShortcutsHelp);
+export default compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+)(ShortcutsHelp);
diff --git a/lib/ui/src/modules/ui/containers/stories_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js
index 300b72e1dea..8609f2b5690 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.js
@@ -69,4 +69,7 @@ export const mapper = (state, props, { actions }) => {
   };
 };
 
-export default compose(genPoddaLoader(mapper))(StoriesPanel);
+export default compose(
+  genPoddaLoader(mapper),
+  { withRef: false }
+)(StoriesPanel);
diff --git a/lib/ui/src/modules/ui/routes.js b/lib/ui/src/modules/ui/routes.js
index 964a36f69ca..b6f5b715d79 100755
--- a/lib/ui/src/modules/ui/routes.js
+++ b/lib/ui/src/modules/ui/routes.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import ReactModal from 'react-modal';
 import Layout from './containers/layout';
 import StoriesPanel from './containers/stories_panel';
@@ -26,9 +27,9 @@ export default function(injectDeps, { clientStore, provider, domNode }) {
         storiesPanel={() => <StoriesPanel />}
         preview={() => <Preview />}
         addonPanel={() => <AddonPanel />}
+        shortcutsHelp={() => <ShortcutsHelp />}
+        searchBox={() => <SearchBox />}
       />
-      <ShortcutsHelp />
-      <SearchBox />
     </Container>
   );
   ReactDOM.render(root, domNode);
diff --git a/package.json b/package.json
index 1a86d627f0c..43a8531a143 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,8 @@
     "lint:ts": "tslint -p . -c tslint.json -t stylish",
     "lint:md": "remark -q",
     "publish": "lerna publish --exact",
+    "publish:stable": "npm run publish -- --concurrency 1 --force-publish=*",
+    "publish:alpha": "npm run publish -- --concurrency 1 --force-publish=* --npm-tag=alpha",
     "postpublish": "yarn --cwd lib/cli test -o",
     "repo-dirty-check": "node ./scripts/repo-dirty-check",
     "start": "npm --prefix examples/official-storybook run storybook",
diff --git a/yarn.lock b/yarn.lock
index e0b88c5d814..d8f12cf1686 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -153,18 +153,18 @@
   dependencies:
     tslib "^1.9.0"
 
-"@babel/code-frame@7.0.0-beta.42":
-  version "7.0.0-beta.42"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz#a9c83233fa7cd06b39dc77adbb908616ff4f1962"
-  dependencies:
-    "@babel/highlight" "7.0.0-beta.42"
-
 "@babel/code-frame@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
   dependencies:
     "@babel/highlight" "7.0.0-beta.44"
 
+"@babel/code-frame@7.0.0-beta.46":
+  version "7.0.0-beta.46"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.46.tgz#e0d002100805daab1461c0fcb32a07e304f3a4f4"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.46"
+
 "@babel/code-frame@^7.0.0-beta.35":
   version "7.0.0-beta.37"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.37.tgz#2da1dd3b1b57bfdea777ddc378df7cd12fe40171"
@@ -210,14 +210,6 @@
   dependencies:
     "@babel/types" "7.0.0-beta.44"
 
-"@babel/highlight@7.0.0-beta.42":
-  version "7.0.0-beta.42"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.42.tgz#a502a1c0d6f99b2b0e81d468a1b0c0e81e3f3623"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 "@babel/highlight@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
@@ -226,6 +218,21 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-beta.46":
+  version "7.0.0-beta.46"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.46.tgz#c553c51e65f572bdedd6eff66fc0bb563016645e"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/runtime@^7.0.0-beta.52":
+  version "7.0.0-beta.52"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.52.tgz#3f3b42b82b92b4e1a283fc78df1bb2fd4ba8d0c7"
+  dependencies:
+    core-js "^2.5.7"
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -295,6 +302,16 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@ndelangen/react-treebeard@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@ndelangen/react-treebeard/-/react-treebeard-2.1.0.tgz#42a65d9b69669051609c0aeac79433e7fec6a8f1"
+  dependencies:
+    babel-runtime "^6.23.0"
+    deep-equal "^1.0.1"
+    prop-types "^15.5.8"
+    shallowequal "^0.2.2"
+    velocity-react "^1.3.1"
+
 "@ngrx/store@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-6.0.1.tgz#02c806ce20c698b997e81f5671e0edc07d32cf86"
@@ -364,33 +381,6 @@
     babel-runtime "^6.11.6"
     immutable "^3.8.1"
 
-"@storybook/react-dev-utils@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dev-utils/-/react-dev-utils-5.0.0.tgz#d33a6baf480a980e135c21ade859632aca20fe78"
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.42"
-    address "1.0.3"
-    browserslist "3.2.0"
-    chalk "2.3.2"
-    cross-spawn "6.0.5"
-    detect-port-alt "1.1.5"
-    escape-string-regexp "1.0.5"
-    filesize "3.6.0"
-    find-pkg "1.0.0"
-    global-modules "1.0.0"
-    globby "8.0.1"
-    gzip-size "4.1.0"
-    inquirer "5.1.0"
-    is-root "1.0.0"
-    opn "5.3.0"
-    pkg-up "2.0.0"
-    react-error-overlay "^4.0.0"
-    recursive-readdir "2.2.2"
-    shell-quote "1.6.1"
-    sockjs-client "1.1.4"
-    strip-ansi "4.0.0"
-    text-table "0.2.0"
-
 "@storybook/react-komposer@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@storybook/react-komposer/-/react-komposer-2.0.3.tgz#f9e12a9586b2ce95c24c137eabb8b71527ddb369"
@@ -486,6 +476,20 @@
   version "2.53.43"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
 
+"@vue/component-compiler-utils@^2.0.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-2.1.0.tgz#8331eadc8acdbc35aace5a61d2153e6f6434bfe2"
+  dependencies:
+    consolidate "^0.15.1"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.2"
+    merge-source-map "^1.1.0"
+    postcss "^6.0.20"
+    postcss-selector-parser "^3.1.1"
+    prettier "^1.13.7"
+    source-map "^0.5.6"
+    vue-template-es2015-compiler "^1.6.0"
+
 "@webassemblyjs/ast@1.4.3":
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.4.3.tgz#3b3f6fced944d8660273347533e6d4d315b5934a"
@@ -1176,10 +1180,6 @@ array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
 
-array-find@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8"
-
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -3127,7 +3127,7 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bowser@^1.0.0, bowser@^1.7.3:
+bowser@^1.7.3:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.1.tgz#f86ef2132e8cb10b3eb6ea5af018758c587020db"
 
@@ -3394,12 +3394,12 @@ browserify@^9.0.3:
     vm-browserify "~0.0.1"
     xtend "^3.0.0"
 
-browserslist@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.0.tgz#3d4a99710c12101e4567c9aeedade49c958cb883"
+browserslist@3.2.6, browserslist@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.6.tgz#138a44d04a9af64443679191d041f28ce5b965d5"
   dependencies:
-    caniuse-lite "^1.0.30000815"
-    electron-to-chromium "^1.3.39"
+    caniuse-lite "^1.0.30000830"
+    electron-to-chromium "^1.3.42"
 
 browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
   version "1.7.7"
@@ -3415,13 +3415,6 @@ browserslist@^2.1.2, browserslist@^2.5.1:
     caniuse-lite "^1.0.30000789"
     electron-to-chromium "^1.3.30"
 
-browserslist@^3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.6.tgz#138a44d04a9af64443679191d041f28ce5b965d5"
-  dependencies:
-    caniuse-lite "^1.0.30000830"
-    electron-to-chromium "^1.3.42"
-
 browserslist@^3.2.8:
   version "3.2.8"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
@@ -3693,10 +3686,6 @@ caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000789:
   version "1.0.30000791"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000791.tgz#8e35745efd483a3e23bb7d350990326d2319fc16"
 
-caniuse-lite@^1.0.30000815:
-  version "1.0.30000820"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000820.tgz#6e36ee75187a2c83d26d6504a1af47cc580324d2"
-
 caniuse-lite@^1.0.30000830:
   version "1.0.30000830"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000830.tgz#cb96b8a2dd3cbfe04acea2af3c4e894249095328"
@@ -3776,9 +3765,9 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+chalk@2.4.1, chalk@^2.3.2, chalk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
   dependencies:
     ansi-styles "^3.2.1"
     escape-string-regexp "^1.0.5"
@@ -3800,14 +3789,6 @@ chalk@^2.3.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.2.0"
 
-chalk@^2.3.2, chalk@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
@@ -4492,9 +4473,9 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
-consolidate@^0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.14.5.tgz#5a25047bc76f73072667c8cb52c989888f494c63"
+consolidate@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
   dependencies:
     bluebird "^3.1.1"
 
@@ -4749,6 +4730,12 @@ copy-paste@^1.3.0:
   optionalDependencies:
     sync-exec "~0.6.x"
 
+copy-to-clipboard@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  dependencies:
+    toggle-selection "^1.0.3"
+
 copy-webpack-plugin@^4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.1.tgz#fc4f68f4add837cc5e13d111b20715793225d29c"
@@ -5468,13 +5455,6 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
-detect-port-alt@1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.5.tgz#a1aa8fc805a4a5df9b905b7ddc7eed036bcce889"
-  dependencies:
-    address "^1.0.1"
-    debug "^2.6.0"
-
 detect-port-alt@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
@@ -5653,21 +5633,21 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^4.1.0:
+dot-prop@^4.1.0, dot-prop@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
   dependencies:
     is-obj "^1.0.0"
 
-dotenv-expand@4.2.0:
+dotenv-expand@4.2.0, dotenv-expand@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
 
-dotenv-webpack@^1.5.6:
-  version "1.5.6"
-  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.5.6.tgz#60146a37ce53b934c85404f689c35cb617371e04"
+dotenv-webpack@^1.5.7:
+  version "1.5.7"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.5.7.tgz#c44395ab21d1fd28d79a90942a7b14b1debd145f"
   dependencies:
-    dotenv "^6.0.0"
+    dotenv "^5.0.1"
 
 dotenv@4.0.0:
   version "4.0.0"
@@ -5759,10 +5739,6 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
   dependencies:
     electron-releases "^2.1.0"
 
-electron-to-chromium@^1.3.39:
-  version "1.3.40"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf"
-
 electron-to-chromium@^1.3.42:
   version "1.3.44"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.44.tgz#ef6b150a60d523082388cadad88085ecd2fd4684"
@@ -6593,7 +6569,7 @@ execon@^1.2.0:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/execon/-/execon-1.2.9.tgz#6db11333dcc824f1f13e7317fed0d94a2f26491f"
 
-exenv@^1.2.0, exenv@^1.2.1:
+exenv@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
 
@@ -6871,6 +6847,10 @@ fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
 
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+
 fast-diff@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
@@ -7007,9 +6987,9 @@ filesize@3.5.11:
   version "3.5.11"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
-filesize@3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.0.tgz#22d079615624bb6fd3c04026120628a41b3f4efa"
+filesize@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -8455,7 +8435,7 @@ hyperlinker@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
 
-hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2:
+hyphenate-style-name@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
 
@@ -8628,13 +8608,6 @@ inline-source-map@~0.5.0:
   dependencies:
     source-map "~0.4.0"
 
-inline-style-prefixer@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
-  dependencies:
-    bowser "^1.0.0"
-    hyphenate-style-name "^1.0.1"
-
 inline-style-prefixer@^3.0.6:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
@@ -8715,10 +8688,6 @@ inquirer@^5.2.0:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-insert-css@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
-
 insert-module-globals@^6.2.0:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-6.6.3.tgz#20638e29a30f9ed1ca2e3a825fbc2cba5246ddfc"
@@ -8738,7 +8707,7 @@ internal-ip@1.2.0:
   dependencies:
     meow "^3.3.0"
 
-interpret@^1.0.0:
+interpret@^1.0.0, interpret@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
@@ -11230,6 +11199,13 @@ lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@~4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -11577,6 +11553,12 @@ merge-dirs@^0.2.1:
     node-fs "~0.1.7"
     path "^0.12.7"
 
+merge-source-map@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
+  dependencies:
+    source-map "^0.6.1"
+
 merge-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
@@ -11956,10 +11938,6 @@ module-deps@^3.7.0:
     through2 "^1.0.0"
     xtend "^4.0.0"
 
-moment@^2.22.2:
-  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
-
 moment@^2.6.0:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
@@ -13437,7 +13415,7 @@ postcss-import@^11.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-load-config@^1.1.0, postcss-load-config@^1.2.0:
+postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
   dependencies:
@@ -13623,6 +13601,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-svgo@^2.1.1:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@@ -13671,7 +13657,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.8, postcss@^6.0.9:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.9:
   version "6.0.16"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
   dependencies:
@@ -13679,6 +13665,14 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.8, postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.1.0"
 
+postcss@^6.0.20:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 postcss@^6.0.22:
   version "6.0.22"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
@@ -13703,9 +13697,9 @@ prettier@^1.13.4:
   version "1.13.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.4.tgz#31bbae6990f13b1093187c731766a14036fa72e6"
 
-prettier@^1.7.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93"
+prettier@^1.13.7:
+  version "1.13.7"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.7.tgz#850f3b8af784a49a6ea2d2eaa7ed1428a34b7281"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -14056,15 +14050,6 @@ quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
 
-radium@^0.19.0:
-  version "0.19.6"
-  resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.6.tgz#b86721d08dbd303b061a4ae2ebb06cc6e335ae72"
-  dependencies:
-    array-find "^1.0.0"
-    exenv "^1.2.1"
-    inline-style-prefixer "^2.0.5"
-    prop-types "^15.5.8"
-
 raf@3.4.0, raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
@@ -14334,6 +14319,33 @@ react-dev-utils@^5.0.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
+react-dev-utils@^6.0.0-next.3e165448:
+  version "6.0.0-next.3e165448"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz#d573ed0ba692f6cee23166f99204e5761df0897c"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.46"
+    address "1.0.3"
+    browserslist "3.2.6"
+    chalk "2.4.1"
+    cross-spawn "6.0.5"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "1.0.5"
+    filesize "3.6.1"
+    find-pkg "1.0.0"
+    global-modules "1.0.0"
+    globby "8.0.1"
+    gzip-size "4.1.0"
+    inquirer "5.1.0"
+    is-root "1.0.0"
+    opn "5.3.0"
+    pkg-up "2.0.0"
+    react-error-overlay "5.0.0-next.3e165448"
+    recursive-readdir "2.2.2"
+    shell-quote "1.6.1"
+    sockjs-client "1.1.4"
+    strip-ansi "4.0.0"
+    text-table "0.2.0"
+
 react-devtools-core@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-3.0.0.tgz#f683e19f0311108f97dbb5b29d948323a1bf7c03"
@@ -14369,6 +14381,10 @@ react-emotion@^9.1.3:
     babel-plugin-emotion "^9.1.2"
     create-emotion-styled "^9.1.2"
 
+react-error-overlay@5.0.0-next.3e165448:
+  version "5.0.0-next.3e165448"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.0.0-next.3e165448.tgz#2cbd10780c1fa9c7e35d6e443773e18948b7ee49"
+
 react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
@@ -14622,17 +14638,6 @@ react-transition-group@^1.1.2:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react-treebeard@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-treebeard/-/react-treebeard-2.1.0.tgz#fbd5cf51089b6f09a9b18350ab3bddf736e57800"
-  dependencies:
-    babel-runtime "^6.23.0"
-    deep-equal "^1.0.1"
-    prop-types "^15.5.8"
-    radium "^0.19.0"
-    shallowequal "^0.2.2"
-    velocity-react "^1.3.1"
-
 react@^16.4.0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
@@ -14961,6 +14966,10 @@ regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
+regenerator-runtime@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.0.tgz#8052ac952d85b10f3425192cd0c53f45cf65c6cb"
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -15277,6 +15286,10 @@ remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
 
+render-fragment@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/render-fragment/-/render-fragment-0.1.1.tgz#b231f259b7eee333d34256aee0ef3169be7bef30"
+
 renderkid@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
@@ -15511,7 +15524,7 @@ resolve@^1.1.3, resolve@^1.1.4, resolve@^1.6.0:
   dependencies:
     path-parse "^1.0.5"
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.3.2, resolve@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
   dependencies:
@@ -17325,6 +17338,10 @@ to-vfile@^2.0.0:
     is-buffer "^1.1.4"
     vfile "^2.0.0"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+
 toposort@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
@@ -17816,6 +17833,16 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
   dependencies:
     unist-util-is "^2.1.1"
 
+universal-dotenv@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/universal-dotenv/-/universal-dotenv-1.8.0.tgz#200764f704d7a516bb564253b5c1b77eb7802e3d"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.52"
+    app-root-dir "^1.0.2"
+    core-js "^2.5.7"
+    dotenv "^6.0.0"
+    dotenv-expand "^4.2.0"
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -18175,27 +18202,19 @@ vue-class-component@^6.0.0:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.1.2.tgz#87ac0265b0db71a3f49f10d90e4f69f9be9c2fbd"
 
-vue-hot-reload-api@^2.2.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"
+vue-hot-reload-api@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
-vue-loader@^14.2.3:
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.2.3.tgz#3b39645c322d956e287d8d36eb77475f78c9b8e0"
+vue-loader@15.x.x, vue-loader@^15.2.4:
+  version "15.2.6"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.2.6.tgz#4ad4e56a0ca1fd89ebc4220f9e3bd4723097b397"
   dependencies:
-    consolidate "^0.14.0"
+    "@vue/component-compiler-utils" "^2.0.0"
     hash-sum "^1.0.2"
     loader-utils "^1.1.0"
-    lru-cache "^4.1.1"
-    postcss "^6.0.8"
-    postcss-load-config "^1.1.0"
-    postcss-selector-parser "^2.0.0"
-    prettier "^1.7.0"
-    resolve "^1.4.0"
-    source-map "^0.6.1"
-    vue-hot-reload-api "^2.2.0"
-    vue-style-loader "^4.0.1"
-    vue-template-es2015-compiler "^1.6.0"
+    vue-hot-reload-api "^2.3.0"
+    vue-style-loader "^4.1.0"
 
 vue-property-decorator@6.0.0:
   version "6.0.0"
@@ -18204,9 +18223,9 @@ vue-property-decorator@6.0.0:
     reflect-metadata "^0.1.10"
     vue-class-component "^6.0.0"
 
-vue-style-loader@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.0.2.tgz#e89aa4702a0c6b9630d8de70b1cbddb06b9ad254"
+vue-style-loader@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.1.tgz#7c1d051b24f60b1707602b549ed50b4c8111d316"
   dependencies:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"