diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..e886676d5
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "Sourcable"
+  ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 2605e857d..50cd0680e 100644
--- a/README.md
+++ b/README.md
@@ -4,97 +4,26 @@
 [![Build Status](https://api.travis-ci.org/dmtrKovalenko/material-ui-pickers.svg?branch=master)](https://travis-ci.org/dmtrKovalenko/material-ui-pickers)
 > Components, that implements material design date and time pickers for material-ui v1
 
-## [Click here for demo](https://material-ui-pic.firebaseapp.com/)
-
-### Recently updated?
-Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases)
-
 ### Installation
 Available as npm package.
 ```sh
 npm install material-ui-pickers -S
 ```
+
 Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/) and [date-fns](https://date-fns.org/). If you are not using moment in the project (or dont have it in the bundle already) we suggest using date-fns, because it much more lightweight and will be correctly tree-shaked from the bundle.
+
 ```sh
-npm i date-fns@next -S
+npm install date-fns@next -s
 // or
-npm i moment -S
+npm install moment -S
 ```
 
-Teach pickers how to use one of that library using `MuiPickersUtilsProvider`. This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree.
-
-```jsx
-import MomentUtils from 'material-ui-pickers/utils/moment-utils';
-import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'
-import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'
-
-function App() {
-  return ( 
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Root />
-    </MuiPickersUtilsProvider>
-  );
-}
-
-render(<App />, document.querySelector('#app'));
-```
-
-We are using material-ui-icons icon font to display icons. Just add this to your html 
-```html
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-```
-If you dont want to use icon font, or you are already use `material-ui-icons` you can pass any icon to the components with [corresponding props](https://github.com/dmtrKovalenko/material-ui-pickers#props-documentation)
- 
-### Usage
-Here is a quick example of how to use this package
-
-```jsx
-import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers'
-
-class App extends Component {
-  state = {
-    selectedDate: new Date(),
-    selectedTime: new Date(),
-    selectedDateTime: new Date()
-  }
-
-  handleDateChange = date => {
-    this.setState({ selectedDate: date })
-  }
-
-  handleTimeChange = time => {
-    this.setState({ selectedTime: time })
-  }
-
-  handleDateTimeChange = dateTime => {
-    this.setState({ selectedDateTime: dateTime })
-  }
-
-  render() {
-    const { selectedDate, selectedTime, selectedDateTime } = this.state
-
-    return (
-      <div>
-        <DatePicker
-          value={selectedDate}
-          onChange={this.handleDateChange}
-        />
-
-        <TimePicker
-          value={selectedTime}
-          onChange={this.handleTimeChange}
-        />
-
-        <DateTimePicker
-          value={selectedDateTime}
-          onChange={this.handleDateTimeChange}
-        />
-      </div>
-    )
-  }
-}
-```
+## Documentation
+Check out material-ui-picker's [documentation](https://material-ui-pickers.firebaseapp.com/)
 
+### Recently updated?
+Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases)
+w
 ### Props documentation
 Here is a list of available props
 
diff --git a/docs/.eslintrc b/docs/.eslintrc
new file mode 100644
index 000000000..642efe174
--- /dev/null
+++ b/docs/.eslintrc
@@ -0,0 +1,24 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+    "react/forbid-prop-types": 0,
+    "react/jsx-filename-extension": 0,
+    "react/no-find-dom-node": 0,
+    "import/no-named-as-default": 0,
+    "class-methods-use-this": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "jsx-a11y/anchor-is-valid": 0
+  },
+  "globals": {
+    "document": true,
+    "window": true
+  },
+  "env": {
+    "jest": true
+  },
+  "settings": {
+    "import/resolver": "webpack"
+  }
+}
\ No newline at end of file
diff --git a/docs/.firebaserc b/docs/.firebaserc
index 0967ef424..9b1deeb5c 100644
--- a/docs/.firebaserc
+++ b/docs/.firebaserc
@@ -1 +1,5 @@
-{}
+{
+  "projects": {
+    "default": "material-ui-pickers"
+  }
+}
diff --git a/docs/config/webpack.config.dev.js b/docs/config/webpack.config.dev.js
index e263d35c6..3b71c0234 100644
--- a/docs/config/webpack.config.dev.js
+++ b/docs/config/webpack.config.dev.js
@@ -61,7 +61,7 @@ module.exports = {
     // There are also additional JS chunk files if you use code splitting.
     chunkFilename: 'static/js/[name].chunk.js',
     // This is the URL that app is served from. We use "/" in development.
-    publicPath: publicPath,
+    publicPath,
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
@@ -71,10 +71,9 @@ module.exports = {
     // We placed these paths second because we want `node_modules` to "win"
     // if there are any conflicts. This matches Node resolution mechanism.
     // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
+    modules: ['node_modules', paths.appNodeModules, paths.appSrc].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
@@ -113,7 +112,7 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              
+
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -142,7 +141,7 @@ module.exports = {
             include: [paths.appSrc, paths.libSrc],
             loader: require.resolve('babel-loader'),
             options: {
-              
+
               // This is a feature of `babel-loader` for webpack (not Babel itself).
               // It enables caching results in ./node_modules/.cache/babel-loader/
               // directory for faster rebuilds.
diff --git a/docs/config/webpack.config.prod.js b/docs/config/webpack.config.prod.js
index 5b10aee66..e447ef077 100644
--- a/docs/config/webpack.config.prod.js
+++ b/docs/config/webpack.config.prod.js
@@ -42,7 +42,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // To have this structure working with relative paths, we have to use custom options.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
+  { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
 // This is the production configuration.
@@ -65,7 +65,7 @@ module.exports = {
     filename: 'static/js/[name].[chunkhash:8].js',
     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
     // We inferred the "public path" (such as / or /my-project) from homepage.
-    publicPath: publicPath,
+    publicPath,
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
       path
@@ -77,10 +77,9 @@ module.exports = {
     // We placed these paths second because we want `node_modules` to "win"
     // if there are any conflicts. This matches Node resolution mechanism.
     // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
+    modules: ['node_modules', paths.appNodeModules, paths.appSrc].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
@@ -119,7 +118,7 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              
+
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -147,7 +146,7 @@ module.exports = {
             include: [paths.appSrc, paths.libSrc],
             loader: require.resolve('babel-loader'),
             options: {
-              
+
               compact: true,
             },
           },
@@ -165,49 +164,47 @@ module.exports = {
           // in the main CSS file.
           {
             test: /\.css$/,
-            loader: ExtractTextPlugin.extract(
-              Object.assign(
-                {
-                  fallback: {
-                    loader: require.resolve('style-loader'),
+            loader: ExtractTextPlugin.extract(Object.assign(
+              {
+                fallback: {
+                  loader: require.resolve('style-loader'),
+                  options: {
+                    hmr: false,
+                  },
+                },
+                use: [
+                  {
+                    loader: require.resolve('css-loader'),
                     options: {
-                      hmr: false,
+                      importLoaders: 1,
+                      minimize: true,
+                      sourceMap: shouldUseSourceMap,
                     },
                   },
-                  use: [
-                    {
-                      loader: require.resolve('css-loader'),
-                      options: {
-                        importLoaders: 1,
-                        minimize: true,
-                        sourceMap: shouldUseSourceMap,
-                      },
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9', // React doesn't support IE8 anyway
-                            ],
-                            flexbox: 'no-2009',
-                          }),
-                        ],
-                      },
+                  {
+                    loader: require.resolve('postcss-loader'),
+                    options: {
+                      // Necessary for external CSS imports to work
+                      // https://github.com/facebookincubator/create-react-app/issues/2677
+                      ident: 'postcss',
+                      plugins: () => [
+                        require('postcss-flexbugs-fixes'),
+                        autoprefixer({
+                          browsers: [
+                            '>1%',
+                            'last 4 versions',
+                            'Firefox ESR',
+                            'not ie < 9', // React doesn't support IE8 anyway
+                          ],
+                          flexbox: 'no-2009',
+                        }),
+                      ],
                     },
-                  ],
-                },
-                extractTextPluginOptions
-              )
-            ),
+                  },
+                ],
+              },
+              extractTextPluginOptions,
+            ) ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
           // "file" loader makes sure assets end up in the `build` folder.
@@ -314,7 +311,7 @@ module.exports = {
       },
       minify: true,
       // For unknown URLs, fallback to the index page
-      navigateFallback: publicUrl + '/index.html',
+      navigateFallback: `${publicUrl}/index.html`,
       // Ignores URLs starting from /__ (useful for Firebase):
       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
       navigateFallbackWhitelist: [/^(?!\/__).*/],
diff --git a/docs/firebase.json b/docs/firebase.json
index 3cc64be5c..7bcdcea7b 100644
--- a/docs/firebase.json
+++ b/docs/firebase.json
@@ -1,5 +1,13 @@
 {
   "hosting": {
-    "public": "build"
+    "public": "build",
+    "headers": [{ 
+      "source":"/service-worker.js", 
+      "headers": [{ "key": "Cache-Control", "value": "no-cache" }] 
+    }],
+    "rewrites": [{
+      "source": "**",
+      "destination": "/index.html"
+    }]
   }
-}
\ No newline at end of file
+}
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 3a9d00153..e366d9ce8 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -75,6 +75,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
       "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "dev": true,
       "requires": {
         "acorn": "3.3.0"
       },
@@ -82,7 +83,8 @@
         "acorn": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+          "dev": true
         }
       }
     },
@@ -184,6 +186,7 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.1.tgz",
       "integrity": "sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=",
+      "dev": true,
       "requires": {
         "ast-types-flow": "0.0.7",
         "commander": "2.14.1"
@@ -212,6 +215,12 @@
       "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
       "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
     },
+    "array-find": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-find/-/array-find-1.0.0.tgz",
+      "integrity": "sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg=",
+      "dev": true
+    },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -300,7 +309,8 @@
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
+      "dev": true
     },
     "async": {
       "version": "2.6.0",
@@ -347,6 +357,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
       "integrity": "sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=",
+      "dev": true,
       "requires": {
         "ast-types-flow": "0.0.7"
       }
@@ -1473,6 +1484,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
       "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
+      "dev": true,
       "requires": {
         "callsites": "0.2.0"
       }
@@ -1480,7 +1492,8 @@
     "callsites": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
-      "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo="
+      "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
+      "dev": true
     },
     "camel-case": {
       "version": "3.0.0",
@@ -1638,7 +1651,8 @@
     "circular-json": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
-      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A=="
+      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
+      "dev": true
     },
     "clap": {
       "version": "1.2.3",
@@ -1875,6 +1889,7 @@
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.1.tgz",
       "integrity": "sha512-gslSSJx03QKa59cIKqeJO9HQ/WZMotvYJCuaUULrLpjj8oG40kV2Z+gz82pVxlTkOADi4PJxQPPfhl1ELYrrXw==",
+      "dev": true,
       "requires": {
         "inherits": "2.0.3",
         "readable-stream": "2.3.4",
@@ -1915,7 +1930,8 @@
     "contains-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
-      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo="
+      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
+      "dev": true
     },
     "content-disposition": {
       "version": "0.5.2",
@@ -2382,7 +2398,8 @@
     "damerau-levenshtein": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz",
-      "integrity": "sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ="
+      "integrity": "sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ=",
+      "dev": true
     },
     "dashdash": {
       "version": "1.14.1",
@@ -2564,6 +2581,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
       "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
       "requires": {
         "esutils": "2.0.2"
       }
@@ -2708,7 +2726,8 @@
     "emoji-regex": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
-      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ=="
+      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==",
+      "dev": true
     },
     "emojis-list": {
       "version": "2.1.0",
@@ -2898,9 +2917,10 @@
       }
     },
     "eslint": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.10.0.tgz",
-      "integrity": "sha512-MMVl8P/dYUFZEvolL8PYt7qc5LNdS2lwheq9BYa5Y07FblhcZqFyaUqlS8TW5QITGex21tV4Lk0a3fK8lsJIkA==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.18.2.tgz",
+      "integrity": "sha512-qy4i3wODqKMYfz9LUI8N2qYDkHkoieTbiHpMrYUI/WbjhXJQr7lI4VngixTgaG+yHX+NBCv7nW4hA0ShbvaNKw==",
+      "dev": true,
       "requires": {
         "ajv": "5.5.2",
         "babel-code-frame": "6.26.0",
@@ -2910,20 +2930,20 @@
         "debug": "3.1.0",
         "doctrine": "2.1.0",
         "eslint-scope": "3.7.1",
+        "eslint-visitor-keys": "1.0.0",
         "espree": "3.5.4",
         "esquery": "1.0.0",
-        "estraverse": "4.2.0",
         "esutils": "2.0.2",
         "file-entry-cache": "2.0.0",
         "functional-red-black-tree": "1.0.1",
         "glob": "7.1.2",
-        "globals": "9.18.0",
+        "globals": "11.3.0",
         "ignore": "3.3.7",
         "imurmurhash": "0.1.4",
         "inquirer": "3.3.0",
         "is-resolvable": "1.1.0",
         "js-yaml": "3.10.0",
-        "json-stable-stringify": "1.0.1",
+        "json-stable-stringify-without-jsonify": "1.0.1",
         "levn": "0.3.0",
         "lodash": "4.17.5",
         "minimatch": "3.0.4",
@@ -2937,7 +2957,7 @@
         "semver": "5.4.1",
         "strip-ansi": "4.0.0",
         "strip-json-comments": "2.0.1",
-        "table": "4.0.3",
+        "table": "4.0.2",
         "text-table": "0.2.0"
       },
       "dependencies": {
@@ -2945,6 +2965,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "1.9.1"
           }
@@ -2953,6 +2974,7 @@
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
           "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "3.2.1",
             "escape-string-regexp": "1.0.5",
@@ -2963,6 +2985,7 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -2971,6 +2994,7 @@
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
           "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "dev": true,
           "requires": {
             "has-flag": "3.0.0"
           }
@@ -3001,14 +3025,59 @@
       "integrity": "sha512-8QZrKWuHVC57Fmu+SsKAVxnI9LycZl7NFQ4H9L+oeISuCXhYdXqsOOIVSjQFW6JF5MXZLFE+21Syhd7mF1IRZQ=="
     },
     "eslint-import-resolver-node": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz",
