diff --git a/.flowconfig b/.flowconfig
index 4d3c4156a..70147c54f 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -15,5 +15,6 @@ flow/*
 [lints]
 
 [options]
+module.system=haste
 
 [strict]
diff --git a/.npmignore b/.npmignore
index a1e232436..4113df8b1 100644
--- a/.npmignore
+++ b/.npmignore
@@ -12,4 +12,4 @@ storybook-static
 bit.json
 yarn-error.log
 bundle-stats.html
-__mocks__
+**/__mocks__/**
diff --git a/.prettierrc b/.prettierrc
index 3a9157a16..119babf0e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,10 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "semi": true,
-  "bracketSpacing": true,
-  "printWidth": 70,
-  "parser": "flow",
-  "jsxBracketSameLine": false,
-  "arrowParens": "avoid"
+  "printWidth": 70
 }
diff --git a/README.md b/README.md
index d1d6ad236..f0b677f90 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,5 @@ Make sure read our [contributing guide](https://github.com/GSS-FED/vital-ui-kit-
 
 - docs
 - layout
-- box
 - Table(page, checkbox, input, header)
 - Calendar
diff --git a/packages/web/assets/img/card-header-pic.png b/assets/card-header-pic.png
similarity index 100%
rename from packages/web/assets/img/card-header-pic.png
rename to assets/card-header-pic.png
diff --git a/flow-typed/npm/jest_v23.x.x.js b/flow-typed/npm/jest_v23.x.x.js
index 8e874b0e4..653840adb 100644
--- a/flow-typed/npm/jest_v23.x.x.js
+++ b/flow-typed/npm/jest_v23.x.x.js
@@ -1,5 +1,5 @@
-// flow-typed signature: 82fb70c15e3aa0c1468144425703425e
-// flow-typed version: bf845eee3a/jest_v23.x.x/flow_>=v0.39.x
+// flow-typed signature: bc9e644ba43fa1c4d1fccc5fd47f65e9
+// flow-typed version: d37e775f89/jest_v23.x.x/flow_>=v0.39.x
 
 type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
   (...args: TArguments): TReturn,
@@ -483,7 +483,7 @@ type JestExtendedMatchersType = {
     toIncludeMultiple(substring: string[]): void;
 };
 
-type JestExpectType = {
+interface JestExpectType {
   not: JestExpectType & EnzymeMatchersType & DomTestingLibraryType & JestJQueryMatchersType & JestExtendedMatchersType,
   /**
    * If you have a mock function, you can use .lastCalledWith to test what
@@ -637,9 +637,13 @@ type JestExpectType = {
    */
   toMatchObject(object: Object | Array<Object>): void,
   /**
-   * This ensures that a React component matches the most recent snapshot.
+   * This ensures that an Object matches the most recent snapshot.
    */
   toMatchSnapshot(propertyMatchers?: {[key: string]: JestAsymmetricEqualityType}, name?: string): void,
+  /**
+   * This ensures that an Object matches the most recent snapshot.
+   */
+  toMatchSnapshot(name: string): void,
   /**
    * Use .toThrow to test that a function throws when it is called.
    * If you want to test that a specific error gets thrown, you can provide an
@@ -655,7 +659,7 @@ type JestExpectType = {
    * matching the most recent snapshot when it is called.
    */
   toThrowErrorMatchingSnapshot(): void
-};
+}
 
 type JestObjectType = {
   /**
diff --git a/package.json b/package.json
index 08b21184a..8cc616441 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "playground"
     ],
     "nohoist": [
       "**/react-native",
@@ -19,9 +20,7 @@
       "**/react-native-*",
       "**/react-native-*/**",
       "**/react-native-vector-icons",
-      "**/react-native-vector-icons/**",
-      "**/styled-components",
-      "**/styled-components/**"
+      "**/react-native-vector-icons/**"
     ]
   },
   "scripts": {
@@ -34,11 +33,11 @@
     "build": "npm-run-all clean:build --parallel build:esm build:cjs build:flow",
     "clean:build": "rm -rf packages/web/dist",
     "prebuild:web": "yarn clean:build",
-    "storybook:web": "cd packages/web && start-storybook -p 6006",
-    "build-storybook:web": "cd packages/web && build-storybook",
+    "storybook:web": "cd packages/playground && start-storybook -p 6006",
+    "build-storybook:web": "cd packages/playground && build-storybook",
     "storybook:native": "cd packages/native && yarn run storybook",
     "dev:ios": "cd packages/native && yarn run ios",
-    "test:web": "cd packages/web && jest",
+    "test:web": "cd packages/playground && jest",
     "flow-typed": "rm -rf flow-typed && flow-typed install -s",
     "flow": "flow check",
     "format": "prettier --write '**/**.{js,jsx}'",
diff --git a/packages/web/.storybook/.babelrc b/packages/playground/.storybook/.babelrc
similarity index 100%
rename from packages/web/.storybook/.babelrc
rename to packages/playground/.storybook/.babelrc
diff --git a/packages/web/.storybook/addons.js b/packages/playground/.storybook/addons.js
similarity index 100%
rename from packages/web/.storybook/addons.js
rename to packages/playground/.storybook/addons.js
diff --git a/packages/web/.storybook/config.js b/packages/playground/.storybook/config.js
similarity index 76%
rename from packages/web/.storybook/config.js
rename to packages/playground/.storybook/config.js
index de2e38512..5e1e24687 100644
--- a/packages/web/.storybook/config.js
+++ b/packages/playground/.storybook/config.js
@@ -1,16 +1,23 @@
+import { injectGlobal } from 'styled-components';
 import { configure, addDecorator } from '@storybook/react';
 import React from 'react';
 import { setDefaults } from '@storybook/addon-info';
 import { setOptions } from '@storybook/addon-options';
 
-import { ThemeProvider } from '../src/base';
+import { ThemeProvider } from '@gssfed/vital-ui-kit-react';
 
-import '../src/base/global.css';
+import '@gssfed/vital-ui-kit-react/dist/base/global.css';
 
 function loadStories() {
   req.keys().forEach(filename => req(filename));
 }
 
+injectGlobal`
+  #root {
+    padding: 20px;
+  }
+`;
+
 setOptions({
   hierarchySeparator: /\//,
   hierarchyRootSeparator: /\|/,
@@ -41,5 +48,5 @@ setOptions({
 
 addDecorator(story => <ThemeProvider>{story()}</ThemeProvider>);
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.stories.jsx$/);
+const req = require.context('../../', true, /.stories.jsx$/);
 configure(loadStories, module);
diff --git a/packages/web/.storybook/manager-head.html b/packages/playground/.storybook/manager-head.html
similarity index 100%
rename from packages/web/.storybook/manager-head.html
rename to packages/playground/.storybook/manager-head.html
diff --git a/packages/playground/.storybook/storyshots.test.js b/packages/playground/.storybook/storyshots.test.js
new file mode 100644
index 000000000..003e93fcc
--- /dev/null
+++ b/packages/playground/.storybook/storyshots.test.js
@@ -0,0 +1,33 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import initStoryshots, {
+  multiSnapshotWithOptions,
+} from '@storybook/addon-storyshots';
+import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
+import { addSerializer } from 'jest-specific-snapshot'
+import { Table, SimpleTable } from '../../table/src';
+
+/**
+ * Mock methods of addon-info so that "Show Info" button don't go into snapshots.
+ * https://github.com/storybooks/storybook/issues/1011#issuecomment-322698049
+ */
+jest.mock('@storybook/addon-info', () => ({
+  withInfo: () => storyFn => storyFn,
+  setDefaults: () => {},
+}));
+
+/**
+ * Add custom serializer in order to work with multiSnapShot
+ * https://github.com/storybooks/storybook/issues/887#issuecomment-357073807
+ */
+addSerializer(styleSheetSerializer);
+
+initStoryshots({
+  test: multiSnapshotWithOptions({
+    createNodeMock: (element) => {
+      if (element.type === Table || SimpleTable ) {
+        return document.createElement('div')
+      }
+    },
+  })
+});
diff --git a/packages/playground/.storybook/webpack.config.js b/packages/playground/.storybook/webpack.config.js
new file mode 100644
index 000000000..59532cc74
--- /dev/null
+++ b/packages/playground/.storybook/webpack.config.js
@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = (baseConfig, env, defaultConfig) => {
+  // Extend defaultConfig as you need.
+  const appFolder = path.resolve(__dirname, '../../../');
+  // Include other packages becase it is out of scope.
+  defaultConfig.module.rules.forEach(rule => {
+    if ('.jsx'.match(rule.test)) {
+      if (rule.include) {
+        rule.include.push(path.resolve(__dirname, '../../table/src'))
+        rule.include.push(path.resolve(__dirname, '../../web/src'))
+      }
+      if (rule.exclude) {
+        rule.exclude.push(path.resolve(__dirname, '../../table/node_modules'))
+        rule.exclude.push(path.resolve(__dirname, '../../web/node_modules'))
+      }      
+    }
+    defaultConfig.resolve.alias = {
+      ...defaultConfig.resolve.alias,
+      'styled-components': path.resolve(appFolder, 'node_modules', 'styled-components'),
+    }
+  });
+
+  return defaultConfig;
+};
diff --git a/packages/web/__mocks__/fileMock.js b/packages/playground/__mocks__/fileMock.js
similarity index 100%
rename from packages/web/__mocks__/fileMock.js
rename to packages/playground/__mocks__/fileMock.js
diff --git a/packages/web/__mocks__/styleMock.js b/packages/playground/__mocks__/styleMock.js
similarity index 100%
rename from packages/web/__mocks__/styleMock.js
rename to packages/playground/__mocks__/styleMock.js
diff --git a/packages/playground/package.json b/packages/playground/package.json
new file mode 100644
index 000000000..287d16a90
--- /dev/null
+++ b/packages/playground/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@gssfed/playground",
+  "version": "0.0.1",
+  "description": "gssfed playground",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "test": "NODE_ENV='test' jest",
+    "start": "start-storybook -p 6006"
+  },
+  "author": "Eric Yip (https://github.com/ericyip)",
+  "license": "MIT",
+  "devDependencies": {
+    "@storybook/react": "3.4.6",
+    "babel-plugin-styled-components": "1.5.1"
+  },
+  "dependencies": {
+    "faker": "^4.1.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx$": "babel-jest",
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.md?$": "markdown-loader-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
+  }
+}
diff --git a/packages/web/stories/Container/Filter.js b/packages/playground/stories/Container/Filter.jsx
similarity index 91%
rename from packages/web/stories/Container/Filter.js
rename to packages/playground/stories/Container/Filter.jsx
index ceee91275..4c1a2dfbd 100644
--- a/packages/web/stories/Container/Filter.js
+++ b/packages/playground/stories/Container/Filter.jsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
-import { FieldInput, Input } from '../../src';
+import { FieldInput, Input } from '../../../web/src';
 
 const Wrapper = styled.div`
   display: flex;
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
 `;
 
 type P = {
-  children: (value: string) => React.ReactNode,
+  children: (value: string) => React.Node,
 };
 
 type S = {
@@ -46,7 +46,7 @@ class Filter extends React.PureComponent<P, S> {
       });
   }
 
-  onInputChange = e => {
+  onInputChange = (e: any) => {
     e.persist();
     const { value } = e.target;
     this.setState({ filterValue: value });
diff --git a/packages/web/stories/Container/LoadData.js b/packages/playground/stories/Container/LoadData.jsx
similarity index 100%
rename from packages/web/stories/Container/LoadData.js
rename to packages/playground/stories/Container/LoadData.jsx
diff --git a/packages/web/stories/Container/Section.js b/packages/playground/stories/Container/Section.jsx
similarity index 54%
rename from packages/web/stories/Container/Section.js
rename to packages/playground/stories/Container/Section.jsx
index 7841daaa7..80e4b835f 100644
--- a/packages/web/stories/Container/Section.js
+++ b/packages/playground/stories/Container/Section.jsx
@@ -1,14 +1,17 @@
-import React from 'react';
+// @flow
+/* eslint-disable import/no-extraneous-dependencies */
+
+import * as React from 'react';
 import styled from 'styled-components';
 
-import { Box } from '../../src';
+import { Box } from '../../../web/src';
 
 const SectionTitle = styled.div`
   font-size: 32px;
   padding-bottom: 10px;
 `;
 
-const Section = ({ title, children }) => (
+const Section = ({ title, children }: { title: string, children: React.Node }) => (
   <Box paddingTop="20px" paddingBottom="30px">
     <SectionTitle>{title}</SectionTitle>
     {children}
diff --git a/packages/web/stories/Overview.stories.jsx b/packages/playground/stories/Overview.stories.jsx
similarity index 98%
rename from packages/web/stories/Overview.stories.jsx
rename to packages/playground/stories/Overview.stories.jsx
index 5a678b426..5cd5eb2fe 100644
--- a/packages/web/stories/Overview.stories.jsx
+++ b/packages/playground/stories/Overview.stories.jsx
@@ -17,7 +17,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Avatar, Card, Button, ButtonGroup, Icon } from '../src';
+import { Avatar, Card, Button, ButtonGroup, Icon } from '../../web/src';
 import Section from './Container/Section';
 
 const AVATAR = [
diff --git a/packages/playground/stories/Table.stories.jsx b/packages/playground/stories/Table.stories.jsx
new file mode 100644
index 000000000..9af115def
--- /dev/null
+++ b/packages/playground/stories/Table.stories.jsx
@@ -0,0 +1,116 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-use-before-define */
+
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import { withInfo } from '@storybook/addon-info';
+import centered from '@storybook/addon-centered';
+import {
+  withKnobs,
+  text,
+  boolean,
+  number,
+  select,
+} from '@storybook/addon-knobs/react';
+import { withNotes } from '@storybook/addon-notes';
+import faker from 'faker';
+import {
+  SimpleTable,
+  Column,
+  Table,
+  defaultCellRenderer,
+} from '../../table/src';
+import { AutoSizer, SortDirection } from 'react-virtualized';
+
+// Table data as an array of objects
+const list = new Array(100).fill(true).map(() => ({
+  name: faker.name.findName(),
+  description: faker.name.jobTitle(),
+  location: faker.address.city(),
+}));
+
+storiesOf('Table', module)
+  .addDecorator(withKnobs)
+  // .addDecorator(centered)
+  .add(
+    'AutoResize',
+    withInfo()(() => (
+      <div
+        style={{
+          width: '100%',
+          height: '300px',
+        }}
+      >
+        <AutoSizer>
+          {({ width, height }) => (
+            <SimpleTable
+              hasVerticalBorder
+              hasHorizontalBorder
+              width={width}
+              height={height}
+              rowCount={list.length}
+              rowGetter={({ index }) => list[index]}
+            >
+              <Column dataKey="name" label="Name" width={width / 3} />
+              <Column
+                dataKey="location"
+                label="Location"
+                width={width / 3}
+              />
+              <Column
+                dataKey="description"
+                label="Description"
+                width={width / 3}
+              />
+            </SimpleTable>
+          )}
+        </AutoSizer>
+      </div>
+    )),
+  )
+  .add(
+    'Fixed column',
+    withInfo()(() => (
+      <div style={{
+        width: '500px',
+        height: '400px',
+        }}
+      >
+        <AutoSizer>
+          {({ width, height }) => (
+            <Table
+              hasVerticalBorder
+              hasHorizontalBorder
+              width={width}
+              height={height}
+              rowCount={list.length}
+              sort={sort}
+              cellRenderer={defaultCellRenderer(list)}
+            >
+              <Column dataKey="name" label="Name" width={200} fixed />
+              <Column
+                dataKey="location"
+                label="Location"
+                width={100}
+              />
+              <Column
+                dataKey="description"
+                label="Description"
+                width={300}
+              />
+            </Table>
+          )}
+        </AutoSizer>
+      </div>
+    )),
+  );
+
+function sort({ sortBy, sortDirection }) {
+  console.log('====================================');
+  console.log(sortBy, sortDirection);
+  console.log('====================================');
+}
diff --git a/packages/web/stories/Theme.stories.jsx b/packages/playground/stories/Theme.stories.jsx
similarity index 97%
rename from packages/web/stories/Theme.stories.jsx
rename to packages/playground/stories/Theme.stories.jsx
index 0b0b05f9d..2dcba6386 100644
--- a/packages/web/stories/Theme.stories.jsx
+++ b/packages/playground/stories/Theme.stories.jsx
@@ -3,7 +3,6 @@
 
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import axios from 'axios';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
@@ -21,7 +20,7 @@ import {
   colorPaletteGenerator,
   defaultTheme,
   defaultComponentsTheme,
-} from '../src/base';
+} from '../../web/src';
 
 const Root = styled.div`
   text-align: center;
diff --git a/packages/playground/stories/__snapshots__/Overview.stories.storyshot b/packages/playground/stories/__snapshots__/Overview.stories.storyshot
new file mode 100644
index 000000000..2ea528bc6
--- /dev/null
+++ b/packages/playground/stories/__snapshots__/Overview.stories.storyshot
@@ -0,0 +1,2729 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Getting Started Overview 1`] = `
+.c7 {
+  position: absolute;
+  background-color: #EB5000;
+  color: #ffffff;
+  vertical-align: middle;
+  height: 9px;
+  line-height: 9px;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 0;
+  width: 9px;
+  height: 9px;
+  right: calc(9px / -2);
+  top: 0;
+  left: 70%;
+  right: auto;
+}
+
+.c7:before {
+  content: '';
+  position: absolute;
+  top: calc(50% - (3px / 2));
+  left: calc(50% - (3px / 2));
+  background: #fff;
+  border-radius: 50%;
+  width: 3px;
+  height: 3px;
+}
+
+.c10 {
+  position: absolute;
+  background-color: #EB5000;
+  color: #ffffff;
+  vertical-align: middle;
+  height: 17px;
+  line-height: 17px;
+  padding: 0 5px;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  left: 70%;
+  right: auto;
+  top: 0;
+}
+
+.c3 {
+  position: relative;
+  display: inline-block;
+}
+
+.c4 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #F0F0F0;
+  box-sizing: border-box;
+}
+
+.c5 {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #F0F0F0;
+  box-sizing: border-box;
+}
+
+.c6 {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #F0F0F0;
+  box-sizing: border-box;
+}
+
+.c8 {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #F0F0F0;
+  box-sizing: border-box;
+}
+
+.c9 {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background-color: #F0F0F0;
+  box-sizing: border-box;
+}
+
+.c11 > button:not(:last-child) {
+  margin-right: 10px;
+}
+
+.c11 > button {
+  display: inline-block;
+}
+
+.c40 > button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.c40 > button {
+  display: inline-block;
+}
+
+.c12 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+}
+
+.c12:hover {
+  background: #D8E3F6;
+}
+
+.c12:active {
+  background: #C4D2EB;
+}
+
+.c12:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c12[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+  color: #456297;
+}
+
+.c13:hover {
+  background: #D8E3F6;
+}
+
+.c13:active {
+  background: #C4D2EB;
+}
+
+.c13:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c13:hover {
+  color: #5b7ab4;
+}
+
+.c13[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+}
+
+.c14:hover {
+  background: #D8E3F6;
+}
+
+.c14:active {
+  background: #C4D2EB;
+}
+
+.c14:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c14:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c14[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+  color: #456297;
+}
+
+.c15:hover {
+  background: #D8E3F6;
+}
+
+.c15:active {
+  background: #C4D2EB;
+}
+
+.c15:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c15:hover {
+  color: #5b7ab4;
+}
+
+.c15:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c15[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c16:hover {
+  background: #D8E3F6;
+}
+
+.c16:active {
+  background: #C4D2EB;
+}
+
+.c16[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c17 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c17:hover {
+  background: #D8E3F6;
+}
+
+.c17:active {
+  background: #C4D2EB;
+}
+
+.c17[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18 {
+  position: relative;
+  background: #F7F9FE;
+  color: #2BCD86;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c18:hover {
+  background: #D8E3F6;
+}
+
+.c18:active {
+  background: #C4D2EB;
+}
+
+.c18[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19 {
+  position: relative;
+  background: #F7F9FE;
+  color: #00C3FF;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c19:hover {
+  background: #D8E3F6;
+}
+
+.c19:active {
+  background: #C4D2EB;
+}
+
+.c19[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20 {
+  position: relative;
+  background: #F7F9FE;
+  color: #EB5000;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c20:hover {
+  background: #D8E3F6;
+}
+
+.c20:active {
+  background: #C4D2EB;
+}
+
+.c20[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21 {
+  position: relative;
+  background: #F7F9FE;
+  color: #FFB400;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c21:hover {
+  background: #D8E3F6;
+}
+
+.c21:active {
+  background: #C4D2EB;
+}
+
+.c21[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c22 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+}
+
+.c22:hover {
+  background: #D8E3F6;
+}
+
+.c22:active {
+  background: #C4D2EB;
+}
+
+.c22:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c22:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c22[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c23:hover {
+  background: #D8E3F6;
+}
+
+.c23:active {
+  background: #C4D2EB;
+}
+
+.c23:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c23:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c23[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24 {
+  position: relative;
+  background: #F7F9FE;
+  color: #2BCD86;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #2BCD86;
+  color: #ffffff;
+  border-color: #2BCD86;
+}
+
+.c24:hover {
+  background: #D8E3F6;
+}
+
+.c24:active {
+  background: #C4D2EB;
+}
+
+.c24:hover {
+  background: #51da9e;
+  border-color: #51da9e;
+}
+
+.c24:active {
+  background: #209a65;
+  border-color: #209a65;
+}
+
+.c24[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c25 {
+  position: relative;
+  background: #F7F9FE;
+  color: #00C3FF;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #00C3FF;
+  color: #ffffff;
+  border-color: #00C3FF;
+}
+
+.c25:hover {
+  background: #D8E3F6;
+}
+
+.c25:active {
+  background: #C4D2EB;
+}
+
+.c25:hover {
+  background: #33cfff;
+  border-color: #33cfff;
+}
+
+.c25:active {
+  background: #0094c2;
+  border-color: #0094c2;
+}
+
+.c25[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c26 {
+  position: relative;
+  background: #F7F9FE;
+  color: #EB5000;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EB5000;
+  color: #ffffff;
+  border-color: #EB5000;
+}
+
+.c26:hover {
+  background: #D8E3F6;
+}
+
+.c26:active {
+  background: #C4D2EB;
+}
+
+.c26:hover {
+  background: #ff6b1f;
+  border-color: #ff6b1f;
+}
+
+.c26:active {
+  background: #ae3b00;
+  border-color: #ae3b00;
+}
+
+.c26[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c27 {
+  position: relative;
+  background: #F7F9FE;
+  color: #FFB400;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #FFB400;
+  color: #ffffff;
+  border-color: #FFB400;
+}
+
+.c27:hover {
+  background: #D8E3F6;
+}
+
+.c27:active {
+  background: #C4D2EB;
+}
+
+.c27:hover {
+  background: #ffc333;
+  border-color: #ffc333;
+}
+
+.c27:active {
+  background: #c28900;
+  border-color: #c28900;
+}
+
+.c27[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c28 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #456297;
+  border: 1px solid transparent;
+}
+
+.c28:hover {
+  background: #D8E3F6;
+}
+
+.c28:active {
+  background: #C4D2EB;
+}
+
+.c28:hover {
+  background: #D8E3F6;
+}
+
+.c28[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c29 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+}
+
+.c29:hover {
+  background: #D8E3F6;
+}
+
+.c29:active {
+  background: #C4D2EB;
+}
+
+.c29:hover {
+  background: #D8E3F6;
+}
+
+.c29[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c30 {
+  position: relative;
+  background: #F7F9FE;
+  color: #2BCD86;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #2BCD86;
+  border: 1px solid transparent;
+}
+
+.c30:hover {
+  background: #D8E3F6;
+}
+
+.c30:active {
+  background: #C4D2EB;
+}
+
+.c30:hover {
+  background: #D8E3F6;
+}
+
+.c30[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c31 {
+  position: relative;
+  background: #F7F9FE;
+  color: #00C3FF;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #00C3FF;
+  border: 1px solid transparent;
+}
+
+.c31:hover {
+  background: #D8E3F6;
+}
+
+.c31:active {
+  background: #C4D2EB;
+}
+
+.c31:hover {
+  background: #D8E3F6;
+}
+
+.c31[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c32 {
+  position: relative;
+  background: #F7F9FE;
+  color: #EB5000;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #EB5000;
+  border: 1px solid transparent;
+}
+
+.c32:hover {
+  background: #D8E3F6;
+}
+
+.c32:active {
+  background: #C4D2EB;
+}
+
+.c32:hover {
+  background: #D8E3F6;
+}
+
+.c32[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c33 {
+  position: relative;
+  background: #F7F9FE;
+  color: #FFB400;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #FFB400;
+  border: 1px solid transparent;
+}
+
+.c33:hover {
+  background: #D8E3F6;
+}
+
+.c33:active {
+  background: #C4D2EB;
+}
+
+.c33:hover {
+  background: #D8E3F6;
+}
+
+.c33[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c34 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #456297;
+}
+
+.c34:hover {
+  background: #D8E3F6;
+}
+
+.c34:active {
+  background: #C4D2EB;
+}
+
+.c34:hover {
+  background: #D8E3F6;
+}
+
+.c34[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c35 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #0E86FE;
+}
+
+.c35:hover {
+  background: #D8E3F6;
+}
+
+.c35:active {
+  background: #C4D2EB;
+}
+
+.c35:hover {
+  background: #D8E3F6;
+}
+
+.c35[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c36 {
+  position: relative;
+  background: #F7F9FE;
+  color: #2BCD86;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #2BCD86;
+}
+
+.c36:hover {
+  background: #D8E3F6;
+}
+
+.c36:active {
+  background: #C4D2EB;
+}
+
+.c36:hover {
+  background: #D8E3F6;
+}
+
+.c36[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c37 {
+  position: relative;
+  background: #F7F9FE;
+  color: #00C3FF;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #00C3FF;
+}
+
+.c37:hover {
+  background: #D8E3F6;
+}
+
+.c37:active {
+  background: #C4D2EB;
+}
+
+.c37:hover {
+  background: #D8E3F6;
+}
+
+.c37[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c38 {
+  position: relative;
+  background: #F7F9FE;
+  color: #EB5000;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #EB5000;
+}
+
+.c38:hover {
+  background: #D8E3F6;
+}
+
+.c38:active {
+  background: #C4D2EB;
+}
+
+.c38:hover {
+  background: #D8E3F6;
+}
+
+.c38[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c39 {
+  position: relative;
+  background: #F7F9FE;
+  color: #FFB400;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #FFB400;
+}
+
+.c39:hover {
+  background: #D8E3F6;
+}
+
+.c39:active {
+  background: #C4D2EB;
+}
+
+.c39:hover {
+  background: #D8E3F6;
+}
+
+.c39[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c41 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1.4rem;
+  border-radius: 6px;
+  padding: calc(0.8rem - 1px) 1.333rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.8rem - 1px) 1.333rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c41:hover {
+  background: #D8E3F6;
+}
+
+.c41:active {
+  background: #C4D2EB;
+}
+
+.c41:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c41:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c41[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c42 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1.2rem;
+  border-radius: 5px;
+  padding: calc(0.666rem - 1px) 1.2rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.666rem - 1px) 1.2rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c42:hover {
+  background: #D8E3F6;
+}
+
+.c42:active {
+  background: #C4D2EB;
+}
+
+.c42:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c42:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c42[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c43 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 0.866rem;
+  border-radius: 3px;
+  padding: calc(0.4rem - 1px) 0.8rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.4rem - 1px) 0.8rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c43:hover {
+  background: #D8E3F6;
+}
+
+.c43:active {
+  background: #C4D2EB;
+}
+
+.c43:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c43:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c43[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c44 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 0.8rem;
+  border-radius: 2px;
+  padding: calc(0.2rem - 1px) 0.533rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.2rem - 1px) 0.533rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c44:hover {
+  background: #D8E3F6;
+}
+
+.c44:active {
+  background: #C4D2EB;
+}
+
+.c44:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c44:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c44[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c45 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 0.8rem;
+  border-radius: 2px;
+  padding: calc(0.2rem - 1px) 0.533rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.2rem - 1px) 0.533rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+}
+
+.c45:hover {
+  background: #D8E3F6;
+}
+
+.c45:active {
+  background: #C4D2EB;
+}
+
+.c45:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c45:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c45[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c46 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 0.866rem;
+  border-radius: 3px;
+  padding: calc(0.4rem - 1px) 0.8rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.4rem - 1px) 0.8rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+}
+
+.c46:hover {
+  background: #D8E3F6;
+}
+
+.c46:active {
+  background: #C4D2EB;
+}
+
+.c46:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c46:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c46[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c47 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1.2rem;
+  border-radius: 5px;
+  padding: calc(0.666rem - 1px) 1.2rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.666rem - 1px) 1.2rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+}
+
+.c47:hover {
+  background: #D8E3F6;
+}
+
+.c47:active {
+  background: #C4D2EB;
+}
+
+.c47:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c47:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c47[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c48 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1.4rem;
+  border-radius: 6px;
+  padding: calc(0.8rem - 1px) 1.333rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.8rem - 1px) 1.333rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+}
+
+.c48:hover {
+  background: #D8E3F6;
+}
+
+.c48:active {
+  background: #C4D2EB;
+}
+
+.c48:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c48:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c48[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  padding-top: 20px;
+  padding-bottom: 30px;
+}
+
+.c51 {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  color: #456297;
+  font-size: 0.93333rem;
+  overflow-x: hidden;
+}
+
+.c52 {
+  table-layout: fixed;
+  display: table;
+  width: 100%;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  border-top: 1px solid #D8E3F6;
+  min-height: 50px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.c53 {
+  position: relative;
+  height: 50px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c53:not(:last-child):after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: #D8E3F6;
+}
+
+.c54 {
+  padding: 0 10px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  line-height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #0E86FE;
+}
+
+.c54:hover {
+  background-color: #D8E3F6;
+}
+
+.c50 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  box-sizing: border-box;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: none;
+  width: 300px;
+  height: auto;
+  border: 1px solid #D8E3F6;
+}
+
+.c1 {
+  font-size: 32px;
+  padding-bottom: 10px;
+}
+
+.c2 {
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.c49 {
+  margin-bottom: 10px;
+}
+
+<div>
+  <div
+    className="c0"
+    style={null}
+  >
+    <div
+      className="c1"
+    >
+      Avatar
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+        style={null}
+      >
+        <img
+          className="c4"
+          size="xsmall"
+          src="test-file-stub"
+          style={null}
+        />
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+        style={null}
+      >
+        <img
+          className="c5"
+          size="small"
+          src="test-file-stub"
+          style={null}
+        />
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+        style={null}
+      >
+        <img
+          className="c6"
+          size="medium"
+          src="test-file-stub"
+          style={null}
+        />
+        <span
+          className="c7"
+          label={10}
+          size="medium"
+          style={null}
+        />
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+        style={null}
+      >
+        <img
+          className="c8"
+          size="large"
+          src="test-file-stub"
+          style={null}
+        />
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+        style={null}
+      >
+        <img
+          className="c9"
+          size="xlarge"
+          src="test-file-stub"
+          style={null}
+        />
+        <span
+          className="c10"
+          label={100}
+          size="xlarge"
+          style={null}
+        >
+          99+
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0"
+    style={null}
+  >
+    <div
+      className="c1"
+    >
+      Button
+    </div>
+    <div
+      className="c11"
+      style={
+        Object {
+          "paddingBottom": "20px",
+        }
+      }
+    >
+      <button
+        className="c12"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Link
+      </button>
+      <button
+        className="c13"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Dark Link
+      </button>
+      <button
+        className="c14"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Link underline
+      </button>
+      <button
+        className="c15"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Dark Link underline
+      </button>
+    </div>
+    <div
+      className="c11"
+      style={
+        Object {
+          "paddingBottom": "20px",
+        }
+      }
+    >
+      <button
+        className="c16"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        default
+      </button>
+      <button
+        className="c17"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        primary
+      </button>
+      <button
+        className="c18"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        success
+      </button>
+      <button
+        className="c19"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        info
+      </button>
+      <button
+        className="c20"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        alarm
+      </button>
+      <button
+        className="c21"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        warning
+      </button>
+    </div>
+    <div
+      className="c11"
+      style={
+        Object {
+          "paddingBottom": "20px",
+        }
+      }
+    >
+      <button
+        className="c22"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        flat
+      </button>
+      <button
+        className="c23"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        primary
+      </button>
+      <button
+        className="c24"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        success
+      </button>
+      <button
+        className="c25"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        info
+      </button>
+      <button
+        className="c26"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        alarm
+      </button>
+      <button
+        className="c27"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        warning
+      </button>
+    </div>
+    <div
+      className="c11"
+      style={
+        Object {
+          "paddingBottom": "20px",
+        }
+      }
+    >
+      <button
+        className="c28"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        subtle
+      </button>
+      <button
+        className="c29"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        primary
+      </button>
+      <button
+        className="c30"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        success
+      </button>
+      <button
+        className="c31"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        info
+      </button>
+      <button
+        className="c32"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        alarm
+      </button>
+      <button
+        className="c33"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        warning
+      </button>
+    </div>
+    <div
+      className="c11"
+      style={
+        Object {
+          "paddingBottom": "20px",
+        }
+      }
+    >
+      <button
+        className="c34"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        light
+      </button>
+      <button
+        className="c35"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        primary
+      </button>
+      <button
+        className="c36"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        success
+      </button>
+      <button
+        className="c37"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        info
+      </button>
+      <button
+        className="c38"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        alarm
+      </button>
+      <button
+        className="c39"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        warning
+      </button>
+    </div>
+    <div
+      className="c40"
+      style={null}
+    >
+      <button
+        className="c41"
+        onClick={[Function]}
+        selected={false}
+        size="xlarge"
+        style={null}
+      >
+        xlarge
+      </button>
+      <button
+        className="c42"
+        onClick={[Function]}
+        selected={false}
+        size="large"
+        style={null}
+      >
+        large
+      </button>
+      <button
+        className="c23"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        medium
+      </button>
+      <button
+        className="c43"
+        onClick={[Function]}
+        selected={false}
+        size="small"
+        style={null}
+      >
+        small
+      </button>
+      <button
+        className="c44"
+        onClick={[Function]}
+        selected={false}
+        size="xsmall"
+        style={null}
+      >
+        xsmall
+      </button>
+    </div>
+    <div
+      className="c40"
+      style={null}
+    >
+      <button
+        className="c45"
+        onClick={[Function]}
+        selected={false}
+        size="xsmall"
+        style={null}
+      >
+        xsmall
+      </button>
+      <button
+        className="c46"
+        onClick={[Function]}
+        selected={false}
+        size="small"
+        style={null}
+      >
+        small
+      </button>
+      <button
+        className="c22"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        medium
+      </button>
+      <button
+        className="c47"
+        onClick={[Function]}
+        selected={false}
+        size="large"
+        style={null}
+      >
+        large
+      </button>
+      <button
+        className="c48"
+        onClick={[Function]}
+        selected={false}
+        size="xlarge"
+        style={null}
+      >
+        xlarge
+      </button>
+    </div>
+  </div>
+  <div
+    className="c0"
+    style={null}
+  >
+    <div
+      className="c1"
+    >
+      Card
+    </div>
+    <div
+      className="c49"
+    >
+      <div
+        className="c50"
+        height="auto"
+        width="300px"
+      >
+        <div
+          className="c51"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <svg
+            height="90"
+            onClick={[Function]}
+            viewBox="0 0 914.2857142857142 1024"
+            width="90"
+          >
+            <path
+              d="M146.286 768c0-20-16.571-36.571-36.571-36.571-20.571 0-36.571 16.571-36.571 36.571 0 20.571 16 36.571 36.571 36.571 20 0 36.571-16 36.571-36.571zM237.714 475.429v365.714c0 20-16.571 36.571-36.571 36.571h-164.571c-20 0-36.571-16.571-36.571-36.571v-365.714c0-20 16.571-36.571 36.571-36.571h164.571c20 0 36.571 16.571 36.571 36.571zM914.286 475.429c0 30.286-12 62.857-31.429 85.143 6.286 18.286 8.571 35.429 8.571 43.429 1.143 28.571-7.429 55.429-24.571 78.286 6.286 21.143 6.286 44 0 66.857-5.714 21.143-16.571 40-30.857 53.714 3.429 42.857-6.286 77.714-28 103.429-24.571 29.143-62.286 44-112.571 44.571h-73.714c-81.714 0-158.857-26.857-220.571-48-36-12.571-70.286-24.571-90.286-25.143-19.429-0.571-36.571-16.571-36.571-36.571v-366.286c0-18.857 16-34.857 34.857-36.571 21.143-1.714 76-69.714 101.143-102.857 20.571-26.286 40-50.857 57.714-68.571 22.286-22.286 28.571-56.571 35.429-89.714 6.286-33.714 13.143-69.143 37.714-93.143 6.857-6.857 16-10.857 25.714-10.857 128 0 128 102.286 128 146.286 0 46.857-16.571 80-32 109.714-6.286 12.571-12 18.286-16.571 36.571h158.286c59.429 0 109.714 50.286 109.714 109.714z"
+              fill="#0e86fe"
+            />
+          </svg>
+          <div
+            style={
+              Object {
+                "color": "#456297",
+                "fontSize": "1.25rem",
+                "lineHeight": "1.5rem",
+                "overflow": "hidden",
+                "paddingTop": "1.25rem",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              }
+            }
+          >
+            Congrats
+          </div>
+          <div
+            style={
+              Object {
+                "fontSize": "0.93333rem",
+                "lineHeight": "1.25rem",
+                "paddingTop": "10px",
+              }
+            }
+          >
+            Let’s Get Started
+          </div>
+        </div>
+        <div
+          className="c52"
+        >
+          <div
+            className="c53"
+          >
+            <button
+              className="c54"
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Getting Started Theme 1`] = `
+.c0 {
+  text-align: center;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 10px;
+}
+
+.c2 {
+  width: 40px;
+  height: 40px;
+}
+
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": 0,
+      "display": "flex",
+      "justifyContent": "center",
+      "left": 0,
+      "overflow": "auto",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+      }
+    }
+  >
+    <div
+      className="c0"
+    >
+      <input
+        onChange={[Function]}
+        type="color"
+        value="#0E86FE"
+      />
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#d9ecff",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#a6d3ff",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#74b9fe",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#41a0fe",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#0E86FE",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#016dd8",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#0153a5",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#003a73",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#002040",
+            }
+          }
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#f7fbfe",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#eef5fc",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#d8e7f6",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#c4d8eb",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#95b5d4",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#7193b6",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#456e97",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#2a557f",
+            }
+          }
+        />
+        <div
+          className="c2"
+          style={
+            Object {
+              "background": "#1e4368",
+            }
+          }
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/playground/stories/__snapshots__/Table.stories.storyshot b/packages/playground/stories/__snapshots__/Table.stories.storyshot
new file mode 100644
index 000000000..d907694f7
--- /dev/null
+++ b/packages/playground/stories/__snapshots__/Table.stories.storyshot
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Table AutoResize 1`] = `
+.c0 {
+  color: #456297;
+  font-weight: 500;
+  border-bottom: 1px solid #D8e3f6;
+}
+
+.c1 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+<div
+  style={
+    Object {
+      "height": "300px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "height": 0,
+        "overflow": "visible",
+        "width": 0,
+      }
+    }
+  >
+    <div
+      className="ReactVirtualized__Table "
+      role="grid"
+      style={Object {}}
+    >
+      <div
+        className="ReactVirtualized__Table__headerRow c0"
+        role="row"
+        style={
+          Object {
+            "height": 40,
+            "overflow": "hidden",
+            "paddingRight": 0,
+            "width": 0,
+          }
+        }
+      >
+        <div
+          className="ReactVirtualized__Table__headerColumn"
+          role="columnheader"
+          style={
+            Object {
+              "WebkitFlex": "0 1 0px",
+              "flex": "0 1 0px",
+              "msFlex": "0 1 0px",
+            }
+          }
+        >
+          <span
+            className="ReactVirtualized__Table__headerTruncatedText c1"
+            title="Name"
+          >
+            Name
+          </span>
+        </div>
+        <div
+          className="ReactVirtualized__Table__headerColumn"
+          role="columnheader"
+          style={
+            Object {
+              "WebkitFlex": "0 1 0px",
+              "flex": "0 1 0px",
+              "msFlex": "0 1 0px",
+            }
+          }
+        >
+          <span
+            className="ReactVirtualized__Table__headerTruncatedText c1"
+            title="Location"
+          >
+            Location
+          </span>
+        </div>
+        <div
+          className="ReactVirtualized__Table__headerColumn"
+          role="columnheader"
+          style={
+            Object {
+              "WebkitFlex": "0 1 0px",
+              "flex": "0 1 0px",
+              "msFlex": "0 1 0px",
+            }
+          }
+        >
+          <span
+            className="ReactVirtualized__Table__headerTruncatedText c1"
+            title="Description"
+          >
+            Description
+          </span>
+        </div>
+      </div>
+      <div
+        aria-label="grid"
+        aria-readonly={true}
+        className="ReactVirtualized__Grid ReactVirtualized__Table__Grid"
+        onScroll={[Function]}
+        role="rowgroup"
+        style={
+          Object {
+            "WebkitOverflowScrolling": "touch",
+            "boxSizing": "border-box",
+            "direction": "ltr",
+            "height": -40,
+            "overflowX": "hidden",
+            "overflowY": "auto",
+            "position": "relative",
+            "width": 0,
+            "willChange": "transform",
+          }
+        }
+        tabIndex={0}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Fixed column 1`] = `
+<div
+  style={
+    Object {
+      "height": "400px",
+      "width": "500px",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "height": 0,
+        "overflow": "visible",
+        "width": 0,
+      }
+    }
+  >
+    <div
+      className="ReactVirtualized__Table"
+      role="grid"
+      style={Object {}}
+    />
+  </div>
+</div>
+`;
diff --git a/packages/web/stories/examples/Avatar.stories.jsx b/packages/playground/stories/examples/Avatar.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Avatar.stories.jsx
rename to packages/playground/stories/examples/Avatar.stories.jsx
index 877203e41..98bcaf107 100644
--- a/packages/web/stories/examples/Avatar.stories.jsx
+++ b/packages/playground/stories/examples/Avatar.stories.jsx
@@ -15,7 +15,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Avatar } from '../../src';
+import { Avatar } from '../../../web/src';
 
 storiesOf('Components | Avatar', module)
   .addDecorator(withKnobs)