-      "integrity": "sha512-yUtXS15gIcij68NmXmP9Ni77AQuCN0itXbCc/jWd8C6/yKZaSNXicpC8cgvjnxVdmfsosIXrjpzFq7GcDryb6A==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
+      "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
+      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "resolve": "1.5.0"
       }
     },
+    "eslint-import-resolver-webpack": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.8.4.tgz",
+      "integrity": "sha512-b6JxR57ruiMxq2tIu4T/SrYED5RKJfeBEs8u3+JWF+O2RxDmFpUH84c5uS1T5qiP0K4r0SL7CXhvd41hXdDlAg==",
+      "dev": true,
+      "requires": {
+        "array-find": "1.0.0",
+        "debug": "2.6.9",
+        "enhanced-resolve": "0.9.1",
+        "find-root": "0.1.2",
+        "has": "1.0.1",
+        "interpret": "1.1.0",
+        "is-absolute": "0.2.6",
+        "lodash.get": "3.7.0",
+        "node-libs-browser": "2.1.0",
+        "resolve": "1.5.0",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "enhanced-resolve": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz",
+          "integrity": "sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "memory-fs": "0.2.0",
+            "tapable": "0.1.10"
+          }
+        },
+        "memory-fs": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
+          "integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=",
+          "dev": true
+        },
+        "tapable": {
+          "version": "0.1.10",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
+          "integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=",
+          "dev": true
+        }
+      }
+    },
     "eslint-loader": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-1.9.0.tgz",
@@ -3025,6 +3094,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.1.1.tgz",
       "integrity": "sha512-jDI/X5l/6D1rRD/3T43q8Qgbls2nq5km5KSqiwlyUbGo5+04fXhMKdCPhjwbqAa6HXWaMxj8Q4hQDIh7IadJQw==",
+      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "pkg-dir": "1.0.0"
@@ -3034,6 +3104,7 @@
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
           "requires": {
             "path-exists": "2.1.0",
             "pinkie-promise": "2.0.1"
@@ -3043,6 +3114,7 @@
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
           "requires": {
             "pinkie-promise": "2.0.1"
           }
@@ -3051,6 +3123,7 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
           "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
+          "dev": true,
           "requires": {
             "find-up": "1.1.2"
           }
@@ -3066,18 +3139,19 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz",
-      "integrity": "sha512-Rf7dfKJxZ16QuTgVv1OYNxkZcsu/hULFnC+e+w0Gzi6jMC3guQoWQgxYxc54IDRinlb6/0v5z/PxxIKmVctN+g==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.9.0.tgz",
+      "integrity": "sha1-JgAu+/ylmJtyiKwEdQi9JPIXsWk=",
+      "dev": true,
       "requires": {
         "builtin-modules": "1.1.1",
         "contains-path": "0.1.0",
         "debug": "2.6.9",
         "doctrine": "1.5.0",
-        "eslint-import-resolver-node": "0.3.1",
+        "eslint-import-resolver-node": "0.3.2",
         "eslint-module-utils": "2.1.1",
         "has": "1.0.1",
-        "lodash.cond": "4.5.2",
+        "lodash": "4.17.5",
         "minimatch": "3.0.4",
         "read-pkg-up": "2.0.0"
       },
@@ -3086,6 +3160,7 @@
           "version": "1.5.0",
           "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
           "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
+          "dev": true,
           "requires": {
             "esutils": "2.0.2",
             "isarray": "1.0.0"
@@ -3095,6 +3170,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+          "dev": true,
           "requires": {
             "graceful-fs": "4.1.11",
             "parse-json": "2.2.0",
@@ -3106,6 +3182,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
           "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+          "dev": true,
           "requires": {
             "pify": "2.3.0"
           }
@@ -3114,6 +3191,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
           "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+          "dev": true,
           "requires": {
             "load-json-file": "2.0.0",
             "normalize-package-data": "2.4.0",
@@ -3124,6 +3202,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
           "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+          "dev": true,
           "requires": {
             "find-up": "2.1.0",
             "read-pkg": "2.0.0"
@@ -3132,14 +3211,16 @@
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
         }
       }
     },
     "eslint-plugin-jsx-a11y": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz",
-      "integrity": "sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.3.tgz",
+      "integrity": "sha1-VFg9GuRCSDFi4EDhPMMYZUZRAOU=",
+      "dev": true,
       "requires": {
         "aria-query": "0.7.1",
         "array-includes": "3.0.3",
@@ -3147,28 +3228,19 @@
         "axobject-query": "0.1.0",
         "damerau-levenshtein": "1.0.4",
         "emoji-regex": "6.5.1",
-        "jsx-ast-utils": "1.4.1"
+        "jsx-ast-utils": "2.0.1"
       }
     },
     "eslint-plugin-react": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz",
-      "integrity": "sha512-tvjU9u3VqmW2vVuYnE8Qptq+6ji4JltjOjJ9u7VAOxVYkUkyBZWRvNYKbDv5fN+L6wiA+4we9+qQahZ0m63XEA==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz",
+      "integrity": "sha512-KC7Snr4YsWZD5flu6A5c0AcIZidzW3Exbqp7OT67OaD2AppJtlBr/GuPrW/vaQM/yfZotEvKAdrxrO+v8vwYJA==",
+      "dev": true,
       "requires": {
         "doctrine": "2.1.0",
         "has": "1.0.1",
         "jsx-ast-utils": "2.0.1",
-        "prop-types": "15.6.0"
-      },
-      "dependencies": {
-        "jsx-ast-utils": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
-          "integrity": "sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=",
-          "requires": {
-            "array-includes": "3.0.3"
-          }
-        }
+        "prop-types": "15.6.1"
       }
     },
     "eslint-restricted-globals": {
@@ -3181,24 +3253,33 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
       "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
+      "dev": true,
       "requires": {
         "esrecurse": "4.2.0",
         "estraverse": "4.2.0"
       }
     },
+    "eslint-visitor-keys": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
+      "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==",
+      "dev": true
+    },
     "espree": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
       "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
+      "dev": true,
       "requires": {
-        "acorn": "5.5.0",
+        "acorn": "5.5.1",
         "acorn-jsx": "3.0.1"
       },
       "dependencies": {
         "acorn": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.0.tgz",
-          "integrity": "sha512-arn53F07VXmls4o4pUhSzBa4fvaagPRe7AVZ8l7NHxFWUie2DsuFSBMMNAkgzRlOhEhzAnxeKyaWVzOH4xqp/g=="
+          "version": "5.5.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.1.tgz",
+          "integrity": "sha512-D/KGiCpM/VOtTMDS+wfjywEth926WUrArrzYov4N4SI7t+3y8747dPpCmmAvrm/Z3ygqMHnyPxvYYO0yTdn/nQ==",
+          "dev": true
         }
       }
     },
@@ -3211,6 +3292,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.0.tgz",
       "integrity": "sha1-z7qLV9f7qT8XKYqKAGoEzaE9gPo=",
+      "dev": true,
       "requires": {
         "estraverse": "4.2.0"
       }
@@ -3486,6 +3568,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
       "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=",
+      "dev": true,
       "requires": {
         "flat-cache": "1.3.0",
         "object-assign": "4.1.1"
@@ -3565,6 +3648,12 @@
         "pkg-dir": "2.0.0"
       }
     },
+    "find-root": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-0.1.2.tgz",
+      "integrity": "sha1-mNImfP8ZFsyvJ0OzoO6oHXnX3NE=",
+      "dev": true
+    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -3577,6 +3666,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz",
       "integrity": "sha1-0wMLMrOBVPTjt+nHCfSQ9++XxIE=",
+      "dev": true,
       "requires": {
         "circular-json": "0.3.3",
         "del": "2.2.2",
@@ -4444,7 +4534,8 @@
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
     },
     "get-caller-file": {
       "version": "1.0.2",
@@ -4539,9 +4630,10 @@
       }
     },
     "globals": {
-      "version": "9.18.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.3.0.tgz",
+      "integrity": "sha512-kkpcKNlmQan9Z5ZmgqKH/SMbSmjxQ7QjyNqfXVc8VJcoBV2UEg+sxQD15GQofGRh2hfpwUb70VC31DR7Rq5Hdw==",
+      "dev": true
     },
     "globby": {
       "version": "5.0.0",
@@ -4731,6 +4823,18 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "2.2.2",
+        "loose-envify": "1.3.1",
+        "resolve-pathname": "2.2.0",
+        "value-equal": "0.4.0",
+        "warning": "3.0.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4999,7 +5103,8 @@
     "ignore": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz",
-      "integrity": "sha512-YGG3ejvBNHRqu0559EOxxNFihD0AjpvHlC/pdGKd3X3ofe+CoJkYazwNJYTNebqpPKN+VVQbh4ZFn1DivMNuHA=="
+      "integrity": "sha512-YGG3ejvBNHRqu0559EOxxNFihD0AjpvHlC/pdGKd3X3ofe+CoJkYazwNJYTNebqpPKN+VVQbh4ZFn1DivMNuHA==",
+      "dev": true
     },
     "import-lazy": {
       "version": "2.1.0",
@@ -5142,6 +5247,24 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.5.2.tgz",
       "integrity": "sha1-1LUFvemUaYfM8PxY2QEP+WB+P6A="
     },
+    "is-absolute": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
+      "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
+      "dev": true,
+      "requires": {
+        "is-relative": "0.2.1",
+        "is-windows": "0.2.0"
+      },
+      "dependencies": {
+        "is-windows": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
+          "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
+          "dev": true
+        }
+      }
+    },
     "is-absolute-url": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
@@ -5339,10 +5462,20 @@
         "has": "1.0.1"
       }
     },
+    "is-relative": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
+      "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
+      "dev": true,
+      "requires": {
+        "is-unc-path": "0.1.2"
+      }
+    },
     "is-resolvable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
+      "dev": true
     },
     "is-retry-allowed": {
       "version": "1.1.0",
@@ -5377,6 +5510,15 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-unc-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
+      "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
+      "dev": true,
+      "requires": {
+        "unc-path-regex": "0.1.2"
+      }
+    },
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
@@ -6102,6 +6244,12 @@
         "jsonify": "0.0.0"
       }
     },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -6245,9 +6393,13 @@
       }
     },
     "jsx-ast-utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz",
-      "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
+      "integrity": "sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=",
+      "dev": true,
+      "requires": {
+        "array-includes": "3.0.3"
+      }
     },
     "keycode": {
       "version": "2.1.9",
@@ -6397,11 +6549,26 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
       "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
     },
+    "lodash._baseget": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/lodash._baseget/-/lodash._baseget-3.7.2.tgz",
+      "integrity": "sha1-G2rh1frPPCVTI1ChPBGXy4u2dPQ=",
+      "dev": true
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash._topath": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/lodash._topath/-/lodash._topath-3.8.1.tgz",
+      "integrity": "sha1-PsXiYGAU9MuX91X+aRTt2L/ADqw=",
+      "dev": true,
+      "requires": {
+        "lodash.isarray": "3.0.4"
+      }
+    },
     "lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -6412,16 +6579,27 @@
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
-    "lodash.cond": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.cond/-/lodash.cond-4.5.2.tgz",
-      "integrity": "sha1-9HGh2khr5g9quVXRcRVSPdHSVdU="
-    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
       "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
     },
+    "lodash.get": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-3.7.0.tgz",
+      "integrity": "sha1-POaK4skWg7KBzFOUEoMDy/deaR8=",
+      "dev": true,
+      "requires": {
+        "lodash._baseget": "3.7.2",
+        "lodash._topath": "3.8.1"
+      }
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "dev": true
+    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -6556,7 +6734,7 @@
         "keycode": "2.1.9",
         "lodash": "4.17.5",
         "normalize-scroll-left": "0.1.2",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "react-event-listener": "0.5.3",
         "react-jss": "8.3.1",
         "react-popper": "0.7.5",
@@ -7317,7 +7495,8 @@
     "pluralize": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
-      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow=="
+      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
+      "dev": true
     },
     "popper.js": {
       "version": "1.12.9",
@@ -9261,7 +9440,8 @@
     "progress": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.0.tgz",
-      "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8="
+      "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
+      "dev": true
     },
     "promise": {
       "version": "8.0.1",
@@ -9272,9 +9452,9 @@
       }
     },
     "prop-types": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
-      "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
+      "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -9469,7 +9649,7 @@
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-dev-utils": {
@@ -9527,7 +9707,7 @@
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-error-overlay": {
@@ -9542,7 +9722,7 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "fbjs": "0.8.16",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "warning": "3.0.0"
       }
     },
@@ -9554,7 +9734,7 @@
         "hoist-non-react-statics": "2.3.1",
         "jss": "9.8.0",
         "jss-preset-default": "4.3.0",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "theming": "1.3.0"
       }
     },
@@ -9565,7 +9745,7 @@
       "requires": {
         "commonmark": "0.24.0",
         "commonmark-react-renderer": "4.3.4",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-popper": {
@@ -9574,7 +9754,34 @@
       "integrity": "sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg==",
       "requires": {
         "popper.js": "1.12.9",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
+      }
+    },
+    "react-router": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
+      "integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
+      "requires": {
+        "history": "4.7.2",
+        "hoist-non-react-statics": "2.3.1",
+        "invariant": "2.2.2",
+        "loose-envify": "1.3.1",
+        "path-to-regexp": "1.7.0",
+        "prop-types": "15.6.1",
+        "warning": "3.0.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
+      "integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
+      "requires": {
+        "history": "4.7.2",
+        "invariant": "2.2.2",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.1",
+        "react-router": "4.2.0",
+        "warning": "3.0.0"
       }
     },
     "react-scrollbar-size": {
@@ -9583,7 +9790,7 @@
       "integrity": "sha512-9dDUJvk7S48r0TRKjlKJ9e/LkLLYgc9LdQR6W21I8ZqtSrEsedPOoMji4nU3DHy7fx2l8YMScJS/N7qiloYzXQ==",
       "requires": {
         "babel-runtime": "6.26.0",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "react-event-listener": "0.5.3",
         "stifle": "1.0.4"
       }
@@ -9597,7 +9804,7 @@
         "classnames": "2.2.5",
         "dom-helpers": "3.3.1",
         "loose-envify": "1.3.1",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "warning": "3.0.0"
       }
     },
@@ -9912,6 +10119,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
       "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
+      "dev": true,
       "requires": {
         "caller-path": "0.1.0",
         "resolve-from": "1.0.1"
@@ -9957,7 +10165,13 @@
     "resolve-from": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
-      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
+      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
+      "dev": true
+    },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
     },
     "restore-cursor": {
       "version": "2.0.0",
@@ -10243,6 +10457,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
       "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
+      "dev": true,
       "requires": {
         "is-fullwidth-code-point": "2.0.0"
       }
@@ -10603,37 +10818,24 @@
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
     },
     "table": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/table/-/table-4.0.3.tgz",
-      "integrity": "sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
+      "integrity": "sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==",
+      "dev": true,
       "requires": {
-        "ajv": "6.2.1",
-        "ajv-keywords": "3.1.0",
+        "ajv": "5.5.2",
+        "ajv-keywords": "2.1.1",
         "chalk": "2.3.2",
         "lodash": "4.17.5",
         "slice-ansi": "1.0.0",
         "string-width": "2.1.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.2.1.tgz",
-          "integrity": "sha1-KKarxJOiq+D7TIUHrK7bQ/pVBnE=",
-          "requires": {
-            "fast-deep-equal": "1.0.0",
-            "fast-json-stable-stringify": "2.0.0",
-            "json-schema-traverse": "0.3.1"
-          }
-        },
-        "ajv-keywords": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz",
-          "integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74="
-        },
         "ansi-styles": {
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "1.9.1"
           }
@@ -10642,6 +10844,7 @@
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
           "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "3.2.1",
             "escape-string-regexp": "1.0.5",
@@ -10652,6 +10855,7 @@
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
           "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "dev": true,
           "requires": {
             "has-flag": "3.0.0"
           }
@@ -10696,7 +10900,7 @@
         "brcast": "3.0.1",
         "is-function": "1.0.1",
         "is-plain-object": "2.0.4",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "throat": {
@@ -10828,7 +11032,8 @@
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
     },
     "ua-parser-js": {
       "version": "0.7.17",
@@ -10888,6 +11093,12 @@
         }
       }
     },
+    "unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+      "dev": true
+    },
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
@@ -11077,6 +11288,11 @@
         "spdx-expression-parse": "1.0.4"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -11676,6 +11892,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
       "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
+      "dev": true,
       "requires": {
         "mkdirp": "0.5.1"
       }
diff --git a/docs/package.json b/docs/package.json
index c8b96851e..beeb1fec3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,16 +17,13 @@
     "date-fns": "^2.0.0-alpha.7",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
-    "eslint": "4.10.0",
     "eslint-config-react-app": "^2.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.4.0",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
+    "history": "^4.7.2",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
     "jss": "^9.8.0",
@@ -41,12 +38,15 @@
     "postcss-loader": "2.0.8",
     "prismjs": "^1.11.0",
     "promise": "8.0.1",
+    "prop-types": "^15.6.1",
     "raf": "3.4.0",
     "react": "^16.2.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.2.0",
     "react-jss": "^8.3.1",
     "react-markdown": "^2.5.1",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