diff --git a/packages/web/stories/examples/Box.stories.jsx b/packages/playground/stories/examples/Box.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Box.stories.jsx
rename to packages/playground/stories/examples/Box.stories.jsx
index bdb3d95c0..3f9b07c01 100644
--- a/packages/web/stories/examples/Box.stories.jsx
+++ b/packages/playground/stories/examples/Box.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Box } from '../../src';
+import { Box } from '../../../web/src';
 
 const ColorBox = styled(Box)`
   background-clip: content-box, padding-box;
diff --git a/packages/web/stories/examples/Button.stories.jsx b/packages/playground/stories/examples/Button.stories.jsx
similarity index 95%
rename from packages/web/stories/examples/Button.stories.jsx
rename to packages/playground/stories/examples/Button.stories.jsx
index 383405f48..cf9f4acae 100644
--- a/packages/web/stories/examples/Button.stories.jsx
+++ b/packages/playground/stories/examples/Button.stories.jsx
@@ -19,17 +19,8 @@ import {
 import { withNotes } from '@storybook/addon-notes';
 import { Welcome } from '@storybook/react/demo';
 
-import { Button, Icon, ButtonGroup } from '../../src';
+import { Button, Icon, ButtonGroup } from '../../../web/src';
 
-injectGlobal`
-  #root {
-    padding: 20px;
-  }
-`;
-
-// storiesOf('Welcome', module).add('to Storybook', () => (
-//   <Welcome showApp={linkTo('Button')} />
-// ));
 
 storiesOf('Components | Button', module)
   .addDecorator(withKnobs)
diff --git a/packages/web/stories/examples/Card.stories.jsx b/packages/playground/stories/examples/Card.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Card.stories.jsx
rename to packages/playground/stories/examples/Card.stories.jsx
index 4e77a2abd..3a3755165 100644
--- a/packages/web/stories/examples/Card.stories.jsx
+++ b/packages/playground/stories/examples/Card.stories.jsx
@@ -15,8 +15,8 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Card, ButtonGroup, Button, Icon } from '../../src';
-import heroImage from '../../assets/img/card-header-pic.png';
+import { Card, ButtonGroup, Button, Icon } from '../../../web/src';
+import heroImage from '../../../../assets/card-header-pic.png';
 
 const content =
   'Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.';
diff --git a/packages/web/stories/examples/Checkbox.stories.jsx b/packages/playground/stories/examples/Checkbox.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Checkbox.stories.jsx
rename to packages/playground/stories/examples/Checkbox.stories.jsx
index 9d1cb47b9..1a1b596de 100644
--- a/packages/web/stories/examples/Checkbox.stories.jsx
+++ b/packages/playground/stories/examples/Checkbox.stories.jsx
@@ -15,7 +15,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Checkbox, CheckboxGroup } from '../../src';
+import { Checkbox, CheckboxGroup } from '../../../web/src';
 
 storiesOf('Components | Checkbox', module)
   .addDecorator(withKnobs)
diff --git a/packages/web/stories/examples/Form.stories.jsx b/packages/playground/stories/examples/Form.stories.jsx
similarity index 99%
rename from packages/web/stories/examples/Form.stories.jsx
rename to packages/playground/stories/examples/Form.stories.jsx
index 1b7fc8136..e323edeea 100644
--- a/packages/web/stories/examples/Form.stories.jsx
+++ b/packages/playground/stories/examples/Form.stories.jsx
@@ -29,7 +29,7 @@ import {
   Icon,
   Button,
   Select,
-} from '../../src';
+} from '../../../web/src';
 
 const FormWrapper = styled.div`
   max-width: 500px;
@@ -207,6 +207,7 @@ storiesOf('Components | Form/Input', module)
       withNotes('This is basic input style')(() => (
         <FormWrapper>
           <Input
+            value="123"
             placeholder={text('Placeholder', 'Controlled Input')}
             isDisabled={boolean('Disabled', false)}
             isAlarm={boolean('Alarm', false)}
diff --git a/packages/web/stories/examples/Icon.stories.jsx b/packages/playground/stories/examples/Icon.stories.jsx
similarity index 93%
rename from packages/web/stories/examples/Icon.stories.jsx
rename to packages/playground/stories/examples/Icon.stories.jsx
index fde9f8566..c0bf83909 100644
--- a/packages/web/stories/examples/Icon.stories.jsx
+++ b/packages/playground/stories/examples/Icon.stories.jsx
@@ -15,10 +15,9 @@ import {
   select,
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
+import { Icon, Tooltip } from '../../../web/src';
 
-import defaultIcon from '../../src/Icon/selection.json';
-import Icon from '../../src/Icon';
-import Tooltip from '../../src/Tooltip';
+import defaultIcon from '../../../web/src/Icon/selection.json';
 import Filter from '../Container/Filter';
 
 const Display = styled.div`
diff --git a/packages/web/stories/examples/Layout.stories.jsx b/packages/playground/stories/examples/Layout.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Layout.stories.jsx
rename to packages/playground/stories/examples/Layout.stories.jsx
index f07390634..ab81358f2 100644
--- a/packages/web/stories/examples/Layout.stories.jsx
+++ b/packages/playground/stories/examples/Layout.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Layout } from '../../src';
+import { Layout } from '../../../web/src';
 
 storiesOf('Components | Layout', module).add(
   'Basic',
diff --git a/packages/web/stories/examples/List.stories.jsx b/packages/playground/stories/examples/List.stories.jsx
similarity index 99%
rename from packages/web/stories/examples/List.stories.jsx
rename to packages/playground/stories/examples/List.stories.jsx
index 45ab461ac..769c037f9 100644
--- a/packages/web/stories/examples/List.stories.jsx
+++ b/packages/playground/stories/examples/List.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { List } from '../../src';
+import { List } from '../../../web/src';
 
 const Display = styled.div`
   padding: 20px;
diff --git a/packages/web/stories/examples/Menu.stories.jsx b/packages/playground/stories/examples/Menu.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Menu.stories.jsx
rename to packages/playground/stories/examples/Menu.stories.jsx
index 7743543a0..4850a7b13 100644
--- a/packages/web/stories/examples/Menu.stories.jsx
+++ b/packages/playground/stories/examples/Menu.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Menu, Icon } from '../../src';
+import { Menu, Icon } from '../../../web/src';
 
 const MenuIcon = styled(Icon)`
   margin-right: 10px;
diff --git a/packages/web/stories/examples/Modal.stories.jsx b/packages/playground/stories/examples/Modal.stories.jsx
similarity index 97%
rename from packages/web/stories/examples/Modal.stories.jsx
rename to packages/playground/stories/examples/Modal.stories.jsx
index 1a2dc2180..908b59c8a 100644
--- a/packages/web/stories/examples/Modal.stories.jsx
+++ b/packages/playground/stories/examples/Modal.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Modal, Card, Button } from '../../src';
+import { Modal, Card, Button } from '../../../web/src';
 
 const items = [
   {
diff --git a/packages/web/stories/examples/Pagination.stories.jsx b/packages/playground/stories/examples/Pagination.stories.jsx
similarity index 95%
rename from packages/web/stories/examples/Pagination.stories.jsx
rename to packages/playground/stories/examples/Pagination.stories.jsx
index 160a503c8..37b3e7a8d 100644
--- a/packages/web/stories/examples/Pagination.stories.jsx
+++ b/packages/playground/stories/examples/Pagination.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Pagination } from '../../src';
+import { Pagination } from '../../../web/src';
 
 const items = [
   {
diff --git a/packages/web/stories/examples/Pill.stories.jsx b/packages/playground/stories/examples/Pill.stories.jsx
similarity index 95%
rename from packages/web/stories/examples/Pill.stories.jsx
rename to packages/playground/stories/examples/Pill.stories.jsx
index 2bbef1dcf..3e090b8a6 100644
--- a/packages/web/stories/examples/Pill.stories.jsx
+++ b/packages/playground/stories/examples/Pill.stories.jsx
@@ -15,7 +15,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Pill } from '../../src';
+import { Pill } from '../../../web/src';
 
 storiesOf('Components | Pill', module)
   .addDecorator(withKnobs)
diff --git a/packages/web/stories/examples/ProgressBar.stories.jsx b/packages/playground/stories/examples/ProgressBar.stories.jsx
similarity index 95%
rename from packages/web/stories/examples/ProgressBar.stories.jsx
rename to packages/playground/stories/examples/ProgressBar.stories.jsx
index ae068bbb7..288bd48f4 100644
--- a/packages/web/stories/examples/ProgressBar.stories.jsx
+++ b/packages/playground/stories/examples/ProgressBar.stories.jsx
@@ -15,7 +15,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { ProgressBar } from '../../src';
+import { ProgressBar } from '../../../web/src';
 
 storiesOf('Components | ProgressBar', module)
   .addDecorator(withKnobs)
diff --git a/packages/web/stories/examples/Radio.stories.jsx b/packages/playground/stories/examples/Radio.stories.jsx
similarity index 95%
rename from packages/web/stories/examples/Radio.stories.jsx
rename to packages/playground/stories/examples/Radio.stories.jsx
index 61d721d0c..710fb8864 100644
--- a/packages/web/stories/examples/Radio.stories.jsx
+++ b/packages/playground/stories/examples/Radio.stories.jsx
@@ -15,7 +15,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { RadioGroup } from '../../src';
+import { RadioGroup } from '../../../web/src';
 
 const items = [
   { name: 'color', value: 'red', label: 'Red' },
diff --git a/packages/web/stories/examples/Slider.stories.jsx b/packages/playground/stories/examples/Slider.stories.jsx
similarity index 93%
rename from packages/web/stories/examples/Slider.stories.jsx
rename to packages/playground/stories/examples/Slider.stories.jsx
index 202c4cc53..40db8da7e 100644
--- a/packages/web/stories/examples/Slider.stories.jsx
+++ b/packages/playground/stories/examples/Slider.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Slider, Button, Select } from '../../src';
+import { Slider, Button, Select } from '../../../web/src';
 
 const items = [
   {
@@ -64,16 +64,16 @@ storiesOf('Components | Slider', module)
           max={100}
           min={0}
           step={10}
-          decreaseButton={
+          decreaseButton={(
             <Button size="small" circle flat>
               -
             </Button>
-          }
-          increaseButton={
+)}
+          increaseButton={(
             <Button size="small" circle flat>
               +
             </Button>
-          }
+)}
         />
       )),
     ),
diff --git a/packages/web/stories/examples/Switch.stories.jsx b/packages/playground/stories/examples/Switch.stories.jsx
similarity index 96%
rename from packages/web/stories/examples/Switch.stories.jsx
rename to packages/playground/stories/examples/Switch.stories.jsx
index 73ab39574..425e5faa1 100644
--- a/packages/web/stories/examples/Switch.stories.jsx
+++ b/packages/playground/stories/examples/Switch.stories.jsx
@@ -15,7 +15,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Switch } from '../../src';
+import { Switch } from '../../../web/src';
 
 storiesOf('Components | Switch', module)
   .addDecorator(withKnobs)
diff --git a/packages/web/stories/examples/Tabs.stories.jsx b/packages/playground/stories/examples/Tabs.stories.jsx
similarity index 99%
rename from packages/web/stories/examples/Tabs.stories.jsx
rename to packages/playground/stories/examples/Tabs.stories.jsx
index 653047c95..b9480b901 100644
--- a/packages/web/stories/examples/Tabs.stories.jsx
+++ b/packages/playground/stories/examples/Tabs.stories.jsx
@@ -16,7 +16,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Tabs, Badge } from '../../src';
+import { Tabs, Badge } from '../../../web/src';
 
 storiesOf('Components | Tab', module)
   .addDecorator(withKnobs)
diff --git a/packages/playground/stories/examples/__snapshots__/Avatar.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Avatar.stories.storyshot
new file mode 100644
index 000000000..00644ab53
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Avatar.stories.storyshot
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Avatar Basic 1`] = `
+.c2 {
+  position: absolute;
+  background-color: #EB5000;
+  color: #ffffff;
+  vertical-align: middle;
+  height: 9px;
+  line-height: 9px;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 0;
+  width: 9px;
+  height: 9px;
+  right: calc(9px / -2);
+  top: calc(9px / -2);
+  left: auto;
+  right: NaN;
+}
+
+.c2:before {
+  content: '';
+  position: absolute;
+  top: calc(50% - (3px / 2));
+  left: calc(50% - (3px / 2));
+  background: #fff;
+  border-radius: 50%;
+  width: 3px;
+  height: 3px;
+}
+
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+.c1 {
+  width: 32px;
+  height: 32px;
+  border-radius: 3px;
+  background-color: #F0F0F0;
+  box-sizing: border-box;
+}
+
+<div
+  className="c0"
+  style={null}
+>
+  <img
+    className="c1"
+    size="medium"
+    src="test-file-stub"
+    style={null}
+  />
+  <span
+    className="c2"
+    label="99+"
+    size="medium"
+    style={null}
+  />
+</div>
+`;
diff --git a/packages/playground/stories/examples/__snapshots__/Box.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Box.stories.storyshot
new file mode 100644
index 000000000..c4039b436
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Box.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Box Basic 1`] = `
+.c1 {
+  padding: 20px;
+}
+
+.c0 {
+  background-clip: content-box,padding-box;
+  background-image: linear-gradient( to bottom, rgba(240,255,40,1) 0%, rgba(240,255,40,1) 100% ), linear-gradient( to bottom, rgba(240,40,40,1) 0%, rgba(240,40,40,1) 100% );
+}
+
+<div
+  className="c0 c1"
+  style={null}
+>
+  This is a box!
+</div>
+`;
diff --git a/packages/playground/stories/examples/__snapshots__/Button.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Button.stories.storyshot
new file mode 100644
index 000000000..525a32ab3
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Button.stories.storyshot
@@ -0,0 +1,502 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Button ButtonGroup 1`] = `
+.c0 > button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.c0 > button {
+  display: inline-block;
+}
+
+.c1 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:hover {
+  background: #D8E3F6;
+}
+
+.c1:active {
+  background: #C4D2EB;
+}
+
+.c1[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<div
+  className="c0"
+  style={null}
+>
+  <button
+    className="c1"
+    onClick={[Function]}
+    selected={false}
+    size="medium"
+    style={null}
+  >
+    Button
+  </button>
+  <button
+    className="c1"
+    onClick={[Function]}
+    selected={false}
+    size="medium"
+    style={null}
+  >
+    Button
+  </button>
+  <button
+    className="c1"
+    onClick={[Function]}
+    selected={false}
+    size="medium"
+    style={null}
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Storyshots Components | Button Circular style 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0;
+  border-radius: 100%;
+  width: 2.066rem;
+  line-height: 2.066rem;
+  height: 2.066rem;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  <svg
+    height={16}
+    onClick={[Function]}
+    viewBox="0 0 804.5714285714286 1024"
+    width={16}
+  >
+    <path
+      d="M804.571 420.571v109.714c0 30.286-24.571 54.857-54.857 54.857h-237.714v237.714c0 30.286-24.571 54.857-54.857 54.857h-109.714c-30.286 0-54.857-24.571-54.857-54.857v-237.714h-237.714c-30.286 0-54.857-24.571-54.857-54.857v-109.714c0-30.286 24.571-54.857 54.857-54.857h237.714v-237.714c0-30.286 24.571-54.857 54.857-54.857h109.714c30.286 0 54.857 24.571 54.857 54.857v237.714h237.714c30.286 0 54.857 24.571 54.857 54.857z"
+      fill="#3b5998"
+    />
+  </svg>
+</button>
+`;
+
+exports[`Storyshots Components | Button Default 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Default Button
+</button>
+`;
+
+exports[`Storyshots Components | Button Disable 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  disabled={true}
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Disable Button
+</button>
+`;
+
+exports[`Storyshots Components | Button Flat 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c0:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Flat Button
+</button>
+`;
+
+exports[`Storyshots Components | Button Light 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #ffffff;
+  color: #456297;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Light Button
+</button>
+`;
+
+exports[`Storyshots Components | Button Link 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Link Button
+</button>
+`;
+
+exports[`Storyshots Components | Button Subtle 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #456297;
+  border: 1px solid transparent;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Subtle Button
+</button>
+`;
diff --git a/packages/playground/stories/examples/__snapshots__/Card.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Card.stories.storyshot
new file mode 100644
index 000000000..f3901ed1a
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Card.stories.storyshot
@@ -0,0 +1,1009 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Card Default Full Button type 1`] = `
+.c4 {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  background-color: #00C3FF;
+  color: #ffffff;
+}
+
+.c1 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #D8E3F6;
+  color: #456297;
+  font-size: 1.25rem;
+  min-height: 50px;
+  display: table;
+  width: 100%;
+}
+
+.c2 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c3 {
+  width: 60px;
+  text-align: right;
+}
+
+.c5 {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  color: #456297;
+  font-size: 0.93333rem;
+  overflow-x: hidden;
+}
+
+.c6 {
+  table-layout: fixed;
+  display: table;
+  width: 100%;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  border-top: 1px solid #D8E3F6;
+  min-height: 50px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.c7 {
+  position: relative;
+  height: 50px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c7:not(:last-child):after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: #D8E3F6;
+}
+
+.c9 {
+  padding: 0 10px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  line-height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #0E86FE;
+}
+
+.c9:hover {
+  background-color: #D8E3F6;
+}
+
+.c8 {
+  padding: 0 10px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  line-height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #456297;
+}
+
+.c8:hover {
+  background-color: #D8E3F6;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  box-sizing: border-box;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: none;
+  width: 300px;
+  height: 220px;
+  border: 1px solid #D8E3F6;
+}
+
+<div
+  className="c0"
+  height="220px"
+  width="300px"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      style={null}
+    >
+      Title
+    </div>
+    <div
+      className="c3 c2"
+    >
+      <span
+        className="c4"
+      >
+        99+
+      </span>
+    </div>
+  </div>
+  <div
+    className="c5"
+  >
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+  </div>
+  <div
+    className="c6"
+  >
+    <div
+      className="c7"
+    >
+      <button
+        className="c8"
+      >
+        Cancel
+      </button>
+    </div>
+    <div
+      className="c7"
+    >
+      <button
+        className="c9"
+      >
+        Confirm
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Card Hero Image 1`] = `
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #D8E3F6;
+  color: #456297;
+  font-size: 1.25rem;
+  min-height: 50px;
+  display: table;
+  width: 100%;
+}
+
+.c1 {
+  min-height: 183px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: #dddddd;
+  background-size: cover;
+  border-bottom: 1px solid #D8E3F6;
+  color: #ffffff;
+  background-image: url(test-file-stub);
+}
+
+.c1 > h4 {
+  position: absolute;
+  bottom: 0;
+  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
+  font-size: 1.424rem;
+  font-weight: normal;
+  margin-top: 1.424em;
+  margin-bottom: 1.424em;
+}
+
+.c3 {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  color: #456297;
+  font-size: 0.93333rem;
+  overflow-x: hidden;
+}
+
+.c4 {
+  table-layout: fixed;
+  display: table;
+  width: 100%;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  border-top: 1px solid #D8E3F6;
+  min-height: 50px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.c5 {
+  position: relative;
+  height: 50px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c5:not(:last-child):after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: #D8E3F6;
+}
+
+.c7 {
+  padding: 0 10px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  line-height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #0E86FE;
+}
+
+.c7:hover {
+  background-color: #D8E3F6;
+}
+
+.c6 {
+  padding: 0 10px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  line-height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #456297;
+}
+
+.c6:hover {
+  background-color: #D8E3F6;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  box-sizing: border-box;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: none;
+  width: 300px;
+  height: 400px;
+  border: 1px solid #D8E3F6;
+}
+
+<div
+  className="c0"
+  height="400px"
+  width="300px"
+>
+  <div
+    className="c1 c2"
+  >
+    <h4
+      style={null}
+    >
+      Title
+    </h4>
+  </div>
+  <div
+    className="c3"
+  >
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+  </div>
+  <div
+    className="c4"
+  >
+    <div
+      className="c5"
+    >
+      <button
+        className="c6"
+      >
+        Cancel
+      </button>
+    </div>
+    <div
+      className="c5"
+    >
+      <button
+        className="c7"
+      >
+        Confirm
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Card With Flat Button 1`] = `
+.c5 > button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.c5 > button {
+  display: inline-block;
+}
+
+.c6 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c6:hover {
+  background: #D8E3F6;
+}
+
+.c6:active {
+  background: #C4D2EB;
+}
+
+.c6[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c7:hover {
+  background: #D8E3F6;
+}
+
+.c7:active {
+  background: #C4D2EB;
+}
+
+.c7:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c7:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c7[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c1 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #D8E3F6;
+  color: #456297;
+  font-size: 1.25rem;
+  min-height: 50px;
+  display: table;
+  width: 100%;
+}
+
+.c2 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c3 {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  color: #456297;
+  font-size: 0.93333rem;
+  overflow-x: hidden;
+}
+
+.c4 {
+  table-layout: fixed;
+  display: table;
+  width: 100%;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  border-top: 1px solid #D8E3F6;
+  min-height: 50px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  box-sizing: border-box;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: none;
+  width: 300px;
+  height: 220px;
+  border: 1px solid #D8E3F6;
+}
+
+<div
+  className="c0"
+  height="220px"
+  width="300px"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      style={null}
+    >
+      Title
+    </div>
+  </div>
+  <div
+    className="c3"
+  >
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+  </div>
+  <div
+    className="c4"
+  >
+    <div
+      className="c5"
+      style={
+        Object {
+          "padding": 10,
+        }
+      }
+    >
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Cancel
+      </button>
+      <button
+        className="c7"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Confirm
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Card With Icon 1`] = `
+.c1 {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  color: #456297;
+  font-size: 0.93333rem;
+  overflow-x: hidden;
+}
+
+.c2 {
+  table-layout: fixed;
+  display: table;
+  width: 100%;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  border-top: 1px solid #D8E3F6;
+  min-height: 50px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.c3 {
+  position: relative;
+  height: 50px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c3:not(:last-child):after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: #D8E3F6;
+}
+
+.c4 {
+  padding: 0 10px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  line-height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #0E86FE;
+}
+
+.c4:hover {
+  background-color: #D8E3F6;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  box-sizing: border-box;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: none;
+  width: 300px;
+  height: auto;
+  border: 1px solid #D8E3F6;
+}
+
+<div
+  className="c0"
+  height="auto"
+  width="300px"
+>
+  <div
+    className="c1"
+    style={
+      Object {
+        "textAlign": "center",
+      }
+    }
+  >
+    <svg
+      height="90"
+      onClick={[Function]}
+      viewBox="0 0 914.2857142857142 1024"
+      width="90"
+    >
+      <path
+        d="M146.286 768c0-20-16.571-36.571-36.571-36.571-20.571 0-36.571 16.571-36.571 36.571 0 20.571 16 36.571 36.571 36.571 20 0 36.571-16 36.571-36.571zM237.714 475.429v365.714c0 20-16.571 36.571-36.571 36.571h-164.571c-20 0-36.571-16.571-36.571-36.571v-365.714c0-20 16.571-36.571 36.571-36.571h164.571c20 0 36.571 16.571 36.571 36.571zM914.286 475.429c0 30.286-12 62.857-31.429 85.143 6.286 18.286 8.571 35.429 8.571 43.429 1.143 28.571-7.429 55.429-24.571 78.286 6.286 21.143 6.286 44 0 66.857-5.714 21.143-16.571 40-30.857 53.714 3.429 42.857-6.286 77.714-28 103.429-24.571 29.143-62.286 44-112.571 44.571h-73.714c-81.714 0-158.857-26.857-220.571-48-36-12.571-70.286-24.571-90.286-25.143-19.429-0.571-36.571-16.571-36.571-36.571v-366.286c0-18.857 16-34.857 34.857-36.571 21.143-1.714 76-69.714 101.143-102.857 20.571-26.286 40-50.857 57.714-68.571 22.286-22.286 28.571-56.571 35.429-89.714 6.286-33.714 13.143-69.143 37.714-93.143 6.857-6.857 16-10.857 25.714-10.857 128 0 128 102.286 128 146.286 0 46.857-16.571 80-32 109.714-6.286 12.571-12 18.286-16.571 36.571h158.286c59.429 0 109.714 50.286 109.714 109.714z"
+        fill="#0e86fe"
+      />
+    </svg>
+    <div
+      style={
+        Object {
+          "color": "#456297",
+          "fontSize": "1.25rem",
+          "lineHeight": "1.5rem",
+          "overflow": "hidden",
+          "paddingTop": "1.25rem",
+          "textOverflow": "ellipsis",
+          "whiteSpace": "nowrap",
+          "width": "100%",
+        }
+      }
+    >
+      Congrats
+    </div>
+    <div
+      style={
+        Object {
+          "fontSize": "0.93333rem",
+          "lineHeight": "1.25rem",
+          "paddingTop": "10px",
+        }
+      }
+    >
+      Let’s Get Started
+    </div>
+  </div>
+  <div
+    className="c2"
+  >
+    <div
+      className="c3"
+    >
+      <button
+        className="c4"
+      >
+        Confirm
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Card With Link Button 1`] = `
+.c5 > button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.c5 > button {
+  display: inline-block;
+}
+
+.c6 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+}
+
+.c6:hover {
+  background: #D8E3F6;
+}
+
+.c6:active {
+  background: #C4D2EB;
+}
+
+.c6:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c6[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #0E86FE;
+  border: 1px solid transparent;
+}
+
+.c7:hover {
+  background: #D8E3F6;
+}
+
+.c7:active {
+  background: #C4D2EB;
+}
+
+.c7:hover {
+  background: transparent;
+  color: #41a0fe;
+}
+
+.c7[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c1 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #D8E3F6;
+  color: #456297;
+  font-size: 1.25rem;
+  min-height: 50px;
+  display: table;
+  width: 100%;
+}
+
+.c2 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c3 {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  color: #456297;
+  font-size: 0.93333rem;
+  overflow-x: hidden;
+}
+
+.c4 {
+  table-layout: fixed;
+  display: table;
+  width: 100%;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  border-top: 1px solid #D8E3F6;
+  min-height: 50px;
+  overflow: hidden;
+  vertical-align: middle;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: auto;
+  box-sizing: border-box;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: none;
+  width: 300px;
+  height: 220px;
+  border: 1px solid #D8E3F6;
+}
+
+<div
+  className="c0"
+  height="220px"
+  width="300px"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      style={null}
+    >
+      Title
+    </div>
+  </div>
+  <div
+    className="c3"
+  >
+    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
+  </div>
+  <div
+    className="c4"
+  >
+    <div
+      className="c5"
+      style={
+        Object {
+          "padding": 10,
+        }
+      }
+    >
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Cancel
+      </button>
+      <button
+        className="c7"
+        onClick={[Function]}
+        selected={false}
+        size="medium"
+        style={null}
+      >
+        Confirm
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/web/stories/examples/__snapshots__/Checkbox.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Checkbox.stories.storyshot
similarity index 64%
rename from packages/web/stories/examples/__snapshots__/Checkbox.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Checkbox.stories.storyshot
index f565d1de3..53b0d47bf 100644
--- a/packages/web/stories/examples/__snapshots__/Checkbox.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/Checkbox.stories.storyshot
@@ -1,15 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | Checkbox Checkbox 1`] = `
+.c0 {
+  font-size: 15px;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.c0:hover > span:first-child {
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+}
+
+.c3 {
+  color: #456297;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  width: 1.066rem;
+  height: 1.066rem;
+  border: 1px solid #C4D2EB;
+  border-radius: 2px;
+  background-color: #ffffff;
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+  margin: -2px 0.6em 0 0;
+  vertical-align: middle;
+}
+
+.c4 {
+  display: none;
+}
+
+.c2 {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  opacity: 0;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  pointer-events: none;
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+}
+
 <label
-  className="sc-bZQynM emjIID"
+  className="c0"
   label="Label"
 >
   <span
-    className="sc-htoDjs kMcWdn"
+    className="c1"
   >
     <div
-      className="sc-iwsKbI jBnJBr"
+      className="c2"
     >
       <svg
         height="12"
@@ -25,11 +72,11 @@ exports[`Storyshots Components | Checkbox Checkbox 1`] = `
     </div>
   </span>
   <span
-    className="sc-gzVnrw kqlmMC"
+    className="c3"
   >
     <input
       checked={false}
-      className="sc-dnqmqq jRkzfi"
+      className="c4"
       defaultChecked={false}
       disabled={false}
       onChange={[Function]}
@@ -41,18 +88,65 @@ exports[`Storyshots Components | Checkbox Checkbox 1`] = `
 `;
 
 exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = `
+.c0 {
+  font-size: 15px;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.c0:hover > span:first-child {
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+}
+
+.c3 {
+  color: #456297;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  width: 1.066rem;
+  height: 1.066rem;
+  border: 1px solid #C4D2EB;
+  border-radius: 2px;
+  background-color: #ffffff;
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+  margin: -2px 0.6em 0 0;
+  vertical-align: middle;
+}
+
+.c4 {
+  display: none;
+}
+
+.c2 {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  opacity: 0;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  pointer-events: none;
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+}
+
 <div
-  className="sc-EHOje jvzENE"
+  className=""
 >
   <label
-    className="sc-bZQynM emjIID"
+    className="c0"
     label="Label"
   >
     <span
-      className="sc-htoDjs kMcWdn"
+      className="c1"
     >
       <div
-        className="sc-iwsKbI jBnJBr"
+        className="c2"
       >
         <svg
           height="12"
@@ -68,11 +162,11 @@ exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = `
       </div>
     </span>
     <span
-      className="sc-gzVnrw kqlmMC"
+      className="c3"
     >
       <input
         checked={false}
-        className="sc-dnqmqq jRkzfi"
+        className="c4"
         defaultChecked={false}
         disabled={false}
         onChange={[Function]}
@@ -82,14 +176,14 @@ exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = `
     </span>
   </label>
   <label
-    className="sc-bZQynM emjIID"
+    className="c0"
     label="Label"
   >
     <span
-      className="sc-htoDjs kMcWdn"
+      className="c1"
     >
       <div
-        className="sc-iwsKbI jBnJBr"
+        className="c2"
       >
         <svg
           height="12"
@@ -105,11 +199,11 @@ exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = `
       </div>
     </span>
     <span
-      className="sc-gzVnrw kqlmMC"
+      className="c3"
     >
       <input
         checked={false}
-        className="sc-dnqmqq jRkzfi"
+        className="c4"
         defaultChecked={false}
         disabled={false}
         onChange={[Function]}
@@ -119,14 +213,14 @@ exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = `
     </span>
   </label>
   <label
-    className="sc-bZQynM emjIID"
+    className="c0"
     label="Label"
   >
     <span
-      className="sc-htoDjs kMcWdn"
+      className="c1"
     >
       <div
-        className="sc-iwsKbI jBnJBr"
+        className="c2"
       >
         <svg
           height="12"
@@ -142,11 +236,11 @@ exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = `
       </div>
     </span>
     <span
-      className="sc-gzVnrw kqlmMC"
+      className="c3"
     >
       <input
         checked={false}
-        className="sc-dnqmqq jRkzfi"
+        className="c4"
         defaultChecked={false}
         disabled={false}
         onChange={[Function]}
diff --git a/packages/playground/stories/examples/__snapshots__/Form.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Form.stories.storyshot
new file mode 100644
index 000000000..05cd6806f
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Form.stories.storyshot
@@ -0,0 +1,2054 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Form Full Example 1`] = `
+.c9 {
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1;
+  height: 1.93267rem;
+  color: #7189B6;
+  text-align: center;
+  background-color: #EEF2FC;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  z-index: 5;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.c2 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c2:before {
+  content: '';
+  display: inline-block;
+  background-color: #EB5000;
+  margin: -0.133rem 0.533rem 0 0;
+  vertical-align: middle;
+  height: 0.266rem;
+  width: 0.266rem;
+  border-radius: 50%;
+  position: absolute;
+  left: -0.666rem;
+  top: 0.666rem;
+}
+
+.c7 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c3 {
+  position: relative;
+}
+
+.c4 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c4:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::placeholder {
+  color: #95ACD4;
+}
+
+.c4:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c4:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c11 {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+  height: auto;
+  resize: none;
+}
+
+.c11::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c11::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c11:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c11::placeholder {
+  color: #95ACD4;
+}
+
+.c11:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c11:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c5 {
+  position: relative;
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+}
+
+.c6 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c6 > * {
+  width: calc(100% + 2px);
+}
+
+.c6:not(:first-child) > * {
+  margin-left: -1px;
+  margin-right: 0;
+}
+
+.c6:last-child * {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.c6:first-child * {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c6:not(:first-child):not(:last-child) * {
+  border-radius: 0;
+}
+
+.c8 {
+  display: table-cell;
+  vertical-align: middle;
+  width: 1%;
+  white-space: nowrap;
+}
+
+.c8 > * {
+  width: calc(100% + 2px);
+}
+
+.c8:not(:first-child) > * {
+  margin-left: -1px;
+  margin-right: 0;
+}
+
+.c8:last-child * {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.c8:first-child * {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c8:not(:first-child):not(:last-child) * {
+  border-radius: 0;
+}
+
+.c1 {
+  display: block;
+  margin-bottom: 1.333rem;
+  position: relative;
+  width: 100%;
+}
+
+.c10 {
+  display: table;
+  margin-bottom: 1.866rem;
+  position: relative;
+  width: 100%;
+}
+
+.c10 > span {
+  display: table-cell;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 1%;
+  min-width: 8rem;
+  padding-right: 1.2rem;
+  line-height: 1;
+  vertical-align: top;
+  padding-top: calc(0.46633rem + 2px);
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={true}
+    >
+      Username
+    </span>
+    <div
+      className="c3"
+    >
+      <input
+        autoFocus={false}
+        className="c4"
+        defaultValue=""
+        disabled={false}
+        icon={null}
+        onChange={[Function]}
+        placeholder="Enter your username"
+        spellCheck={false}
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={true}
+    >
+      Fullname
+    </span>
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c3"
+        >
+          <input
+            autoFocus={false}
+            className="c4"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="First Name"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c6"
+      >
+        <div
+          className="c3"
+        >
+          <input
+            autoFocus={false}
+            className="c4"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="Last Name"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={true}
+    >
+      Birthday
+    </span>
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c3"
+        >
+          <input
+            autoFocus={false}
+            className="c4"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="Month"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c6"
+      >
+        <div
+          className="c3"
+        >
+          <input
+            autoFocus={false}
+            className="c4"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="Day"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c6"
+      >
+        <div
+          className="c3"
+        >
+          <input
+            autoFocus={false}
+            className="c4"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="Year"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <span
+      className="c7"
+      required={false}
+    >
+      Website
+    </span>
+    <div
+      className="c5"
+    >
+      <div
+        className="c8"
+      >
+        <div
+          className="c9"
+        >
+          http://
+        </div>
+      </div>
+      <div
+        className="c6"
+      >
+        <div
+          className="c3"
+        >
+          <input
+            autoFocus={false}
+            className="c4"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="LabelAddon on the left"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c10"
+  >
+    <span
+      className="c7"
+      required={false}
+    >
+      Comment
+    </span>
+    <textarea
+      autoFocus={false}
+      className="c11"
+      defaultValue=""
+      disabled={false}
+      id={null}
+      maxLength={null}
+      onChange={[Function]}
+      placeholder="Comment here"
+      rows={3}
+      spellCheck={false}
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form Hint 1`] = `
+.c5 {
+  display: block !important;
+  padding-top: 0.4rem;
+  font-size: 0.8rem;
+  line-height: 1.42857;
+  padding-left: 1px;
+  white-space: normal;
+  color: #2BCD86;
+}
+
+.c6 {
+  display: block !important;
+  padding-top: 0.4rem;
+  font-size: 0.8rem;
+  line-height: 1.42857;
+  padding-left: 1px;
+  white-space: normal;
+  color: #95ACD4;
+}
+
+.c2 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c3 {
+  position: relative;
+}
+
+.c4 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c4:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::placeholder {
+  color: #95ACD4;
+}
+
+.c4:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c4:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c1 {
+  display: table;
+  margin-bottom: 1.866rem;
+  position: relative;
+  width: 100%;
+}
+
+.c1 > span {
+  display: table-cell;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 1%;
+  min-width: 8rem;
+  padding-right: 1.2rem;
+  line-height: 1;
+  vertical-align: top;
+  padding-top: calc(0.46633rem + 2px);
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={false}
+    >
+      Username
+    </span>
+    <div
+      className="c3"
+    >
+      <input
+        autoFocus={false}
+        className="c4"
+        defaultValue=""
+        disabled={false}
+        icon={null}
+        onChange={[Function]}
+        placeholder={null}
+        spellCheck={false}
+        type="text"
+        value="dramsign"
+      />
+    </div>
+    <div
+      className="c5"
+    >
+      Username is available
+    </div>
+    <div
+      className="c6"
+    >
+      Example: James Allen
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form Input with Label 1`] = `
+.c2 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c2:before {
+  content: '';
+  display: inline-block;
+  background-color: #EB5000;
+  margin: -0.133rem 0.533rem 0 0;
+  vertical-align: middle;
+  height: 0.266rem;
+  width: 0.266rem;
+  border-radius: 50%;
+  position: absolute;
+  left: -0.666rem;
+  top: 0.666rem;
+}
+
+.c3 {
+  position: relative;
+}
+
+.c4 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c4:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::placeholder {
+  color: #95ACD4;
+}
+
+.c4:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c4:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c1 {
+  display: block;
+  margin-bottom: 1.333rem;
+  position: relative;
+  width: 100%;
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={true}
+    >
+      Username
+    </span>
+    <div
+      className="c3"
+    >
+      <input
+        autoFocus={false}
+        className="c4"
+        defaultValue=""
+        disabled={false}
+        icon={null}
+        onChange={[Function]}
+        placeholder="Enter your username"
+        spellCheck={false}
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form Multiple & Addon 1`] = `
+.c9 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c9:hover {
+  background: #D8E3F6;
+}
+
+.c9:active {
+  background: #C4D2EB;
+}
+
+.c9:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c9:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c9[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c8 {
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1;
+  height: 1.93267rem;
+  color: #7189B6;
+  text-align: center;
+  background-color: #EEF2FC;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  z-index: 5;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.c2 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c5 {
+  position: relative;
+}
+
+.c6 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c6::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c6::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c6:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c6::placeholder {
+  color: #95ACD4;
+}
+
+.c6:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c6:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c3 {
+  position: relative;
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+}
+
+.c4 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c4 > * {
+  width: calc(100% + 2px);
+}
+
+.c4:not(:first-child) > * {
+  margin-left: -1px;
+  margin-right: 0;
+}
+
+.c4:last-child * {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.c4:first-child * {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c4:not(:first-child):not(:last-child) * {
+  border-radius: 0;
+}
+
+.c7 {
+  display: table-cell;
+  vertical-align: middle;
+  width: 1%;
+  white-space: nowrap;
+}
+
+.c7 > * {
+  width: calc(100% + 2px);
+}
+
+.c7:not(:first-child) > * {
+  margin-left: -1px;
+  margin-right: 0;
+}
+
+.c7:last-child * {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.c7:first-child * {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c7:not(:first-child):not(:last-child) * {
+  border-radius: 0;
+}
+
+.c1 {
+  display: table;
+  margin-bottom: 1.866rem;
+  position: relative;
+  width: 100%;
+}
+
+.c1 > span {
+  display: table-cell;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 1%;
+  min-width: 8rem;
+  padding-right: 1.2rem;
+  line-height: 1;
+  vertical-align: top;
+  padding-top: calc(0.46633rem + 2px);
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={false}
+    >
+      Weight
+    </span>
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <div
+          className="c5"
+        >
+          <input
+            autoFocus={false}
+            className="c6"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="LabelAddon on the right"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          kg
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={false}
+    >
+      Price
+    </span>
+    <div
+      className="c3"
+    >
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          <svg
+            height={16}
+            onClick={[Function]}
+            viewBox="0 0 583.4605714285714 1024"
+            width={16}
+          >
+            <path
+              d="M558.857 677.143c0 116.571-83.429 208.571-204.571 228.571v100c0 10.286-8 18.286-18.286 18.286h-77.143c-9.714 0-18.286-8-18.286-18.286v-100c-133.714-18.857-206.857-98.857-209.714-102.286-5.714-6.857-6.286-16.571-1.143-23.429l58.857-77.143c2.857-4 8-6.286 13.143-6.857s10.286 1.143 13.714 5.143c1.143 0.571 81.143 77.143 182.286 77.143 56 0 116.571-29.714 116.571-94.286 0-54.857-67.429-81.714-144.571-112.571-102.857-40.571-230.857-92-230.857-235.429 0-105.143 82.286-192 201.714-214.857v-102.857c0-10.286 8.571-18.286 18.286-18.286h77.143c10.286 0 18.286 8 18.286 18.286v100.571c116 13.143 177.714 76 180 78.286 5.714 6.286 6.857 14.857 2.857 21.714l-46.286 83.429c-2.857 5.143-7.429 8.571-13.143 9.143-5.714 1.143-10.857-0.571-15.429-4-0.571-0.571-69.714-61.714-155.429-61.714-72.571 0-122.857 36-122.857 88 0 60.571 69.714 87.429 150.857 118.857 105.143 40.571 224 86.857 224 224.571z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className="c4"
+      >
+        <div
+          className="c5"
+        >
+          <input
+            autoFocus={false}
+            className="c6"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="LabelAddon on the both"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          .00
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={false}
+    >
+      Button
+    </span>
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <div
+          className="c5"
+        >
+          <input
+            autoFocus={false}
+            className="c6"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="LabelAddon on the both"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c4"
+      >
+        <button
+          className="c9"
+          onClick={[Function]}
+          selected={false}
+          size="medium"
+          style={null}
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form Multiple & Button 1`] = `
+.c5 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5:hover {
+  background: #D8E3F6;
+}
+
+.c5:active {
+  background: #C4D2EB;
+}
+
+.c5[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c8 {
+  position: relative;
+  background: #F7F9FE;
+  color: #0E86FE;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #0E86FE;
+  color: #ffffff;
+  border-color: #0E86FE;
+}
+
+.c8:hover {
+  background: #D8E3F6;
+}
+
+.c8:active {
+  background: #C4D2EB;
+}
+
+.c8:hover {
+  background: #41a0fe;
+  border-color: #41a0fe;
+}
+
+.c8:active {
+  background: #0167ce;
+  border-color: #0167ce;
+}
+
+.c8[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c2 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c6 {
+  position: relative;
+}
+
+.c7 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c7::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c7::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c7:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c7::placeholder {
+  color: #95ACD4;
+}
+
+.c7:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c7:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c3 {
+  position: relative;
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+}
+
+.c4 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c4 > * {
+  width: calc(100% + 2px);
+}
+
+.c4:not(:first-child) > * {
+  margin-left: -1px;
+  margin-right: 0;
+}
+
+.c4:last-child * {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.c4:first-child * {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.c4:not(:first-child):not(:last-child) * {
+  border-radius: 0;
+}
+
+.c1 {
+  display: table;
+  margin-bottom: 1.866rem;
+  position: relative;
+  width: 100%;
+}
+
+.c1 > span {
+  display: table-cell;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 1%;
+  min-width: 8rem;
+  padding-right: 1.2rem;
+  line-height: 1;
+  vertical-align: top;
+  padding-top: calc(0.46633rem + 2px);
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={false}
+    >
+      Button
+    </span>
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <button
+          className="c5"
+          onClick={[Function]}
+          selected={false}
+          size="medium"
+          style={null}
+        >
+          A
+        </button>
+      </div>
+      <div
+        className="c4"
+      >
+        <button
+          className="c5"
+          onClick={[Function]}
+          selected={false}
+          size="medium"
+          style={null}
+        >
+          B
+        </button>
+      </div>
+      <div
+        className="c4"
+      >
+        <button
+          className="c5"
+          onClick={[Function]}
+          selected={false}
+          size="medium"
+          style={null}
+        >
+          C
+        </button>
+      </div>
+      <div
+        className="c4"
+      >
+        <div
+          className="c6"
+        >
+          <input
+            autoFocus={false}
+            className="c7"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="LabelAddon on the both"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <span
+      className="c2"
+      required={false}
+    >
+      Button
+    </span>
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <div
+          className="c6"
+        >
+          <input
+            autoFocus={false}
+            className="c7"
+            defaultValue=""
+            disabled={false}
+            icon={null}
+            onChange={[Function]}
+            placeholder="LabelAddon on the both"
+            spellCheck={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="c4"
+      >
+        <button
+          className="c8"
+          onClick={[Function]}
+          selected={false}
+          size="medium"
+          style={null}
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form/Input Basic 1`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c2::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c2:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c2::placeholder {
+  color: #95ACD4;
+}
+
+.c2:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c2:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <input
+      autoFocus={false}
+      className="c2"
+      defaultValue="default"
+      disabled={false}
+      icon={null}
+      placeholder="Uncontrolled Input"
+      spellCheck={false}
+      type="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form/Input Controlled Input 1`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c2::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c2:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c2::placeholder {
+  color: #95ACD4;
+}
+
+.c2:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c2:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <input
+      autoFocus={false}
+      className="c2"
+      defaultValue=""
+      disabled={false}
+      icon={null}
+      onChange={[Function]}
+      placeholder="Controlled Input"
+      spellCheck={false}
+      type="text"
+      value="123"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form/Input With Icon 1`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+  padding-right: 2.2em;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c2::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c2:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c2::placeholder {
+  color: #95ACD4;
+}
+
+.c2:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c2:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c4 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+  padding-left: 2.2em;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c4:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::placeholder {
+  color: #95ACD4;
+}
+
+.c4:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c4:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c3 {
+  position: absolute;
+  top: calc(50% - 0.5em);
+  width: 2.2em;
+  text-align: center;
+  z-index: 7;
+  color: #456296;
+  right: 0;
+  cursor: pointer;
+}
+
+.c3:hover {
+  color: #C4D2EB;
+}
+
+.c5 {
+  position: absolute;
+  top: calc(50% - 0.5em);
+  width: 2.2em;
+  text-align: center;
+  z-index: 7;
+  color: #456296;
+  left: 0;
+  color: #C3D1EB;
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <input
+      autoFocus={false}
+      className="c2"
+      defaultValue=""
+      disabled={false}
+      icon="search"
+      placeholder="Right side icon"
+      spellCheck={false}
+      type="text"
+    />
+    <svg
+      className="c3"
+      height={16}
+      iconPosition="right"
+      onClick={[Function]}
+      viewBox="0 0 950.8571428571428 1024"
+      width={16}
+    >
+      <path
+        d="M658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857c0 40-33.143 73.143-73.143 73.143-19.429 0-38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+  <br />
+  <div
+    className="c1"
+  >
+    <input
+      autoFocus={false}
+      className="c4"
+      defaultValue=""
+      disabled={false}
+      icon="search"
+      placeholder="Left side icon"
+      spellCheck={false}
+      type="text"
+    />
+    <svg
+      className="c5"
+      height={16}
+      iconPosition="left"
+      onClick={[Function]}
+      viewBox="0 0 950.8571428571428 1024"
+      width={16}
+    >
+      <path
+        d="M658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857c0 40-33.143 73.143-73.143 73.143-19.429 0-38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form/Select Basic 1`] = `
+.c1 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+}
+
+.c2 {
+  width: 100%;
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  border-radius: 4px;
+  font-size: 1rem;
+  line-height: 1;
+  height: 1.93267rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: #456297;
+  border: 1px solid #C4D2EB;
+  z-index: 5;
+  outline: 0;
+  text-align: left;
+}
+
+.c3 {
+  color: color:#95ACD4;
+}
+
+.c0 {
+  max-width: 500px;
+  padding: 40px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      onClick={[Function]}
+      placeholder="Select One"
+    >
+      <span
+        className="c3 "
+      >
+        Select One
+      </span>
+      <svg
+        height="15"
+        onClick={[Function]}
+        style={
+          Object {
+            "float": "right",
+          }
+        }
+        viewBox="0 0 585.1428571428571 1024"
+        width="15"
+      >
+        <path
+          d="M585.143 402.286c0 9.714-4 18.857-10.857 25.714l-256 256c-6.857 6.857-16 10.857-25.714 10.857s-18.857-4-25.714-10.857l-256-256c-6.857-6.857-10.857-16-10.857-25.714 0-20 16.571-36.571 36.571-36.571h512c20 0 36.571 16.571 36.571 36.571z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Form/TextArea Basic 1`] = `
+.c0 {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+  height: auto;
+  resize: none;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c0::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c0:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c0::placeholder {
+  color: #95ACD4;
+}
+
+.c0:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c0:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+<textarea
+  autoFocus={false}
+  className="c0"
+  defaultValue=""
+  disabled={false}
+  id={null}
+  maxLength={null}
+  onChange={null}
+  placeholder="Uncontrolled Input"
+  rows={3}
+  spellCheck={false}
+/>
+`;
+
+exports[`Storyshots Components | Form/TextArea Controlled TextArea 1`] = `
+.c0 {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+  height: auto;
+  resize: none;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c0::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c0:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c0::placeholder {
+  color: #95ACD4;
+}
+
+.c0:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c0:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+<textarea
+  autoFocus={false}
+  className="c0"
+  defaultValue=""
+  disabled={false}
+  id={null}
+  maxLength={null}
+  onChange={[Function]}
+  placeholder="Controlled Input"
+  rows={3}
+  spellCheck={false}
+  value=""
+/>
+`;
diff --git a/packages/web/stories/examples/__snapshots__/Icon.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Icon.stories.storyshot
similarity index 97%
rename from packages/web/stories/examples/__snapshots__/Icon.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Icon.stories.storyshot
index 5b75c8c19..bad867521 100644
--- a/packages/web/stories/examples/__snapshots__/Icon.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/Icon.stories.storyshot
@@ -1,11 +1,138 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | Icon Basic 1`] = `
+.c2 {
+  position: relative;
+  font-size: 0.866rem;
+  color: #7189B6;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: left;
+}
+
+.c3 {
+  position: relative;
+}
+
+.c4 {
+  vertical-align: middle;
+  height: 1.93267rem;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0.46633rem 0.8rem;
+  font-size: 1rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #C4D2EB;
+  border-radius: 4px;
+  color: #456297;
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  outline: 0;
+  z-index: 5;
+  padding-right: 2.2em;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::-moz-placeholder {
+  color: #95ACD4;
+}
+
+.c4:-ms-input-placeholder {
+  color: #95ACD4;
+}
+
+.c4::placeholder {
+  color: #95ACD4;
+}
+
+.c4:focus {
+  outline: 0;
+  border: 1px solid #0E86FE;
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  z-index: 7;
+}
+
+.c4:disabled {
+  pointer-events: none;
+  border-color: #C4D2EB;
+  background-color: #EEF2FC;
+}
+
+.c5 {
+  position: absolute;
+  top: calc(50% - 0.5em);
+  width: 2.2em;
+  text-align: center;
+  z-index: 7;
+  color: #456296;
+  right: 0;
+  cursor: pointer;
+}
+
+.c5:hover {
+  color: #C4D2EB;
+}
+
+.c1 {
+  display: block;
+  margin-bottom: 1.333rem;
+  position: relative;
+  width: 100%;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c6 {
+  padding: 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c7 {
+  padding: 20px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.c7:hover {
+  background: #c4d2eb;
+}
+
 <div
-  className="sc-gwVKww kVWUOw"
+  className="c0"
 >
   <div
-    className="sc-gipzik twobj"
+    className="c1"
     style={
       Object {
         "width": "60%",
@@ -13,16 +140,16 @@ exports[`Storyshots Components | Icon Basic 1`] = `
     }
   >
     <span
-      className="sc-brqgnP jXbsSQ"
+      className="c2"
       required={false}
     />
     <div
-      className="sc-cMljjf hwFcyK"
+      className="c3"
     >
       <input
         autoFocus={false}
-        className="sc-jAaTju jnPaQg"
-        defaultValue={null}
+        className="c4"
+        defaultValue=""
         disabled={false}
         icon="search"
         onChange={[Function]}
@@ -32,7 +159,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
         value=""
       />
       <svg
-        className="sc-jDwBTQ ZtEja"
+        className="c5"
         height={16}
         iconPosition="right"
         onClick={[Function]}
@@ -47,10 +174,10 @@ exports[`Storyshots Components | Icon Basic 1`] = `
     </div>
   </div>
   <div
-    className="sc-hXRMBi fPtZY"
+    className="c6"
   >
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -67,7 +194,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -84,7 +211,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -101,7 +228,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -118,7 +245,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -135,7 +262,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -152,7 +279,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -169,7 +296,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -186,7 +313,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -203,7 +330,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -220,7 +347,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -237,7 +364,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -254,7 +381,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -271,7 +398,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -288,7 +415,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -305,7 +432,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -322,7 +449,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -339,7 +466,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -356,7 +483,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -373,7 +500,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -390,7 +517,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -407,7 +534,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -424,7 +551,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -441,7 +568,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -458,7 +585,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -475,7 +602,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -492,7 +619,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -509,7 +636,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -526,7 +653,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -543,7 +670,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -560,7 +687,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -577,7 +704,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -594,7 +721,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -611,7 +738,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -628,7 +755,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -645,7 +772,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -662,7 +789,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -679,7 +806,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -696,7 +823,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -713,7 +840,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -730,7 +857,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -747,7 +874,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -764,7 +891,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -781,7 +908,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -798,7 +925,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -815,7 +942,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -832,7 +959,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -849,7 +976,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -866,7 +993,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -883,7 +1010,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -900,7 +1027,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -917,7 +1044,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -934,7 +1061,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -951,7 +1078,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -968,7 +1095,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -985,7 +1112,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1002,7 +1129,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1019,7 +1146,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1036,7 +1163,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1053,7 +1180,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1070,7 +1197,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1087,7 +1214,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1104,7 +1231,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1121,7 +1248,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1138,7 +1265,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1155,7 +1282,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1172,7 +1299,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1189,7 +1316,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1206,7 +1333,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1223,7 +1350,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1240,7 +1367,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1257,7 +1384,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1274,7 +1401,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1291,7 +1418,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1308,7 +1435,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1325,7 +1452,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1342,7 +1469,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1359,7 +1486,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1376,7 +1503,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1393,7 +1520,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1410,7 +1537,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1427,7 +1554,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1444,7 +1571,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1461,7 +1588,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1478,7 +1605,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1495,7 +1622,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1512,7 +1639,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1529,7 +1656,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1546,7 +1673,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1563,7 +1690,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1580,7 +1707,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1597,7 +1724,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1614,7 +1741,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1631,7 +1758,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1648,7 +1775,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1665,7 +1792,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1682,7 +1809,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1699,7 +1826,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1716,7 +1843,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1733,7 +1860,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1750,7 +1877,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1767,7 +1894,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1784,7 +1911,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1801,7 +1928,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1818,7 +1945,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1835,7 +1962,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1852,7 +1979,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1869,7 +1996,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1886,7 +2013,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1903,7 +2030,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1920,7 +2047,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1937,7 +2064,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1954,7 +2081,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1971,7 +2098,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1988,7 +2115,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2005,7 +2132,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2022,7 +2149,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2039,7 +2166,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2056,7 +2183,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2073,7 +2200,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2090,7 +2217,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2107,7 +2234,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2124,7 +2251,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2141,7 +2268,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2158,7 +2285,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2175,7 +2302,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2192,7 +2319,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2209,7 +2336,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2226,7 +2353,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2243,7 +2370,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2260,7 +2387,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2277,7 +2404,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2294,7 +2421,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2311,7 +2438,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2328,7 +2455,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2345,7 +2472,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2362,7 +2489,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2379,7 +2506,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2396,7 +2523,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2413,7 +2540,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2430,7 +2557,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2447,7 +2574,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2464,7 +2591,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2481,7 +2608,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2498,7 +2625,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2515,7 +2642,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2532,7 +2659,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2549,7 +2676,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2566,7 +2693,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2583,7 +2710,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2600,7 +2727,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2617,7 +2744,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2634,7 +2761,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2651,7 +2778,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2668,7 +2795,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2685,7 +2812,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2702,7 +2829,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2719,7 +2846,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2736,7 +2863,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2753,7 +2880,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2770,7 +2897,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2787,7 +2914,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2804,7 +2931,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2821,7 +2948,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2838,7 +2965,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2855,7 +2982,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2872,7 +2999,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2889,7 +3016,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2906,7 +3033,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2923,7 +3050,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2940,7 +3067,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2957,7 +3084,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2974,7 +3101,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2991,7 +3118,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3008,7 +3135,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3025,7 +3152,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3042,7 +3169,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3059,7 +3186,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3076,7 +3203,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3093,7 +3220,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3110,7 +3237,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3127,7 +3254,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3144,7 +3271,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3161,7 +3288,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3178,7 +3305,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3195,7 +3322,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3212,7 +3339,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3229,7 +3356,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3246,7 +3373,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3263,7 +3390,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3280,7 +3407,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3297,7 +3424,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3314,7 +3441,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3331,7 +3458,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3348,7 +3475,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3365,7 +3492,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3382,7 +3509,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3399,7 +3526,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3416,7 +3543,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3433,7 +3560,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3450,7 +3577,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3467,7 +3594,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3484,7 +3611,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3501,7 +3628,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3518,7 +3645,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3535,7 +3662,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3552,7 +3679,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3569,7 +3696,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3586,7 +3713,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3603,7 +3730,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3620,7 +3747,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3637,7 +3764,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3654,7 +3781,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3671,7 +3798,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3688,7 +3815,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3705,7 +3832,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3722,7 +3849,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3739,7 +3866,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3756,7 +3883,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3773,7 +3900,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3790,7 +3917,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3807,7 +3934,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3824,7 +3951,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3841,7 +3968,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3858,7 +3985,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3875,7 +4002,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3892,7 +4019,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3909,7 +4036,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3926,7 +4053,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3943,7 +4070,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3960,7 +4087,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3977,7 +4104,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -3994,7 +4121,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4011,7 +4138,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4028,7 +4155,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4045,7 +4172,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4062,7 +4189,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4079,7 +4206,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4096,7 +4223,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4113,7 +4240,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4130,7 +4257,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4147,7 +4274,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4164,7 +4291,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4181,7 +4308,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4198,7 +4325,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4215,7 +4342,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4232,7 +4359,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4249,7 +4376,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4266,7 +4393,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4283,7 +4410,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4300,7 +4427,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4317,7 +4444,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4334,7 +4461,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4351,7 +4478,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4368,7 +4495,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4385,7 +4512,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4402,7 +4529,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4419,7 +4546,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4436,7 +4563,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4453,7 +4580,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4470,7 +4597,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4487,7 +4614,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4504,7 +4631,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4521,7 +4648,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4538,7 +4665,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4555,7 +4682,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4572,7 +4699,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4589,7 +4716,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4606,7 +4733,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4623,7 +4750,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4640,7 +4767,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4657,7 +4784,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4674,7 +4801,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4691,7 +4818,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4708,7 +4835,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4725,7 +4852,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4742,7 +4869,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4759,7 +4886,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4776,7 +4903,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4793,7 +4920,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4810,7 +4937,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4827,7 +4954,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4844,7 +4971,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4861,7 +4988,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4878,7 +5005,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4895,7 +5022,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4912,7 +5039,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4929,7 +5056,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4946,7 +5073,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4963,7 +5090,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4980,7 +5107,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -4997,7 +5124,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5014,7 +5141,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5031,7 +5158,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5048,7 +5175,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5065,7 +5192,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5082,7 +5209,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5099,7 +5226,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5116,7 +5243,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5133,7 +5260,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5150,7 +5277,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5167,7 +5294,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5184,7 +5311,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5201,7 +5328,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5218,7 +5345,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5235,7 +5362,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5252,7 +5379,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5269,7 +5396,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5286,7 +5413,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5303,7 +5430,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5320,7 +5447,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5337,7 +5464,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5354,7 +5481,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5371,7 +5498,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5388,7 +5515,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5405,7 +5532,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5422,7 +5549,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5439,7 +5566,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5456,7 +5583,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5473,7 +5600,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5490,7 +5617,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5507,7 +5634,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5524,7 +5651,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5541,7 +5668,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5558,7 +5685,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5575,7 +5702,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5592,7 +5719,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5609,7 +5736,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5626,7 +5753,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5643,7 +5770,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5660,7 +5787,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5677,7 +5804,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5694,7 +5821,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5711,7 +5838,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5728,7 +5855,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5745,7 +5872,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5762,7 +5889,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5779,7 +5906,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5796,7 +5923,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5813,7 +5940,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5830,7 +5957,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5847,7 +5974,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5864,7 +5991,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5881,7 +6008,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5898,7 +6025,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5915,7 +6042,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5932,7 +6059,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5949,7 +6076,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5966,7 +6093,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -5983,7 +6110,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6000,7 +6127,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6017,7 +6144,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6034,7 +6161,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6051,7 +6178,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6068,7 +6195,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6085,7 +6212,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6102,7 +6229,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6119,7 +6246,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6136,7 +6263,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6153,7 +6280,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6170,7 +6297,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6187,7 +6314,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6204,7 +6331,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6221,7 +6348,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6238,7 +6365,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6255,7 +6382,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6272,7 +6399,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6289,7 +6416,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6306,7 +6433,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6323,7 +6450,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6340,7 +6467,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6357,7 +6484,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6374,7 +6501,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6391,7 +6518,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6408,7 +6535,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6425,7 +6552,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6442,7 +6569,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6459,7 +6586,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6476,7 +6603,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6493,7 +6620,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6510,7 +6637,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6527,7 +6654,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6544,7 +6671,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6561,7 +6688,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6578,7 +6705,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6595,7 +6722,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6612,7 +6739,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6629,7 +6756,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6646,7 +6773,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6663,7 +6790,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6680,7 +6807,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6697,7 +6824,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6714,7 +6841,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6731,7 +6858,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6748,7 +6875,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6765,7 +6892,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6782,7 +6909,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6799,7 +6926,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6816,7 +6943,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6833,7 +6960,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6850,7 +6977,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6867,7 +6994,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6884,7 +7011,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6901,7 +7028,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6918,7 +7045,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6935,7 +7062,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6952,7 +7079,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6969,7 +7096,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -6986,7 +7113,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7003,7 +7130,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7020,7 +7147,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7037,7 +7164,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7054,7 +7181,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7071,7 +7198,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7088,7 +7215,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7105,7 +7232,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7122,7 +7249,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7139,7 +7266,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7156,7 +7283,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7173,7 +7300,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7190,7 +7317,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7207,7 +7334,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7224,7 +7351,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7241,7 +7368,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7258,7 +7385,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7275,7 +7402,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7292,7 +7419,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7309,7 +7436,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7326,7 +7453,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7343,7 +7470,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7360,7 +7487,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7377,7 +7504,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7394,7 +7521,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7411,7 +7538,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7428,7 +7555,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7445,7 +7572,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7462,7 +7589,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7479,7 +7606,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7496,7 +7623,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7513,7 +7640,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7530,7 +7657,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7547,7 +7674,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7564,7 +7691,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7581,7 +7708,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7598,7 +7725,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7615,7 +7742,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7632,7 +7759,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7649,7 +7776,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7666,7 +7793,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7683,7 +7810,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7700,7 +7827,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7717,7 +7844,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7734,7 +7861,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7751,7 +7878,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7768,7 +7895,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7785,7 +7912,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7802,7 +7929,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7819,7 +7946,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7836,7 +7963,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7853,7 +7980,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7870,7 +7997,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7887,7 +8014,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7904,7 +8031,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7921,7 +8048,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7938,7 +8065,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7955,7 +8082,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7972,7 +8099,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -7989,7 +8116,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8006,7 +8133,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8023,7 +8150,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8040,7 +8167,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8057,7 +8184,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8074,7 +8201,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8091,7 +8218,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8108,7 +8235,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8125,7 +8252,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8142,7 +8269,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8159,7 +8286,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8176,7 +8303,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8193,7 +8320,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8210,7 +8337,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8227,7 +8354,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8244,7 +8371,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8261,7 +8388,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8278,7 +8405,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8295,7 +8422,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8312,7 +8439,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8329,7 +8456,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8346,7 +8473,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8363,7 +8490,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8380,7 +8507,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8397,7 +8524,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8414,7 +8541,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8431,7 +8558,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8448,7 +8575,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8465,7 +8592,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8482,7 +8609,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8499,7 +8626,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8516,7 +8643,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8533,7 +8660,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8550,7 +8677,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8567,7 +8694,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8584,7 +8711,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8601,7 +8728,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8618,7 +8745,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8635,7 +8762,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8652,7 +8779,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8669,7 +8796,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8686,7 +8813,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8703,7 +8830,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8720,7 +8847,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8737,7 +8864,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8754,7 +8881,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8771,7 +8898,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8788,7 +8915,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8805,7 +8932,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8822,7 +8949,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8839,7 +8966,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8856,7 +8983,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8873,7 +9000,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8890,7 +9017,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8907,7 +9034,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8924,7 +9051,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8941,7 +9068,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8958,7 +9085,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8975,7 +9102,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -8992,7 +9119,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9009,7 +9136,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9026,7 +9153,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9043,7 +9170,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9060,7 +9187,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9077,7 +9204,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9094,7 +9221,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9111,7 +9238,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9128,7 +9255,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9145,7 +9272,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9162,7 +9289,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9179,7 +9306,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9196,7 +9323,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9213,7 +9340,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9230,7 +9357,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9247,7 +9374,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9264,7 +9391,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9281,7 +9408,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9298,7 +9425,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9315,7 +9442,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9332,7 +9459,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9349,7 +9476,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9366,7 +9493,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9383,7 +9510,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9400,7 +9527,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9417,7 +9544,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9434,7 +9561,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9451,7 +9578,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9468,7 +9595,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9485,7 +9612,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9502,7 +9629,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9519,7 +9646,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9536,7 +9663,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9553,7 +9680,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9570,7 +9697,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9587,7 +9714,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9604,7 +9731,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9621,7 +9748,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9638,7 +9765,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9655,7 +9782,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9672,7 +9799,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9689,7 +9816,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9706,7 +9833,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9723,7 +9850,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9740,7 +9867,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9757,7 +9884,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9774,7 +9901,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9791,7 +9918,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9808,7 +9935,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9825,7 +9952,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9842,7 +9969,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9859,7 +9986,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9876,7 +10003,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9893,7 +10020,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9910,7 +10037,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9927,7 +10054,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9944,7 +10071,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9961,7 +10088,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9978,7 +10105,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -9995,7 +10122,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10012,7 +10139,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10029,7 +10156,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10046,7 +10173,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10063,7 +10190,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10080,7 +10207,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10097,7 +10224,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10114,7 +10241,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10131,7 +10258,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10148,7 +10275,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10165,7 +10292,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10182,7 +10309,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10199,7 +10326,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10216,7 +10343,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10233,7 +10360,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10250,7 +10377,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10267,7 +10394,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10284,7 +10411,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10301,7 +10428,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10318,7 +10445,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10335,7 +10462,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10352,7 +10479,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10369,7 +10496,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10386,7 +10513,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10403,7 +10530,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10420,7 +10547,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10437,7 +10564,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10454,7 +10581,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10471,7 +10598,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10488,7 +10615,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10505,7 +10632,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10522,7 +10649,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10539,7 +10666,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10556,7 +10683,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10573,7 +10700,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10590,7 +10717,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10607,7 +10734,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10624,7 +10751,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10641,7 +10768,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10658,7 +10785,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10675,7 +10802,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10692,7 +10819,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10709,7 +10836,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10726,7 +10853,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10743,7 +10870,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10760,7 +10887,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10777,7 +10904,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10794,7 +10921,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10811,7 +10938,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10828,7 +10955,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10845,7 +10972,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10862,7 +10989,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10879,7 +11006,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10896,7 +11023,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10913,7 +11040,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10930,7 +11057,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10947,7 +11074,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10964,7 +11091,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10981,7 +11108,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -10998,7 +11125,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11015,7 +11142,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11032,7 +11159,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11049,7 +11176,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11066,7 +11193,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11083,7 +11210,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11100,7 +11227,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11117,7 +11244,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11134,7 +11261,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11151,7 +11278,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11168,7 +11295,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11185,7 +11312,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11202,7 +11329,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11219,7 +11346,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11236,7 +11363,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11253,7 +11380,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11270,7 +11397,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11287,7 +11414,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11304,7 +11431,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11321,7 +11448,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11338,7 +11465,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11355,7 +11482,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11372,7 +11499,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11389,7 +11516,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11406,7 +11533,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11423,7 +11550,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11440,7 +11567,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11457,7 +11584,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11474,7 +11601,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11491,7 +11618,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11508,7 +11635,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -11525,7 +11652,7 @@ exports[`Storyshots Components | Icon Basic 1`] = `
       </svg>
     </div>
     <div
-      className="sc-epnACN grPlBb"
+      className="c7"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
diff --git a/packages/web/stories/examples/__snapshots__/Layout.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Layout.stories.storyshot
similarity index 58%
rename from packages/web/stories/examples/__snapshots__/Layout.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Layout.stories.storyshot
index 4aa45184f..297997c1e 100644
--- a/packages/web/stories/examples/__snapshots__/Layout.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/Layout.stories.storyshot
@@ -1,8 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | Layout Basic 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c1 {
+  height: 50px;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+
+.c3 {
+  width: 220px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c4 {
+  width: 100%;
+  height: 100%;
+}
+
 <div
-  className="sc-iyvyFf eMDJkr"
+  className="c0"
   style={
     Object {
       "height": "100vh",
@@ -10,10 +50,10 @@ exports[`Storyshots Components | Layout Basic 1`] = `
   }
 >
   <div
-    className="sc-hwwEjo bqENij"
+    className="c1"
   >
     <div
-      className="sc-hwwEjo bqENij"
+      className="c1"
       style={
         Object {
           "background": "blue",
@@ -24,10 +64,10 @@ exports[`Storyshots Components | Layout Basic 1`] = `
     </div>
   </div>
   <div
-    className="sc-kPVwWT fOgNbJ"
+    className="c2"
   >
     <div
-      className="sc-kfGgVZ kEFULu"
+      className="c3"
       style={
         Object {
           "background": "red",
@@ -37,7 +77,7 @@ exports[`Storyshots Components | Layout Basic 1`] = `
       sidebar
     </div>
     <div
-      className="sc-esjQYD harIzw"
+      className="c4"
       style={
         Object {
           "background": "yellow",
@@ -45,13 +85,13 @@ exports[`Storyshots Components | Layout Basic 1`] = `
       }
     >
       <div
-        className="sc-iyvyFf eMDJkr"
+        className="c0"
       >
         <div
-          className="sc-hwwEjo bqENij"
+          className="c1"
         >
           <div
-            className="sc-hwwEjo bqENij"
+            className="c1"
             style={
               Object {
                 "background": "blue",
@@ -62,10 +102,10 @@ exports[`Storyshots Components | Layout Basic 1`] = `
           </div>
         </div>
         <div
-          className="sc-kPVwWT fOgNbJ"
+          className="c2"
         >
           <div
-            className="sc-kfGgVZ kEFULu"
+            className="c3"
             style={
               Object {
                 "background": "red",
@@ -75,7 +115,7 @@ exports[`Storyshots Components | Layout Basic 1`] = `
             sidebar
           </div>
           <div
-            className="sc-esjQYD harIzw"
+            className="c4"
             style={
               Object {
                 "background": "pink",
diff --git a/packages/web/stories/examples/__snapshots__/List.stories.storyshot b/packages/playground/stories/examples/__snapshots__/List.stories.storyshot
similarity index 57%
rename from packages/web/stories/examples/__snapshots__/List.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/List.stories.storyshot
index 30a9fdfb3..0e658c410 100644
--- a/packages/web/stories/examples/__snapshots__/List.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/List.stories.storyshot
@@ -1,36 +1,273 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | List Basic 1`] = `
+.c6 {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  background-color: #00C3FF;
+  color: #ffffff;
+}
+
+.c1 {
+  list-style: none;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow: hidden;
+  border-radius: 0;
+}
+
+.c2 {
+  border-radius: 0;
+}
+
+.c3 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  background: #ffffff;
+  color: #456297;
+}
+
+.c3:hover {
+  background-color: #D8E3F6;
+  color: #419FFE;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c9 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  padding-left: calc(0.75rem + 16px);
+  color: #456297;
+  background: #F7F9FE;
+}
+
+.c9:hover {
+  background-color: #D8E3F6;
+  color: #419FFE;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c10 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  padding-left: calc(0.75rem + 32px);
+  color: #456297;
+  background: #EEF2FC;
+}
+
+.c10:hover {
+  background-color: #D8E3F6;
+  color: #419FFE;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c11 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  padding-left: calc(0.75rem + 48px);
+  color: #456297;
+  background: #D8E3F6;
+}
+
+.c11:hover {
+  background-color: #D8E3F6;
+  color: #419FFE;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c12 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  padding-left: calc(0.75rem + 64px);
+  color: #456297;
+  background: #C4D2EB;
+}
+
+.c13 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  padding-left: calc(0.75rem + 32px);
+  color: #456297;
+  background: #EEF2FC;
+}
+
+.c15 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: none;
+  border-top: none;
+  background: #ffffff;
+  color: #456297;
+}
+
+.c4 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c7 {
+  position: absolute;
+  right: 15px;
+  top: calc(50% - 5px);
+  pointer-events: none;
+  color: inherit;
+  -webkit-transform: rotateZ(0deg);
+  -ms-transform: rotateZ(0deg);
+  transform: rotateZ(0deg);
+  -webkit-transition: all 0.05s ease-in;
+  transition: all 0.05s ease-in;
+  -webkit-transform-origin: center center;
+  -ms-transform-origin: center center;
+  transform-origin: center center;
+}
+
+.c8 {
+  will-change: height;
+  background-color: #f7f9fd;
+  overflow: hidden;
+}
+
+.c5 {
+  text-align: right;
+  padding-right: 20px;
+}
+
+.c16 {
+  text-align: right;
+  padding-right: 0;
+}
+
+.c14 {
+  display: block;
+  font-size: 1.2rem;
+  border-left: none;
+  border-right: none;
+  padding: 0.928rem 2.856rem 0.928rem 1.428rem;
+  line-height: 1.866rem;
+}
+
+.c0 {
+  padding: 20px;
+}
+
 <div
-  className="sc-iQNlJl grrNXu"
+  className="c0"
 >
   <ul
-    className="sc-fAjcbJ kSZqmA"
+    className="c1"
     icon={null}
   >
     <li
-      className="sc-caSCKo kgbcsn"
+      className="c2"
     >
       <div
-        className="sc-gisBJw ASUEH"
+        className="c3"
         onClick={[Function]}
       >
         <div
-          className="sc-kjoXOD gtxJOV"
+          className="c4"
         >
           Level 1
         </div>
         <div
-          className="sc-kgAjT caAtIp sc-kjoXOD gtxJOV"
+          className="c5 c4"
         >
           <span
-            className="sc-gqjmRU fJwGbl"
+            className="c6"
           >
             99+
           </span>
         </div>
         <svg
-          className="sc-cHGsZl fwaSvt"
+          className="c7"
           height={10}
           onClick={[Function]}
           open={false}
@@ -44,22 +281,22 @@ exports[`Storyshots Components | List Basic 1`] = `
         </svg>
       </div>
       <ul
-        className="sc-TOsTZ kOmPiq"
+        className="c8"
       >
         <li
-          className="sc-caSCKo kgbcsn"
+          className="c2"
         >
           <div
-            className="sc-gisBJw iSKlcV"
+            className="c9"
             onClick={[Function]}
           >
             <div
-              className="sc-kjoXOD gtxJOV"
+              className="c4"
             >
               Level 2
             </div>
             <svg
-              className="sc-cHGsZl fwaSvt"
+              className="c7"
               height={10}
               onClick={[Function]}
               open={false}
@@ -73,22 +310,22 @@ exports[`Storyshots Components | List Basic 1`] = `
             </svg>
           </div>
           <ul
-            className="sc-TOsTZ kOmPiq"
+            className="c8"
           >
             <li
-              className="sc-caSCKo kgbcsn"
+              className="c2"
             >
               <div
-                className="sc-gisBJw ctnlJr"
+                className="c10"
                 onClick={[Function]}
               >
                 <div
-                  className="sc-kjoXOD gtxJOV"
+                  className="c4"
                 >
                   Level 3
                 </div>
                 <svg
-                  className="sc-cHGsZl fwaSvt"
+                  className="c7"
                   height={10}
                   onClick={[Function]}
                   open={false}
@@ -102,22 +339,22 @@ exports[`Storyshots Components | List Basic 1`] = `
                 </svg>
               </div>
               <ul
-                className="sc-TOsTZ kOmPiq"
+                className="c8"
               >
                 <li
-                  className="sc-caSCKo kgbcsn"
+                  className="c2"
                 >
                   <div
-                    className="sc-gisBJw hqxKyS"
+                    className="c11"
                     onClick={[Function]}
                   >
                     <div
-                      className="sc-kjoXOD gtxJOV"
+                      className="c4"
                     >
                       Level 4
                     </div>
                     <svg
-                      className="sc-cHGsZl fwaSvt"
+                      className="c7"
                       height={10}
                       onClick={[Function]}
                       open={false}
@@ -131,17 +368,17 @@ exports[`Storyshots Components | List Basic 1`] = `
                     </svg>
                   </div>
                   <ul
-                    className="sc-TOsTZ kOmPiq"
+                    className="c8"
                   >
                     <li
-                      className="sc-caSCKo kgbcsn"
+                      className="c2"
                     >
                       <div
-                        className="sc-gisBJw jaejea"
+                        className="c12"
                         onClick={[Function]}
                       >
                         <div
-                          className="sc-kjoXOD gtxJOV"
+                          className="c4"
                         >
                           Level 5
                         </div>
@@ -150,19 +387,19 @@ exports[`Storyshots Components | List Basic 1`] = `
                   </ul>
                 </li>
                 <li
-                  className="sc-caSCKo kgbcsn"
+                  className="c2"
                 >
                   <div
-                    className="sc-gisBJw hqxKyS"
+                    className="c11"
                     onClick={[Function]}
                   >
                     <div
-                      className="sc-kjoXOD gtxJOV"
+                      className="c4"
                     >
                       Level 4
                     </div>
                     <svg
-                      className="sc-cHGsZl fwaSvt"
+                      className="c7"
                       height={10}
                       onClick={[Function]}
                       open={false}
@@ -177,28 +414,28 @@ exports[`Storyshots Components | List Basic 1`] = `
                   </div>
                 </li>
                 <li
-                  className="sc-caSCKo kgbcsn"
+                  className="c2"
                 >
                   <div
-                    className="sc-gisBJw hqxKyS"
+                    className="c11"
                     onClick={[Function]}
                   >
                     <div
-                      className="sc-kjoXOD gtxJOV"
+                      className="c4"
                     >
                       Level 4 link with badge
                     </div>
                     <div
-                      className="sc-kgAjT caAtIp sc-kjoXOD gtxJOV"
+                      className="c5 c4"
                     >
                       <span
-                        className="sc-gqjmRU fJwGbl"
+                        className="c6"
                       >
                         1
                       </span>
                     </div>
                     <svg
-                      className="sc-cHGsZl fwaSvt"
+                      className="c7"
                       height={10}
                       onClick={[Function]}
                       open={false}
@@ -215,33 +452,33 @@ exports[`Storyshots Components | List Basic 1`] = `
               </ul>
             </li>
             <li
-              className="sc-caSCKo kgbcsn"
+              className="c2"
             >
               <div
-                className="sc-gisBJw dkKNqT"
+                className="c13"
                 onClick={[Function]}
               >
                 <div
-                  className="sc-kjoXOD gtxJOV"
+                  className="c4"
                 >
                   Level 3
                 </div>
               </div>
             </li>
             <li
-              className="sc-caSCKo kgbcsn"
+              className="c2"
             >
               <div
-                className="sc-gisBJw ctnlJr"
+                className="c10"
                 onClick={[Function]}
               >
                 <div
-                  className="sc-kjoXOD gtxJOV"
+                  className="c4"
                 >
                   Level 3 has Content
                 </div>
                 <svg
-                  className="sc-cHGsZl fwaSvt"
+                  className="c7"
                   height={10}
                   onClick={[Function]}
                   open={false}
@@ -255,10 +492,10 @@ exports[`Storyshots Components | List Basic 1`] = `
                 </svg>
               </div>
               <ul
-                className="sc-TOsTZ kOmPiq"
+                className="c8"
               >
                 <div
-                  className="sc-cJSrbW iLhBFO"
+                  className="c14"
                 >
                   Vero sint molestiae sit consequuntur aut aliquam. Aut porro maiores est rerum sed quasi fugiat culpa fuga. Voluptatem quasi excepturi earum. Repellendus qui deleniti aut blanditiis exercitationem eum dolorem libero debitis.
                 </div>
@@ -269,22 +506,22 @@ exports[`Storyshots Components | List Basic 1`] = `
       </ul>
     </li>
     <li
-      className="sc-caSCKo kgbcsn"
+      className="c2"
     >
       <div
-        className="sc-gisBJw bJqqNP"
+        className="c15"
         onClick={[Function]}
       >
         <div
-          className="sc-kjoXOD gtxJOV"
+          className="c4"
         >
           Level 1
         </div>
         <div
-          className="sc-kgAjT khffuP sc-kjoXOD gtxJOV"
+          className="c16 c4"
         >
           <span
-            className="sc-gqjmRU fJwGbl"
+            className="c6"
           >
             10
           </span>
@@ -296,27 +533,122 @@ exports[`Storyshots Components | List Basic 1`] = `
 `;
 
 exports[`Storyshots Components | List Tree/ Accordion 1`] = `
+.c9 {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  background-color: #00C3FF;
+  color: #ffffff;
+}
+
+.c1 {
+  list-style: none;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.c2 {
+  border-radius: 0;
+}
+
+.c3 {
+  box-sizing: border-box;
+  position: relative;
+  display: table;
+  width: 100%;
+  margin-bottom: -1px;
+  padding: 0.75rem 1.3rem;
+  font-size: 1.125rem;
+  word-break: break-word;
+  border: none;
+  border-bottom: #D8E3F6;
+  border-top: #D8E3F6;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  background: #ffffff;
+  color: #456297;
+}
+
+.c3:hover {
+  background-color: #D8E3F6;
+  color: #419FFE;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.c5 {
+  position: absolute;
+  right: 15px;
+  top: calc(50% - 5px);
+  pointer-events: none;
+  color: inherit;
+  -webkit-transform: rotateZ(0deg);
+  -ms-transform: rotateZ(0deg);
+  transform: rotateZ(0deg);
+  -webkit-transition: all 0.05s ease-in;
+  transition: all 0.05s ease-in;
+  -webkit-transform-origin: center center;
+  -ms-transform-origin: center center;
+  transform-origin: center center;
+}
+
+.c6 {
+  will-change: height;
+  background-color: #f7f9fd;
+  overflow: hidden;
+}
+
+.c8 {
+  text-align: right;
+  padding-right: 20px;
+}
+
+.c7 {
+  display: block;
+  font-size: 1.2rem;
+  border-left: none;
+  border-right: none;
+  padding: 0.928rem 2.856rem 0.928rem 1.428rem;
+  line-height: 1.866rem;
+}
+
+.c0 {
+  padding: 20px;
+}
+
 <div
-  className="sc-iQNlJl grrNXu"
+  className="c0"
 >
   <ul
-    className="sc-fAjcbJ gnaULz"
+    className="c1"
     icon={null}
   >
     <li
-      className="sc-caSCKo kgbcsn"
+      className="c2"
     >
       <div
-        className="sc-gisBJw ktlQqE"
+        className="c3"
         onClick={[Function]}
       >
         <div
-          className="sc-kjoXOD gtxJOV"
+          className="c4"
         >
           Collaspe 1
         </div>
         <svg
-          className="sc-cHGsZl fwaSvt"
+          className="c5"
           height={10}
           onClick={[Function]}
           open={false}
@@ -330,38 +662,38 @@ exports[`Storyshots Components | List Tree/ Accordion 1`] = `
         </svg>
       </div>
       <ul
-        className="sc-TOsTZ kOmPiq"
+        className="c6"
       >
         <div
-          className="sc-cJSrbW iLhBFO"
+          className="c7"
         >
           Quo voluptates numquam nulla libero vel facere quibusdam sunt. Hic sed delectus et ipsum iste. Eos eligendi quibusdam. Possimus quisquam minima velit maxime officia consequatur et magni. Necessitatibus quos sed alias architecto est pariatur. Et vero aperiam quaerat. Ut numquam quaerat et aut neque ratione velit et dolor. Ipsam repellendus saepe quas et iste debitis molestias recusandae ipsum. Praesentium cumque est velit delectus non atque ullam. Non quis voluptate doloribus voluptatum assumenda. Illum est incidunt a eius voluptatum laudantium repellat. Ipsum eos non molestias qui ab quasi pariatur. Ipsum ea perferendis dolorem nihil et dolor. Expedita officia accusantium incidunt illum illum consequuntur velit.
         </div>
       </ul>
     </li>
     <li
-      className="sc-caSCKo kgbcsn"
+      className="c2"
     >
       <div
-        className="sc-gisBJw ktlQqE"
+        className="c3"
         onClick={[Function]}
       >
         <div
-          className="sc-kjoXOD gtxJOV"
+          className="c4"
         >
           Collaspe 2
         </div>
         <div
-          className="sc-kgAjT caAtIp sc-kjoXOD gtxJOV"
+          className="c8 c4"
         >
           <span
-            className="sc-gqjmRU fJwGbl"
+            className="c9"
           >
             1
           </span>
         </div>
         <svg
-          className="sc-cHGsZl fwaSvt"
+          className="c5"
           height={10}
           onClick={[Function]}
           open={false}
@@ -375,10 +707,10 @@ exports[`Storyshots Components | List Tree/ Accordion 1`] = `
         </svg>
       </div>
       <ul
-        className="sc-TOsTZ kOmPiq"
+        className="c6"
       >
         <div
-          className="sc-cJSrbW iLhBFO"
+          className="c7"
         >
           Nostrum tempora ipsum et in. Numquam praesentium voluptas itaque ratione iste quisquam harum. Voluptatibus sit rerum. Vitae consequatur eaque aliquid porro perspiciatis culpa et sit. Iste illo eum cum. Et ea beatae dolorum tempore possimus iste quia nobis beatae. Aut voluptatibus illo possimus inventore laudantium nobis aperiam. Aut aut vel officiis laborum nihil dolor. Aut velit eligendi at at sed esse inventore. Perspiciatis ipsum debitis in voluptatem error cumque iure earum nostrum. Quo recusandae dolores esse. Ipsam voluptas aut et nisi iste qui minima mollitia alias.
         </div>
diff --git a/packages/web/stories/examples/__snapshots__/Menu.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Menu.stories.storyshot
similarity index 76%
rename from packages/web/stories/examples/__snapshots__/Menu.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Menu.stories.storyshot
index f16a95c23..1b4ad8ebe 100644
--- a/packages/web/stories/examples/__snapshots__/Menu.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/Menu.stories.storyshot
@@ -1,21 +1,96 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | Menu Basic 1`] = `
+.c3 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #456297;
+  border: 1px solid transparent;
+}
+
+.c3:hover {
+  background: #D8E3F6;
+}
+
+.c3:active {
+  background: #C4D2EB;
+}
+
+.c3:hover {
+  background: #D8E3F6;
+}
+
+.c3[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c1 {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  border-left: #D8E3F6;
+  height: 100%;
+}
+
+.c1:first-child {
+  border-left: none;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-radius: 0;
+}
+
+.c0 {
+  display: inline-block;
+  height: 100%;
+}
+
+.c4 {
+  margin-right: 10px;
+}
+
 <div
-  className="sc-bYSBpT ieiJAw"
+  className="c0"
 >
   <div
-    className="sc-btzYZH cjzamm"
+    className="c1"
   >
     <button
-      className="sc-lhVmIH KlvIU sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
       style={null}
     >
       <svg
-        className="sc-bsbRJL lcATwD"
+        className="c4"
         height={16}
         onClick={[Function]}
         viewBox="0 0 731.4285714285713 1024"
@@ -30,17 +105,17 @@ exports[`Storyshots Components | Menu Basic 1`] = `
     </button>
   </div>
   <div
-    className="sc-btzYZH cjzamm"
+    className="c1"
   >
     <button
-      className="sc-lhVmIH KlvIU sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
       style={null}
     >
       <svg
-        className="sc-bsbRJL lcATwD"
+        className="c4"
         height={16}
         onClick={[Function]}
         viewBox="0 0 950.8571428571428 1024"
@@ -55,17 +130,17 @@ exports[`Storyshots Components | Menu Basic 1`] = `
     </button>
   </div>
   <div
-    className="sc-btzYZH cjzamm"
+    className="c1"
   >
     <button
-      className="sc-lhVmIH KlvIU sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
       style={null}
     >
       <svg
-        className="sc-bsbRJL lcATwD"
+        className="c4"
         height={16}
         onClick={[Function]}
         viewBox="0 0 877.7142857142857 1024"
@@ -80,17 +155,17 @@ exports[`Storyshots Components | Menu Basic 1`] = `
     </button>
   </div>
   <div
-    className="sc-btzYZH cjzamm"
+    className="c1"
   >
     <button
-      className="sc-lhVmIH KlvIU sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
       style={null}
     >
       <svg
-        className="sc-bsbRJL lcATwD"
+        className="c4"
         height={16}
         onClick={[Function]}
         viewBox="0 0 877.7142857142857 1024"
diff --git a/packages/playground/stories/examples/__snapshots__/Modal.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Modal.stories.storyshot
new file mode 100644
index 000000000..005af4ee5
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Modal.stories.storyshot
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Modal Basic 1`] = `
+.c0 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #456297;
+  border: 1px solid transparent;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0:active {
+  background: #C4D2EB;
+}
+
+.c0:hover {
+  background: #D8E3F6;
+}
+
+.c0[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<button
+  className="c0"
+  onClick={[Function]}
+  selected={false}
+  size="medium"
+  style={null}
+>
+  Show
+</button>
+`;
diff --git a/packages/web/stories/examples/__snapshots__/Pagination.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Pagination.stories.storyshot
similarity index 54%
rename from packages/web/stories/examples/__snapshots__/Pagination.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Pagination.stories.storyshot
index f8bd63027..89de11067 100644
--- a/packages/web/stories/examples/__snapshots__/Pagination.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/Pagination.stories.storyshot
@@ -1,14 +1,120 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | Pagination Basic 1`] = `
+.c3 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: transparent;
+  color: #456297;
+  border: 1px solid transparent;
+}
+
+.c3:hover {
+  background: #D8E3F6;
+}
+
+.c3:active {
+  background: #C4D2EB;
+}
+
+.c3:hover {
+  background: #D8E3F6;
+}
+
+.c3[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c4 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 1rem;
+  border-radius: 4px;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.533rem - 1px) 1.066rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #C4D2EB;
+  color: #456297;
+  border: 1px solid transparent;
+}
+
+.c4:hover {
+  background: #D8E3F6;
+}
+
+.c4:active {
+  background: #C4D2EB;
+}
+
+.c4:hover {
+  background: #D8E3F6;
+}
+
+.c4[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  font-size: 0;
+}
+
+.c2 {
+  font-size: 0.875rem;
+}
+
+.c1 {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0.875rem;
+}
+
 <ul
-  className="sc-iELTvK kPrTIV"
+  className="c0"
 >
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -18,10 +124,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -47,10 +153,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -60,10 +166,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -73,10 +179,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX fymSEW"
+      className="c2 c4"
       onClick={[Function]}
       selected={true}
       size="medium"
@@ -86,10 +192,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -99,10 +205,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -112,10 +218,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
@@ -141,10 +247,10 @@ exports[`Storyshots Components | Pagination Basic 1`] = `
     </button>
   </li>
   <li
-    className="sc-jwKygS vacNf"
+    className="c1"
   >
     <button
-      className="sc-cmTdod dSAgOC sc-ifAKCX iisouQ"
+      className="c2 c3"
       onClick={[Function]}
       selected={false}
       size="medium"
diff --git a/packages/playground/stories/examples/__snapshots__/Pill.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Pill.stories.storyshot
new file mode 100644
index 000000000..292994765
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Pill.stories.storyshot
@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Pill Basic 1`] = `
+.c6 {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  background-color: #00C3FF;
+  color: #ffffff;
+}
+
+.c0 {
+  min-width: 250px;
+  position: relative;
+  white-space: nowrap;
+}
+
+.c1 {
+  display: inline-block;
+  background: unset;
+}
+
+.c2 {
+  display: inline-block;
+  padding: unset;
+}
+
+.c2:first-child {
+  padding-left: 0;
+}
+
+.c3 {
+  background-color: #2A4880;
+  color: #ffffff;
+  font-size: 1rem;
+  position: relative;
+  z-index: 5;
+  display: inline-block;
+  padding: 6px 22px 7px;
+  line-height: 1.3;
+  border-radius: 2.16667rem;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.c7 {
+  background-color: transparent;
+  color: #456296;
+  font-size: 1rem;
+  position: relative;
+  z-index: 5;
+  display: inline-block;
+  padding: 6px 22px 7px;
+  line-height: 1.3;
+  border-radius: 2.16667rem;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.c7:hover {
+  background-color: #d8e2f5;
+  color: #456296;
+}
+
+.c7:active {
+  background-color: #c3d1eb;
+  color: #456296;
+}
+
+.c4 {
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: -1px;
+  margin-bottom: 1px;
+  width: auto;
+}
+
+.c5 {
+  display: inline-block;
+  margin: 0 -5px 0 4px;
+  float: right;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+        offset={0}
+        onClick={[Function]}
+        onSelect={[Function]}
+        selected={true}
+      >
+        <span
+          className="c4"
+        >
+          Dashboard
+        </span>
+        <span
+          className="c5 c6"
+        >
+          23
+        </span>
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c7"
+        offset={0}
+        onClick={[Function]}
+        onSelect={[Function]}
+        selected={false}
+      >
+        <span
+          className="c4"
+        >
+          Projects
+        </span>
+        <span
+          className="c5 c6"
+        >
+          99+
+        </span>
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c7"
+        offset={0}
+        onClick={[Function]}
+        onSelect={[Function]}
+        selected={false}
+      >
+        <span
+          className="c4"
+        >
+          Issues
+        </span>
+        <span
+          className="c5 c6"
+        >
+          6
+        </span>
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c7"
+        offset={0}
+        onClick={[Function]}
+        onSelect={[Function]}
+        selected={false}
+      >
+        <span
+          className="c4"
+        >
+          Reports
+        </span>
+      </div>
+    </div>
+    <div
+      className="c2"
+    >
+      <div
+        className="c7"
+        offset={0}
+        onClick={[Function]}
+        onSelect={[Function]}
+        selected={false}
+      >
+        <span
+          className="c4"
+        >
+          User Center
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/playground/stories/examples/__snapshots__/ProgressBar.stories.storyshot b/packages/playground/stories/examples/__snapshots__/ProgressBar.stories.storyshot
new file mode 100644
index 000000000..02ad97a5c
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/ProgressBar.stories.storyshot
@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | ProgressBar Basic 1`] = `
+.c5 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border-radius: 5px;
+  left: 0;
+  height: 10px;
+  top: 0;
+  width: 0px;
+  pointer-events: none;
+  background-color: #0E86FE;
+  border-bottom-right-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.c4 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  top: 50%;
+  left: 0;
+  height: 10px;
+  margin-top: -4px;
+  background-repeat: repeat-x;
+  border-radius: 5px;
+  border-color: #95ACD4;
+  width: 100%;
+  background-color: #D8E3F6;
+  cursor: pointer;
+}
+
+.c0 {
+  display: block;
+  margin-bottom: 14px;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: absolute;
+  top: 4px;
+  border: 1px solid transparent;
+  line-height: 2em;
+  width: 100%;
+  height: 100%;
+  left: -1px;
+  right: auto;
+  text-align: right;
+}
+
+.c3 {
+  min-width: 10px;
+  white-space: nowrap;
+  color: #95abd3;
+}
+
+.c2 {
+  font-size: 12px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    size="medium"
+  >
+    <div
+      className="c2 c3"
+    >
+      File uploading
+    </div>
+    <div
+      className="c3"
+    >
+      60
+      %
+    </div>
+  </div>
+  <div
+    className="c4"
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    size="medium"
+  >
+    <div
+      className="c5"
+      disabled={false}
+      size="medium"
+      width={0}
+    />
+  </div>
+</div>
+`;
diff --git a/packages/playground/stories/examples/__snapshots__/Radio.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Radio.stories.storyshot
new file mode 100644
index 000000000..b50a77f17
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Radio.stories.storyshot
@@ -0,0 +1,285 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Radio Basic 1`] = `
+.c0 {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin: 0 5px 10px 0;
+  word-break: break-word;
+  color: #456297;
+  line-height: 1.3333rem;
+  font-size: 1rem;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.c0:hover input {
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  border-color: #0E86FE;
+}
+
+.c1 {
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  position: relative;
+  box-sizing: content-box;
+  margin: -2px 0 0 0;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #C4D2EB;
+  border-radius: 50%;
+  background-color: #ffffff;
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+  cursor: pointer;
+}
+
+.c1:checked {
+  border-color: #0E86FE;
+}
+
+.c1:checked:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  background: #0E86FE;
+}
+
+.c1:after {
+  content: '';
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  top: calc((15px - 9px) / 2);
+  left: calc((15px - 9px) / 2);
+  border-radius: 50%;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+}
+
+.c2 {
+  padding-left: 4px;
+}
+
+<div
+  className=""
+>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={false}
+      name="color"
+      type="radio"
+      value="red"
+    />
+    <span
+      className="c2"
+    >
+      Red
+    </span>
+  </label>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={true}
+      name="color"
+      type="radio"
+      value="blue"
+    />
+    <span
+      className="c2"
+    >
+      Blue
+    </span>
+  </label>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={false}
+      name="color"
+      type="radio"
+      value="yellow"
+    />
+    <span
+      className="c2"
+    >
+      Yellow
+    </span>
+  </label>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={false}
+      name="color"
+      type="radio"
+      value="green"
+    />
+    <span
+      className="c2"
+    >
+      Green
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Components | Radio Disable 1`] = `
+.c0 {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin: 0 5px 10px 0;
+  word-break: break-word;
+  color: #95ACD4;
+  line-height: 1.3333rem;
+  font-size: 1rem;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:hover input {
+  box-shadow: 0 0 0 2px rgba(14,134,254,0.2);
+  border-color: #0E86FE;
+}
+
+.c1 {
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  position: relative;
+  box-sizing: content-box;
+  margin: -2px 0 0 0;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #C4D2EB;
+  border-radius: 50%;
+  background-color: #ffffff;
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+  cursor: pointer;
+}
+
+.c1:checked {
+  border-color: #C4D2EB;
+}
+
+.c1:checked:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  background: #95ACD4;
+}
+
+.c1:after {
+  content: '';
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  top: calc((15px - 9px) / 2);
+  left: calc((15px - 9px) / 2);
+  border-radius: 50%;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: all 120ms ease-out;
+  transition: all 120ms ease-out;
+}
+
+.c2 {
+  padding-left: 4px;
+}
+
+<div
+  className=""
+>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={false}
+      name="color"
+      type="radio"
+      value="red"
+    />
+    <span
+      className="c2"
+    >
+      Red
+    </span>
+  </label>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={true}
+      name="color"
+      type="radio"
+      value="blue"
+    />
+    <span
+      className="c2"
+    >
+      Blue
+    </span>
+  </label>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={false}
+      name="color"
+      type="radio"
+      value="yellow"
+    />
+    <span
+      className="c2"
+    >
+      Yellow
+    </span>
+  </label>
+  <label
+    className="c0"
+  >
+    <input
+      className="c1"
+      defaultChecked={false}
+      name="color"
+      type="radio"
+      value="green"
+    />
+    <span
+      className="c2"
+    >
+      Green
+    </span>
+  </label>
+</div>
+`;
diff --git a/packages/playground/stories/examples/__snapshots__/Slider.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Slider.stories.storyshot
new file mode 100644
index 000000000..ffa687b52
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Slider.stories.storyshot
@@ -0,0 +1,344 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Slider Basic 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  min-width: 200px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 26px;
+}
+
+.c4 {
+  top: 0;
+  position: absolute;
+  border-radius: 100%;
+  border-color: #C4D2EB;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 1px rgba(196,210,235,0.3);
+  text-indent: -3333px;
+  overflow: hidden;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  outline: 0;
+  border-style: solid;
+  border-width: 1px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+}
+
+.c4:hover {
+  border-color: #0E86FE;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 2px rgba(196,210,235,0.3);
+}
+
+.c3 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border-radius: 5px;
+  left: 0;
+  height: 10px;
+  top: 0;
+  width: 0px;
+  pointer-events: none;
+  background-color: #0E86FE;
+  border-bottom-right-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.c2 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  top: 50%;
+  left: 0;
+  height: 10px;
+  margin-top: -4px;
+  background-repeat: repeat-x;
+  border-radius: 5px;
+  border-color: #95ACD4;
+  width: 100%;
+  background-color: #D8E3F6;
+  cursor: pointer;
+}
+
+<div
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={0}
+  className="c0"
+  disabled={false}
+>
+  <div
+    className="c1"
+    disabled={false}
+    size="medium"
+  >
+    <div
+      className="c2"
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchStart={[Function]}
+      size="medium"
+    >
+      <div
+        className="c3"
+        disabled={false}
+        size="medium"
+        width={0}
+      />
+    </div>
+    <div
+      className="c4"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      size="medium"
+      style={
+        Object {
+          "left": "0px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components | Slider with Custom Button 1`] = `
+.c1 {
+  position: relative;
+  background: #F7F9FE;
+  color: #456297;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8E3F6;
+  font-size: 0.866rem;
+  border-radius: 3px;
+  padding: calc(0.4rem - 1px) 0.8rem;
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: calc(0.4rem - 1px) 0.8rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background: #EEF2FC;
+  color: #456297;
+  border-color: #EEF2FC;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0;
+  border-radius: 100%;
+  width: 2.066rem;
+  line-height: 2.066rem;
+  height: 2.066rem;
+}
+
+.c1:hover {
+  background: #D8E3F6;
+}
+
+.c1:active {
+  background: #C4D2EB;
+}
+
+.c1:hover {
+  background: #D8E3F6;
+  border-color: #D8E3F6;
+}
+
+.c1:active {
+  background: #95ACD4;
+  border-color: #95ACD4;
+}
+
+.c1[disabled] {
+  color: #93a8ce;
+  border-color: #eaeff8;
+  background-color: #F7F9FE;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  min-width: 200px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 26px;
+}
+
+.c5 {
+  top: 0;
+  position: absolute;
+  border-radius: 100%;
+  border-color: #C4D2EB;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 1px rgba(196,210,235,0.3);
+  text-indent: -3333px;
+  overflow: hidden;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  outline: 0;
+  border-style: solid;
+  border-width: 1px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+}
+
+.c5:hover {
+  border-color: #0E86FE;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 2px rgba(196,210,235,0.3);
+}
+
+.c4 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border-radius: 5px;
+  left: 0;
+  height: 10px;
+  top: 0;
+  width: 0px;
+  pointer-events: none;
+  background-color: #0E86FE;
+  border-bottom-right-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.c3 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  top: 50%;
+  left: 0;
+  height: 10px;
+  margin-top: -4px;
+  background-repeat: repeat-x;
+  border-radius: 5px;
+  border-color: #95ACD4;
+  width: 100%;
+  background-color: #D8E3F6;
+  cursor: pointer;
+}
+
+<div
+  aria-valuemax={100}
+  aria-valuemin={0}
+  aria-valuenow={50}
+  className="c0"
+  disabled={false}
+>
+  <button
+    className="c1"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    selected={false}
+    size="small"
+    style={
+      Object {
+        "flex": "0 0 auto",
+        "marginRight": "12px",
+      }
+    }
+  >
+    -
+  </button>
+  <div
+    className="c2"
+    disabled={false}
+    size="medium"
+  >
+    <div
+      className="c3"
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchStart={[Function]}
+      size="medium"
+    >
+      <div
+        className="c4"
+        disabled={false}
+        size="medium"
+        width={0}
+      />
+    </div>
+    <div
+      className="c5"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      size="medium"
+      style={
+        Object {
+          "left": "0px",
+        }
+      }
+    />
+  </div>
+  <button
+    className="c1"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    selected={false}
+    size="small"
+    style={
+      Object {
+        "flex": "0 0 auto",
+        "marginLeft": "12px",
+      }
+    }
+  >
+    +
+  </button>
+</div>
+`;
diff --git a/packages/web/stories/examples/__snapshots__/Switch.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Switch.stories.storyshot
similarity index 56%
rename from packages/web/stories/examples/__snapshots__/Switch.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Switch.stories.storyshot
index 84f7a67dc..ce38b5488 100644
--- a/packages/web/stories/examples/__snapshots__/Switch.stories.storyshot
+++ b/packages/playground/stories/examples/__snapshots__/Switch.stories.storyshot
@@ -1,22 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components | Switch Basic 1`] = `
+.c0 {
+  display: none;
+}
+
+.c0:checked + label {
+  background-color: #0E86FE;
+  box-shadow: 0 0 0 1px #0E86FE;
+}
+
+.c0:checked + label div {
+  -webkit-transform: translate3d(30px,0,0);
+  -ms-transform: translate3d(30px,0,0);
+  transform: translate3d(30px,0,0);
+  border-color: #0E86FE;
+  box-shadow: 0 0 0 3px rgba(14,134,254,0.3);
+}
+
+.c0:disabled + label {
+  background-color: #EEF2FC;
+  cursor: not-allowed;
+  point-events: none;
+}
+
+.c0:disabled + label div {
+  background-color: #EEF2FC;
+  box-shadow: none;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  width: 53px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: #EEF2FC;
+  padding: 1px;
+  box-shadow: 0 0 0 1px #C4D2EB;
+  cursor: pointer;
+}
+
+.c2 {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  display: block;
+  box-shadow: 1px 0 0 1px rgba(196,210,235,0.2);
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  box-sizing: border-box;
+  border: 1px solid #C4D2EB;
+}
+
 <div
-  className="sc-eNQAEJ fAbPPh"
+  className=""
   onClick={[Function]}
 >
   <input
     checked={false}
-    className="sc-hMqMXs ipZWfr"
+    className="c0"
     disabled={false}
     type="checkbox"
   />
   <label
-    className="sc-kEYyzF faijeD"
+    className="c1"
     disabled={false}
   >
     <div
-      className="sc-kkGfuU cidhEQ"
+      className="c2"
       disabled={false}
       icon={null}
     />
@@ -25,22 +79,85 @@ exports[`Storyshots Components | Switch Basic 1`] = `
 `;
 
 exports[`Storyshots Components | Switch with Icon Button 1`] = `
+.c0 {
+  display: none;
+}
+
+.c0:checked + label {
+  background-color: #0E86FE;
+  box-shadow: 0 0 0 1px #0E86FE;
+}
+
+.c0:checked + label div {
+  -webkit-transform: translate3d(30px,0,0);
+  -ms-transform: translate3d(30px,0,0);
+  transform: translate3d(30px,0,0);
+  border-color: #0E86FE;
+  box-shadow: 0 0 0 3px rgba(14,134,254,0.3);
+}
+
+.c0:disabled + label {
+  background-color: #EEF2FC;
+  cursor: not-allowed;
+  point-events: none;
+}
+
+.c0:disabled + label div {
+  background-color: #EEF2FC;
+  box-shadow: none;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  width: 53px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: #EEF2FC;
+  padding: 1px;
+  box-shadow: 0 0 0 1px #C4D2EB;
+  cursor: pointer;
+}
+
+.c2 {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  display: block;
+  box-shadow: 1px 0 0 1px rgba(196,210,235,0.2);
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  box-sizing: border-box;
+  border: 1px solid #C4D2EB;
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  text-align: center;
+  line-height: 36px;
+  font-size: 1.2rem;
+  color: #C4D2EB;
+}
+
 <div
-  className="sc-eNQAEJ fAbPPh"
+  className=""
   onClick={[Function]}
 >
   <input
     checked={false}
-    className="sc-hMqMXs ipZWfr"
+    className="c0"
     disabled={false}
     type="checkbox"
   />
   <label
-    className="sc-kEYyzF faijeD"
+    className="c1"
     disabled={false}
   >
     <div
-      className="sc-kkGfuU jHgDJq"
+      className="c2"
       disabled={false}
       icon="wifi"
     >
@@ -61,23 +178,102 @@ exports[`Storyshots Components | Switch with Icon Button 1`] = `
 `;
 
 exports[`Storyshots Components | Switch with Icon Label 1`] = `
+.c0 {
+  display: none;
+}
+
+.c0:checked + label {
+  background-color: #0E86FE;
+  box-shadow: 0 0 0 1px #0E86FE;
+}
+
+.c0:checked + label div {
+  -webkit-transform: translate3d(30px,0,0);
+  -ms-transform: translate3d(30px,0,0);
+  transform: translate3d(30px,0,0);
+  border-color: #0E86FE;
+  box-shadow: 0 0 0 3px rgba(14,134,254,0.3);
+}
+
+.c0:disabled + label {
+  background-color: #EEF2FC;
+  cursor: not-allowed;
+  point-events: none;
+}
+
+.c0:disabled + label div {
+  background-color: #EEF2FC;
+  box-shadow: none;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  width: 53px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: #EEF2FC;
+  padding: 1px;
+  box-shadow: 0 0 0 1px #C4D2EB;
+  cursor: pointer;
+}
+
+.c5 {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  display: block;
+  box-shadow: 1px 0 0 1px rgba(196,210,235,0.2);
+  -webkit-transition: all 120ms ease-in;
+  transition: all 120ms ease-in;
+  box-sizing: border-box;
+  border: 1px solid #C4D2EB;
+}
+
+.c3 {
+  position: absolute;
+  top: 3px;
+  right: 8px;
+  font-size: 13px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  color: #C4D2EB;
+  text-align: center;
+  -webkit-transition: all 300ms ease-in;
+  transition: all 300ms ease-in;
+  opacity: 1;
+  pointer-events: none;
+}
+
+.c4 {
+  display: block;
+}
+
+.c2 {
+  display: none;
+  left: -20px;
+}
+
 <div
-  className="sc-eNQAEJ fAbPPh"
+  className=""
   onClick={[Function]}
 >
   <input
     checked={false}
-    className="sc-hMqMXs ipZWfr"
+    className="c0"
     disabled={false}
     type="checkbox"
   />
   <label
-    className="sc-kEYyzF faijeD"
+    className="c1"
     disabled={false}
   >
     <div
       checked={false}
-      className="sc-eHgmQL kXwoSs sc-iAyFgw jrhtEm"
+      className="c2 c3"
     >
       <svg
         height={16}
@@ -93,7 +289,7 @@ exports[`Storyshots Components | Switch with Icon Label 1`] = `
     </div>
     <div
       checked={false}
-      className="sc-hSdWYo dlRJny sc-iAyFgw jrhtEm"
+      className="c4 c3"
     >
       <svg
         height={16}
@@ -108,7 +304,7 @@ exports[`Storyshots Components | Switch with Icon Label 1`] = `
       </svg>
     </div>
     <div
-      className="sc-kkGfuU cidhEQ"
+      className="c5"
       disabled={false}
       icon={null}
     />
diff --git a/packages/web/stories/examples/__snapshots__/Table.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Table.stories.storyshot
similarity index 100%
rename from packages/web/stories/examples/__snapshots__/Table.stories.storyshot
rename to packages/playground/stories/examples/__snapshots__/Table.stories.storyshot
diff --git a/packages/playground/stories/examples/__snapshots__/Tabs.stories.storyshot b/packages/playground/stories/examples/__snapshots__/Tabs.stories.storyshot
new file mode 100644
index 000000000..c2d773555
--- /dev/null
+++ b/packages/playground/stories/examples/__snapshots__/Tabs.stories.storyshot
@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components | Tab Basic 1`] = `
+Array [
+  .c5 {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  background-color: #00C3FF;
+  color: #ffffff;
+}
+
+.c7 {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.725rem;
+  background-color: #ffffff;
+  color: #00C3FF;
+}
+
+.c4 {
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  border-radius: 4.975rem;
+  margin: 0 -5px 0 4px;
+}
+
+.c2 {
+  display: inline-block;
+  padding: 5px 20px 4px;
+  line-height: 1.4;
+  font-size: 1rem;
+  color: #ffffff;
+  background-color: rgba(255,255,255,0.3);
+  border-radius: 4px 4px 0 0;
+  margin-right: 2px;
+  cursor: pointer;
+  color: #456297;
+  background-color: #ffffff;
+}
+
+.c6 {
+  display: inline-block;
+  padding: 5px 20px 4px;
+  line-height: 1.4;
+  font-size: 1rem;
+  color: #ffffff;
+  background-color: rgba(255,255,255,0.3);
+  border-radius: 4px 4px 0 0;
+  margin-right: 2px;
+  cursor: pointer;
+}
+
+.c3 {
+  vertical-align: middle;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: -1px;
+  margin-bottom: 1px;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  background: linear-gradient(to left,#00C3FF,#0E86FE);
+  width: auto;
+  border-radius: 4px 4px 0 0;
+  padding: 8px 0 0 12px;
+}
+
+<div
+    className="c0"
+  >
+    <ul
+      className="c1"
+    >
+      <div
+        className="c2"
+        onClick={[Function]}
+      >
+        <span
+          className="c3"
+        >
+          tab1
+        </span>
+        <span
+          className="c4 c5"
+        >
+          10
+        </span>
+      </div>
+      <div
+        className="c6"
+        onClick={[Function]}
+      >
+        <span
+          className="c3"
+        >
+          tab2
+        </span>
+        <span
+          className="c4 c7"
+        >
+          99+
+        </span>
+      </div>
+      <div
+        className="c6"
+        onClick={[Function]}
+      >
+        <span
+          className="c3"
+        >
+          tab3
+        </span>
+      </div>
+      <div
+        className="c6"
+        onClick={[Function]}
+      >
+        <span
+          className="c3"
+        >
+          tab4
+        </span>
+      </div>
+    </ul>
+  </div>,
+  .c0 {
+  display: block;
+  background-color: #ffffff;
+  color: #7189B6;
+  font-size: 0.93333rem;
+  padding: 10px;
+}
+
+<div>
+    <div
+      className="c0"
+    >
+      <p>
+        Eius sunt quidem aut omnis harum. Maiores repellendus eligendi saepe. Ea qui ratione quisquam. Ipsa quae sit incidunt tempora qui vel error labore voluptates. Omnis ut mollitia dolor in dolore. Soluta dolor incidunt ipsam aspernatur in et consequuntur voluptatum nobis. Animi est quod harum commodi. Et quis dignissimos molestiae provident. Blanditiis et natus ut quia voluptatem. Labore voluptatum tempore architecto. Est qui illo ipsam iusto ipsam voluptatem dolor omnis ut. Provident perferendis aperiam. Quidem autem eius tempora maxime quo reiciendis tenetur. Ab voluptas incidunt quam et asperiores veniam qui sint.
+      </p>
+    </div>
+  </div>,
+]
+`;
diff --git a/packages/web/stories/utils/__snapshots__/space.stories.storyshot b/packages/playground/stories/utils/__snapshots__/space.stories.storyshot
similarity index 76%
rename from packages/web/stories/utils/__snapshots__/space.stories.storyshot
rename to packages/playground/stories/utils/__snapshots__/space.stories.storyshot
index fa2498645..b00739002 100644
--- a/packages/web/stories/utils/__snapshots__/space.stories.storyshot
+++ b/packages/playground/stories/utils/__snapshots__/space.stories.storyshot
@@ -1,8 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots utils | space Basic 1`] = `
+.c0 {
+  padding: 20px;
+}
+
 <div
-  className="sc-hZSUBg eWkkfQ"
+  className="c0"
 >
   Container with space utils
 </div>
diff --git a/packages/web/stories/utils/space.md b/packages/playground/stories/utils/space.md
similarity index 100%
rename from packages/web/stories/utils/space.md
rename to packages/playground/stories/utils/space.md
diff --git a/packages/web/stories/utils/space.stories.jsx b/packages/playground/stories/utils/space.stories.jsx
similarity index 93%
rename from packages/web/stories/utils/space.stories.jsx
rename to packages/playground/stories/utils/space.stories.jsx
index d5177b0ba..c0aff7a6f 100644
--- a/packages/web/stories/utils/space.stories.jsx
+++ b/packages/playground/stories/utils/space.stories.jsx
@@ -15,9 +15,9 @@ import {
   select,
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
+import { utils } from '@gssfed/vital-ui-kit-react';
 import md from './space.md';
 
-import { utils } from '../../src';
 
 const Container = styled.div`
   ${utils.space};
diff --git a/packages/table/package.json b/packages/table/package.json
new file mode 100644
index 000000000..462fc4ecb
--- /dev/null
+++ b/packages/table/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@gssfed/react-table",
+  "version": "0.0.1",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src/ --out-dir dist/"
+  },
+  "author": "Eric Yip (https://github.com/ericyip)",
+  "license": "MIT",
+  "devDependencies": {
+    "react-virtualized": "^9.19.1"
+  },
+  "peerDependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "react-virtualized": "^9",
+    "styled-components": ">=2 || >=3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GSS-FED/vital-ui-kit-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GSS-FED/vital-ui-kit-react/issues"
+  },
+  "homepage": "https://github.com/GSS-FED/vital-ui-kit-react#readme",
+  "dependencies": {
+    "classnames": "^2.2.5"
+  }
+}
diff --git a/packages/table/src/SimpleTable/Column.jsx b/packages/table/src/SimpleTable/Column.jsx
new file mode 100644
index 000000000..4ba116543
--- /dev/null
+++ b/packages/table/src/SimpleTable/Column.jsx
@@ -0,0 +1,29 @@
+// @flow
+
+import * as React from 'react';
+import styled from 'styled-components';
+import {
+  Column as BaseColumn,
+  ColumnProps,
+  // $FlowFixMe
+} from 'react-virtualized';
+import defaultHeaderRenderer from './defaultHeaderRenderer';
+
+const StyledColumn = styled(BaseColumn)``;
+
+class Column extends React.Component<ColumnProps> {
+  static defaultProps = {
+    ...BaseColumn.defaultProps,
+    headerRenderer: defaultHeaderRenderer,
+  };
+
+  static HeaderRenderer = defaultHeaderRenderer;
+  
+  static propTypes = BaseColumn.propTypes; 
+
+  render() {
+    return <StyledColumn {...this.props} />;
+  }
+}
+
+export default Column;
diff --git a/packages/table/src/SimpleTable/SimpleTable.jsx b/packages/table/src/SimpleTable/SimpleTable.jsx
new file mode 100644
index 000000000..81c08eebd
--- /dev/null
+++ b/packages/table/src/SimpleTable/SimpleTable.jsx
@@ -0,0 +1,59 @@
+// @flow
+
+import * as React from 'react';
+import styled from 'styled-components';
+import {
+  type TableProps,
+  Table as BaseTable,
+  // $FlowFixMe
+} from 'react-virtualized';
+import '../style.css';
+import defaultRowRenderer from './defaultRowRenderer';
+import defaultHeaderRowRenderer from './defaultHeaderRowRenderer';
+
+BaseTable.propTypes.children = () => {};
+
+const StyledTable: React.ComponentType<TableProps> = styled(
+  BaseTable,
+)`
+`;
+
+type Props = TableProps & {
+  hasHorizontalBorder?: boolean,
+  striped?: boolean,
+};
+
+class SimpleTable extends React.Component<Props> {
+  static defaultProps = {
+    ...BaseTable.defaultProps,
+    rowRenderer: defaultRowRenderer,
+    headerRowRenderer: defaultHeaderRowRenderer,
+    hasHorizontalBorder: false,
+    rowHeight: 40,
+    striped: true,
+    headerHeight: 40,
+  };
+
+  static HeaderRowRenderer = defaultHeaderRowRenderer;
+  
+  static RowRenderer = defaultRowRenderer;
+
+  render() {
+    const {
+      hasHorizontalBorder,
+      hasVerticalBorder,
+      striped,
+      ...props
+    } = this.props;
+
+    return (
+      <StyledTable
+        {...props}
+      >
+        {this.props.children}
+      </StyledTable>
+    );
+  }
+}
+
+export default SimpleTable;
diff --git a/packages/table/src/SimpleTable/defaultHeaderRenderer.jsx b/packages/table/src/SimpleTable/defaultHeaderRenderer.jsx
new file mode 100644
index 000000000..0e0d4fcde
--- /dev/null
+++ b/packages/table/src/SimpleTable/defaultHeaderRenderer.jsx
@@ -0,0 +1,42 @@
+/** @flow */
+import * as React from 'react';
+import styled from 'styled-components';
+import SortIndicator from '../SortIndicator';
+import type { HeaderRendererParams } from './types';
+
+const HeaderLabel = styled.span`
+  padding-left: 20px;
+  padding-right: 20px;
+`;
+
+/**
+ * Default table header renderer.
+ */
+export default function defaultHeaderRenderer({
+  dataKey,
+  label,
+  sortBy,
+  sortDirection,
+}: HeaderRendererParams) {
+  const showSortIndicator = sortBy === dataKey;
+  const children = [
+    <HeaderLabel
+      className="ReactVirtualized__Table__headerTruncatedText"
+      key="label"
+      title={label}
+    >
+      {label}
+    </HeaderLabel>,
+  ];
+
+  if (showSortIndicator) {
+    children.push(
+      <SortIndicator
+        key="SortIndicator"
+        sortDirection={sortDirection}
+      />,
+    );
+  }
+
+  return children;
+}
diff --git a/packages/table/src/SimpleTable/defaultHeaderRowRenderer.jsx b/packages/table/src/SimpleTable/defaultHeaderRowRenderer.jsx
new file mode 100644
index 000000000..c63aaa2b7
--- /dev/null
+++ b/packages/table/src/SimpleTable/defaultHeaderRowRenderer.jsx
@@ -0,0 +1,22 @@
+/** @flow */
+import * as React from 'react';
+import styled from 'styled-components';
+import type { HeaderRowRendererParams } from './types';
+
+const HeaderRow = styled.div`
+  color: #456297;
+  font-weight: 500;
+  border-bottom: 1px solid #D8e3f6;
+`;
+
+export default function defaultHeaderRowRenderer({
+  className,
+  columns,
+  style,
+}: HeaderRowRendererParams) {  
+  return (
+    <HeaderRow className={className} role="row" style={style}>
+      {columns}
+    </HeaderRow>
+  );
+}
diff --git a/packages/table/src/SimpleTable/defaultRowRenderer.jsx b/packages/table/src/SimpleTable/defaultRowRenderer.jsx
new file mode 100644
index 000000000..0efdfc1b5
--- /dev/null
+++ b/packages/table/src/SimpleTable/defaultRowRenderer.jsx
@@ -0,0 +1,93 @@
+/** @flow */
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import type { RowRendererParams } from './types';
+
+const Row = styled.div`
+  color: #456296;
+  border-bottom: 1px solid #D8e3f6;
+
+  :hover {
+    background-color: #eef2fc;
+  }
+
+  div[role='gridcell'] {
+    padding-left: 20px;
+  }
+
+  ${({ isOdd }) =>
+    isOdd &&
+    css`
+      background-color: #f7f9fd;
+    `};
+`;
+
+/**
+ * Default row renderer for Table.
+ */
+export default function defaultRowRenderer({
+  className,
+  columns,
+  index,
+  key,
+  onRowClick,
+  onRowDoubleClick,
+  onRowMouseOut,
+  onRowMouseOver,
+  onRowRightClick,
+  rowData,
+  style,
+}: RowRendererParams) {
+  const a11yProps = {};
+  const rowStyle = () => {
+    if (index < 0) {
+      return { isHeader: true };
+    }
+    return index % 2 === 0 ? { isEven: true } : { isOdd: true };
+  };
+
+  if (
+    onRowClick ||
+    onRowDoubleClick ||
+    onRowMouseOut ||
+    onRowMouseOver ||
+    onRowRightClick
+  ) {
+    a11yProps['aria-label'] = 'row';
+    a11yProps.tabIndex = 0;
+
+    if (onRowClick) {
+      a11yProps.onClick = event =>
+        onRowClick({ event, index, rowData });
+    }
+    if (onRowDoubleClick) {
+      a11yProps.onDoubleClick = event =>
+        onRowDoubleClick({ event, index, rowData });
+    }
+    if (onRowMouseOut) {
+      a11yProps.onMouseOut = event =>
+        onRowMouseOut({ event, index, rowData });
+    }
+    if (onRowMouseOver) {
+      a11yProps.onMouseOver = event =>
+        onRowMouseOver({ event, index, rowData });
+    }
+    if (onRowRightClick) {
+      a11yProps.onContextMenu = event =>
+        onRowRightClick({ event, index, rowData });
+    }
+  }
+
+  return (
+    <Row
+      {...rowStyle()}
+      {...a11yProps}
+      className={className}
+      key={key}
+      role="row"
+      style={style}
+    >
+      {columns}
+    </Row>
+  );
+}
diff --git a/packages/table/src/SimpleTable/types.js b/packages/table/src/SimpleTable/types.js
new file mode 100644
index 000000000..6c8ca9f87
--- /dev/null
+++ b/packages/table/src/SimpleTable/types.js
@@ -0,0 +1,44 @@
+/** @flow */
+export type CellDataGetterParams = {
+  columnData: ?any,
+  dataKey: string,
+  rowData: any,
+};
+
+export type CellRendererParams = {
+  cellData: ?any,
+  columnData: ?any,
+  dataKey: string,
+  rowData: any,
+  rowIndex: number,
+};
+
+export type HeaderRowRendererParams = {
+  className: string,
+  columns: Array<any>,
+  style: any,
+};
+
+export type HeaderRendererParams = {
+  columnData: ?any,
+  dataKey: string,
+  disableSort: ?boolean,
+  label: ?any,
+  sortBy: ?string,
+  sortDirection: ?string,
+};
+
+export type RowRendererParams = {
+  className: string,
+  columns: Array<any>,
+  index: number,
+  isScrolling: boolean,
+  onRowClick: ?Function,
+  onRowDoubleClick: ?Function,
+  onRowMouseOver: ?Function,
+  onRowMouseOut: ?Function,
+  onRowRightClick: ?Function,
+  key: number | string,
+  rowData: any,
+  style: any,
+};
diff --git a/packages/table/src/SortDirection.js b/packages/table/src/SortDirection.js
new file mode 100644
index 000000000..485285c18
--- /dev/null
+++ b/packages/table/src/SortDirection.js
@@ -0,0 +1,15 @@
+const SortDirection = {
+  /**
+   * Sort items in ascending order.
+   * This means arranging from the lowest value to the highest (e.g. a-z, 0-9).
+   */
+  ASC: 'ASC',
+
+  /**
+   * Sort items in descending order.
+   * This means arranging from the highest value to the lowest (e.g. z-a, 9-0).
+   */
+  DESC: 'DESC',
+};
+
+export default SortDirection;
diff --git a/packages/table/src/SortIndicator.jsx b/packages/table/src/SortIndicator.jsx
new file mode 100644
index 000000000..36d6c6357
--- /dev/null
+++ b/packages/table/src/SortIndicator.jsx
@@ -0,0 +1,43 @@
+// @flow
+
+import cn from 'classnames';
+import * as React from 'react';
+import SortDirection from './SortDirection';
+
+type Props = {
+  sortDirection: SortDirection.ASC | SortDirection.DESC
+}
+
+/**
+ * Displayed beside a header to indicate that a Table is currently sorted by this column.
+ */
+export default function SortIndicator({ sortDirection }: Props) {
+  const classNames = cn(
+    'ReactVirtualized__Table__sortableHeaderIcon',
+    {
+      'ReactVirtualized__Table__sortableHeaderIcon--ASC':
+        sortDirection === SortDirection.ASC,
+      'ReactVirtualized__Table__sortableHeaderIcon--DESC':
+        sortDirection === SortDirection.DESC,
+    },
+  );
+
+  return (
+    <svg
+      className={classNames}
+      width={18}
+      height={18}
+      viewBox="0 0 24 24"
+    >
+      {sortDirection === SortDirection.ASC ? (
+        <path d="M7 14l5-5 5 5z" />
+      ) : (
+        <path d="M7 10l5 5 5-5z" />
+      )}
+      <path d="M0 0h24v24H0z" fill="none" />
+    </svg>
+  );
+}
+
+SortIndicator.defaultProps = SortDirection.ASC;
+
diff --git a/packages/table/src/Table.jsx b/packages/table/src/Table.jsx
new file mode 100644
index 000000000..0a0c9897d
--- /dev/null
+++ b/packages/table/src/Table.jsx
@@ -0,0 +1,735 @@
+/** @flow */
+/* eslint-disable react/require-default-props */
+/* eslint-disable no-underscore-dangle */
+
+import * as React from 'react';
+
+import cn from 'classnames';
+// import Column from './Column';
+import { findDOMNode } from 'react-dom';
+import { MultiGrid } from 'react-virtualized';
+import type {
+  Alignment,
+  CellPosition,
+  ScrollParams,
+  RenderedSection,
+} from 'react-virtualized';
+
+import defaultRowRenderer from './SimpleTable/defaultRowRenderer';
+import defaultHeaderRowRenderer from './SimpleTable/defaultHeaderRowRenderer';
+import defaultCellRenderer from './defaultCellRenderer';
+import SortDirection from './SortDirection';
+import accessibilityOverscanIndicesGetter from './accessibilityOverscanIndicesGetter';
+import { HeaderCell } from './styled';
+
+export type CellRendererParams = {
+  columns: any[],
+  columnIndex: number,
+  isScrolling: boolean,
+  isVisible: boolean,
+  key: string,
+  parent: Object,
+  rowIndex: number,
+  style: Object,
+};
+
+export type CellRenderer = (
+  props: CellRendererParams,
+) => React.Element<*>;
+
+type Props = {
+  'aria-label'?: string,
+
+  /**
+   * Removes fixed height from the scrollingContainer so that the total height
+   * of rows can stretch the window. Intended for use with WindowScroller
+   */
+  autoHeight?: boolean,
+
+  cellRenderer: CellRenderer,
+  /** One or more Columns describing the data displayed in this row */
+  children: React.Node,
+
+  /** Optional CSS class name */
+  className?: string,
+
+  /** Disable rendering the header at all */
+  disableHeader?: boolean,
+
+  /**
+   * Used to estimate the total height of a Table before all of its rows have actually been measured.
+   * The estimated total height is adjusted as rows are rendered.
+   */
+  estimatedRowSize: number,
+
+  /** Optional custom CSS class name to attach to inner Grid element. */
+  gridClassName?: string,
+
+  /** Optional inline style to attach to inner Grid element. */
+  gridStyle?: CSSStyleDeclaration,
+
+  hasHorizontalBorder?: boolean,
+  hasVerticalBorder?: boolean,
+
+  /** Optional CSS class to apply to all column headers */
+  headerClassName?: string,
+
+  /** Fixed height of header row */
+  headerHeight: number,
+
+  /**
+   * Responsible for rendering a table row given an array of columns:
+   * Should implement the following interface: ({
+   *   className: string,
+   *   columns: any[],
+   *   style: any
+   * }): PropTypes.node
+   */
+  headerRowRenderer?: ({
+    className: string,
+    column: any[],
+    style: CSSStyleDeclaration,
+  }) => React.Node,
+
+  /** Optional custom inline style to attach to table header columns. */
+  headerStyle?: CSSStyleDeclaration,
+
+  /** Fixed/available height for out DOM element */
+  height: number,
+
+  /** Optional id */
+  id?: string | number,
+
+  /** Optional renderer to be used in place of table body rows when rowCount is 0 */
+  noRowsRenderer?: () => mixed,
+
+  /**
+   * Optional callback when a column's header is clicked.
+   * ({ columnData: any, dataKey: string }): void
+   */
+  onHeaderClick?: ({ columnData: any, dataKey: string }) => void,
+
+  /**
+   * Callback invoked when a user clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowClick?: ({ index: number }) => void,
+
+  /**
+   * Callback invoked when a user double-clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowDoubleClick?: ({ index: number }) => void,
+
+  /**
+   * Callback invoked when the mouse leaves a table row.
+   * ({ index: number }): void
+   */
+  onRowMouseOut?: ({ index: number }) => void,
+
+  /**
+   * Callback invoked when a user moves the mouse over a table row.
+   * ({ index: number }): void
+   */
+  onRowMouseOver?: ({ index: number }) => void,
+
+  /**
+   * Callback invoked when a user right-clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowRightClick?: ({ index: number }) => void,
+
+  /**
+   * Callback invoked with information about the slice of rows that were just rendered.
+   * ({ startIndex, stopIndex }): void
+   */
+  onRowsRendered?: ({
+    startIndex: number,
+    stopIndex: number,
+  }) => void,
+
+  /**
+   * Callback invoked whenever the scroll offset changes within the inner scrollable region.
+   * This callback can be used to sync scrolling between lists, tables, or grids.
+   * ({ clientHeight, scrollHeight, scrollTop }): void
+   */
+  onScroll?: ({
+    clientHeight: number,
+    scrollHeight: number,
+    scrollTop: number,
+  }) => void,
+
+  /** See Grid#overscanIndicesGetter */
+  overscanIndicesGetter?: () => mixed,
+
+  /**
+   * Number of rows to render above/below the visible bounds of the list.
+   * These rows can help for smoother scrolling on touch devices.
+   */
+  overscanRowCount?: number,
+
+  /**
+   * Optional CSS class to apply to all table rows (including the header row).
+   * This property can be a CSS class name (string) or a function that returns a class name.
+   * If a function is provided its signature should be: ({ index: number }): string
+   */
+  rowClassName: string | (({ index: number }) => string),
+
+  /**
+   * Callback responsible for returning a data row given an index.
+   * ({ index: number }): any
+   */
+  rowGetter: ({ index: number }) => any,
+
+  /**
+   * Either a fixed row height (number) or a function that returns the height of a row given its index.
+   * ({ index: number }): number
+   */
+  rowHeight?: number | (({ index: number }) => number),
+
+  /** Number of rows in table. */
+  rowCount: number,
+
+  /**
+   * Responsible for rendering a table row given an array of columns:
+   * Should implement the following interface: ({
+   *   className: string,
+   *   columns: Array,
+   *   index: number,
+   *   isScrolling: boolean,
+   *   onRowClick: ?Function,
+   *   onRowDoubleClick: ?Function,
+   *   onRowMouseOver: ?Function,
+   *   onRowMouseOut: ?Function,
+   *   rowData: any,
+   *   style: any
+   * }): PropTypes.node
+   */
+  rowRenderer: ({
+    className: string,
+    columns: any[],
+    index: number,
+    isScrolling: boolean,
+    onRowClick: ?Function,
+    onRowDoubleClick: ?Function,
+    onRowMouseOver: ?Function,
+    onRowMouseOut: ?Function,
+    rowData: any,
+    style: any,
+  }) => React$Element<any>,
+
+  /** Optional custom inline style to attach to table rows. */
+  rowStyle?: | CSSStyleDeclaration
+    | (({ index: number }) => CSSStyleDeclaration),
+
+  /** See Grid#scrollToAlignment */
+  scrollToAlignment: Alignment,
+
+  /** Row index to ensure visible (by forcefully scrolling if necessary) */
+  scrollToIndex: number,
+
+  /** Vertical offset. */
+  scrollTop?: number,
+
+  striped?: boolean,
+
+  /**
+   * Sort function to be called if a sortable header is clicked.
+   * Should implement the following interface: ({
+   *   defaultSortDirection: 'ASC' | 'DESC',
+   *   event: MouseEvent,
+   *   sortBy: string,
+   *   sortDirection: SortDirection
+   * }): void
+   */
+  sort?: ({
+    defaultSortDirection: 'ASC' | 'DESC',
+    event: MouseEvent,
+    sortBy: string,
+    sortDirection: SortDirection,
+  }) => void,
+
+  /** Table data is currently sorted by this :dataKey (if it is sorted at all) */
+  sortBy?: string,
+
+  /** Table data is currently sorted in this direction (if it is sorted at all) */
+  sortDirection?: SortDirection.ASC | SortDirection.DESC,
+
+  /** Optional inline style */
+  style?: CSSStyleDeclaration,
+
+  /** Tab index for focus */
+  tabIndex?: number,
+
+  /** Width of list */
+  width: number,
+};
+
+type State = {
+  scrollbarWidth: number,
+  hoveredColumnIndex?: number,
+  hoveredRowIndex?: number,
+};
+
+/**
+ * Table component with fixed headers and virtualized rows for improved performance with large data sets.
+ * This component expects explicit width, height, and padding parameters.
+ */
+export default class Table extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    cellRenderer: defaultCellRenderer,
+    disableHeader: false,
+    estimatedRowSize: 30,
+    headerHeight: 40,
+    headerStyle: {},
+    noRowsRenderer: () => null,
+    onRowsRendered: () => null,
+    onScroll: () => null,
+    overscanIndicesGetter: accessibilityOverscanIndicesGetter,
+    overscanRowCount: 10,
+    rowRenderer: defaultRowRenderer,
+    headerRowRenderer: defaultHeaderRowRenderer,
+    hasVerticalBorder: false,
+    hasHorizontalBorder: false,
+    striped: false,
+    rowStyle: {},
+    scrollToAlignment: 'auto',
+    scrollToIndex: -1,
+    style: {},
+    rowHeight: 40,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      scrollbarWidth: 0,
+      hoveredColumnIndex: undefined,
+      hoveredRowIndex: undefined,
+    };
+  }
+
+  Grid: MultiGrid;
+
+  _cachedColumnStyles: any[];
+
+  forceUpdateGrid() {
+    if (this.Grid) {
+      this.Grid.forceUpdate();
+    }
+  }
+
+  /** TODO: See Grid#getOffsetForCell */
+  getOffsetForRow({
+    alignment,
+    index,
+  }: {
+    alignment?: Alignment,
+    index?: number,
+  }) {
+    if (this.Grid) {
+      const { scrollTop } = this.Grid.getOffsetForCell({
+        alignment,
+        rowIndex: index,
+      });
+
+      return scrollTop;
+    }
+    return 0;
+  }
+
+  /** CellMeasurer compatibility */
+  invalidateCellSizeAfterRender({
+    columnIndex,
+    rowIndex,
+  }: CellPosition) {
+    if (this.Grid) {
+      this.Grid.invalidateCellSizeAfterRender({
+        rowIndex,
+        columnIndex,
+      });
+    }
+  }
+
+  /** See Grid#measureAllCells */
+  measureAllRows() {
+    if (this.Grid) {
+      this.Grid.measureAllCells();
+    }
+  }
+
+  /** CellMeasurer compatibility */
+  recomputeGridSize({
+    columnIndex = 0,
+    rowIndex = 0,
+  }: CellPosition = {}) {
+    if (this.Grid) {
+      this.Grid.recomputeGridSize({
+        rowIndex,
+        columnIndex,
+      });
+    }
+  }
+
+  /** See Grid#recomputeGridSize */
+  recomputeRowHeights(index: number = 0) {
+    if (this.Grid) {
+      this.Grid.recomputeGridSize({
+        rowIndex: index,
+      });
+    }
+  }
+
+  /** TODO: See Grid#scrollToPosition */
+  scrollToPosition(scrollTop: number = 0) {
+    if (this.Grid) {
+      this.Grid.scrollToPosition({ scrollTop });
+    }
+  }
+
+  /** TODO: See Grid#scrollToCell */
+  scrollToRow(index: number = 0) {
+    if (this.Grid) {
+      this.Grid.scrollToCell({
+        columnIndex: 0,
+        rowIndex: index,
+      });
+    }
+  }
+
+  componentDidMount() {
+    this._setScrollbarWidth();
+  }
+
+  componentDidUpdate() {
+    this._setScrollbarWidth();
+  }
+
+  render() {
+    const {
+      className,
+      disableHeader,
+      gridClassName,
+      gridStyle,
+      headerHeight,
+      height,
+      id,
+      noRowsRenderer,
+      rowClassName,
+      rowStyle,
+      scrollToIndex,
+      style,
+      width,
+      rowCount,
+    } = this.props;
+
+    const { scrollbarWidth } = this.state;
+
+    const availableRowsHeight = disableHeader
+      ? height
+      : height - headerHeight;
+
+    const rowClass =
+      typeof rowClassName === 'function'
+        ? rowClassName({ index: -1 })
+        : rowClassName;
+    const rowStyleObject =
+      typeof rowStyle === 'function'
+        ? rowStyle({ index: -1 })
+        : rowStyle;
+
+    // Precompute and cache column styles before rendering rows and columns to speed things up
+    this._cachedColumnStyles = [];
+    const columns = this._getHeaderColumns();
+    const fixedColumnCount = columns.filter(
+      column => column.props.fixed === true,
+    ).length;
+    // Note that we specify :rowCount, :scrollbarWidth, :sortBy, and :sortDirection as properties on Grid even though these have nothing to do with Grid.
+    // This is done because Grid is a pure component and won't update unless its properties or state has changed.
+    // Any property that should trigger a re-render of Grid then is specified here to avoid a stale display.
+    return (
+      <div
+        className={cn('ReactVirtualized__Table', className)}
+        id={id}
+        role="grid"
+        style={style}
+      >
+        <MultiGrid
+          {...this.props}
+          width={width}
+          className={cn(
+            'ReactVirtualized__Table__Grid',
+            gridClassName,
+          )}
+          cellRenderer={props =>
+            this._createGrid({
+              columns,
+              ...props,
+              rowClass,
+              rowStyleObject,
+            })
+          }
+          columnWidth={({ index }) => columns[index].props.width}
+          columnCount={columns.length}
+          enableFixedColumnScroll
+          enableFixedRowScroll
+          fixedRowCount={1}
+          fixedColumnCount={fixedColumnCount}
+          height={availableRowsHeight}
+          id={undefined}
+          noContentRenderer={noRowsRenderer}
+          onScroll={this._onScroll}
+          rowCount={rowCount}
+          onSectionRendered={this._onSectionRendered}
+          ref={this._setRef}
+          role="rowgroup"
+          scrollbarWidth={scrollbarWidth}
+          scrollToRow={scrollToIndex}
+          style={{
+            ...gridStyle,
+            overflowX: 'hidden',
+          }}
+        />
+      </div>
+    );
+  }
+
+  _createHeader({
+    column,
+    index,
+    style,
+  }: {
+    column: React$Element<any>,
+    index: number,
+    style: CSSStyleDeclaration,
+  }) {
+    const {
+      headerClassName,
+      headerStyle,
+      onHeaderClick,
+      sort,
+      sortBy,
+      sortDirection,
+      hasHorizontalBorder,
+      hasVerticalBorder,
+    } = this.props;
+
+    const {
+      columnData,
+      dataKey,
+      defaultSortDirection,
+      disableSort,
+      headerRenderer,
+      id,
+      label,
+    } = column.props;
+    const sortEnabled = !disableSort && sort;
+
+    const classNames = cn(
+      'ReactVirtualized__Table__headerColumn',
+      headerClassName,
+      column.props.headerClassName,
+      {
+        ReactVirtualized__Table__sortableHeaderColumn: sortEnabled,
+      },
+    );
+
+    const renderedHeader = headerRenderer({
+      columnData,
+      dataKey,
+      disableSort,
+      label,
+      sortBy,
+      sortDirection,
+    });
+
+    let headerOnClick;
+    let headerOnKeyDown;
+    let headerTabIndex;
+    let headerAriaSort;
+    let headerAriaLabel;
+
+    if (sortEnabled || onHeaderClick) {
+      // If this is a sortable header, clicking it should update the table data's sorting.
+      const isFirstTimeSort = sortBy !== dataKey;
+
+      // If this is the firstTime sort of this column, use the column default sort order.
+      // Otherwise, invert the direction of the sort.
+      // eslint-disable-next-line
+      const newSortDirection = isFirstTimeSort
+        ? defaultSortDirection
+        : sortDirection === SortDirection.DESC
+          ? SortDirection.ASC
+          : SortDirection.DESC;
+
+      const onClick = event => {
+        if (sortEnabled && sort) {
+          sort({
+            defaultSortDirection,
+            event,
+            sortBy: dataKey,
+            sortDirection: newSortDirection,
+          });
+        }
+        if (onHeaderClick) {
+          onHeaderClick({ columnData, dataKey, event });
+        }
+      };
+
+      const onKeyDown = event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          onClick(event);
+        }
+      };
+
+      headerAriaLabel =
+        column.props['aria-label'] || label || dataKey;
+      headerTabIndex = 0;
+      headerOnClick = onClick;
+      headerOnKeyDown = onKeyDown;
+    }
+
+    if (sortBy === dataKey) {
+      headerAriaSort =
+        sortDirection === SortDirection.ASC
+          ? 'ascending'
+          : 'descending';
+    }
+
+    // Avoid using object-spread syntax with multiple objects here,
+    // Since it results in an extra method call to 'babel-runtime/helpers/extends'
+    // See PR https://github.com/bvaughn/react-virtualized/pull/942
+    return (
+      <HeaderCell
+        hasHorizontalBorder={hasHorizontalBorder}
+        hasVerticalBorder={hasVerticalBorder}
+        aria-label={headerAriaLabel}
+        aria-sort={headerAriaSort}
+        className={classNames}
+        id={id}
+        key={`Header-Col${index}`}
+        onClick={headerOnClick}
+        onKeyDown={headerOnKeyDown}
+        role="columnheader"
+        style={{
+          ...headerStyle,
+          ...style,
+        }}
+        tabIndex={headerTabIndex}
+      >
+        {renderedHeader}
+      </HeaderCell>
+    );
+  }
+
+  _createGrid: CellRenderer = ({
+    columns,
+    rowIndex,
+    isScrolling,
+    key,
+    parent,
+    style,
+    columnIndex,
+    isVisible,
+    rowStyleObject,
+    rowClass,
+  }) => {
+    const { hasHorizontalBorder, hasVerticalBorder, striped } = this.props;
+    if (rowIndex === 0) {
+      const column = columns[columnIndex];
+      return this._createHeader({
+        column,
+        index: columnIndex,
+        style,
+      });
+    }
+    return this.props.cellRenderer({
+      isVisible,
+      key,
+      style,
+      columnIndex,
+      rowIndex: rowIndex - 1,
+      parent,
+      isScrolling,
+      columns,
+      rowStyleObject,
+      rowClass,
+      hasHorizontalBorder,
+      hasVerticalBorder,
+      striped,
+      onHover: this._onHoverCell,
+      hoveredColumnIndex: this.state.hoveredColumnIndex,
+      hoveredRowIndex: this.state.hoveredRowIndex,
+    });
+  };
+
+  _onHoverCell = ({ rowIndex, columnIndex }: CellPosition) => {
+    this.setState({
+      hoveredColumnIndex: columnIndex,
+      hoveredRowIndex: rowIndex,
+    });
+  };
+
+  _getHeaderColumns = () => {
+    const { children, disableHeader } = this.props;
+    const items: React$Element<any>[] = disableHeader
+      ? []
+      : React.Children.toArray(children);
+    return items;
+  };
+
+  _getRowHeight(rowIndex: number) {
+    const { rowHeight } = this.props;
+
+    return typeof rowHeight === 'function'
+      ? rowHeight({ index: rowIndex })
+      : rowHeight;
+  }
+
+  _onScroll = ({
+    clientHeight,
+    scrollHeight,
+    scrollTop,
+  }: ScrollParams) => {
+    const { onScroll } = this.props;
+    if (onScroll) {
+      onScroll({ clientHeight, scrollHeight, scrollTop });
+    }
+  };
+
+  _onSectionRendered = ({
+    rowOverscanStartIndex,
+    rowOverscanStopIndex,
+    rowStartIndex,
+    rowStopIndex,
+  }: RenderedSection) => {
+    const { onRowsRendered } = this.props;
+    if (onRowsRendered) {
+      onRowsRendered({
+        overscanStartIndex: rowOverscanStartIndex,
+        overscanStopIndex: rowOverscanStopIndex,
+        startIndex: rowStartIndex,
+        stopIndex: rowStopIndex,
+      });
+    }
+  };
+
+  _setRef = (ref: ?HTMLElement) => {
+    this.Grid = ref;
+  };
+
+  _setScrollbarWidth() {
+    if (this.Grid) {
+      // eslint-disable-next-line
+      const Grid = findDOMNode(this.Grid);
+      if (Grid) {
+        // $FlowFixMe
+        const clientWidth: number = Grid.clientWidth || 0;
+        // $FlowFixMe
+        const offsetWidth: number = Grid.offsetWidth || 0;
+        const scrollbarWidth = offsetWidth - clientWidth;
+        this.setState({ scrollbarWidth });
+      }
+    }
+  }
+}
diff --git a/packages/table/src/accessibilityOverscanIndicesGetter.js b/packages/table/src/accessibilityOverscanIndicesGetter.js
new file mode 100644
index 000000000..e29bf4443
--- /dev/null
+++ b/packages/table/src/accessibilityOverscanIndicesGetter.js
@@ -0,0 +1,65 @@
+// @flow
+
+export type OverscanIndicesGetterParams = {
+  // One of SCROLL_DIRECTION_HORIZONTAL or SCROLL_DIRECTION_VERTICAL
+  direction: 'horizontal' | 'vertical',
+
+  // One of SCROLL_DIRECTION_BACKWARD or SCROLL_DIRECTION_FORWARD
+  scrollDirection: -1 | 1,
+
+  // Number of rows or columns in the current axis
+  cellCount: number,
+
+  // Maximum number of cells to over-render in either direction
+  overscanCellsCount: number,
+
+  // Begin of range of visible cells
+  startIndex: number,
+
+  // End of range of visible cells
+  stopIndex: number,
+};
+
+export type OverscanIndices = {
+  overscanStartIndex: number,
+  overscanStopIndex: number,
+};
+
+export const SCROLL_DIRECTION_BACKWARD = -1;
+export const SCROLL_DIRECTION_FORWARD = 1;
+
+export const SCROLL_DIRECTION_HORIZONTAL = 'horizontal';
+export const SCROLL_DIRECTION_VERTICAL = 'vertical';
+
+/**
+ * Calculates the number of cells to overscan before and after a specified range.
+ * This function ensures that overscanning doesn't exceed the available cells.
+ */
+
+export default function defaultOverscanIndicesGetter({
+  cellCount,
+  overscanCellsCount,
+  scrollDirection,
+  startIndex,
+  stopIndex,
+}: OverscanIndicesGetterParams): OverscanIndices {
+  // Make sure we render at least 1 cell extra before and after (except near boundaries)
+  // This is necessary in order to support keyboard navigation (TAB/SHIFT+TAB) in some cases
+  // For more info see issues #625
+  overscanCellsCount = Math.max(1, overscanCellsCount);
+
+  if (scrollDirection === SCROLL_DIRECTION_FORWARD) {
+    return {
+      overscanStartIndex: Math.max(0, startIndex - 1),
+      overscanStopIndex: Math.min(
+        cellCount - 1,
+        stopIndex + overscanCellsCount,
+      ),
+    };
+  } else {
+    return {
+      overscanStartIndex: Math.max(0, startIndex - overscanCellsCount),
+      overscanStopIndex: Math.min(cellCount - 1, stopIndex + 1),
+    };
+  }
+}
diff --git a/packages/table/src/defaultCellRenderer.jsx b/packages/table/src/defaultCellRenderer.jsx
new file mode 100644
index 000000000..e3cf3cfb4
--- /dev/null
+++ b/packages/table/src/defaultCellRenderer.jsx
@@ -0,0 +1,100 @@
+// @flow
+/* eslint-disable jsx-a11y/mouse-events-have-key-events  */
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+const Cell = styled.div`
+  color: #456296;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  align-items: center;
+
+  ${({ hasHorizontalBorder }) =>
+    hasHorizontalBorder &&
+    css`
+      border-bottom: 1px solid #d8e3f6;
+    `};
+
+  ${({ hasVerticalBorder }) =>
+    hasVerticalBorder &&
+    css`
+      border-right: 1px solid #d8e3f6;
+    `};
+
+  ${({ isEven }) =>
+    isEven &&
+    css`
+      background-color: #f7f9fd;
+    `};
+
+  ${({ hoveredRow }) =>
+    hoveredRow &&
+    css`
+      background-color: #eef2fc;
+    `};
+`;
+
+const Span = styled.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+type Props = {
+  columnIndex: number,
+  key: string,
+  rowIndex: number,
+  style: CSSStyleDeclaration,
+  columns: React$Element<any>[],
+  onHover: (props: {
+    rowIndex: number,
+    columnIndex: number,
+  }) => mixed,
+  hoveredColumnIndex: number,
+  hoveredRowIndex: number,
+  rowStyleObject: CSSStyleDeclaration,
+  rowClass: string,
+  hasHorizontalBorder: boolean,
+  hasVerticalBorder: boolean,
+  striped: boolean,
+};
+
+const defaultCellRenderer = (data: Object[]) => ({
+  columnIndex,
+  key,
+  rowIndex,
+  style,
+  columns,
+  onHover,
+  hoveredColumnIndex,
+  hoveredRowIndex,
+  rowStyleObject,
+  rowClass,
+  hasHorizontalBorder,
+  hasVerticalBorder,
+  striped,
+}: Props) => {
+  const isEven = rowIndex % 2 === 0 && striped;
+  return (
+    <Cell
+      hasHorizontalBorder={hasHorizontalBorder}
+      hasVerticalBorder={hasVerticalBorder}
+      className={rowClass}
+      onMouseOver={() => onHover({ rowIndex, columnIndex })}
+      isEven={isEven}
+      hoveredColumn={hoveredColumnIndex === columnIndex}
+      hoveredRow={hoveredRowIndex === rowIndex}
+      key={key}
+      style={{
+        ...rowStyleObject,
+        ...style,
+      }}
+    >
+      <Span>
+        {data[rowIndex][columns[columnIndex].props.dataKey]}
+      </Span>
+    </Cell>
+  );
+};
+export default defaultCellRenderer;
diff --git a/packages/table/src/index.css b/packages/table/src/index.css
new file mode 100644
index 000000000..444e553ab
--- /dev/null
+++ b/packages/table/src/index.css
@@ -0,0 +1,40 @@
+.Table {
+  width: 100%;
+  margin-top: 15px;
+}
+.headerRow,
+.evenRow,
+.oddRow {
+  border-bottom: 1px solid #e0e0e0;
+}
+.oddRow {
+  background-color: #fafafa;
+}
+.headerColumn {
+  text-transform: none;
+}
+.exampleColumn {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkboxLabel {
+  margin-left: .5rem;
+}
+.checkboxLabel:first-of-type {
+  margin-left: 0;
+}
+
+.noRows {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1em;
+  color: #bdbdbd;
+}
diff --git a/packages/table/src/index.js b/packages/table/src/index.js
new file mode 100644
index 000000000..0a5c8c971
--- /dev/null
+++ b/packages/table/src/index.js
@@ -0,0 +1,12 @@
+import SimpleTable from './SimpleTable/SimpleTable';
+import Table from './Table';
+import defaultCellRenderer from './defaultCellRenderer';
+import Column from './SimpleTable/Column';
+
+export {
+  SimpleTable,
+  Column,
+  Table,
+  defaultCellRenderer
+}
+ 
\ No newline at end of file
diff --git a/packages/table/src/style.css b/packages/table/src/style.css
new file mode 100644
index 000000000..88f76dcb9
--- /dev/null
+++ b/packages/table/src/style.css
@@ -0,0 +1,97 @@
+/* Collection default theme */
+
+.ReactVirtualized__Collection {
+}
+
+.ReactVirtualized__Collection__innerScrollContainer {
+}
+
+/* Grid default theme */
+
+.ReactVirtualized__Grid {
+}
+
+.ReactVirtualized__Grid__innerScrollContainer {
+}
+
+/* Table default theme */
+
+.ReactVirtualized__Table {
+}
+
+.ReactVirtualized__Table__Grid {
+}
+
+.ReactVirtualized__Table__headerRow, .ReactVirtualized__Table__headerRow > .ReactVirtualized__Grid__innerScrollContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.ReactVirtualized__Table__row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+  min-width: 0px;
+}
+.ReactVirtualized__Table__rowColumn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 20px;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+}
+.ReactVirtualized__Table__sortableHeaderColumn {
+  cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.ReactVirtualized__Table__sortableHeaderIcon {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 24px;
+          flex: 0 0 24px;
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+/* List default theme */
+
+.ReactVirtualized__List {
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDhCQUE4Qjs7QUFFOUI7Q0FDQzs7QUFFRDtDQUNDOztBQUVELHdCQUF3Qjs7QUFFeEI7Q0FDQzs7QUFFRDtDQUNDOztBQUVELHlCQUF5Qjs7QUFFekI7Q0FDQzs7QUFFRDtDQUNDOztBQUVEO0VBQ0UsaUJBQWlCO0VBQ2pCLDBCQUEwQjtFQUMxQixxQkFBYztFQUFkLHFCQUFjO0VBQWQsY0FBYztFQUNkLCtCQUFvQjtFQUFwQiw4QkFBb0I7TUFBcEIsd0JBQW9CO1VBQXBCLG9CQUFvQjtFQUNwQiwwQkFBb0I7TUFBcEIsdUJBQW9CO1VBQXBCLG9CQUFvQjtDQUNyQjtBQUNEO0VBQ0UscUJBQWM7RUFBZCxxQkFBYztFQUFkLGNBQWM7RUFDZCwrQkFBb0I7RUFBcEIsOEJBQW9CO01BQXBCLHdCQUFvQjtVQUFwQixvQkFBb0I7RUFDcEIsMEJBQW9CO01BQXBCLHVCQUFvQjtVQUFwQixvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxzQkFBc0I7RUFDdEIsZ0JBQWdCO0VBQ2hCLG9CQUFvQjtFQUNwQix3QkFBd0I7RUFDeEIsaUJBQWlCO0NBQ2xCOztBQUVEOztFQUVFLG1CQUFtQjtFQUNuQixlQUFlO0NBQ2hCO0FBQ0Q7RUFDRSx3QkFBd0I7RUFDeEIsb0JBQW9CO0NBQ3JCOztBQUVEOztFQUVFLGtCQUFrQjtDQUNuQjtBQUNEO0VBQ0UsZ0JBQWdCO0NBQ2pCOztBQUVEO0VBQ0UscUJBQWM7RUFBZCxxQkFBYztFQUFkLGNBQWM7RUFDZCwwQkFBb0I7TUFBcEIsdUJBQW9CO1VBQXBCLG9CQUFvQjtDQUNyQjtBQUNEO0VBQ0Usb0JBQWU7TUFBZixtQkFBZTtVQUFmLGVBQWU7RUFDZixZQUFZO0VBQ1osV0FBVztFQUNYLG1CQUFtQjtDQUNwQjs7QUFFRCx3QkFBd0I7O0FBRXhCO0NBQ0MiLCJmaWxlIjoic3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIENvbGxlY3Rpb24gZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fQ29sbGVjdGlvbiB7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19Db2xsZWN0aW9uX19pbm5lclNjcm9sbENvbnRhaW5lciB7XG59XG5cbi8qIEdyaWQgZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fR3JpZCB7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19HcmlkX19pbm5lclNjcm9sbENvbnRhaW5lciB7XG59XG5cbi8qIFRhYmxlIGRlZmF1bHQgdGhlbWUgKi9cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlIHtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19HcmlkIHtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19oZWFkZXJSb3cge1xuICBmb250LXdlaWdodDogNzAwO1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4uUmVhY3RWaXJ0dWFsaXplZF9fVGFibGVfX2hlYWRlclRydW5jYXRlZFRleHQge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9faGVhZGVyQ29sdW1uLFxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3dDb2x1bW4ge1xuICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG4gIG1pbi13aWR0aDogMHB4O1xufVxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3dDb2x1bW4ge1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19oZWFkZXJDb2x1bW46Zmlyc3Qtb2YtdHlwZSxcbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fcm93Q29sdW1uOmZpcnN0LW9mLXR5cGUge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbn1cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJDb2x1bW4ge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJJY29uQ29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJJY29uIHtcbiAgZmxleDogMCAwIDI0cHg7XG4gIGhlaWdodDogMWVtO1xuICB3aWR0aDogMWVtO1xuICBmaWxsOiBjdXJyZW50Q29sb3I7XG59XG5cbi8qIExpc3QgZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fTGlzdCB7XG59XG4iXX0= */
diff --git a/packages/table/src/styled.js b/packages/table/src/styled.js
new file mode 100644
index 000000000..6463aa9ff
--- /dev/null
+++ b/packages/table/src/styled.js
@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components';
+
+export const HeaderCell = styled.div`
+  color: #456297;
+  font-weight: 500;
+  align-items: center;
+  display: flex;
+
+  ${({ hasHorizontalBorder }) =>
+    hasHorizontalBorder &&
+    css`
+      border-bottom: 1px solid #d8e3f6;
+    `};
+
+  ${({ hasVerticalBorder }) =>
+    hasVerticalBorder &&
+    css`
+      border-right: 1px solid #d8e3f6;
+    `};
+`;
diff --git a/packages/web/.storybook/____webpack.config.js b/packages/web/.storybook/____webpack.config.js
deleted file mode 100644
index 52fe751d6..000000000
--- a/packages/web/.storybook/____webpack.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const path = require('path');
-
-module.exports = (baseConfig, env, defaultConfig) => {
-  // Extend defaultConfig as you need.
-
-  // For example, add typescript loader:
-  // defaultConfig.module.rules.push({
-  //   test: /\.(ts|tsx)$/,
-  //   include: path.resolve(__dirname, "../src"),
-  //   loader: require.resolve("ts-loader")
-  // });
-  // defaultConfig.resolve.extensions.push(".ts", ".tsx");
-
-  console.log(defaultConfig.node);
-  defaultConfig.node = {
-    fs: 'empty',
-  };
-
-  return defaultConfig;
-};
diff --git a/packages/web/.storybook/storyshots.test.js b/packages/web/.storybook/storyshots.test.js
deleted file mode 100644
index 0de3f2025..000000000
--- a/packages/web/.storybook/storyshots.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
-import initStoryshots, {
-  multiSnapshotWithOptions,
-} from '@storybook/addon-storyshots';
-import 'jest-styled-components'
-
-/**
- * Mock methods of addon-info so that "Show Info" button don't go into snapshots.
- * https://github.com/storybooks/storybook/issues/1011#issuecomment-322698049
- */
-jest.mock('@storybook/addon-info', () => ({
-  withInfo: () => storyFn => storyFn,
-  setDefaults: () => {},
-}));
-
-initStoryshots({
-  test: multiSnapshotWithOptions({})
-});
diff --git a/packages/web/package.json b/packages/web/package.json
index b5c0ca94a..5bbbf0884 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -9,6 +9,7 @@
     "test": "NODE_ENV=test jest",
     "start": "start-storybook -p 6006"
   },
+  "sideEffects": false,
   "contributors": [
     "Eric Yip (https://github.com/ericyip)",
     "Laura Lee (https://github.com/l443018)"
@@ -39,23 +40,11 @@
     "styled-components": ">=2 || >=3"
   },
   "devDependencies": {
-    "@storybook/react": "3.4.6",
-    "babel-plugin-styled-components": "1.5.1"
+    
   },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/GSS-FED/vital-ui-kit-react/issues"
   },
-  "homepage": "https://github.com/GSS-FED/vital-ui-kit-react#readme",
-  "jest": {
-    "transform": {
-      "^.+\\.jsx$": "babel-jest",
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.md?$": "markdown-loader-jest"
-    },
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
-    }
-  }
+  "homepage": "https://github.com/GSS-FED/vital-ui-kit-react#readme"
 }
diff --git a/packages/web/src/Form/Input/Input.jsx b/packages/web/src/Form/Input/Input.jsx
index b5fbb6713..bb1433897 100644
--- a/packages/web/src/Form/Input/Input.jsx
+++ b/packages/web/src/Form/Input/Input.jsx
@@ -38,7 +38,7 @@ export default class Input extends React.Component<Props, State> {
     placeholder: null,
     icon: null,
     iconPosition: 'right',
-    defaultValue: null,
+    value: '',
     disabled: false,
     alarm: false,
     warning: false,
@@ -65,10 +65,9 @@ export default class Input extends React.Component<Props, State> {
   render() {
     return (
       <StatelessInput
-        defaultValue={this.props.value}
+        {...this.props}
         onChange={this.handleChange}
         value={this.state.value}
-        {...this.props}
         ref={input => {
           this.input = input;
         }}
diff --git a/packages/web/src/Form/Input/StatelessInput.jsx b/packages/web/src/Form/Input/StatelessInput.jsx
index 33c9c80a4..94f48b755 100644
--- a/packages/web/src/Form/Input/StatelessInput.jsx
+++ b/packages/web/src/Form/Input/StatelessInput.jsx
@@ -59,8 +59,6 @@ type Props = {
   type?: string,
   /** Html attr */
   placeholder?: string,
-  /** value of input */
-  value: string,
   /** Icon name */
   icon?: string,
   /** `left` or `right` */
@@ -101,7 +99,6 @@ class StatelessInput extends React.Component<Props> {
 
   render() {
     const {
-      value,
       defaultValue,
       type,
       placeholder,
@@ -116,7 +113,6 @@ class StatelessInput extends React.Component<Props> {
     return (
       <Root>
         <InputElement
-          value={value}
           defaultValue={defaultValue}
           type={type}
           placeholder={placeholder}
diff --git a/packages/web/src/Form/TextArea/StatelessTextArea.jsx b/packages/web/src/Form/TextArea/StatelessTextArea.jsx
index 9fa059e2e..69e70efe9 100644
--- a/packages/web/src/Form/TextArea/StatelessTextArea.jsx
+++ b/packages/web/src/Form/TextArea/StatelessTextArea.jsx
@@ -17,7 +17,7 @@ type Props = {
   resize?: boolean,
   disabled?: boolean,
   placeholder?: string,
-  value?: string,
+  defaultValue?: string,
   onChange?: (e: any) => mixed,
   id?: string,
   spellCheck?: boolean,
@@ -34,7 +34,7 @@ class StatelessTextArea extends React.Component<Props> {
     resize: false,
     disabled: false,
     placeholder: null,
-    value: '',
+    defaultValue: '',
     id: null,
     spellCheck: false,
     autoFocus: false,
@@ -59,7 +59,7 @@ class StatelessTextArea extends React.Component<Props> {
       autoFocus,
       maxLength,
       placeholder,
-      value,
+      defaultValue,
       onChange,
       id,
     } = this.props;
@@ -72,7 +72,7 @@ class StatelessTextArea extends React.Component<Props> {
         autoFocus={autoFocus}
         maxLength={maxLength}
         placeholder={placeholder}
-        value={value}
+        defaultValue={defaultValue}
         onChange={onChange}
         id={id}
         ref={input => {
diff --git a/packages/web/src/Form/TextArea/TextArea.jsx b/packages/web/src/Form/TextArea/TextArea.jsx
index 512a298e1..57d47fd17 100644
--- a/packages/web/src/Form/TextArea/TextArea.jsx
+++ b/packages/web/src/Form/TextArea/TextArea.jsx
@@ -66,9 +66,9 @@ export default class TextArea extends React.Component<Props, State> {
   render() {
     return (
       <StatelessTextArea
+        {...this.props}
         value={this.state.value}
         onChange={this.handleChange}
-        {...this.props}
         ref={input => {
           this.input = input;
         }}
diff --git a/packages/web/src/Table/Table.jsx b/packages/web/src/Table/Table.jsx
deleted file mode 100644
index 9c510299c..000000000
--- a/packages/web/src/Table/Table.jsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * @flow
- * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
- * MIT license
- */
-
-import * as React from 'react';
-
-import { StyledTable } from './styled';
-import Caption from './TableCaption';
-import Header from './TableHeader';
-
-type State = {
-  headers: Array<string>,
-  columnProps: Array<Object>,
-};
-
-type Props = {
-  data: Array<Object>,
-  children: React.Node,
-  caption: React.Node,
-  textAlign?: 'left' | 'center' | 'right',
-  hasHorizontalBorder?: boolean,
-  hasVerticalBorder?: boolean,
-  isStriped?: boolean,
-  hasHightlight?: boolean,
-  isResponsive?: boolean,
-  renderHeader?: (props: State) => React.Element<HTMLElement>,
-};
-
-/**
- * @render react
- * @name Table
- * @description Vital Table
- */
-class Table extends React.Component<Props, State> {
-  static defaultProps = {
-    isResponsive: false,
-    hasHightlight: true,
-    headers: null,
-    textAlign: 'center',
-    hasHorizontalBorder: false,
-    hasVerticalBorder: false,
-    isStriped: false,
-    renderHeader: () => {},
-  };
-
-  state = {
-    headers: Object.keys(this.props.data[0]),
-    columnProps: [],
-  };
-
-  componentDidMount() {
-    this.parseData();
-    if (this.props.children) {
-      this.columnConfigue();
-    }
-  }
-
-  renderCaption = () => {
-    if (
-      typeof this.props.caption === 'string' ||
-      this.props.caption instanceof String
-    ) {
-      return <Caption>{this.props.caption}</Caption>;
-    }
-    return this.props.caption;
-  };
-
-  parseData = () => {
-    this.setState({
-      headers: this.getHeaders(),
-    });
-  };
-
-  getHeaders = () =>
-    this.props.data
-      .map(data => Object.keys(data))
-      .reduce((prev, curr) => [...new Set([...prev, ...curr])]);
-
-  columnConfigue = () => {
-    const columnProps = React.Children.map(
-      this.props.children,
-      child => {
-        if (child.type.name === 'TableColumn') {
-          return child.props;
-        }
-        return null;
-      },
-    );
-
-    this.setState({
-      columnProps,
-    });
-  };
-
-  renderHeader = () => {
-    const props = {
-      columnProps: this.state.columnProps,
-      headers: this.state.headers,
-    };
-    return this.props.renderHeader ? (
-      this.props.renderHeader(props)
-    ) : (
-      <Header {...props} />
-    );
-  };
-
-  render() {
-    // TODO: Find why rerender twice at start
-    // console.log('rerender');
-    return (
-      <StyledTable
-        hasHorizontalBorder={this.props.hasHorizontalBorder}
-        hasVerticalBorder={this.props.hasVerticalBorder}
-        isStriped={this.props.isStriped}
-        hasHightlight={this.props.hasHightlight}
-        isResponsive={this.props.isResponsive}
-        textAlign={this.props.textAlign}
-      >
-        {this.props.caption && this.renderCaption()}
-        {this.renderHeader()}
-        <tbody>
-          {this.props.data.map((dataset, i) => {
-            const datamap = new Map(Object.entries(dataset));
-            return (
-              <tr key={dataset.id || i}>
-                {this.state.headers.map((header, index) => {
-                  if (datamap.has(header)) {
-                    const props = this.state.columnProps.find(
-                      column => header === column.field,
-                    );
-                    return (
-                      <td key={`${index}${header}`} {...props}>
-                        {String(datamap.get(header))}
-                      </td>
-                    );
-                  }
-                  return <td key={index} />;
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </StyledTable>
-    );
-  }
-}
-
-export default Table;
diff --git a/packages/web/src/Table/TableCaption.jsx b/packages/web/src/Table/TableCaption.jsx
deleted file mode 100644
index 565ce1046..000000000
--- a/packages/web/src/Table/TableCaption.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-
-import React, { type Node, Component } from 'react';
-import styled from 'styled-components';
-
-const Root = styled.caption`
-  padding: 1.25rem 0;
-`;
-
-type Props = {
-  children: Node,
-  className?: string,
-};
-
-class Caption extends Component<Props> {
-  // state = {};
-  render() {
-    return (
-      <Root className={this.props.className}>
-        {this.props.children}
-      </Root>
-    );
-  }
-}
-
-export default Caption;
diff --git a/packages/web/src/Table/TableColumn.jsx b/packages/web/src/Table/TableColumn.jsx
deleted file mode 100644
index 4d59036e2..000000000
--- a/packages/web/src/Table/TableColumn.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// @flow
-/* eslint-disable no-unused-vars */
-
-type Props = {
-  field: string,
-  title?: string,
-  className?: string,
-};
-
-function TableColumn(props: Props) {
-  return null;
-}
-
-export default TableColumn;
diff --git a/packages/web/src/Table/TableHeader.jsx b/packages/web/src/Table/TableHeader.jsx
deleted file mode 100644
index 721382cb2..000000000
--- a/packages/web/src/Table/TableHeader.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Root = styled.thead``;
-
-type Props = {
-  headers: Array<String>,
-  columnProps?: Array<{
-    title?: string,
-    className?: string,
-    field: string,
-  }>,
-};
-
-const TableHeader = ({ headers, columnProps }: Props) => (
-  <Root>
-    <table>
-      <colgroup role={'presentation'} />
-      <tbody>
-        <tr>
-          {headers.map((title, i) => {
-            const props = columnProps.find(
-              column => title === column.field,
-            );
-            if (props) {
-              return (
-                <th key={title || i} className={props.className}>
-                  {props.title ? props.title : title}
-                </th>
-              );
-            }
-            return <th key={title || i}>{title}</th>;
-          })}
-        </tr>
-      </tbody>
-    </table>
-  </Root>
-);
-
-export default TableHeader;
diff --git a/packages/web/src/Table/index.js b/packages/web/src/Table/index.js
deleted file mode 100644
index 6b938a731..000000000
--- a/packages/web/src/Table/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Table from './Table';
-import TableColumn from './TableColumn';
-import TableCaption from './TableCaption';
-import TableHeader from './TableHeader';
-
-export { Table, TableColumn, TableCaption, TableHeader };
diff --git a/packages/web/src/Table/styled.js b/packages/web/src/Table/styled.js
deleted file mode 100644
index f3343562d..000000000
--- a/packages/web/src/Table/styled.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import styled, { css } from 'styled-components';
-
-// eslint-disable-next-line
-export const StyledTable = styled.table`
-  width: 100%;
-  text-align: ${props => props.textAlign || 'left'};
-
-  thead {
-    border-bottom: ${props =>
-      props.hasHorizontalBorder && props.theme.border};
-
-    ${props =>
-      props.isResponsive &&
-      css`
-        th {
-          @media (max-width: 800px) {
-            display: block;
-            text-align: right;
-          }
-        }
-
-        @media (max-width: 800px) {
-          float: left;
-          border: 0;
-          border-right: ${props.theme.border};
-          border-bottom: ${props.theme.border};
-        }
-      `};
-  }
-
-  th {
-    color: ${props => props.theme.table.color};
-    padding: 0.6667rem 1.3333rem;
-    border-right: ${props =>
-      props.hasVerticalBorder && props.theme.border};
-
-    &:last-child {
-      border: 0;
-    }
-  }
-
-  tbody {
-    ${props =>
-      props.isResponsive &&
-      css`
-        @media (max-width: 800px) {
-          display: block;
-          width: auto;
-          position: relative;
-          overflow-x: auto;
-          white-space: nowrap;
-          font-size: 0;
-        }
-      `};
-    tr {
-      transition: background-color 0.3s ease;
-
-      ${props =>
-        props.isResponsive &&
-        css`
-          @media (max-width: 800px) {
-            display: inline-block;
-            font-size: 1rem;
-            vertical-align: top;
-          }
-        `};
-
-      ${props =>
-        props.hasHightlight &&
-        css`
-          &:hover {
-            background-color: ${props.theme.hoverBg};
-          }
-        `};
-
-      ${props =>
-        props.isStriped &&
-        css`
-          &:nth-child(odd) {
-            background-color: ${props.theme.striped.odd};
-
-            &:hover {
-              background-color: ${props.theme.hoverBg};
-            }
-          }
-        `};
-    }
-
-    td {
-      ${props =>
-        props.isResponsive &&
-        css`
-          @media (max-width: 800px) {
-            display: block;
-            text-align: right;
-          }
-        `};
-    }
-  }
-
-  tr {
-    border-bottom: ${props =>
-      props.hasHorizontalBorder && props.theme.border};
-
-    &:last-child {
-      border: 0;
-    }
-  }
-
-  td {
-    padding: 0.6667rem 1.3333rem;
-    color: #456297;
-    border-right: ${props =>
-      props.hasVerticalBorder && props.theme.border};
-    &:last-child {
-      border: 0;
-    }
-  }
-`;
diff --git a/packages/web/src/index.js b/packages/web/src/index.js
index 2efec63a0..5d6d6b30b 100644
--- a/packages/web/src/index.js
+++ b/packages/web/src/index.js
@@ -37,7 +37,6 @@ import { Pill } from './Pill';
 import Slider from './Slider';
 import Tooltip from './Tooltip';
 import ProgressBar from './ProgressBar';
-import { Table, TableCaption, TableColumn, TableHeader } from './Table';
 import Pagination from './Pagination';
 import Menu from './Menu';
 import Tabs from './Tabs';
@@ -74,10 +73,6 @@ export {
   Slider,
   Tooltip,
   ProgressBar,
-  Table,
-  TableCaption,
-  TableColumn,
-  TableHeader,
   Pagination,
   ThemeProvider,
   defaultTheme,
diff --git a/packages/web/stories/__snapshots__/Overview.stories.storyshot b/packages/web/stories/__snapshots__/Overview.stories.storyshot
deleted file mode 100644
index 7c4bfe00d..000000000
--- a/packages/web/stories/__snapshots__/Overview.stories.storyshot
+++ /dev/null
@@ -1,780 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Getting Started Overview 1`] = `
-<div>
-  <div
-    className="sc-gZMcBi jzJGwU"
-    style={null}
-  >
-    <div
-      className="sc-kIPQKe gpZGmH"
-    >
-      Avatar
-    </div>
-    <div
-      className="sc-eXEjpC hzGOeU"
-    >
-      <div
-        className="sc-bwzfXH byurlq"
-        style={null}
-      >
-        <img
-          className="sc-htpNat fQIwtq"
-          size="xsmall"
-          src="test-file-stub"
-          style={null}
-        />
-      </div>
-    </div>
-    <div
-      className="sc-eXEjpC hzGOeU"
-    >
-      <div
-        className="sc-bwzfXH byurlq"
-        style={null}
-      >
-        <img
-          className="sc-htpNat isRSBx"
-          size="small"
-          src="test-file-stub"
-          style={null}
-        />
-      </div>
-    </div>
-    <div
-      className="sc-eXEjpC hzGOeU"
-    >
-      <div
-        className="sc-bwzfXH byurlq"
-        style={null}
-      >
-        <img
-          className="sc-htpNat iWPofg"
-          size="medium"
-          src="test-file-stub"
-          style={null}
-        />
-        <span
-          className="sc-bdVaJa iVvZdE"
-          label={10}
-          size="medium"
-          style={null}
-        />
-      </div>
-    </div>
-    <div
-      className="sc-eXEjpC hzGOeU"
-    >
-      <div
-        className="sc-bwzfXH byurlq"
-        style={null}
-      >
-        <img
-          className="sc-htpNat cbQvwV"
-          size="large"
-          src="test-file-stub"
-          style={null}
-        />
-      </div>
-    </div>
-    <div
-      className="sc-eXEjpC hzGOeU"
-    >
-      <div
-        className="sc-bwzfXH byurlq"
-        style={null}
-      >
-        <img
-          className="sc-htpNat eJDQyF"
-          size="xlarge"
-          src="test-file-stub"
-          style={null}
-        />
-        <span
-          className="sc-bdVaJa dRAmdu"
-          label={100}
-          size="xlarge"
-          style={null}
-        >
-          99+
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gZMcBi jzJGwU"
-    style={null}
-  >
-    <div
-      className="sc-kIPQKe gpZGmH"
-    >
-      Button
-    </div>
-    <div
-      className="sc-bxivhb kOLvtg"
-      style={
-        Object {
-          "paddingBottom": "20px",
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX ejdaYI"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Link
-      </button>
-      <button
-        className="sc-ifAKCX imDogB"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Dark Link
-      </button>
-      <button
-        className="sc-ifAKCX fYniCN"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Link underline
-      </button>
-      <button
-        className="sc-ifAKCX hzJWbI"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Dark Link underline
-      </button>
-    </div>
-    <div
-      className="sc-bxivhb kOLvtg"
-      style={
-        Object {
-          "paddingBottom": "20px",
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX lgHGEf"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        default
-      </button>
-      <button
-        className="sc-ifAKCX lhGjii"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        primary
-      </button>
-      <button
-        className="sc-ifAKCX iPkHqN"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        success
-      </button>
-      <button
-        className="sc-ifAKCX eIGihw"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        info
-      </button>
-      <button
-        className="sc-ifAKCX iELRE"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        alarm
-      </button>
-      <button
-        className="sc-ifAKCX fKqxXE"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        warning
-      </button>
-    </div>
-    <div
-      className="sc-bxivhb kOLvtg"
-      style={
-        Object {
-          "paddingBottom": "20px",
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX hEkazX"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        flat
-      </button>
-      <button
-        className="sc-ifAKCX Uiqxi"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        primary
-      </button>
-      <button
-        className="sc-ifAKCX gebpmz"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        success
-      </button>
-      <button
-        className="sc-ifAKCX kUQwhE"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        info
-      </button>
-      <button
-        className="sc-ifAKCX NzZsO"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        alarm
-      </button>
-      <button
-        className="sc-ifAKCX bXYPbR"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        warning
-      </button>
-    </div>
-    <div
-      className="sc-bxivhb kOLvtg"
-      style={
-        Object {
-          "paddingBottom": "20px",
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX iisouQ"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        subtle
-      </button>
-      <button
-        className="sc-ifAKCX fsAjIL"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        primary
-      </button>
-      <button
-        className="sc-ifAKCX kShjdX"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        success
-      </button>
-      <button
-        className="sc-ifAKCX gWuGCB"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        info
-      </button>
-      <button
-        className="sc-ifAKCX dOoQtn"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        alarm
-      </button>
-      <button
-        className="sc-ifAKCX fRpNHb"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        warning
-      </button>
-    </div>
-    <div
-      className="sc-bxivhb kOLvtg"
-      style={
-        Object {
-          "paddingBottom": "20px",
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX hYuTIy"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        light
-      </button>
-      <button
-        className="sc-ifAKCX byouKm"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        primary
-      </button>
-      <button
-        className="sc-ifAKCX lfJPzl"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        success
-      </button>
-      <button
-        className="sc-ifAKCX lluSss"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        info
-      </button>
-      <button
-        className="sc-ifAKCX ihHHJR"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        alarm
-      </button>
-      <button
-        className="sc-ifAKCX nZUPu"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        warning
-      </button>
-    </div>
-    <div
-      className="sc-bxivhb HBikN"
-      style={null}
-    >
-      <button
-        className="sc-ifAKCX bbykOi"
-        onClick={[Function]}
-        selected={false}
-        size="xlarge"
-        style={null}
-      >
-        xlarge
-      </button>
-      <button
-        className="sc-ifAKCX fDcGsE"
-        onClick={[Function]}
-        selected={false}
-        size="large"
-        style={null}
-      >
-        large
-      </button>
-      <button
-        className="sc-ifAKCX Uiqxi"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        medium
-      </button>
-      <button
-        className="sc-ifAKCX czxfbJ"
-        onClick={[Function]}
-        selected={false}
-        size="small"
-        style={null}
-      >
-        small
-      </button>
-      <button
-        className="sc-ifAKCX fwyBVM"
-        onClick={[Function]}
-        selected={false}
-        size="xsmall"
-        style={null}
-      >
-        xsmall
-      </button>
-    </div>
-    <div
-      className="sc-bxivhb HBikN"
-      style={null}
-    >
-      <button
-        className="sc-ifAKCX irkfhF"
-        onClick={[Function]}
-        selected={false}
-        size="xsmall"
-        style={null}
-      >
-        xsmall
-      </button>
-      <button
-        className="sc-ifAKCX gWWmCd"
-        onClick={[Function]}
-        selected={false}
-        size="small"
-        style={null}
-      >
-        small
-      </button>
-      <button
-        className="sc-ifAKCX hEkazX"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        medium
-      </button>
-      <button
-        className="sc-ifAKCX gnlFHj"
-        onClick={[Function]}
-        selected={false}
-        size="large"
-        style={null}
-      >
-        large
-      </button>
-      <button
-        className="sc-ifAKCX iFGyvD"
-        onClick={[Function]}
-        selected={false}
-        size="xlarge"
-        style={null}
-      >
-        xlarge
-      </button>
-    </div>
-  </div>
-  <div
-    className="sc-gZMcBi jzJGwU"
-    style={null}
-  >
-    <div
-      className="sc-kIPQKe gpZGmH"
-    >
-      Card
-    </div>
-    <div
-      className="sc-ibxdXY ffoYIj"
-    >
-      <div
-        className="sc-kGXeez joxBBS"
-        height="auto"
-        width="300px"
-      >
-        <div
-          className="sc-cSHVUG gekZmC"
-          style={
-            Object {
-              "textAlign": "center",
-            }
-          }
-        >
-          <svg
-            height="90"
-            onClick={[Function]}
-            viewBox="0 0 914.2857142857142 1024"
-            width="90"
-          >
-            <path
-              d="M146.286 768c0-20-16.571-36.571-36.571-36.571-20.571 0-36.571 16.571-36.571 36.571 0 20.571 16 36.571 36.571 36.571 20 0 36.571-16 36.571-36.571zM237.714 475.429v365.714c0 20-16.571 36.571-36.571 36.571h-164.571c-20 0-36.571-16.571-36.571-36.571v-365.714c0-20 16.571-36.571 36.571-36.571h164.571c20 0 36.571 16.571 36.571 36.571zM914.286 475.429c0 30.286-12 62.857-31.429 85.143 6.286 18.286 8.571 35.429 8.571 43.429 1.143 28.571-7.429 55.429-24.571 78.286 6.286 21.143 6.286 44 0 66.857-5.714 21.143-16.571 40-30.857 53.714 3.429 42.857-6.286 77.714-28 103.429-24.571 29.143-62.286 44-112.571 44.571h-73.714c-81.714 0-158.857-26.857-220.571-48-36-12.571-70.286-24.571-90.286-25.143-19.429-0.571-36.571-16.571-36.571-36.571v-366.286c0-18.857 16-34.857 34.857-36.571 21.143-1.714 76-69.714 101.143-102.857 20.571-26.286 40-50.857 57.714-68.571 22.286-22.286 28.571-56.571 35.429-89.714 6.286-33.714 13.143-69.143 37.714-93.143 6.857-6.857 16-10.857 25.714-10.857 128 0 128 102.286 128 146.286 0 46.857-16.571 80-32 109.714-6.286 12.571-12 18.286-16.571 36.571h158.286c59.429 0 109.714 50.286 109.714 109.714z"
-              fill="#0e86fe"
-            />
-          </svg>
-          <div
-            style={
-              Object {
-                "color": "#456297",
-                "fontSize": "1.25rem",
-                "lineHeight": "1.5rem",
-                "overflow": "hidden",
-                "paddingTop": "1.25rem",
-                "textOverflow": "ellipsis",
-                "whiteSpace": "nowrap",
-                "width": "100%",
-              }
-            }
-          >
-            Congrats
-          </div>
-          <div
-            style={
-              Object {
-                "fontSize": "0.93333rem",
-                "lineHeight": "1.25rem",
-                "paddingTop": "10px",
-              }
-            }
-          >
-            Let’s Get Started
-          </div>
-        </div>
-        <div
-          className="sc-kAzzGY beUSyZ"
-        >
-          <div
-            className="sc-chPdSV fyCuVJ"
-          >
-            <button
-              className="sc-kgoBCf dvVnpo"
-            >
-              Confirm
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Getting Started Theme 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "bottom": 0,
-      "display": "flex",
-      "justifyContent": "center",
-      "left": 0,
-      "overflow": "auto",
-      "position": "fixed",
-      "right": 0,
-      "top": 0,
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "margin": "auto",
-      }
-    }
-  >
-    <div
-      className="sc-RefOD ZRwGj"
-    >
-      <input
-        onChange={[Function]}
-        type="color"
-        value="#0E86FE"
-      />
-      <div
-        className="sc-iQKALj iwKnDK"
-      >
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#d9ecff",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#a6d3ff",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#74b9fe",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#41a0fe",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#0E86FE",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#016dd8",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#0153a5",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#003a73",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#002040",
-            }
-          }
-        />
-      </div>
-      <div
-        className="sc-iQKALj iwKnDK"
-      >
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#f7fbfe",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#eef5fc",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#d8e7f6",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#c4d8eb",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#95b5d4",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#7193b6",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#456e97",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#2a557f",
-            }
-          }
-        />
-        <div
-          className="sc-bwCtUz gEZuWG"
-          style={
-            Object {
-              "background": "#1e4368",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/web/stories/examples/Table.stories.jsx b/packages/web/stories/examples/Table.stories.jsx
deleted file mode 100644
index 773794a0a..000000000
--- a/packages/web/stories/examples/Table.stories.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable import/no-extraneous-dependencies */
-
-import React from 'react';
-import styled from 'styled-components';
-import axios from 'axios';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-import { withInfo } from '@storybook/addon-info';
-import {
-  withKnobs,
-  text,
-  boolean,
-  number,
-  select,
-} from '@storybook/addon-knobs/react';
-import { withNotes } from '@storybook/addon-notes';
-
-import LoadData from '../Container/LoadData';
-import {
-  Table,
-  TableCaption as Caption,
-  TableColumn as Column,
-  TableHeader as Header,
-} from '../../src';
-
-const sample = [
-  {
-    name: 'Jennifer',
-    age: 30,
-    gender: 'Female',
-    Job: 'Front-end',
-    test: '2',
-  },
-  {
-    name: 'Oliver',
-    age: 18,
-    gender: 'Female',
-  },
-  {
-    name: 'Jordan',
-    age: 53,
-    gender: 'Male',
-    test: 'haha',
-  },
-];
-
-storiesOf('Components | Table', module)
-  .addDecorator(withKnobs)
-  .add(
-    'Basic',
-    withInfo(`info`)(
-      withNotes('This is slider')(() => (
-        <Table
-          textAlign={select(
-            'textAlign',
-            { left: 'left', center: 'center', right: 'right' },
-            'left',
-          )}
-          hasHorizontalBorder={boolean('hasHorizontalBorder', false)}
-          hasVerticalBorder={boolean('hasVerticalBorder', false)}
-          isStriped={boolean('isStriped', false)}
-          hasHightlight={boolean('hasHightlight', true)}
-          data={sample}
-          caption={<Caption>Caption</Caption>}
-          renderHeader={props => <Header {...props} />}
-        >
-          <Column title="Name" field="name" className="test" />
-          <Column title="Age" field="age" className="test2" />
-        </Table>
-      )),
-    ),
-  )
-  .add('fetch from external data', () => (
-    <LoadData url="https://jsonplaceholder.typicode.com/photos">
-      {data => (
-        <Table data={data}>
-          <Column
-            title="Album Number"
-            field="albumId"
-            className="test"
-          />
-          <Column title="Link" field="url" className="test2" />
-        </Table>
-      )}
-    </LoadData>
-  ));
diff --git a/packages/web/stories/examples/__snapshots__/Avatar.stories.storyshot b/packages/web/stories/examples/__snapshots__/Avatar.stories.storyshot
deleted file mode 100644
index 6424550ae..000000000
--- a/packages/web/stories/examples/__snapshots__/Avatar.stories.storyshot
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Avatar Basic 1`] = `
-<div
-  className="sc-bwzfXH byurlq"
-  style={null}
->
-  <img
-    className="sc-htpNat EiuKF"
-    size="medium"
-    src="test-file-stub"
-    style={null}
-  />
-  <span
-    className="sc-bdVaJa bmEHVK"
-    label="99+"
-    size="medium"
-    style={null}
-  />
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Box.stories.storyshot b/packages/web/stories/examples/__snapshots__/Box.stories.storyshot
deleted file mode 100644
index def00c8c3..000000000
--- a/packages/web/stories/examples/__snapshots__/Box.stories.storyshot
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Box Basic 1`] = `
-<div
-  className="sc-hrWEMg cWEZqH sc-gZMcBi hDgSYL"
-  style={null}
->
-  This is a box!
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Button.stories.storyshot b/packages/web/stories/examples/__snapshots__/Button.stories.storyshot
deleted file mode 100644
index 618a4a5ca..000000000
--- a/packages/web/stories/examples/__snapshots__/Button.stories.storyshot
+++ /dev/null
@@ -1,131 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Button ButtonGroup 1`] = `
-<div
-  className="sc-bxivhb HBikN"
-  style={null}
->
-  <button
-    className="sc-ifAKCX lgHGEf"
-    onClick={[Function]}
-    selected={false}
-    size="medium"
-    style={null}
-  >
-    Button
-  </button>
-  <button
-    className="sc-ifAKCX lgHGEf"
-    onClick={[Function]}
-    selected={false}
-    size="medium"
-    style={null}
-  >
-    Button
-  </button>
-  <button
-    className="sc-ifAKCX lgHGEf"
-    onClick={[Function]}
-    selected={false}
-    size="medium"
-    style={null}
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Storyshots Components | Button Circular style 1`] = `
-<button
-  className="sc-ifAKCX gcTbGz"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  <svg
-    height={16}
-    onClick={[Function]}
-    viewBox="0 0 804.5714285714286 1024"
-    width={16}
-  >
-    <path
-      d="M804.571 420.571v109.714c0 30.286-24.571 54.857-54.857 54.857h-237.714v237.714c0 30.286-24.571 54.857-54.857 54.857h-109.714c-30.286 0-54.857-24.571-54.857-54.857v-237.714h-237.714c-30.286 0-54.857-24.571-54.857-54.857v-109.714c0-30.286 24.571-54.857 54.857-54.857h237.714v-237.714c0-30.286 24.571-54.857 54.857-54.857h109.714c30.286 0 54.857 24.571 54.857 54.857v237.714h237.714c30.286 0 54.857 24.571 54.857 54.857z"
-      fill="#3b5998"
-    />
-  </svg>
-</button>
-`;
-
-exports[`Storyshots Components | Button Default 1`] = `
-<button
-  className="sc-ifAKCX lgHGEf"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Default Button
-</button>
-`;
-
-exports[`Storyshots Components | Button Disable 1`] = `
-<button
-  className="sc-ifAKCX lgHGEf"
-  disabled={true}
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Disable Button
-</button>
-`;
-
-exports[`Storyshots Components | Button Flat 1`] = `
-<button
-  className="sc-ifAKCX hEkazX"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Flat Button
-</button>
-`;
-
-exports[`Storyshots Components | Button Light 1`] = `
-<button
-  className="sc-ifAKCX hYuTIy"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Light Button
-</button>
-`;
-
-exports[`Storyshots Components | Button Link 1`] = `
-<button
-  className="sc-ifAKCX ejdaYI"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Link Button
-</button>
-`;
-
-exports[`Storyshots Components | Button Subtle 1`] = `
-<button
-  className="sc-ifAKCX iisouQ"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Subtle Button
-</button>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Card.stories.storyshot b/packages/web/stories/examples/__snapshots__/Card.stories.storyshot
deleted file mode 100644
index e6c99f672..000000000
--- a/packages/web/stories/examples/__snapshots__/Card.stories.storyshot
+++ /dev/null
@@ -1,283 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Card Default Full Button type 1`] = `
-<div
-  className="sc-kGXeez bXHEXa"
-  height="220px"
-  width="300px"
->
-  <div
-    className="sc-VigVT ezSxxb"
-  >
-    <div
-      className="sc-fjdhpX dNDeVp"
-      style={null}
-    >
-      Title
-    </div>
-    <div
-      className="sc-jzJRlG qvPgq sc-fjdhpX dNDeVp"
-    >
-      <span
-        className="sc-gqjmRU fJwGbl"
-      >
-        99+
-      </span>
-    </div>
-  </div>
-  <div
-    className="sc-cSHVUG gekZmC"
-  >
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-  </div>
-  <div
-    className="sc-kAzzGY beUSyZ"
-  >
-    <div
-      className="sc-chPdSV fyCuVJ"
-    >
-      <button
-        className="sc-kgoBCf gCTJev"
-      >
-        Cancel
-      </button>
-    </div>
-    <div
-      className="sc-chPdSV fyCuVJ"
-    >
-      <button
-        className="sc-kgoBCf dvVnpo"
-      >
-        Confirm
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Card Hero Image 1`] = `
-<div
-  className="sc-kGXeez fJJIyi"
-  height="400px"
-  width="300px"
->
-  <div
-    className="sc-jTzLTM EUIFR sc-VigVT ezSxxb"
-  >
-    <h4
-      style={null}
-    >
-      Title
-    </h4>
-  </div>
-  <div
-    className="sc-cSHVUG gekZmC"
-  >
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-  </div>
-  <div
-    className="sc-kAzzGY beUSyZ"
-  >
-    <div
-      className="sc-chPdSV fyCuVJ"
-    >
-      <button
-        className="sc-kgoBCf gCTJev"
-      >
-        Cancel
-      </button>
-    </div>
-    <div
-      className="sc-chPdSV fyCuVJ"
-    >
-      <button
-        className="sc-kgoBCf dvVnpo"
-      >
-        Confirm
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Card With Flat Button 1`] = `
-<div
-  className="sc-kGXeez bXHEXa"
-  height="220px"
-  width="300px"
->
-  <div
-    className="sc-VigVT ezSxxb"
-  >
-    <div
-      className="sc-fjdhpX dNDeVp"
-      style={null}
-    >
-      Title
-    </div>
-  </div>
-  <div
-    className="sc-cSHVUG gekZmC"
-  >
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-  </div>
-  <div
-    className="sc-kAzzGY beUSyZ"
-  >
-    <div
-      className="sc-bxivhb HBikN"
-      style={
-        Object {
-          "padding": 10,
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX lgHGEf"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Cancel
-      </button>
-      <button
-        className="sc-ifAKCX Uiqxi"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Confirm
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Card With Icon 1`] = `
-<div
-  className="sc-kGXeez joxBBS"
-  height="auto"
-  width="300px"
->
-  <div
-    className="sc-cSHVUG gekZmC"
-    style={
-      Object {
-        "textAlign": "center",
-      }
-    }
-  >
-    <svg
-      height="90"
-      onClick={[Function]}
-      viewBox="0 0 914.2857142857142 1024"
-      width="90"
-    >
-      <path
-        d="M146.286 768c0-20-16.571-36.571-36.571-36.571-20.571 0-36.571 16.571-36.571 36.571 0 20.571 16 36.571 36.571 36.571 20 0 36.571-16 36.571-36.571zM237.714 475.429v365.714c0 20-16.571 36.571-36.571 36.571h-164.571c-20 0-36.571-16.571-36.571-36.571v-365.714c0-20 16.571-36.571 36.571-36.571h164.571c20 0 36.571 16.571 36.571 36.571zM914.286 475.429c0 30.286-12 62.857-31.429 85.143 6.286 18.286 8.571 35.429 8.571 43.429 1.143 28.571-7.429 55.429-24.571 78.286 6.286 21.143 6.286 44 0 66.857-5.714 21.143-16.571 40-30.857 53.714 3.429 42.857-6.286 77.714-28 103.429-24.571 29.143-62.286 44-112.571 44.571h-73.714c-81.714 0-158.857-26.857-220.571-48-36-12.571-70.286-24.571-90.286-25.143-19.429-0.571-36.571-16.571-36.571-36.571v-366.286c0-18.857 16-34.857 34.857-36.571 21.143-1.714 76-69.714 101.143-102.857 20.571-26.286 40-50.857 57.714-68.571 22.286-22.286 28.571-56.571 35.429-89.714 6.286-33.714 13.143-69.143 37.714-93.143 6.857-6.857 16-10.857 25.714-10.857 128 0 128 102.286 128 146.286 0 46.857-16.571 80-32 109.714-6.286 12.571-12 18.286-16.571 36.571h158.286c59.429 0 109.714 50.286 109.714 109.714z"
-        fill="#0e86fe"
-      />
-    </svg>
-    <div
-      style={
-        Object {
-          "color": "#456297",
-          "fontSize": "1.25rem",
-          "lineHeight": "1.5rem",
-          "overflow": "hidden",
-          "paddingTop": "1.25rem",
-          "textOverflow": "ellipsis",
-          "whiteSpace": "nowrap",
-          "width": "100%",
-        }
-      }
-    >
-      Congrats
-    </div>
-    <div
-      style={
-        Object {
-          "fontSize": "0.93333rem",
-          "lineHeight": "1.25rem",
-          "paddingTop": "10px",
-        }
-      }
-    >
-      Let’s Get Started
-    </div>
-  </div>
-  <div
-    className="sc-kAzzGY beUSyZ"
-  >
-    <div
-      className="sc-chPdSV fyCuVJ"
-    >
-      <button
-        className="sc-kgoBCf dvVnpo"
-      >
-        Confirm
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Card With Link Button 1`] = `
-<div
-  className="sc-kGXeez bXHEXa"
-  height="220px"
-  width="300px"
->
-  <div
-    className="sc-VigVT ezSxxb"
-  >
-    <div
-      className="sc-fjdhpX dNDeVp"
-      style={null}
-    >
-      Title
-    </div>
-  </div>
-  <div
-    className="sc-cSHVUG gekZmC"
-  >
-    Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
-  </div>
-  <div
-    className="sc-kAzzGY beUSyZ"
-  >
-    <div
-      className="sc-bxivhb HBikN"
-      style={
-        Object {
-          "padding": 10,
-        }
-      }
-    >
-      <button
-        className="sc-ifAKCX ejdaYI"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Cancel
-      </button>
-      <button
-        className="sc-ifAKCX qlycK"
-        onClick={[Function]}
-        selected={false}
-        size="medium"
-        style={null}
-      >
-        Confirm
-      </button>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Form.stories.storyshot b/packages/web/stories/examples/__snapshots__/Form.stories.storyshot
deleted file mode 100644
index 4bed1ee4b..000000000
--- a/packages/web/stories/examples/__snapshots__/Form.stories.storyshot
+++ /dev/null
@@ -1,763 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Form Full Example 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-gipzik twobj"
-  >
-    <span
-      className="sc-brqgnP eOaOlS"
-      required={true}
-    >
-      Username
-    </span>
-    <div
-      className="sc-cMljjf hwFcyK"
-    >
-      <input
-        autoFocus={false}
-        className="sc-jAaTju knvECT"
-        defaultValue={null}
-        disabled={false}
-        icon={null}
-        onChange={null}
-        placeholder="Enter your username"
-        spellCheck={false}
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-  <div
-    className="sc-gipzik twobj"
-  >
-    <span
-      className="sc-brqgnP eOaOlS"
-      required={true}
-    >
-      Fullname
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="First Name"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="Last Name"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gipzik twobj"
-  >
-    <span
-      className="sc-brqgnP eOaOlS"
-      required={true}
-    >
-      Birthday
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="Month"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="Day"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="Year"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gipzik twobj"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Website
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG gnaOzQ"
-      >
-        <div
-          className="sc-jWBwVP pgJhm"
-        >
-          http://
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="LabelAddon on the left"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Comment
-    </span>
-    <textarea
-      autoFocus={false}
-      className="sc-gPEVay icsnmY"
-      disabled={false}
-      id={null}
-      maxLength={null}
-      onChange={null}
-      placeholder="Comment here"
-      rows={3}
-      spellCheck={false}
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form Hint 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Username
-    </span>
-    <div
-      className="sc-cMljjf hwFcyK"
-    >
-      <input
-        autoFocus={false}
-        className="sc-jAaTju knvECT"
-        defaultValue={null}
-        disabled={false}
-        icon={null}
-        onChange={null}
-        placeholder={null}
-        spellCheck={false}
-        type="text"
-        value="dramsign"
-      />
-    </div>
-    <div
-      className="sc-cvbbAY eJUdcQ"
-    >
-      Username is available
-    </div>
-    <div
-      className="sc-cvbbAY gcRjjQ"
-    >
-      Example: James Allen
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form Input with Label 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-gipzik twobj"
-  >
-    <span
-      className="sc-brqgnP eOaOlS"
-      required={true}
-    >
-      Username
-    </span>
-    <div
-      className="sc-cMljjf hwFcyK"
-    >
-      <input
-        autoFocus={false}
-        className="sc-jAaTju knvECT"
-        defaultValue={null}
-        disabled={false}
-        icon={null}
-        onChange={null}
-        placeholder="Enter your username"
-        spellCheck={false}
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form Multiple & Addon 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Weight
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="LabelAddon on the right"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG gnaOzQ"
-      >
-        <div
-          className="sc-jWBwVP pgJhm"
-        >
-          kg
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Price
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG gnaOzQ"
-      >
-        <div
-          className="sc-jWBwVP pgJhm"
-        >
-          <svg
-            height={16}
-            onClick={[Function]}
-            viewBox="0 0 583.4605714285714 1024"
-            width={16}
-          >
-            <path
-              d="M558.857 677.143c0 116.571-83.429 208.571-204.571 228.571v100c0 10.286-8 18.286-18.286 18.286h-77.143c-9.714 0-18.286-8-18.286-18.286v-100c-133.714-18.857-206.857-98.857-209.714-102.286-5.714-6.857-6.286-16.571-1.143-23.429l58.857-77.143c2.857-4 8-6.286 13.143-6.857s10.286 1.143 13.714 5.143c1.143 0.571 81.143 77.143 182.286 77.143 56 0 116.571-29.714 116.571-94.286 0-54.857-67.429-81.714-144.571-112.571-102.857-40.571-230.857-92-230.857-235.429 0-105.143 82.286-192 201.714-214.857v-102.857c0-10.286 8.571-18.286 18.286-18.286h77.143c10.286 0 18.286 8 18.286 18.286v100.571c116 13.143 177.714 76 180 78.286 5.714 6.286 6.857 14.857 2.857 21.714l-46.286 83.429c-2.857 5.143-7.429 8.571-13.143 9.143-5.714 1.143-10.857-0.571-15.429-4-0.571-0.571-69.714-61.714-155.429-61.714-72.571 0-122.857 36-122.857 88 0 60.571 69.714 87.429 150.857 118.857 105.143 40.571 224 86.857 224 224.571z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="LabelAddon on the both"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG gnaOzQ"
-      >
-        <div
-          className="sc-jWBwVP pgJhm"
-        >
-          .00
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Button
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="LabelAddon on the both"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <button
-          className="sc-ifAKCX Uiqxi"
-          onClick={[Function]}
-          selected={false}
-          size="medium"
-          style={null}
-        >
-          Search
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form Multiple & Button 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Button
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <button
-          className="sc-ifAKCX lgHGEf"
-          onClick={[Function]}
-          selected={false}
-          size="medium"
-          style={null}
-        >
-          A
-        </button>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <button
-          className="sc-ifAKCX lgHGEf"
-          onClick={[Function]}
-          selected={false}
-          size="medium"
-          style={null}
-        >
-          B
-        </button>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <button
-          className="sc-ifAKCX lgHGEf"
-          onClick={[Function]}
-          selected={false}
-          size="medium"
-          style={null}
-        >
-          C
-        </button>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="LabelAddon on the both"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="sc-gipzik OLXUC"
-  >
-    <span
-      className="sc-brqgnP jXbsSQ"
-      required={false}
-    >
-      Button
-    </span>
-    <div
-      className="sc-iRbamj cjHrfq"
-    >
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <div
-          className="sc-cMljjf hwFcyK"
-        >
-          <input
-            autoFocus={false}
-            className="sc-jAaTju knvECT"
-            defaultValue={null}
-            disabled={false}
-            icon={null}
-            onChange={null}
-            placeholder="LabelAddon on the both"
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-      <div
-        className="sc-jlyJG iLgAEE"
-      >
-        <button
-          className="sc-ifAKCX Uiqxi"
-          onClick={[Function]}
-          selected={false}
-          size="medium"
-          style={null}
-        >
-          Search
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form/Input Basic 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-cMljjf hwFcyK"
-  >
-    <input
-      autoFocus={false}
-      className="sc-jAaTju knvECT"
-      defaultValue="default"
-      disabled={false}
-      icon={null}
-      placeholder="Uncontrolled Input"
-      spellCheck={false}
-      type="text"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form/Input Controlled Input 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-cMljjf hwFcyK"
-  >
-    <input
-      autoFocus={false}
-      className="sc-jAaTju knvECT"
-      defaultValue={null}
-      disabled={false}
-      icon={null}
-      onChange={null}
-      placeholder="Controlled Input"
-      spellCheck={false}
-      type="text"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form/Input With Icon 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-cMljjf hwFcyK"
-  >
-    <input
-      autoFocus={false}
-      className="sc-jAaTju jnPaQg"
-      defaultValue=""
-      disabled={false}
-      icon="search"
-      placeholder="Right side icon"
-      spellCheck={false}
-      type="text"
-    />
-    <svg
-      className="sc-jDwBTQ ZtEja"
-      height={16}
-      iconPosition="right"
-      onClick={[Function]}
-      viewBox="0 0 950.8571428571428 1024"
-      width={16}
-    >
-      <path
-        d="M658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857c0 40-33.143 73.143-73.143 73.143-19.429 0-38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"
-        fill="currentColor"
-      />
-    </svg>
-  </div>
-  <br />
-  <div
-    className="sc-cMljjf hwFcyK"
-  >
-    <input
-      autoFocus={false}
-      className="sc-jAaTju itJGzT"
-      defaultValue=""
-      disabled={false}
-      icon="search"
-      placeholder="Left side icon"
-      spellCheck={false}
-      type="text"
-    />
-    <svg
-      className="sc-jDwBTQ gblsWu"
-      height={16}
-      iconPosition="left"
-      onClick={[Function]}
-      viewBox="0 0 950.8571428571428 1024"
-      width={16}
-    >
-      <path
-        d="M658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857c0 40-33.143 73.143-73.143 73.143-19.429 0-38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"
-        fill="currentColor"
-      />
-    </svg>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form/Select Basic 1`] = `
-<div
-  className="sc-eTuwsz brFWKa"
->
-  <div
-    className="sc-hzDkRC eBXbor"
-  >
-    <div
-      className="sc-jhAzac bQmBEe"
-      onClick={[Function]}
-      placeholder="Select One"
-    >
-      <span
-        className="sc-fMiknA hfhIin sc-fBuWsC eeihxG"
-      >
-        Select One
-      </span>
-      <svg
-        height="15"
-        onClick={[Function]}
-        style={
-          Object {
-            "float": "right",
-          }
-        }
-        viewBox="0 0 585.1428571428571 1024"
-        width="15"
-      >
-        <path
-          d="M585.143 402.286c0 9.714-4 18.857-10.857 25.714l-256 256c-6.857 6.857-16 10.857-25.714 10.857s-18.857-4-25.714-10.857l-256-256c-6.857-6.857-10.857-16-10.857-25.714 0-20 16.571-36.571 36.571-36.571h512c20 0 36.571 16.571 36.571 36.571z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Form/TextArea Basic 1`] = `
-<textarea
-  autoFocus={false}
-  className="sc-gPEVay icsnmY"
-  disabled={false}
-  id={null}
-  maxLength={null}
-  onChange={null}
-  placeholder="Uncontrolled Input"
-  rows={3}
-  spellCheck={false}
-  value=""
-/>
-`;
-
-exports[`Storyshots Components | Form/TextArea Controlled TextArea 1`] = `
-<textarea
-  autoFocus={false}
-  className="sc-gPEVay icsnmY"
-  disabled={false}
-  id={null}
-  maxLength={null}
-  onChange={null}
-  placeholder="Controlled Input"
-  rows={3}
-  spellCheck={false}
-  value=""
-/>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Modal.stories.storyshot b/packages/web/stories/examples/__snapshots__/Modal.stories.storyshot
deleted file mode 100644
index daf64c9f0..000000000
--- a/packages/web/stories/examples/__snapshots__/Modal.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Modal Basic 1`] = `
-<button
-  className="sc-ifAKCX iisouQ"
-  onClick={[Function]}
-  selected={false}
-  size="medium"
-  style={null}
->
-  Show
-</button>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Pill.stories.storyshot b/packages/web/stories/examples/__snapshots__/Pill.stories.storyshot
deleted file mode 100644
index 39150cf34..000000000
--- a/packages/web/stories/examples/__snapshots__/Pill.stories.storyshot
+++ /dev/null
@@ -1,112 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Pill Basic 1`] = `
-<div
-  className="sc-htpNat bcmzNe"
->
-  <div
-    className="sc-bxivhb kdQhUK"
-  >
-    <div
-      className="sc-ifAKCX eDvvDT"
-    >
-      <div
-        className="sc-hmzhuo jPfOYx"
-        offset={0}
-        onClick={[Function]}
-        onSelect={[Function]}
-        selected={true}
-      >
-        <span
-          className="sc-frDJqD fTkOyk"
-        >
-          Dashboard
-        </span>
-        <span
-          className="sc-kvZOFW fdXiDr sc-gqjmRU fJwGbl"
-        >
-          23
-        </span>
-      </div>
-    </div>
-    <div
-      className="sc-ifAKCX eDvvDT"
-    >
-      <div
-        className="sc-hmzhuo dJMdMZ"
-        offset={0}
-        onClick={[Function]}
-        onSelect={[Function]}
-        selected={false}
-      >
-        <span
-          className="sc-frDJqD fTkOyk"
-        >
-          Projects
-        </span>
-        <span
-          className="sc-kvZOFW fdXiDr sc-gqjmRU fJwGbl"
-        >
-          99+
-        </span>
-      </div>
-    </div>
-    <div
-      className="sc-ifAKCX eDvvDT"
-    >
-      <div
-        className="sc-hmzhuo dJMdMZ"
-        offset={0}
-        onClick={[Function]}
-        onSelect={[Function]}
-        selected={false}
-      >
-        <span
-          className="sc-frDJqD fTkOyk"
-        >
-          Issues
-        </span>
-        <span
-          className="sc-kvZOFW fdXiDr sc-gqjmRU fJwGbl"
-        >
-          6
-        </span>
-      </div>
-    </div>
-    <div
-      className="sc-ifAKCX eDvvDT"
-    >
-      <div
-        className="sc-hmzhuo dJMdMZ"
-        offset={0}
-        onClick={[Function]}
-        onSelect={[Function]}
-        selected={false}
-      >
-        <span
-          className="sc-frDJqD fTkOyk"
-        >
-          Reports
-        </span>
-      </div>
-    </div>
-    <div
-      className="sc-ifAKCX eDvvDT"
-    >
-      <div
-        className="sc-hmzhuo dJMdMZ"
-        offset={0}
-        onClick={[Function]}
-        onSelect={[Function]}
-        selected={false}
-      >
-        <span
-          className="sc-frDJqD fTkOyk"
-        >
-          User Center
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/ProgressBar.stories.storyshot b/packages/web/stories/examples/__snapshots__/ProgressBar.stories.storyshot
deleted file mode 100644
index 683d03dc9..000000000
--- a/packages/web/stories/examples/__snapshots__/ProgressBar.stories.storyshot
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | ProgressBar Basic 1`] = `
-<div
-  className="sc-fYxtnH eaVKRF"
->
-  <div
-    className="sc-tilXH iUhSa"
-    size="medium"
-  >
-    <div
-      className="sc-ktHwxA fvUfYY sc-hEsumM feHGBt"
-    >
-      File uploading
-    </div>
-    <div
-      className="sc-hEsumM feHGBt"
-    >
-      60
-      %
-    </div>
-  </div>
-  <div
-    className="sc-jnlKLf kcXCRc"
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
-    size="medium"
-  >
-    <div
-      className="sc-gGBfsJ iFAJbJ"
-      disabled={false}
-      size="medium"
-      width={0}
-    />
-  </div>
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Radio.stories.storyshot b/packages/web/stories/examples/__snapshots__/Radio.stories.storyshot
deleted file mode 100644
index f43b41dfa..000000000
--- a/packages/web/stories/examples/__snapshots__/Radio.stories.storyshot
+++ /dev/null
@@ -1,143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Radio Basic 1`] = `
-<div
-  className="sc-jKJlTe loXQau"
->
-  <label
-    className="sc-kpOJdX jBKWFx"
-  >
-    <input
-      className="sc-dxgOiQ jmFqJO"
-      defaultChecked={false}
-      name="color"
-      type="radio"
-      value="red"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Red
-    </span>
-  </label>
-  <label
-    className="sc-kpOJdX jBKWFx"
-  >
-    <input
-      className="sc-dxgOiQ jmFqJO"
-      defaultChecked={true}
-      name="color"
-      type="radio"
-      value="blue"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Blue
-    </span>
-  </label>
-  <label
-    className="sc-kpOJdX jBKWFx"
-  >
-    <input
-      className="sc-dxgOiQ jmFqJO"
-      defaultChecked={false}
-      name="color"
-      type="radio"
-      value="yellow"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Yellow
-    </span>
-  </label>
-  <label
-    className="sc-kpOJdX jBKWFx"
-  >
-    <input
-      className="sc-dxgOiQ jmFqJO"
-      defaultChecked={false}
-      name="color"
-      type="radio"
-      value="green"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Green
-    </span>
-  </label>
-</div>
-`;
-
-exports[`Storyshots Components | Radio Disable 1`] = `
-<div
-  className="sc-jKJlTe loXQau"
->
-  <label
-    className="sc-kpOJdX gLBToj"
-  >
-    <input
-      className="sc-dxgOiQ gjojUU"
-      defaultChecked={false}
-      name="color"
-      type="radio"
-      value="red"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Red
-    </span>
-  </label>
-  <label
-    className="sc-kpOJdX gLBToj"
-  >
-    <input
-      className="sc-dxgOiQ gjojUU"
-      defaultChecked={true}
-      name="color"
-      type="radio"
-      value="blue"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Blue
-    </span>
-  </label>
-  <label
-    className="sc-kpOJdX gLBToj"
-  >
-    <input
-      className="sc-dxgOiQ gjojUU"
-      defaultChecked={false}
-      name="color"
-      type="radio"
-      value="yellow"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Yellow
-    </span>
-  </label>
-  <label
-    className="sc-kpOJdX gLBToj"
-  >
-    <input
-      className="sc-dxgOiQ gjojUU"
-      defaultChecked={false}
-      name="color"
-      type="radio"
-      value="green"
-    />
-    <span
-      className="sc-ckVGcZ gjEeVT"
-    >
-      Green
-    </span>
-  </label>
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Slider.stories.storyshot b/packages/web/stories/examples/__snapshots__/Slider.stories.storyshot
deleted file mode 100644
index 95966cd1b..000000000
--- a/packages/web/stories/examples/__snapshots__/Slider.stories.storyshot
+++ /dev/null
@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Slider Basic 1`] = `
-<div
-  aria-valuemax={100}
-  aria-valuemin={0}
-  aria-valuenow={0}
-  className="sc-hqyNC eOCCnP"
-  disabled={false}
->
-  <div
-    className="sc-jbKcbu dGxDFm"
-    disabled={false}
-    size="medium"
-  >
-    <div
-      className="sc-jnlKLf kcXCRc"
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      size="medium"
-    >
-      <div
-        className="sc-gGBfsJ iFAJbJ"
-        disabled={false}
-        size="medium"
-        width={0}
-      />
-    </div>
-    <div
-      className="sc-dNLxif nlwYw"
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      size="medium"
-      style={
-        Object {
-          "left": "0px",
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components | Slider with Custom Button 1`] = `
-<div
-  aria-valuemax={100}
-  aria-valuemin={0}
-  aria-valuenow={50}
-  className="sc-hqyNC eOCCnP"
-  disabled={false}
->
-  <button
-    className="sc-ifAKCX kbGYGA"
-    onClick={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    selected={false}
-    size="small"
-    style={
-      Object {
-        "flex": "0 0 auto",
-        "marginRight": "12px",
-      }
-    }
-  >
-    -
-  </button>
-  <div
-    className="sc-jbKcbu dGxDFm"
-    disabled={false}
-    size="medium"
-  >
-    <div
-      className="sc-jnlKLf kcXCRc"
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      size="medium"
-    >
-      <div
-        className="sc-gGBfsJ iFAJbJ"
-        disabled={false}
-        size="medium"
-        width={0}
-      />
-    </div>
-    <div
-      className="sc-dNLxif nlwYw"
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      size="medium"
-      style={
-        Object {
-          "left": "0px",
-        }
-      }
-    />
-  </div>
-  <button
-    className="sc-ifAKCX kbGYGA"
-    onClick={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    selected={false}
-    size="small"
-    style={
-      Object {
-        "flex": "0 0 auto",
-        "marginLeft": "12px",
-      }
-    }
-  >
-    +
-  </button>
-</div>
-`;
diff --git a/packages/web/stories/examples/__snapshots__/Tabs.stories.storyshot b/packages/web/stories/examples/__snapshots__/Tabs.stories.storyshot
deleted file mode 100644
index 8e216d795..000000000
--- a/packages/web/stories/examples/__snapshots__/Tabs.stories.storyshot
+++ /dev/null
@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components | Tab Basic 1`] = `
-Array [
-  <div
-    className="sc-gzOgki uueah"
-  >
-    <ul
-      className="sc-gxMtzJ igFjqJ"
-    >
-      <div
-        className="sc-jtRfpW PpgdH"
-        onClick={[Function]}
-      >
-        <span
-          className="sc-dqBHgY fVChCQ"
-        >
-          tab1
-        </span>
-        <span
-          className="sc-elJkPf kPjkuu sc-gqjmRU fJwGbl"
-        >
-          10
-        </span>
-      </div>
-      <div
-        className="sc-jtRfpW hiKEvM"
-        onClick={[Function]}
-      >
-        <span
-          className="sc-dqBHgY fVChCQ"
-        >
-          tab2
-        </span>
-        <span
-          className="sc-elJkPf kPjkuu sc-gqjmRU gKFqIl"
-        >
-          99+
-        </span>
-      </div>
-      <div
-        className="sc-jtRfpW hiKEvM"
-        onClick={[Function]}
-      >
-        <span
-          className="sc-dqBHgY fVChCQ"
-        >
-          tab3
-        </span>
-      </div>
-      <div
-        className="sc-jtRfpW hiKEvM"
-        onClick={[Function]}
-      >
-        <span
-          className="sc-dqBHgY fVChCQ"
-        >
-          tab4
-        </span>
-      </div>
-    </ul>
-  </div>,
-  <div>
-    <div
-      className="sc-dfVpRl dSgIHY"
-    >
-      <p>
-        Eius sunt quidem aut omnis harum. Maiores repellendus eligendi saepe. Ea qui ratione quisquam. Ipsa quae sit incidunt tempora qui vel error labore voluptates. Omnis ut mollitia dolor in dolore. Soluta dolor incidunt ipsam aspernatur in et consequuntur voluptatum nobis. Animi est quod harum commodi. Et quis dignissimos molestiae provident. Blanditiis et natus ut quia voluptatem. Labore voluptatum tempore architecto. Est qui illo ipsam iusto ipsam voluptatem dolor omnis ut. Provident perferendis aperiam. Quidem autem eius tempora maxime quo reiciendis tenetur. Ab voluptas incidunt quam et asperiores veniam qui sint.
-      </p>
-    </div>
-  </div>,
-]
-`;
diff --git a/yarn.lock b/yarn.lock
index 6ae32ffc4..9d8f2a76a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -942,8 +942,8 @@ acorn@^4.0.3:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
 acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.1.tgz#c9e50c3e3717cf897f1b071ceadbb543bbc0a8d4"
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"
 
 add-dom-event-listener@1.x:
   version "1.0.2"
@@ -1105,11 +1105,11 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-append-transform@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+append-transform@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-1.0.0.tgz#046a52ae582a228bd72f58acfbe2967c678759ab"
   dependencies:
-    default-require-extensions "^1.0.0"
+    default-require-extensions "^2.0.0"
 
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
@@ -1654,8 +1654,8 @@ babel-plugin-jest-hoist@^23.0.1:
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.0.1.tgz#eaa11c964563aea9c21becef2bdf7853f7f3c148"
 
 babel-plugin-macros@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.1.tgz#7cc0f84735aa86f776b51860793a98928f43a7fa"
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.2.tgz#049c93f4b934453688a6ec38bba529c55bf0fa1f"
   dependencies:
     cosmiconfig "^4.0.0"
 
@@ -2841,12 +2841,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000848"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000848.tgz#e149c981c72aa20439e3bc12c7cf8b3f7e1237c6"
+  version "1.0.30000849"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000849.tgz#d452f53d7dcfb84e7f5fd34c077c30ad2b7b9c7b"
 
 caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844:
-  version "1.0.30000848"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000848.tgz#ec9c0a72ec8f9ef812e4f4b8628625af9c85ade0"
+  version "1.0.30000849"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000849.tgz#7e1aa48e6d58917dcd70aabf7e7a33514a258f91"
 
 capture-exit@^1.2.0:
   version "1.2.0"
@@ -2962,7 +2962,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -3144,10 +3144,10 @@ component-indexof@0.0.3:
   resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
 
 compressible@~2.0.13:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9"
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.14.tgz#326c5f507fbb055f54116782b969a81b67a29da7"
   dependencies:
-    mime-db ">= 1.33.0 < 2"
+    mime-db ">= 1.34.0 < 2"
 
 compression@^1.7.1:
   version "1.7.2"
@@ -3757,11 +3757,11 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-default-require-extensions@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+default-require-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
   dependencies:
-    strip-bom "^2.0.0"
+    strip-bom "^3.0.0"
 
 defaults@^1.0.3:
   version "1.0.3"
@@ -3902,7 +3902,7 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-helpers@^3.3.1:
+"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
@@ -3967,19 +3967,15 @@ dot-prop@^4.1.1:
     is-obj "^1.0.0"
 
 dotenv-webpack@^1.5.5:
-  version "1.5.6"
-  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.5.6.tgz#60146a37ce53b934c85404f689c35cb617371e04"
+  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@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
 
-dotenv@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.0.0.tgz#24e37c041741c5f4b25324958ebbc34bca965935"
-
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -4690,6 +4686,10 @@ extsprintf@^1.2.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
 
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+
 fancy-log@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.2.tgz#f41125e3d84f2e7d89a43d06d958c8f78be16be1"
@@ -4719,8 +4719,8 @@ fast-levenshtein@~2.0.4:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
 fast-memoize@^2.2.7:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.3.2.tgz#f6b9eb8e06a754029cca25b4cd3945f2f6242c90"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.4.0.tgz#2f79eca41c41112b0b70cf53ac3940e206574648"
 
 fastparse@^1.1.1:
   version "1.1.1"
@@ -5372,13 +5372,7 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.2.tgz#1a64bfe4b52e67fb87b9822503d97c019fb6ba42"
-  dependencies:
-    function-bind "^1.1.1"
-
-has@^1.0.2:
+has@^1.0.1, has@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   dependencies:
@@ -6079,10 +6073,10 @@ istanbul-lib-coverage@^1.2.0:
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz#f7d8f2e42b97e37fe796114cb0f9d68b5e3a4341"
 
 istanbul-lib-hook@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.0.tgz#ae556fd5a41a6e8efa0b1002b1e416dfeaf9816c"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.1.tgz#f614ec45287b2a8fc4f07f5660af787575601805"
   dependencies:
-    append-transform "^0.4.0"
+    append-transform "^1.0.0"
 
 istanbul-lib-instrument@^1.10.1:
   version "1.10.1"
@@ -6905,7 +6899,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -7289,7 +7283,7 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.33.0 < 2":
+"mime-db@>= 1.34.0 < 2":
   version "1.34.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.34.0.tgz#452d0ecff5c30346a6dc1e64b1eaee0d3719ff9a"
 
@@ -8633,6 +8627,10 @@ pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
+psl@^1.1.24:
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.27.tgz#2b2c77019db86855170d903532400bf71ee085b6"
+
 public-encrypt@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.2.tgz#46eb9107206bf73489f8b85b69d91334c6610994"
@@ -8772,7 +8770,7 @@ raw-body@2.3.2:
     iconv-lite "0.4.19"
     unpipe "1.0.0"
 
-rc-align@2.x:
+rc-align@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-2.4.0.tgz#61d8371c3a984048e682378734cc7efd6a19baa3"
   dependencies:
@@ -8791,12 +8789,12 @@ rc-animate@2.x:
     prop-types "15.x"
 
 rc-trigger@^2.3.4:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-2.4.2.tgz#8274249b3af51ff2c9c8a0c403d68e17bc775d7e"
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-2.5.1.tgz#a64e06d9bff05d23e7d18c558048ce75a51d6ac9"
   dependencies:
     babel-runtime "6.x"
     prop-types "15.x"
-    rc-align "2.x"
+    rc-align "^2.4.0"
     rc-animate "2.x"
     rc-util "^4.4.0"
 
@@ -8950,7 +8948,7 @@ react-is@^16.3.1, react-is@^16.4.0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
 
-react-lifecycles-compat@^3.0.0:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
@@ -9129,6 +9127,17 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
+react-virtualized@^9.19.1:
+  version "9.19.1"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.19.1.tgz#84b53253df2d9df61c85ce037141edccc70a73fd"
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.3"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    loose-envify "^1.3.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+
 react@16.4.0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
@@ -9736,7 +9745,7 @@ safe-resolve@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/safe-resolve/-/safe-resolve-1.0.0.tgz#fe34f8d29d7a3becfd249d0aa8a799b5c3cf6559"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
 
@@ -10111,13 +10120,14 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
 sshpk@^1.7.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
     dashdash "^1.12.0"
     getpass "^0.1.1"
+    safer-buffer "^2.0.2"
   optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
     ecc-jsbn "~0.1.1"
@@ -10588,7 +10598,14 @@ toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
 
-tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.3:
+tough-cookie@>=2.3.3, tough-cookie@^2.3.3:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.2.tgz#aa9133154518b494efab98a58247bfc38818c00c"
+  dependencies:
+    psl "^1.1.24"
+    punycode "^1.4.1"
+
+tough-cookie@~2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
   dependencies:
@@ -10802,8 +10819,8 @@ url-parse-lax@^1.0.0:
     prepend-http "^1.0.1"
 
 url-parse@^1.1.8, url-parse@^1.1.9, url-parse@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.0.tgz#6bfdaad60098c7fe06f623e42b22de62de0d3d75"
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.1.tgz#4dec9dad3dc8585f862fed461d2e19bbf623df30"
   dependencies:
     querystringify "^2.0.0"
     requires-port "^1.0.0"