@@ -57,11 +57,12 @@
   },
   "devDependencies": {
     "cross-env": "^5.1.3",
-    "eslint": "^4.17.0",
-    "eslint-config-airbnb": "^16.0.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint": "^4.18.2",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-import-resolver-webpack": "^0.8.4",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
+    "eslint-plugin-react": "^7.7.0",
     "raw-loader": "^0.5.1"
   },
   "scripts": {
diff --git a/docs/public/index.html b/docs/public/index.html
index a32e23b95..24a180785 100644
--- a/docs/public/index.html
+++ b/docs/public/index.html
@@ -39,4 +39,17 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+  <script>
+    // Initialize Firebase
+    var config = {
+      apiKey: "AIzaSyCt7DXgwxkQcaIFxyWPb3Qv6FzKYEp_DVw",
+      authDomain: "material-ui-pickers.firebaseapp.com",
+      databaseURL: "https://material-ui-pickers.firebaseio.com",
+      projectId: "material-ui-pickers",
+      storageBucket: "",
+      messagingSenderId: "235493971350"
+    };
+    firebase.initializeApp(config);
+  </script>
 </html>
diff --git a/docs/src/App.js b/docs/src/App.js
index 008ca5a56..d3a79f779 100644
--- a/docs/src/App.js
+++ b/docs/src/App.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { MuiThemeProvider, createMuiTheme } from 'material-ui';
 
-import dateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'
-import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'
+import dateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
+import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
 
 import { create } from 'jss';
 import preset from 'jss-preset-default';
@@ -11,8 +11,10 @@ import rtl from 'jss-rtl';
 import JssProvider from 'react-jss/lib/JssProvider';
 import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
 
-import Demo from './Demo/Demo';
+// import Demo from './Demo/Demo';
 import { setPrismTheme } from './utils/prism';
+import Layout from './layout/Layout';
+import Routes from './Routes/Routes';
 
 const jss = create({ plugins: [...preset().plugins, rtl()] });
 jss.options.createGenerateClassName = createGenerateClassName;
@@ -55,19 +57,19 @@ export default class App extends Component {
 
   render() {
     return (
-      <div className="root">
-        <JssProvider jss={jss}>
-          <MuiThemeProvider theme={this.getMuiTheme()}>
-            <MuiPickersUtilsProvider utils={dateFnsUtils}>
-              <Demo
-                toggleDirection={this.toggleDirection}
-                toggleThemeType={this.toggleThemeType}
-                toggleFrench={this.props.toggleFrench}
-              />
-            </MuiPickersUtilsProvider>
-          </MuiThemeProvider>
-        </JssProvider>
-      </div>
+      <JssProvider jss={jss}>
+        <MuiThemeProvider theme={this.getMuiTheme()}>
+          <MuiPickersUtilsProvider utils={dateFnsUtils}>
+            <Layout
+              toggleDirection={this.toggleDirection}
+              toggleThemeType={this.toggleThemeType}
+              toggleFrench={this.props.toggleFrench}
+            >
+              <Routes />
+            </Layout>
+          </MuiPickersUtilsProvider>
+        </MuiThemeProvider>
+      </JssProvider>
     );
   }
 }
diff --git a/docs/src/Demo/Demo.jsx b/docs/src/Demo/Demo.jsx
deleted file mode 100644
index 5c30e5d4c..000000000
--- a/docs/src/Demo/Demo.jsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { AppBar, Toolbar, IconButton, Icon, Typography, withStyles, Button, Tooltip } from 'material-ui';
-
-import Github from './components/GithubIcon';
-import SourcablePanel from './components/SourcablePanel';
-import BasicUsage from './Examples/BasicUsage';
-import CustomElements from './Examples/CustomElements';
-import DateTimePickers from './Examples/DateTimePickers';
-// import PersianPickers from './Examples/PersianPickers';
-import './Demo.css';
-
-class Demo extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    toggleThemeType: PropTypes.func.isRequired,
-    toggleDirection: PropTypes.func.isRequired,
-    toggleFrench: PropTypes.func.isRequired,
-  }
-
-  scrollToContent = () => {
-    const contentEl = document.getElementById('content');
-    contentEl.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-    });
-  }
-
-  render() {
-    const {
-      classes, toggleThemeType, toggleDirection, toggleFrench,
-    } = this.props;
-
-    return (
-      <main className={classes.main}>
-        <AppBar position="fixed" className={classes.noShadow}>
-          <Toolbar>
-            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
-              <Icon>menu</Icon>
-            </IconButton>
-
-            <div className={classes.flex} />
-
-            <Tooltip title="Toggle English/French moment locale" enterDelay={300}>
-              <IconButton color="inherit" onClick={toggleFrench}>
-                <Icon>language</Icon>
-              </IconButton>
-            </Tooltip>
-
-            <Tooltip title="Toggle light/dark theme" enterDelay={300}>
-              <IconButton color="inherit" onClick={toggleThemeType}>
-                <Icon>lightbulb_outline</Icon>
-              </IconButton>
-            </Tooltip>
-
-            <Tooltip title="Toggle direction" enterDelay={300}>
-              <IconButton color="inherit" onClick={toggleDirection}>
-                <Icon>format_textdirection_l_to_r</Icon>
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Github" enterDelay={300}>
-              <IconButton
-                color="inherit"
-                component="a"
-                href="https://github.com/dmtrKovalenko/material-ui-pickers"
-              >
-                <Github color="inherit" />
-              </IconButton>
-            </Tooltip>
-          </Toolbar>
-        </AppBar>
-
-        <Toolbar color="primary" className={classes.appToolbar}>
-          <img alt="Material-UI logo" className="material-ui-logo" src="https://material-ui-1dab0.firebaseapp.com/static/images/material-ui-logo.svg" />
-
-          <Typography variant="display1" color="inherit" className="title text-light" gutterBottom>
-            Material-UI Pickers
-          </Typography>
-          <Typography variant="headline" align="center" color="inherit" gutterBottom className="text-light">
-            Date and Time pickers for material-ui v1
-          </Typography>
-
-          <Button variant="raised" className={classes.getStarted} onClick={this.scrollToContent}>
-            Get Started
-          </Button>
-        </Toolbar>
-
-        <div id="content" className={classes.content}>
-          <Typography variant="display2" align="center" gutterBottom>
-            Here you are!
-          </Typography>
-
-          <SourcablePanel
-            title="Basic Usage"
-            sourceFile="BasicUsage.jsx"
-          >
-            <BasicUsage />
-          </SourcablePanel>
-
-          <SourcablePanel
-            title="Date & Time pickers"
-            sourceFile="DateTimePickers.jsx"
-          >
-            <DateTimePickers />
-          </SourcablePanel>
-
-          <SourcablePanel
-            title="Custom Day Element"
-            sourceFile="CustomElements.jsx"
-          >
-            <CustomElements />
-          </SourcablePanel>
-
-          {/* <SourcablePanel
-            title="Persian Pickers"
-            description={
-              <p key="persian-desc">
-                Make sure you have read the
-                <a href="https://material-ui-next.com/guides/right-to-left/"> right to left section </a>
-                of the material-ui documentation page
-              </p>
-            }
-            sourceFile="PersianPickers.jsx"
-          >
-            <PersianPickers />
-          </SourcablePanel> */}
-        </div>
-      </main>
-    );
-  }
-}
-
-const styles = theme => ({
-  flex: {
-    flex: 1,
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-  noShadow: {
-    boxShadow: 'unset',
-  },
-  appToolbar: {
-    backgroundColor: theme.palette.primary.main,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    color: theme.palette.common.white,
-    padding: '40px 20px',
-    '@media (max-width: 600px)': {
-      paddingTop: '100px',
-      minHeight: 'calc(100vh - 55px)',
-    },
-  },
-  getStarted: {
-    marginTop: '10px',
-  },
-  main: {
-    backgroundColor: theme.palette.background.default,
-    marginBottom: -50,
-  },
-  content: {
-    paddingTop: '80px',
-    backgroundColor: theme.palette.background.default,
-    minHeight: 'calc(100vh - 63px)',
-    maxWidth: 900,
-    margin: '0 auto',
-    display: 'flex',
-    flexDirection: 'column',
-    '@media(max-width: 600px)': {
-      minHeight: 'calc(100vh - 55px)',
-    },
-  },
-  changeOutside: {
-    maxWidth: 200,
-    margin: '0 auto',
-  },
-});
-
-export default withStyles(styles)(Demo);
diff --git a/docs/src/Demo/Examples/BasicUsage.jsx b/docs/src/Demo/Examples/BasicUsage.jsx
deleted file mode 100644
index 5da9afe94..000000000
--- a/docs/src/Demo/Examples/BasicUsage.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Fragment, Component } from 'react';
-import { Typography } from 'material-ui';
-import { TimePicker, DatePicker } from 'material-ui-pickers';
-
-export default class BasicUsage extends Component {
-  state = {
-    selectedDate: new Date(),
-  }
-
-  handleDateChange = (date) => {
-    this.setState({ selectedDate: date });
-  }
-
-  render() {
-    const { selectedDate } = this.state;
-
-    return (
-      <Fragment>
-        <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
-            Date picker
-          </Typography>
-
-          <DatePicker
-            keyboard
-            clearable
-            label="Choose a date"
-            helperText="Possible manual entry via keyboard"
-            maxDateMessage="Date must be less than today"
-            value={selectedDate}
-            onChange={this.handleDateChange}
-            animateYearScrolling={false}
-          />
-        </div>
-
-        <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
-            Time picker
-          </Typography>
-
-          <TimePicker
-            keyboard
-            mask={[/\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']}
-            placeholder="08:00 AM"
-            value={selectedDate}
-            onChange={this.handleDateChange}
-          />
-        </div>
-      </Fragment>
-    );
-  }
-}
diff --git a/docs/src/Demo/components/MarkdownElement.jsx b/docs/src/Demo/components/MarkdownElement.jsx
deleted file mode 100644
index ec747fa47..000000000
--- a/docs/src/Demo/components/MarkdownElement.jsx
+++ /dev/null
@@ -1 +0,0 @@
-null
\ No newline at end of file
diff --git a/docs/src/Examples/CodeSnippets/MuiPickerProviderCode.jsx b/docs/src/Examples/CodeSnippets/MuiPickerProviderCode.jsx
new file mode 100644
index 000000000..f27542961
--- /dev/null
+++ b/docs/src/Examples/CodeSnippets/MuiPickerProviderCode.jsx
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import MomentUtils from 'material-ui-pickers/utils/moment-utils';
+import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
+import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
+
+function App() {
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Root />
+    </MuiPickersUtilsProvider>
+  );
+}
+
+render(<App />, document.querySelector('#app'));
diff --git a/docs/src/Examples/CodeSnippets/QuickStart.jsx b/docs/src/Examples/CodeSnippets/QuickStart.jsx
new file mode 100644
index 000000000..c4ee4a89a
--- /dev/null
+++ b/docs/src/Examples/CodeSnippets/QuickStart.jsx
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
+import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
+import TimePicker from 'material-ui-pickers/TimePicker';
+import DatePicker from 'material-ui-pickers/DatePicker';
+import DateTimePicker from 'material-ui-pickers/DateTimePicker';
+
+export default class App extends PureComponent {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleDateChange = (date) => {
+    this.setState({ selectedDate: date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <DatePicker
+          value={selectedDate}
+          onChange={this.handleDateChange}
+        />
+
+        <TimePicker
+          value={selectedDate}
+          onChange={this.handleDateChange}
+        />
+
+        <DateTimePicker
+          value={selectedDate}
+          onChange={this.handleDateChange}
+        />
+      </MuiPickersUtilsProvider>
+    );
+  }
+}
diff --git a/docs/src/Examples/Demo/BasicDatePicker.jsx b/docs/src/Examples/Demo/BasicDatePicker.jsx
new file mode 100644
index 000000000..ed772fca4
--- /dev/null
+++ b/docs/src/Examples/Demo/BasicDatePicker.jsx
@@ -0,0 +1,41 @@
+import React, { Fragment, PureComponent } from 'react';
+import { DatePicker } from 'material-ui-pickers';
+
+export default class BasicUsage extends PureComponent {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleDateChange = (date) => {
+    this.setState({ selectedDate: date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <Fragment>
+        <div className="picker">
+          <DatePicker
+            label="Basic example"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            animateYearScrolling={false}
+          />
+        </div>
+
+        <div className="picker">
+          <DatePicker
+            label="Clearable"
+            clearable
+            disableFuture
+            maxDateMessage="Date must be less than today"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            animateYearScrolling={false}
+          />
+        </div>
+      </Fragment>
+    );
+  }
+}
diff --git a/docs/src/Examples/Demo/BasicDateTimePicker.jsx b/docs/src/Examples/Demo/BasicDateTimePicker.jsx
new file mode 100644
index 000000000..28a968f00
--- /dev/null
+++ b/docs/src/Examples/Demo/BasicDateTimePicker.jsx
@@ -0,0 +1,40 @@
+import React, { Fragment, PureComponent } from 'react';
+import { DateTimePicker } from 'material-ui-pickers';
+
+export default class BasicDateTimePicker extends PureComponent {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleDateChange = (date) => {
+    this.setState({ selectedDate: date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <Fragment>
+        <div className="picker">
+          <DateTimePicker
+            value={selectedDate}
+            disablePast
+            onChange={this.handleDateChange}
+            label="DateTimePicker"
+          />
+        </div>
+
+        <div className="picker">
+          <DateTimePicker
+            autoOk
+            ampm={false}
+            disableFuture
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            label="24h clock"
+          />
+        </div>
+      </Fragment>
+    );
+  }
+}
diff --git a/docs/src/Demo/Examples/DateTimePickers.jsx b/docs/src/Examples/Demo/CustomDateTimePicker.jsx
similarity index 63%
rename from docs/src/Demo/Examples/DateTimePickers.jsx
rename to docs/src/Examples/Demo/CustomDateTimePicker.jsx
index 03b6b6e0b..ab78f7e3d 100644
--- a/docs/src/Demo/Examples/DateTimePickers.jsx
+++ b/docs/src/Examples/Demo/CustomDateTimePicker.jsx
@@ -1,8 +1,8 @@
-import React, { Fragment, Component } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { DateTimePicker } from 'material-ui-pickers';
-import { IconButton, Typography, Icon, InputAdornment } from 'material-ui';
+import { IconButton, Icon, InputAdornment } from 'material-ui';
 
-export default class BasicUsage extends Component {
+export default class CustomDateTimePicker extends PureComponent {
   state = {
     selectedDate: new Date(),
   }
@@ -17,26 +17,7 @@ export default class BasicUsage extends Component {
     return (
       <Fragment>
         <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
-            Default
-          </Typography>
-
-          <DateTimePicker
-            value={selectedDate}
-            disablePast
-            onChange={this.handleDateChange}
-            leftArrowIcon={<Icon> keyboard_arrow_left </Icon>}
-            rightArrowIcon={<Icon> keyboard_arrow_right </Icon>}
-          />
-        </div>
-
-        <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
-            Custom
-          </Typography>
-
           <DateTimePicker
-            error
             autoOk
             ampm={false}
             showTabs={false}
@@ -44,7 +25,7 @@ export default class BasicUsage extends Component {
             disableFuture
             value={selectedDate}
             onChange={this.handleDateChange}
-            helperText="Required"
+            helperText="Hardcoded helper text"
             leftArrowIcon={<Icon> add_alarm </Icon>}
             rightArrowIcon={<Icon> snooze </Icon>}
             InputProps={{
@@ -54,11 +35,23 @@ export default class BasicUsage extends Component {
                     <Icon>add_alarm</Icon>
                   </IconButton>
                 </InputAdornment>
-            ),
-          }}
+              ),
+            }}
+          />
+        </div>
+
+        <div className="picker">
+          <DateTimePicker
+            keyboard
+            label="Keyboard input"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            format="YYYY/MM/DD hh:mm A"
+            mask={[/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, ' ', /\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']}
           />
         </div>
       </Fragment>
+
     );
   }
 }
diff --git a/docs/src/Demo/Examples/CustomElements.jsx b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx
similarity index 62%
rename from docs/src/Demo/Examples/CustomElements.jsx
rename to docs/src/Examples/Demo/CustomElementsDatePicker.jsx
index b9ffa82d5..f81e9a89b 100644
--- a/docs/src/Demo/Examples/CustomElements.jsx
+++ b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx
@@ -1,10 +1,12 @@
-import React, { Fragment, Component } from 'react';
+/* eslint-disable no-param-reassign */
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, Typography, withStyles } from 'material-ui';
 import classNames from 'classnames';
-import { DateTimePicker, DatePicker } from 'material-ui-pickers';
 import moment from 'moment';
 
+import { DatePicker } from 'material-ui-pickers';
+import { IconButton, withStyles } from 'material-ui';
+
 import isValid from 'date-fns/isValid';
 import format from 'date-fns/format';
 import isSameDay from 'date-fns/isSameDay';
@@ -12,7 +14,7 @@ import startOfWeek from 'date-fns/startOfWeek';
 import endOfWeek from 'date-fns/endOfWeek';
 import isWithinInterval from 'date-fns/isWithinInterval';
 
-class CustomElements extends Component {
+class CustomElements extends PureComponent {
   static propTypes = {
     classes: PropTypes.object.isRequired,
   }
@@ -21,12 +23,8 @@ class CustomElements extends Component {
     selectedDate: new Date(),
   }
 
-  handleDateChange = (date) => {
-    this.setState({ selectedDate: date });
-  }
-
   handleWeekChange = (date) => {
-    this.setState({ selectedDate: date.clone().startOf('week') });
+    this.setState({ selectedDate: startOfWeek(date) });
   }
 
   formatWeekSelectLabel = (date, invalidLabel) => {
@@ -43,22 +41,7 @@ class CustomElements extends Component {
       : invalidLabel;
   }
 
-  renderCustomDayForDateTime = (date, selectedDate, dayInCurrentMonth, dayComponent) => {
-    const { classes } = this.props;
-
-    const dayClassName = classNames({
-      [classes.customDayHighlight]: isSameDay(date, selectedDate),
-    });
-
-    return (
-      <div className={classes.dayWrapper}>
-        {dayComponent}
-        <div className={dayClassName} />
-      </div>
-    );
-  }
-
-  renderWrappedDefaultDay = (date, selectedDate, dayInCurrentMonth) => {
+  renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => {
     const { classes } = this.props;
 
     if (date instanceof moment) {
@@ -96,33 +79,15 @@ class CustomElements extends Component {
     const { selectedDate } = this.state;
 
     return (
-      <Fragment>
-        <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
-            Week picker
-          </Typography>
-
-          <DatePicker
-            value={selectedDate}
-            onChange={this.handleDateChange}
-            renderDay={this.renderWrappedDefaultDay}
-            labelFunc={this.formatWeekSelectLabel}
-          />
-        </div>
-
-        <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
-            DateTime picker
-          </Typography>
-
-          <DateTimePicker
-            autoSubmit={false}
-            value={selectedDate}
-            onChange={this.handleDateChange}
-            renderDay={this.renderCustomDayForDateTime}
-          />
-        </div>
-      </Fragment>
+      <div className="picker">
+        <DatePicker
+          label="Week picker"
+          value={selectedDate}
+          onChange={this.handleWeekChange}
+          renderDay={this.renderWrappedWeekDay}
+          labelFunc={this.formatWeekSelectLabel}
+        />
+      </div>
     );
   }
 }
@@ -148,7 +113,7 @@ const styles = theme => ({
     borderRadius: '50%',
   },
   nonCurrentMonthDay: {
-    color: theme.palette.common.minBlack,
+    color: theme.palette.text.disabled,
   },
   highlightNonCurrentMonthDay: {
     color: '#676767',
diff --git a/docs/src/Examples/Demo/KeyboardDatePicker.jsx b/docs/src/Examples/Demo/KeyboardDatePicker.jsx
new file mode 100644
index 000000000..9665bc4f7
--- /dev/null
+++ b/docs/src/Examples/Demo/KeyboardDatePicker.jsx
@@ -0,0 +1,44 @@
+import React, { Fragment, PureComponent } from 'react';
+import { DatePicker } from 'material-ui-pickers';
+
+export default class BasicUsage extends PureComponent {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleDateChange = (date) => {
+    this.setState({ selectedDate: date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <Fragment>
+        <div className="picker">
+          <DatePicker
+            keyboard
+            clearable
+            label="Uncontrolled input"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            animateYearScrolling={false}
+          />
+        </div>
+
+        <div className="picker">
+          <DatePicker
+            label="Masked input"
+            keyboard
+            format="MMM DD"
+            placeholder="Jan 01"
+            mask={[/[a-zA-z]/, /[a-zA-z]/, /[a-zA-z]/, ' ', /\d/, /\d/]}
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            animateYearScrolling={false}
+          />
+        </div>
+      </Fragment>
+    );
+  }
+}
diff --git a/docs/src/Examples/Demo/KeyboardTimePicker.jsx b/docs/src/Examples/Demo/KeyboardTimePicker.jsx
new file mode 100644
index 000000000..e062917a5
--- /dev/null
+++ b/docs/src/Examples/Demo/KeyboardTimePicker.jsx
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react';
+import { TimePicker } from 'material-ui-pickers';
+
+export default class BasicUsage extends PureComponent {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleDateChange = (date) => {
+    this.setState({ selectedDate: date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <div className="picker">
+        <TimePicker
+          keyboard
+          label="Masked timepicker"
+          mask={[/\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']}
+          placeholder="08:00 AM"
+          value={selectedDate}
+          onChange={this.handleDateChange}
+        />
+      </div>
+    );
+  }
+}
diff --git a/docs/src/Examples/Demo/TimePickerBasic.jsx b/docs/src/Examples/Demo/TimePickerBasic.jsx
new file mode 100644
index 000000000..8935c2865
--- /dev/null
+++ b/docs/src/Examples/Demo/TimePickerBasic.jsx
@@ -0,0 +1,38 @@
+import React, { Fragment, PureComponent } from 'react';
+import { TimePicker } from 'material-ui-pickers';
+
+export default class BasicUsage extends PureComponent {
+  state = {
+    selectedDate: new Date(),
+  }
+
+  handleDateChange = (date) => {
+    this.setState({ selectedDate: date });
+  }
+
+  render() {
+    const { selectedDate } = this.state;
+
+    return (
+      <Fragment>
+        <div className="picker">
+          <TimePicker
+            label="12 hours"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+          />
+        </div>
+
+        <div className="picker">
+          <TimePicker
+            clearable
+            ampm={false}
+            label="24 hours"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+          />
+        </div>
+      </Fragment>
+    );
+  }
+}
diff --git a/docs/src/Demo/Examples/PersianPickers.jsx b/docs/src/Examples/PersianPickers.jsx
similarity index 100%
rename from docs/src/Demo/Examples/PersianPickers.jsx
rename to docs/src/Examples/PersianPickers.jsx
diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx
new file mode 100644
index 000000000..d54f66832
--- /dev/null
+++ b/docs/src/Routes/Demos/DatePickerDemo.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import SourcablePanel from '_shared/SourcablePanel';
+import { Typography } from 'material-ui';
+
+const DatePickerDemoDemo = () => (
+  <div>
+    <Typography variant="display2" gutterBottom>
+      Date picker
+    </Typography>
+    <Typography variant="body1" gutterBottom>
+      Date pickers use a dialog window to select a single date.
+    </Typography>
+    <Typography variant="body1">
+      The selected day is indicated by a filled circle.
+      The current day is indicated by a different color and type weight.
+    </Typography>
+
+    <SourcablePanel
+      title="Basic usage"
+      sourceFile="Demo/BasicDatePicker.jsx"
+    />
+
+    <SourcablePanel
+      title="Keyboard input"
+      sourceFile="Demo/KeyboardDatePicker.jsx"
+    />
+
+    <SourcablePanel
+      title="Custom day element"
+      sourceFile="Demo/CustomElementsDatePicker.jsx"
+      description={
+        <Typography variant="body1" gutterBottom>
+          Customization performing by overriding render method for Day component
+        </Typography>
+      }
+    />
+  </div>
+);
+
+export default DatePickerDemoDemo;
+
diff --git a/docs/src/Routes/Demos/DateTimePickerDemo.jsx b/docs/src/Routes/Demos/DateTimePickerDemo.jsx
new file mode 100644
index 000000000..9de7d04d2
--- /dev/null
+++ b/docs/src/Routes/Demos/DateTimePickerDemo.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import SourcablePanel from '_shared/SourcablePanel';
+import { Typography } from 'material-ui';
+
+const DateTimePickerDemo = () => (
+  <div>
+    <Typography variant="display2" gutterBottom>
+      Date & time picker
+    </Typography>
+    <Typography variant="body1" gutterBottom>
+      This component is not from material design guidelines.
+    </Typography>
+    <Typography variant="body1">
+      Its a combination of date & time picker and allows
+      that uses the modal to select both date and time with one control.
+    </Typography>
+
+    <SourcablePanel
+      title="Basic usage"
+      sourceFile="Demo/BasicDateTimePicker.jsx"
+    />
+    <SourcablePanel
+      title="Customization"
+      sourceFile="Demo/CustomDateTimePicker.jsx"
+      description={
+        <Typography variant="body1" gutterBottom>
+          Applied mostly all customization, that available for date & time pickers
+        </Typography>
+      }
+    />
+  </div>
+);
+
+export default DateTimePickerDemo;
+
diff --git a/docs/src/Routes/Demos/TimePickerDemo.jsx b/docs/src/Routes/Demos/TimePickerDemo.jsx
new file mode 100644
index 000000000..6a7d51462
--- /dev/null
+++ b/docs/src/Routes/Demos/TimePickerDemo.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import SourcablePanel from '_shared/SourcablePanel';
+import { Typography } from 'material-ui';
+
+const DatePickerDemoDemo = () => (
+  <div>
+    <Typography variant="display2" gutterBottom>
+      Time picker
+    </Typography>
+    <Typography variant="body1" gutterBottom>
+      Time pickers use a dialog to select a single time (in the hours:minutes format).
+    </Typography>
+    <Typography variant="body1">
+      The selected time is indicated by the filled circle at the end of the clock hand.
+    </Typography>
+
+    <SourcablePanel
+      title="Basic usage"
+      sourceFile="Demo/TimePickerBasic.jsx"
+      description={
+        <Typography variant="body1" gutterBottom>
+          A time picker should adjusts to a user’s preferred time setting,
+          i.e. the 12-hour or 24-hour format.
+        </Typography>
+      }
+    />
+
+    <SourcablePanel
+      title="Keyboard input"
+      sourceFile="Demo/KeyboardTimePicker.jsx"
+    />
+  </div>
+);
+
+export default DatePickerDemoDemo;
+
diff --git a/docs/src/Routes/Demos/index.jsx b/docs/src/Routes/Demos/index.jsx
new file mode 100644
index 000000000..d3c2a5252
--- /dev/null
+++ b/docs/src/Routes/Demos/index.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Switch, Route } from 'react-router';
+
+import DatePickerDemo from './DatePickerDemo';
+import TimePickerDemo from './TimePickerDemo';
+import DateTimePickerDemo from './DateTimePickerDemo';
+
+export default () => (
+  <Switch>
+    <Route path="/demo/datepicker" component={DatePickerDemo} />
+    <Route path="/demo/timepicker" component={TimePickerDemo} />
+    <Route path="/demo/datetimepicker" component={DateTimePickerDemo} />
+  </Switch>
+);
+
diff --git a/docs/src/Routes/GettingStarted/Installation.jsx b/docs/src/Routes/GettingStarted/Installation.jsx
new file mode 100644
index 000000000..cd01406f9
--- /dev/null
+++ b/docs/src/Routes/GettingStarted/Installation.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Code from '_shared/Code';
+import { Typography } from 'material-ui';
+
+// eslint-disable-next-line
+import muiPickerProviderCode from '!raw-loader!Examples/CodeSnippets/MuiPickerProviderCode';
+
+const installLibCode =
+`npm i -s date-fns@next
+// or
+npm i -s moment`;
+
+const Installation = () => (
+  <div>
+    <Typography variant="display2" gutterBottom> Installation </Typography>
+    <Typography variant="body1" gutterBottom> Available as <a href="https://www.npmjs.com/package/material-ui-pickers"> npm package </a> </Typography>
+
+    <Code withMargin text="npm i -s material-ui-pickers" />
+
+    <Typography variant="display1" gutterBottom> Peer Library </Typography>
+    <Typography variant="body1" gutterBottom>
+      Material-ui-pickers was designed to use that date management library that you need.
+    </Typography>
+    <Typography variant="body1" gutterBottom>
+      We are providing interfaces for <a className="link" href="https://momentjs.com/">moment</a>
+      &nbsp;and <a className="link" href="https://date-fns.org/">date-fns 2</a>.
+      If you are not using moment in the project (or dont have it in the bundle already)
+      we suggest using date-fns,
+      because it much more lightweight and will be correctly tree-shaked from the bundle.
+    </Typography>
+
+    <Code withMargin text={installLibCode} />
+    <Typography>
+      Teach pickers how to use one of that library using <span className="inline-code">MuiPickersUtilsProvider</span>. This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree.
+    </Typography>
+
+    <Code withMargin text={muiPickerProviderCode} />
+    <Typography variant="display1" gutterBottom> Font Icons </Typography>
+    <Typography variant="body1">
+      We are using material-ui-icons icon font to display icons.
+      In order if you can override with a help of corresponding props. Just add this to your html
+    </Typography>
+    <Code
+      withMargin
+      language="html"
+      text='<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">'
+    />
+  </div>
+);
+
+export default Installation;
+
diff --git a/docs/src/Routes/GettingStarted/Usage.jsx b/docs/src/Routes/GettingStarted/Usage.jsx
new file mode 100644
index 000000000..1a738e8d8
--- /dev/null
+++ b/docs/src/Routes/GettingStarted/Usage.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Code from '_shared/Code';
+import { Typography, withStyles } from 'material-ui';
+
+// eslint-disable-next-line
+import quickStartCode from '!raw-loader!Examples/CodeSnippets/QuickStart';
+
+const Usage = ({ classes }) => (
+  <div>
+    <Typography variant="display2" gutterBottom> Usage </Typography>
+
+    <Typography variant="body1" gutterBottom>
+      Material-UI-pickers rely only on material-ui controls and the date-management lib
+      you have choose. Please note that all components are controlled, thats means that its required
+      to pass <span className="inline-code"> value </span> and <span className="inline-code"> onChange </span> props.
+    </Typography>
+
+    <Typography
+      variant="display1"
+      className={classes.quickStartHeader}
+      gutterBottom
+    >
+      Quick Start
+    </Typography>
+
+    <Typography variant="body1" gutterBottom>
+      Here is a quick example you to get started
+    </Typography>
+
+    <Code withMargin text={quickStartCode} />
+
+    <Typography variant="display1" gutterBottom>
+      Interactive example
+    </Typography>
+
+    <iframe
+      title="codesandbox"
+      src="https://codesandbox.io/embed/l2ykr7kwvz?hidenavigation=1&fontsize=14&view=preview"
+      style={{
+        width: '100%',
+        height: 650,
+        border: 0,
+        borderRadius: 4,
+        overflow: 'hidden',
+      }}
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    />
+  </div>
+);
+
+Usage.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = {
+  quickStartHeader: {
+    marginTop: '1em',
+  },
+};
+
+export default withStyles(styles)(Usage);
+
diff --git a/docs/src/Demo/Demo.css b/docs/src/Routes/Landing/Landing.css
similarity index 100%
rename from docs/src/Demo/Demo.css
rename to docs/src/Routes/Landing/Landing.css
diff --git a/docs/src/Routes/Landing/Landing.jsx b/docs/src/Routes/Landing/Landing.jsx
new file mode 100644
index 000000000..4e1d88cff
--- /dev/null
+++ b/docs/src/Routes/Landing/Landing.jsx
@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Toolbar, Typography, withStyles, Button } from 'material-ui';
+
+class Demo extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  }
+
+  scrollToContent = () => {
+    const contentEl = document.getElementById('content');
+    contentEl.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div>
+        <Toolbar color="primary" className={classes.appToolbar}>
+          <img alt="Material-UI logo" className="material-ui-logo" src="https://material-ui-1dab0.firebaseapp.com/static/images/material-ui-logo.svg" />
+
+          <Typography variant="display1" color="inherit" className="title text-light" gutterBottom>
+            Material-UI Pickers
+          </Typography>
+          <Typography variant="headline" align="center" color="inherit" gutterBottom className="text-light">
+            Date and Time pickers for material-ui v1
+          </Typography>
+
+          <Link to="/installation">
+            <Button variant="raised" className={classes.getStarted} onClick={this.scrollToContent}>
+              Get Started
+            </Button>
+          </Link>
+        </Toolbar>
+
+        <div id="content" className={classes.content}>
+          <Typography variant="display1" align="center" gutterBottom>
+            Support material-ui-pickers
+          </Typography>
+
+          <Typography align="center" gutterBottom>
+            Material-UI-pickers is a MIT licensed open source project.
+            We are intent on code quality and project maintain.
+            Entirely thanks to our awesome bakers.
+          </Typography>
+
+          <Typography
+            align="center"
+            className={classes.sponsorHeader}
+            variant="headline"
+            gutterBottom
+          >
+            Our awesome sponsors via <a className="link" href="https://www.patreon.com/user?u=9897423"> patreon </a>
+          </Typography>
+
+          <Typography variant="caption" align="center">
+            There is no sponsors yet <span aria-label="crying emoji" role="img"> 😢 </span>
+          </Typography>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = theme => ({
+  flex: {
+    flex: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  noShadow: {
+    boxShadow: 'unset',
+  },
+  appToolbar: {
+    backgroundColor: theme.palette.primary.main,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    color: theme.palette.common.white,
+    padding: '40px 20px',
+    '@media (max-width: 600px)': {
+      paddingTop: '100px',
+      minHeight: 'calc(100vh - 55px)',
+    },
+  },
+  getStarted: {
+    marginTop: '10px',
+  },
+  main: {
+    backgroundColor: theme.palette.background.default,
+    marginBottom: -50,
+  },
+  content: {
+    paddingTop: '80px',
+    backgroundColor: theme.palette.background.default,
+    minHeight: 'calc(100vh - 63px)',
+    maxWidth: 900,
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    '@media(max-width: 600px)': {
+      minHeight: 'calc(100vh - 55px)',
+    },
+  },
+  changeOutside: {
+    maxWidth: 200,
+    margin: '0 auto',
+  },
+  sponsorHeader: {
+    marginTop: '2em',
+  },
+});
+
+export default withStyles(styles)(Demo);
diff --git a/docs/src/Routes/Routes.jsx b/docs/src/Routes/Routes.jsx
new file mode 100644
index 000000000..da2120de5
--- /dev/null
+++ b/docs/src/Routes/Routes.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Switch, Route } from 'react-router';
+
+import Demos from './Demos';
+import Landing from './Landing/Landing';
+import Installation from './GettingStarted/Installation';
+import Usage from './GettingStarted/Usage';
+
+export default () => (
+  <Switch>
+    <Route path="/" exact component={Landing} />
+    <Route path="/installation" component={Installation} />
+    <Route path="/usage" component={Usage} />
+    <Route path="/demo" component={Demos} />
+  </Switch>
+);
+
diff --git a/docs/src/Demo/components/Code.jsx b/docs/src/_shared/Code.jsx
similarity index 89%
rename from docs/src/Demo/components/Code.jsx
rename to docs/src/_shared/Code.jsx
index c665c4e26..cb478bd54 100644
--- a/docs/src/Demo/components/Code.jsx
+++ b/docs/src/_shared/Code.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { withStyles } from 'material-ui/styles';
-import prism from '../../utils/prism';
+import prism from 'utils/prism';
 
 const anchorLinkStyle = (theme, size) => ({
   '& .anchor-link-style': {
@@ -25,10 +27,10 @@ const anchorLinkStyle = (theme, size) => ({
 
 const styles = theme => ({
   root: {
+    margin: 0,
     fontFamily: theme.typography.fontFamily,
     fontSize: 16,
     color: theme.palette.text.primary,
-    margin: 0,
     backgroundColor: theme.palette.background.paper,
     padding: 10,
 
@@ -153,14 +155,19 @@ const styles = theme => ({
       },
     },
   },
+  margin: {
+    margin: '10px 0 30px',
+  },
 });
 
 const Code = (props) => {
-  const { classes, className, text } = props;
-  const hightlightedCode = prism.highlight(text, prism.languages.jsx);
+  const {
+    classes, language, text, withMargin,
+  } = props;
+  const hightlightedCode = prism.highlight(text, prism.languages[language]);
 
   return (
-    <div className={classes.root}>
+    <div className={classnames(classes.root, { [classes.margin]: withMargin })}>
       <pre>
         <code dangerouslySetInnerHTML={{ __html: hightlightedCode }} />
       </pre>
@@ -168,4 +175,16 @@ const Code = (props) => {
   );
 };
 
+Code.propTypes = {
+  classes: PropTypes.object.isRequired,
+  language: PropTypes.string,
+  text: PropTypes.string.isRequired,
+  withMargin: PropTypes.bool,
+};
+
+Code.defaultProps = {
+  withMargin: false,
+  language: 'jsx',
+};
+
 export default withStyles(styles)(Code);
diff --git a/docs/src/Demo/components/GithubIcon.jsx b/docs/src/_shared/GithubIcon.jsx
similarity index 100%
rename from docs/src/Demo/components/GithubIcon.jsx
rename to docs/src/_shared/GithubIcon.jsx
diff --git a/docs/src/Demo/components/SourcablePanel.jsx b/docs/src/_shared/SourcablePanel.jsx
similarity index 60%
rename from docs/src/Demo/components/SourcablePanel.jsx
rename to docs/src/_shared/SourcablePanel.jsx
index aa334fe46..75ec77e75 100644
--- a/docs/src/Demo/components/SourcablePanel.jsx
+++ b/docs/src/_shared/SourcablePanel.jsx
@@ -1,13 +1,15 @@
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import Collapse from 'material-ui/transitions/Collapse';
 import { Typography, IconButton, Icon, withStyles } from 'material-ui';
-import Code from '../components/Code';
+import Code from './Code';
 
 class SourcablePanel extends PureComponent {
   static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.object]).isRequired,
     classes: PropTypes.object.isRequired,
     title: PropTypes.string.isRequired,
     description: PropTypes.node,
@@ -23,12 +25,9 @@ class SourcablePanel extends PureComponent {
 
   }
 
-  getSource = () => {
-    const webpackRawLoader = require.context('!raw-loader!../Examples', false, /\.jsx$/);
-    const file = webpackRawLoader(`./${this.props.sourceFile}`);
+  getSource = () => require(`!raw-loader!../Examples/${this.props.sourceFile}`)
 
-    return file;
-  }
+  getComponent = () => require(`../Examples/${this.props.sourceFile}`).default
 
   toggleSource = () => {
     this.setState({ sourceExpanded: !this.state.sourceExpanded });
@@ -37,32 +36,31 @@ class SourcablePanel extends PureComponent {
   render() {
     const { sourceExpanded } = this.state;
     const { classes, title, description } = this.props;
-
-    return [
-      <Typography
-        key="title"
-        variant="display1"
-        className={classes.exampleTitle}
-      >
-        { title }
-      </Typography>,
-
-      description,
-
-      <Collapse key="code" in={sourceExpanded}>
-        <Code className={classes.source} text={this.getSource()} />
-      </Collapse>,
-
-      <div key="picker" className={classes.pickers}>
-        <IconButton
-          className={classes.sourceBtn}
-          onClick={this.toggleSource}
-        >
-          <Icon>code</Icon>
-        </IconButton>
-        { this.props.children }
-      </div>,
-    ];
+    const Component = this.getComponent();
+
+    return (
+      <React.Fragment>
+        <Typography variant="display1" className={classes.exampleTitle}>
+          { title }
+        </Typography>
+
+        {description}
+
+        <Collapse key="code" in={sourceExpanded}>
+          <Code className={classes.source} text={this.getSource()} />
+        </Collapse>
+
+        <div className={classes.pickers}>
+          <IconButton
+            className={classes.sourceBtn}
+            onClick={this.toggleSource}
+          >
+            <Icon>code</Icon>
+          </IconButton>
+          <Component />
+        </div>
+      </React.Fragment>
+    );
   }
 }
 
diff --git a/docs/src/index.css b/docs/src/index.css
index 592ab3d25..5de214105 100644
--- a/docs/src/index.css
+++ b/docs/src/index.css
@@ -9,3 +9,27 @@ body {
 *::after {
   box-sizing: border-box;
 }
+
+.picker {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 40px;
+  margin: 10px 40px 40px;
+}
+
+a {
+  text-decoration: none;
+  color: #3f51b5;
+}
+
+a.link:hover {
+  text-decoration: underline;
+}
+
+.inline-code {
+  padding-top: 2px 2px 0;
+  background-color: white;
+  color: #3f51b5;
+}
\ No newline at end of file
diff --git a/docs/src/index.js b/docs/src/index.js
index e1ee83430..788b0684e 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,31 +1,22 @@
-/* eslint-disable no-use-before-define */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import moment from 'moment';
-import 'moment/locale/fr';
+import { Router } from 'react-router';
+import createBrowserHistory from 'history/createBrowserHistory';
 
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-let currentLocale = 'en';
-moment.locale(currentLocale);
-
-const toggleFrench = () => {
-  const newLocale = currentLocale === 'en'
-    ? 'fr'
-    : 'en';
-
-  currentLocale = newLocale;
-  moment.locale(newLocale);
-
-  // little hack here to update inner components, using moment)
-  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
-  doRender();
-};
+const history = createBrowserHistory();
+history.listen(() => window.scrollTo(0, 0));
 
 const doRender = () => {
-  ReactDOM.render(<App toggleFrench={toggleFrench} />, document.getElementById('root'));
+  ReactDOM.render(
+    <Router history={history}>
+      <App />
+    </Router>,
+    document.getElementById('root'),
+  );
 };
 
 doRender();
diff --git a/docs/src/layout/DrawerMenu.jsx b/docs/src/layout/DrawerMenu.jsx
new file mode 100644
index 000000000..eb3bfd8c1
--- /dev/null
+++ b/docs/src/layout/DrawerMenu.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Divider, Toolbar, Typography, withStyles } from 'material-ui';
+
+import NavigationMenu from './NavigationMenu';
+import { version } from '../../../lib/package.json';
+
+const DrawerMenu = ({ classes }) => (
+  <div className={classes.drawerRoot}>
+    <Toolbar className={classes.drawerToolbar}>
+      <Link to="/">
+        <Typography variant="subheading" className={classes.headerLink}>
+         Material-UI pickers
+        </Typography>
+      </Link>
+      <Typography variant="caption"> v{version} </Typography>
+    </Toolbar>
+
+    <Divider />
+    <NavigationMenu />
+  </div>
+);
+
+DrawerMenu.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = theme => ({
+  drawerRoot: {
+    width: 250,
+  },
+  drawerToolbar: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerLink: {
+    transition: 'color .2s ease-in-out',
+    '&:hover': {
+      color: theme.palette.primary.dark,
+      textDecoration: 'underline',
+    },
+  },
+});
+
+export default withStyles(styles)(DrawerMenu);
diff --git a/docs/src/layout/Layout.jsx b/docs/src/layout/Layout.jsx
new file mode 100644
index 000000000..4e424902d
--- /dev/null
+++ b/docs/src/layout/Layout.jsx
@@ -0,0 +1,176 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import Hidden from 'material-ui/Hidden';
+import Drawer from 'material-ui/Drawer';
+import { withRouter } from 'react-router-dom';
+import { AppBar, Toolbar, IconButton, Icon, withStyles, Tooltip } from 'material-ui';
+
+import Github from '_shared/GithubIcon';
+import DrawerMenu from './DrawerMenu';
+
+class Layout extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    toggleThemeType: PropTypes.func.isRequired,
+    toggleDirection: PropTypes.func.isRequired,
+    toggleFrench: PropTypes.func.isRequired,
+    theme: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    children: PropTypes.element.isRequired,
+  }
+
+  state = {
+    drawerOpen: false,
+  };
+
+  handleDrawerToggle = () => {
+    this.setState({ drawerOpen: !this.state.drawerOpen });
+  };
+
+  scrollToContent = () => {
+    const contentEl = document.getElementById('content');
+    contentEl.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  }
+
+  render() {
+    const {
+      classes, toggleThemeType, toggleDirection, toggleFrench, theme, location,
+    } = this.props;
+    const isLanding = location.pathname === '/';
+
+    return (
+      <React.Fragment>
+        <AppBar
+          position="fixed"
+          className={classnames(classes.appBar, { [classes.landingAppBar]: isLanding })}
+        >
+          <Toolbar>
+            <IconButton
+              className={classes.menuButton}
+              color="inherit"
+              aria-label="Menu"
+              onClick={this.handleDrawerToggle}
+            >
+              <Icon>menu</Icon>
+            </IconButton>
+
+            <div className={classes.flex} />
+
+            <Tooltip title="Toggle English/French moment locale" enterDelay={300}>
+              <IconButton color="inherit" onClick={toggleFrench}>
+                <Icon>language</Icon>
+              </IconButton>
+            </Tooltip>
+
+            <Tooltip title="Toggle light/dark theme" enterDelay={300}>
+              <IconButton color="inherit" onClick={toggleThemeType}>
+                <Icon>lightbulb_outline</Icon>
+              </IconButton>
+            </Tooltip>
+
+            <Tooltip title="Toggle direction" enterDelay={300}>
+              <IconButton color="inherit" onClick={toggleDirection}>
+                <Icon>format_textdirection_l_to_r</Icon>
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Github" enterDelay={300}>
+              <IconButton
+                color="inherit"
+                component="a"
+                href="https://github.com/dmtrKovalenko/material-ui-pickers"
+              >
+                <Github color="inherit" />
+              </IconButton>
+            </Tooltip>
+          </Toolbar>
+        </AppBar>
+
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+            open={this.state.drawerOpen}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            <DrawerMenu />
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant={isLanding ? 'temporary' : 'permanent'}
+            open={this.state.drawerOpen}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+          >
+            <DrawerMenu />
+          </Drawer>
+        </Hidden>
+
+        <main className={classnames(classes.main, { [classes.landingMain]: isLanding })}>
+          <div className={classnames(classes.content, { [classes.landingMain]: isLanding })}>
+            {this.props.children}
+          </div>
+        </main>
+      </React.Fragment>
+    );
+  }
+}
+
+const styles = theme => ({
+  flex: {
+    flex: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  appBar: {
+    // boxShadow: 'unset',
+    [theme.breakpoints.up('md')]: {
+      left: 250,
+      width: 'calc(100% - 250px)',
+    },
+  },
+  main: {
+    marginTop: 55,
+    padding: '20px',
+    minHeight: 'calc(100vh - 55px)',
+    backgroundColor: theme.palette.background.default,
+    [theme.breakpoints.up('md')]: {
+      marginTop: 64,
+      minHeight: 'calc(100vh - 64px)',
+      marginLeft: 250,
+    },
+  },
+  content: {
+    [theme.breakpoints.up('lg')]: {
+      maxWidth: 960,
+      margin: '0 auto',
+    },
+  },
+  landingMain: {
+    padding: 0,
+    width: '100vw',
+    maxWidth: '100vw',
+    marginLeft: 0,
+  },
+  landingAppBar: {
+    left: 0,
+    width: '100vw',
+    boxShadow: 'unset',
+  },
+});
+
+export default withStyles(styles, { withTheme: true })(withRouter(Layout));
diff --git a/docs/src/layout/NavigationMenu.jsx b/docs/src/layout/NavigationMenu.jsx
new file mode 100644
index 000000000..c9edf5676
--- /dev/null
+++ b/docs/src/layout/NavigationMenu.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { List, ListItem, withStyles, ListSubheader } from 'material-ui';
+import { withRouter, Link } from 'react-router-dom';
+
+const NavigationMenu = ({ classes }) => (
+  <List component="nav">
+    <ListSubheader component="div"> Getting Started  </ListSubheader>
+    <Link to="/installation" className={classes.navLink}>
+      <ListItem button> Installation </ListItem>
+    </Link>
+    <Link to="/usage" className={classes.navLink}>
+      <ListItem button> Usage </ListItem>
+    </Link>
+
+    <ListSubheader component="div"> Components </ListSubheader>
+    <Link to="/demo/datepicker" className={classes.navLink}>
+      <ListItem button> Date Picker </ListItem>
+    </Link>
+
+    <Link to="/demo/timepicker" className={classes.navLink}>
+      <ListItem button> Time Picker </ListItem>
+    </Link>
+
+    <Link to="/demo/datetimepicker" className={classes.navLink}>
+      <ListItem button> Date & Time Picker </ListItem>
+    </Link>
+  </List>
+);
+
+NavigationMenu.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = theme => ({
+  navLink: {
+    color: theme.palette.text.primary,
+    textDecoration: 'none',
+    ...theme.typography.subheading,
+    fontSize: '0.9rem',
+
+    '&>*': {
+      paddingTop: 8,
+      paddingBottom: 8,
+    },
+  },
+});
+
+export default withStyles(styles)(withRouter(NavigationMenu));
+
diff --git a/docs/src/registerServiceWorker.js b/docs/src/registerServiceWorker.js
index 4a3ccf021..f584622d8 100644
--- a/docs/src/registerServiceWorker.js
+++ b/docs/src/registerServiceWorker.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 // In production, we register a service worker to serve assets from local cache.
 
 // This lets the app load faster on subsequent visits in production, and gives
@@ -8,15 +9,11 @@
 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 // This link also includes instructions on opting out of this behavior.
 
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,),);
 
 export default function register() {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
@@ -46,7 +43,7 @@ export default function register() {
 function registerValidSW(swUrl) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         installingWorker.onstatechange = () => {
@@ -67,7 +64,7 @@ function registerValidSW(swUrl) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -75,14 +72,14 @@ function registerValidSW(swUrl) {
 function checkValidServiceWorker(swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
         response.status === 404 ||
         response.headers.get('content-type').indexOf('javascript') === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -93,15 +90,13 @@ function checkValidServiceWorker(swUrl) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.',);
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/docs/src/utils/prism.js b/docs/src/utils/prism.js
index 9f2b97e16..1b633ecf0 100644
--- a/docs/src/utils/prism.js
+++ b/docs/src/utils/prism.js
@@ -20,4 +20,5 @@ export function setPrismTheme(theme) {
     : darkTheme;
 }
 
-export default prism
\ No newline at end of file
+export default prism;
+
diff --git a/.eslintrc b/lib/.eslintrc
similarity index 100%
rename from .eslintrc
rename to lib/.eslintrc
diff --git a/lib/src/_shared/PickerBase.jsx b/lib/src/_shared/PickerBase.jsx
index 2bd3f71cf..0b3cdc557 100644
--- a/lib/src/_shared/PickerBase.jsx
+++ b/lib/src/_shared/PickerBase.jsx
@@ -15,8 +15,8 @@ export default class PickerBase extends PureComponent {
     utils: PropTypes.func.isRequired,
   }
 
-  getValidDateOrCurrent = () => {
-    const { utils, value } = this.props;
+  getValidDateOrCurrent = (props = this.props) => {
+    const { utils, value } = props;
     const date = utils.date(value);
 
     return utils.isValid(date) && value !== null ? date : utils.date();
@@ -26,6 +26,12 @@ export default class PickerBase extends PureComponent {
     date: this.getValidDateOrCurrent(),
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!this.props.utils.isEqual(this.state.date, nextProps.value)) {
+      this.setState({ date: this.getValidDateOrCurrent(nextProps) });
+    }
+  }
+
   getFormat = () => {
     if (this.props.format || this.props.labelFunc) {
       return this.props.format;
diff --git a/lib/src/utils/date-fns-utils.js b/lib/src/utils/date-fns-utils.js
index c5fc2e0b1..808e0d2dd 100644
--- a/lib/src/utils/date-fns-utils.js
+++ b/lib/src/utils/date-fns-utils.js
@@ -49,7 +49,7 @@ export default class DateFnsUtils {
   static isBefore = isBefore
 
   static isAfterDay(date, value) {
-    return isAfter(endOfDay(date), value);
+    return isAfter(date, endOfDay(value));
   }
 
   static isBeforeDay(date, value) {
@@ -61,7 +61,7 @@ export default class DateFnsUtils {
   }
 
   static isAfterYear(date, value) {
-    return isAfter(endOfYear(date), value);
+    return isAfter(date, endOfYear(value));
   }
 
   static startOfDay = startOfDay