diff --git a/.babelrc b/.babelrc
index e0e22ee73..420173781 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,11 +1,9 @@
 {
-  "stage": 2,
-  "optional": ["es7.classProperties"],
+  "presets": ["es2015", "stage-0", "react"],
   "env": {
     "development": {
-      "plugins": ["react-transform"],
-      "extra": {
-        "react-transform": {
+      "plugins": [
+        ["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
@@ -14,8 +12,8 @@
             "transform": "react-transform-catch-errors",
             "imports": ["react", "redbox-react"]
           }]
-        }
-      }
+        }]
+      ]
     }
   }
 }
diff --git a/.bumpedrc b/.bumpedrc
index 023de6484..04826e51e 100644
--- a/.bumpedrc
+++ b/.bumpedrc
@@ -3,7 +3,6 @@ files: [
 ]
 
 plugins:
-
   prerelease:
 
     'Linting config files':
@@ -17,15 +16,22 @@ plugins:
       plugin: 'bumped-terminal'
       command: 'npm run prepublish'
 
+    'Generating CHANGELOG file':
+      plugin: 'bumped-changelog'
+
   postrelease:
 
     'Commiting new version':
       plugin: 'bumped-terminal'
-      command: 'git add package.json && git commit package.json -m "$newVersion release" && git push origin master'
+      command: 'git add CHANGELOG.md package.json && git commit package.json -m "Release $newVersion"'
+
+    'Detecting problem before publish':
+      plugin: 'bumped-terminal'
+      command: 'git-dirty'
 
     'Publishing tag at Github':
       plugin: 'bumped-terminal'
-      command: 'git tag $newVersion && git push origin $newVersion'
+      command: 'git tag $newVersion && git push origin dev && git push --tags origin dev'
 
     'Publishing at NPM':
       plugin: 'bumped-terminal'
diff --git a/.csscomb.json b/.csscomb.json
deleted file mode 100644
index 3a6196e37..000000000
--- a/.csscomb.json
+++ /dev/null
@@ -1,317 +0,0 @@
-{
-  "always-semicolon": true,
-  "block-indent": 2,
-  "color-case": "lower",
-  "color-shorthand": true,
-  "element-case": "lower",
-  "eof-newline": true,
-  "leading-zero": false,
-  "remove-empty-rulesets": true,
-  "space-after-colon": 1,
-  "space-after-combinator": 1,
-  "space-before-selector-delimiter": 0,
-  "space-between-declarations": "\n",
-  "space-after-opening-brace": "\n",
-  "space-before-closing-brace": "\n",
-  "space-before-colon": 0,
-  "space-before-combinator": 1,
-  "space-before-opening-brace": 1,
-  "strip-spaces": true,
-  "unitless-zero": true,
-  "vendor-prefix-align": true,
-  "sort-order": [
-    [
-      "$variable",
-      "$extend",
-      "$include",
-      "composes",
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "display",
-      "float",
-      "width",
-      "min-width",
-      "max-width",
-      "height",
-      "min-height",
-      "max-height",
-      "flex",
-      "flex-direction",
-      "flex-flow",
-      "flex-grow",
-      "flex-order",
-      "flex-pack",
-      "flex-align",
-      "align-content",
-      "align-items",
-      "justify-content",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bottom",
-      "margin-left",
-      "overflow",
-      "overflow-x",
-      "overflow-y",
-      "-webkit-overflow-scrolling",
-      "-ms-overflow-x",
-      "-ms-overflow-y",
-      "-ms-overflow-style",
-      "clip",
-      "clear",
-      "font",
-      "font-family",
-      "font-size",
-      "font-style",
-      "font-weight",
-      "font-variant",
-      "font-size-adjust",
-      "font-stretch",
-      "font-effect",
-      "font-emphasize",
-      "font-emphasize-position",
-      "font-emphasize-style",
-      "font-smooth",
-      "-webkit-hyphens",
-      "-moz-hyphens",
-      "hyphens",
-      "line-height",
-      "color",
-      "text-align",
-      "-webkit-text-align-last",
-      "-moz-text-align-last",
-      "-ms-text-align-last",
-      "text-align-last",
-      "text-emphasis",
-      "text-emphasis-color",
-      "text-emphasis-style",
-      "text-emphasis-position",
-      "text-decoration",
-      "text-indent",
-      "text-justify",
-      "text-outline",
-      "-ms-text-overflow",
-      "text-overflow",
-      "text-overflow-ellipsis",
-      "text-overflow-mode",
-      "text-shadow",
-      "text-transform",
-      "text-wrap",
-      "-webkit-text-size-adjust",
-      "-ms-text-size-adjust",
-      "letter-spacing",
-      "-ms-word-break",
-      "word-break",
-      "word-spacing",
-      "-ms-word-wrap",
-      "word-wrap",
-      "-moz-tab-size",
-      "-o-tab-size",
-      "tab-size",
-      "white-space",
-      "vertical-align",
-      "list-style",
-      "list-style-position",
-      "list-style-type",
-      "list-style-image",
-      "pointer-events",
-      "-ms-touch-action",
-      "touch-action",
-      "cursor",
-      "visibility",
-      "zoom",
-      "table-layout",
-      "empty-cells",
-      "caption-side",
-      "border-spacing",
-      "border-collapse",
-      "content",
-      "quotes",
-      "counter-reset",
-      "counter-increment",
-      "resize",
-      "-webkit-user-select",
-      "-moz-user-select",
-      "-ms-user-select",
-      "-o-user-select",
-      "user-select",
-      "nav-index",
-      "nav-up",
-      "nav-right",
-      "nav-down",
-      "nav-left",
-      "background",
-      "background-color",
-      "background-image",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-      "filter",
-      "background-repeat",
-      "background-attachment",
-      "background-position",
-      "background-position-x",
-      "background-position-y",
-      "-webkit-background-clip",
-      "-moz-background-clip",
-      "background-clip",
-      "background-origin",
-      "-webkit-background-size",
-      "-moz-background-size",
-      "-o-background-size",
-      "background-size",
-      "border",
-      "border-color",
-      "border-style",
-      "border-width",
-      "border-top",
-      "border-top-color",
-      "border-top-style",
-      "border-top-width",
-      "border-right",
-      "border-right-color",
-      "border-right-style",
-      "border-right-width",
-      "border-bottom",
-      "border-bottom-color",
-      "border-bottom-style",
-      "border-bottom-width",
-      "border-left",
-      "border-left-color",
-      "border-left-style",
-      "border-left-width",
-      "border-radius",
-      "border-top-left-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "-webkit-border-image",
-      "-moz-border-image",
-      "-o-border-image",
-      "border-image",
-      "-webkit-border-image-source",
-      "-moz-border-image-source",
-      "-o-border-image-source",
-      "border-image-source",
-      "-webkit-border-image-slice",
-      "-moz-border-image-slice",
-      "-o-border-image-slice",
-      "border-image-slice",
-      "-webkit-border-image-width",
-      "-moz-border-image-width",
-      "-o-border-image-width",
-      "border-image-width",
-      "-webkit-border-image-outset",
-      "-moz-border-image-outset",
-      "-o-border-image-outset",
-      "border-image-outset",
-      "-webkit-border-image-repeat",
-      "-moz-border-image-repeat",
-      "-o-border-image-repeat",
-      "border-image-repeat",
-      "outline",
-      "outline-width",
-      "outline-style",
-      "outline-color",
-      "outline-offset",
-      "-webkit-box-shadow",
-      "-moz-box-shadow",
-      "box-shadow",
-      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-      "opacity",
-      "-ms-interpolation-mode",
-      "-webkit-transition",
-      "-moz-transition",
-      "-ms-transition",
-      "-o-transition",
-      "transition",
-      "-webkit-transition-delay",
-      "-moz-transition-delay",
-      "-ms-transition-delay",
-      "-o-transition-delay",
-      "transition-delay",
-      "-webkit-transition-timing-function",
-      "-moz-transition-timing-function",
-      "-ms-transition-timing-function",
-      "-o-transition-timing-function",
-      "transition-timing-function",
-      "-webkit-transition-duration",
-      "-moz-transition-duration",
-      "-ms-transition-duration",
-      "-o-transition-duration",
-      "transition-duration",
-      "-webkit-transition-property",
-      "-moz-transition-property",
-      "-ms-transition-property",
-      "-o-transition-property",
-      "transition-property",
-      "transform-style",
-      "-webkit-transform",
-      "-moz-transform",
-      "-ms-transform",
-      "-o-transform",
-      "transform",
-      "-webkit-transform-origin",
-      "-moz-transform-origin",
-      "-ms-transform-origin",
-      "-o-transform-origin",
-      "transform-origin",
-      "-webkit-animation",
-      "-moz-animation",
-      "-ms-animation",
-      "-o-animation",
-      "animation",
-      "-webkit-animation-name",
-      "-moz-animation-name",
-      "-ms-animation-name",
-      "-o-animation-name",
-      "animation-name",
-      "-webkit-animation-duration",
-      "-moz-animation-duration",
-      "-ms-animation-duration",
-      "-o-animation-duration",
-      "animation-duration",
-      "-webkit-animation-play-state",
-      "-moz-animation-play-state",
-      "-ms-animation-play-state",
-      "-o-animation-play-state",
-      "animation-play-state",
-      "-webkit-animation-timing-function",
-      "-moz-animation-timing-function",
-      "-ms-animation-timing-function",
-      "-o-animation-timing-function",
-      "animation-timing-function",
-      "-webkit-animation-delay",
-      "-moz-animation-delay",
-      "-ms-animation-delay",
-      "-o-animation-delay",
-      "animation-delay",
-      "-webkit-animation-iteration-count",
-      "-moz-animation-iteration-count",
-      "-ms-animation-iteration-count",
-      "-o-animation-iteration-count",
-      "animation-iteration-count",
-      "-webkit-animation-direction",
-      "-moz-animation-direction",
-      "-ms-animation-direction",
-      "-o-animation-direction",
-      "animation-direction",
-      "backface-visibility",
-      "will-change",
-      "fill"
-    ]
-  ]
-}
diff --git a/.eslintrc b/.eslintrc
index 32c6d3f36..136e551f9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,6 +17,7 @@
   "parser": "babel-eslint",
 
   "plugins": [
+    "babel",
     "react"
   ],
 
@@ -31,7 +32,7 @@
     "comma-style": [2, "last"],
     "complexity": [0, 11],
     "constructor-super": [2],
-    "consistent-return": [2],
+    "consistent-return": [0],
     "consistent-this": [0, "that"],
     "curly": [2, "multi-line"],
     "default-case": [2],
@@ -43,7 +44,6 @@
     "func-names": [0],
     "func-style": [0, "declaration"],
     "generator-star-spacing": [2, "after"],
-    "strict": [2, "always"],
     "guard-for-in": [0],
     "handle-callback-err": [0],
     "key-spacing": [2, {
@@ -57,9 +57,7 @@
     "max-params": [0, 3],
     "max-statements": [0, 10],
     "new-parens": [2],
-    "new-cap": [2, {
-      "capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
-    }],
+    "new-cap": [0],
     "newline-after-var": [0],
     "no-alert": [2],
     "no-array-constructor": [2],
@@ -80,7 +78,6 @@
     "no-else-return": [0],
     "no-empty": [2],
     "no-empty-character-class": [2],
-    "no-empty-label": [2],
     "no-eq-null": [0],
     "no-eval": [2],
     "no-ex-assign": [2],
@@ -150,7 +147,9 @@
     "no-undefined": [0],
     "no-underscore-dangle": [0],
     "no-unreachable": [2],
-    "no-unused-expressions": [2],
+    "no-unused-expressions": [2, {
+      "allowShortCircuit": true
+    }],
     "no-unused-vars": [1, {
       "vars": "all",
       "args": "after-used"
@@ -163,24 +162,19 @@
       "location": "start"
     }],
     "no-with": [2],
+    "object-shorthand": [2],
     "one-var": [0],
     "operator-assignment": [0, "always"],
-    "operator-linebreak": [2, "after"],
+    "operator-linebreak": [2, "before"],
     "padded-blocks": [0],
     "prefer-const": [2],
+    "prefer-spread": [2],
     "quote-props": [0],
     "radix": [0],
     "semi": [2],
-    "semi-spacing": [2, {
-      "before": false,
-      "after": true
-    }],
     "sort-vars": [0],
-    "space-after-keywords": [2, "always"],
-    "space-before-function-paren": [2, {
-      "anonymous": "always",
-      "named": "always"
-    }],
+    "keyword-spacing": [2, {"after": true}],
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "always" }],
     "space-before-blocks": [0, "always"],
     "space-in-brackets": [0, "never", {
       "singleValue": true,
@@ -192,7 +186,6 @@
     }],
     "space-in-parens": [2, "never"],
     "space-infix-ops": [2],
-    "space-return-throw-case": [2],
     "space-unary-ops": [2, {
       "words": true,
       "nonwords": false
@@ -208,8 +201,27 @@
     "yoda": [2, "never", {
       "exceptRange": true
     }],
-    "react/jsx-uses-react": [2],
-    "react/jsx-uses-vars": [2],
-    "react/react-in-jsx-scope": [2]
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/sort-prop-types": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 0,
+    "react/no-unknown-property": 1,
+    "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+    "react/react-in-jsx-scope": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1
   }
 }
diff --git a/.gitignore b/.gitignore
index bb9bc230a..5aba682b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
-build
 lib
+build
 node_modules
 npm-debug.log
+.idea
+.DS_Store
diff --git a/.lintstagedrc b/.lintstagedrc
new file mode 100644
index 000000000..8a2904f4d
--- /dev/null
+++ b/.lintstagedrc
@@ -0,0 +1,7 @@
+{
+  "*.js": [
+    "eslint --fix",
+    "git add"
+  ],
+  "*.scss": "sass-lint --max-warnings 0 -v"
+}
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 000000000..528c6b250
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,11 @@
+.*rc
+.eslintignore
+.csscomb.json
+.*.yml
+.editorconfig
+karma.conf.js
+server.js
+tests.webpack.js
+webpack.config.*
+docs
+spec
diff --git a/.nvmrc b/.nvmrc
index fae6e3d04..9e3a93350 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-4.2.1
+4.4.3
diff --git a/.sass-lint.yml b/.sass-lint.yml
new file mode 100644
index 000000000..abd6057ef
--- /dev/null
+++ b/.sass-lint.yml
@@ -0,0 +1,397 @@
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  border-zero: 1
+  brace-style:
+    - 1
+    - allow-single-line: true
+  class-name-format:
+    - 0
+    - convention: hyphenatedlowercase
+  clean-import-paths:
+    - 1
+    - filename-extension: false
+      leading-underscore: false
+  empty-line-between-blocks:
+    - 0
+    - ignore-single-line-rulesets: true
+  extends-before-declarations: 0
+  extends-before-mixins: 0
+  final-newline:
+    - 1
+    - include: true
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+  function-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  hex-length:
+    - 1
+    - style: short
+  hex-notation:
+    - 1
+    - style: lowercase
+  id-name-format:
+    - 0
+    - convention: hyphenatedlowercase
+  indentation:
+    - 1
+    - size: 2
+  leading-zero:
+    - 0
+    - include: false
+  mixin-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  mixins-before-declarations: 0
+  nesting-depth: 0
+  no-color-literals: 0
+  no-css-comments: 1
+  no-debug: 1
+  no-duplicate-properties:
+    - 1
+    - exclude: []
+  no-empty-rulesets: 1
+  no-ids: 1
+  no-important: 0
+  no-invalid-hex: 1
+  no-mergeable-selectors: 0
+  no-misspelled-properties:
+    - 1
+    - extra-properties:
+        - composes
+  no-qualifying-elements:
+    - 0
+    - allow-element-with-attribute: false
+      allow-element-with-class: false
+      allow-element-with-id: false
+  no-trailing-zero: 1
+  no-url-protocols: 1
+  placeholder-in-extend: 0
+  property-sort-order:
+    - 1
+    - ignore-custom-properties: false
+      order:
+        - $variable
+        - $extend
+        - $include
+        - composes
+        - position
+        - top
+        - right
+        - bottom
+        - left
+        - z-index
+        - '-webkit-box-sizing'
+        - '-moz-box-sizing'
+        - box-sizing
+        - display
+        - float
+        - width
+        - min-width
+        - max-width
+        - height
+        - min-height
+        - max-height
+        - flex
+        - flex-align
+        - flex-direction
+        - flex-flow
+        - flex-grow
+        - flex-order
+        - flex-pack
+        - flex-wrap
+        - align-content
+        - align-items
+        - justify-content
+        - padding
+        - padding-top
+        - padding-right
+        - padding-bottom
+        - padding-left
+        - margin
+        - margin-top
+        - margin-right
+        - margin-bottom
+        - margin-left
+        - overflow
+        - overflow-x
+        - overflow-y
+        - '-webkit-overflow-scrolling'
+        - '-ms-overflow-x'
+        - '-ms-overflow-y'
+        - '-ms-overflow-style'
+        - clip
+        - clear
+        - font
+        - font-family
+        - font-size
+        - font-style
+        - font-weight
+        - font-variant
+        - font-size-adjust
+        - font-stretch
+        - font-effect
+        - font-emphasize
+        - font-emphasize-position
+        - font-emphasize-style
+        - font-smooth
+        - '-webkit-hyphens'
+        - '-moz-hyphens'
+        - hyphens
+        - line-height
+        - color
+        - text-align
+        - '-webkit-text-align-last'
+        - '-moz-text-align-last'
+        - '-ms-text-align-last'
+        - text-align-last
+        - text-emphasis
+        - text-emphasis-color
+        - text-emphasis-style
+        - text-emphasis-position
+        - text-decoration
+        - text-indent
+        - text-justify
+        - text-outline
+        - '-ms-text-overflow'
+        - text-overflow
+        - text-overflow-ellipsis
+        - text-overflow-mode
+        - text-shadow
+        - text-transform
+        - text-wrap
+        - '-webkit-text-size-adjust'
+        - '-ms-text-size-adjust'
+        - letter-spacing
+        - '-ms-word-break'
+        - word-break
+        - word-spacing
+        - '-ms-word-wrap'
+        - word-wrap
+        - '-moz-tab-size'
+        - '-o-tab-size'
+        - tab-size
+        - white-space
+        - vertical-align
+        - list-style
+        - list-style-position
+        - list-style-type
+        - list-style-image
+        - pointer-events
+        - '-ms-touch-action'
+        - touch-action
+        - cursor
+        - visibility
+        - zoom
+        - table-layout
+        - empty-cells
+        - caption-side
+        - border-spacing
+        - border-collapse
+        - content
+        - quotes
+        - counter-reset
+        - counter-increment
+        - resize
+        - '-webkit-user-select'
+        - '-moz-user-select'
+        - '-ms-user-select'
+        - '-o-user-select'
+        - user-select
+        - nav-index
+        - nav-up
+        - nav-right
+        - nav-down
+        - nav-left
+        - background
+        - background-color
+        - background-image
+        - "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient"
+        - 'filter:progid:DXImageTransform.Microsoft.gradient'
+        - 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader'
+        - filter
+        - background-repeat
+        - background-attachment
+        - background-position
+        - background-position-x
+        - background-position-y
+        - '-webkit-background-clip'
+        - '-moz-background-clip'
+        - background-clip
+        - background-origin
+        - '-webkit-background-size'
+        - '-moz-background-size'
+        - '-o-background-size'
+        - background-size
+        - border
+        - border-color
+        - border-style
+        - border-width
+        - border-top
+        - border-top-color
+        - border-top-style
+        - border-top-width
+        - border-right
+        - border-right-color
+        - border-right-style
+        - border-right-width
+        - border-bottom
+        - border-bottom-color
+        - border-bottom-style
+        - border-bottom-width
+        - border-left
+        - border-left-color
+        - border-left-style
+        - border-left-width
+        - border-radius
+        - border-top-left-radius
+        - border-top-right-radius
+        - border-bottom-right-radius
+        - border-bottom-left-radius
+        - '-webkit-border-image'
+        - '-moz-border-image'
+        - '-o-border-image'
+        - border-image
+        - '-webkit-border-image-source'
+        - '-moz-border-image-source'
+        - '-o-border-image-source'
+        - border-image-source
+        - '-webkit-border-image-slice'
+        - '-moz-border-image-slice'
+        - '-o-border-image-slice'
+        - border-image-slice
+        - '-webkit-border-image-width'
+        - '-moz-border-image-width'
+        - '-o-border-image-width'
+        - border-image-width
+        - '-webkit-border-image-outset'
+        - '-moz-border-image-outset'
+        - '-o-border-image-outset'
+        - border-image-outset
+        - '-webkit-border-image-repeat'
+        - '-moz-border-image-repeat'
+        - '-o-border-image-repeat'
+        - border-image-repeat
+        - outline
+        - outline-width
+        - outline-style
+        - outline-color
+        - outline-offset
+        - '-webkit-box-shadow'
+        - '-moz-box-shadow'
+        - box-shadow
+        - 'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity'
+        - "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha"
+        - opacity
+        - '-ms-interpolation-mode'
+        - '-webkit-transition'
+        - '-moz-transition'
+        - '-ms-transition'
+        - '-o-transition'
+        - transition
+        - '-webkit-transition-delay'
+        - '-moz-transition-delay'
+        - '-ms-transition-delay'
+        - '-o-transition-delay'
+        - transition-delay
+        - '-webkit-transition-timing-function'
+        - '-moz-transition-timing-function'
+        - '-ms-transition-timing-function'
+        - '-o-transition-timing-function'
+        - transition-timing-function
+        - '-webkit-transition-duration'
+        - '-moz-transition-duration'
+        - '-ms-transition-duration'
+        - '-o-transition-duration'
+        - transition-duration
+        - '-webkit-transition-property'
+        - '-moz-transition-property'
+        - '-ms-transition-property'
+        - '-o-transition-property'
+        - transition-property
+        - transform-style
+        - '-webkit-transform'
+        - '-moz-transform'
+        - '-ms-transform'
+        - '-o-transform'
+        - transform
+        - '-webkit-transform-origin'
+        - '-moz-transform-origin'
+        - '-ms-transform-origin'
+        - '-o-transform-origin'
+        - transform-origin
+        - '-webkit-animation'
+        - '-moz-animation'
+        - '-ms-animation'
+        - '-o-animation'
+        - animation
+        - '-webkit-animation-name'
+        - '-moz-animation-name'
+        - '-ms-animation-name'
+        - '-o-animation-name'
+        - animation-name
+        - '-webkit-animation-duration'
+        - '-moz-animation-duration'
+        - '-ms-animation-duration'
+        - '-o-animation-duration'
+        - animation-duration
+        - '-webkit-animation-play-state'
+        - '-moz-animation-play-state'
+        - '-ms-animation-play-state'
+        - '-o-animation-play-state'
+        - animation-play-state
+        - '-webkit-animation-timing-function'
+        - '-moz-animation-timing-function'
+        - '-ms-animation-timing-function'
+        - '-o-animation-timing-function'
+        - animation-timing-function
+        - '-webkit-animation-delay'
+        - '-moz-animation-delay'
+        - '-ms-animation-delay'
+        - '-o-animation-delay'
+        - animation-delay
+        - '-webkit-animation-iteration-count'
+        - '-moz-animation-iteration-count'
+        - '-ms-animation-iteration-count'
+        - '-o-animation-iteration-count'
+        - animation-iteration-count
+        - '-webkit-animation-direction'
+        - '-moz-animation-direction'
+        - '-ms-animation-direction'
+        - '-o-animation-direction'
+        - animation-direction
+        - backface-visibility
+        - will-change
+        - fill
+  quotes:
+    - 1
+    - style: double
+  shorthand-values: 1
+  single-line-per-selector: 0
+  space-after-bang:
+    - 1
+    - include: false
+  space-after-colon: 1
+  space-after-comma: 0
+  space-before-bang:
+    - 1
+    - include: true
+  space-before-brace:
+    - 1
+    - include: true
+  space-before-colon: 1
+  space-between-parens:
+    - 1
+    - include: false
+  trailing-semicolon: 1
+  url-quotes: 1
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  zero-unit: 1
diff --git a/.scss-lint.yml b/.scss-lint.yml
deleted file mode 100644
index 58d80c532..000000000
--- a/.scss-lint.yml
+++ /dev/null
@@ -1,470 +0,0 @@
-scss_files: "./components/**/*.scss"
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BorderZero:
-    enabled: true
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-    exclude: []
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-    exclude: []
-
-  ElsePlacement:
-    enabled: true
-    style: same_line # or 'new_line'
-
-  EmptyLineBetweenBlocks:
-    enabled: false
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short # or 'long'
-
-  HexNotation:
-    enabled: true
-    style: lowercase # or 'uppercase'
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: true
-
-  ImportantRule:
-    enabled: false
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    character: space # or 'tab'
-    width: 2
-
-  LeadingZero:
-    enabled: false
-    style: exclude_zero # or 'include_zero'
-
-  MergeableSelector:
-    enabled: false
-    force_nesting: true
-
-  NameFormat:
-    enabled: true
-    allow_leading_underscore: true
-    convention: hyphenated_lowercase # or 'BEM', or a regex pattern
-
-  NestingDepth:
-    enabled: false
-
-  PlaceholderInExtend:
-    enabled: false
-
-  PropertySortOrder:
-    enabled: true
-    ignore_unspecified: false
-    severity: warning
-    exclude: []
-    order: [
-      "$variable",
-      "$extend",
-      "$include",
-      "composes",
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "display",
-      "float",
-      "width",
-      "min-width",
-      "max-width",
-      "height",
-      "min-height",
-      "max-height",
-      "flex",
-      "flex-direction",
-      "flex-flow",
-      "flex-grow",
-      "flex-order",
-      "flex-pack",
-      "flex-align",
-      "align-content",
-      "align-items",
-      "justify-content",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bottom",
-      "margin-left",
-      "overflow",
-      "overflow-x",
-      "overflow-y",
-      "-webkit-overflow-scrolling",
-      "-ms-overflow-x",
-      "-ms-overflow-y",
-      "-ms-overflow-style",
-      "clip",
-      "clear",
-      "font",
-      "font-family",
-      "font-size",
-      "font-style",
-      "font-weight",
-      "font-variant",
-      "font-size-adjust",
-      "font-stretch",
-      "font-effect",
-      "font-emphasize",
-      "font-emphasize-position",
-      "font-emphasize-style",
-      "font-smooth",
-      "-webkit-hyphens",
-      "-moz-hyphens",
-      "hyphens",
-      "line-height",
-      "color",
-      "text-align",
-      "-webkit-text-align-last",
-      "-moz-text-align-last",
-      "-ms-text-align-last",
-      "text-align-last",
-      "text-emphasis",
-      "text-emphasis-color",
-      "text-emphasis-style",
-      "text-emphasis-position",
-      "text-decoration",
-      "text-indent",
-      "text-justify",
-      "text-outline",
-      "-ms-text-overflow",
-      "text-overflow",
-      "text-overflow-ellipsis",
-      "text-overflow-mode",
-      "text-shadow",
-      "text-transform",
-      "text-wrap",
-      "-webkit-text-size-adjust",
-      "-ms-text-size-adjust",
-      "letter-spacing",
-      "-ms-word-break",
-      "word-break",
-      "word-spacing",
-      "-ms-word-wrap",
-      "word-wrap",
-      "-moz-tab-size",
-      "-o-tab-size",
-      "tab-size",
-      "white-space",
-      "vertical-align",
-      "list-style",
-      "list-style-position",
-      "list-style-type",
-      "list-style-image",
-      "pointer-events",
-      "-ms-touch-action",
-      "touch-action",
-      "cursor",
-      "visibility",
-      "zoom",
-      "table-layout",
-      "empty-cells",
-      "caption-side",
-      "border-spacing",
-      "border-collapse",
-      "content",
-      "quotes",
-      "counter-reset",
-      "counter-increment",
-      "resize",
-      "-webkit-user-select",
-      "-moz-user-select",
-      "-ms-user-select",
-      "-o-user-select",
-      "user-select",
-      "nav-index",
-      "nav-up",
-      "nav-right",
-      "nav-down",
-      "nav-left",
-      "background",
-      "background-color",
-      "background-image",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-      "filter",
-      "background-repeat",
-      "background-attachment",
-      "background-position",
-      "background-position-x",
-      "background-position-y",
-      "-webkit-background-clip",
-      "-moz-background-clip",
-      "background-clip",
-      "background-origin",
-      "-webkit-background-size",
-      "-moz-background-size",
-      "-o-background-size",
-      "background-size",
-      "border",
-      "border-color",
-      "border-style",
-      "border-width",
-      "border-top",
-      "border-top-color",
-      "border-top-style",
-      "border-top-width",
-      "border-right",
-      "border-right-color",
-      "border-right-style",
-      "border-right-width",
-      "border-bottom",
-      "border-bottom-color",
-      "border-bottom-style",
-      "border-bottom-width",
-      "border-left",
-      "border-left-color",
-      "border-left-style",
-      "border-left-width",
-      "border-radius",
-      "border-top-left-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "-webkit-border-image",
-      "-moz-border-image",
-      "-o-border-image",
-      "border-image",
-      "-webkit-border-image-source",
-      "-moz-border-image-source",
-      "-o-border-image-source",
-      "border-image-source",
-      "-webkit-border-image-slice",
-      "-moz-border-image-slice",
-      "-o-border-image-slice",
-      "border-image-slice",
-      "-webkit-border-image-width",
-      "-moz-border-image-width",
-      "-o-border-image-width",
-      "border-image-width",
-      "-webkit-border-image-outset",
-      "-moz-border-image-outset",
-      "-o-border-image-outset",
-      "border-image-outset",
-      "-webkit-border-image-repeat",
-      "-moz-border-image-repeat",
-      "-o-border-image-repeat",
-      "border-image-repeat",
-      "outline",
-      "outline-width",
-      "outline-style",
-      "outline-color",
-      "outline-offset",
-      "-webkit-box-shadow",
-      "-moz-box-shadow",
-      "box-shadow",
-      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-      "opacity",
-      "-ms-interpolation-mode",
-      "-webkit-transition",
-      "-moz-transition",
-      "-ms-transition",
-      "-o-transition",
-      "transition",
-      "-webkit-transition-delay",
-      "-moz-transition-delay",
-      "-ms-transition-delay",
-      "-o-transition-delay",
-      "transition-delay",
-      "-webkit-transition-timing-function",
-      "-moz-transition-timing-function",
-      "-ms-transition-timing-function",
-      "-o-transition-timing-function",
-      "transition-timing-function",
-      "-webkit-transition-duration",
-      "-moz-transition-duration",
-      "-ms-transition-duration",
-      "-o-transition-duration",
-      "transition-duration",
-      "-webkit-transition-property",
-      "-moz-transition-property",
-      "-ms-transition-property",
-      "-o-transition-property",
-      "transition-property",
-      "transform-style",
-      "-webkit-transform",
-      "-moz-transform",
-      "-ms-transform",
-      "-o-transform",
-      "transform",
-      "-webkit-transform-origin",
-      "-moz-transform-origin",
-      "-ms-transform-origin",
-      "-o-transform-origin",
-      "transform-origin",
-      "-webkit-animation",
-      "-moz-animation",
-      "-ms-animation",
-      "-o-animation",
-      "animation",
-      "-webkit-animation-name",
-      "-moz-animation-name",
-      "-ms-animation-name",
-      "-o-animation-name",
-      "animation-name",
-      "-webkit-animation-duration",
-      "-moz-animation-duration",
-      "-ms-animation-duration",
-      "-o-animation-duration",
-      "animation-duration",
-      "-webkit-animation-play-state",
-      "-moz-animation-play-state",
-      "-ms-animation-play-state",
-      "-o-animation-play-state",
-      "animation-play-state",
-      "-webkit-animation-timing-function",
-      "-moz-animation-timing-function",
-      "-ms-animation-timing-function",
-      "-o-animation-timing-function",
-      "animation-timing-function",
-      "-webkit-animation-delay",
-      "-moz-animation-delay",
-      "-ms-animation-delay",
-      "-o-animation-delay",
-      "animation-delay",
-      "-webkit-animation-iteration-count",
-      "-moz-animation-iteration-count",
-      "-ms-animation-iteration-count",
-      "-o-animation-iteration-count",
-      "animation-iteration-count",
-      "-webkit-animation-direction",
-      "-moz-animation-direction",
-      "-ms-animation-direction",
-      "-o-animation-direction",
-      "animation-direction",
-      "backface-visibility",
-      "will-change",
-      "fill"
-    ]
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: [composes]
-
-  QualifyingElement:
-    enabled: false
-    allow_element_with_attribute: false
-    allow_element_with_class: false
-    allow_element_with_id: false
-
-  SelectorDepth:
-    enabled: false
-
-  SelectorFormat:
-    enabled: true
-    convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
-
-  Shorthand:
-    enabled: true
-
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: false
-
-  SpaceAfterComma:
-    enabled: false
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingZero:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VendorPrefixes:
-    enabled: true
-    identifier_list: base
-    include: []
-    exclude: []
-
-  ZeroUnit:
-    enabled: true
-
-  Compass::*:
-    enabled: false
diff --git a/.travis.yml b/.travis.yml
index 697d35da4..32f6e0478 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,11 @@
+sudo: false
+
 language: node_js
+
 node_js:
-  - "4.2.1"
+  - 6
+  - 4
+  
 script:
   - npm run lint
   - npm test
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..743b17061
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,1562 @@
+<a name="1.1.2"></a>
+## 1.1.2 (2016-08-11)
+
+* 1.1.2 release ([0dcec60](https://github.com/react-toolbox/react-toolbox/commit/0dcec60))
+* Added missing modules ([afc2124](https://github.com/react-toolbox/react-toolbox/commit/afc2124))
+* Added Touch events to the base props ([30f1623](https://github.com/react-toolbox/react-toolbox/commit/30f1623))
+* fix for target missing id ([b557561](https://github.com/react-toolbox/react-toolbox/commit/b557561))
+* Fixed #696 - Button Icon/Inner Alignment ([5c09c5c](https://github.com/react-toolbox/react-toolbox/commit/5c09c5c)), closes [#696](https://github.com/react-toolbox/react-toolbox/issues/696)
+* Fixes for typescript definitions, typos etc. ([213411b](https://github.com/react-toolbox/react-toolbox/commit/213411b))
+* Remove prop duplicates ([c016565](https://github.com/react-toolbox/react-toolbox/commit/c016565))
+
+
+
+<a name="1.1.1"></a>
+## 1.1.1 (2016-08-08)
+
+* 1.1.1 release ([56426b9](https://github.com/react-toolbox/react-toolbox/commit/56426b9))
+* Fix linter for tooltip theme ([f09a9d7](https://github.com/react-toolbox/react-toolbox/commit/f09a9d7))
+* Move addon-update to peerDependencies ([fac66cb](https://github.com/react-toolbox/react-toolbox/commit/fac66cb))
+
+
+
+<a name="1.1.0"></a>
+# 1.1.0 (2016-08-07)
+
+* 1.1.0 release ([c671290](https://github.com/react-toolbox/react-toolbox/commit/c671290))
+* Add an active property to control pickers from outside ([39694e5](https://github.com/react-toolbox/react-toolbox/commit/39694e5))
+* Add create option to autocomplete ([3461a1f](https://github.com/react-toolbox/react-toolbox/commit/3461a1f))
+* Add required polyfills for IE11. ([ef6a979](https://github.com/react-toolbox/react-toolbox/commit/ef6a979))
+* Added custom sized circular ProgressBar to spec ([bdd2ce3](https://github.com/react-toolbox/react-toolbox/commit/bdd2ce3))
+* Added support for locale on DatePicker dialog component ([01ae580](https://github.com/react-toolbox/react-toolbox/commit/01ae580))
+* Added viewBox attr to svg element of circular ProgressBar to allow custom sizing ([a2c8f08](https://github.com/react-toolbox/react-toolbox/commit/a2c8f08))
+* Avoid !important in progress spec ([f56eb82](https://github.com/react-toolbox/react-toolbox/commit/f56eb82))
+* Better tooltips ([fcc7902](https://github.com/react-toolbox/react-toolbox/commit/fcc7902))
+* Beware of the multiple onRippleEnded ([c01c025](https://github.com/react-toolbox/react-toolbox/commit/c01c025))
+* Bugfix for IE scrollX/scrollY ([955acf0](https://github.com/react-toolbox/react-toolbox/commit/955acf0))
+* Change method name to match lib convention ([ea3917e](https://github.com/react-toolbox/react-toolbox/commit/ea3917e))
+* Change name from create to allowCreate in Autocomplete and fix linter warnings ([4093439](https://github.com/react-toolbox/react-toolbox/commit/4093439))
+* Don't render Ripple if it's not being animated ([032840e](https://github.com/react-toolbox/react-toolbox/commit/032840e))
+* Fix #547 ([f2dbfb5](https://github.com/react-toolbox/react-toolbox/commit/f2dbfb5)), closes [#547](https://github.com/react-toolbox/react-toolbox/issues/547)
+* Fix linter errors ([fae42a8](https://github.com/react-toolbox/react-toolbox/commit/fae42a8))
+* Fix linter errors and refactor ([e597bc5](https://github.com/react-toolbox/react-toolbox/commit/e597bc5))
+* Fix linter warnings ([77b0a4a](https://github.com/react-toolbox/react-toolbox/commit/77b0a4a))
+* Fix remove animation event function ([2bd6539](https://github.com/react-toolbox/react-toolbox/commit/2bd6539))
+* FIXED aslant errors and warnings to pass Travis check ([157c29d](https://github.com/react-toolbox/react-toolbox/commit/157c29d))
+* Fixed Autocomplete such that it does not error when provided with a value prop that does not exist i ([59b01e6](https://github.com/react-toolbox/react-toolbox/commit/59b01e6))
+* Fixes #586 ([041e00c](https://github.com/react-toolbox/react-toolbox/commit/041e00c)), closes [#586](https://github.com/react-toolbox/react-toolbox/issues/586)
+* Fixes #629 ([e2c5471](https://github.com/react-toolbox/react-toolbox/commit/e2c5471)), closes [#629](https://github.com/react-toolbox/react-toolbox/issues/629)
+* Fixes #663 ([023a732](https://github.com/react-toolbox/react-toolbox/commit/023a732)), closes [#663](https://github.com/react-toolbox/react-toolbox/issues/663)
+* Fixes #671 ([991da71](https://github.com/react-toolbox/react-toolbox/commit/991da71)), closes [#671](https://github.com/react-toolbox/react-toolbox/issues/671)
+* Fixes #674 ([fd138f9](https://github.com/react-toolbox/react-toolbox/commit/fd138f9)), closes [#674](https://github.com/react-toolbox/react-toolbox/issues/674)
+* Fixes #678 ([730d4c1](https://github.com/react-toolbox/react-toolbox/commit/730d4c1)), closes [#678](https://github.com/react-toolbox/react-toolbox/issues/678)
+* Fixes Autocomplete error when provided value prop that is not in source option while preserving valu ([0bce911](https://github.com/react-toolbox/react-toolbox/commit/0bce911))
+* Fixes linting errors ([01711e6](https://github.com/react-toolbox/react-toolbox/commit/01711e6))
+* Latest build ([146ffee](https://github.com/react-toolbox/react-toolbox/commit/146ffee))
+* Latest build ([0c53de9](https://github.com/react-toolbox/react-toolbox/commit/0c53de9))
+* Latest build ([b58254d](https://github.com/react-toolbox/react-toolbox/commit/b58254d))
+* Latest build ([50c5aeb](https://github.com/react-toolbox/react-toolbox/commit/50c5aeb))
+* Latest build ([57bb663](https://github.com/react-toolbox/react-toolbox/commit/57bb663))
+* Minor fixes in docs ([25fd5e2](https://github.com/react-toolbox/react-toolbox/commit/25fd5e2))
+* pass theme from layout to children ([491a85c](https://github.com/react-toolbox/react-toolbox/commit/491a85c))
+* Refactor ripple adding multiple option ([71fcd3f](https://github.com/react-toolbox/react-toolbox/commit/71fcd3f))
+* Remove some bind usage in render functions and undo passing down Dropdown theme to Input ([a825208](https://github.com/react-toolbox/react-toolbox/commit/a825208))
+* Update dependencies ([f250f6f](https://github.com/react-toolbox/react-toolbox/commit/f250f6f))
+* Update docs dependencies ([714883c](https://github.com/react-toolbox/react-toolbox/commit/714883c))
+* Update react-css-themr dependency ([692b0be](https://github.com/react-toolbox/react-toolbox/commit/692b0be))
+* feat(dist): add newest build ([62f8b22](https://github.com/react-toolbox/react-toolbox/commit/62f8b22))
+* feat(input): implement maxLength in js rather then using the maxlength prop of the input field ([a8dbad1](https://github.com/react-toolbox/react-toolbox/commit/a8dbad1)), closes [#685](https://github.com/react-toolbox/react-toolbox/issues/685)
+* feat(input): prevent insertion of characters if maxLength is reached ([70823af](https://github.com/react-toolbox/react-toolbox/commit/70823af))
+* feat(input): set the default row amount for multiline inputs to 1 ([056cd6d](https://github.com/react-toolbox/react-toolbox/commit/056cd6d))
+* doc(input): add note about handleChange implementation ([f29e570](https://github.com/react-toolbox/react-toolbox/commit/f29e570))
+* fix(input): always recalculate size ([d1fcc14](https://github.com/react-toolbox/react-toolbox/commit/d1fcc14))
+* fix(input): don't remove the maxLenght attribute from inputs ([6f03fb5](https://github.com/react-toolbox/react-toolbox/commit/6f03fb5))
+* fix(input): only remove resize event listerner if it exists ([75487fb](https://github.com/react-toolbox/react-toolbox/commit/75487fb))
+* fix(multiline input): autoresize after initial render too ([1809d67](https://github.com/react-toolbox/react-toolbox/commit/1809d67))
+* refactor(input): move autoresize to didUpdate ([8559c18](https://github.com/react-toolbox/react-toolbox/commit/8559c18))
+* docs(input): fix multiline example and add maxLength to it ([9a4f553](https://github.com/react-toolbox/react-toolbox/commit/9a4f553))
+
+
+
+<a name="1.0.3"></a>
+## 1.0.3 (2016-07-25)
+
+* 1.0.3 release ([43ea2ef](https://github.com/react-toolbox/react-toolbox/commit/43ea2ef))
+* A lot of JSDoc comments added, even more left ([621e798](https://github.com/react-toolbox/react-toolbox/commit/621e798))
+* Added tests. ([4f67a93](https://github.com/react-toolbox/react-toolbox/commit/4f67a93))
+* Additional fix for raw AppBar component import ([32aedbd](https://github.com/react-toolbox/react-toolbox/commit/32aedbd))
+* All props are now commented ([ae6109c](https://github.com/react-toolbox/react-toolbox/commit/ae6109c))
+* Bugfix calculating Menu position ([e077f8a](https://github.com/react-toolbox/react-toolbox/commit/e077f8a))
+* Date picker now takes max/min date into account on mount/props change. ([e9487e1](https://github.com/react-toolbox/react-toolbox/commit/e9487e1))
+* Document CardTitle's cardTitle theme ([460a378](https://github.com/react-toolbox/react-toolbox/commit/460a378))
+* Document the label theme for the input component ([68ee32f](https://github.com/react-toolbox/react-toolbox/commit/68ee32f))
+* Ensure theme gets passed down to TimePicker child components ([a6f7d64](https://github.com/react-toolbox/react-toolbox/commit/a6f7d64))
+* fix autocomplete activating on react>=15.1 if no direction ([f3b460e](https://github.com/react-toolbox/react-toolbox/commit/f3b460e))
+* Fix multiselectable and unselect rows isues on Table component ([5ccd6da](https://github.com/react-toolbox/react-toolbox/commit/5ccd6da))
+* Fix typo in font-size calculation in mixins ([1639690](https://github.com/react-toolbox/react-toolbox/commit/1639690))
+* Fixes #542 ([c9ac90f](https://github.com/react-toolbox/react-toolbox/commit/c9ac90f)), closes [#542](https://github.com/react-toolbox/react-toolbox/issues/542)
+* Fixes #627 ([2d17b65](https://github.com/react-toolbox/react-toolbox/commit/2d17b65)), closes [#627](https://github.com/react-toolbox/react-toolbox/issues/627)
+* Latest build ([af9e889](https://github.com/react-toolbox/react-toolbox/commit/af9e889))
+* Made general mixins properties depend on $unit value ([fb29425](https://github.com/react-toolbox/react-toolbox/commit/fb29425))
+* Merge with dev ([b226fcd](https://github.com/react-toolbox/react-toolbox/commit/b226fcd))
+* Moved modules to separate files. ([10b69b5](https://github.com/react-toolbox/react-toolbox/commit/10b69b5))
+* Only add Input auto-resize handler to multiline inputs ([9cc56e1](https://github.com/react-toolbox/react-toolbox/commit/9cc56e1))
+* Pass theme down to list item child components for correct classnames ([5a9fec8](https://github.com/react-toolbox/react-toolbox/commit/5a9fec8))
+* Small fixes ([3b70677](https://github.com/react-toolbox/react-toolbox/commit/3b70677))
+* Typings for the project ([661911b](https://github.com/react-toolbox/react-toolbox/commit/661911b))
+* Update install.md ([42feb7f](https://github.com/react-toolbox/react-toolbox/commit/42feb7f))
+* Update README.md ([3a57270](https://github.com/react-toolbox/react-toolbox/commit/3a57270))
+
+
+
+<a name="1.0.2"></a>
+## 1.0.2 (2016-07-10)
+
+* 1.0.2 release ([672429f](https://github.com/react-toolbox/react-toolbox/commit/672429f))
+* Add autoresize to multiline inputs ([5b97b95](https://github.com/react-toolbox/react-toolbox/commit/5b97b95)), closes [#278](https://github.com/react-toolbox/react-toolbox/issues/278)
+* Add passing unknown props and checking of keypress ([d01a576](https://github.com/react-toolbox/react-toolbox/commit/d01a576))
+* better support in typescript: ([69368ae](https://github.com/react-toolbox/react-toolbox/commit/69368ae))
+* Fix Number.isNaN TypeError on IE ([4ea305c](https://github.com/react-toolbox/react-toolbox/commit/4ea305c))
+* Fixes #585 ([49658a3](https://github.com/react-toolbox/react-toolbox/commit/49658a3)), closes [#585](https://github.com/react-toolbox/react-toolbox/issues/585)
+* Fixes #616 ([0513cb7](https://github.com/react-toolbox/react-toolbox/commit/0513cb7)), closes [#616](https://github.com/react-toolbox/react-toolbox/issues/616)
+* Fixes #624 ([2a7e340](https://github.com/react-toolbox/react-toolbox/commit/2a7e340)), closes [#624](https://github.com/react-toolbox/react-toolbox/issues/624)
+* Forward theme prop from Tabs to TabContent ([8c20848](https://github.com/react-toolbox/react-toolbox/commit/8c20848))
+* get rid of declaration duplicates in components/ ([febf8b5](https://github.com/react-toolbox/react-toolbox/commit/febf8b5))
+* Latest build ([f43dac6](https://github.com/react-toolbox/react-toolbox/commit/f43dac6))
+* Latest build ([b55d2b1](https://github.com/react-toolbox/react-toolbox/commit/b55d2b1))
+* missing MENU for some reason in identifiers ([e359805](https://github.com/react-toolbox/react-toolbox/commit/e359805))
+* Pass the theme from ListItem to ListItemLayout ([3b4387f](https://github.com/react-toolbox/react-toolbox/commit/3b4387f)), closes [#580](https://github.com/react-toolbox/react-toolbox/issues/580)
+* Reset overflow when unmounting ([a11fe92](https://github.com/react-toolbox/react-toolbox/commit/a11fe92))
+* Restyle a ternary ([8d65961](https://github.com/react-toolbox/react-toolbox/commit/8d65961))
+* Update datepicker_example_1.txt ([e782b8f](https://github.com/react-toolbox/react-toolbox/commit/e782b8f))
+* Update pickers.js ([49fa53a](https://github.com/react-toolbox/react-toolbox/commit/49fa53a))
+* Update to react 15.2.0 ([3e29844](https://github.com/react-toolbox/react-toolbox/commit/3e29844))
+* chore(dropdown): set value to empty string to prevent uncontrolled errors ([ad52adb](https://github.com/react-toolbox/react-toolbox/commit/ad52adb))
+
+
+
+<a name="1.0.1"></a>
+## 1.0.1 (2016-06-19)
+
+* [Fixes #550] Add PropType checking to Menu's position and update docs ([eec457b](https://github.com/react-toolbox/react-toolbox/commit/eec457b)), closes [#550](https://github.com/react-toolbox/react-toolbox/issues/550)
+* #575: Use classname 'material-icons' if children is a string ([1d725dc](https://github.com/react-toolbox/react-toolbox/commit/1d725dc))
+* 🤖 ([79472ee](https://github.com/react-toolbox/react-toolbox/commit/79472ee))
+* 1.0.1 release ([b44b168](https://github.com/react-toolbox/react-toolbox/commit/b44b168))
+* add 'suggestionMatch' prop to Autocomplete component to determine how suggestions are matched ([afe5bf1](https://github.com/react-toolbox/react-toolbox/commit/afe5bf1))
+* Added ability to export the DatePickerDialog seperately from the DatePicker ([2d5f519](https://github.com/react-toolbox/react-toolbox/commit/2d5f519))
+* Added autoselect first option on enter ([7bffe8a](https://github.com/react-toolbox/react-toolbox/commit/7bffe8a))
+* change .overlay to .backdrop ([7134c64](https://github.com/react-toolbox/react-toolbox/commit/7134c64))
+* clear the timeout on componentWillUnmount ([647dbfb](https://github.com/react-toolbox/react-toolbox/commit/647dbfb))
+* feat(datepicker,timepicker): add support for `name` prop ([c850245](https://github.com/react-toolbox/react-toolbox/commit/c850245))
+* Fix #536 ([5b76a7f](https://github.com/react-toolbox/react-toolbox/commit/5b76a7f)), closes [#536](https://github.com/react-toolbox/react-toolbox/issues/536)
+* Fix #541 ([c19c3e7](https://github.com/react-toolbox/react-toolbox/commit/c19c3e7)), closes [#541](https://github.com/react-toolbox/react-toolbox/issues/541)
+* Fix #542 ([6cd4202](https://github.com/react-toolbox/react-toolbox/commit/6cd4202)), closes [#542](https://github.com/react-toolbox/react-toolbox/issues/542)
+* Fix a few incorrect exports in typings and build with updated Babel ([68926f8](https://github.com/react-toolbox/react-toolbox/commit/68926f8))
+* Fix cpx command to work correctly when coping sass and ts files ([688f6bc](https://github.com/react-toolbox/react-toolbox/commit/688f6bc))
+* Fix MenuItem onclick called without event ([53f4a5e](https://github.com/react-toolbox/react-toolbox/commit/53f4a5e))
+* Fixed bug with add a month to a date when current day is largest than last day of next month ([0d01405](https://github.com/react-toolbox/react-toolbox/commit/0d01405))
+* Latest build 🤖 ([fccf6f5](https://github.com/react-toolbox/react-toolbox/commit/fccf6f5))
+* Made property for both topbottom and leftright padding of day on calendar picker. Fixes IE11 bug ([cb138fc](https://github.com/react-toolbox/react-toolbox/commit/cb138fc))
+* Replace react-toolbox.d.ts with index.d.ts ([235d914](https://github.com/react-toolbox/react-toolbox/commit/235d914))
+* Update libs with new external .d.ts files ([9856ca0](https://github.com/react-toolbox/react-toolbox/commit/9856ca0))
+* Update TypeScript definition section of README.md ([deb3630](https://github.com/react-toolbox/react-toolbox/commit/deb3630))
+* Update typings to external modules (no more 'declare module ...') to get the definitions working aut ([f8c1a3f](https://github.com/react-toolbox/react-toolbox/commit/f8c1a3f))
+* chore(eslint): fix propTypes order ([d06dd78](https://github.com/react-toolbox/react-toolbox/commit/d06dd78))
+* feat(dropdown): add support for name prop ([ec94e5a](https://github.com/react-toolbox/react-toolbox/commit/ec94e5a))
+
+
+
+<a name="1.0.0"></a>
+# 1.0.0 (2016-06-04)
+
+* (feat) set corejs as a dependency ([7ad9594](https://github.com/react-toolbox/react-toolbox/commit/7ad9594)), closes [#382](https://github.com/react-toolbox/react-toolbox/issues/382)
+* 💵 ([dbba425](https://github.com/react-toolbox/react-toolbox/commit/dbba425))
+* 😥 ([fc6b702](https://github.com/react-toolbox/react-toolbox/commit/fc6b702))
+* 1.0.0 release ([bd7b846](https://github.com/react-toolbox/react-toolbox/commit/bd7b846))
+* Add <Chip> export ([d68340e](https://github.com/react-toolbox/react-toolbox/commit/d68340e))
+* Add base class for buttons ([c937673](https://github.com/react-toolbox/react-toolbox/commit/c937673))
+* Add Clock and ClockHours to TimePicker migration ([a2cc04c](https://github.com/react-toolbox/react-toolbox/commit/a2cc04c))
+* Add icon prop to DatePicker ([77c74bf](https://github.com/react-toolbox/react-toolbox/commit/77c74bf))
+* Add lib folder ([7b80621](https://github.com/react-toolbox/react-toolbox/commit/7b80621))
+* Add missing context theme doc for Button ([6d37fe7](https://github.com/react-toolbox/react-toolbox/commit/6d37fe7))
+* Add missing semicolons ([fe390fa](https://github.com/react-toolbox/react-toolbox/commit/fe390fa))
+* Add note about theming in chip readme ([d8a5dc3](https://github.com/react-toolbox/react-toolbox/commit/d8a5dc3))
+* Add onRippleEnded. Fixes #289 ([c612fdf](https://github.com/react-toolbox/react-toolbox/commit/c612fdf)), closes [#289](https://github.com/react-toolbox/react-toolbox/issues/289)
+* Add seperate autocomplete with showSuggestionsWhenValueIsSet to spec ([8f2579e](https://github.com/react-toolbox/react-toolbox/commit/8f2579e))
+* Add showSuggestionsWhenValueIsSet prop, used to control autocomplete filter behaviour when multiple= ([5dfee66](https://github.com/react-toolbox/react-toolbox/commit/5dfee66))
+* Add specific imports for FontIcon ([fbdceed](https://github.com/react-toolbox/react-toolbox/commit/fbdceed))
+* Add themed key for avatar and appbar in readme ([cd83d83](https://github.com/react-toolbox/react-toolbox/commit/cd83d83))
+* Add themr to AppBar ([c7f8d83](https://github.com/react-toolbox/react-toolbox/commit/c7f8d83))
+* added ability to select only one row at the time ([29aece7](https://github.com/react-toolbox/react-toolbox/commit/29aece7))
+* Added media-queries for the max-height of he app-bar on mobile devices (56dp and 48dp) ([3c4c1e6](https://github.com/react-toolbox/react-toolbox/commit/3c4c1e6))
+* All components moved to themr 😱 ([a9e8304](https://github.com/react-toolbox/react-toolbox/commit/a9e8304))
+* Autocomplete element size ([12e572f](https://github.com/react-toolbox/react-toolbox/commit/12e572f))
+* Autoinject Autocomplete, Avatar, Chip and Input ([85e248c](https://github.com/react-toolbox/react-toolbox/commit/85e248c))
+* Autoinject Checkbox theme ([d48e243](https://github.com/react-toolbox/react-toolbox/commit/d48e243))
+* Autoinject Drawer theme ([3827ed3](https://github.com/react-toolbox/react-toolbox/commit/3827ed3))
+* Autoinject Navigation theme ([df88b1d](https://github.com/react-toolbox/react-toolbox/commit/df88b1d))
+* Autoinject style for AppBar ([f10748e](https://github.com/react-toolbox/react-toolbox/commit/f10748e))
+* Autoinject styles for Lists ([592024f](https://github.com/react-toolbox/react-toolbox/commit/592024f))
+* Autoinject styles for ProgressBar ([fdb3644](https://github.com/react-toolbox/react-toolbox/commit/fdb3644))
+* Autoinject theme for Card ([05c6dce](https://github.com/react-toolbox/react-toolbox/commit/05c6dce))
+* Autoinject theme for Dialog, DatePicker and Overlay ([4ff92ac](https://github.com/react-toolbox/react-toolbox/commit/4ff92ac))
+* Autoinject theme for dropdown ([7a241e9](https://github.com/react-toolbox/react-toolbox/commit/7a241e9))
+* Autoinject theme for Layout ([e911a9f](https://github.com/react-toolbox/react-toolbox/commit/e911a9f))
+* Autoinject theme for Link ([731153d](https://github.com/react-toolbox/react-toolbox/commit/731153d))
+* Autoinject theme for Switch, Table and Snackbar ([863c821](https://github.com/react-toolbox/react-toolbox/commit/863c821))
+* Autoinject theme for Tabs ([6afb914](https://github.com/react-toolbox/react-toolbox/commit/6afb914))
+* Autoinject theme for Tooltip ([975fb32](https://github.com/react-toolbox/react-toolbox/commit/975fb32))
+* Autoinject theme to Menu component ([f88ddde](https://github.com/react-toolbox/react-toolbox/commit/f88ddde))
+* Autoinject theme to Radio component ([e1b2b6b](https://github.com/react-toolbox/react-toolbox/commit/e1b2b6b))
+* Autoinject theme to Slider ([d810c81](https://github.com/react-toolbox/react-toolbox/commit/d810c81))
+* Autoinjects for Button and IconButton ([6048bb7](https://github.com/react-toolbox/react-toolbox/commit/6048bb7))
+* Avoid null values when parsing input ([310d683](https://github.com/react-toolbox/react-toolbox/commit/310d683))
+* Avoid uncontrolled inputs ([85978a5](https://github.com/react-toolbox/react-toolbox/commit/85978a5))
+* Better PropType syntax and delete required className api ([73c115f](https://github.com/react-toolbox/react-toolbox/commit/73c115f))
+* Better react imports for lists ([95ea35f](https://github.com/react-toolbox/react-toolbox/commit/95ea35f))
+* Better readme for buttons ([d59f95c](https://github.com/react-toolbox/react-toolbox/commit/d59f95c))
+* Better readmes for autocomplete avatar chip and input ([d04c181](https://github.com/react-toolbox/react-toolbox/commit/d04c181))
+* Change autocomplete filter behaviour when multiple=false ([a4810d8](https://github.com/react-toolbox/react-toolbox/commit/a4810d8))
+* Cleanup timers when Menu component unmounts to prevent calls on undefined objects ([8182348](https://github.com/react-toolbox/react-toolbox/commit/8182348))
+* Clear autocomplete query input when pressing backspace and showing all suggestions ([c706184](https://github.com/react-toolbox/react-toolbox/commit/c706184))
+* Destructuring React for some components ([1386a15](https://github.com/react-toolbox/react-toolbox/commit/1386a15))
+* Exclude JSX navigation div if there are no actions ([aaa1cfa](https://github.com/react-toolbox/react-toolbox/commit/aaa1cfa))
+* Finish autoinjects ([c356a2b](https://github.com/react-toolbox/react-toolbox/commit/c356a2b))
+* Fix #454: Chip component unable to display nicely on small screen ([60b8e55](https://github.com/react-toolbox/react-toolbox/commit/60b8e55)), closes [#454](https://github.com/react-toolbox/react-toolbox/issues/454)
+* Fix DatePickerDialog to correctly display the previously selected date ([39ad60a](https://github.com/react-toolbox/react-toolbox/commit/39ad60a))
+* Fix linter errors ([33ff491](https://github.com/react-toolbox/react-toolbox/commit/33ff491))
+* fix receive props for Autocomplete component ([19566dd](https://github.com/react-toolbox/react-toolbox/commit/19566dd))
+* Fix tests ([e24152c](https://github.com/react-toolbox/react-toolbox/commit/e24152c))
+* Fix the value of month in datepicker example ([d839515](https://github.com/react-toolbox/react-toolbox/commit/d839515))
+* Fix typo ([c1093b2](https://github.com/react-toolbox/react-toolbox/commit/c1093b2))
+* Fix typo in AppBar readme ([34952ce](https://github.com/react-toolbox/react-toolbox/commit/34952ce))
+* Fix typos in Layout ([78d7c92](https://github.com/react-toolbox/react-toolbox/commit/78d7c92))
+* Fixed sass-lint to 1.5.1 to avoid linting errors ([41189e2](https://github.com/react-toolbox/react-toolbox/commit/41189e2))
+* Fixed. wrong check empty actions ([4d3e2e0](https://github.com/react-toolbox/react-toolbox/commit/4d3e2e0))
+* Fixes in Layout ([75cd934](https://github.com/react-toolbox/react-toolbox/commit/75cd934))
+* Fixes typo in ListItemLayout ([a4de34e](https://github.com/react-toolbox/react-toolbox/commit/a4de34e))
+* Full extension imports in animations ([d5834e0](https://github.com/react-toolbox/react-toolbox/commit/d5834e0))
+* Fullname imports for util files ([767d16b](https://github.com/react-toolbox/react-toolbox/commit/767d16b))
+* Hotfix for incorrect ternary statement in DatePicker ([d7b820a](https://github.com/react-toolbox/react-toolbox/commit/d7b820a))
+* Inject dependencies for Form component ([27962e8](https://github.com/react-toolbox/react-toolbox/commit/27962e8))
+* Latest build ([fbca206](https://github.com/react-toolbox/react-toolbox/commit/fbca206))
+* Latest build ([a1f02d2](https://github.com/react-toolbox/react-toolbox/commit/a1f02d2))
+* Make tests pass ([6329c5d](https://github.com/react-toolbox/react-toolbox/commit/6329c5d))
+* Media queries for dialogs to set wider widths for smaller screens ([ec84e6c](https://github.com/react-toolbox/react-toolbox/commit/ec84e6c))
+* Migrate autocomplete ([92b170f](https://github.com/react-toolbox/react-toolbox/commit/92b170f))
+* Migrate Avatar to themr ([1974336](https://github.com/react-toolbox/react-toolbox/commit/1974336))
+* Migrate button to themr ([29f89fe](https://github.com/react-toolbox/react-toolbox/commit/29f89fe))
+* Migrate Card + refactoring + add defineTheme 🎨 ([bc26c3f](https://github.com/react-toolbox/react-toolbox/commit/bc26c3f))
+* Migrate checkbox to themr ([40be146](https://github.com/react-toolbox/react-toolbox/commit/40be146))
+* Migrate Chip to themr ([b2be1cb](https://github.com/react-toolbox/react-toolbox/commit/b2be1cb))
+* Migrate DatePicker to themr ([709f4b1](https://github.com/react-toolbox/react-toolbox/commit/709f4b1))
+* Migrate dialog to themr ([2fb2de8](https://github.com/react-toolbox/react-toolbox/commit/2fb2de8))
+* Migrate docs to new theme syntax ([5056a9d](https://github.com/react-toolbox/react-toolbox/commit/5056a9d))
+* Migrate Drawer and Overlay to themr ([f6d2d3f](https://github.com/react-toolbox/react-toolbox/commit/f6d2d3f))
+* Migrate Dropdown to themr ([38e2690](https://github.com/react-toolbox/react-toolbox/commit/38e2690))
+* Migrate IconMenu to themr ([5f626e2](https://github.com/react-toolbox/react-toolbox/commit/5f626e2))
+* Migrate input to themr ([243644c](https://github.com/react-toolbox/react-toolbox/commit/243644c))
+* Migrate Layout to themr ([58f8d61](https://github.com/react-toolbox/react-toolbox/commit/58f8d61))
+* Migrate Link to themr ([36869cb](https://github.com/react-toolbox/react-toolbox/commit/36869cb))
+* Migrate List to themr ([c39caf6](https://github.com/react-toolbox/react-toolbox/commit/c39caf6))
+* Migrate Menu to themr ([140cc2c](https://github.com/react-toolbox/react-toolbox/commit/140cc2c))
+* Migrate MenuDivider to themr ([54dca2d](https://github.com/react-toolbox/react-toolbox/commit/54dca2d))
+* Migrate MenuItem to themr ([e20bae5](https://github.com/react-toolbox/react-toolbox/commit/e20bae5))
+* Migrate Navigation to themr ([e5ef5e2](https://github.com/react-toolbox/react-toolbox/commit/e5ef5e2))
+* Migrate ProgressBar to themr ([38cb1b0](https://github.com/react-toolbox/react-toolbox/commit/38cb1b0))
+* Migrate Radio to themr ([306e397](https://github.com/react-toolbox/react-toolbox/commit/306e397))
+* Migrate Ripple to themr ([f4e74e9](https://github.com/react-toolbox/react-toolbox/commit/f4e74e9))
+* Migrate snackbar to themr ([8705c57](https://github.com/react-toolbox/react-toolbox/commit/8705c57))
+* Migrate switch to themr ([d451cf0](https://github.com/react-toolbox/react-toolbox/commit/d451cf0))
+* Migrate Table component to themr ([b75e757](https://github.com/react-toolbox/react-toolbox/commit/b75e757))
+* Migrate the Slider to themr ([de89f9a](https://github.com/react-toolbox/react-toolbox/commit/de89f9a))
+* Migrate TimePicker to themr ([6f2d17d](https://github.com/react-toolbox/react-toolbox/commit/6f2d17d))
+* mixins is already imported in base, hence removed the redundant import | Galeel ([85048a3](https://github.com/react-toolbox/react-toolbox/commit/85048a3))
+* Modify Button's display to be inline-flex ([63f760b](https://github.com/react-toolbox/react-toolbox/commit/63f760b))
+* Modify ripple theme interface to avoid collisions ([4e28d4a](https://github.com/react-toolbox/react-toolbox/commit/4e28d4a))
+* Move body locker from Portal to Overlay ([8a7ddc7](https://github.com/react-toolbox/react-toolbox/commit/8a7ddc7))
+* Move some mixins ([96599d3](https://github.com/react-toolbox/react-toolbox/commit/96599d3))
+* Move tabs to themr ([d6bc5f5](https://github.com/react-toolbox/react-toolbox/commit/d6bc5f5))
+* New README ([27a4420](https://github.com/react-toolbox/react-toolbox/commit/27a4420))
+* Plain SASS imports 🎨 ([419f16f](https://github.com/react-toolbox/react-toolbox/commit/419f16f))
+* Reduce z-index for spec page ([91bd684](https://github.com/react-toolbox/react-toolbox/commit/91bd684))
+* Refactor autocomplete suggestions method to make it more readable ([cb4b736](https://github.com/react-toolbox/react-toolbox/commit/cb4b736))
+* Remove conditional import since SASS does not support them. ([facf4a3](https://github.com/react-toolbox/react-toolbox/commit/facf4a3))
+* Remove defineTheme ([6ba69be](https://github.com/react-toolbox/react-toolbox/commit/6ba69be))
+* Remove linter warning ([4f85f4e](https://github.com/react-toolbox/react-toolbox/commit/4f85f4e))
+* Remove no longer supported method for dropdown ([38827df](https://github.com/react-toolbox/react-toolbox/commit/38827df))
+* Remove style dependency in cards ([9593e03](https://github.com/react-toolbox/react-toolbox/commit/9593e03))
+* Remove style for form ([fee4a19](https://github.com/react-toolbox/react-toolbox/commit/fee4a19))
+* Simpler FontIcon component ([3ba5c11](https://github.com/react-toolbox/react-toolbox/commit/3ba5c11))
+* Small typos in README ([cea8111](https://github.com/react-toolbox/react-toolbox/commit/cea8111))
+* Update DatePicker to handle being passed a value of an empty stirng ([62e5322](https://github.com/react-toolbox/react-toolbox/commit/62e5322))
+* Update dependencies ([6a0d861](https://github.com/react-toolbox/react-toolbox/commit/6a0d861))
+* Update dependencies ([b84a07f](https://github.com/react-toolbox/react-toolbox/commit/b84a07f))
+* Update docs ([115e839](https://github.com/react-toolbox/react-toolbox/commit/115e839))
+* Update global index ([802bd64](https://github.com/react-toolbox/react-toolbox/commit/802bd64))
+* Update node version ([42125fc](https://github.com/react-toolbox/react-toolbox/commit/42125fc))
+* Update readme for menu ([f7ae5a8](https://github.com/react-toolbox/react-toolbox/commit/f7ae5a8))
+* Update Typescript definition to 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory defini ([b8feb9a](https://github.com/react-toolbox/react-toolbox/commit/b8feb9a))
+* Use alternative to scrollX where not available (IE) ([f39dfb4](https://github.com/react-toolbox/react-toolbox/commit/f39dfb4))
+* Y for X ([f017610](https://github.com/react-toolbox/react-toolbox/commit/f017610))
+* Bugfix: delete style in form ([22819ca](https://github.com/react-toolbox/react-toolbox/commit/22819ca))
+* Bugfix: Set empty string in time picker if no time is given ([d2cf4e3](https://github.com/react-toolbox/react-toolbox/commit/d2cf4e3))
+
+
+
+<a name="0.16.2"></a>
+## 0.16.2 (2016-04-10)
+
+* 0.16.2 release ([473d1fa](https://github.com/react-toolbox/react-toolbox/commit/473d1fa))
+* Indentify Avatar by constructur in Chip ([6665753](https://github.com/react-toolbox/react-toolbox/commit/6665753))
+
+
+
+<a name="0.16.1"></a>
+## 0.16.1 (2016-04-10)
+
+* 0.16.1 release ([eb483dd](https://github.com/react-toolbox/react-toolbox/commit/eb483dd))
+* Add Chip to component index ([0cb2205](https://github.com/react-toolbox/react-toolbox/commit/0cb2205))
+* Include Chip in docs ([84130d4](https://github.com/react-toolbox/react-toolbox/commit/84130d4))
+* Bugfix: use hash history ([cb80113](https://github.com/react-toolbox/react-toolbox/commit/cb80113))
+
+
+
+<a name="0.16.0"></a>
+# 0.16.0 (2016-04-10)
+
+* 0.16.0 release ([8e57104](https://github.com/react-toolbox/react-toolbox/commit/8e57104))
+* Adapt pickers to calculate position with scroll ([0d1265e](https://github.com/react-toolbox/react-toolbox/commit/0d1265e))
+* Add inputClassName prop to DatePicker and TimePicker ([47fba11](https://github.com/react-toolbox/react-toolbox/commit/47fba11))
+* Fix #407 ([48e5c48](https://github.com/react-toolbox/react-toolbox/commit/48e5c48)), closes [#407](https://github.com/react-toolbox/react-toolbox/issues/407)
+* Fix #425 ([ee4cc54](https://github.com/react-toolbox/react-toolbox/commit/ee4cc54)), closes [#425](https://github.com/react-toolbox/react-toolbox/issues/425)
+* Fix #442 ([7d73fb4](https://github.com/react-toolbox/react-toolbox/commit/7d73fb4)), closes [#442](https://github.com/react-toolbox/react-toolbox/issues/442)
+* Fix checking if key exists in Autocomplete ([e45b0cb](https://github.com/react-toolbox/react-toolbox/commit/e45b0cb))
+* Fix linter error for layouts ([b0437cd](https://github.com/react-toolbox/react-toolbox/commit/b0437cd))
+* Get rid of jsx extensions 🔮 ([0cb8d8b](https://github.com/react-toolbox/react-toolbox/commit/0cb8d8b))
+* Lint spec files ([2039a12](https://github.com/react-toolbox/react-toolbox/commit/2039a12))
+* Now we are Audiense 💎 ([410cd6b](https://github.com/react-toolbox/react-toolbox/commit/410cd6b))
+* Reduce list unneeded markup ([f6c8304](https://github.com/react-toolbox/react-toolbox/commit/f6c8304))
+* Refactor Overlay into two components and make activable components render only when needed ([958cbb9](https://github.com/react-toolbox/react-toolbox/commit/958cbb9))
+* Remove App from components index ([7e2d4de](https://github.com/react-toolbox/react-toolbox/commit/7e2d4de))
+* Remove unneeded App ([baf4414](https://github.com/react-toolbox/react-toolbox/commit/baf4414))
+* Update dependencies, linter and rules ([516a0a3](https://github.com/react-toolbox/react-toolbox/commit/516a0a3))
+* Update documentation dependencies ([a6e162e](https://github.com/react-toolbox/react-toolbox/commit/a6e162e))
+* Update linting ([c3ef6bd](https://github.com/react-toolbox/react-toolbox/commit/c3ef6bd))
+* updates package.json to work with react 15 ([3812686](https://github.com/react-toolbox/react-toolbox/commit/3812686))
+* Use sass lint ([beeb6ab](https://github.com/react-toolbox/react-toolbox/commit/beeb6ab))
+* Bugfix: style for svg icons in button ([3a20676](https://github.com/react-toolbox/react-toolbox/commit/3a20676))
+
+
+
+<a name="0.15.1"></a>
+## 0.15.1 (2016-04-07)
+
+* 0.14.2 release ([3ee2e94](https://github.com/react-toolbox/react-toolbox/commit/3ee2e94))
+* 0.15.0 release ([e3a805b](https://github.com/react-toolbox/react-toolbox/commit/e3a805b))
+* 0.15.1 release ([436d4b4](https://github.com/react-toolbox/react-toolbox/commit/436d4b4))
+* Add allowBlank to Dropdown ([542b58a](https://github.com/react-toolbox/react-toolbox/commit/542b58a))
+* Add chip component ([821c3e1](https://github.com/react-toolbox/react-toolbox/commit/821c3e1))
+* Add onDeleteClick property ([08675d6](https://github.com/react-toolbox/react-toolbox/commit/08675d6))
+* Add prop to autocomplete to place labels below or above input ([d41a77c](https://github.com/react-toolbox/react-toolbox/commit/d41a77c))
+* Added !default to all config values as per #424 ([37f8f4c](https://github.com/react-toolbox/react-toolbox/commit/37f8f4c))
+* Added onMouseUp and onMouseLeave props to Icon Button to make it similar to Button Component. ([7b7b042](https://github.com/react-toolbox/react-toolbox/commit/7b7b042))
+* Aligned Menu Readme properties ([324cce3](https://github.com/react-toolbox/react-toolbox/commit/324cce3))
+* Change snackbar to fix issue where lingering timeouts would effect new activations ([6470b44](https://github.com/react-toolbox/react-toolbox/commit/6470b44))
+* Changed Icon Prop type to String or Element instead of Any. Also fixed an inappropriate example for  ([ccf88af](https://github.com/react-toolbox/react-toolbox/commit/ccf88af))
+* Chip - Replace fonticon with inline SVG, tweak size and position ([703ed27](https://github.com/react-toolbox/react-toolbox/commit/703ed27))
+* Chip - tweak stroke width ([cbeef76](https://github.com/react-toolbox/react-toolbox/commit/cbeef76))
+* Clean up chip styling, remove hover and pressed styles ([f96d00e](https://github.com/react-toolbox/react-toolbox/commit/f96d00e))
+* Cleaned up Card documentation. ([6cf753b](https://github.com/react-toolbox/react-toolbox/commit/6cf753b))
+* Don't show actions container in dialog if no actions exist ([ed1f3c6](https://github.com/react-toolbox/react-toolbox/commit/ed1f3c6))
+* Fix style changes from TravisCI build ([d5eebd9](https://github.com/react-toolbox/react-toolbox/commit/d5eebd9))
+* Fixed Dropdown readme example and updated properties. ([fe9312a](https://github.com/react-toolbox/react-toolbox/commit/fe9312a))
+* Fixed grammar mistake on component page. Updated Sidebar's CSS ([233bb67](https://github.com/react-toolbox/react-toolbox/commit/233bb67))
+* Fixed Object Single Selection Bug ([9d2fe8f](https://github.com/react-toolbox/react-toolbox/commit/9d2fe8f))
+* Fixed spacing for list readme ([1a9fe24](https://github.com/react-toolbox/react-toolbox/commit/1a9fe24))
+* Fixed Spacing Issues for items in last commit. ([a841408](https://github.com/react-toolbox/react-toolbox/commit/a841408))
+* Fixed spacing on drawer readme ([3683358](https://github.com/react-toolbox/react-toolbox/commit/3683358))
+* have Dialog.jsx import from './style' and not './style.scss' ([b26e1f6](https://github.com/react-toolbox/react-toolbox/commit/b26e1f6))
+* keepachangelog.com :) ([f7ef77b](https://github.com/react-toolbox/react-toolbox/commit/f7ef77b))
+* only render content of current tab + linting, docs, test ([b6b51a4](https://github.com/react-toolbox/react-toolbox/commit/b6b51a4))
+* Proper property sorting ([5db11d3](https://github.com/react-toolbox/react-toolbox/commit/5db11d3))
+* Revert input error color ([27e59df](https://github.com/react-toolbox/react-toolbox/commit/27e59df))
+* Sorted Appbar's properties. Updated Autocomplete's doc and example ([8494668](https://github.com/react-toolbox/react-toolbox/commit/8494668))
+* Sorted Date Picker Properties ([4917bf7](https://github.com/react-toolbox/react-toolbox/commit/4917bf7))
+* Update autocomplete component to use chips ([620b494](https://github.com/react-toolbox/react-toolbox/commit/620b494))
+* Update chip children prop type, readme ([1a4d363](https://github.com/react-toolbox/react-toolbox/commit/1a4d363))
+* Updated Avatar readme and example ([d3fcaef](https://github.com/react-toolbox/react-toolbox/commit/d3fcaef))
+* Updated Babel Standalone to latest version ([16fac7a](https://github.com/react-toolbox/react-toolbox/commit/16fac7a))
+* Updated Button and Checkbox doc ([b5f2123](https://github.com/react-toolbox/react-toolbox/commit/b5f2123))
+* Updated Dialog Example and sorted properties. ([6b81440](https://github.com/react-toolbox/react-toolbox/commit/6b81440))
+* Updated docs for slider, snacker, switch, table, tabs and time picker ([3649ab1](https://github.com/react-toolbox/react-toolbox/commit/3649ab1))
+* Updated Font Icon Examples. Also updated value type ([21dc421](https://github.com/react-toolbox/react-toolbox/commit/21dc421))
+* Updated Input doc and Example ([94280ce](https://github.com/react-toolbox/react-toolbox/commit/94280ce))
+* Updated Link readme and example to include active element. Also changed icon type from string to any ([588ff39](https://github.com/react-toolbox/react-toolbox/commit/588ff39))
+* Updated List Documentation and example to include list divider ([e7a2622](https://github.com/react-toolbox/react-toolbox/commit/e7a2622))
+* Updated Menu readme to include new properties and changed import statement to match other components ([2f11387](https://github.com/react-toolbox/react-toolbox/commit/2f11387))
+* Updated Navigation Readme. Aligned properties and added quotes around horizontal and vertical for ty ([c57b751](https://github.com/react-toolbox/react-toolbox/commit/c57b751))
+* Updated Progress, Radio and Tooltip Readme. Aligned properties for ripple. ([86e1dca](https://github.com/react-toolbox/react-toolbox/commit/86e1dca))
+* Use children instead of special label and avatar props in Chip component ([dff8a07](https://github.com/react-toolbox/react-toolbox/commit/dff8a07))
+* docs(media): keep navigation for wider screens ([125cac1](https://github.com/react-toolbox/react-toolbox/commit/125cac1))
+
+
+
+<a name="0.15.0"></a>
+# 0.15.0 (2016-03-24)
+
+* (feat) renamed to onEscKeyDown and fixed linting errors ([db752d2](https://github.com/react-toolbox/react-toolbox/commit/db752d2))
+* [Table] enhancements ([c5b19c2](https://github.com/react-toolbox/react-toolbox/commit/c5b19c2))
+* 😕 ([b45c8f7](https://github.com/react-toolbox/react-toolbox/commit/b45c8f7))
+* 0.14.1 release ([d8a58bd](https://github.com/react-toolbox/react-toolbox/commit/d8a58bd))
+* 0.14.2 release ([f3ffd85](https://github.com/react-toolbox/react-toolbox/commit/f3ffd85))
+* 0.15.0 release ([b182c09](https://github.com/react-toolbox/react-toolbox/commit/b182c09))
+* add activeClassName to tab component ([52682c5](https://github.com/react-toolbox/react-toolbox/commit/52682c5))
+* Add default statements to color variables ([acde309](https://github.com/react-toolbox/react-toolbox/commit/acde309))
+* Added a few more events to Dialog's overlay ([542f54d](https://github.com/react-toolbox/react-toolbox/commit/542f54d))
+* added data-react-toolbox attribute to FontIcon ([a82595b](https://github.com/react-toolbox/react-toolbox/commit/a82595b))
+* Added hint attribute to input field. ([d2202e1](https://github.com/react-toolbox/react-toolbox/commit/d2202e1))
+* allow app-bar height override  ([7ad9189](https://github.com/react-toolbox/react-toolbox/commit/7ad9189))
+* Allow disabling animated bottom border on tabs ([a2543d4](https://github.com/react-toolbox/react-toolbox/commit/a2543d4))
+* Allowing array of pairs key-value as input for autocomplete ([96e868b](https://github.com/react-toolbox/react-toolbox/commit/96e868b))
+* allows to close dialog (and all overlays) when pressing esc ([04c7b04](https://github.com/react-toolbox/react-toolbox/commit/04c7b04))
+* allows to format the date displayed on datepickers input ([16ed926](https://github.com/react-toolbox/react-toolbox/commit/16ed926))
+* Change error PropType to node on Input ([0227b0d](https://github.com/react-toolbox/react-toolbox/commit/0227b0d))
+* Changed HTML element from label to span ([4dcb2d0](https://github.com/react-toolbox/react-toolbox/commit/4dcb2d0))
+* Changed the set state key to countries instead of value ([f81056f](https://github.com/react-toolbox/react-toolbox/commit/f81056f))
+* cleanup listeners on document before unmount ([68b23d2](https://github.com/react-toolbox/react-toolbox/commit/68b23d2))
+* Clock SSR fix ([6173e9b](https://github.com/react-toolbox/react-toolbox/commit/6173e9b))
+* Correctly handle zero as dropdown value ([c812d4c](https://github.com/react-toolbox/react-toolbox/commit/c812d4c))
+* Created required behaviour for input ([cc32e5a](https://github.com/react-toolbox/react-toolbox/commit/cc32e5a))
+* DatePicker autoOk prop ([240864f](https://github.com/react-toolbox/react-toolbox/commit/240864f))
+* dropdown accepts string or number as value ([29edd20](https://github.com/react-toolbox/react-toolbox/commit/29edd20))
+* Dropdown doesn't close on click outside fix ([bc6ae1f](https://github.com/react-toolbox/react-toolbox/commit/bc6ae1f))
+* Dropdown doesn't close on click outside fix ([c1f2b83](https://github.com/react-toolbox/react-toolbox/commit/c1f2b83))
+* Fix #248 ([e263499](https://github.com/react-toolbox/react-toolbox/commit/e263499)), closes [#248](https://github.com/react-toolbox/react-toolbox/issues/248)
+* Fix #290 ([f1a098d](https://github.com/react-toolbox/react-toolbox/commit/f1a098d)), closes [#290](https://github.com/react-toolbox/react-toolbox/issues/290)
+* Fix #302 ([a64d5e4](https://github.com/react-toolbox/react-toolbox/commit/a64d5e4)), closes [#302](https://github.com/react-toolbox/react-toolbox/issues/302)
+* Fix #316 ([852c3ea](https://github.com/react-toolbox/react-toolbox/commit/852c3ea)), closes [#316](https://github.com/react-toolbox/react-toolbox/issues/316)
+* Fix #356 ([993afbc](https://github.com/react-toolbox/react-toolbox/commit/993afbc)), closes [#356](https://github.com/react-toolbox/react-toolbox/issues/356)
+* Fix #357 ([22b46d9](https://github.com/react-toolbox/react-toolbox/commit/22b46d9)), closes [#357](https://github.com/react-toolbox/react-toolbox/issues/357)
+* Fix #361 cancel timer when tabs component unmounts ([380da26](https://github.com/react-toolbox/react-toolbox/commit/380da26)), closes [#361](https://github.com/react-toolbox/react-toolbox/issues/361)
+* Fix label for number inputs with 0 as value ([5029b0d](https://github.com/react-toolbox/react-toolbox/commit/5029b0d))
+* fix lint issue by ammending rule ([e6c5be2](https://github.com/react-toolbox/react-toolbox/commit/e6c5be2))
+* fixed linting errors on utils/time.js ([756a3a9](https://github.com/react-toolbox/react-toolbox/commit/756a3a9))
+* Fixes #304 ([ddeb44f](https://github.com/react-toolbox/react-toolbox/commit/ddeb44f)), closes [#304](https://github.com/react-toolbox/react-toolbox/issues/304)
+* fixes #369 ([0b16eef](https://github.com/react-toolbox/react-toolbox/commit/0b16eef)), closes [#369](https://github.com/react-toolbox/react-toolbox/issues/369)
+* fixes #389 ([1aa67d5](https://github.com/react-toolbox/react-toolbox/commit/1aa67d5)), closes [#389](https://github.com/react-toolbox/react-toolbox/issues/389)
+* Fixes small typos in AutoComplete documentation ([01e2eab](https://github.com/react-toolbox/react-toolbox/commit/01e2eab))
+* Forgot to add required attribute to actual input element ([19249d8](https://github.com/react-toolbox/react-toolbox/commit/19249d8))
+* if list item action defined onClick we stop click and mouse down ([14cbf9c](https://github.com/react-toolbox/react-toolbox/commit/14cbf9c))
+* Introduce close() method ([9dcd1d6](https://github.com/react-toolbox/react-toolbox/commit/9dcd1d6))
+* list item can be customized by passing in children commponents ([a2745c8](https://github.com/react-toolbox/react-toolbox/commit/a2745c8))
+* Make drawer compliant with material design guidelines. ([6e586a9](https://github.com/react-toolbox/react-toolbox/commit/6e586a9)), closes [#283](https://github.com/react-toolbox/react-toolbox/issues/283)
+* Modified z-index to include default ([953c209](https://github.com/react-toolbox/react-toolbox/commit/953c209))
+* More beauty in the dialog spec ([4fba76e](https://github.com/react-toolbox/react-toolbox/commit/4fba76e))
+* nextState in componentWillUpdate of Menu.js fix ([7adfc59](https://github.com/react-toolbox/react-toolbox/commit/7adfc59))
+* nextState in componentWillUpdate of Menu.js fix ([c2283c0](https://github.com/react-toolbox/react-toolbox/commit/c2283c0))
+* pass through props in Ripple ([0deee32](https://github.com/react-toolbox/react-toolbox/commit/0deee32))
+* removed commented out code ([32ff655](https://github.com/react-toolbox/react-toolbox/commit/32ff655))
+* Removed Error styling when input field is in focus ([c2374ad](https://github.com/react-toolbox/react-toolbox/commit/c2374ad))
+* renderInput() method never used ([ef0fe11](https://github.com/react-toolbox/react-toolbox/commit/ef0fe11))
+* renderInput() method never used ([f4541ee](https://github.com/react-toolbox/react-toolbox/commit/f4541ee))
+* Renders Selected Item when multiple=false ([bef1adf](https://github.com/react-toolbox/react-toolbox/commit/bef1adf))
+* replace data-role with data-react-toolbox ([43bfd3f](https://github.com/react-toolbox/react-toolbox/commit/43bfd3f))
+* Set background to transparent by default ([dce92d3](https://github.com/react-toolbox/react-toolbox/commit/dce92d3))
+* Some minor typo fixes for the README ([191201e](https://github.com/react-toolbox/react-toolbox/commit/191201e))
+* Support `0` value as being numeric ([c2c0ac7](https://github.com/react-toolbox/react-toolbox/commit/c2c0ac7))
+* this is correct ([1d5970f](https://github.com/react-toolbox/react-toolbox/commit/1d5970f))
+* type -> getType as `type` seems to be a keyword in node 5.1 ([7b2347a](https://github.com/react-toolbox/react-toolbox/commit/7b2347a))
+* Typos and grammar corrections for install document ([f77a806](https://github.com/react-toolbox/react-toolbox/commit/f77a806))
+* update Card.jsx ([cacc7d9](https://github.com/react-toolbox/react-toolbox/commit/cacc7d9))
+* Update Dialog's documentation. ([3a3dea6](https://github.com/react-toolbox/react-toolbox/commit/3a3dea6))
+* update List.jsx ([b898d7f](https://github.com/react-toolbox/react-toolbox/commit/b898d7f))
+* update Menu.jsx ([542528d](https://github.com/react-toolbox/react-toolbox/commit/542528d))
+* update RadioButton.jsx ([dba62cf](https://github.com/react-toolbox/react-toolbox/commit/dba62cf))
+* update RadioGroup.jsx ([692ed24](https://github.com/react-toolbox/react-toolbox/commit/692ed24))
+* update readme for tabs ([1cda333](https://github.com/react-toolbox/react-toolbox/commit/1cda333))
+* update Switch.jsx ([413ddb7](https://github.com/react-toolbox/react-toolbox/commit/413ddb7))
+* update Tab.jsx ([52f324d](https://github.com/react-toolbox/react-toolbox/commit/52f324d))
+* update Tabs.jsx ([99b4fca](https://github.com/react-toolbox/react-toolbox/commit/99b4fca))
+* Update to node 4.3.0 ([a609753](https://github.com/react-toolbox/react-toolbox/commit/a609753))
+* Update TS definition file to work properly with TypeScript >= 1.8, README blurb ([ac6834f](https://github.com/react-toolbox/react-toolbox/commit/ac6834f))
+* updated list item spec with button ([ccd4bbb](https://github.com/react-toolbox/react-toolbox/commit/ccd4bbb))
+* Use consistent data attributes ([c0e0b56](https://github.com/react-toolbox/react-toolbox/commit/c0e0b56))
+* Use falsy when cloning menuitems to check if element should be treated ([1075816](https://github.com/react-toolbox/react-toolbox/commit/1075816))
+* When the font-size (or $unit) is small, there's no difference between selected and unselected item ([a78ec39](https://github.com/react-toolbox/react-toolbox/commit/a78ec39))
+* Workaround race condition between menu item layout and container size assessment. ([b2538d8](https://github.com/react-toolbox/react-toolbox/commit/b2538d8))
+* feat(ListItem): add className prop support ([6670e79](https://github.com/react-toolbox/react-toolbox/commit/6670e79))
+
+
+
+<a name="0.14.1"></a>
+## 0.14.1 (2016-01-26)
+
+* 0.14.1 release ([b736a5f](https://github.com/react-toolbox/react-toolbox/commit/b736a5f))
+* Add babel standalone for the playground live editor ([0037210](https://github.com/react-toolbox/react-toolbox/commit/0037210))
+* Add missing semicolons ([6eb5838](https://github.com/react-toolbox/react-toolbox/commit/6eb5838))
+* Add TypeScript definition file and typings entry to package.json, as well as a blurb in README.md ([d7b6c6b](https://github.com/react-toolbox/react-toolbox/commit/d7b6c6b))
+* Allow Link to render Tooltips via children prop ([9da2378](https://github.com/react-toolbox/react-toolbox/commit/9da2378))
+* allow passing components to card title and subtitle ([08c0907](https://github.com/react-toolbox/react-toolbox/commit/08c0907))
+* Bebel 6 Integrated, Stage-0 added, React updated ([f6047f8](https://github.com/react-toolbox/react-toolbox/commit/f6047f8))
+* close dropdown when click event is triggered outside the component ([21a6860](https://github.com/react-toolbox/react-toolbox/commit/21a6860))
+* Enable Element to behave as Icon ([998b5a4](https://github.com/react-toolbox/react-toolbox/commit/998b5a4))
+* Enabling passing components as icons in all the components ([80b5b7a](https://github.com/react-toolbox/react-toolbox/commit/80b5b7a))
+* Everything but toolbox-loader has been updated ([bbce96c](https://github.com/react-toolbox/react-toolbox/commit/bbce96c))
+* export raw components ([678bd81](https://github.com/react-toolbox/react-toolbox/commit/678bd81))
+* Fix state changes in slider spec example ([30c277b](https://github.com/react-toolbox/react-toolbox/commit/30c277b))
+* Fixe autocomplete ([3c6b7af](https://github.com/react-toolbox/react-toolbox/commit/3c6b7af))
+* fixed button test ([485be5e](https://github.com/react-toolbox/react-toolbox/commit/485be5e))
+* Fixed linting issues ([7c27b09](https://github.com/react-toolbox/react-toolbox/commit/7c27b09))
+* Fixes #270 ([f16934c](https://github.com/react-toolbox/react-toolbox/commit/f16934c)), closes [#270](https://github.com/react-toolbox/react-toolbox/issues/270)
+* Fixes for autocomplete and tests ([f0d5f19](https://github.com/react-toolbox/react-toolbox/commit/f0d5f19))
+* fixing a typo for the List component ([3b3beaf](https://github.com/react-toolbox/react-toolbox/commit/3b3beaf))
+* propagate events in Button ([8dad57e](https://github.com/react-toolbox/react-toolbox/commit/8dad57e))
+* propagate events in Dropdown ([9ce68ae](https://github.com/react-toolbox/react-toolbox/commit/9ce68ae))
+* propagate events in IconMenu ([d92350f](https://github.com/react-toolbox/react-toolbox/commit/d92350f))
+* propagate events in Tab ([0a94499](https://github.com/react-toolbox/react-toolbox/commit/0a94499))
+* propagate events in Tooltip ([a11d152](https://github.com/react-toolbox/react-toolbox/commit/a11d152))
+* removed unused checkbox validations ([39c7c61](https://github.com/react-toolbox/react-toolbox/commit/39c7c61))
+* Removing event from dropdown when not active anymore ([160fb47](https://github.com/react-toolbox/react-toolbox/commit/160fb47))
+* Replace transition-property to transition for Issue#230 ([25a9e65](https://github.com/react-toolbox/react-toolbox/commit/25a9e65))
+* retracted unnecessary addition ([20e41fb](https://github.com/react-toolbox/react-toolbox/commit/20e41fb))
+* update avatar example to use `image` instead of `img` property ([0e60fd2](https://github.com/react-toolbox/react-toolbox/commit/0e60fd2))
+* Upgrading the rest of the dependencies ([c044a22](https://github.com/react-toolbox/react-toolbox/commit/c044a22))
+
+
+
+<a name="0.14.0"></a>
+# 0.14.0 (2015-12-20)
+
+* 0.14.0 release ([7949129](https://github.com/react-toolbox/react-toolbox/commit/7949129))
+* Add animated auto transition from hours to minutes in TimePicker ([211d542](https://github.com/react-toolbox/react-toolbox/commit/211d542))
+* add classnames dependecies, fixes #209 ([3e7d75c](https://github.com/react-toolbox/react-toolbox/commit/3e7d75c)), closes [#209](https://github.com/react-toolbox/react-toolbox/issues/209)
+* Add error field to date picker ([3479f5b](https://github.com/react-toolbox/react-toolbox/commit/3479f5b))
+* Add error field to timepicker ([20d6787](https://github.com/react-toolbox/react-toolbox/commit/20d6787))
+* Add maxLength attribute to input component ([ffa5044](https://github.com/react-toolbox/react-toolbox/commit/ffa5044))
+* Add missing variable for chevron ([027fc12](https://github.com/react-toolbox/react-toolbox/commit/027fc12))
+* Add neutral prop to avoid to inherit neutral styles ([4403003](https://github.com/react-toolbox/react-toolbox/commit/4403003))
+* Add pickers classNames to customize appereance ([aead7f0](https://github.com/react-toolbox/react-toolbox/commit/aead7f0))
+* Add react-toolbox attributes and className to DatePicker ([f3bcbf9](https://github.com/react-toolbox/react-toolbox/commit/f3bcbf9))
+* Add ripple documentation ([055c6e3](https://github.com/react-toolbox/react-toolbox/commit/055c6e3))
+* Allow CardMedia to have flexible height per documentation ([ae3f4a5](https://github.com/react-toolbox/react-toolbox/commit/ae3f4a5))
+* Better styles for navigation. Fixes #205 ([b963be7](https://github.com/react-toolbox/react-toolbox/commit/b963be7)), closes [#205](https://github.com/react-toolbox/react-toolbox/issues/205)
+* Bugfix in dropdown errored styling ([6cc95c5](https://github.com/react-toolbox/react-toolbox/commit/6cc95c5))
+* Change webkit scrollbar removal for a mixin ([40888bb](https://github.com/react-toolbox/react-toolbox/commit/40888bb))
+* Fix icon for link demo ([086a0ae](https://github.com/react-toolbox/react-toolbox/commit/086a0ae))
+* Fix scss-lint errors ([2d931ce](https://github.com/react-toolbox/react-toolbox/commit/2d931ce))
+* Fixes #157 ([b037994](https://github.com/react-toolbox/react-toolbox/commit/b037994)), closes [#157](https://github.com/react-toolbox/react-toolbox/issues/157)
+* Fixes #188 ([60f55eb](https://github.com/react-toolbox/react-toolbox/commit/60f55eb)), closes [#188](https://github.com/react-toolbox/react-toolbox/issues/188)
+* Fixes #203 ([a88868a](https://github.com/react-toolbox/react-toolbox/commit/a88868a)), closes [#203](https://github.com/react-toolbox/react-toolbox/issues/203)
+* Fixes #214 ([abcd097](https://github.com/react-toolbox/react-toolbox/commit/abcd097)), closes [#214](https://github.com/react-toolbox/react-toolbox/issues/214)
+* handle mouse leave in IconButton like Button does, fixes #208 ([5ed9184](https://github.com/react-toolbox/react-toolbox/commit/5ed9184)), closes [#208](https://github.com/react-toolbox/react-toolbox/issues/208)
+* Hide scrollbars in playground for webkit ([3505941](https://github.com/react-toolbox/react-toolbox/commit/3505941))
+* Import commons.scss once. Fixes #220 ([5fea2e3](https://github.com/react-toolbox/react-toolbox/commit/5fea2e3)), closes [#220](https://github.com/react-toolbox/react-toolbox/issues/220)
+* Improve datepicker example ([515169d](https://github.com/react-toolbox/react-toolbox/commit/515169d))
+* Improve layout for calendar in firefox ([8b2316e](https://github.com/react-toolbox/react-toolbox/commit/8b2316e))
+* Make level depend on className for buttons ([2349d69](https://github.com/react-toolbox/react-toolbox/commit/2349d69))
+* Remove opacity prop from Overlay and add invisible. Fixes #183, #178 ([312ec91](https://github.com/react-toolbox/react-toolbox/commit/312ec91)), closes [#183](https://github.com/react-toolbox/react-toolbox/issues/183) [#178](https://github.com/react-toolbox/react-toolbox/issues/178)
+* Remove scrollbar in default app spec wrapper ([e788a21](https://github.com/react-toolbox/react-toolbox/commit/e788a21))
+* Remove scrollbars in list items and remove unneeded overflows ([da1c109](https://github.com/react-toolbox/react-toolbox/commit/da1c109))
+* Remove unneded scroll-x hidden ([5293585](https://github.com/react-toolbox/react-toolbox/commit/5293585))
+* Replace `overflow-y: scroll` with `overflow-y: auto` ([58e4e1e](https://github.com/react-toolbox/react-toolbox/commit/58e4e1e)), closes [#218](https://github.com/react-toolbox/react-toolbox/issues/218)
+* Update switch examples ([85ff089](https://github.com/react-toolbox/react-toolbox/commit/85ff089))
+* Use full Toolbox input in autocomplete ([802f50f](https://github.com/react-toolbox/react-toolbox/commit/802f50f))
+* Use Input component in dropdowns and make it homogeneous ([2c7d308](https://github.com/react-toolbox/react-toolbox/commit/2c7d308))
+
+
+
+<a name="0.13.4"></a>
+## 0.13.4 (2015-12-09)
+
+* 0.13.4 release ([758975c](https://github.com/react-toolbox/react-toolbox/commit/758975c))
+* Add ripple decorator and use it in button and checkbox ([6d7204d](https://github.com/react-toolbox/react-toolbox/commit/6d7204d))
+* Currying Ripple Decorator ([5afbaf5](https://github.com/react-toolbox/react-toolbox/commit/5afbaf5))
+* Fix ListSubHeader case ([cc6e3fb](https://github.com/react-toolbox/react-toolbox/commit/cc6e3fb))
+* Fix ripple positioning when page is scrolled ([0e13ae0](https://github.com/react-toolbox/react-toolbox/commit/0e13ae0))
+* Fix typos in input examples and update example in input readme ([27b7bef](https://github.com/react-toolbox/react-toolbox/commit/27b7bef))
+* Fixes #182 ([9e3ad3b](https://github.com/react-toolbox/react-toolbox/commit/9e3ad3b)), closes [#182](https://github.com/react-toolbox/react-toolbox/issues/182)
+* Input was missing html5 type property ([89b41f3](https://github.com/react-toolbox/react-toolbox/commit/89b41f3))
+* Move Ripple main to Decorator approach ([1139fa6](https://github.com/react-toolbox/react-toolbox/commit/1139fa6))
+* Prevent avatar from getting squeezed ([b63d9da](https://github.com/react-toolbox/react-toolbox/commit/b63d9da))
+* Remove ripple loading mixin ([a2e504f](https://github.com/react-toolbox/react-toolbox/commit/a2e504f))
+* Remove unused css in calendar ([4c986e4](https://github.com/react-toolbox/react-toolbox/commit/4c986e4))
+* Rename ListSubheader.jsx to ListSubHeader.jsx ([1189e30](https://github.com/react-toolbox/react-toolbox/commit/1189e30))
+* Typo ([cfad0ea](https://github.com/react-toolbox/react-toolbox/commit/cfad0ea))
+* Use immutable objects in input and checkbox specs ([1951b64](https://github.com/react-toolbox/react-toolbox/commit/1951b64))
+* Use ripple decorator in menus ([947c22d](https://github.com/react-toolbox/react-toolbox/commit/947c22d))
+* Use ripple decorator in Radio buttons ([fa76723](https://github.com/react-toolbox/react-toolbox/commit/fa76723))
+* Use ripple decorator in switch ([b5606eb](https://github.com/react-toolbox/react-toolbox/commit/b5606eb))
+* Use RippleDecorator in IconButton ([43df57a](https://github.com/react-toolbox/react-toolbox/commit/43df57a))
+* Use RippleDecorator in ListItem ([8edf492](https://github.com/react-toolbox/react-toolbox/commit/8edf492))
+
+
+
+<a name="0.13.3"></a>
+## 0.13.3 (2015-12-03)
+
+* 0.13.3 release ([4696aa2](https://github.com/react-toolbox/react-toolbox/commit/4696aa2))
+* Add inline styles for dropdown example in docs ([7619c05](https://github.com/react-toolbox/react-toolbox/commit/7619c05))
+* Add missing default to some globals ([26d7b8a](https://github.com/react-toolbox/react-toolbox/commit/26d7b8a))
+* Fix checkbox example ([e291120](https://github.com/react-toolbox/react-toolbox/commit/e291120))
+* Fix checkbox readme ([c8246f5](https://github.com/react-toolbox/react-toolbox/commit/c8246f5))
+* Fix icons for navigation examples ([16de3b4](https://github.com/react-toolbox/react-toolbox/commit/16de3b4))
+* Fix input example ([43f546f](https://github.com/react-toolbox/react-toolbox/commit/43f546f))
+* Fix timepicker example ([22bd750](https://github.com/react-toolbox/react-toolbox/commit/22bd750))
+* Fixes #180 ([0835863](https://github.com/react-toolbox/react-toolbox/commit/0835863)), closes [#180](https://github.com/react-toolbox/react-toolbox/issues/180)
+
+
+
+<a name="0.13.2"></a>
+## 0.13.2 (2015-12-02)
+
+* 0.13.2 release ([8620fd4](https://github.com/react-toolbox/react-toolbox/commit/8620fd4))
+* Change capitalization to match the filesystem exactly. ([9b0e50e](https://github.com/react-toolbox/react-toolbox/commit/9b0e50e))
+
+
+
+<a name="0.13.1"></a>
+## 0.13.1 (2015-11-29)
+
+* 0.13.1 release ([086047c](https://github.com/react-toolbox/react-toolbox/commit/086047c))
+* Move classnames dependency to peerdependencies ([5994f50](https://github.com/react-toolbox/react-toolbox/commit/5994f50))
+
+
+
+<a name="0.13.0"></a>
+# 0.13.0 (2015-11-29)
+
+* 0.13.0 release ([def382b](https://github.com/react-toolbox/react-toolbox/commit/def382b))
+* Adapt avatar to current linter constraints ([61ac76c](https://github.com/react-toolbox/react-toolbox/commit/61ac76c))
+* Adapt cards codestyle to the current constraints ([52b8723](https://github.com/react-toolbox/react-toolbox/commit/52b8723))
+* add .npmgnore ([a26a1cd](https://github.com/react-toolbox/react-toolbox/commit/a26a1cd))
+* Add avatar to docs ([b249d58](https://github.com/react-toolbox/react-toolbox/commit/b249d58))
+* Add floating label for pickers. Fixes #137 ([d468c9f](https://github.com/react-toolbox/react-toolbox/commit/d468c9f)), closes [#137](https://github.com/react-toolbox/react-toolbox/issues/137)
+* Added <Avatar> component as required by the card title component ([dba68e7](https://github.com/react-toolbox/react-toolbox/commit/dba68e7))
+* Added additional examples in spec ([38e9dd3](https://github.com/react-toolbox/react-toolbox/commit/38e9dd3))
+* Added icon font stylesheet to index.html for docs and spec ([4cb7fe1](https://github.com/react-toolbox/react-toolbox/commit/4cb7fe1))
+* Added script to auto add component definitions to bottom of readme ([4ceee8d](https://github.com/react-toolbox/react-toolbox/commit/4ceee8d))
+* Allow img as children for avatar ([bf68c83](https://github.com/react-toolbox/react-toolbox/commit/bf68c83))
+* Better avatar component ([a830c93](https://github.com/react-toolbox/react-toolbox/commit/a830c93))
+* Better spacing for cards layout ([ca48169](https://github.com/react-toolbox/react-toolbox/commit/ca48169))
+* Better touch ripple handling ([d0e4135](https://github.com/react-toolbox/react-toolbox/commit/d0e4135))
+* Capitalize list component filename ([7367964](https://github.com/react-toolbox/react-toolbox/commit/7367964))
+* Change layout for cards in spec ([2742bf9](https://github.com/react-toolbox/react-toolbox/commit/2742bf9))
+* changing months in datepicker (Firefox) is failing as event object is undefined ([87cf774](https://github.com/react-toolbox/react-toolbox/commit/87cf774))
+* Complete implementation for Avatar ([2106d0e](https://github.com/react-toolbox/react-toolbox/commit/2106d0e))
+* Delete loading prop from buttons ([5248f87](https://github.com/react-toolbox/react-toolbox/commit/5248f87))
+* Extract IconButton and small fixes ([9769bfb](https://github.com/react-toolbox/react-toolbox/commit/9769bfb))
+* Few more variations added ([0d1d023](https://github.com/react-toolbox/react-toolbox/commit/0d1d023))
+* Finish IconButton ([69521f8](https://github.com/react-toolbox/react-toolbox/commit/69521f8))
+* First version of stateless form ([9de67a4](https://github.com/react-toolbox/react-toolbox/commit/9de67a4))
+* Fix array check on autocomplete ([726a777](https://github.com/react-toolbox/react-toolbox/commit/726a777))
+* Fix icons in icon menu example ([5a002b4](https://github.com/react-toolbox/react-toolbox/commit/5a002b4))
+* Fixed docs component scope error and added card example ([2117354](https://github.com/react-toolbox/react-toolbox/commit/2117354))
+* Fixed typo ([4d52011](https://github.com/react-toolbox/react-toolbox/commit/4d52011))
+* Fixes in Input component ([f23a3c6](https://github.com/react-toolbox/react-toolbox/commit/f23a3c6))
+* Improve Avatar validation ([cdd7d77](https://github.com/react-toolbox/react-toolbox/commit/cdd7d77))
+* Make label red in case of error for Input ([de921b0](https://github.com/react-toolbox/react-toolbox/commit/de921b0))
+* Move card sizes to rem units ([ba70d60](https://github.com/react-toolbox/react-toolbox/commit/ba70d60))
+* Moved updated fonticon to new file ([6206e70](https://github.com/react-toolbox/react-toolbox/commit/6206e70))
+* New approach for Tooltips ([1c57370](https://github.com/react-toolbox/react-toolbox/commit/1c57370))
+* New interface for onChange event (key, value, event) ([05ec7a3](https://github.com/react-toolbox/react-toolbox/commit/05ec7a3))
+* New interface for onChange event (value, event) ([fd0e565](https://github.com/react-toolbox/react-toolbox/commit/fd0e565))
+* New interface for onChange event (value, event) ([9b1cb72](https://github.com/react-toolbox/react-toolbox/commit/9b1cb72))
+* New interface for onChange event (value, event) ([d7bd4f5](https://github.com/react-toolbox/react-toolbox/commit/d7bd4f5))
+* New interface for onChange event (value, event) ([51ca0fa](https://github.com/react-toolbox/react-toolbox/commit/51ca0fa))
+* New interface for onChange event (value, event) ([ee17dcf](https://github.com/react-toolbox/react-toolbox/commit/ee17dcf))
+* New interface for onChange event (value, event) ([0837999](https://github.com/react-toolbox/react-toolbox/commit/0837999))
+* New interface for onChange event (value, event) ([e9566d0](https://github.com/react-toolbox/react-toolbox/commit/e9566d0))
+* No abbr... ([b190ecc](https://github.com/react-toolbox/react-toolbox/commit/b190ecc))
+* Pass linter errors for button ([395ce5b](https://github.com/react-toolbox/react-toolbox/commit/395ce5b))
+* Pass linter rules ([25964bf](https://github.com/react-toolbox/react-toolbox/commit/25964bf))
+* Pass scss lint ([2dae5b7](https://github.com/react-toolbox/react-toolbox/commit/2dae5b7))
+* Pass scss lint ([eb8b83d](https://github.com/react-toolbox/react-toolbox/commit/eb8b83d))
+* Rebased branch on deep-restructure ([c65ab37](https://github.com/react-toolbox/react-toolbox/commit/c65ab37))
+* Rebasing with master ([6d9f9aa](https://github.com/react-toolbox/react-toolbox/commit/6d9f9aa))
+* Refactor app and app_bar ([db30db8](https://github.com/react-toolbox/react-toolbox/commit/db30db8))
+* Remove classnames decorator ([e1b04a2](https://github.com/react-toolbox/react-toolbox/commit/e1b04a2))
+* Remove extra lines ([6a644a4](https://github.com/react-toolbox/react-toolbox/commit/6a644a4))
+* Remove flex attributes styling ([ad916fb](https://github.com/react-toolbox/react-toolbox/commit/ad916fb))
+* Remove font import from globals ([64b87d0](https://github.com/react-toolbox/react-toolbox/commit/64b87d0))
+* Remove Form from spec for now ([54c3af2](https://github.com/react-toolbox/react-toolbox/commit/54c3af2))
+* Remove jsx extension from component index files, replace with js ([f3d047e](https://github.com/react-toolbox/react-toolbox/commit/f3d047e))
+* Remove jsx extension from imports in components ([da0f1a6](https://github.com/react-toolbox/react-toolbox/commit/da0f1a6))
+* Remove SelectorFormat to allow camelCase for CSSModules ([6ed03ad](https://github.com/react-toolbox/react-toolbox/commit/6ed03ad))
+* Remove unneeded example from avatar example ([a907ebf](https://github.com/react-toolbox/react-toolbox/commit/a907ebf))
+* Remove unneeded ripple dependency in calendar ([387afcf](https://github.com/react-toolbox/react-toolbox/commit/387afcf))
+* Removed font icon style dependency, fixes #151 ([c9e3663](https://github.com/react-toolbox/react-toolbox/commit/c9e3663)), closes [#151](https://github.com/react-toolbox/react-toolbox/issues/151)
+* Removed old file ([eea0c0e](https://github.com/react-toolbox/react-toolbox/commit/eea0c0e))
+* Rename list to List and use ClassNames in ListItem ([3d9b921](https://github.com/react-toolbox/react-toolbox/commit/3d9b921))
+* Rename lists subcomponents and little fixes ([598d805](https://github.com/react-toolbox/react-toolbox/commit/598d805))
+* Rename most components index to actual components ([cfebdb5](https://github.com/react-toolbox/react-toolbox/commit/cfebdb5))
+* Rename some components to new naming approach ([1611b49](https://github.com/react-toolbox/react-toolbox/commit/1611b49))
+* Reorganize pickers ([ceb2ce4](https://github.com/react-toolbox/react-toolbox/commit/ceb2ce4))
+* Replace dependency `classnames-minimal` with `classnames` ([f5134d2](https://github.com/react-toolbox/react-toolbox/commit/f5134d2))
+* Reverted to previous spec root.jsx ([5c8330a](https://github.com/react-toolbox/react-toolbox/commit/5c8330a))
+* Small changes in card readme ([f2738a0](https://github.com/react-toolbox/react-toolbox/commit/f2738a0))
+* Started card overhaul ([37199c2](https://github.com/react-toolbox/react-toolbox/commit/37199c2))
+* Update babel-eslint to latest version ([6495af3](https://github.com/react-toolbox/react-toolbox/commit/6495af3))
+* Update documentation ([4ef730e](https://github.com/react-toolbox/react-toolbox/commit/4ef730e))
+* Update FontIcon docs ([a1a8546](https://github.com/react-toolbox/react-toolbox/commit/a1a8546))
+* Update Home Cards to new component version ([bc81894](https://github.com/react-toolbox/react-toolbox/commit/bc81894))
+* Update README.md ([1c822d2](https://github.com/react-toolbox/react-toolbox/commit/1c822d2))
+* Use classNames in Autocomplete ([c9061e2](https://github.com/react-toolbox/react-toolbox/commit/c9061e2))
+* Use ClassNames in CalendarDay ([fdeccda](https://github.com/react-toolbox/react-toolbox/commit/fdeccda))
+* Use ClassNames in Checkbox component ([50544ab](https://github.com/react-toolbox/react-toolbox/commit/50544ab))
+* Use ClassNames in Dialog component ([9286e1c](https://github.com/react-toolbox/react-toolbox/commit/9286e1c))
+* Use ClassNames in Drawer ([ee45186](https://github.com/react-toolbox/react-toolbox/commit/ee45186))
+* Use ClassNames in Dropdown ([1370e2a](https://github.com/react-toolbox/react-toolbox/commit/1370e2a))
+* Use Classnames in Link ([bf726ba](https://github.com/react-toolbox/react-toolbox/commit/bf726ba))
+* Use ClassNames in ListItemCheckbox ([edcb7f5](https://github.com/react-toolbox/react-toolbox/commit/edcb7f5))
+* Use ClassNames in Menu ([794a385](https://github.com/react-toolbox/react-toolbox/commit/794a385))
+* Use ClassNames in ProgressBar ([215936f](https://github.com/react-toolbox/react-toolbox/commit/215936f))
+* Use ClassNames in Radio ([3b1e1f0](https://github.com/react-toolbox/react-toolbox/commit/3b1e1f0))
+* Use ClassNames in Slider ([e328ffc](https://github.com/react-toolbox/react-toolbox/commit/e328ffc))
+* Use ClassNames in Snackbar ([9516200](https://github.com/react-toolbox/react-toolbox/commit/9516200))
+* Use ClassNames in TableRow ([c5d0d15](https://github.com/react-toolbox/react-toolbox/commit/c5d0d15))
+* Use ClassNames in Tabs and rename files ([35f8f12](https://github.com/react-toolbox/react-toolbox/commit/35f8f12))
+* Use ClassNames in Tooltip ([db43b19](https://github.com/react-toolbox/react-toolbox/commit/db43b19))
+* Use IconButton in Calendar ([2e414e9](https://github.com/react-toolbox/react-toolbox/commit/2e414e9))
+* Use IconButton in card examples ([404e2e4](https://github.com/react-toolbox/react-toolbox/commit/404e2e4))
+* Use IconButton in IconMenu ([c42b3c6](https://github.com/react-toolbox/react-toolbox/commit/c42b3c6))
+* Using the new interface for all form fields components. ([e9001c5](https://github.com/react-toolbox/react-toolbox/commit/e9001c5))
+* Working on card documentation ([987feb8](https://github.com/react-toolbox/react-toolbox/commit/987feb8))
+* Bugfix: rename with-legend class to withLegend ([2b9c615](https://github.com/react-toolbox/react-toolbox/commit/2b9c615))
+
+
+
+<a name="0.12.13"></a>
+## 0.12.13 (2015-11-21)
+
+* 0.12.13 release ([92a5369](https://github.com/react-toolbox/react-toolbox/commit/92a5369))
+* Add selectable property to table. Fixes #145 ([fb29096](https://github.com/react-toolbox/react-toolbox/commit/fb29096)), closes [#145](https://github.com/react-toolbox/react-toolbox/issues/145)
+* Better imports organization. Fixes #140 ([364e270](https://github.com/react-toolbox/react-toolbox/commit/364e270)), closes [#140](https://github.com/react-toolbox/react-toolbox/issues/140)
+* Improve ripple performance. Fixes #142 ([ac5501b](https://github.com/react-toolbox/react-toolbox/commit/ac5501b)), closes [#142](https://github.com/react-toolbox/react-toolbox/issues/142)
+* Update eslint and plugins and add some rules to make it pass ([1bfd44e](https://github.com/react-toolbox/react-toolbox/commit/1bfd44e))
+
+
+
+<a name="0.12.12"></a>
+## 0.12.12 (2015-11-21)
+
+* 0.12.11 release ([a93ab7e](https://github.com/react-toolbox/react-toolbox/commit/a93ab7e))
+* 0.12.12 release ([3507bcf](https://github.com/react-toolbox/react-toolbox/commit/3507bcf))
+* Add touch ripple for buttons ([7841b43](https://github.com/react-toolbox/react-toolbox/commit/7841b43))
+* Add touch ripple for buttons ([63a0c48](https://github.com/react-toolbox/react-toolbox/commit/63a0c48))
+* Add touch support for ripple ([bd236e1](https://github.com/react-toolbox/react-toolbox/commit/bd236e1))
+* Add touch support for ripple ([1ab45db](https://github.com/react-toolbox/react-toolbox/commit/1ab45db))
+* Auto import base in commons file ([1193e99](https://github.com/react-toolbox/react-toolbox/commit/1193e99))
+* Fix straggling ) ([6d4ae47](https://github.com/react-toolbox/react-toolbox/commit/6d4ae47))
+* New property delay in milliseconds. ([ef6bd08](https://github.com/react-toolbox/react-toolbox/commit/ef6bd08))
+* Use milliseconds for timeout. ([7fc2617](https://github.com/react-toolbox/react-toolbox/commit/7fc2617))
+* Use normal overflow on rounded buttons ([0d5310d](https://github.com/react-toolbox/react-toolbox/commit/0d5310d))
+* Use scale for ripple instead of width and height ([f6840de](https://github.com/react-toolbox/react-toolbox/commit/f6840de))
+
+
+
+<a name="0.12.11"></a>
+## 0.12.11 (2015-11-19)
+
+* [autocomplete] Fix #134 ([1cf41fe](https://github.com/react-toolbox/react-toolbox/commit/1cf41fe)), closes [#134](https://github.com/react-toolbox/react-toolbox/issues/134)
+* 0.12.11 release ([966f457](https://github.com/react-toolbox/react-toolbox/commit/966f457))
+* Auto import base in commons file ([2fc419f](https://github.com/react-toolbox/react-toolbox/commit/2fc419f))
+* Define all colors as RGB ([dd8a176](https://github.com/react-toolbox/react-toolbox/commit/dd8a176))
+* Remove all `unquote` calls ([addc7f3](https://github.com/react-toolbox/react-toolbox/commit/addc7f3))
+
+
+
+<a name="0.12.10"></a>
+## 0.12.10 (2015-11-18)
+
+* 0.12.10 release ([e1f60b7](https://github.com/react-toolbox/react-toolbox/commit/e1f60b7))
+* Add hack to allow overflow hidden with border radio in old webkit ([b12bf6e](https://github.com/react-toolbox/react-toolbox/commit/b12bf6e))
+* Change actions for authors cards in landing ([a24cad0](https://github.com/react-toolbox/react-toolbox/commit/a24cad0))
+* Change scale3d property to scale in radio button ([64baf5d](https://github.com/react-toolbox/react-toolbox/commit/64baf5d))
+* Disable responsive in docs for now ([9f6a415](https://github.com/react-toolbox/react-toolbox/commit/9f6a415))
+* Do not include commons in app wrapper ([9905403](https://github.com/react-toolbox/react-toolbox/commit/9905403))
+* Restyle layout to use transforms in main docs ([b8941e1](https://github.com/react-toolbox/react-toolbox/commit/b8941e1))
+
+
+
+<a name="0.12.9"></a>
+## 0.12.9 (2015-11-18)
+
+* 0.12.9 release ([23fd0f3](https://github.com/react-toolbox/react-toolbox/commit/23fd0f3))
+* Add scss-lint to dev dependencies ([8aa5fa9](https://github.com/react-toolbox/react-toolbox/commit/8aa5fa9))
+* Fix examples for tab ([e0a4168](https://github.com/react-toolbox/react-toolbox/commit/e0a4168))
+* Pass scss lint ([5b7ca28](https://github.com/react-toolbox/react-toolbox/commit/5b7ca28))
+* Remove code autoload in playground ([0cc5a6f](https://github.com/react-toolbox/react-toolbox/commit/0cc5a6f))
+* Remove scss lint from package until migrating to sass-lint ([f8ff162](https://github.com/react-toolbox/react-toolbox/commit/f8ff162))
+* Remove section titles from tabs in tabs example ([6c75479](https://github.com/react-toolbox/react-toolbox/commit/6c75479))
+
+
+
+<a name="0.12.8"></a>
+## 0.12.8 (2015-11-18)
+
+* 0.12.8 release ([21d0485](https://github.com/react-toolbox/react-toolbox/commit/21d0485))
+* Change example with new property 'maxLength' ([9dedee6](https://github.com/react-toolbox/react-toolbox/commit/9dedee6))
+* New property 'maxLength' ([477b770](https://github.com/react-toolbox/react-toolbox/commit/477b770))
+* Refactor class list generation in `Input` component ([76a7e91](https://github.com/react-toolbox/react-toolbox/commit/76a7e91))
+
+
+
+<a name="0.12.7"></a>
+## 0.12.7 (2015-11-18)
+
+* 0.12.7 release ([cdc0814](https://github.com/react-toolbox/react-toolbox/commit/cdc0814))
+* Add scrollX/Y for components not wrapped in App ([2bf510f](https://github.com/react-toolbox/react-toolbox/commit/2bf510f))
+* Change button properties and support toggle icon buttons ([26cecdc](https://github.com/react-toolbox/react-toolbox/commit/26cecdc))
+* Fix scss linter errors and bugfix in snackbar ([54ad233](https://github.com/react-toolbox/react-toolbox/commit/54ad233))
+* Fixes #124 ([81e2661](https://github.com/react-toolbox/react-toolbox/commit/81e2661)), closes [#124](https://github.com/react-toolbox/react-toolbox/issues/124)
+
+
+
+<a name="0.12.6"></a>
+## 0.12.6 (2015-11-17)
+
+* Patch: Placeholder in <DatePicker> ([98f2920](https://github.com/react-toolbox/react-toolbox/commit/98f2920))
+* Adapt docs to new buttons ([ab40974](https://github.com/react-toolbox/react-toolbox/commit/ab40974))
+* Add icons for cards in landing docs page ([2d4dcef](https://github.com/react-toolbox/react-toolbox/commit/2d4dcef))
+* adding cross-env command to npm start scripts for windows compatibility. ([4227201](https://github.com/react-toolbox/react-toolbox/commit/4227201))
+* Allow children for buttons and use it as link where there is href prop ([4707a26](https://github.com/react-toolbox/react-toolbox/commit/4707a26))
+* Bumped such as NPM Commands ([94c8747](https://github.com/react-toolbox/react-toolbox/commit/94c8747))
+* removing UV_THREADPOOL_SIZE set, now executed from npm start script. ([fe7b4d5](https://github.com/react-toolbox/react-toolbox/commit/fe7b4d5))
+* Set raised button for first test example ([3e91b97](https://github.com/react-toolbox/react-toolbox/commit/3e91b97))
+* Use i tagname for icons ([709cc37](https://github.com/react-toolbox/react-toolbox/commit/709cc37))
+
+
+
+<a name="0.12.5"></a>
+## 0.12.5 (2015-11-16)
+
+* 0.12.5 release ([b351237](https://github.com/react-toolbox/react-toolbox/commit/b351237))
+
+
+
+<a name="0.12.4"></a>
+## 0.12.4 (2015-11-16)
+
+* 0.12.4 release ([ac1c924](https://github.com/react-toolbox/react-toolbox/commit/ac1c924))
+* Change examples for use new properties 'minDate' and 'maxDate' ([0cacdf1](https://github.com/react-toolbox/react-toolbox/commit/0cacdf1))
+* force date when it's out of range ([20d8834](https://github.com/react-toolbox/react-toolbox/commit/20d8834))
+* Lock year like a change date (when it's out of range) ([f31dde2](https://github.com/react-toolbox/react-toolbox/commit/f31dde2))
+* New style for calendar (material design new spec) ([0e54523](https://github.com/react-toolbox/react-toolbox/commit/0e54523))
+
+
+
+<a name="0.12.3"></a>
+## 0.12.3 (2015-11-16)
+
+* 0.12.3 release ([e285625](https://github.com/react-toolbox/react-toolbox/commit/e285625))
+* Change quotes to pass linter rules ([14ad835](https://github.com/react-toolbox/react-toolbox/commit/14ad835))
+* Enable App component to hold refs ([c9e700f](https://github.com/react-toolbox/react-toolbox/commit/c9e700f))
+* Import globals in font icon to get the url config variable for the font ([e7850c4](https://github.com/react-toolbox/react-toolbox/commit/e7850c4))
+* New properties 'minDate' & 'maxDate' ([67e6a7e](https://github.com/react-toolbox/react-toolbox/commit/67e6a7e))
+
+
+
+<a name="0.12.2"></a>
+## 0.12.2 (2015-11-15)
+
+* 0.12.2 release ([f3355b6](https://github.com/react-toolbox/react-toolbox/commit/f3355b6))
+* Add a section to explain App wrapper ([92e6aae](https://github.com/react-toolbox/react-toolbox/commit/92e6aae))
+* Round ripple for floating buttons ([c09f7c4](https://github.com/react-toolbox/react-toolbox/commit/c09f7c4))
+* Update install.md ([de6bfdf](https://github.com/react-toolbox/react-toolbox/commit/de6bfdf))
+* Update README.md ([a208570](https://github.com/react-toolbox/react-toolbox/commit/a208570))
+
+
+
+<a name="0.12.1"></a>
+## 0.12.1 (2015-11-15)
+
+* 0.12.1 release ([7667f39](https://github.com/react-toolbox/react-toolbox/commit/7667f39))
+* Fix description and homepage in package ([f5594fe](https://github.com/react-toolbox/react-toolbox/commit/f5594fe))
+
+
+
+<a name="0.12.0"></a>
+# 0.12.0 (2015-11-15)
+
+* 0.12.0 release ([b5c2590](https://github.com/react-toolbox/react-toolbox/commit/b5c2590))
+* Add back onBlur and onFocus for Switch component ([acdb2ca](https://github.com/react-toolbox/react-toolbox/commit/acdb2ca))
+* Add Overlay component ([14c8cb5](https://github.com/react-toolbox/react-toolbox/commit/14c8cb5))
+* Add proper example in switch readme ([d915346](https://github.com/react-toolbox/react-toolbox/commit/d915346))
+* Add react-toolbox attribute to dialog ([5fbe67b](https://github.com/react-toolbox/react-toolbox/commit/5fbe67b))
+* Add toolbox version to webpack configuration ([50d99d2](https://github.com/react-toolbox/react-toolbox/commit/50d99d2))
+* Added babel polyfill to docs to fix ie11 bug, fixes #99 ([431bc3a](https://github.com/react-toolbox/react-toolbox/commit/431bc3a)), closes [#99](https://github.com/react-toolbox/react-toolbox/issues/99)
+* Defer hiding in 500ms for tooltips ([7e694b4](https://github.com/react-toolbox/react-toolbox/commit/7e694b4))
+* don't hide navigation while playground is loaded if screen is 1200px+ in width ([51f8338](https://github.com/react-toolbox/react-toolbox/commit/51f8338))
+* Extract selected item from menu ([58ac44a](https://github.com/react-toolbox/react-toolbox/commit/58ac44a))
+* Extract value from radio group state ([02dc01b](https://github.com/react-toolbox/react-toolbox/commit/02dc01b))
+* Fixes #72 and #97 ([1b6bb5f](https://github.com/react-toolbox/react-toolbox/commit/1b6bb5f)), closes [#72](https://github.com/react-toolbox/react-toolbox/issues/72) [#97](https://github.com/react-toolbox/react-toolbox/issues/97)
+* Get real height of parent ([bacb02b](https://github.com/react-toolbox/react-toolbox/commit/bacb02b))
+* keeping 0.0.3 better-npm-run ([162df8f](https://github.com/react-toolbox/react-toolbox/commit/162df8f))
+* keeping sass-loader ^3.0.0 and toolbox-loader 0.0.2 ([52f261f](https://github.com/react-toolbox/react-toolbox/commit/52f261f))
+* Minor changes (help to read) ([cbbf602](https://github.com/react-toolbox/react-toolbox/commit/cbbf602))
+* Minor fixes ([37f1bf2](https://github.com/react-toolbox/react-toolbox/commit/37f1bf2))
+* Missing code in <Table> ([d37b3d5](https://github.com/react-toolbox/react-toolbox/commit/d37b3d5))
+* Move onActive to tab in tabs ([832e01f](https://github.com/react-toolbox/react-toolbox/commit/832e01f))
+* New and refactored stateless tabs ([50b113b](https://github.com/react-toolbox/react-toolbox/commit/50b113b))
+* Not necesary overlay events ([597d6fd](https://github.com/react-toolbox/react-toolbox/commit/597d6fd))
+* Now <Snackbar> uses internal component <overlay> (using its new property opacity) ([9aca75a](https://github.com/react-toolbox/react-toolbox/commit/9aca75a))
+* Now opacity set by property ([6cd6fd7](https://github.com/react-toolbox/react-toolbox/commit/6cd6fd7))
+* Pure <Snackbar> ([d5294cc](https://github.com/react-toolbox/react-toolbox/commit/d5294cc))
+* Pure <Switch> ([c1c1a9a](https://github.com/react-toolbox/react-toolbox/commit/c1c1a9a))
+* Readme update. Short instructions to start docs locally ([e476893](https://github.com/react-toolbox/react-toolbox/commit/e476893))
+* Refactor dropdown and put value state out ([4590367](https://github.com/react-toolbox/react-toolbox/commit/4590367))
+* Remove not needed click handler in snackbar ([846699a](https://github.com/react-toolbox/react-toolbox/commit/846699a))
+* Remove unused event variable in table component ([9096f8f](https://github.com/react-toolbox/react-toolbox/commit/9096f8f))
+* Removed babel-polyfill from docs and added ie11 polyfills to main component library ([9975b8d](https://github.com/react-toolbox/react-toolbox/commit/9975b8d))
+* removing better-npm-script dependency. ([7d48800](https://github.com/react-toolbox/react-toolbox/commit/7d48800))
+* Rename active to index in tabs 😕 ([e15c421](https://github.com/react-toolbox/react-toolbox/commit/e15c421))
+* Set .active class only when component has a opacity > 0 ([17cc28d](https://github.com/react-toolbox/react-toolbox/commit/17cc28d))
+* Stateless table component ([272a37f](https://github.com/react-toolbox/react-toolbox/commit/272a37f))
+* Tooltip using a parent with relative position ([6918072](https://github.com/react-toolbox/react-toolbox/commit/6918072))
+* Update example for list checkbox ([32804ab](https://github.com/react-toolbox/react-toolbox/commit/32804ab))
+* Update README.md ([63a1c87](https://github.com/react-toolbox/react-toolbox/commit/63a1c87))
+* Update README.md ([db93a75](https://github.com/react-toolbox/react-toolbox/commit/db93a75))
+* Update README.md ([5b9472c](https://github.com/react-toolbox/react-toolbox/commit/5b9472c))
+* Use <overlay> component for set the correct position in <dialog> components. ([8d0649a](https://github.com/react-toolbox/react-toolbox/commit/8d0649a))
+* Use new Overlay component in dialogs and dependencies ([2c17688](https://github.com/react-toolbox/react-toolbox/commit/2c17688))
+* Use Overlay component in drawers ([cadc3e2](https://github.com/react-toolbox/react-toolbox/commit/cadc3e2))
+* using better-npm-run for cross platform node_env and uv_threadpool_size vars ([10eb6c3](https://github.com/react-toolbox/react-toolbox/commit/10eb6c3))
+* using cross-env for env var compatibility ([d301a7a](https://github.com/react-toolbox/react-toolbox/commit/d301a7a))
+
+
+
+<a name="0.11.5"></a>
+## 0.11.5 (2015-11-11)
+
+* 💩 ([fb94605](https://github.com/react-toolbox/react-toolbox/commit/fb94605))
+* 🤗 ([e815f09](https://github.com/react-toolbox/react-toolbox/commit/e815f09))
+* 0.11.5 release ([0c11acc](https://github.com/react-toolbox/react-toolbox/commit/0c11acc))
+* Add full color palette ([b5bcca7](https://github.com/react-toolbox/react-toolbox/commit/b5bcca7))
+* Add node version info in contributors readme section ([838f818](https://github.com/react-toolbox/react-toolbox/commit/838f818))
+* Add production env when building ([a412d22](https://github.com/react-toolbox/react-toolbox/commit/a412d22))
+* Alphabetical Order for properties and methods ([147088b](https://github.com/react-toolbox/react-toolbox/commit/147088b))
+* Avoid object assign in preview component ([9171279](https://github.com/react-toolbox/react-toolbox/commit/9171279))
+* change documentation ([653150c](https://github.com/react-toolbox/react-toolbox/commit/653150c))
+* Delete repeated pickers in spec ([bcec735](https://github.com/react-toolbox/react-toolbox/commit/bcec735))
+* Extract state from autocomplete ([703d4c6](https://github.com/react-toolbox/react-toolbox/commit/703d4c6))
+* Extract value from slider state and fix tests ([7d6c898](https://github.com/react-toolbox/react-toolbox/commit/7d6c898))
+* Fix disabled ripple click error ([ff936cb](https://github.com/react-toolbox/react-toolbox/commit/ff936cb))
+* Fixed typo ([ae95446](https://github.com/react-toolbox/react-toolbox/commit/ae95446))
+* Fixes #89 ([7a1181a](https://github.com/react-toolbox/react-toolbox/commit/7a1181a)), closes [#89](https://github.com/react-toolbox/react-toolbox/issues/89)
+* Improve code for slider ([0a8b6b0](https://github.com/react-toolbox/react-toolbox/commit/0a8b6b0))
+* Improve date picker ([7311489](https://github.com/react-toolbox/react-toolbox/commit/7311489))
+* Improve pickers ([5fc1359](https://github.com/react-toolbox/react-toolbox/commit/5fc1359))
+* Improvements in checkbox and adapt dependencies to stateless behavior ([1d9cde9](https://github.com/react-toolbox/react-toolbox/commit/1d9cde9))
+* minor changes ([7aec185](https://github.com/react-toolbox/react-toolbox/commit/7aec185))
+* Minor changes ([49acc41](https://github.com/react-toolbox/react-toolbox/commit/49acc41))
+* New rule for <Input> (type: date or time) ([34cef32](https://github.com/react-toolbox/react-toolbox/commit/34cef32))
+* Next version ([9d7eebd](https://github.com/react-toolbox/react-toolbox/commit/9d7eebd))
+* Proper import path for documentation files ([67ab874](https://github.com/react-toolbox/react-toolbox/commit/67ab874))
+* Proper link for donations ([0a2761a](https://github.com/react-toolbox/react-toolbox/commit/0a2761a))
+* Pure <Table> and improve events. ([0fe79fd](https://github.com/react-toolbox/react-toolbox/commit/0fe79fd))
+* Pure <Tabs> ([42b9496](https://github.com/react-toolbox/react-toolbox/commit/42b9496))
+* Pure timepicker, fixes #33 ([476729f](https://github.com/react-toolbox/react-toolbox/commit/476729f)), closes [#33](https://github.com/react-toolbox/react-toolbox/issues/33)
+* Restore root and remove missing console log ([0dd4bb6](https://github.com/react-toolbox/react-toolbox/commit/0dd4bb6))
+* Set font URLs as variables ([fe86854](https://github.com/react-toolbox/react-toolbox/commit/fe86854))
+* Set sinon official 2.0 branch ([4af52d1](https://github.com/react-toolbox/react-toolbox/commit/4af52d1))
+* Stateless DatePicker ([57d0109](https://github.com/react-toolbox/react-toolbox/commit/57d0109))
+* Stateless input ([f5957bc](https://github.com/react-toolbox/react-toolbox/commit/f5957bc))
+* Stateless TimePicker ([2130057](https://github.com/react-toolbox/react-toolbox/commit/2130057))
+* Update examples and documentation for slider ([362c0cf](https://github.com/react-toolbox/react-toolbox/commit/362c0cf))
+* Update README.md ([116e598](https://github.com/react-toolbox/react-toolbox/commit/116e598))
+* Bugfix: avoid delay in slider knob ([24c4c39](https://github.com/react-toolbox/react-toolbox/commit/24c4c39))
+
+
+
+<a name="0.11.3"></a>
+## 0.11.3 (2015-11-07)
+
+* <Button floating> for show the playground area. ([ae78976](https://github.com/react-toolbox/react-toolbox/commit/ae78976))
+* <Checkbox> Stateless ([b1fe6f6](https://github.com/react-toolbox/react-toolbox/commit/b1fe6f6))
+* <Clock> is not a public component. ([2761c88](https://github.com/react-toolbox/react-toolbox/commit/2761c88))
+* <footer> in home ([bd277a0](https://github.com/react-toolbox/react-toolbox/commit/bd277a0))
+* <header> navigation like Magerial Design Lite. ([c997834](https://github.com/react-toolbox/react-toolbox/commit/c997834))
+* <RadioButton> is not a public component. ([bdeda85](https://github.com/react-toolbox/react-toolbox/commit/bdeda85))
+* <Table> using the new stateless <Checkbox> ([b3150f4](https://github.com/react-toolbox/react-toolbox/commit/b3150f4))
+* 😗 ([f239946](https://github.com/react-toolbox/react-toolbox/commit/f239946))
+* 😟 ([462b258](https://github.com/react-toolbox/react-toolbox/commit/462b258))
+* Add a couple of links to the components spec page ([af1ac20](https://github.com/react-toolbox/react-toolbox/commit/af1ac20))
+* Add a drawer panel with playground area ([ba5432a](https://github.com/react-toolbox/react-toolbox/commit/ba5432a))
+* Add analytics ([dcd95e6](https://github.com/react-toolbox/react-toolbox/commit/dcd95e6))
+* add app_bar to spec ([18ed189](https://github.com/react-toolbox/react-toolbox/commit/18ed189))
+* Add auto property to autocomplete ([76e3f98](https://github.com/react-toolbox/react-toolbox/commit/76e3f98))
+* add babel to devDepedenecy ([d0936c2](https://github.com/react-toolbox/react-toolbox/commit/d0936c2))
+* add commons.scss to spec html ([55c654d](https://github.com/react-toolbox/react-toolbox/commit/55c654d))
+* Add deploy command ([dd9954d](https://github.com/react-toolbox/react-toolbox/commit/dd9954d))
+* Add docs for radio buttons ([0df2d8d](https://github.com/react-toolbox/react-toolbox/commit/0df2d8d))
+* Add docs for snackbar ([b8a3c90](https://github.com/react-toolbox/react-toolbox/commit/b8a3c90))
+* Add docs for the font icon ([ad3a39d](https://github.com/react-toolbox/react-toolbox/commit/ad3a39d))
+* Add docs subproject ([de3af12](https://github.com/react-toolbox/react-toolbox/commit/de3af12))
+* Add document for the root component documentation ([dd5948e](https://github.com/react-toolbox/react-toolbox/commit/dd5948e))
+* Add documentation and example for appbar and autocomplete ([484db1e](https://github.com/react-toolbox/react-toolbox/commit/484db1e))
+* Add documentation and example for menus ([2a93731](https://github.com/react-toolbox/react-toolbox/commit/2a93731))
+* Add documentation and examples for cards ([211cb97](https://github.com/react-toolbox/react-toolbox/commit/211cb97))
+* Add documentation and fixes for dropdown ([7c7ed76](https://github.com/react-toolbox/react-toolbox/commit/7c7ed76))
+* Add documentation for date picker and remove structure section from other docs ([4eb0c1b](https://github.com/react-toolbox/react-toolbox/commit/4eb0c1b))
+* Add documentation for dialog ([c2461a8](https://github.com/react-toolbox/react-toolbox/commit/c2461a8))
+* Add documentation for Tabs ([9d809de](https://github.com/react-toolbox/react-toolbox/commit/9d809de))
+* Add drawer documentation ([811bb7b](https://github.com/react-toolbox/react-toolbox/commit/811bb7b))
+* Add dynamic loader for Markdown examples 😎 ([b58d688](https://github.com/react-toolbox/react-toolbox/commit/b58d688))
+* Add favicon ([793f54c](https://github.com/react-toolbox/react-toolbox/commit/793f54c))
+* Add gh pages package ([e152e93](https://github.com/react-toolbox/react-toolbox/commit/e152e93))
+* Add head tag info ([86b6c8b](https://github.com/react-toolbox/react-toolbox/commit/86b6c8b))
+* Add highligh for markdown loader ([f8c8435](https://github.com/react-toolbox/react-toolbox/commit/f8c8435))
+* Add input docs ([a049d99](https://github.com/react-toolbox/react-toolbox/commit/a049d99))
+* Add instalation page and layout ([f1b1345](https://github.com/react-toolbox/react-toolbox/commit/f1b1345))
+* Add language legend to markdown docs ([303ca9c](https://github.com/react-toolbox/react-toolbox/commit/303ca9c))
+* Add language to code in list docs ([21f47af](https://github.com/react-toolbox/react-toolbox/commit/21f47af))
+* Add layout for components in doc ([659b5bb](https://github.com/react-toolbox/react-toolbox/commit/659b5bb))
+* Add link docs ([73e5fa0](https://github.com/react-toolbox/react-toolbox/commit/73e5fa0))
+* Add list docs ([5a1d15e](https://github.com/react-toolbox/react-toolbox/commit/5a1d15e))
+* Add main components page and default playground example ([61b8a70](https://github.com/react-toolbox/react-toolbox/commit/61b8a70))
+* Add missing jsx legend to dialog docs ([bc668b9](https://github.com/react-toolbox/react-toolbox/commit/bc668b9))
+* Add navigation docs ([754e939](https://github.com/react-toolbox/react-toolbox/commit/754e939))
+* Add object assign ([b126fe7](https://github.com/react-toolbox/react-toolbox/commit/b126fe7))
+* Add option to avoid removing comments in HTML build ([6cd364f](https://github.com/react-toolbox/react-toolbox/commit/6cd364f))
+* Add Playground component ([1e20183](https://github.com/react-toolbox/react-toolbox/commit/1e20183))
+* Add progressbar docs ([b5b7b13](https://github.com/react-toolbox/react-toolbox/commit/b5b7b13))
+* add rimraf devDependencies ([efb9cd2](https://github.com/react-toolbox/react-toolbox/commit/efb9cd2))
+* add sass sourcemap in dev ([2433d71](https://github.com/react-toolbox/react-toolbox/commit/2433d71))
+* Add scripts to generate a js+css version ([8c4c795](https://github.com/react-toolbox/react-toolbox/commit/8c4c795))
+* Add sidebar and better layout for documentation ([8dcc782](https://github.com/react-toolbox/react-toolbox/commit/8dcc782))
+* Add slider documentation ([41d5cb7](https://github.com/react-toolbox/react-toolbox/commit/41d5cb7))
+* Add Snackbar spec ([715d898](https://github.com/react-toolbox/react-toolbox/commit/715d898))
+* Add some changes for the home page ([0b1e46f](https://github.com/react-toolbox/react-toolbox/commit/0b1e46f))
+* Add some missing semicolons ([246c572](https://github.com/react-toolbox/react-toolbox/commit/246c572))
+* Add spec to Button component ([fff3720](https://github.com/react-toolbox/react-toolbox/commit/fff3720))
+* Add support button to home page ([3236a3f](https://github.com/react-toolbox/react-toolbox/commit/3236a3f))
+* Add switch docs ([f63103c](https://github.com/react-toolbox/react-toolbox/commit/f63103c))
+* Add theme configuration for docs ([f3b70a5](https://github.com/react-toolbox/react-toolbox/commit/f3b70a5))
+* Add time picker docs ([b4124a5](https://github.com/react-toolbox/react-toolbox/commit/b4124a5))
+* Add toolbox loader for production build ([cd525ca](https://github.com/react-toolbox/react-toolbox/commit/cd525ca))
+* add UV_THREADPOOL_SIZE ([8ed0fc1](https://github.com/react-toolbox/react-toolbox/commit/8ed0fc1))
+* added bumped configuration ([6ad44d7](https://github.com/react-toolbox/react-toolbox/commit/6ad44d7))
+* Added component to Package and Bundle ([193ba8b](https://github.com/react-toolbox/react-toolbox/commit/193ba8b))
+* Added one-dark theme for editor ([236a373](https://github.com/react-toolbox/react-toolbox/commit/236a373))
+* Added publish in Github and NPM ([226d83d](https://github.com/react-toolbox/react-toolbox/commit/226d83d))
+* Authors data for <Card> ([2f489eb](https://github.com/react-toolbox/react-toolbox/commit/2f489eb))
+* Babel to stage 2 and remove decorators ([7c43f93](https://github.com/react-toolbox/react-toolbox/commit/7c43f93))
+* Basic transition for Playground ([962b321](https://github.com/react-toolbox/react-toolbox/commit/962b321))
+* Before deploy create a new build ([d03a43b](https://github.com/react-toolbox/react-toolbox/commit/d03a43b))
+* Better example for links ([116e2e8](https://github.com/react-toolbox/react-toolbox/commit/116e2e8))
+* Better example for links ([97ca9d6](https://github.com/react-toolbox/react-toolbox/commit/97ca9d6))
+* Better navigation example ([1bae72b](https://github.com/react-toolbox/react-toolbox/commit/1bae72b))
+* Better one paragraph 🙄 ([3e9b029](https://github.com/react-toolbox/react-toolbox/commit/3e9b029))
+* Better variables and props for button ([614b1b1](https://github.com/react-toolbox/react-toolbox/commit/614b1b1))
+* Better without subtitles ([de967c4](https://github.com/react-toolbox/react-toolbox/commit/de967c4))
+* Bootstrap pages ([e897de5](https://github.com/react-toolbox/react-toolbox/commit/e897de5))
+* Bugfix in snackbar zindex ([5d4dc92](https://github.com/react-toolbox/react-toolbox/commit/5d4dc92))
+* Bugfix with ripple in floating button ([93c2143](https://github.com/react-toolbox/react-toolbox/commit/93c2143))
+* Bugfixes ([b89c0ec](https://github.com/react-toolbox/react-toolbox/commit/b89c0ec))
+* Change copy for authors ([70f43ad](https://github.com/react-toolbox/react-toolbox/commit/70f43ad))
+* change footer in drawer navigation ([8f87be4](https://github.com/react-toolbox/react-toolbox/commit/8f87be4))
+* Changes in README ([0651a38](https://github.com/react-toolbox/react-toolbox/commit/0651a38))
+* Clever way to auto-hide <Tooltip> (full CSS) ([5e18ccb](https://github.com/react-toolbox/react-toolbox/commit/5e18ccb))
+* Complete and reorganize first approach for documentation pages ([e487001](https://github.com/react-toolbox/react-toolbox/commit/e487001))
+* Complete button docs ([6486b80](https://github.com/react-toolbox/react-toolbox/commit/6486b80))
+* Complete docs for checkbox ([3c07bb9](https://github.com/react-toolbox/react-toolbox/commit/3c07bb9))
+* Config production env in webpack for docs ([b789ed0](https://github.com/react-toolbox/react-toolbox/commit/b789ed0))
+* Control visibility with JavaScript (decoupled way for any kind of element or <Component>) ([d0c8e4a](https://github.com/react-toolbox/react-toolbox/commit/d0c8e4a))
+* Csscomb and better organization for slider ([1b73310](https://github.com/react-toolbox/react-toolbox/commit/1b73310))
+* Csscomb and better style for switch scss ([5f2b096](https://github.com/react-toolbox/react-toolbox/commit/5f2b096))
+* Csscomb for inputs ([6f9b880](https://github.com/react-toolbox/react-toolbox/commit/6f9b880))
+* Csscomb for menus ([49317ba](https://github.com/react-toolbox/react-toolbox/commit/49317ba))
+* Csscomb for ripple ([17b8a05](https://github.com/react-toolbox/react-toolbox/commit/17b8a05))
+* Disable source mapping to speed up build time ([d4f1387](https://github.com/react-toolbox/react-toolbox/commit/d4f1387))
+* Documentation for <Table/> ([806e484](https://github.com/react-toolbox/react-toolbox/commit/806e484))
+* Downgrade karma phantom launcher ([7455a89](https://github.com/react-toolbox/react-toolbox/commit/7455a89))
+* Extract some variables from drawer sass ([d2befec](https://github.com/react-toolbox/react-toolbox/commit/d2befec))
+* First approach for <Tooltip/> ([2afd343](https://github.com/react-toolbox/react-toolbox/commit/2afd343))
+* First approach of <Snackbar> ([c663178](https://github.com/react-toolbox/react-toolbox/commit/c663178))
+* First steps in landing: show authors like <Card>s ([1a3ff86](https://github.com/react-toolbox/react-toolbox/commit/1a3ff86))
+* First steps styling documentation and enhaced style for <Appbar> and <Drawer> ([d180bbe](https://github.com/react-toolbox/react-toolbox/commit/d180bbe))
+* First steps with <Snackbar/> ([edee162](https://github.com/react-toolbox/react-toolbox/commit/edee162))
+* First version of basic MD <table> ([8944335](https://github.com/react-toolbox/react-toolbox/commit/8944335))
+* fix ([2aad274](https://github.com/react-toolbox/react-toolbox/commit/2aad274))
+* Fix cname config for deploy ([2ed9376](https://github.com/react-toolbox/react-toolbox/commit/2ed9376))
+* fix css-modules composes ([e80dd0f](https://github.com/react-toolbox/react-toolbox/commit/e80dd0f))
+* fix es6 class react this bind ([7ff854f](https://github.com/react-toolbox/react-toolbox/commit/7ff854f))
+* fix for doc build ([4131094](https://github.com/react-toolbox/react-toolbox/commit/4131094))
+* fix lint ([c7ce470](https://github.com/react-toolbox/react-toolbox/commit/c7ce470))
+* fix lint ([46ee761](https://github.com/react-toolbox/react-toolbox/commit/46ee761))
+* fix lint ([b7a3e01](https://github.com/react-toolbox/react-toolbox/commit/b7a3e01))
+* Fix linter errors ([6545e2b](https://github.com/react-toolbox/react-toolbox/commit/6545e2b))
+* Fix markdown for button ([9ca68eb](https://github.com/react-toolbox/react-toolbox/commit/9ca68eb))
+* Fix MD for dialog ([7474c39](https://github.com/react-toolbox/react-toolbox/commit/7474c39))
+* Fix name for identify components ([0468c87](https://github.com/react-toolbox/react-toolbox/commit/0468c87))
+* Fix release number ([8d59c0a](https://github.com/react-toolbox/react-toolbox/commit/8d59c0a))
+* Fix some errors and change opinionated eslint ([e89d6df](https://github.com/react-toolbox/react-toolbox/commit/e89d6df))
+* Fix typo in example readme md ([b4f9f5e](https://github.com/react-toolbox/react-toolbox/commit/b4f9f5e))
+* Fix typos ([e43a6b2](https://github.com/react-toolbox/react-toolbox/commit/e43a6b2))
+* Fix url avatar for test examples 🤕 ([9e7bec0](https://github.com/react-toolbox/react-toolbox/commit/9e7bec0))
+* FIx version 0.11.2 ([af9b6a2](https://github.com/react-toolbox/react-toolbox/commit/af9b6a2))
+* FIXED eslint ([531e7e0](https://github.com/react-toolbox/react-toolbox/commit/531e7e0))
+* Fixed z-index ([93c6c47](https://github.com/react-toolbox/react-toolbox/commit/93c6c47))
+* Fixes #45 removing Object.assign and avoiding to include a polyfill ([8c682c3](https://github.com/react-toolbox/react-toolbox/commit/8c682c3)), closes [#45](https://github.com/react-toolbox/react-toolbox/issues/45)
+* Fixes #48 ([de52a1e](https://github.com/react-toolbox/react-toolbox/commit/de52a1e)), closes [#48](https://github.com/react-toolbox/react-toolbox/issues/48)
+* Fixes #52 ([b516a5a](https://github.com/react-toolbox/react-toolbox/commit/b516a5a)), closes [#52](https://github.com/react-toolbox/react-toolbox/issues/52)
+* Fixes for the slider ([31762b7](https://github.com/react-toolbox/react-toolbox/commit/31762b7))
+* Footer in <Drawer> ([07ce014](https://github.com/react-toolbox/react-toolbox/commit/07ce014))
+* highlight.js dependency ([7217208](https://github.com/react-toolbox/react-toolbox/commit/7217208))
+* Improve config, add ExtractTextPlugin and configure launch with 100 size for threadpool ([b7ba8c1](https://github.com/react-toolbox/react-toolbox/commit/b7ba8c1))
+* Improve documentation for appbar autocomplete and button ([1e662d1](https://github.com/react-toolbox/react-toolbox/commit/1e662d1))
+* Improve markdown format ([7c87940](https://github.com/react-toolbox/react-toolbox/commit/7c87940))
+* Improvements for build ([4a9d8cf](https://github.com/react-toolbox/react-toolbox/commit/4a9d8cf))
+* Improvements for the documentation markdown ([b3a98df](https://github.com/react-toolbox/react-toolbox/commit/b3a98df))
+* Include <Table> in documentation ([f626716](https://github.com/react-toolbox/react-toolbox/commit/f626716))
+* Include CNAME for react-toolbox.com ([0e0ce3b](https://github.com/react-toolbox/react-toolbox/commit/0e0ce3b))
+* Include example of readme for landing ([1e47f03](https://github.com/react-toolbox/react-toolbox/commit/1e47f03))
+* Include examples and include in bundle. ([de43b22](https://github.com/react-toolbox/react-toolbox/commit/de43b22))
+* Independent scroll for <Drawer> and <Documentation> (looks like a app) ([0e268a4](https://github.com/react-toolbox/react-toolbox/commit/0e268a4))
+* Interface for all <Components> ([2b5d687](https://github.com/react-toolbox/react-toolbox/commit/2b5d687))
+* Link all components ([14a63cf](https://github.com/react-toolbox/react-toolbox/commit/14a63cf))
+* Lint code ([24c3390](https://github.com/react-toolbox/react-toolbox/commit/24c3390))
+* Lint more files ([ce9bd76](https://github.com/react-toolbox/react-toolbox/commit/ce9bd76))
+* Little fixes and change dependencies ([936c896](https://github.com/react-toolbox/react-toolbox/commit/936c896))
+* Make darker theme primary color for docs ([7880a36](https://github.com/react-toolbox/react-toolbox/commit/7880a36))
+* Minor changes ([103c945](https://github.com/react-toolbox/react-toolbox/commit/103c945))
+* Minor changes ([02c6024](https://github.com/react-toolbox/react-toolbox/commit/02c6024))
+* Minor changes ([959169a](https://github.com/react-toolbox/react-toolbox/commit/959169a))
+* Minor changes ([d7c5dbe](https://github.com/react-toolbox/react-toolbox/commit/d7c5dbe))
+* Minor changes for playground ([ffd7fd5](https://github.com/react-toolbox/react-toolbox/commit/ffd7fd5))
+* Missing quote ([f4f3ef0](https://github.com/react-toolbox/react-toolbox/commit/f4f3ef0))
+* Missing stuff from the previos commit 😂 ([e1b9c6f](https://github.com/react-toolbox/react-toolbox/commit/e1b9c6f))
+* More easy for create a editable/selectable table. ([e5c6cba](https://github.com/react-toolbox/react-toolbox/commit/e5c6cba))
+* More refactoring for sass variables ([786dd59](https://github.com/react-toolbox/react-toolbox/commit/786dd59))
+* Move autocomplete property values to variables ([4511d8a](https://github.com/react-toolbox/react-toolbox/commit/4511d8a))
+* Move calendar inside date picker ([23bbfb9](https://github.com/react-toolbox/react-toolbox/commit/23bbfb9))
+* Move CNAME ([ff07d13](https://github.com/react-toolbox/react-toolbox/commit/ff07d13))
+* Move some checkboxes properties to file ([d109841](https://github.com/react-toolbox/react-toolbox/commit/d109841))
+* Move the rest of components important property values to variables ([0f6355a](https://github.com/react-toolbox/react-toolbox/commit/0f6355a))
+* New approach using instance methods show & hide. ([493df0e](https://github.com/react-toolbox/react-toolbox/commit/493df0e))
+* New layout and organization. 🙉 ([77ff2ac](https://github.com/react-toolbox/react-toolbox/commit/77ff2ac))
+* Normalize code font ([f03ecbc](https://github.com/react-toolbox/react-toolbox/commit/f03ecbc))
+* Now head dispatch a selected value (for select/unselect all rows) ([0f9a38a](https://github.com/react-toolbox/react-toolbox/commit/0f9a38a))
+* Now you can select all rows, or independent row. You have a new method getSelected() which gives you ([1712fc9](https://github.com/react-toolbox/react-toolbox/commit/1712fc9))
+* optimize for production ([23ccf62](https://github.com/react-toolbox/react-toolbox/commit/23ccf62))
+* Organize radio buttons and groups ([07c17b0](https://github.com/react-toolbox/react-toolbox/commit/07c17b0))
+* over className ;) (less is better) ([abf7088](https://github.com/react-toolbox/react-toolbox/commit/abf7088))
+* Prepare base file to handle theming ([ef882fc](https://github.com/react-toolbox/react-toolbox/commit/ef882fc))
+* Proper link for README npm link ([4faa261](https://github.com/react-toolbox/react-toolbox/commit/4faa261))
+* Pure dialog ([6e6c1ce](https://github.com/react-toolbox/react-toolbox/commit/6e6c1ce))
+* Pure drawer ([fa94c4e](https://github.com/react-toolbox/react-toolbox/commit/fa94c4e))
+* README initial version ([926cf95](https://github.com/react-toolbox/react-toolbox/commit/926cf95))
+* Refactor documentation styles ([a1c0e77](https://github.com/react-toolbox/react-toolbox/commit/a1c0e77))
+* Remove 'active' property (it's a state) ([019ed57](https://github.com/react-toolbox/react-toolbox/commit/019ed57))
+* Remove dataSource state from autocomplete ([3b48501](https://github.com/react-toolbox/react-toolbox/commit/3b48501))
+* Remove flex data attributes from components ([0abc1e1](https://github.com/react-toolbox/react-toolbox/commit/0abc1e1))
+* Remove form from the docs ([00e09ce](https://github.com/react-toolbox/react-toolbox/commit/00e09ce))
+* remove local phantomjs ([de26a0f](https://github.com/react-toolbox/react-toolbox/commit/de26a0f))
+* Remove unneeded css variables ([da2c85c](https://github.com/react-toolbox/react-toolbox/commit/da2c85c))
+* Rename component doc to readme.md ([2423d09](https://github.com/react-toolbox/react-toolbox/commit/2423d09))
+* Reorder project ([0aca8fe](https://github.com/react-toolbox/react-toolbox/commit/0aca8fe))
+* Reorder properties for datepicker ([8fc11d3](https://github.com/react-toolbox/react-toolbox/commit/8fc11d3))
+* Reorder styles for list and dialog ([0dcd382](https://github.com/react-toolbox/react-toolbox/commit/0dcd382))
+* Reorder styles for tabs ([f5155f8](https://github.com/react-toolbox/react-toolbox/commit/f5155f8))
+* Resolve linter errors ([ec6e72b](https://github.com/react-toolbox/react-toolbox/commit/ec6e72b))
+* Restructure docs index ([19a4990](https://github.com/react-toolbox/react-toolbox/commit/19a4990))
+* Select/Unselect all rows ([8894081](https://github.com/react-toolbox/react-toolbox/commit/8894081))
+* separate generate changelog in two steps ([a06d45f](https://github.com/react-toolbox/react-toolbox/commit/a06d45f))
+* Set threadpool size in server.js ([bec58a3](https://github.com/react-toolbox/react-toolbox/commit/bec58a3))
+* set UV_THREADPOOL_SIZE=100 ([9824ebc](https://github.com/react-toolbox/react-toolbox/commit/9824ebc))
+* Setup new file structure for sass files ([33a508c](https://github.com/react-toolbox/react-toolbox/commit/33a508c))
+* Show tooltip is in a mixin (for reuse in another components)... it's necessary be a stateless behavi ([68055ca](https://github.com/react-toolbox/react-toolbox/commit/68055ca))
+* Social link from Authors and fixed github buttons ([a6157e0](https://github.com/react-toolbox/react-toolbox/commit/a6157e0))
+* Some changes to home ([a73e4ff](https://github.com/react-toolbox/react-toolbox/commit/a73e4ff))
+* Some fixes and include extract text webpack plugin ([be1bde6](https://github.com/react-toolbox/react-toolbox/commit/be1bde6))
+* Style for components demo ([0a6bd9c](https://github.com/react-toolbox/react-toolbox/commit/0a6bd9c))
+* Styles much better ([5c1489a](https://github.com/react-toolbox/react-toolbox/commit/5c1489a))
+* Switch between drawer of components and drawer of playground ([d210ae8](https://github.com/react-toolbox/react-toolbox/commit/d210ae8))
+* Take build out of deploy command ([1547bd6](https://github.com/react-toolbox/react-toolbox/commit/1547bd6))
+* Temporary disable tests for slider ☹️ ([5ea1484](https://github.com/react-toolbox/react-toolbox/commit/5ea1484))
+* Update config to add CNAME to docs ([76ee1d8](https://github.com/react-toolbox/react-toolbox/commit/76ee1d8))
+* Update configuration section in readme ([32c4910](https://github.com/react-toolbox/react-toolbox/commit/32c4910))
+* Update package json ([20dbcd6](https://github.com/react-toolbox/react-toolbox/commit/20dbcd6))
+* Update package json ([48c2f0d](https://github.com/react-toolbox/react-toolbox/commit/48c2f0d))
+* Update phantomjs launcher ([f042376](https://github.com/react-toolbox/react-toolbox/commit/f042376))
+* update readme ([92b6f34](https://github.com/react-toolbox/react-toolbox/commit/92b6f34))
+* Update README.md ([9903cb9](https://github.com/react-toolbox/react-toolbox/commit/9903cb9))
+* Update server config for documentation ([9fc08b6](https://github.com/react-toolbox/react-toolbox/commit/9fc08b6))
+* Update travis node to 4.2.1 ([fbbb123](https://github.com/react-toolbox/react-toolbox/commit/fbbb123))
+* update webpack dev, test and build & update eslint rule ([4fb976a](https://github.com/react-toolbox/react-toolbox/commit/4fb976a))
+* Updates ([98cdadb](https://github.com/react-toolbox/react-toolbox/commit/98cdadb))
+* Updates ([c56dc4c](https://github.com/react-toolbox/react-toolbox/commit/c56dc4c))
+* Updates ([dbf0fea](https://github.com/react-toolbox/react-toolbox/commit/dbf0fea))
+* Updates ([6a06774](https://github.com/react-toolbox/react-toolbox/commit/6a06774))
+* Updates ([77cffe6](https://github.com/react-toolbox/react-toolbox/commit/77cffe6))
+* Updates ([521ed03](https://github.com/react-toolbox/react-toolbox/commit/521ed03))
+* Use 'monokai' theme for <Editor> ([ec500a5](https://github.com/react-toolbox/react-toolbox/commit/ec500a5))
+* use autobind-decorator ([6c278f2](https://github.com/react-toolbox/react-toolbox/commit/6c278f2))
+* Use correct theme colors ([153b880](https://github.com/react-toolbox/react-toolbox/commit/153b880))
+* use es6 classes & remove react-addons-pure-render-mixin ([9ad9f35](https://github.com/react-toolbox/react-toolbox/commit/9ad9f35))
+* use react-transform ([4f94682](https://github.com/react-toolbox/react-toolbox/commit/4f94682))
+* Use static avatars ([1dbf7fa](https://github.com/react-toolbox/react-toolbox/commit/1dbf7fa))
+* Bugfix: read input DOM reference with ReactDOM in autocomplete ([8e5150c](https://github.com/react-toolbox/react-toolbox/commit/8e5150c))
+
+
+
+<a name="0.10.20"></a>
+## 0.10.20 (2015-10-20)
+
+* <Card/> finished ([a9f09f6](https://github.com/react-toolbox/react-toolbox/commit/a9f09f6))
+* <Dialog> using SaSS ([ffe3a7b](https://github.com/react-toolbox/react-toolbox/commit/ffe3a7b))
+* <Form/> can save in localstorage ([248581e](https://github.com/react-toolbox/react-toolbox/commit/248581e))
+* <newbie>forget that now I need semi-colon</newbie> ([7cfe100](https://github.com/react-toolbox/react-toolbox/commit/7cfe100))
+* <Tabs> and <Tab> finished ([6b5259d](https://github.com/react-toolbox/react-toolbox/commit/6b5259d))
+* Adapt card to new ripple ([aa4cbd7](https://github.com/react-toolbox/react-toolbox/commit/aa4cbd7))
+* Add a classname attribute and refactor progress bar ([e58acd1](https://github.com/react-toolbox/react-toolbox/commit/e58acd1))
+* Add a prefixer module to set inline prefixed properties ([5954010](https://github.com/react-toolbox/react-toolbox/commit/5954010))
+* Add an install of phantom2 before install hook on travis ([69d0358](https://github.com/react-toolbox/react-toolbox/commit/69d0358))
+* Add autoprefixer local css config. Add most local css to slider ([275bf7c](https://github.com/react-toolbox/react-toolbox/commit/275bf7c))
+* Add basic list component ([bb6b631](https://github.com/react-toolbox/react-toolbox/commit/bb6b631))
+* Add behavior to select the hour ([9ade334](https://github.com/react-toolbox/react-toolbox/commit/9ade334))
+* Add calendar component ([8a967f1](https://github.com/react-toolbox/react-toolbox/commit/8a967f1))
+* Add checkbox component ([8726557](https://github.com/react-toolbox/react-toolbox/commit/8726557))
+* Add circular progress bar ([2e811f3](https://github.com/react-toolbox/react-toolbox/commit/2e811f3))
+* Add composes exception for scss linter ([1eb220d](https://github.com/react-toolbox/react-toolbox/commit/1eb220d))
+* Add current spec files ([81150bc](https://github.com/react-toolbox/react-toolbox/commit/81150bc))
+* Add cursor pointer for clock face and disable text selection ([9585b35](https://github.com/react-toolbox/react-toolbox/commit/9585b35))
+* Add date picker ([d709093](https://github.com/react-toolbox/react-toolbox/commit/d709093))
+* Add date picker initial version ([8f2734d](https://github.com/react-toolbox/react-toolbox/commit/8f2734d))
+* Add date utils ([1c1f498](https://github.com/react-toolbox/react-toolbox/commit/1c1f498))
+* Add date-time module in es6 ([88dc8f6](https://github.com/react-toolbox/react-toolbox/commit/88dc8f6))
+* Add displaName for all components used in timepicker ([ad359aa](https://github.com/react-toolbox/react-toolbox/commit/ad359aa))
+* Add documentation and fixes for date picker ([8880287](https://github.com/react-toolbox/react-toolbox/commit/8880287))
+* Add documentation for progress bar ([45cae5c](https://github.com/react-toolbox/react-toolbox/commit/45cae5c))
+* Add documentation for time picker ([bdf798d](https://github.com/react-toolbox/react-toolbox/commit/bdf798d))
+* Add ES6 prefixer ([7170dd8](https://github.com/react-toolbox/react-toolbox/commit/7170dd8))
+* Add ES6 support end eslint config files ([801bcd4](https://github.com/react-toolbox/react-toolbox/commit/801bcd4))
+* Add first version of ES6 autocomplete ([f2ad55b](https://github.com/react-toolbox/react-toolbox/commit/f2ad55b))
+* Add focus for buttons ([a48e735](https://github.com/react-toolbox/react-toolbox/commit/a48e735))
+* Add generic helper utils ([ae47335](https://github.com/react-toolbox/react-toolbox/commit/ae47335))
+* Add IconMenu component ([c96e218](https://github.com/react-toolbox/react-toolbox/commit/c96e218))
+* Add linear progress bar ([4c68f6b](https://github.com/react-toolbox/react-toolbox/commit/4c68f6b))
+* Add mixins for typography ([366f81d](https://github.com/react-toolbox/react-toolbox/commit/366f81d))
+* Add new switch migrated to sass ([097242b](https://github.com/react-toolbox/react-toolbox/commit/097242b))
+* Add onClick to font icon ([2978dec](https://github.com/react-toolbox/react-toolbox/commit/2978dec))
+* Add phantomjs polyfill ([a0bf311](https://github.com/react-toolbox/react-toolbox/commit/a0bf311))
+* Add pickers test files ([ae525cb](https://github.com/react-toolbox/react-toolbox/commit/ae525cb))
+* Add pure render mixin to calendar ([5d75f4a](https://github.com/react-toolbox/react-toolbox/commit/5d75f4a))
+* Add pure render mixin to date picker ([1a7b6d1](https://github.com/react-toolbox/react-toolbox/commit/1a7b6d1))
+* Add radio button component ([07d182a](https://github.com/react-toolbox/react-toolbox/commit/07d182a))
+* Add radio button component and improvements for radio and checkbox ([91cdb51](https://github.com/react-toolbox/react-toolbox/commit/91cdb51))
+* Add React hot loader ([b206ab7](https://github.com/react-toolbox/react-toolbox/commit/b206ab7))
+* Add react plugin to eslinter ([8b0a91f](https://github.com/react-toolbox/react-toolbox/commit/8b0a91f))
+* Add script to package.json to run test with watch and set default to single run ([42e9863](https://github.com/react-toolbox/react-toolbox/commit/42e9863))
+* Add slider documentation ([2b943eb](https://github.com/react-toolbox/react-toolbox/commit/2b943eb))
+* Add slider initial version ([2b3cc84](https://github.com/react-toolbox/react-toolbox/commit/2b3cc84))
+* Add slider spec ([a6223ad](https://github.com/react-toolbox/react-toolbox/commit/a6223ad))
+* Add slider test component ([ad1ae54](https://github.com/react-toolbox/react-toolbox/commit/ad1ae54))
+* Add slider to spec index ([89fcc9a](https://github.com/react-toolbox/react-toolbox/commit/89fcc9a))
+* Add some examples for slider and little improvements ([341425b](https://github.com/react-toolbox/react-toolbox/commit/341425b))
+* Add some todos for input and autocomplete ([5167b35](https://github.com/react-toolbox/react-toolbox/commit/5167b35))
+* Add spec with usage of progress bar component ([abc19e1](https://github.com/react-toolbox/react-toolbox/commit/abc19e1))
+* Add support for ES6 JSX modules ([7aa068a](https://github.com/react-toolbox/react-toolbox/commit/7aa068a))
+* Add test helper to render into document ([8c50245](https://github.com/react-toolbox/react-toolbox/commit/8c50245))
+* Add test utils ES6 ([908712c](https://github.com/react-toolbox/react-toolbox/commit/908712c))
+* Add time picker first implementation ([5625a47](https://github.com/react-toolbox/react-toolbox/commit/5625a47))
+* Add title to date picker test component ([b473004](https://github.com/react-toolbox/react-toolbox/commit/b473004))
+* Add Travis CI config file ([3f39538](https://github.com/react-toolbox/react-toolbox/commit/3f39538))
+* Added commons (font-face, and normalize) ([c176289](https://github.com/react-toolbox/react-toolbox/commit/c176289))
+* Added components ([32daeef](https://github.com/react-toolbox/react-toolbox/commit/32daeef))
+* Added new package ([f9f2ec7](https://github.com/react-toolbox/react-toolbox/commit/f9f2ec7))
+* Added new references of components ([45560ba](https://github.com/react-toolbox/react-toolbox/commit/45560ba))
+* Adjust time picker spacing ([5051057](https://github.com/react-toolbox/react-toolbox/commit/5051057))
+* Ajust snap color ([873c980](https://github.com/react-toolbox/react-toolbox/commit/873c980))
+* All <Form> components need get/set value methods. ([b22d3be](https://github.com/react-toolbox/react-toolbox/commit/b22d3be))
+* Aside ([3d68797](https://github.com/react-toolbox/react-toolbox/commit/3d68797))
+* Autocomplete ([d9774f5](https://github.com/react-toolbox/react-toolbox/commit/d9774f5))
+* Available <Switch> in <Form/> component. ([e787c74](https://github.com/react-toolbox/react-toolbox/commit/e787c74))
+* Avoid state in clock hand ([a89f75a](https://github.com/react-toolbox/react-toolbox/commit/a89f75a))
+* Basic <Dropdown/> ([b78a7b0](https://github.com/react-toolbox/react-toolbox/commit/b78a7b0))
+* Basic documentation for all components ([e68e871](https://github.com/react-toolbox/react-toolbox/commit/e68e871))
+* Basic input using material design ([704a527](https://github.com/react-toolbox/react-toolbox/commit/704a527))
+* Better indentation for progress bar doc md ([73ed889](https://github.com/react-toolbox/react-toolbox/commit/73ed889))
+* Better style for disabled checked radio button ([b36230c](https://github.com/react-toolbox/react-toolbox/commit/b36230c))
+* Better style for lists ([5aacd7c](https://github.com/react-toolbox/react-toolbox/commit/5aacd7c))
+* Better transition between values and selected value ([dfa754f](https://github.com/react-toolbox/react-toolbox/commit/dfa754f))
+* Bugfix importing utils in calendar ([f5d1651](https://github.com/react-toolbox/react-toolbox/commit/f5d1651))
+* Bugfix in clock hand ([d6c82aa](https://github.com/react-toolbox/react-toolbox/commit/d6c82aa))
+* Calendar refactoring ([18a51d8](https://github.com/react-toolbox/react-toolbox/commit/18a51d8))
+* Call init ([302d21e](https://github.com/react-toolbox/react-toolbox/commit/302d21e))
+* Card ([f7a3079](https://github.com/react-toolbox/react-toolbox/commit/f7a3079))
+* Change webpack process ([c111030](https://github.com/react-toolbox/react-toolbox/commit/c111030))
+* Changes for spec demo ([c833dd7](https://github.com/react-toolbox/react-toolbox/commit/c833dd7))
+* Changes on spec ([96c4c5f](https://github.com/react-toolbox/react-toolbox/commit/96c4c5f))
+* Classes for different states ([d99c275](https://github.com/react-toolbox/react-toolbox/commit/d99c275))
+* Configure webpack dev server to accept connections from mobile ([40948c2](https://github.com/react-toolbox/react-toolbox/commit/40948c2))
+* Consolidate keys and values with proptype.any ([d227181](https://github.com/react-toolbox/react-toolbox/commit/d227181))
+* Consolidate properties ([5775ab4](https://github.com/react-toolbox/react-toolbox/commit/5775ab4))
+* Convert .stylus to .scss ([cdd79bd](https://github.com/react-toolbox/react-toolbox/commit/cdd79bd))
+* Create CSS not react-inline ([1571653](https://github.com/react-toolbox/react-toolbox/commit/1571653))
+* Delete coffeescript prefixer ([dc79b20](https://github.com/react-toolbox/react-toolbox/commit/dc79b20))
+* Delete console log type ([14e1f85](https://github.com/react-toolbox/react-toolbox/commit/14e1f85))
+* Delete empty folder ([6a64570](https://github.com/react-toolbox/react-toolbox/commit/6a64570))
+* Determine correct origin of <Ripple/> ([0f5a58c](https://github.com/react-toolbox/react-toolbox/commit/0f5a58c))
+* Determine type of fieldset ([92bd5ca](https://github.com/react-toolbox/react-toolbox/commit/92bd5ca))
+* Dialog ([d991efc](https://github.com/react-toolbox/react-toolbox/commit/d991efc))
+* Disable linting of parameter reassignation ([5a451ac](https://github.com/react-toolbox/react-toolbox/commit/5a451ac))
+* Disable warning for underscore in variables in ESLint ([fea1ef2](https://github.com/react-toolbox/react-toolbox/commit/fea1ef2))
+* DisplayName property ([f4618ae](https://github.com/react-toolbox/react-toolbox/commit/f4618ae))
+* Documentation ([afda33d](https://github.com/react-toolbox/react-toolbox/commit/afda33d))
+* Documentation for <Aside/> and <Autocomplete/> ([1c71559](https://github.com/react-toolbox/react-toolbox/commit/1c71559))
+* Documentation for <Dropdown/> and onChange callback ([f3ce007](https://github.com/react-toolbox/react-toolbox/commit/f3ce007))
+* Documents for <Aside/> and <Input/> ([ca823ec](https://github.com/react-toolbox/react-toolbox/commit/ca823ec))
+* Dropdown ([e704e36](https://github.com/react-toolbox/react-toolbox/commit/e704e36))
+* Dropdown SaSS ([39f4d54](https://github.com/react-toolbox/react-toolbox/commit/39f4d54))
+* Emulate css config in karma tests ([0bbd413](https://github.com/react-toolbox/react-toolbox/commit/0bbd413))
+* Enhaced <Form/> and <Input/> ([fa7d199](https://github.com/react-toolbox/react-toolbox/commit/fa7d199))
+* Enhaced component ([c33e199](https://github.com/react-toolbox/react-toolbox/commit/c33e199))
+* Example ([d3c3124](https://github.com/react-toolbox/react-toolbox/commit/d3c3124))
+* Example of header and list ([f70fed4](https://github.com/react-toolbox/react-toolbox/commit/f70fed4))
+* Example of input form ([0389469](https://github.com/react-toolbox/react-toolbox/commit/0389469))
+* Example using <FontIcon> ([12e18a7](https://github.com/react-toolbox/react-toolbox/commit/12e18a7))
+* Explain for different ways for get dependencies. ([f35d48c](https://github.com/react-toolbox/react-toolbox/commit/f35d48c))
+* Expose handleresize ([6232166](https://github.com/react-toolbox/react-toolbox/commit/6232166))
+* Extends method .loading ([2fe50e3](https://github.com/react-toolbox/react-toolbox/commit/2fe50e3))
+* Extract ripple loading animation to a mixin ([b05b041](https://github.com/react-toolbox/react-toolbox/commit/b05b041))
+* Final version of Package.json ([147b2a0](https://github.com/react-toolbox/react-toolbox/commit/147b2a0))
+* Final workflow with webpack ([2198f1a](https://github.com/react-toolbox/react-toolbox/commit/2198f1a))
+* Finish components ES6 Rewrite ([3c05ab4](https://github.com/react-toolbox/react-toolbox/commit/3c05ab4))
+* Finish slider jsx and add ids to style subNodes in progress bar ([ad1f0c3](https://github.com/react-toolbox/react-toolbox/commit/ad1f0c3))
+* Finish styles for slider ([91dd948](https://github.com/react-toolbox/react-toolbox/commit/91dd948))
+* Finish testing for slider and progressbar and add sinon ([0cc3016](https://github.com/react-toolbox/react-toolbox/commit/0cc3016))
+* Finish tests for progress bar ([3af452f](https://github.com/react-toolbox/react-toolbox/commit/3af452f))
+* First example using new component <Aside/> ([a326d57](https://github.com/react-toolbox/react-toolbox/commit/a326d57))
+* First example using the package ([b6d2501](https://github.com/react-toolbox/react-toolbox/commit/b6d2501))
+* First example with webpack ([41530d5](https://github.com/react-toolbox/react-toolbox/commit/41530d5))
+* First examples with <Aside/>, <Autocomplete/>, <Button/> and <Dialog/> ([3592794](https://github.com/react-toolbox/react-toolbox/commit/3592794))
+* First spec ([5cc0982](https://github.com/react-toolbox/react-toolbox/commit/5cc0982))
+* First use of React ([433355b](https://github.com/react-toolbox/react-toolbox/commit/433355b))
+* First version of <Autocomplete /> ([1129759](https://github.com/react-toolbox/react-toolbox/commit/1129759))
+* First version of <Card/> ([ea89a8e](https://github.com/react-toolbox/react-toolbox/commit/ea89a8e))
+* First version of <Tags/> ([163f57e](https://github.com/react-toolbox/react-toolbox/commit/163f57e))
+* Fix error in documentation ([69a2d16](https://github.com/react-toolbox/react-toolbox/commit/69a2d16))
+* Fix errors when you have a value in a non-exact autocomplete ([720083d](https://github.com/react-toolbox/react-toolbox/commit/720083d))
+* Fix linter errors in input scss ([4e73906](https://github.com/react-toolbox/react-toolbox/commit/4e73906))
+* Fix little typo in page title ([fe073ee](https://github.com/react-toolbox/react-toolbox/commit/fe073ee))
+* Fix test dependencies ([489b996](https://github.com/react-toolbox/react-toolbox/commit/489b996))
+* Fix tests ([c5adb53](https://github.com/react-toolbox/react-toolbox/commit/c5adb53))
+* Fix webpack version ([a9f29d4](https://github.com/react-toolbox/react-toolbox/commit/a9f29d4))
+* Fix width transition ([aaa35a3](https://github.com/react-toolbox/react-toolbox/commit/aaa35a3))
+* Fixed @import ([1521434](https://github.com/react-toolbox/react-toolbox/commit/1521434))
+* Fixed callback onChange ([6942b54](https://github.com/react-toolbox/react-toolbox/commit/6942b54))
+* fixed error ([b77b525](https://github.com/react-toolbox/react-toolbox/commit/b77b525))
+* Fixed error: @state.value does not work with multiline=true ([9fc0199](https://github.com/react-toolbox/react-toolbox/commit/9fc0199))
+* Fixed errors in colors ([7241505](https://github.com/react-toolbox/react-toolbox/commit/7241505))
+* Fixed errors in stylesheets ([24861e5](https://github.com/react-toolbox/react-toolbox/commit/24861e5))
+* Fixed typo ([bc93348](https://github.com/react-toolbox/react-toolbox/commit/bc93348))
+* Fixed typo ([9d31e56](https://github.com/react-toolbox/react-toolbox/commit/9d31e56))
+* Fixed typo ([75e664c](https://github.com/react-toolbox/react-toolbox/commit/75e664c))
+* Fixed typo "suggestions" ([7eb81fb](https://github.com/react-toolbox/react-toolbox/commit/7eb81fb))
+* Fixes in react proptypes for some components ([763ed46](https://github.com/react-toolbox/react-toolbox/commit/763ed46))
+* Fixes in time picker ([b135121](https://github.com/react-toolbox/react-toolbox/commit/b135121))
+* form ([184badd](https://github.com/react-toolbox/react-toolbox/commit/184badd))
+* Get width of <Button/> for create a perfect size <Ripple/> ([d75cfd0](https://github.com/react-toolbox/react-toolbox/commit/d75cfd0))
+* Handle no values ([70418aa](https://github.com/react-toolbox/react-toolbox/commit/70418aa))
+* Handler @onClick ([bd644b5](https://github.com/react-toolbox/react-toolbox/commit/bd644b5))
+* Hide overflow in Dropdown component ([5b071de](https://github.com/react-toolbox/react-toolbox/commit/5b071de))
+* icon ([498dc75](https://github.com/react-toolbox/react-toolbox/commit/498dc75))
+* Icon ([7033425](https://github.com/react-toolbox/react-toolbox/commit/7033425))
+* Importing css in <style> ([1582fb6](https://github.com/react-toolbox/react-toolbox/commit/1582fb6))
+* Improve aside performance on show ([c4779ca](https://github.com/react-toolbox/react-toolbox/commit/c4779ca))
+* Improve card handler ([2da6794](https://github.com/react-toolbox/react-toolbox/commit/2da6794))
+* Improve checkbox styles ([5f490ed](https://github.com/react-toolbox/react-toolbox/commit/5f490ed))
+* Improve clock adding two levels ([0f71b32](https://github.com/react-toolbox/react-toolbox/commit/0f71b32))
+* Improve clock styles and behavior ([45a26ea](https://github.com/react-toolbox/react-toolbox/commit/45a26ea))
+* Improve clock with real hour, callbacks and better styles ([419d8b2](https://github.com/react-toolbox/react-toolbox/commit/419d8b2))
+* Improve examples ([a39dbcb](https://github.com/react-toolbox/react-toolbox/commit/a39dbcb))
+* Improve menu component adding showable behavior and auto positioning for opening ([14e2c95](https://github.com/react-toolbox/react-toolbox/commit/14e2c95))
+* Improve minimal tests for slider ([3e40960](https://github.com/react-toolbox/react-toolbox/commit/3e40960))
+* Improve performance for pickers calling onChange just when needed ([1839f83](https://github.com/react-toolbox/react-toolbox/commit/1839f83))
+* Improve props and state names in clock index ([6be986c](https://github.com/react-toolbox/react-toolbox/commit/6be986c))
+* Improved <Autocomplete/> using a new property "color" ([bbefc80](https://github.com/react-toolbox/react-toolbox/commit/bbefc80))
+* Improved <Dropdown> now supports JSX templates. ([e786052](https://github.com/react-toolbox/react-toolbox/commit/e786052))
+* Improved <Input/> ([4217e52](https://github.com/react-toolbox/react-toolbox/commit/4217e52))
+* Improved height for dataSource container & fixed typos. ([dd9d3e2](https://github.com/react-toolbox/react-toolbox/commit/dd9d3e2))
+* Improved localCSS for array ([b35e34e](https://github.com/react-toolbox/react-toolbox/commit/b35e34e))
+* Improvements in calendar component ([a6a52ea](https://github.com/react-toolbox/react-toolbox/commit/a6a52ea))
+* Improving autocomplete with object values (now you can set with [] or {key: value...} ([7d2e6f4](https://github.com/react-toolbox/react-toolbox/commit/7d2e6f4))
+* Improving UX ([19a04a6](https://github.com/react-toolbox/react-toolbox/commit/19a04a6))
+* Include webpack-dev-server ([410fe22](https://github.com/react-toolbox/react-toolbox/commit/410fe22))
+* Included <Checkbox> Example ([7fa57ba](https://github.com/react-toolbox/react-toolbox/commit/7fa57ba))
+* Initial commit ([b2f48b8](https://github.com/react-toolbox/react-toolbox/commit/b2f48b8))
+* Input ([d7c3d1f](https://github.com/react-toolbox/react-toolbox/commit/d7c3d1f))
+* Less specific selectores for dialog component ([fcbe81e](https://github.com/react-toolbox/react-toolbox/commit/fcbe81e))
+* list ([ca53e73](https://github.com/react-toolbox/react-toolbox/commit/ca53e73))
+* Little fixes for safari in checkbox ([16070cc](https://github.com/react-toolbox/react-toolbox/commit/16070cc))
+* Little fixes in slider and new approach to local css ([0c36b10](https://github.com/react-toolbox/react-toolbox/commit/0c36b10))
+* Little fixes in slider and remove explicit react dependency from it ([e01babc](https://github.com/react-toolbox/react-toolbox/commit/e01babc))
+* Little improvements in checkbox component ([fedb8f1](https://github.com/react-toolbox/react-toolbox/commit/fedb8f1))
+* Make clock able to change start move clicking on face ([0f8f7e8](https://github.com/react-toolbox/react-toolbox/commit/0f8f7e8))
+* Make the clock touch friendly ([af51771](https://github.com/react-toolbox/react-toolbox/commit/af51771))
+* Merge ([258260d](https://github.com/react-toolbox/react-toolbox/commit/258260d))
+* Migrate <Form> to sass ([e134971](https://github.com/react-toolbox/react-toolbox/commit/e134971))
+* Migrate button, ripple and font icon styles to sass and add sass tooling ([353bcea](https://github.com/react-toolbox/react-toolbox/commit/353bcea))
+* Migrate calendar to ES6 ([a5586f4](https://github.com/react-toolbox/react-toolbox/commit/a5586f4))
+* Migrate components index to es6 ([a4c59e4](https://github.com/react-toolbox/react-toolbox/commit/a4c59e4))
+* Migrate drawer styles to sass and improve button ([949db01](https://github.com/react-toolbox/react-toolbox/commit/949db01))
+* Migrate input to SCSS ([e8bab3d](https://github.com/react-toolbox/react-toolbox/commit/e8bab3d))
+* Migrate link to sass ([126fdb4](https://github.com/react-toolbox/react-toolbox/commit/126fdb4))
+* Migrate list to sass ([a866b7a](https://github.com/react-toolbox/react-toolbox/commit/a866b7a))
+* Migrate navigation styles ([46ce8ce](https://github.com/react-toolbox/react-toolbox/commit/46ce8ce))
+* Migrate progress bars to es6 ([74907a4](https://github.com/react-toolbox/react-toolbox/commit/74907a4))
+* Migrate progressbar and slider to sass ([dd864dc](https://github.com/react-toolbox/react-toolbox/commit/dd864dc))
+* Migrate progressbar to sass ([83cf581](https://github.com/react-toolbox/react-toolbox/commit/83cf581))
+* Migrate slider imports to ES6 imports ([85c7a83](https://github.com/react-toolbox/react-toolbox/commit/85c7a83))
+* Migrate style to sass for autocomplete ([74cc059](https://github.com/react-toolbox/react-toolbox/commit/74cc059))
+* Migrate tabs to sass ([f4f537b](https://github.com/react-toolbox/react-toolbox/commit/f4f537b))
+* Migrate time picker to sass ([06f1b86](https://github.com/react-toolbox/react-toolbox/commit/06f1b86))
+* Migrate time picker to use es6 helpers ([d1ad367](https://github.com/react-toolbox/react-toolbox/commit/d1ad367))
+* Migrate to React 0.14 and migrate date picker to sass ([c9b6f12](https://github.com/react-toolbox/react-toolbox/commit/c9b6f12))
+* Minimal changes ([2114955](https://github.com/react-toolbox/react-toolbox/commit/2114955))
+* Minimal changes ([1cc22ce](https://github.com/react-toolbox/react-toolbox/commit/1cc22ce))
+* Minimal changes ([6ad3197](https://github.com/react-toolbox/react-toolbox/commit/6ad3197))
+* MInimal changes ([d7050e4](https://github.com/react-toolbox/react-toolbox/commit/d7050e4))
+* Modify timepicker sizing ([b3ec693](https://github.com/react-toolbox/react-toolbox/commit/b3ec693))
+* More specific style for autocomplete ([bf6b53a](https://github.com/react-toolbox/react-toolbox/commit/bf6b53a))
+* Move button style to local css ([606a836](https://github.com/react-toolbox/react-toolbox/commit/606a836))
+* Move date picker to ES6 ([0960527](https://github.com/react-toolbox/react-toolbox/commit/0960527))
+* Move dialog classnames to the container ([a8c5de0](https://github.com/react-toolbox/react-toolbox/commit/a8c5de0))
+* Move time picker dialog to ES6 ([8cb2aa2](https://github.com/react-toolbox/react-toolbox/commit/8cb2aa2))
+* Move to degrees ([e0f1d57](https://github.com/react-toolbox/react-toolbox/commit/e0f1d57))
+* Multilevel serialize ([b831826](https://github.com/react-toolbox/react-toolbox/commit/b831826))
+* Multiple entry points ([083375c](https://github.com/react-toolbox/react-toolbox/commit/083375c))
+* Name input and dialog components ([334e4d0](https://github.com/react-toolbox/react-toolbox/commit/334e4d0))
+* Navigation ([7c9ef1e](https://github.com/react-toolbox/react-toolbox/commit/7c9ef1e))
+* new component <Dialog/> ([022c282](https://github.com/react-toolbox/react-toolbox/commit/022c282))
+* New component <Fieldset> ([9f303b5](https://github.com/react-toolbox/react-toolbox/commit/9f303b5))
+* New component <Menu> (basic visualization) ([dace527](https://github.com/react-toolbox/react-toolbox/commit/dace527))
+* New component <Navigation/> ([f226555](https://github.com/react-toolbox/react-toolbox/commit/f226555))
+* New components <Loading />, <Link />, <List /> ([b8a2fb8](https://github.com/react-toolbox/react-toolbox/commit/b8a2fb8))
+* New method and property "loading" ([91ee458](https://github.com/react-toolbox/react-toolbox/commit/91ee458))
+* New methods .blur and .focus ([5464fc5](https://github.com/react-toolbox/react-toolbox/commit/5464fc5))
+* New property 'icon' ([d516ff2](https://github.com/react-toolbox/react-toolbox/commit/d516ff2))
+* New property "count" ([f40ace6](https://github.com/react-toolbox/react-toolbox/commit/f40ace6))
+* New property "disabled" and refactor constants colors ([7fdbc0a](https://github.com/react-toolbox/react-toolbox/commit/7fdbc0a))
+* New property "label" ([a5388c5](https://github.com/react-toolbox/react-toolbox/commit/a5388c5))
+* New style for children HTML element small ([e880890](https://github.com/react-toolbox/react-toolbox/commit/e880890))
+* New types "image" "event" ([9a5b466](https://github.com/react-toolbox/react-toolbox/commit/9a5b466))
+* Normalize spec ([b038f70](https://github.com/react-toolbox/react-toolbox/commit/b038f70))
+* Now supports <Checkbox>, <DatePicker> <RadioGroup>, <Slider> and <TimePicker> ([a951f00](https://github.com/react-toolbox/react-toolbox/commit/a951f00))
+* Now when select a option dispatch a <Ripple/> and use component in <Form/> ([b99c174](https://github.com/react-toolbox/react-toolbox/commit/b99c174))
+* Optimized storage when <Form/> is overwritted with new properties ([b45f0c0](https://github.com/react-toolbox/react-toolbox/commit/b45f0c0))
+* Pointer in active tab ([6b44db7](https://github.com/react-toolbox/react-toolbox/commit/6b44db7))
+* Port aside to ES6 ([b5e666a](https://github.com/react-toolbox/react-toolbox/commit/b5e666a))
+* Port autocomplete to ES6 and bugfixes ([6aca3d6](https://github.com/react-toolbox/react-toolbox/commit/6aca3d6))
+* Port slider to ES6 ([0c48f3d](https://github.com/react-toolbox/react-toolbox/commit/0c48f3d))
+* Port timepicker index to ES6 ([15d8f47](https://github.com/react-toolbox/react-toolbox/commit/15d8f47))
+* Port to ES6 import all pickers files ([3de7e8e](https://github.com/react-toolbox/react-toolbox/commit/3de7e8e))
+* Proper buttons name for spec drawer ([75bb522](https://github.com/react-toolbox/react-toolbox/commit/75bb522))
+* Put pickers together in test component ([57b74da](https://github.com/react-toolbox/react-toolbox/commit/57b74da))
+* React-Toolbox is the final name. ([1705e56](https://github.com/react-toolbox/react-toolbox/commit/1705e56))
+* Reduce clock container spacing ([9aeebc8](https://github.com/react-toolbox/react-toolbox/commit/9aeebc8))
+* Refactor <Card/> and SaSS ([dbd6f5b](https://github.com/react-toolbox/react-toolbox/commit/dbd6f5b))
+* Refactor autocomplete ([736fce8](https://github.com/react-toolbox/react-toolbox/commit/736fce8))
+* Refactor clock ([16ac6b2](https://github.com/react-toolbox/react-toolbox/commit/16ac6b2))
+* Refactor date picker dialog to sass ([2cb5d24](https://github.com/react-toolbox/react-toolbox/commit/2cb5d24))
+* Refactor hours and minutes ([cbcd661](https://github.com/react-toolbox/react-toolbox/commit/cbcd661))
+* Refactor name ([8694c81](https://github.com/react-toolbox/react-toolbox/commit/8694c81))
+* Refactor progressbar test ([7151545](https://github.com/react-toolbox/react-toolbox/commit/7151545))
+* Refactor progressbar to use local css ([083b32f](https://github.com/react-toolbox/react-toolbox/commit/083b32f))
+* Refactor slider ([c911350](https://github.com/react-toolbox/react-toolbox/commit/c911350))
+* Refactor timepicker and utils organization ([459aaef](https://github.com/react-toolbox/react-toolbox/commit/459aaef))
+* Refactor to ES6 timepicker component ([2434b00](https://github.com/react-toolbox/react-toolbox/commit/2434b00))
+* Refolder components for a better require flow. ([5bcf990](https://github.com/react-toolbox/react-toolbox/commit/5bcf990))
+* Release 0.10.20 ([4430c0a](https://github.com/react-toolbox/react-toolbox/commit/4430c0a))
+* Release 0.6.20 ([2c33719](https://github.com/react-toolbox/react-toolbox/commit/2c33719))
+* Release 0.6.28 - New component <Dropdown/> and enhaced in general context. ([2584259](https://github.com/react-toolbox/react-toolbox/commit/2584259))
+* Remove Coffeescript ([e875c48](https://github.com/react-toolbox/react-toolbox/commit/e875c48))
+* Remove coffeescript date utils and use es6 ([e3d899c](https://github.com/react-toolbox/react-toolbox/commit/e3d899c))
+* Remove css modules ([d9b329c](https://github.com/react-toolbox/react-toolbox/commit/d9b329c))
+* Remove default space for buttons ([d85faed](https://github.com/react-toolbox/react-toolbox/commit/d85faed))
+* Remove empty variable ([f204ce4](https://github.com/react-toolbox/react-toolbox/commit/f204ce4))
+* Remove explicit react dependency from input component ([4934975](https://github.com/react-toolbox/react-toolbox/commit/4934975))
+* Remove linter errors ([6bb85a4](https://github.com/react-toolbox/react-toolbox/commit/6bb85a4))
+* Remove react css modules from font ico ([bd50f1d](https://github.com/react-toolbox/react-toolbox/commit/bd50f1d))
+* Remove react explicit dependency in progressbar test ([285361f](https://github.com/react-toolbox/react-toolbox/commit/285361f))
+* Remove react warnings for slider ([82ce479](https://github.com/react-toolbox/react-toolbox/commit/82ce479))
+* Remove stylus ([8f25136](https://github.com/react-toolbox/react-toolbox/commit/8f25136))
+* Remove test utils ([fe1aecd](https://github.com/react-toolbox/react-toolbox/commit/fe1aecd))
+* Remove unnecesary ([9ba11dc](https://github.com/react-toolbox/react-toolbox/commit/9ba11dc))
+* Rename aside to drawer ([32e1c4e](https://github.com/react-toolbox/react-toolbox/commit/32e1c4e))
+* Rename coffescript version ([2fcdbf1](https://github.com/react-toolbox/react-toolbox/commit/2fcdbf1))
+* Rename documentation file ([6bd095e](https://github.com/react-toolbox/react-toolbox/commit/6bd095e))
+* Rename util to utils ([447abe5](https://github.com/react-toolbox/react-toolbox/commit/447abe5))
+* Reorder colors ([d9cfd7a](https://github.com/react-toolbox/react-toolbox/commit/d9cfd7a))
+* Reorder properties in MD and in CJSX ([e174374](https://github.com/react-toolbox/react-toolbox/commit/e174374))
+* Reorder styles and common variables ([84b15e1](https://github.com/react-toolbox/react-toolbox/commit/84b15e1))
+* Reorganize test components ([2292120](https://github.com/react-toolbox/react-toolbox/commit/2292120))
+* Restore original variables scss ([d24205e](https://github.com/react-toolbox/react-toolbox/commit/d24205e))
+* Retrieve all available components ([f1fc317](https://github.com/react-toolbox/react-toolbox/commit/f1fc317))
+* Rewrite button in ES6 and refactor the ripple effect on it ([cac6eed](https://github.com/react-toolbox/react-toolbox/commit/cac6eed))
+* Rewrite card in ES6 ([e3e4121](https://github.com/react-toolbox/react-toolbox/commit/e3e4121))
+* Rewrite clock ([26cef5f](https://github.com/react-toolbox/react-toolbox/commit/26cef5f))
+* Rewrite component tests in ES6 ([e87523b](https://github.com/react-toolbox/react-toolbox/commit/e87523b))
+* Rewrite dialog in ES6 ([9630817](https://github.com/react-toolbox/react-toolbox/commit/9630817))
+* Rewrite dropdown in ES6 ([f27be7a](https://github.com/react-toolbox/react-toolbox/commit/f27be7a))
+* Rewrite example in ES6 ([66fcb6d](https://github.com/react-toolbox/react-toolbox/commit/66fcb6d))
+* Rewrite font icon in ES6 ([4074852](https://github.com/react-toolbox/react-toolbox/commit/4074852))
+* Rewrite form in ES6 ([d0ab1dd](https://github.com/react-toolbox/react-toolbox/commit/d0ab1dd))
+* Rewrite in ES6 link and navigation ([3696832](https://github.com/react-toolbox/react-toolbox/commit/3696832))
+* rewrite input in es6 ([e223c59](https://github.com/react-toolbox/react-toolbox/commit/e223c59))
+* Rewrite karma config in ES6 ([1ba0416](https://github.com/react-toolbox/react-toolbox/commit/1ba0416))
+* Rewrite list in ES6 ([1747330](https://github.com/react-toolbox/react-toolbox/commit/1747330))
+* Rewrite loading in ES6 ([8fa4c7c](https://github.com/react-toolbox/react-toolbox/commit/8fa4c7c))
+* Rewrite ripple in ES6 and update its dependencies ([44cab7f](https://github.com/react-toolbox/react-toolbox/commit/44cab7f))
+* Rewrite switch in ES6 ([78a3a0e](https://github.com/react-toolbox/react-toolbox/commit/78a3a0e))
+* Rewrite tabs in ES6 ([d833412](https://github.com/react-toolbox/react-toolbox/commit/d833412))
+* Rewrite webpack config in JS ([4b834a0](https://github.com/react-toolbox/react-toolbox/commit/4b834a0))
+* ripple ([0b45fca](https://github.com/react-toolbox/react-toolbox/commit/0b45fca))
+* Run tests with PhantomJS and load react from karma loader ([8f19493](https://github.com/react-toolbox/react-toolbox/commit/8f19493))
+* Selecting values in <Autocomplete /> ([911955e](https://github.com/react-toolbox/react-toolbox/commit/911955e))
+* Send data and instance ([7bc1aa7](https://github.com/react-toolbox/react-toolbox/commit/7bc1aa7))
+* Set default value for fieldset type option ([d5be4f1](https://github.com/react-toolbox/react-toolbox/commit/d5be4f1))
+* Set font sizes in rems ([42dd433](https://github.com/react-toolbox/react-toolbox/commit/42dd433))
+* Set up date picker to use months and years selectors in calendar ([8bfb3fa](https://github.com/react-toolbox/react-toolbox/commit/8bfb3fa))
+* Setting values by default ([8b3d9b3](https://github.com/react-toolbox/react-toolbox/commit/8b3d9b3))
+* Solve flicker bug with ripple in safari ([9dfd87e](https://github.com/react-toolbox/react-toolbox/commit/9dfd87e))
+* string convention ([ada0436](https://github.com/react-toolbox/react-toolbox/commit/ada0436))
+* String convention ([910277d](https://github.com/react-toolbox/react-toolbox/commit/910277d))
+* Suggestions direction and width based in :root ([92fd577](https://github.com/react-toolbox/react-toolbox/commit/92fd577))
+* switch ([4d35a66](https://github.com/react-toolbox/react-toolbox/commit/4d35a66))
+* Test <button/>'s ([e45b47b](https://github.com/react-toolbox/react-toolbox/commit/e45b47b))
+* Test proof of concept ([7958fad](https://github.com/react-toolbox/react-toolbox/commit/7958fad))
+* Time picker first implementation ([5f62ce2](https://github.com/react-toolbox/react-toolbox/commit/5f62ce2))
+* Uniform styles in <Autocomplete> and <Dropdown> ([736846a](https://github.com/react-toolbox/react-toolbox/commit/736846a))
+* Unnecessary component ([906a458](https://github.com/react-toolbox/react-toolbox/commit/906a458))
+* Update authors and scripts ([a3b9b8c](https://github.com/react-toolbox/react-toolbox/commit/a3b9b8c))
+* Update calendar with a year selector ([5dd406d](https://github.com/react-toolbox/react-toolbox/commit/5dd406d))
+* Update karma and karma webpack ([09adc4c](https://github.com/react-toolbox/react-toolbox/commit/09adc4c))
+* Update node version for travis ([e049a08](https://github.com/react-toolbox/react-toolbox/commit/e049a08))
+* Update progress_bar.md ([b197237](https://github.com/react-toolbox/react-toolbox/commit/b197237))
+* Update README.md ([888e973](https://github.com/react-toolbox/react-toolbox/commit/888e973))
+* Update README.md ([e79fe92](https://github.com/react-toolbox/react-toolbox/commit/e79fe92))
+* Update README.md ([a4cb32b](https://github.com/react-toolbox/react-toolbox/commit/a4cb32b))
+* Use className as property ([fca4d8a](https://github.com/react-toolbox/react-toolbox/commit/fca4d8a))
+* Use data-react-toolbox for metrics. ([021f37d](https://github.com/react-toolbox/react-toolbox/commit/021f37d))
+* Use data-ref in progress bar to modify internal dependent component style ([5a5e7ad](https://github.com/react-toolbox/react-toolbox/commit/5a5e7ad))
+* Use E6 syntax to handle modules in progressbar and slider ([8ae72a8](https://github.com/react-toolbox/react-toolbox/commit/8ae72a8))
+* Use Heading sizes ([10c34a7](https://github.com/react-toolbox/react-toolbox/commit/10c34a7))
+* Use label in upper level ([83b9c43](https://github.com/react-toolbox/react-toolbox/commit/83b9c43))
+* Use Material Design naming for stylesheets. ([3912b92](https://github.com/react-toolbox/react-toolbox/commit/3912b92))
+* Use new dataSource in <Dropdown/> ([79f5cd8](https://github.com/react-toolbox/react-toolbox/commit/79f5cd8))
+* Use typography mixin in buttons ([c5d6c5b](https://github.com/react-toolbox/react-toolbox/commit/c5d6c5b))
+* User Google Webfont ([553e216](https://github.com/react-toolbox/react-toolbox/commit/553e216))
+* User pure render and refactoring for time picker ([0d22fa2](https://github.com/react-toolbox/react-toolbox/commit/0d22fa2))
+* UX from Session to Console ([0fd99c3](https://github.com/react-toolbox/react-toolbox/commit/0fd99c3))
+* When type is "hidden" add className .hidden ([ff7965b](https://github.com/react-toolbox/react-toolbox/commit/ff7965b))
+* You can select item with keyboards ([3a2f880](https://github.com/react-toolbox/react-toolbox/commit/3a2f880))
+* Bugfix: Set a proper transform origin ([b907fb9](https://github.com/react-toolbox/react-toolbox/commit/b907fb9))
+* Bugfix: set animation iteration count as infinite in ripple loading ([76774a0](https://github.com/react-toolbox/react-toolbox/commit/76774a0))
+* Bugfix: set proper height for buttons ([0780c5a](https://github.com/react-toolbox/react-toolbox/commit/0780c5a))
+* Bugfix: take into account 24hr format when trimming hours in clock ([efdc0fa](https://github.com/react-toolbox/react-toolbox/commit/efdc0fa))
+
+
+
diff --git a/README.md b/README.md
index 239a4f415..cffe52929 100644
--- a/README.md
+++ b/README.md
@@ -1,76 +1,227 @@
-# React Toolbox
+# <a href='http://react-toolbox.com/'><img src='https://dl.dropboxusercontent.com/u/2247264/banner.png' height='50'></a>
 
-![Last version](https://img.shields.io/github/tag/react-toolbox/react-toolbox.svg?style=flat-square)
-[![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox)
-[![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox)
-[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-toolbox/react-toolbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
+[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [Webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
-React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox);
+React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
+```bash
+$ npm install --save react-toolbox
 ```
-npm install --save react-toolbox
+
+## Prerequisites
+
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written in [SASS](http://sass-lang.com/). In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.
+
+Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement.
+
+Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look to [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make component easily themeable.
+
+## Basic usage
+
+In this minimal example, we import a `Button` with styles already bundled:
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'react-toolbox/lib/button';
+
+ReactDOM.render(
+  <Button label="Hello World!" />,
+  document.getElementById('app')
+);
+```
+
+Take into account that any required style will be included in the final CSS so your final would include `Button` styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it.
+
+## Importing components
+
+First let's take a look on how the components are structured in the project. The [components](https://github.com/react-toolbox/react-toolbox/tree/dev/components) folder contains a folder for each component or set of related components. For example, the `app_bar`:
+
+```
+ |- /app_bar
+ |---- AppBar.js
+ |---- _config.scss
+ |---- index.js
+ |---- readme.md
+ |---- theme.scss
+```
+
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme SASS stylesheet and a configuration partial with configuration variables. Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
+
+### Bundled component
+
+You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:
+
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar';
 ```
 
-## Usage
+### Raw component
 
-Although there are other ways to use React Toolbox, the recommended way is to create a Webpack workflow with [Babel Loader](https://github.com/babel/babel-loader), [CSS Loader](https://github.com/webpack/css-loader) and [SASS Loader](https://github.com/jtangelder/sass-loader). A good starting point is [React Hot Webpack Boilerplate](https://github.com/gaearon/react-hot-boilerplate).
+You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
 
-Once you have the workflow ready, you can just require and use the components:
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';
+```
 
-```jsx
+## Customizing components
+
+Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented **classname API** so if you want to customize a component, you just need to provide a theme object with the appropriated classname  mapping.  
+
+If the component has already a theme injected, the properties you pass will be merged with the injected. In this way, you can **add** classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the `AppBar` to be purple:
+
+```js
 import React from 'react';
-import Button from 'react-toolbox/lib/button';
+import { AppBar } from 'react-toolbox/lib/app_bar';
+import theme from './PurpleAppBar.scss';
 
-const CustomButton = () => (
-  <Button label="Hello world" kind="raised" accent />
+const PurpleAppBar = (props) => (
+  <AppBar {...props} theme={theme} />
 );
 
-export default CustomButton;
+export default PurpleAppBar;
+
+```
+
+```scss
+.appBar {
+  background-color: #800080;
+}
+```
+
+In this case we are **adding** styles to an `AppBar` component that already has some styles injected. It works because the component background by default has the same priority as the one we added. There will be cases where the original rule is more restrictive. For those cases you would need to boost priority using the same restrictions as in the original stylesheet. Feel free to take a look into the original themes or just check the selectors you want to override in DevTools.
+
+If the component has no styles injected, you should provide a theme object implementing the full API. You are free to require the CSS Module you want but take into account that every classname is there for a reason. You can either provide a theme via prop or via context as we will see later.
+
+## Theming
+
+You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_colors.scss) and [globals](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_globals.scss) files to get an overview on the **variables** you have to override to get the results you want.
+
+In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a `_theme.scss` SASS file:
+
+```scss
+@import "http://github.com/~react-toolbox/lib/colors";
+
+$color-primary: $palette-blue-500;
+$color-primary-dark: $palette-blue-700;
 ```
 
-The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **SASS** of the component. 
+This file should be prepended to each stylesheet compilation which can be achieved in multiple ways.
 
-We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
+### Using SASS Loader
 
-## Customization
+If you are using  [Webpack](http://webpack.github.io/) as module bundler, you are probably using [sass-loader](https://github.com/jtangelder/sass-loader) as well. What we want to do is to prepend to each SASS file compilation a bunch of variables to override and this can be done with the `data` option. For example:
 
-Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:
+```js
+sassLoader: {
+  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+}
+```
 
-### Via React Toolbox Loader
+In this case we are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.
 
-Thanks to the power of SASS, all components in React Toolbox are configured from a variables file. The best way to customize your build is to create a custom configuration SASS file overriding configuration variables like colors or sizes.
+### Using SASS imports and props
 
-With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want. 
+Remember that you can import components without styles and provide those styles using the theme property. For example, a theme for a button customized with the previous theme file would be like:
 
-### Via `className` property
+```scss
+@import "http://github.com/theme.scss";
+@import "http://github.com/~react-toolbox/lib/button/theme";
+```
+
+Then, when you use a button you can inject the appropriated theme:
 
-Generally each component will have a `className` prop so you can tell the class name you want to keep in the root node of the resulting markup. All markup is style with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
+```js
+import { Button } from 'react-toolbox/lib/button/Button';
+import buttonTheme from './theme/button.scss';
 
-```jsx
-const CustomButton = () => (
-  <Button className='customized' label='Custom button' />
+const ThemedButton = (props) => (
+  <Button theme={buttonTheme}  {...props} />
 );
+
+export default ThemedButton;
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-role="label"` so you can avoid styling directly tag names. You can now write your CSS:
+With this technique you have to create wrappers for every component and this is not cool at all... but don't worry, we can provide the theme via context to avoid this.
+
+### Using SASS imports and context
 
-```css
-.customized > [data-role="label"] {
-  color: green;
-  font-weight: bold;
+This is a good moment to check out [react-css-themr](http://github.com/javivelasco/react-css-themr) if you still didn't. Every component in React Toolbox has a key assigned that can be used to provide a default CSS Module. You can create a theme like:
+
+```js
+export default {
+  RTRipple: require('./ripple.scss'),
+  RTButton: require('./button.scss')
 }
 ```
 
+Check for each component what key uses. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here:
+
+```js
+import React from 'react';
+import { render } from 'react-dom';
+import { ThemeProvider } from 'react-css-themr';
+import theme from './theme/theme.js';
+import App from './App.js';
+
+render(
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>
+, document.getElementById('app'))
+```
+
+A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them.
+
+Also, recall that all components accepts a theme verifying required classNames but there may be some missing. If any property is missing you can check the selectors you want to override straight in the DevTools.
+
+## Roboto Font and Material Design Icons
+
+React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
+
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
+
+## Server Side Rendering
+
+The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like [CSS Modules register hook](https://github.com/css-modules/css-modules-require-hook) or [Webpack Isomorphic tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). Also, make sure you can import from `node_modules`.
+
+## Examples
+
+For now we have a [repository example](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository.
+
+## TypeScript
+
+TypeScript external module definition files are included, and should not require any manual steps to utilize. They will be picked up by the TypeScript compiler when importing from the npm package.
+
+Note that to comply with the official recommendation for npm typings, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
+
 ## Authors and Contributors
 
 The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
 
-To work in the project you'd need a `node` version with ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the packages has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
+To work in the project you'd need a `node` version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the package has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
+
+To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:
+
+```
+$ git clone https://github.com/react-toolbox/react-toolbox.git
+$ cd react-toolbox/
+$ npm install
+$ cd docs/
+$ npm install
+$ npm start
+```
+
+Local documentation will then be available at `http://localhost:8081/`.
+
+## Extensions
+
+We don't officially support components that are not covered by [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html). If you want to implement some complementary component feel free to open a PR adding your a link in this section. For now you can check [on github: react-toolbox-additions](https://github.com/MaximKomlev/react-toolbox-additions) and [on npm: react-toolbox-additions](https://www.npmjs.com/package/react-toolbox-additions).
+
+## License
 
-## License 
 This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).
diff --git a/components/_base.scss b/components/_base.scss
deleted file mode 100644
index 578c2892a..000000000
--- a/components/_base.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$theme-building: false !default;
-
-@if $theme-building != true {
-  @import "http://github.com/colors";
-}
-
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
diff --git a/components/_colors.scss b/components/_colors.scss
index 6888abe76..c2eb5099c 100644
--- a/components/_colors.scss
+++ b/components/_colors.scss
@@ -1,571 +1,299 @@
 //-- Color definitions taken from Material Design Lite
-$palette-red:
-"255,235,238"
-"255,205,210"
-"239,154,154"
-"229,115,115"
-"239,83,80"
-"244,67,54"
-"229,57,53"
-"211,47,47"
-"198,40,40"
-"183,28,28"
-"255,138,128"
-"255,82,82"
-"255,23,68"
-"213,0,0";
 
-$palette-red-50: nth($palette-red, 1);
-$palette-red-100: nth($palette-red, 2);
-$palette-red-200: nth($palette-red, 3);
-$palette-red-300: nth($palette-red, 4);
-$palette-red-400: nth($palette-red, 5);
-$palette-red-500: nth($palette-red, 6);
-$palette-red-600: nth($palette-red, 7);
-$palette-red-700: nth($palette-red, 8);
-$palette-red-800: nth($palette-red, 9);
-$palette-red-900: nth($palette-red, 10);
-$palette-red-a100: nth($palette-red, 11);
-$palette-red-a200: nth($palette-red, 12);
-$palette-red-a400: nth($palette-red, 13);
-$palette-red-a700: nth($palette-red, 14);
-
-$palette-pink:
-"252,228,236"
-"248,187,208"
-"244,143,177"
-"240,98,146"
-"236,64,122"
-"233,30,99"
-"216,27,96"
-"194,24,91"
-"173,20,87"
-"136,14,79"
-"255,128,171"
-"255,64,129"
-"245,0,87"
-"197,17,98";
-
-$palette-pink-50: nth($palette-pink, 1);
-$palette-pink-100: nth($palette-pink, 2);
-$palette-pink-200: nth($palette-pink, 3);
-$palette-pink-300: nth($palette-pink, 4);
-$palette-pink-400: nth($palette-pink, 5);
-$palette-pink-500: nth($palette-pink, 6);
-$palette-pink-600: nth($palette-pink, 7);
-$palette-pink-700: nth($palette-pink, 8);
-$palette-pink-800: nth($palette-pink, 9);
-$palette-pink-900: nth($palette-pink, 10);
-$palette-pink-a100: nth($palette-pink, 11);
-$palette-pink-a200: nth($palette-pink, 12);
-$palette-pink-a400: nth($palette-pink, 13);
-$palette-pink-a700: nth($palette-pink, 14);
-
-$palette-purple:
-"243,229,245"
-"225,190,231"
-"206,147,216"
-"186,104,200"
-"171,71,188"
-"156,39,176"
-"142,36,170"
-"123,31,162"
-"106,27,154"
-"74,20,140"
-"234,128,252"
-"224,64,251"
-"213,0,249"
-"170,0,255";
-
-$palette-purple-50: nth($palette-purple, 1);
-$palette-purple-100: nth($palette-purple, 2);
-$palette-purple-200: nth($palette-purple, 3);
-$palette-purple-300: nth($palette-purple, 4);
-$palette-purple-400: nth($palette-purple, 5);
-$palette-purple-500: nth($palette-purple, 6);
-$palette-purple-600: nth($palette-purple, 7);
-$palette-purple-700: nth($palette-purple, 8);
-$palette-purple-800: nth($palette-purple, 9);
-$palette-purple-900: nth($palette-purple, 10);
-$palette-purple-a100: nth($palette-purple, 11);
-$palette-purple-a200: nth($palette-purple, 12);
-$palette-purple-a400: nth($palette-purple, 13);
-$palette-purple-a700: nth($palette-purple, 14);
-
-$palette-deep-purple:
-"237,231,246"
-"209,196,233"
-"179,157,219"
-"149,117,205"
-"126,87,194"
-"103,58,183"
-"94,53,177"
-"81,45,168"
-"69,39,160"
-"49,27,146"
-"179,136,255"
-"124,77,255"
-"101,31,255"
-"98,0,234";
-
-$palette-deep-purple-50: nth($palette-deep-purple, 1);
-$palette-deep-purple-100: nth($palette-deep-purple, 2);
-$palette-deep-purple-200: nth($palette-deep-purple, 3);
-$palette-deep-purple-300: nth($palette-deep-purple, 4);
-$palette-deep-purple-400: nth($palette-deep-purple, 5);
-$palette-deep-purple-500: nth($palette-deep-purple, 6);
-$palette-deep-purple-600: nth($palette-deep-purple, 7);
-$palette-deep-purple-700: nth($palette-deep-purple, 8);
-$palette-deep-purple-800: nth($palette-deep-purple, 9);
-$palette-deep-purple-900: nth($palette-deep-purple, 10);
-$palette-deep-purple-a100: nth($palette-deep-purple, 11);
-$palette-deep-purple-a200: nth($palette-deep-purple, 12);
-$palette-deep-purple-a400: nth($palette-deep-purple, 13);
-$palette-deep-purple-a700: nth($palette-deep-purple, 14);
-
-$palette-indigo:
-"232,234,246"
-"197,202,233"
-"159,168,218"
-"121,134,203"
-"92,107,192"
-"63,81,181"
-"57,73,171"
-"48,63,159"
-"40,53,147"
-"26,35,126"
-"140,158,255"
-"83,109,254"
-"61,90,254"
-"48,79,254";
-
-$palette-indigo-50: nth($palette-indigo, 1);
-$palette-indigo-100: nth($palette-indigo, 2);
-$palette-indigo-200: nth($palette-indigo, 3);
-$palette-indigo-300: nth($palette-indigo, 4);
-$palette-indigo-400: nth($palette-indigo, 5);
-$palette-indigo-500: nth($palette-indigo, 6);
-$palette-indigo-600: nth($palette-indigo, 7);
-$palette-indigo-700: nth($palette-indigo, 8);
-$palette-indigo-800: nth($palette-indigo, 9);
-$palette-indigo-900: nth($palette-indigo, 10);
-$palette-indigo-a100: nth($palette-indigo, 11);
-$palette-indigo-a200: nth($palette-indigo, 12);
-$palette-indigo-a400: nth($palette-indigo, 13);
-$palette-indigo-a700: nth($palette-indigo, 14);
-
-$palette-blue:
-"227,242,253"
-"187,222,251"
-"144,202,249"
-"100,181,246"
-"66,165,245"
-"33,150,243"
-"30,136,229"
-"25,118,210"
-"21,101,192"
-"13,71,161"
-"130,177,255"
-"68,138,255"
-"41,121,255"
-"41,98,255";
-
-$palette-blue-50: nth($palette-blue, 1);
-$palette-blue-100: nth($palette-blue, 2);
-$palette-blue-200: nth($palette-blue, 3);
-$palette-blue-300: nth($palette-blue, 4);
-$palette-blue-400: nth($palette-blue, 5);
-$palette-blue-500: nth($palette-blue, 6);
-$palette-blue-600: nth($palette-blue, 7);
-$palette-blue-700: nth($palette-blue, 8);
-$palette-blue-800: nth($palette-blue, 9);
-$palette-blue-900: nth($palette-blue, 10);
-$palette-blue-a100: nth($palette-blue, 11);
-$palette-blue-a200: nth($palette-blue, 12);
-$palette-blue-a400: nth($palette-blue, 13);
-$palette-blue-a700: nth($palette-blue, 14);
-
-$palette-light-blue:
-"225,245,254"
-"179,229,252"
-"129,212,250"
-"79,195,247"
-"41,182,246"
-"3,169,244"
-"3,155,229"
-"2,136,209"
-"2,119,189"
-"1,87,155"
-"128,216,255"
-"64,196,255"
-"0,176,255"
-"0,145,234";
-
-$palette-light-blue-50: nth($palette-light-blue, 1);
-$palette-light-blue-100: nth($palette-light-blue, 2);
-$palette-light-blue-200: nth($palette-light-blue, 3);
-$palette-light-blue-300: nth($palette-light-blue, 4);
-$palette-light-blue-400: nth($palette-light-blue, 5);
-$palette-light-blue-500: nth($palette-light-blue, 6);
-$palette-light-blue-600: nth($palette-light-blue, 7);
-$palette-light-blue-700: nth($palette-light-blue, 8);
-$palette-light-blue-800: nth($palette-light-blue, 9);
-$palette-light-blue-900: nth($palette-light-blue, 10);
-$palette-light-blue-a100: nth($palette-light-blue, 11);
-$palette-light-blue-a200: nth($palette-light-blue, 12);
-$palette-light-blue-a400: nth($palette-light-blue, 13);
-$palette-light-blue-a700: nth($palette-light-blue, 14);
-
-$palette-cyan:
-"224,247,250"
-"178,235,242"
-"128,222,234"
-"77,208,225"
-"38,198,218"
-"0,188,212"
-"0,172,193"
-"0,151,167"
-"0,131,143"
-"0,96,100"
-"132,255,255"
-"24,255,255"
-"0,229,255"
-"0,184,212";
-
-$palette-cyan-50: nth($palette-cyan, 1);
-$palette-cyan-100: nth($palette-cyan, 2);
-$palette-cyan-200: nth($palette-cyan, 3);
-$palette-cyan-300: nth($palette-cyan, 4);
-$palette-cyan-400: nth($palette-cyan, 5);
-$palette-cyan-500: nth($palette-cyan, 6);
-$palette-cyan-600: nth($palette-cyan, 7);
-$palette-cyan-700: nth($palette-cyan, 8);
-$palette-cyan-800: nth($palette-cyan, 9);
-$palette-cyan-900: nth($palette-cyan, 10);
-$palette-cyan-a100: nth($palette-cyan, 11);
-$palette-cyan-a200: nth($palette-cyan, 12);
-$palette-cyan-a400: nth($palette-cyan, 13);
-$palette-cyan-a700: nth($palette-cyan, 14);
-
-$palette-teal:
-"224,242,241"
-"178,223,219"
-"128,203,196"
-"77,182,172"
-"38,166,154"
-"0,150,136"
-"0,137,123"
-"0,121,107"
-"0,105,92"
-"0,77,64"
-"167,255,235"
-"100,255,218"
-"29,233,182"
-"0,191,165";
-
-$palette-teal-50: nth($palette-teal, 1);
-$palette-teal-100: nth($palette-teal, 2);
-$palette-teal-200: nth($palette-teal, 3);
-$palette-teal-300: nth($palette-teal, 4);
-$palette-teal-400: nth($palette-teal, 5);
-$palette-teal-500: nth($palette-teal, 6);
-$palette-teal-600: nth($palette-teal, 7);
-$palette-teal-700: nth($palette-teal, 8);
-$palette-teal-800: nth($palette-teal, 9);
-$palette-teal-900: nth($palette-teal, 10);
-$palette-teal-a100: nth($palette-teal, 11);
-$palette-teal-a200: nth($palette-teal, 12);
-$palette-teal-a400: nth($palette-teal, 13);
-$palette-teal-a700: nth($palette-teal, 14);
-
-$palette-green:
-"232,245,233"
-"200,230,201"
-"165,214,167"
-"129,199,132"
-"102,187,106"
-"76,175,80"
-"67,160,71"
-"56,142,60"
-"46,125,50"
-"27,94,32"
-"185,246,202"
-"105,240,174"
-"0,230,118"
-"0,200,83";
-
-$palette-green-50: nth($palette-green, 1);
-$palette-green-100: nth($palette-green, 2);
-$palette-green-200: nth($palette-green, 3);
-$palette-green-300: nth($palette-green, 4);
-$palette-green-400: nth($palette-green, 5);
-$palette-green-500: nth($palette-green, 6);
-$palette-green-600: nth($palette-green, 7);
-$palette-green-700: nth($palette-green, 8);
-$palette-green-800: nth($palette-green, 9);
-$palette-green-900: nth($palette-green, 10);
-$palette-green-a100: nth($palette-green, 11);
-$palette-green-a200: nth($palette-green, 12);
-$palette-green-a400: nth($palette-green, 13);
-$palette-green-a700: nth($palette-green, 14);
-
-$palette-light-green:
-"241,248,233"
-"220,237,200"
-"197,225,165"
-"174,213,129"
-"156,204,101"
-"139,195,74"
-"124,179,66"
-"104,159,56"
-"85,139,47"
-"51,105,30"
-"204,255,144"
-"178,255,89"
-"118,255,3"
-"100,221,23";
-
-$palette-light-green-50: nth($palette-light-green, 1);
-$palette-light-green-100: nth($palette-light-green, 2);
-$palette-light-green-200: nth($palette-light-green, 3);
-$palette-light-green-300: nth($palette-light-green, 4);
-$palette-light-green-400: nth($palette-light-green, 5);
-$palette-light-green-500: nth($palette-light-green, 6);
-$palette-light-green-600: nth($palette-light-green, 7);
-$palette-light-green-700: nth($palette-light-green, 8);
-$palette-light-green-800: nth($palette-light-green, 9);
-$palette-light-green-900: nth($palette-light-green, 10);
-$palette-light-green-a100: nth($palette-light-green, 11);
-$palette-light-green-a200: nth($palette-light-green, 12);
-$palette-light-green-a400: nth($palette-light-green, 13);
-$palette-light-green-a700: nth($palette-light-green, 14);
-
-$palette-lime:
-"249,251,231"
-"240,244,195"
-"230,238,156"
-"220,231,117"
-"212,225,87"
-"205,220,57"
-"192,202,51"
-"175,180,43"
-"158,157,36"
-"130,119,23"
-"244,255,129"
-"238,255,65"
-"198,255,0"
-"174,234,0";
-
-$palette-lime-50: nth($palette-lime, 1);
-$palette-lime-100: nth($palette-lime, 2);
-$palette-lime-200: nth($palette-lime, 3);
-$palette-lime-300: nth($palette-lime, 4);
-$palette-lime-400: nth($palette-lime, 5);
-$palette-lime-500: nth($palette-lime, 6);
-$palette-lime-600: nth($palette-lime, 7);
-$palette-lime-700: nth($palette-lime, 8);
-$palette-lime-800: nth($palette-lime, 9);
-$palette-lime-900: nth($palette-lime, 10);
-$palette-lime-a100: nth($palette-lime, 11);
-$palette-lime-a200: nth($palette-lime, 12);
-$palette-lime-a400: nth($palette-lime, 13);
-$palette-lime-a700: nth($palette-lime, 14);
-
-$palette-yellow:
-"255,253,231"
-"255,249,196"
-"255,245,157"
-"255,241,118"
-"255,238,88"
-"255,235,59"
-"253,216,53"
-"251,192,45"
-"249,168,37"
-"245,127,23"
-"255,255,141"
-"255,255,0"
-"255,234,0"
-"255,214,0";
-
-$palette-yellow-50: nth($palette-yellow, 1);
-$palette-yellow-100: nth($palette-yellow, 2);
-$palette-yellow-200: nth($palette-yellow, 3);
-$palette-yellow-300: nth($palette-yellow, 4);
-$palette-yellow-400: nth($palette-yellow, 5);
-$palette-yellow-500: nth($palette-yellow, 6);
-$palette-yellow-600: nth($palette-yellow, 7);
-$palette-yellow-700: nth($palette-yellow, 8);
-$palette-yellow-800: nth($palette-yellow, 9);
-$palette-yellow-900: nth($palette-yellow, 10);
-$palette-yellow-a100: nth($palette-yellow, 11);
-$palette-yellow-a200: nth($palette-yellow, 12);
-$palette-yellow-a400: nth($palette-yellow, 13);
-$palette-yellow-a700: nth($palette-yellow, 14);
-
-$palette-amber:
-"255,248,225"
-"255,236,179"
-"255,224,130"
-"255,213,79"
-"255,202,40"
-"255,193,7"
-"255,179,0"
-"255,160,0"
-"255,143,0"
-"255,111,0"
-"255,229,127"
-"255,215,64"
-"255,196,0"
-"255,171,0";
-
-$palette-amber-50: nth($palette-amber, 1);
-$palette-amber-100: nth($palette-amber, 2);
-$palette-amber-200: nth($palette-amber, 3);
-$palette-amber-300: nth($palette-amber, 4);
-$palette-amber-400: nth($palette-amber, 5);
-$palette-amber-500: nth($palette-amber, 6);
-$palette-amber-600: nth($palette-amber, 7);
-$palette-amber-700: nth($palette-amber, 8);
-$palette-amber-800: nth($palette-amber, 9);
-$palette-amber-900: nth($palette-amber, 10);
-$palette-amber-a100: nth($palette-amber, 11);
-$palette-amber-a200: nth($palette-amber, 12);
-$palette-amber-a400: nth($palette-amber, 13);
-$palette-amber-a700: nth($palette-amber, 14);
-
-$palette-orange:
-"255,243,224"
-"255,224,178"
-"255,204,128"
-"255,183,77"
-"255,167,38"
-"255,152,0"
-"251,140,0"
-"245,124,0"
-"239,108,0"
-"230,81,0"
-"255,209,128"
-"255,171,64"
-"255,145,0"
-"255,109,0";
-
-$palette-orange-50: nth($palette-orange, 1);
-$palette-orange-100: nth($palette-orange, 2);
-$palette-orange-200: nth($palette-orange, 3);
-$palette-orange-300: nth($palette-orange, 4);
-$palette-orange-400: nth($palette-orange, 5);
-$palette-orange-500: nth($palette-orange, 6);
-$palette-orange-600: nth($palette-orange, 7);
-$palette-orange-700: nth($palette-orange, 8);
-$palette-orange-800: nth($palette-orange, 9);
-$palette-orange-900: nth($palette-orange, 10);
-$palette-orange-a100: nth($palette-orange, 11);
-$palette-orange-a200: nth($palette-orange, 12);
-$palette-orange-a400: nth($palette-orange, 13);
-$palette-orange-a700: nth($palette-orange, 14);
-
-$palette-deep-orange:
-"251,233,231"
-"255,204,188"
-"255,171,145"
-"255,138,101"
-"255,112,67"
-"255,87,34"
-"244,81,30"
-"230,74,25"
-"216,67,21"
-"191,54,12"
-"255,158,128"
-"255,110,64"
-"255,61,0"
-"221,44,0";
-
-$palette-deep-orange-50: nth($palette-deep-orange, 1);
-$palette-deep-orange-100: nth($palette-deep-orange, 2);
-$palette-deep-orange-200: nth($palette-deep-orange, 3);
-$palette-deep-orange-300: nth($palette-deep-orange, 4);
-$palette-deep-orange-400: nth($palette-deep-orange, 5);
-$palette-deep-orange-500: nth($palette-deep-orange, 6);
-$palette-deep-orange-600: nth($palette-deep-orange, 7);
-$palette-deep-orange-700: nth($palette-deep-orange, 8);
-$palette-deep-orange-800: nth($palette-deep-orange, 9);
-$palette-deep-orange-900: nth($palette-deep-orange, 10);
-$palette-deep-orange-a100: nth($palette-deep-orange, 11);
-$palette-deep-orange-a200: nth($palette-deep-orange, 12);
-$palette-deep-orange-a400: nth($palette-deep-orange, 13);
-$palette-deep-orange-a700: nth($palette-deep-orange, 14);
-
-$palette-brown:
-"239,235,233"
-"215,204,200"
-"188,170,164"
-"161,136,127"
-"141,110,99"
-"121,85,72"
-"109,76,65"
-"93,64,55"
-"78,52,46"
-"62,39,35";
-
-$palette-brown-50: nth($palette-brown, 1);
-$palette-brown-100: nth($palette-brown, 2);
-$palette-brown-200: nth($palette-brown, 3);
-$palette-brown-300: nth($palette-brown, 4);
-$palette-brown-400: nth($palette-brown, 5);
-$palette-brown-500: nth($palette-brown, 6);
-$palette-brown-600: nth($palette-brown, 7);
-$palette-brown-700: nth($palette-brown, 8);
-$palette-brown-800: nth($palette-brown, 9);
-$palette-brown-900: nth($palette-brown, 10);
-
-$palette-grey:
-"250,250,250"
-"245,245,245"
-"238,238,238"
-"224,224,224"
-"189,189,189"
-"158,158,158"
-"117,117,117"
-"97,97,97"
-"66,66,66"
-"33,33,33";
-
-$palette-grey-50: nth($palette-grey, 1);
-$palette-grey-100: nth($palette-grey, 2);
-$palette-grey-200: nth($palette-grey, 3);
-$palette-grey-300: nth($palette-grey, 4);
-$palette-grey-400: nth($palette-grey, 5);
-$palette-grey-500: nth($palette-grey, 6);
-$palette-grey-600: nth($palette-grey, 7);
-$palette-grey-700: nth($palette-grey, 8);
-$palette-grey-800: nth($palette-grey, 9);
-$palette-grey-900: nth($palette-grey, 10);
-
-$palette-blue-grey:
-"236,239,241"
-"207,216,220"
-"176,190,197"
-"144,164,174"
-"120,144,156"
-"96,125,139"
-"84,110,122"
-"69,90,100"
-"55,71,79"
-"38,50,56";
-
-$palette-blue-grey-50: nth($palette-blue-grey, 1);
-$palette-blue-grey-100: nth($palette-blue-grey, 2);
-$palette-blue-grey-200: nth($palette-blue-grey, 3);
-$palette-blue-grey-300: nth($palette-blue-grey, 4);
-$palette-blue-grey-400: nth($palette-blue-grey, 5);
-$palette-blue-grey-500: nth($palette-blue-grey, 6);
-$palette-blue-grey-600: nth($palette-blue-grey, 7);
-$palette-blue-grey-700: nth($palette-blue-grey, 8);
-$palette-blue-grey-800: nth($palette-blue-grey, 9);
-$palette-blue-grey-900: nth($palette-blue-grey, 10);
-
-$color-black: "0,0,0";
-$color-white: "255,255,255";
+// Red
+$palette-red-50: rgb(255,235,238);
+$palette-red-100: rgb(255,205,210);
+$palette-red-200: rgb(239,154,154);
+$palette-red-300: rgb(229,115,115);
+$palette-red-400: rgb(239,83,80);
+$palette-red-500: rgb(244,67,54);
+$palette-red-600: rgb(229,57,53);
+$palette-red-700: rgb(211,47,47);
+$palette-red-800: rgb(198,40,40);
+$palette-red-900: rgb(183,28,28);
+$palette-red-a100: rgb(255,138,128);
+$palette-red-a200: rgb(255,82,82);
+$palette-red-a400: rgb(255,23,68);
+$palette-red-a700: rgb(213,0,0);
+
+// Pink
+$palette-pink-50: rgb(252,228,236);
+$palette-pink-100: rgb(248,187,208);
+$palette-pink-200: rgb(244,143,177);
+$palette-pink-300: rgb(240,98,146);
+$palette-pink-400: rgb(236,64,122);
+$palette-pink-500: rgb(233,30,99);
+$palette-pink-600: rgb(216,27,96);
+$palette-pink-700: rgb(194,24,91);
+$palette-pink-800: rgb(173,20,87);
+$palette-pink-900: rgb(136,14,79);
+$palette-pink-a100: rgb(255,128,171);
+$palette-pink-a200: rgb(255,64,129);
+$palette-pink-a400: rgb(245,0,87);
+$palette-pink-a700: rgb(197,17,98);
+
+// Purple
+$palette-purple-50: rgb(243,229,245);
+$palette-purple-100: rgb(225,190,231);
+$palette-purple-200: rgb(206,147,216);
+$palette-purple-300: rgb(186,104,200);
+$palette-purple-400: rgb(171,71,188);
+$palette-purple-500: rgb(156,39,176);
+$palette-purple-600: rgb(142,36,170);
+$palette-purple-700: rgb(123,31,162);
+$palette-purple-800: rgb(106,27,154);
+$palette-purple-900: rgb(74,20,140);
+$palette-purple-a100: rgb(234,128,252);
+$palette-purple-a200: rgb(224,64,251);
+$palette-purple-a400: rgb(213,0,249);
+$palette-purple-a700: rgb(170,0,255);
+
+//Deep Purple
+$palette-deep-purple-50: rgb(237,231,246);
+$palette-deep-purple-100: rgb(209,196,233);
+$palette-deep-purple-200: rgb(179,157,219);
+$palette-deep-purple-300: rgb(149,117,205);
+$palette-deep-purple-400: rgb(126,87,194);
+$palette-deep-purple-500: rgb(103,58,183);
+$palette-deep-purple-600: rgb(94,53,177);
+$palette-deep-purple-700: rgb(81,45,168);
+$palette-deep-purple-800: rgb(69,39,160);
+$palette-deep-purple-900: rgb(49,27,146);
+$palette-deep-purple-a100: rgb(179,136,255);
+$palette-deep-purple-a200: rgb(124,77,255);
+$palette-deep-purple-a400: rgb(101,31,255);
+$palette-deep-purple-a700: rgb(98,0,234);
+
+// Indigo
+$palette-indigo-50: rgb(232,234,246);
+$palette-indigo-100: rgb(197,202,233);
+$palette-indigo-200: rgb(159,168,218);
+$palette-indigo-300: rgb(121,134,203);
+$palette-indigo-400: rgb(92,107,192);
+$palette-indigo-500: rgb(63,81,181);
+$palette-indigo-600: rgb(57,73,171);
+$palette-indigo-700: rgb(48,63,159);
+$palette-indigo-800: rgb(40,53,147);
+$palette-indigo-900: rgb(26,35,126);
+$palette-indigo-a100: rgb(140,158,255);
+$palette-indigo-a200: rgb(83,109,254);
+$palette-indigo-a400: rgb(61,90,254);
+$palette-indigo-a700: rgb(48,79,254);
+
+// Blue
+$palette-blue-50: rgb(227,242,253);
+$palette-blue-100: rgb(187,222,251);
+$palette-blue-200: rgb(144,202,249);
+$palette-blue-300: rgb(100,181,246);
+$palette-blue-400: rgb(66,165,245);
+$palette-blue-500: rgb(33,150,243);
+$palette-blue-600: rgb(30,136,229);
+$palette-blue-700: rgb(25,118,210);
+$palette-blue-800: rgb(21,101,192);
+$palette-blue-900: rgb(13,71,161);
+$palette-blue-a100: rgb(130,177,255);
+$palette-blue-a200: rgb(68,138,255);
+$palette-blue-a400: rgb(41,121,255);
+$palette-blue-a700: rgb(41,98,255);
+
+// Light Blue
+$palette-light-blue-50: rgb(225,245,254);
+$palette-light-blue-100: rgb(179,229,252);
+$palette-light-blue-200: rgb(129,212,250);
+$palette-light-blue-300: rgb(79,195,247);
+$palette-light-blue-400: rgb(41,182,246);
+$palette-light-blue-500: rgb(3,169,244);
+$palette-light-blue-600: rgb(3,155,229);
+$palette-light-blue-700: rgb(2,136,209);
+$palette-light-blue-800: rgb(2,119,189);
+$palette-light-blue-900: rgb(1,87,155);
+$palette-light-blue-a100: rgb(128,216,255);
+$palette-light-blue-a200: rgb(64,196,255);
+$palette-light-blue-a400: rgb(0,176,255);
+$palette-light-blue-a700: rgb(0,145,234);
+
+// Cyan
+$palette-cyan-50: rgb(224,247,250);
+$palette-cyan-100: rgb(178,235,242);
+$palette-cyan-200: rgb(128,222,234);
+$palette-cyan-300: rgb(77,208,225);
+$palette-cyan-400: rgb(38,198,218);
+$palette-cyan-500: rgb(0,188,212);
+$palette-cyan-600: rgb(0,172,193);
+$palette-cyan-700: rgb(0,151,167);
+$palette-cyan-800: rgb(0,131,143);
+$palette-cyan-900: rgb(0,96,100);
+$palette-cyan-a100: rgb(132,255,255);
+$palette-cyan-a200: rgb(24,255,255);
+$palette-cyan-a400: rgb(0,229,255);
+$palette-cyan-a700: rgb(0,184,212);
+
+// Teal
+$palette-teal-50: rgb(224,242,241);
+$palette-teal-100: rgb(178,223,219);
+$palette-teal-200: rgb(128,203,196);
+$palette-teal-300: rgb(77,182,172);
+$palette-teal-400: rgb(38,166,154);
+$palette-teal-500: rgb(0,150,136);
+$palette-teal-600: rgb(0,137,123);
+$palette-teal-700: rgb(0,121,107);
+$palette-teal-800: rgb(0,105,92);
+$palette-teal-900: rgb(0,77,64);
+$palette-teal-a100: rgb(167,255,235);
+$palette-teal-a200: rgb(100,255,218);
+$palette-teal-a400: rgb(29,233,182);
+$palette-teal-a700: rgb(0,191,165);
+
+// Green
+$palette-green-50: rgb(232,245,233);
+$palette-green-100: rgb(200,230,201);
+$palette-green-200: rgb(165,214,167);
+$palette-green-300: rgb(129,199,132);
+$palette-green-400: rgb(102,187,106);
+$palette-green-500: rgb(76,175,80);
+$palette-green-600: rgb(67,160,71);
+$palette-green-700: rgb(56,142,60);
+$palette-green-800: rgb(46,125,50);
+$palette-green-900: rgb(27,94,32);
+$palette-green-a100: rgb(185,246,202);
+$palette-green-a200: rgb(105,240,174);
+$palette-green-a400: rgb(0,230,118);
+$palette-green-a700: rgb(0,200,83);
+
+// Green
+$palette-light-green-50: rgb(241,248,233);
+$palette-light-green-100: rgb(220,237,200);
+$palette-light-green-200: rgb(197,225,165);
+$palette-light-green-300: rgb(174,213,129);
+$palette-light-green-400: rgb(156,204,101);
+$palette-light-green-500: rgb(139,195,74);
+$palette-light-green-600: rgb(124,179,66);
+$palette-light-green-700: rgb(104,159,56);
+$palette-light-green-800: rgb(85,139,47);
+$palette-light-green-900: rgb(51,105,30);
+$palette-light-green-a100: rgb(204,255,144);
+$palette-light-green-a200: rgb(178,255,89);
+$palette-light-green-a400: rgb(118,255,3);
+$palette-light-green-a700: rgb(100,221,23);
+
+// Lime
+$palette-lime-50: rgb(249,251,231);
+$palette-lime-100: rgb(240,244,195);
+$palette-lime-200: rgb(230,238,156);
+$palette-lime-300: rgb(220,231,117);
+$palette-lime-400: rgb(212,225,87);
+$palette-lime-500: rgb(205,220,57);
+$palette-lime-600: rgb(192,202,51);
+$palette-lime-700: rgb(175,180,43);
+$palette-lime-800: rgb(158,157,36);
+$palette-lime-900: rgb(130,119,23);
+$palette-lime-a100: rgb(244,255,129);
+$palette-lime-a200: rgb(238,255,65);
+$palette-lime-a400: rgb(198,255,0);
+$palette-lime-a700: rgb(174,234,0);
+
+// Yellow
+$palette-yellow-50: rgb(255,253,231);
+$palette-yellow-100: rgb(255,249,196);
+$palette-yellow-200: rgb(255,245,157);
+$palette-yellow-300: rgb(255,241,118);
+$palette-yellow-400: rgb(255,238,88);
+$palette-yellow-500: rgb(255,235,59);
+$palette-yellow-600: rgb(253,216,53);
+$palette-yellow-700: rgb(251,192,45);
+$palette-yellow-800: rgb(249,168,37);
+$palette-yellow-900: rgb(245,127,23);
+$palette-yellow-a100: rgb(255,255,141);
+$palette-yellow-a200: rgb(255,255,0);
+$palette-yellow-a400: rgb(255,234,0);
+$palette-yellow-a700: rgb(255,214,0);
+
+// Amber
+$palette-amber-50: rgb(255,248,225);
+$palette-amber-100: rgb(255,236,179);
+$palette-amber-200: rgb(255,224,130);
+$palette-amber-300: rgb(255,213,79);
+$palette-amber-400: rgb(255,202,40);
+$palette-amber-500: rgb(255,193,7);
+$palette-amber-600: rgb(255,179,0);
+$palette-amber-700: rgb(255,160,0);
+$palette-amber-800: rgb(255,143,0);
+$palette-amber-900: rgb(255,111,0);
+$palette-amber-a100: rgb(255,229,127);
+$palette-amber-a200: rgb(255,215,64);
+$palette-amber-a400: rgb(255,196,0);
+$palette-amber-a700: rgb(255,171,0);
+
+// Orange
+$palette-orange-50: rgb(255,243,224);
+$palette-orange-100: rgb(255,224,178);
+$palette-orange-200: rgb(255,204,128);
+$palette-orange-300: rgb(255,183,77);
+$palette-orange-400: rgb(255,167,38);
+$palette-orange-500: rgb(255,152,0);
+$palette-orange-600: rgb(251,140,0);
+$palette-orange-700: rgb(245,124,0);
+$palette-orange-800: rgb(239,108,0);
+$palette-orange-900: rgb(230,81,0);
+$palette-orange-a100: rgb(255,209,128);
+$palette-orange-a200: rgb(255,171,64);
+$palette-orange-a400: rgb(255,145,0);
+$palette-orange-a700: rgb(255,109,0);
+
+// Deep Orange
+$palette-deep-orange-50: rgb(251,233,231);
+$palette-deep-orange-100: rgb(255,204,188);
+$palette-deep-orange-200: rgb(255,171,145);
+$palette-deep-orange-300: rgb(255,138,101);
+$palette-deep-orange-400: rgb(255,112,67);
+$palette-deep-orange-500: rgb(255,87,34);
+$palette-deep-orange-600: rgb(244,81,30);
+$palette-deep-orange-700: rgb(230,74,25);
+$palette-deep-orange-800: rgb(216,67,21);
+$palette-deep-orange-900: rgb(191,54,12);
+$palette-deep-orange-a100: rgb(255,158,128);
+$palette-deep-orange-a200: rgb(255,110,64);
+$palette-deep-orange-a400: rgb(255,61,0);
+$palette-deep-orange-a700: rgb(221,44,0);
+
+// Brown
+$palette-brown-50: rgb(239,235,233);
+$palette-brown-100: rgb(215,204,200);
+$palette-brown-200: rgb(188,170,164);
+$palette-brown-300: rgb(161,136,127);
+$palette-brown-400: rgb(141,110,99);
+$palette-brown-500: rgb(121,85,72);
+$palette-brown-600: rgb(109,76,65);
+$palette-brown-700: rgb(93,64,55);
+$palette-brown-800: rgb(78,52,46);
+$palette-brown-900: rgb(62,39,35);
+
+// Grey
+$palette-grey-50: rgb(250,250,250);
+$palette-grey-100: rgb(245,245,245);
+$palette-grey-200: rgb(238,238,238);
+$palette-grey-300: rgb(224,224,224);
+$palette-grey-400: rgb(189,189,189);
+$palette-grey-500: rgb(158,158,158);
+$palette-grey-600: rgb(117,117,117);
+$palette-grey-700: rgb(97,97,97);
+$palette-grey-800: rgb(66,66,66);
+$palette-grey-900: rgb(33,33,33);
+
+// Blue Grey
+$palette-blue-grey-50: rgb(236,239,241);
+$palette-blue-grey-100: rgb(207,216,220);
+$palette-blue-grey-200: rgb(176,190,197);
+$palette-blue-grey-300: rgb(144,164,174);
+$palette-blue-grey-400: rgb(120,144,156);
+$palette-blue-grey-500: rgb(96,125,139);
+$palette-blue-grey-600: rgb(84,110,122);
+$palette-blue-grey-700: rgb(69,90,100);
+$palette-blue-grey-800: rgb(55,71,79);
+$palette-blue-grey-900: rgb(38,50,56);
+
+$color-black: rgb(0,0,0);
+$color-white: rgb(255,255,255);
 
 //-- The two possible colors for overlayed text.
 $styleguide-generate-template: false !default;
diff --git a/components/_globals.scss b/components/_globals.scss
index 25101a6c0..73edd5f9e 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -1,10 +1,8 @@
 //-- Color configuration
-$color-divider: unquote("rgb(#{$palette-grey-200})") !default;
-$color-background: unquote("rgb(#{$color-white})") !default;
-$color-text: unquote("rgb(#{$palette-grey-900})") !default;
-$color-text-secondary: unquote("rgb(#{$palette-grey-600})") !default;
-$color-overlay: unquote("rgb(#{$color-black})");
-$color-overlay-opacity: 0.5;
+$color-divider: $palette-grey-200 !default;
+$color-background: $color-white !default;
+$color-text: $palette-grey-900 !default;
+$color-text-secondary: $palette-grey-600 !default;
 
 $color-primary: $palette-indigo-500 !default;
 $color-primary-dark: $palette-indigo-700 !default;
@@ -14,7 +12,7 @@ $color-primary-contrast: $color-dark-contrast !default;
 $color-accent-contrast: $color-dark-contrast !default;
 
 //-- Sizing
-$unit: 1rem;
+$unit: 1rem !default;
 
 // -- Fonts
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
@@ -34,11 +32,11 @@ $shadow-key-penumbra-opacity: 0.14 !default;
 $shadow-ambient-shadow-opacity: 0.12 !default;
 
 //-- Depth Shadows
-$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24);
-$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23);
-$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23);
-$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22);
-$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22);
+$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
+$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
+$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
+$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
+$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
 
 //-- Animation
 $animation-duration: .35s;
@@ -49,8 +47,35 @@ $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
 $animation-curve-default: $animation-curve-fast-out-slow-in !default;
 
 //-- Indexes
-$z-index-higher: 200;
-$z-index-high: 100;
-$z-index-normal: 1;
-$z-index-low: -100;
-$z-index-lower: -200;
+$z-index-highest: 300 !default;
+$z-index-higher: 200 !default;
+$z-index-high: 100 !default;
+$z-index-normal: 1 !default;
+$z-index-low: -100 !default;
+$z-index-lower: -200 !default;
+
+//-- Breakpoints
+// height of app bar
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+$standard-increment-mobile: (5.6 * $unit) !default;
+$standard-increment-desktop: (6.4 * $unit) !default;
+
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+$baseline-grid: (0.8 * $unit) !default;
+$layout-gutter-width-sm: ($baseline-grid * 2) !default;
+$layout-gutter-width: ($baseline-grid * 3) !default;
+
+// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
+// 4 columns
+$layout-breakpoint-xxs: 480px !default;
+// 8 columns
+$layout-breakpoint-xs: 600px !default;
+// 12 columns
+$layout-breakpoint-sm-tablet: 720px !default;
+$layout-breakpoint-sm: 840px !default;
+$layout-breakpoint-md: 960px !default;
+$layout-breakpoint-lg-tablet: 1024px !default;
+$layout-breakpoint-lg: 1280px !default;
+$layout-breakpoint-xl: 1440px !default;
+$layout-breakpoint-xxl: 1600px !default;
+$layout-breakpoint-xxxl: 1920px !default;
diff --git a/components/_mixins.scss b/components/_mixins.scss
index c4bc7ee63..40490c702 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -1,4 +1,4 @@
-//-- Typography
+// scss-lint:disable VendorPrefix
 @mixin typo-preferred-font($use-preferred: true) {
   @if $use-preferred {
     font-family: $preferred-font;
@@ -7,7 +7,7 @@
 
 @mixin typo-display-4($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 11.2rem;
+  font-size: $unit * 11.2;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -.04em;
@@ -19,7 +19,7 @@
 
 @mixin typo-display-3($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 5.6rem;
+  font-size: $unit * 5.6;
   font-weight: 400;
   line-height: 1.35;
   letter-spacing: -.02em;
@@ -31,9 +31,9 @@
 
 @mixin typo-display-2($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 4.5rem;
+  font-size: $unit * 4.5;
   font-weight: 400;
-  line-height: 4.8rem;
+  line-height: $unit * 4.8;
 
   @if $color-contrast {
     opacity: .54;
@@ -42,9 +42,9 @@
 
 @mixin typo-display-1($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 3.4rem;
+  font-size: $unit * 3.4;
   font-weight: 400;
-  line-height: 4rem;
+  line-height: $unit * 4;
 
   @if $color-contrast {
     opacity: .54;
@@ -53,9 +53,9 @@
 
 @mixin typo-headline($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
   font-weight: 400;
-  line-height: 3.2rem;
+  line-height: $unit * 3.2;
   -moz-osx-font-smoothing: grayscale;
 
   @if $color-contrast {
@@ -65,7 +65,7 @@
 
 @mixin typo-title($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 2rem;
+  font-size: $unit * 2;
   font-weight: 500;
   line-height: 1;
   letter-spacing: .02em;
@@ -77,9 +77,9 @@
 
 @mixin typo-subhead($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
   font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
   letter-spacing: .04em;
 
   @if $color-contrast {
@@ -89,9 +89,9 @@
 
 @mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
   font-weight: 400;
-  line-height: 2.8rem;
+  line-height: $unit * 2.8;
   letter-spacing: .04em;
 
   @if $color-contrast {
@@ -101,8 +101,8 @@
 
 @mixin typo-body-2($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
-  line-height: 2.4rem;
+  font-size: $unit * 1.4;
+  line-height: $unit * 2.4;
   letter-spacing: 0;
 
   @if $use-preferred {
@@ -118,9 +118,9 @@
 
 @mixin typo-body-1($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
   letter-spacing: 0;
 
   @if $color-contrast {
@@ -130,7 +130,7 @@
 
 @mixin typo-caption($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.2rem;
+  font-size: $unit * 1.2;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0;
@@ -143,7 +143,7 @@
 @mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
   position: relative;
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
   font-style: italic;
   font-weight: 300;
   line-height: 1.35;
@@ -167,7 +167,7 @@
 
 @mixin typo-menu($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0;
@@ -179,7 +179,7 @@
 
 @mixin typo-button($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 500;
   line-height: 1;
   text-transform: uppercase;
@@ -197,38 +197,38 @@
 
 @mixin shadow-2dp() {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-3dp() {
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-4dp() {
   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-6dp() {
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-8dp() {
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-16dp() {
   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 //-- Animations
@@ -252,26 +252,9 @@
   transition-duration: $duration;
 }
 
-// The frames are this way to prevent a flicker in Safari
-// See https://goo.gl/5luFDk
-@mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
-  @keyframes #{$name} {
-    0% {
-      width: 0;
-      height: 0;
-      opacity: $opacity;
-    }
-
-    95% {
-      width: $width;
-      height: $height;
-      opacity: 0;
-    }
-
-    100% {
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
+@mixin no-webkit-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
   }
 }
diff --git a/components/animations/index.js b/components/animations/index.js
index ccaa2b153..3ab27eca0 100644
--- a/components/animations/index.js
+++ b/components/animations/index.js
@@ -1,4 +1,4 @@
-module.exports = {
-  SlideLeft: require('./slide-left'),
-  SlideRight: require('./slide-right')
-};
+export SlideLeft from './slide-left.scss';
+export SlideRight from './slide-right.scss';
+export ZoomIn from './zoom-in.scss';
+export ZoomOut from './zoom-out.scss';
diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
index 30fa9aecd..aba039958 100644
--- a/components/animations/slide-left.scss
+++ b/components/animations/slide-left.scss
@@ -1,5 +1,3 @@
-@import "http://github.com/base";
-
 .enter, .leave {
   position: absolute;
   transition-timing-function: ease-in-out;
diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
index 55b6ea3b1..95d0e15d9 100644
--- a/components/animations/slide-right.scss
+++ b/components/animations/slide-right.scss
@@ -1,28 +1,29 @@
-@import "http://github.com/base";
-
 .enter, .leave {
   position: absolute;
+}
+
+.enterActive, .leaveActive {
   transition-timing-function: ease-in-out;
-  transition-duration: .35s;
+  transition-duration: 350ms;
   transition-property: transform, opacity;
 }
 
 .enter {
   opacity: 0;
-  transform: translate3d(100%, 0, 0);
+  transform: translateX(100%);
 
   &.enterActive {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: translateX(0);
   }
 }
 
 .leave {
   opacity: 1;
-  transform: translate3d(0, 0, 0);
+  transform: translateX(0);
 
   &.leaveActive {
     opacity: 0;
-    transform: translate3d(-100%, 0, 0);
+    transform: translateX(-100%);
   }
 }
diff --git a/components/animations/zoom-in.scss b/components/animations/zoom-in.scss
new file mode 100644
index 000000000..d752e9401
--- /dev/null
+++ b/components/animations/zoom-in.scss
@@ -0,0 +1,33 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition: transform, opacity;
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(0.85);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(1.25);
+  }
+}
diff --git a/components/animations/zoom-out.scss b/components/animations/zoom-out.scss
new file mode 100644
index 000000000..cf1500fc1
--- /dev/null
+++ b/components/animations/zoom-out.scss
@@ -0,0 +1,33 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition: transform, opacity;
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(1.25);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
diff --git a/components/app/index.jsx b/components/app/index.jsx
deleted file mode 100644
index 8790234d0..000000000
--- a/components/app/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const App = (props) => {
-  let className = style.root;
-  if (props.className) {
-    className += ` ${props.className}`;
-  }
-
-  return (
-    <div className={className} data-react-toolbox='app'>
-      {props.children}
-    </div>
-  );
-};
-
-App.propTypes = {
-  className: React.PropTypes.string
-};
-
-App.defaultProps = {
-  className: ''
-};
-
-export default App;
diff --git a/components/app/style.scss b/components/app/style.scss
deleted file mode 100644
index 55c9f8cfb..000000000
--- a/components/app/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "http://github.com/commons";
-
-.root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow-y: auto;
-}
diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
new file mode 100644
index 000000000..60da12b93
--- /dev/null
+++ b/components/app_bar/AppBar.js
@@ -0,0 +1,125 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { APP_BAR } from '../identifiers.js';
+import InjectIconButton from '../button/IconButton.js';
+
+const factory = (IconButton) => {
+  class AppBar extends React.Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      fixed: PropTypes.bool,
+      flat: PropTypes.bool,
+      leftIcon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      onLeftIconClick: PropTypes.func,
+      onRightIconClick: PropTypes.func,
+      rightIcon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      scrollHide: PropTypes.bool,
+      theme: PropTypes.shape({
+        appBar: PropTypes.string,
+        fixed: PropTypes.string,
+        flat: PropTypes.string,
+        leftIcon: PropTypes.string,
+        rightIcon: PropTypes.string,
+        scrollHide: PropTypes.string,
+        title: PropTypes.string
+      }),
+      title: PropTypes.string
+    };
+
+    static defaultProps = {
+      className: '',
+      fixed: false,
+      flat: false,
+      scrollHide: false
+    };
+
+    state = {hidden: false, height: 0};
+
+    componentDidMount () {
+      if (this.props.scrollHide) {
+        this.initializeScroll();
+      }
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (!this.props.scrollHide && nextProps.scrollHide) {
+        this.initializeScroll();
+      }
+
+      if (this.props.scrollHide && !nextProps.scrollHide) {
+        this.endScroll();
+      }
+    }
+
+    componentWillUnmount () {
+      if (this.props.scrollHide) {
+        this.endScroll();
+      }
+    }
+
+    initializeScroll = () => {
+      window.addEventListener('scroll', this.handleScroll);
+      const { height } = this.rootNode.getBoundingClientRect();
+      this.curScroll = window.scrollY;
+      this.setState({height});
+    };
+
+    endScroll = () => {
+      window.removeEventListener('scroll', this.handleScroll);
+    };
+
+    handleScroll = () => {
+      const scrollDiff = this.curScroll - window.scrollY;
+      const hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > this.state.height;
+      this.setState({hidden});
+      this.curScroll = window.scrollY;
+    };
+
+    render () {
+      const { children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title } = this.props;
+      const className = classnames(theme.appBar, {
+        [theme.fixed]: this.props.fixed,
+        [theme.flat]: this.props.flat,
+        [theme.scrollHide]: this.state.hidden
+      }, this.props.className);
+
+      return (
+        <header
+          className={className}
+          data-react-toolbox='app-bar'
+          ref={node => {this.rootNode = node;}}
+        >
+          {leftIcon && <IconButton
+            inverse
+            className={classnames(theme.leftIcon)}
+            onClick={onLeftIconClick}
+            icon={leftIcon} />
+          }
+          {title && <h1 className={classnames(theme.title)}>{title}</h1>}
+          {children}
+          {rightIcon && <IconButton
+            inverse
+            className={classnames(theme.rightIcon)}
+            onClick={onRightIconClick}
+            icon={rightIcon} />
+          }
+        </header>
+      );
+    }
+  }
+
+  return AppBar;
+};
+
+const AppBar = factory(InjectIconButton);
+export default themr(APP_BAR)(AppBar);
+export { factory as appBarFactory };
+export { AppBar };
diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
index ce27a4bf8..5c76b6189 100644
--- a/components/app_bar/_config.scss
+++ b/components/app_bar/_config.scss
@@ -1,6 +1,8 @@
-$appbar-color: unquote("rgb(#{$color-primary-dark})") !default;
-$appbar-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$appbar-title-total-distance: 8 * $unit;
-$appbar-height: 6.4 * $unit;
-$appbar-h-padding: 2.4 * $unit;
-$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding;
+$appbar-color: $color-primary-dark !default;
+$appbar-contrast: $color-primary-contrast !default;
+$appbar-title-total-distance: 8 * $unit !default;
+$appbar-height: 6.4 * $unit !default;
+$appbar-height-m-portrait: 5.6 * $unit !default;
+$appbar-height-m-landscape: 4.8 * $unit !default;
+$appbar-h-padding: 2.4 * $unit !default;
+$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
new file mode 100644
index 000000000..dcf07b8e1
--- /dev/null
+++ b/components/app_bar/index.d.ts
@@ -0,0 +1,83 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface AppBarTheme {
+  /**
+   * Used for the component root element.
+   */
+  appBar?: string;
+  /**
+   * Added to the root element when the app bar is fixed.
+   */
+  fixed?: string;
+  /**
+   * Added to the root element when the app bar is flat.
+   */
+  flat?: string;
+  /**
+   * Used as the app bar title.
+   */
+  title?: string;
+  /**
+   * Added to the left icon app bar element.
+   */
+  leftIcon?: string;
+  /**
+   * Added to the right icon app bar element.
+   */
+  rightIcon?: string;
+  /**
+   * Added to the root element when the app bar is hidden during scroll.
+   */
+  scrollHide?: string;
+}
+
+export interface AppBarProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Determine if the bar should have position fixed or relative.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * If true, the AppBar shows a shadow.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If it exists it is used as the AppBar title
+   */
+  title?: string;
+  /**
+   * If it exists it is used as the AppBar left icon
+   */
+  leftIcon?: string | React.ReactNode;
+  /**
+   * Called when the left icon is clicked
+   */
+  onLeftIconClick?: Function;
+  /**
+   * If it exists it is used as the AppBar right icon
+   */
+  rightIcon?: string | React.ReactNode;
+  /**
+   * Called when the righticon is clicked
+   */
+  onRightIconClick?: Function;
+  /**
+   * Whether AppBar should be hidden during scroll.
+   * @default false
+   */
+  scrollHide?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AppBarTheme;
+}
+
+export class AppBar extends React.Component<AppBarProps, {}> { }
+
+export default AppBar;
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
new file mode 100644
index 000000000..ff38bf7cc
--- /dev/null
+++ b/components/app_bar/index.js
@@ -0,0 +1,11 @@
+import { themr } from 'react-css-themr';
+import { APP_BAR } from '../identifiers.js';
+import { appBarFactory } from './AppBar.js';
+import { IconButton } from '../button';
+import theme from './theme.scss';
+
+const AppBar = appBarFactory(IconButton);
+const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
+
+export default ThemedAppBar;
+export { ThemedAppBar as AppBar };
diff --git a/components/app_bar/index.jsx b/components/app_bar/index.jsx
deleted file mode 100644
index f53601fe5..000000000
--- a/components/app_bar/index.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const AppBar = (props) => {
-  let className = style.root;
-  if (props.className) className += ` ${props.className}`;
-  if (props.fixed) className += ` ${style.fixed}`;
-  if (props.flat) className += ` ${style.flat}`;
-
-  return (
-    <header className={className} data-react-toolbox='app-bar'>
-      {props.children}
-    </header>
-  );
-};
-
-AppBar.propTypes = {
-  className: React.PropTypes.string,
-  fixed: React.PropTypes.bool,
-  flat: React.PropTypes.bool
-};
-
-AppBar.defaultProps = {
-  className: '',
-  fixed: false,
-  flat: false
-};
-
-export default AppBar;
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 5cf04c9c2..f68ecf123 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -2,23 +2,55 @@
 
 The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. Usually it contains controls on the right and left side and a title with the current section or app name. You should give the content with children elements.
 
+<!-- example -->
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
+import Navigation from 'react-toolbox/lib/navigation';
+import Link from 'react-toolbox/lib/Link';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
 
 const AppBarTest = () => (
-  <AppBar fixed flat>
-    <a href="http://github.com/home">React Toolbox Docs</a>
-    <Navigation />
+  <AppBar title='React Toolbox' leftIcon='menu' rightIcon={<GithubIcon />}>
+    <Navigation type='horizontal'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </AppBar>
 );
 ```
 
-Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
+If you want to provide a theme via context, the component key is `RTAppBar`.
+
+The `AppBar` component provides properties for the common use cases of `title`, `leftIcon` and `rightIcon`. However, you can also override these with your own content by not specifying these and instead provide children elements, as shown in the example.
 
 ## Properties
 
 | Name          | Type    | Default  | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''`     | Set a class for the root component.|
-| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
-| `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
+| `className`        | `String`   | `''`    | Set a class for the root component.|
+| `fixed`            | `Bool`     | `false` | Determine if the bar should have position `fixed` or `relative`.|
+| `flat`             | `Bool`     | `false` | If true, the AppBar shows a shadow.|
+| `theme`            | `Object`   | `null`  | Classnames object defining the component style.|
+| `title`            | `String`   | `null`  | Title used for the appbar.|
+| `leftIcon`         | `String|Element`   | `null`  | Left icon.|
+| `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
+| `rightIcon`        | `String|Element`   | `null`  | Right icon.|
+| `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
+| `scrollHide`       | `Bool`     | `false` | Whether AppBar should be hidden during scroll.|
+
+## Theme
+
+| Name         | Description|
+|:-------------|:-----------|
+| `appBar`     | Used for the component root element.|
+| `fixed`      | Added to the root element when the app bar is fixed.|
+| `flat`       | Added to the root element when the app bar is flat.|
+| `title`      | Added to the title element of the app bar.|
+| `leftIcon`   | Added to the left icon element when the app bar.|
+| `rightIcon`  | Added to the right icon element when the app bar.|
+| `scrollHide` | Added to the root element when the app bar is hidden during scroll.|
diff --git a/components/app_bar/style.scss b/components/app_bar/style.scss
deleted file mode 100644
index 6b17471ab..000000000
--- a/components/app_bar/style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  display: flex;
-  height: $appbar-height;
-  align-items: center;
-  padding: 0 $appbar-h-padding;
-  color: $appbar-contrast;
-  background: $appbar-color;
-
-  &:not(.flat) {
-    z-index: $z-index-high;
-    box-shadow: 0 2px 5px rgba(0,0,0,.26);
-  }
-
-  &.fixed {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: $z-index-high;
-  }
-
-  a {
-    color: $appbar-contrast;
-  }
-}
diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
new file mode 100644
index 000000000..04584eb69
--- /dev/null
+++ b/components/app_bar/theme.scss
@@ -0,0 +1,65 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.appBar {
+  display: flex;
+  height: $appbar-height;
+  align-items: center;
+  padding: 0 $appbar-h-padding;
+  color: $appbar-contrast;
+  background: $appbar-color;
+
+  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
+    height: $appbar-height-m-portrait;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
+    height: $appbar-height-m-landscape;
+  }
+
+  &:not(.flat) {
+    z-index: $z-index-high;
+    box-shadow: 0 2px 5px rgba(0,0,0,.26);
+  }
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $z-index-highest;
+  }
+
+  a {
+    color: $appbar-contrast;
+  }
+
+  .title {
+    flex-grow: 1;
+    font-size: 1.8 * $unit;
+    font-weight: bold;
+    > small {
+      font-size: 1.8 * $unit;
+      font-weight: normal;
+    }
+  }
+
+  .leftIcon {
+    margin-left: -1.2 * $unit;
+  }
+
+  .rightIcon {
+    margin-right: -1.2 * $unit;
+    margin-left: auto;
+  }
+
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition-duration: .5s;
+  transition-property: transform;
+
+  &.scrollHide {
+    transform: translateY(-100%);
+  }
+}
diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
new file mode 100644
index 000000000..900a05f61
--- /dev/null
+++ b/components/autocomplete/Autocomplete.js
@@ -0,0 +1,393 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { AUTOCOMPLETE } from '../identifiers.js';
+import InjectChip from '../chip/Chip.js';
+import InjectInput from '../input/Input.js';
+import events from '../utils/events.js';
+
+const POSITION = {
+  AUTO: 'auto',
+  DOWN: 'down',
+  UP: 'up'
+};
+
+const factory = (Chip, Input) => {
+  class Autocomplete extends Component {
+   static propTypes = {
+     allowCreate: PropTypes.bool,
+     className: PropTypes.string,
+     direction: PropTypes.oneOf(['auto', 'up', 'down']),
+     disabled: PropTypes.bool,
+     error: React.PropTypes.oneOfType([
+       React.PropTypes.string,
+       React.PropTypes.node
+     ]),
+     keepFocusOnChange: PropTypes.bool,
+     label: React.PropTypes.oneOfType([
+       React.PropTypes.string,
+       React.PropTypes.node
+     ]),
+     multiple: PropTypes.bool,
+     onBlur: PropTypes.func,
+     onChange: PropTypes.func,
+     onFocus: PropTypes.func,
+     onQueryChange: PropTypes.func,
+     selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
+     showSelectedWhenNotInSource: PropTypes.bool,
+     showSuggestionsWhenValueIsSet: PropTypes.bool,
+     source: PropTypes.any,
+     suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
+     theme: PropTypes.shape({
+       active: PropTypes.string,
+       autocomplete: PropTypes.string,
+       focus: PropTypes.string,
+       input: PropTypes.string,
+       suggestion: PropTypes.string,
+       suggestions: PropTypes.string,
+       up: PropTypes.string,
+       value: PropTypes.string,
+       values: PropTypes.string
+     }),
+     value: PropTypes.any
+   };
+
+   static defaultProps = {
+     allowCreate: false,
+     className: '',
+     direction: 'auto',
+     keepFocusOnChange: false,
+     multiple: true,
+     selectedPosition: 'above',
+     showSelectedWhenNotInSource: false,
+     showSuggestionsWhenValueIsSet: false,
+     source: {},
+     suggestionMatch: 'start'
+   };
+
+   state = {
+     direction: this.props.direction,
+     focus: false,
+     showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
+     query: this.query(this.props.value),
+     isValueAnObject: false
+   };
+
+   componentWillReceiveProps (nextProps) {
+     if (!this.props.multiple) {
+       this.setState({
+         query: this.query(nextProps.value)
+       });
+     }
+     if (this.state.focus && this.props.direction !== nextProps.direction) {
+       const direction = this.calculateDirection(nextProps.direction);
+       this.setState({ direction });
+     }
+   }
+
+   handleChange = (values, event) => {
+     const value = this.props.multiple ? values : values[0];
+     const { showSuggestionsWhenValueIsSet: showAllSuggestions } = this.props;
+     const query = this.query(value);
+     if (this.props.onChange) this.props.onChange(value, event);
+     if (this.props.keepFocusOnChange) {
+       this.setState({ query, showAllSuggestions });
+     } else {
+       this.setState({ focus: false, query, showAllSuggestions }, () => {
+         ReactDOM.findDOMNode(this).querySelector('input').blur();
+       });
+     }
+   };
+
+   handleMouseDown = (event) => {
+     this.selectOrCreateActiveItem(event);
+   }
+
+   handleQueryBlur = (event) => {
+     if (this.state.focus) this.setState({focus: false});
+     if (this.props.onBlur) this.props.onBlur(event, this.state.active);
+   };
+
+   handleQueryChange = (value) => {
+     if (this.props.onQueryChange) this.props.onQueryChange(value);
+     this.setState({query: value, showAllSuggestions: false, active: null});
+   };
+
+   handleQueryFocus = (event) => {
+     this.suggestionsNode.scrollTop = 0;
+     this.setState({active: '', focus: true, direction: this.calculateDirection(this.props.direction)});
+     if (this.props.onFocus) this.props.onFocus(event);
+   };
+
+   handleQueryKeyDown = (event) => {
+     // Clear query when pressing backspace and showing all suggestions.
+     const shouldClearQuery = (
+       event.which === 8
+       && this.props.showSuggestionsWhenValueIsSet
+       && this.state.showAllSuggestions
+     );
+     if (shouldClearQuery) {
+       this.setState({query: ''});
+     }
+
+     if (event.which === 13) {
+       this.selectOrCreateActiveItem(event);
+     }
+   };
+
+   handleQueryKeyUp = (event) => {
+     if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
+
+     if ([40, 38].indexOf(event.which) !== -1) {
+       const suggestionsKeys = [...this.suggestions().keys()];
+       let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
+       if (index < 0) index = suggestionsKeys.length - 1;
+       if (index >= suggestionsKeys.length) index = 0;
+       this.setState({active: suggestionsKeys[index]});
+     }
+   };
+
+   handleSuggestionHover = (event) => {
+     this.setState({active: event.target.id});
+   };
+
+   calculateDirection (propsDirection) {
+     if (propsDirection === 'auto') {
+       const client = ReactDOM.findDOMNode(this.inputNode).getBoundingClientRect();
+       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
+       const up = client.top > ((screen_height / 2) + client.height);
+       return up ? 'up' : 'down';
+     } else {
+       return propsDirection;
+     }
+   }
+
+   query (key) {
+      let query_value = '';
+      if (!this.props.multiple && key) {
+        const source_value = this.source().get(`${key}`);
+        query_value = source_value ? source_value : key;
+      }
+      return query_value;
+   }
+
+   selectOrCreateActiveItem (event) {
+     let target = this.state.active;
+     if (!target) {
+       target = this.props.allowCreate
+         ? this.state.query
+         : [...this.suggestions().keys()][0];
+       this.setState({active: target});
+     }
+     this.select(event, target);
+   }
+
+   suggestions () {
+     let suggest = new Map();
+     const rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
+     const query = (`${rawQuery}`).toLowerCase().trim();
+     const values = this.values();
+     const source = this.source();
+
+     // Suggest any non-set value which matches the query
+     if (this.props.multiple) {
+       for (const [key, value] of source) {
+         if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
+           suggest.set(key, value);
+         }
+       }
+
+     // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+     } else if (query && !this.state.showAllSuggestions) {
+       for (const [key, value] of source) {
+         if (this.matches(value.toLowerCase().trim(), query)) {
+           suggest.set(key, value);
+         }
+       }
+
+     // When multiple is false, suggest all values when showAllSuggestions is true
+     } else {
+       suggest = source;
+     }
+
+     return suggest;
+   }
+
+   matches (value, query) {
+     const { suggestionMatch } = this.props;
+
+     if (suggestionMatch === 'start') {
+       return value.startsWith(query);
+     } else if (suggestionMatch === 'anywhere') {
+       return value.includes(query);
+     } else if (suggestionMatch === 'word') {
+       const re = new RegExp(`\\b${query}`, 'g');
+       return re.test(value);
+     }
+
+     return false;
+   }
+
+   source () {
+     const { source: src } = this.props;
+     if (src.hasOwnProperty('length')) {
+       return new Map(src.map((item) => Array.isArray(item) ? [...item] : [item, item]));
+     } else {
+       return new Map(Object.keys(src).map((key) => [`${key}`, src[key]]));
+     }
+   }
+
+   values () {
+     let vals = this.props.multiple ? this.props.value : [this.props.value];
+
+     if (!vals) vals = [];
+
+     if (this.props.showSelectedWhenNotInSource && this.isValueAnObject()) {
+       return new Map(Object.entries(vals));
+     }
+
+     const valueMap = new Map();
+
+     const stringVals = vals.map(v => `${v}`);
+     for (const [k, v] of this.source()) {
+       if (stringVals.indexOf(k) !== -1) valueMap.set(k, v);
+     }
+
+     return valueMap;
+   }
+
+   select = (event, target) => {
+     events.pauseEvent(event);
+     const values = this.values(this.props.value);
+     const source = this.source();
+     const newValue = target === void 0 ? event.target.id : target;
+
+     if (this.isValueAnObject()) {
+       const newItem = Array.from(source).reduce((obj, [k, value]) => {
+         if (k === newValue) {
+           obj[k] = value;
+         }
+         return obj;
+       }, {});
+
+       return this.handleChange(Object.assign(this.mapToObject(values), newItem), event);
+     }
+
+     this.handleChange([newValue, ...values.keys()], event);
+   };
+
+   unselect (key, event) {
+     if (!this.props.disabled) {
+       const values = this.values(this.props.value);
+
+       values.delete(key);
+
+       if (this.isValueAnObject()) {
+         return this.handleChange(this.mapToObject(values), event);
+       }
+
+       this.handleChange([...values.keys()], event);
+     }
+   }
+
+   isValueAnObject () {
+      return !Array.isArray(this.props.value) && typeof this.props.value === 'object';
+   }
+
+   mapToObject (map) {
+      return Array.from(map).reduce((obj, [k, value]) => {
+        obj[k] = value;
+        return obj;
+      }, {});
+   }
+
+   renderSelected () {
+     if (this.props.multiple) {
+       const selectedItems = [...this.values()].map(([key, value]) => {
+         return (
+           <Chip
+             key={key}
+             className={this.props.theme.value}
+             deletable
+             onDeleteClick={this.unselect.bind(this, key)}
+           >
+             {value}
+           </Chip>
+         );
+       });
+
+       return <ul className={this.props.theme.values}>{selectedItems}</ul>;
+     }
+   }
+
+   renderSuggestions () {
+     const { theme } = this.props;
+     const suggestions = [...this.suggestions()].map(([key, value]) => {
+       const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
+       return (
+         <li
+           id={key}
+           key={key}
+           className={className}
+           onMouseDown={this.handleMouseDown}
+           onMouseOver={this.handleSuggestionHover}
+         >
+           {value}
+         </li>
+       );
+     });
+
+     return (
+       <ul
+         className={classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'})}
+         ref={node => { this.suggestionsNode = node; }}
+       >
+         {suggestions}
+       </ul>
+     );
+   }
+
+   render () {
+     const {
+      allowCreate, error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
+      selectedPosition, keepFocusOnChange, showSuggestionsWhenValueIsSet, showSelectedWhenNotInSource, onQueryChange,   //eslint-disable-line no-unused-vars
+      theme, ...other
+    } = this.props;
+     const className = classnames(theme.autocomplete, {
+       [theme.focus]: this.state.focus
+     }, this.props.className);
+
+     return (
+       <div data-react-toolbox='autocomplete' className={className}>
+         {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
+         <Input
+           {...other}
+           ref={node => { this.inputNode = node; }}
+           autoComplete="off"
+           className={theme.input}
+           error={error}
+           label={label}
+           onBlur={this.handleQueryBlur}
+           onChange={this.handleQueryChange}
+           onFocus={this.handleQueryFocus}
+           onKeyDown={this.handleQueryKeyDown}
+           onKeyUp={this.handleQueryKeyUp}
+           theme={theme}
+           themeNamespace="input"
+           value={this.state.query}
+         />
+         {this.renderSuggestions()}
+         {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
+       </div>
+     );
+   }
+  }
+
+  return Autocomplete;
+};
+
+const Autocomplete = factory(InjectChip, InjectInput);
+export default themr(AUTOCOMPLETE)(Autocomplete);
+export { factory as autocompleteFactory };
+export { Autocomplete };
diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index 36e864308..e0280558e 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -1,9 +1,7 @@
-$autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
-$autocomplete-overflow-max-height: 45vh;
-$autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
-$autocomplete-suggestion-padding: $unit;
-$autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
-$autocomplete-value-border-radius: .2 * $unit;
-$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
-$autocomplete-value-padding: $unit * .5 $unit * .75;
+$autocomplete-color-primary-contrast: $color-primary-contrast !default;
+$autocomplete-color-primary: $color-primary !default;
+$autocomplete-overflow-max-height: 45vh !default;
+$autocomplete-suggestion-active-background: $palette-grey-200 !default;
+$autocomplete-suggestion-padding: $unit !default;
+$autocomplete-suggestions-background: $color-white !default;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
new file mode 100644
index 000000000..96173afcc
--- /dev/null
+++ b/components/autocomplete/index.d.ts
@@ -0,0 +1,135 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+import { InputTheme } from "../input"
+
+export interface AutocompleteTheme {
+  /**
+   * Used for a suggestion when it's active.
+   */
+  active?: string;
+  /**
+   * Used for the root element.
+   */
+  autocomplete?: string;
+  /**
+   * Used when the input is focused.
+   */
+  focus?: string;
+  /**
+   * Used to style the Input component.
+   */
+  input?: string;
+  /**
+   * Used to style each suggestion.
+   */
+  suggestion?: string;
+  /**
+   * Used to style the suggestions container.
+   */
+  suggestions?: string;
+  /**
+   * Used for the suggestions when it's opening to the top.
+   */
+  up?: string;
+  /**
+   * Classname used for a single value.
+   */
+  value?: string;
+  /**
+   * Classname used for the values container.
+   */
+  values?: string;
+}
+
+export interface AutocompleteProps extends ReactToolbox.Props {
+  /**
+   * Determines if user can create a new option with the current typed value.
+   * @default false
+   */
+  allowCreate?: boolean;
+  /**
+   * Determines the opening direction. It can be auto, up or down.
+   * @default auto
+   */
+  direction?: "auto" | "up" | "down";
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Sets the error string for the internal input element.
+   * @default false
+   */
+  error?: string | React.ReactNode;
+  /**
+   * Whether component should keep focus after value change.
+   * @default false
+   */
+  keepFocusOnChange?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string | React.ReactNode;
+  /**
+   * If true, component can hold multiple values.
+   * @default true
+   */
+  multiple?: boolean;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the components's value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Callback function that is fired when the components's query value changes.
+   */
+  onQueryChange?: Function;
+  /**
+   * Determines if the selected list is shown above or below input. It can be above or below.
+   * @default above
+   */
+  selectedPosition?: "above" | "below" | "none";
+  /**
+   * Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object.
+   * @default false
+   */
+  showSelectedWhenNotInSource?: boolean;
+  /**
+   * If true, the list of suggestions will not be filtered when a value is selected.
+   * @default false
+   */
+  showSuggestionsWhenValueIsSet?: boolean;
+  /**
+   * Object of key/values or array representing all items suggested.
+   */
+  source?: any;
+  /**
+   * Determines how suggestions are supplied.
+   * @default start
+   */
+  suggestionMatch?: "start" | "anywhere" | "word";
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AutocompleteTheme & InputTheme;
+  /**
+   * Value or array of values currently selected component.
+   */
+  value?: any;
+  /**
+   * Additional properties passed to inner Input component.
+   */
+  [key: string]: any;
+}
+
+export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
+
+export default Autocomplete;
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
new file mode 100644
index 000000000..fce2d72dc
--- /dev/null
+++ b/components/autocomplete/index.js
@@ -0,0 +1,12 @@
+import { AUTOCOMPLETE } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { autocompleteFactory } from './Autocomplete.js';
+import Chip from '../chip';
+import Input from '../input';
+import theme from './theme.scss';
+
+const Autocomplete = autocompleteFactory(Chip, Input);
+const ThemedAutocomplete = themr(AUTOCOMPLETE, theme)(Autocomplete);
+
+export default ThemedAutocomplete;
+export { ThemedAutocomplete as Autocomplete };
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
deleted file mode 100644
index d81ffef0e..000000000
--- a/components/autocomplete/index.jsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Input from '../input';
-import style from './style';
-import utils from '../utils';
-
-class Autocomplete extends React.Component {
-  static propTypes = {
-    auto: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    dataSource: React.PropTypes.any,
-    disabled: React.PropTypes.bool,
-    error: React.PropTypes.string,
-    label: React.PropTypes.string,
-    multiple: React.PropTypes.bool,
-    onChange: React.PropTypes.func,
-    required: React.PropTypes.bool,
-    value: React.PropTypes.any
-  };
-
-  static defaultProps = {
-      auto: true,
-      className: '',
-      dataSource: {},
-      multiple: true
-  };
-
-  state = {
-    dataSource: this._indexDataSource(this.props.dataSource),
-    focus: false,
-    query: '',
-    up: false,
-    values: new Map(),
-    width: undefined
-  };
-
-  componentDidMount () {
-    if (this.props.value) this.setValue(this.props.value);
-    this.setState({
-      width: ReactDOM.findDOMNode(this).getBoundingClientRect().width
-    });
-  }
-
-  componentWillReceiveProps (props) {
-    if (props.dataSource) {
-      this.setState({dataSource: this._indexDataSource(props.dataSource)});
-    }
-  }
-
-  componentWillUpdate (props, state) {
-    this.refs.input.setValue(state.query);
-  }
-
-  handleKeyPress = (event) => {
-    if (event.which === 13 && this.state.active) {
-      this._selectOption(this.state.active);
-    }
-
-    if ([40, 38].indexOf(event.which) !== -1) {
-      const suggestionsKeys = [...this._getSuggestions().keys()];
-      let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
-      if (index < 0) index = suggestionsKeys.length - 1;
-      if (index >= suggestionsKeys.length) index = 0;
-      this.setState({active: suggestionsKeys[index]});
-    }
-  };
-
-  handleBlur = () => {
-    if (this.state.focus) this.setState({focus: false});
-  };
-
-  handleFocus = () => {
-    const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
-    const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-    const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-
-    this.refs.suggestions.scrollTop = 0;
-    this.setState({active: '', up: up, focus: true});
-  };
-
-  handleHover = (event) => {
-    this.setState({active: event.target.getAttribute('id')});
-  };
-
-  handleQueryChange = () => {
-    const query = this.refs.input.getValue();
-    if (this.state.query !== query) {
-      this.setState({query});
-    }
-  };
-
-  handleSelect = (event) => {
-    utils.events.pauseEvent(event);
-    this._selectOption(event.target.getAttribute('id'));
-  };
-
-  handleUnselect = (event) => {
-    this._unselectOption(event.target.getAttribute('id'));
-  };
-
-  renderLabel () {
-    if (this.props.label) {
-      return <label data-role='label' className={style.label}>{this.props.label}</label>;
-    }
-  }
-
-  renderSelected () {
-    if (this.props.multiple) {
-      return (
-        <ul className={style.values} data-role='selections' onClick={this.handleUnselect}>
-          {[...this.state.values].map(([key, value]) => {
-            return <li key={key} id={key} data-role='selection' className={style.value}>{value}</li>;
-          })}
-        </ul>
-      );
-    }
-  }
-
-  renderSuggestions () {
-    return [...this._getSuggestions()].map(([key, value]) => {
-      let className = style.suggestion;
-      if (this.state.active === key) className += ` ${style.active}`;
-      return <li id={key} key={key} data-role='suggestion' className={className}>{value}</li>;
-    });
-  }
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.state.focus) className += ` ${style.focus}`;
-
-    let suggestionsClassName = style.suggestions;
-    if (this.state.up) suggestionsClassName += ` ${style.up}`;
-    const suggestionsStyle = {width: this.state.width};
-
-    return (
-      <div data-react-toolbox='autocomplete' className={className}>
-        {this.renderLabel()}
-        {this.renderSelected()}
-        <Input
-          data-role='input'
-          {...this.props}
-          ref='input'
-          className={style.input}
-          label=''
-          onBlur={this.handleBlur}
-          onChange={this.handleQueryChange}
-          onFocus={this.handleFocus}
-          onKeyUp={this.handleKeyPress}
-          value=''
-        />
-        <ul
-          ref='suggestions'
-          data-role='suggestions'
-          className={suggestionsClassName}
-          onMouseDown={this.handleSelect}
-          onMouseOver={this.handleHover}
-          style={suggestionsStyle}
-        >
-          {this.renderSuggestions()}
-        </ul>
-      </div>
-    );
-  }
-
-  _getSuggestions () {
-    const query = this.state.query.toLowerCase().trim() || '';
-    const suggestions = new Map();
-    for (const [key, value] of this.state.dataSource) {
-      if (!this.state.values.has(key) && value.toLowerCase().trim().startsWith(query)) {
-        suggestions.set(key, value);
-      }
-    }
-    return suggestions;
-  }
-
-  _indexDataSource (data = {}) {
-    if (data.length) {
-      return new Map(data.map((item) => [item, item]));
-    } else {
-      return new Map(Object.keys(data).map((key) => [key, data[key]]));
-    }
-  }
-
-  _selectOption (key) {
-    const { dataSource } = this.state;
-    let { values } = this.state;
-    const query = !this.props.multiple ? dataSource.get(key) : '';
-    values = new Map(values);
-
-    if (!this.props.multiple) values.clear();
-    values.set(key, dataSource.get(key));
-
-    this.setState({focus: false, query, values}, () => {
-      this.refs.input.blur();
-      if (this.props.onChange) this.props.onChange(this);
-    });
-  }
-
-  _unselectOption (key) {
-    if (key) {
-      const values = new Map(this.state.values);
-      values.delete(key);
-      this.setState({focus: false, values}, () => {
-        if (this.props.onChange) this.props.onChange(this);
-      });
-    }
-  }
-
-  getValue () {
-    const values = [...this.state.values.keys()];
-    return this.props.multiple ? values : (values.length > 0 ? values[0] : null);
-  }
-
-  setValue (dataParam = []) {
-    const values = new Map();
-    const data = (typeof dataParam === 'string') ? [dataParam] : dataParam;
-    for (const [key, value] of this.state.dataSource) {
-      if (data.indexOf(key) !== -1) values.set(key, value);
-    }
-    this.setState({values, query: this.props.multiple ? '' : values.get(data[0])});
-  }
-}
-
-export default Autocomplete;
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index b40da337d..394337a3a 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -1,48 +1,81 @@
 # Autocomplete
 
-An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determinated at opening time depending on the current position.
+An input field with a set of predeterminated labeled values. When it's focused it shows a list of options that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determined by its current position at opening time.
 
 <!-- example -->
 ```jsx
 import Autocomplete from 'react-toolbox/lib/autocomplete';
 
-const countries = {
-  'EN-gb': 'England',
+const source = {
   'ES-es': 'Spain',
   'TH-th': 'Thailand',
+  'EN-gb': 'England',
   'EN-en': 'USA'
 };
 
-const selected = ['ES-es', 'EN-gb'];
+class AutocompleteTest extends React.Component {
+  state = {
+    countries: ['ES-es', 'TH-th']
+  }
 
-const AutocompleteTest = () => (
-  <Autocomplete
-    label="Choose a country"
-    placeholder="Elements is up to you..."
-    dataSource={countries}
-    value={selected}
-  />
-)
+  handleChange = (value) => {
+    this.setState({countries: value});
+  };
+
+  render () {
+    return (
+      <Autocomplete
+        direction="down"
+        selectedPosition="above"
+        label="Choose countries"
+        onChange={this.handleChange}
+        source={source}
+        value={this.state.countries}
+      />
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTAutocomplete`.
+
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name                | Type      | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `auto`        | `Boolean`       |  `true`        | If true, the autocomplete will open to the best possible direction |
-| `className`     | `String`      | `''`            | Sets a class to style of the Component.|
-| `dataSource`    | `Object` or `Array`   |           | Object of key/values or array representing all items suggested.|
-| `disabled`      | `Bool`        |  `false`         | If true, component will be disabled.|
-| `error`         | `String`      |         | Sets the error string for the internal input element.|
-| `label`         | `String`      |         | The text string to use for the floating label element.|
-| `multiple`      | `Bool`        | `true`          | If true, component can hold multiple values.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `required`      | `Boolean`     |                 | If true, component input is set as required.|
-| `value`         | `String` or `Array`    |        | Default value to initialize the component.|
-
-## Methods
-
-This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
-
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+| `allowCreate`                   | `Bool`                        | `false` | Determines if user can create a new option with the current typed value |
+| `className`                     | `String`                      | `''`    | Sets a class to style of the Component.|
+| `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
+| `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
+| `error`                         | `String` or `Node`            |         | Sets the error string for the internal input element. |
+| `keepFocusOnChange`             | `Bool`                        | `false` | Whether component should keep focus after value change. |
+| `label`                         | `String` or `Node`            |         | The text string to use for the floating label element. |
+| `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
+| `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
+| `onChange`                      | `Function`                    |         | Called with (value, event) when the components's value changes. |
+| `onQueryChange`                 | `Function`                    |         | Called with (value) when the components's query input value changes. |
+| `onFocus`                       | `Function`                    |         | Callback function that is fired when component is focused. |
+| `source`                        | `Object` or `Array`           |         | Object of key/values or array representing all items suggested. |
+| `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |
+| `showSelectedWhenNotInSource`   | `Bool`                        | `false` | Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object. |
+| `showSuggestionsWhenValueIsSet` | `Bool`                        | `false` | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
+| `suggestionMatch`               | `String`                      | `start` | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
+| `value`                         | `String`, `Array` or `Object` |         | Value or array of values currently selected component. |
+
+Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
+
+## Theme
+
+This component uses an `Input` under the covers. The theme object is passed down namespaced under `input` keyword. This means you can use the same theme classNames from `Input` component but namespaced with `input`. For example, to style the label you have to use `inputLabel` className.
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for a suggestion when it's active.|
+| `autocomplete`  | Used for the root element.|
+| `focus`   | Used when the input is focused.|
+| `input`   | Used to style the `Input` component.|
+| `suggestion`   | Used to style each suggestion.|
+| `suggestions`   | Used to style the suggestions container.|
+| `up`   | Used for the suggestions when it's opening to the top.|
+| `value`   | Classname used for a single value.|
+| `values`   | Classname used for the values container.|
diff --git a/components/autocomplete/style.scss b/components/autocomplete/theme.scss
similarity index 53%
rename from components/autocomplete/style.scss
rename to components/autocomplete/theme.scss
index a59b80bb5..f12136579 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/theme.scss
@@ -1,12 +1,13 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
+@import "http://github.com/input/config";
 
-.root {
+.autocomplete {
   position: relative;
+  padding: $unit 0;
   &.focus {
-    .label {
-      color: $autocomplete-color-primary;
-    }
     .suggestions {
       max-height: $autocomplete-overflow-max-height;
       visibility: visible;
@@ -15,50 +16,40 @@
   }
 }
 
-.label {
-  font-size: $font-size-tiny;
-  color: $color-text-secondary;
-  transition: color $animation-duration $animation-curve-default;
-}
-
 .values {
   flex-direction: row;
   flex-wrap: wrap;
+  padding-bottom: $unit / 2;
 }
 
 .value {
-  display: inline-block;
-  padding: $autocomplete-value-padding;
   margin: $autocomplete-value-margin;
-  font-size: $font-size-tiny;
-  color: $autocomplete-color-primary-contrast;
-  cursor: pointer;
-  background-color: $autocomplete-color-primary;
-  border-radius: $autocomplete-value-border-radius;
 }
 
 .suggestions {
+  @include no-webkit-scrollbar;
   position: absolute;
   z-index: $z-index-high;
+  width: 100%;
   max-height: 0;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   visibility: hidden;
   background-color: $autocomplete-suggestions-background;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: max-height, box-shadow;
   &:not(.up) {
-    bottom: auto;
+    margin-top: - $input-padding;
   }
   &.up {
-    top: auto;
     bottom: 0;
   }
 }
 
 .suggestion {
   padding: $autocomplete-suggestion-padding;
+  font-size: $input-field-font-size;
   cursor: pointer;
   &.active {
     background-color: $autocomplete-suggestion-active-background;
@@ -66,5 +57,20 @@
 }
 
 .input {
-  padding-bottom: 0;
+  position: relative;
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
 }
diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
new file mode 100644
index 000000000..9023663b2
--- /dev/null
+++ b/components/avatar/Avatar.js
@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { AVATAR } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+
+const factory = (FontIcon) => {
+  const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
+    <div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
+      {children}
+      {cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(http://github.com/$%7Bimage%7D)`}} />}
+      {!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
+      {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
+      {title ? <span className={theme.letter}>{title[0]}</span> : null}
+    </div>
+  );
+
+  Avatar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    cover: PropTypes.bool,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    theme: PropTypes.shape({
+      avatar: PropTypes.string,
+      image: PropTypes.string,
+      letter: PropTypes.string
+    }),
+    title: PropTypes.string
+  };
+
+  Avatar.defaultProps = {
+    cover: false
+  };
+
+  return Avatar;
+};
+
+const Avatar = factory(InjectFontIcon);
+export default themr(AVATAR)(Avatar);
+export { factory as avatarFactory };
+export { Avatar };
diff --git a/components/avatar/_config.scss b/components/avatar/_config.scss
new file mode 100644
index 000000000..a2922fb60
--- /dev/null
+++ b/components/avatar/_config.scss
@@ -0,0 +1,4 @@
+$avatar-color: $color-white !default;
+$avatar-background: $palette-grey-500 !default;
+$avatar-size: 4 * $unit !default;
+$avatar-font-size: 2.4 * $unit !default;
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
new file mode 100644
index 000000000..2a4272081
--- /dev/null
+++ b/components/avatar/index.d.ts
@@ -0,0 +1,53 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface AvatarTheme {
+  /**
+   * Used for the root class of the element.
+   */
+  avatar?: string;
+  /**
+   * Added to the root element when the component has image.
+   */
+  image?: string;
+  /**
+   * Used for the root element if the component shows the letter.
+   */
+  letter?: string;
+}
+
+export interface AvatarProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Set to true if your image is not squared so it will be used as a cover for the element.
+   * @default false
+   */
+  cover?: boolean;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * An image source or an image element.
+   */
+  image?: React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AvatarTheme;
+  /**
+   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+   */
+  title?: string;
+  /**
+   * Additional properties for component root element.
+   */
+  [key: string]: any;
+}
+
+export class Avatar extends React.Component<AvatarProps, {}> { }
+
+export default Avatar;
diff --git a/components/avatar/index.js b/components/avatar/index.js
new file mode 100644
index 000000000..02ada447c
--- /dev/null
+++ b/components/avatar/index.js
@@ -0,0 +1,11 @@
+import { AVATAR } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { avatarFactory } from './Avatar.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import theme from './theme.scss';
+
+const Avatar = avatarFactory(FontIcon);
+const ThemedAvatar = themr(AVATAR, theme)(Avatar);
+
+export default ThemedAvatar;
+export { ThemedAvatar as Avatar };
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
new file mode 100644
index 000000000..ff90fdd92
--- /dev/null
+++ b/components/avatar/readme.md
@@ -0,0 +1,47 @@
+# Avatar
+
+Avatars can be used to represent people. This offer users the ability to personalize their avatar or provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand.
+
+<!-- example -->
+```jsx
+import Avatar from 'react-toolbox/lib/avatar';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const AvatarTest = () => (
+  <div>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />} />
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
+    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+  </div>
+);
+```
+
+If you want to provide a theme via context, the component key is `RTAvatar`.
+
+## Properties
+
+| Name          | Type                    | Default     | Description|
+|:-----|:-----|:-----|:-----|
+| `children`    | `Node`                  |             | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
+| `className`   | `String`                | `''`        | Set a class to style the Component.|
+| `cover`       | `Boolean`               | `''`        | Set to true if your image is not squared so it will be used as a cover for the element.|
+| `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
+| `image`       | `String` or `Element`   |             | An image source or an image element. |
+| `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
+| `theme`       | `Object`  | `null`   | Classnames object defining the component style.|
+
+## Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `avatar` | Used for the root class of the element.|
+| `image`  | Added to the root element when the component has image.|
+| `letter` | Used for the root element if the component shows the letter.|
diff --git a/components/avatar/theme.scss b/components/avatar/theme.scss
new file mode 100644
index 000000000..9514782ae
--- /dev/null
+++ b/components/avatar/theme.scss
@@ -0,0 +1,44 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.avatar {
+  position: relative;
+  display: inline-block;
+  width: $avatar-size;
+  height: $avatar-size;
+  overflow: hidden;
+  font-size: $avatar-font-size;
+  color: $avatar-color;
+  text-align: center;
+  vertical-align: middle;
+  background-color: $avatar-background;
+  border-radius: 50%;
+  > svg {
+    width: 1em;
+    height: $avatar-size;
+    fill: currentColor;
+  }
+  > img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.image {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+
+.letter {
+  display: block;
+  width: 100%;
+  line-height: $avatar-size;
+}
diff --git a/components/button/BrowseButton.js b/components/button/BrowseButton.js
new file mode 100644
index 000000000..50d17d731
--- /dev/null
+++ b/components/button/BrowseButton.js
@@ -0,0 +1,110 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple, FontIcon) => {
+  class SimpleBrowseButton extends Component {
+    static propTypes = {
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      flat: PropTypes.bool,
+      floating: PropTypes.bool,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inverse: PropTypes.bool,
+      label: PropTypes.string,
+      mini: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onChange: PropTypes.func,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      raised: PropTypes.bool,
+      theme: PropTypes.shape({
+        accent: PropTypes.string,
+        button: PropTypes.string,
+        flat: PropTypes.string,
+        floating: PropTypes.string,
+        icon: PropTypes.string,
+        inverse: PropTypes.string,
+        mini: PropTypes.string,
+        neutral: PropTypes.string,
+        primary: PropTypes.string,
+        raised: PropTypes.string,
+        rippleWrapper: PropTypes.string,
+        toggle: PropTypes.string
+      }),
+      type: PropTypes.string
+    };
+
+    static defaultProps = {
+      accent: false,
+      className: '',
+      flat: false,
+      floating: false,
+      mini: false,
+      neutral: true,
+      primary: false,
+      raised: false
+    };
+
+    handleMouseUp = (event) => {
+      this.refs.label.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
+
+    handleMouseLeave = (event) => {
+      this.refs.label.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
+
+    handleFileChange = (event) => {
+      if (this.props.onChange) this.props.onChange(event);
+    };
+
+    render () {
+        const { accent, children, className, flat, floating, icon,
+            inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
+        const element = 'label';
+        const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        const classes = classnames(theme.button, [theme[shape]], {
+          [theme[level]]: neutral,
+          [theme.mini]: mini,
+          [theme.inverse]: inverse
+        }, className);
+
+        const props = {
+          ...others,
+          ref: 'label',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'label'
+        };
+
+        return React.createElement(element, props,
+          icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+          <span>{label}</span>,
+          <input className={classes} type="file" onChange={this.handleFileChange}/>,
+          children
+        );
+    }
+  }
+
+  return ripple(SimpleBrowseButton);
+};
+
+const BrowseButton = factory(rippleFactory({ centered: false }), InjectFontIcon);
+export default themr(BUTTON)(BrowseButton);
+export { factory as browseButtonFactory };
+export { BrowseButton };
diff --git a/components/button/Button.js b/components/button/Button.js
new file mode 100644
index 000000000..3ffc90aae
--- /dev/null
+++ b/components/button/Button.js
@@ -0,0 +1,108 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple, FontIcon) => {
+  class Button extends Component {
+    static propTypes = {
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      flat: PropTypes.bool,
+      floating: PropTypes.bool,
+      href: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inverse: PropTypes.bool,
+      label: PropTypes.string,
+      mini: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      raised: PropTypes.bool,
+      theme: PropTypes.shape({
+        accent: PropTypes.string,
+        button: PropTypes.string,
+        flat: PropTypes.string,
+        floating: PropTypes.string,
+        icon: PropTypes.string,
+        inverse: PropTypes.string,
+        mini: PropTypes.string,
+        neutral: PropTypes.string,
+        primary: PropTypes.string,
+        raised: PropTypes.string,
+        rippleWrapper: PropTypes.string,
+        toggle: PropTypes.string
+      }),
+      type: PropTypes.string
+    };
+
+    static defaultProps = {
+      accent: false,
+      className: '',
+      flat: false,
+      floating: false,
+      mini: false,
+      neutral: true,
+      primary: false,
+      raised: false,
+      type: 'button'
+    };
+
+    handleMouseUp = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
+
+    handleMouseLeave = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
+
+    render () {
+      const { accent, children, className, flat, floating, href, icon,
+        inverse, label, mini, neutral, primary, theme, type, raised, ...others} = this.props;
+      const element = href ? 'a' : 'button';
+      const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+      const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+      const classes = classnames(theme.button, [theme[shape]], {
+        [theme[level]]: neutral,
+        [theme.mini]: mini,
+        [theme.inverse]: inverse
+      }, className);
+
+      const props = {
+        ...others,
+        href,
+        ref: 'button',
+        className: classes,
+        disabled: this.props.disabled,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave,
+        type: !href ? type : null,
+        'data-react-toolbox': 'button'
+      };
+
+      return React.createElement(element, props,
+        icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+        label,
+        children
+      );
+    }
+  }
+
+  return ripple(Button);
+};
+
+const Button = factory(rippleFactory({ centered: false }), InjectFontIcon);
+export default themr(BUTTON)(Button);
+export { factory as buttonFactory };
+export { Button };
diff --git a/components/button/IconButton.js b/components/button/IconButton.js
new file mode 100644
index 000000000..d0cec6eb1
--- /dev/null
+++ b/components/button/IconButton.js
@@ -0,0 +1,82 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple, FontIcon) => {
+  class IconButton extends Component {
+    static propTypes = {
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      href: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inverse: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      theme: PropTypes.object,
+      type: PropTypes.string
+    };
+
+    static defaultProps = {
+      accent: false,
+      className: '',
+      neutral: true,
+      primary: false,
+      type: 'button'
+    };
+
+    handleMouseUp = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
+
+    handleMouseLeave = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
+
+    render () {
+      const {accent, children, className, href, icon, inverse, neutral,
+        primary, theme, type, ...others} = this.props;
+      const element = href ? 'a' : 'button';
+      const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+      const classes = classnames([theme.toggle], {
+        [theme[level]]: neutral,
+        [theme.inverse]: inverse
+      }, className);
+
+      const props = {
+        ...others,
+        href,
+        ref: 'button',
+        className: classes,
+        disabled: this.props.disabled,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave,
+        type: !href ? type : null,
+        'data-react-toolbox': 'button'
+      };
+
+      return React.createElement(element, props,
+        icon ? typeof icon === 'string' ? <FontIcon className={theme.icon} value={icon} /> : icon : null,
+        children
+      );
+    }
+  }
+
+  return ripple(IconButton);
+};
+
+const IconButton = factory(rippleFactory({centered: true}), InjectFontIcon);
+export default themr(BUTTON)(IconButton);
+export { factory as iconButtonFactory };
+export { IconButton };
diff --git a/components/button/__test__/index.spec.js b/components/button/__test__/index.spec.js
new file mode 100644
index 000000000..01cb6ca61
--- /dev/null
+++ b/components/button/__test__/index.spec.js
@@ -0,0 +1,45 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import theme from '../theme.scss';
+import Button, { Button as RawButton } from '../Button';
+
+const getRenderedClassName = (tree, Component) => {
+  const rendered = TestUtils.findRenderedComponentWithType(tree, Component);
+  return ReactDOM.findDOMNode(rendered).getAttribute('class');
+};
+
+describe('Button', function () {
+  describe('#render', function () {
+    it('uses flat and neutral styles by default', function () {
+      const tree = TestUtils.renderIntoDocument(<Button theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.flat);
+      expect(className).toContain(theme.neutral);
+    });
+
+    it('renders accent button with accent style', function () {
+      const tree = TestUtils.renderIntoDocument(<Button accent theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.flat);
+      expect(className).toContain(theme.accent);
+    });
+
+    it('renders mini button with mini style', function () {
+      const tree = TestUtils.renderIntoDocument(<Button floating mini theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.floating);
+      expect(className).toContain(theme.neutral);
+      expect(className).toContain(theme.mini);
+    });
+
+    it('renders mini accented button with both styles', function () {
+      const tree = TestUtils.renderIntoDocument(<Button accent mini theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.flat);
+      expect(className).toContain(theme.accent);
+      expect(className).toContain(theme.mini);
+    });
+  });
+});
diff --git a/components/button/__test__/index.spec.jsx b/components/button/__test__/index.spec.jsx
deleted file mode 100644
index 764e34930..000000000
--- a/components/button/__test__/index.spec.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import expect from 'expect';
-import style from '../../button/style';
-import utils from '../../utils/testing';
-import Button from '../index';
-
-describe('Button', function () {
-  let button;
-
-  describe('#render', function () {
-
-    it('uses flat and primary styles by default', function () {
-      button = utils.shallowRenderComponent(Button);
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.primary);
-    });
-
-    it('renders accent button with accent style', function () {
-      button = utils.shallowRenderComponent(Button, { accent: true });
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.accent);
-    });
-
-    it('1 renders mini button with mini style', function () {
-      button = utils.shallowRenderComponent(Button, { mini: true });
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.primary);
-      expect(button.props.className).toContain(style.mini);
-    });
-
-    it('renders mini accented button with both styles', function () {
-      button = utils.shallowRenderComponent(Button, { mini: true, accent: true });
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.accent);
-      expect(button.props.className).toContain(style.mini);
-    });
-
-  });
-});
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 15e0ef0be..98aa2c246 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -1,20 +1,23 @@
-$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
-$button-accent-color: unquote("rgb(#{$color-accent})") !default;
-$button-border-radius: 0.2 * $unit;
-$button-default-text-color: unquote("rgb(#{$color-black})") !default;
-$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
-$button-floating-font-size: $unit * 2.4;
-$button-floating-height-mini: $unit * 4;
-$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
-$button-floating-height: $unit * 5.6;
-$button-height: $unit * 3.6;
-$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
-$button-primary-color: unquote("rgb(#{$color-primary})") !default;
-$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
-$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$button-squared-icon-margin: $unit * .6;
-$button-squared-min-width: 9 * $unit;
-$button-squared-padding: 0 $unit * 1.2;
+$button-neutral-color: $color-white !default;
+$button-neutral-color-contrast: $palette-grey-900 !default;
+$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
+$button-primary-color-contrast: $color-primary-contrast !default;
+$button-primary-color-hover: rgba($color-primary, .2) !default;
+$button-primary-color: $color-primary !default;
+$button-accent-color-contrast: $color-primary-contrast !default;
+$button-accent-color-hover: rgba($color-accent, .2) !default;
+$button-accent-color: $color-accent !default;
+$button-disabled-text-color: rgba($color-black, 0.26) !default;
+$button-disabled-background-color: rgba($color-black, 0.12) !default;
+$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default;
+$button-disabled-background-inverse: rgba($color-white, 0.08) !default;
+$button-border-radius: 0.2 * $unit !default;
+$button-floating-font-size: $unit * 2.4 !default;
+$button-floating-height: $unit * 5.6 !default;
+$button-floating-mini-height: $unit * 4 !default;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
+$button-height: $unit * 3.6 !default;
+$button-squared-icon-margin: $unit * .6 !default;
+$button-squared-min-width: 9 * $unit !default;
+$button-squared-padding: 0 $unit * 1.2 !default;
+$button-toggle-font-size: $unit * 2 !default;
diff --git a/components/button/_mixins.scss b/components/button/_mixins.scss
new file mode 100644
index 000000000..305be037a
--- /dev/null
+++ b/components/button/_mixins.scss
@@ -0,0 +1,17 @@
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
+  }
+}
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
new file mode 100644
index 000000000..62ec7044b
--- /dev/null
+++ b/components/button/index.d.ts
@@ -0,0 +1,230 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface ButtonBaseProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: Function;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  onMouseUp?: Function;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Component root container type.
+   * @default button
+   */
+  type?: string;
+}
+
+export interface ButtonProps extends ButtonBaseProps {
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ButtonTheme;
+}
+
+export class Button extends React.Component<ButtonProps, {}> { }
+
+export interface IconButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+export interface IconButtonProps extends ButtonBaseProps {
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme extends ButtonTheme { }
+
+export interface BrowseButtonProps extends ButtonBaseProps {
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: BrowseButtonTheme;
+}
+
+export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
diff --git a/components/button/index.js b/components/button/index.js
new file mode 100644
index 000000000..126272d2e
--- /dev/null
+++ b/components/button/index.js
@@ -0,0 +1,20 @@
+import { BUTTON } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { buttonFactory } from './Button.js';
+import { browseButtonFactory } from './BrowseButton.js';
+import { iconButtonFactory } from './IconButton.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
+const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
+const BrowseButton = browseButtonFactory(themedRippleFactory({ centered: false }), FontIcon);
+const ThemedButton = themr(BUTTON, theme)(Button);
+const ThemedIconButton = themr(BUTTON, theme)(IconButton);
+const ThemedBrowseButton = themr(BUTTON, theme)(BrowseButton);
+
+export default ThemedButton;
+export { ThemedButton as Button };
+export { ThemedIconButton as IconButton };
+export { ThemedBrowseButton as BrowseButton };
diff --git a/components/button/index.jsx b/components/button/index.jsx
deleted file mode 100644
index 2ddeb79ef..000000000
--- a/components/button/index.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import FontIcon from '../font_icon';
-import Ripple from '../ripple';
-import Tooltip from '../tooltip';
-import style from './style';
-import events from '../utils/events';
-
-class Button extends React.Component {
-  static propTypes = {
-    accent: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    icon: React.PropTypes.string,
-    kind: React.PropTypes.string,
-    label: React.PropTypes.string,
-    loading: React.PropTypes.bool,
-    mini: React.PropTypes.bool,
-    primary: React.PropTypes.bool,
-    ripple: React.PropTypes.bool,
-    tooltip: React.PropTypes.string,
-    type: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    accent: false,
-    className: '',
-    kind: 'flat',
-    loading: false,
-    mini: false,
-    primary: false,
-    ripple: true
-  };
-
-  handleMouseDown = (event) => {
-    events.pauseEvent(event);
-    if (this.refs.ripple) this.refs.ripple.start(event);
-    if (this.props.onMouseDown) this.props.onMouseDown(event);
-  };
-
-  render () {
-    let className = style[this.props.kind];
-    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, ...others} = this.props;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (!primary && !accent) className += ` ${style.primary}`;
-    if (primary) className += ` ${style.primary}`;
-    if (accent) className += ` ${style.accent}`;
-    if (mini) className += ` ${style.mini}`;
-
-    return (
-      <button
-        data-react-toolbox='button'
-        {...others}
-        className={className}
-        onMouseDown={this.handleMouseDown}
-        disabled={this.props.disabled || this.props.loading}
-      >
-        { ripple ? <Ripple ref='ripple' loading={loading}/> : null }
-        { icon ? <FontIcon className={style.icon} value={icon}/> : null }
-        { label ? <abbr className={style.label}>{label}</abbr> : null }
-        { tooltip ? <Tooltip label={tooltip}/> : null }
-      </button>
-    );
-  }
-}
-
-export default Button;
diff --git a/components/button/readme.md b/components/button/readme.md
index a094928ac..e53de77c3 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -1,34 +1,82 @@
 # Button
 
-A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
+A [button](https://material.google.com/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
 
 <!-- example -->
 ```jsx
-import Button from 'react-toolbox/lib/button';
+import {Button, IconButton} from 'react-toolbox/lib/button';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
 
 const TestButtons = () => (
   <div>
-    <Button label="Flat button" />
-    <Button kind="raised" label="Raised" />
-    <Button kind="raised" label="Raised accent" accent icon="favorite" />
-    <Button className="primary" kind="floating" icon="add" />
-    <Button mini kind="floating" icon="add" accent />
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
+    </Button>
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating accent mini />
+    <IconButton icon='favorite' accent />
+    <IconButton icon={<GithubIcon />} accent />
+    <IconButton primary><GithubIcon /></IconButton>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
   </div>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTButton`.
+
 ## Properties
 
-| Name      | Type      | Default         | Description|
+| Name              | Type                  | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `accent`    | `Bool`    | `false` | Indicates if the button should have accent color.|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `disabled`  | `Boolean` | `false` | If true, component will be disabled.|
-| `icon`      | `String`  |  | Value of the icon (See icon component). |
-| `kind`      | `String`  | `flat`  | Type of the component, overwrite this property if you need set a different stylesheet.|
-| `label`     | `String`  |  | The text string to use for the name of the button.|
-| `loading`   | `Boolean`  | `false` | If true, component will be disabled and show a loading animation.|
-| `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
-| `onClick`  | `Function` |  | Callback called when the button is clicked.|
-| `primary`  | `false` | | If true, component will have the primary color.|
-| `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
+| `accent`          | `Boolean`             | `false`     | Indicates if the button should have accent color.|
+| `className`       | `String`              | `''`        | Set a class to style the Component.|
+| `disabled`        | `Boolean`             | `false`     | If true, component will be disabled.|
+| `flat`            | `Boolean`             | `false`     | If true, the button will have a flat look. |
+| `floating`        | `Boolean`             | `false`     | If true, the button will have a floating look. |
+| `href`            | `String`              |             | Creates a link for the button. |
+| `icon`            | `String` or `Element` |             | Value of the icon (See Font Icon Component). |
+| `inverse`         | `Boolean`             |             | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
+| `label`           | `String`              |             | The text string to use for the name of the button.|
+| `mini`            | `Boolean`             | `false`     | To be used with floating button. If true, the button will be smaller.|
+| `neutral`         | `Boolean`             | `true`      | Set it to `false` if you don't want the neutral styles to be included.|
+| `onMouseLeave`    | `Function`            |             | Fires after the mouse leaves the Component.|
+| `onMouseUp`       | `Function`            |             | Fires after the mouse is released from the Component.|
+| `primary`         | `Boolean`             | `false`     | Indicates if the button should have primary color.|
+| `raised`          | `Boolean`             | `false`     | If true, the button will have a raised look. |
+| `ripple`          | `Boolean`             | `true`      | If true, component will have a ripple effect on click.|
+| `theme`           | `Object`              |             | Theme object will classnames that will be used to style the component.|
+| `type`            | `String`              | `button`    | Component root container type.|
+
+By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
+
+The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
+
+## Theme
+
+| Name       | Description|
+|:-----------|:-----------|
+| `accent`   | Used for the root in case button is accent.|
+| `button`   | Used for the root element in any button.|
+| `flat`     | Used when the button is flat for the root element.|
+| `floating` | Used when the button is floating for the root element.|
+| `icon`     | For the icon inside a button.|
+| `inverse`  | Used when colors are inverted.|
+| `mini`     | Used for mini floating buttons.|
+| `neutral`  | Used for neutral colored buttons.|
+| `primary`  | Used for primary buttons when button is primary.|
+| `raised`   | Used when the button is raised for root element.|
+| `ripple`   | Used for the ripple element.|
+| `toggle`   | Used for toggle buttons in the root element.|
+
+## Icon Button
+
+Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles. We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding onMouseLeave, onMouseUp and aspect properties.
diff --git a/components/button/style.scss b/components/button/style.scss
deleted file mode 100644
index 17538d46d..000000000
--- a/components/button/style.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-%button {
-  position: relative;
-  display: inline-block;
-  height: $button-height;
-  flex-direction: row;
-  align-items: center;
-  color: $button-default-text-color;
-  text-align: center;
-  text-decoration: none;
-  overflow: hidden;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  transition: box-shadow .2s $animation-curve-fast-out-linear-in,
-                background-color .2s $animation-curve-default,
-                color .2s $animation-curve-default;
-  align-content: center;
-  justify-content: center;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-  > * {
-    pointer-events: none;
-  }
-}
-
-%squared {
-  min-width: $button-squared-min-width;
-  padding: $button-squared-padding;
-  border-radius: $button-border-radius;
-  .icon {
-    margin-right: $button-squared-icon-margin;
-    font-size: 120%;
-    vertical-align: middle;
-  }
-}
-
-%disabled {
-  color: $button-disabled-text-color;
-  pointer-events: none;
-  cursor: auto;
-}
-
-.label {
-  @include typo-button();
-  line-height: $button-height;
-}
-
-.flat {
-  @extend %button;
-  @extend %squared;
-  background: transparent;
-  &:hover {
-    background: $button-flat-color-hover;
-  }
-  &:focus:not(:active) {
-    background: $button-flat-color-hover;
-  }
-  &[disabled] {
-    @extend %disabled;
-  }
-}
-
-.raised {
-  @extend %button;
-  @extend %squared;
-  @include shadow-2dp();
-  background: $button-solid-background-color;
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-  &[disabled] {
-    @extend %disabled;
-    @include shadow-2dp();
-    background-color: $button-solid-disabled-background-color;
-  }
-}
-
-.floating {
-  @extend %button;
-  width: $button-floating-height;
-  height: $button-floating-height;
-  font-size: $button-floating-font-size;
-  background: $button-solid-background-color;
-  border-radius: 50%;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
-              0 1px 1px 0 rgba(0, 0, 0, .24);
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-  &[disabled] {
-    @extend %disabled;
-    @include shadow-2dp();
-    background-color: $button-solid-disabled-background-color;
-  }
-  .icon {
-    line-height: $button-floating-height;
-  }
-
-  [data-react-toolbox="ripple"] {
-    overflow: hidden;
-    border-radius: 50%;
-  }
-}
-
-.primary:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-primary-color-contrast;
-    background: $button-primary-color;
-  }
-  &.flat {
-    color: $button-primary-color;
-    &:hover {
-      background: $button-primary-color-hover;
-    }
-    &:focus:not(:active) {
-      background: $button-primary-color-hover;
-    }
-  }
-}
-
-.accent:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-accent-color-contrast;
-    background-color: $button-accent-color;
-  }
-  &.flat {
-    color: $button-accent-color;
-    &:hover {
-      background: $button-accent-color-hover;
-    }
-    &:focus:not(:active) {
-      background: $button-accent-color-hover;
-    }
-  }
-}
-
-.mini.floating {
-  width: $button-floating-height-mini;
-  height: $button-floating-height-mini;
-  font-size: $button-floating-mini-font-size;
-  .icon {
-    line-height: $button-floating-height-mini;
-  }
-}
diff --git a/components/button/theme.scss b/components/button/theme.scss
new file mode 100644
index 000000000..9c450ef83
--- /dev/null
+++ b/components/button/theme.scss
@@ -0,0 +1,187 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+@import "http://github.com/mixins";
+
+.button {
+  position: relative;
+
+  > input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+}
+
+%button {
+  @include typo-button();
+  position: relative;
+  display: inline-block;
+  height: $button-height;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  line-height: $button-height;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  > span:not([data-react-toolbox="tooltip"]) {
+    display: inline-block;
+    line-height: $button-height;
+    vertical-align: top;
+  }
+  > svg {
+    display: inline-block;
+    width: 1em;
+    height: $button-height;
+    font-size: 120%;
+    vertical-align: top;
+    fill: currentColor;
+  }
+  > * {
+    pointer-events: none;
+  }
+  > .rippleWrapper {
+    overflow: hidden;
+  }
+  &[disabled] {
+    color: $button-disabled-text-color;
+    pointer-events: none;
+    cursor: auto;
+  }
+}
+
+%squared {
+  min-width: $button-squared-min-width;
+  padding: $button-squared-padding;
+  border-radius: $button-border-radius;
+  .icon {
+    margin-right: $button-squared-icon-margin;
+    font-size: 120%;
+    vertical-align: middle;
+  }
+  > svg {
+    margin-right: .5 * $unit;
+  }
+}
+
+%solid {
+  &[disabled] {
+    @include shadow-2dp();
+    background-color: $button-disabled-background-color;
+  }
+  &:active {
+    @include shadow-4dp();
+  }
+  &:focus:not(:active) {
+    @include focus-shadow();
+  }
+}
+
+.raised {
+  @extend %button;
+  @extend %squared;
+  @extend %solid;
+  @include shadow-2dp();
+}
+
+.flat {
+  @extend %button;
+  @extend %squared;
+  background: transparent;
+}
+
+.floating {
+  @extend %button;
+  @extend %solid;
+  width: $button-floating-height;
+  height: $button-floating-height;
+  font-size: $button-floating-font-size;
+  border-radius: 50%;
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+  .icon {
+    line-height: $button-floating-height;
+  }
+  > .rippleWrapper {
+    border-radius: 50%;
+  }
+  &.mini {
+    width: $button-floating-mini-height;
+    height: $button-floating-mini-height;
+    font-size: $button-floating-mini-font-size;
+    .icon {
+      line-height: $button-floating-mini-height;
+    }
+  }
+}
+
+.toggle {
+  @extend %button;
+  width: $button-height;
+  background: transparent;
+  border-radius: 50%;
+  > .icon, svg {
+    font-size: $button-toggle-font-size;
+    line-height: $button-height;
+    vertical-align: top;
+  }
+  > .rippleWrapper {
+    border-radius: 50%;
+  }
+}
+
+.neutral:not([disabled]) {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:focus:not(:active) {
+      background: $button-neutral-color-hover;
+    }
+  }
+  &.flat:hover {
+    background: $button-neutral-color-hover;
+  }
+
+  &.inverse {
+    &.raised, &.floating {
+      color: $button-neutral-color;
+      background-color: $button-neutral-color-contrast;
+    }
+    &.flat, &.toggle {
+      color: $button-neutral-color;
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
+    }
+    &.flat:hover {
+      background: $button-neutral-color-hover;
+    }
+  }
+}
+
+.neutral.inverse[disabled] {
+  color: $button-disabled-text-color-inverse;
+  background-color: $button-disabled-background-inverse;
+}
+
+@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
+@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/components/card/Card.js b/components/card/Card.js
new file mode 100644
index 000000000..23858199d
--- /dev/null
+++ b/components/card/Card.js
@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
+
+const Card = ({children, className, raised, theme, ...other}) => {
+  const classes = classnames(theme.card, {
+    [theme.raised]: raised
+  }, className);
+
+  return (
+    <div data-react-toolbox='card' className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+Card.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  raised: PropTypes.bool,
+  theme: PropTypes.shape({
+    card: PropTypes.string,
+    raised: PropTypes.string
+  })
+};
+
+export default themr(CARD)(Card);
+export { Card };
diff --git a/components/card/CardActions.js b/components/card/CardActions.js
new file mode 100644
index 000000000..951355ddb
--- /dev/null
+++ b/components/card/CardActions.js
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
+
+const CardActions = ({ children, className, theme, ...other }) => (
+  <div className={classnames(theme.cardActions, className)} {...other}>
+    {children}
+  </div>
+);
+
+CardActions.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  theme: PropTypes.shape({
+    cardActions: PropTypes.string
+  })
+};
+
+export default themr(CARD)(CardActions);
+export { CardActions };
diff --git a/components/card/CardMedia.js b/components/card/CardMedia.js
new file mode 100644
index 000000000..7d2ecd868
--- /dev/null
+++ b/components/card/CardMedia.js
@@ -0,0 +1,49 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
+
+const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, image, theme, ...other }) => {
+  const classes = classnames(theme.cardMedia, {
+    [theme[aspectRatio]]: aspectRatio
+  }, className);
+
+  const innerClasses = classnames(theme.content, {
+    [theme.contentOverlay]: contentOverlay
+  });
+
+  const bgStyle = {
+    backgroundColor: color ? color : undefined,
+    backgroundImage: typeof image === 'string' ? `url('http://github.com/$%7Bimage%7D')` : undefined
+  };
+
+  return (
+    <div style={bgStyle} className={classes} {...other}>
+      <div className={innerClasses}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+CardMedia.propTypes = {
+  aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
+  children: PropTypes.any,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  contentOverlay: PropTypes.bool,
+  image: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  theme: PropTypes.shape({
+    cardMedia: PropTypes.string,
+    content: PropTypes.string,
+    contentOverlay: PropTypes.string,
+    square: PropTypes.string,
+    wide: PropTypes.string
+  })
+};
+
+export default themr(CARD)(CardMedia);
+export { CardMedia };
diff --git a/components/card/CardText.js b/components/card/CardText.js
new file mode 100644
index 000000000..8a5df1311
--- /dev/null
+++ b/components/card/CardText.js
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
+
+const CardText = ({ children, className, theme, ...other }) => (
+  <div className={classnames(theme.cardText, className)} {...other}>
+    {typeof children === 'string' ? <p>{children}</p> : children}
+  </div>
+);
+
+CardText.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  theme: PropTypes.shape({
+    cardText: PropTypes.string
+  })
+};
+
+export default themr(CARD)(CardText);
+export { CardText };
diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
new file mode 100644
index 000000000..87cd358e7
--- /dev/null
+++ b/components/card/CardTitle.js
@@ -0,0 +1,62 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { CARD } from '../identifiers.js';
+import InjectAvatar from '../avatar/Avatar.js';
+
+const factory = (Avatar) => {
+  const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
+    const classes = classnames(theme.cardTitle, {
+      [theme.small]: avatar,
+      [theme.large]: !avatar
+    }, className);
+
+    return (
+      <div className={classes} {...other}>
+        {typeof avatar === 'string' ? <Avatar image={avatar} theme={theme} /> : avatar}
+        <div>
+          {title && <h5 className={theme.title}>{title}</h5>}
+          {children && typeof children === 'string' && (
+            <h5 className={theme.title}>{children}</h5>
+          )}
+          {subtitle && <p className={theme.subtitle}>{subtitle}</p>}
+          {children && typeof children !== 'string' && children}
+        </div>
+      </div>
+    );
+  };
+
+  CardTitle.propTypes = {
+    avatar: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    children: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+      PropTypes.array
+    ]),
+    className: PropTypes.string,
+    subtitle: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    theme: PropTypes.shape({
+      large: PropTypes.string,
+      title: PropTypes.string,
+      small: PropTypes.string,
+      subtitle: PropTypes.string
+    }),
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ])
+  };
+
+  return CardTitle;
+};
+
+const CardTitle = factory(InjectAvatar);
+export default themr(CARD)(CardTitle);
+export { CardTitle };
+export { factory as cardTitleFactory };
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 52b0d98a5..c89b3cb53 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,7 +1,7 @@
-$card-color-white: unquote("rgb(#{$color-white})") !default;
-$card-title-height: 17.6 * $unit;
-$card-width-normal: 32 * $unit;
-$card-width-large: 51.2 * $unit;
-$card-offset: 1.6 * $unit;
-$card-navigation-offset: $card-offset / 2;
-$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
+$card-color-white: $color-white !default;
+$card-text-overlay: rgba($color-black, 0.35) !default;
+$card-background-color: $card-color-white !default;
+$card-padding-sm: .8 * $unit !default;
+$card-padding: 1.6 * $unit !default;
+$card-padding-lg: 2 * $unit !default;
+$card-font-size: $font-size-small !default;
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
new file mode 100644
index 000000000..090a5d931
--- /dev/null
+++ b/components/card/index.d.ts
@@ -0,0 +1,187 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface CardTheme {
+  /**
+   * Class used for the root element.
+   */
+  card?: string;
+  /**
+    *Added to the root element in case the card is raised.
+   */
+  raised?: string;
+}
+
+export interface CardProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Increases the shadow depth to appear elevated.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
+}
+
+export class Card extends React.Component<CardProps, {}> { }
+
+export interface CardActionsTheme {
+  /**
+   * Used for a wrapper around actions as the root element.
+   */
+  cardActions?: string;
+}
+
+export interface CardActionsProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardActionsTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
+}
+
+export class CardActions extends React.Component<CardActionsProps, {}> { }
+
+export interface CardMediaTheme {
+  /**
+   * Added to the element root.
+   */
+  cardMedia?: string;
+  /**
+   * Used for the content element.
+   */
+  content?: string;
+  /**
+   * Added to content element if its overlayed.
+   */
+  contentOverlay?: string;
+  /**
+   * Added to content element if its squared.
+   */
+  square?: string;
+  /**
+   * Added to content element if its wide.
+   */
+  wide?: string;
+}
+
+export interface CardMediaProps extends ReactToolbox.Props {
+  /**
+   * Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
+   */
+  aspectRatio?: "wide" | "square";
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Sets the background color.
+   */
+  color?: string;
+  /**
+   * Creates a dark overlay underneath the child components.
+   */
+  contentOverlay?: boolean;
+  /**
+   * Can be used instead of children. Accepts an element or a URL string.
+   */
+  image?: React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardMediaTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
+}
+
+export class CardMedia extends React.Component<CardMediaProps, {}> { }
+
+export interface CardTextTheme {
+  /**
+   * Used for the main root element.
+   */
+  cardText?: string;
+}
+
+export interface CardTextProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTextTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
+}
+
+export class CardText extends React.Component<CardTextProps, {}> { }
+
+export interface CardTitleTheme {
+  /**
+   * Class used for the root element.
+   */
+  cardTitle?: string;
+  /**
+   * Added to the root element when the card has no avatar.
+   */
+  large?: string;
+  /**
+   * Added to the title element.
+   */
+  title?: string;
+  /**
+   * Added to the root element when the card has avatar.
+   */
+  small?: string;
+  /**
+   * Added to the subtitle element.
+   */
+  subtitle?: string;
+}
+
+export interface CardTitleProps extends ReactToolbox.Props {
+  /**
+   * A string URL or Element to specify an avatar in the left side of the title.
+   */
+  avatar?: React.ReactNode | string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Text used for the sub header of the card.
+   */
+  subtitle?: React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTitleTheme;
+  /**
+   * Text used for the title of the card.
+   */
+  title?: React.ReactNode | string;
+}
+
+export class CardTitle extends React.Component<CardTitleProps, {}> { }
diff --git a/components/card/index.js b/components/card/index.js
new file mode 100644
index 000000000..ef571e9b5
--- /dev/null
+++ b/components/card/index.js
@@ -0,0 +1,23 @@
+import { themr } from 'react-css-themr';
+import { CARD } from '../identifiers.js';
+import { Card } from './Card.js';
+import { CardActions } from './CardActions.js';
+import { CardMedia } from './CardMedia.js';
+import { CardText } from './CardText.js';
+import { cardTitleFactory } from './CardTitle.js';
+import Avatar from '../avatar';
+import theme from './theme.scss';
+
+const CardTitle = cardTitleFactory(Avatar);
+const ThemedCard = themr(CARD, theme)(Card);
+const ThemedCardActions = themr(CARD, theme)(CardActions);
+const ThemedCardMedia = themr(CARD, theme)(CardMedia);
+const ThemedCardText = themr(CARD, theme)(CardText);
+const ThemedCardTitle = themr(CARD, theme)(CardTitle);
+
+export default ThemedCard;
+export { ThemedCard as Card };
+export { ThemedCardActions as CardActions };
+export { ThemedCardMedia as CardMedia };
+export { ThemedCardText as CardText };
+export { ThemedCardTitle as CardTitle };
diff --git a/components/card/index.jsx b/components/card/index.jsx
deleted file mode 100644
index 65fbfd965..000000000
--- a/components/card/index.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import Navigation from '../navigation';
-import Ripple from '../ripple';
-import style from './style';
-
-class Card extends React.Component {
-  static propTypes = {
-    actions: React.PropTypes.array,
-    className: React.PropTypes.string,
-    color: React.PropTypes.string,
-    image: React.PropTypes.string,
-    loading: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    text: React.PropTypes.string,
-    title: React.PropTypes.string,
-    type: React.PropTypes.oneOf(['wide', 'event', 'image'])
-  };
-
-  static defaultProps = {
-    className: '',
-    loading: false
-  };
-
-  handleMouseDown = (event) => {
-    if (this.props.onClick) {
-      event.preventDefault();
-      this.refs.ripple.start(event);
-      this.props.onClick(event, this);
-    }
-  };
-
-  renderActions () {
-    if (this.props.actions) {
-      return (
-        <Navigation data-role='actions' className={style.navigation} actions={this.props.actions} />
-      );
-    }
-  }
-
-  renderTitle () {
-    const styleFigure = {};
-    const styleOverflow = {};
-    if (this.props.image) styleFigure.backgroundImage = `url(http://github.com/$%7Bthis.props.image%7D)`;
-    if (this.props.color) {
-      styleFigure.backgroundColor = this.props.color;
-      styleOverflow.backgroundColor = this.props.color;
-    }
-
-    if (this.props.title || this.props.image) {
-      return (
-        <figure className={style.figure} style={styleFigure}>
-          { this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
-          { this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
-          { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
-        </figure>
-      );
-    }
-  }
-
-  render () {
-    let className = style.root;
-    if (this.props.type) className += ` ${style[this.props.type]}`;
-    if (this.props.onClick) className += ` ${style.touch}`;
-    if (this.props.image || this.props.color) className += ` ${style.contrast}`;
-    if (this.props.color) className += ` ${style.color}`;
-    if (this.props.loading) className += ` ${style.loading}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div
-        data-react-toolbox='card'
-        className={className}
-        onMouseDown={this.handleMouseDown}
-      >
-        { this.renderTitle() }
-        { this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
-        { this.renderActions() }
-        <Ripple
-          ref='ripple'
-          className={style.ripple}
-          loading={this.props.loading}
-          spread={2.5}
-        />
-      </div>
-    );
-  }
-}
-
-export default Card;
diff --git a/components/card/readme.md b/components/card/readme.md
index 30ba692f0..292d8a492 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -1,38 +1,137 @@
 # Card
 
-A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
+A [Card](https://material.google.com/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
+
+Cards are composed of multiple subcomponents in React Toolbox. You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
 
 <!-- example -->
 ```jsx
-import Card from 'react-toolbox/lib/card';
+import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
+import {Button} from 'react-toolbox/lib/button';
 
-const actions = [
-  { label: 'Play', icon: 'play-arrow'},
-  { label: 'Close' }
-];
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card
-    image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
-    text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
-    title='Deerhunter - Fading Frontier'
-    color="rgba(0,0,0,.4)"
-    actions={actions}
-  />
+  <Card style={{width: '350px'}}>
+    <CardTitle
+      avatar="https://placeimg.com/80/80/animals"
+      title="Avatar style title"
+      subtitle="Subtitle here"
+    />
+    <CardMedia
+      aspectRatio="wide"
+      image="https://placeimg.com/800/450/nature"
+    />
+    <CardTitle
+      title="Title goes here"
+      subtitle="Subtitle here"
+    />
+    <CardText>{dummyText}</CardText>
+    <CardActions theme={theme}>
+      <Button label="Action 1" />
+      <Button label="Action 2" />
+    </CardActions>
+  </Card>
 );
+
+return <TestCards />;
 ```
 
-## Properties
+This component and all of its subcomponents are themeable by context using the key `RTCard`. This component theme can also include class modifiers for `Button` and `Avatar` component.
+
+## Card
+
+The base card component. This acts as the main card container
+that all subcomponents are placed within.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` |  | Child components, usually Card subcomponents. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+| `raised` | `Boolean` |  | Increases the shadow depth to appear elevated. |
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `card`   | Class used for the root element.|
+| `raised` | Added to the root element in case the card is raised.|
+
+## CardTitle
+A versatile title block that can be used in various places on the card, including the media area. This component can also display an avatar next to the title content.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `avatar` | `String` or `Element` |  | A string URL or Element to specify an avatar in the left side of the title. |
+| `children` | `String`, `Element` or `Array` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+| `subtitle` | `String` |  | Text used for the sub header of the card. |
+| `title` | `String` |  | Text used for the title of the card.  |
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `cardTitle` | Class used for the root element.|
+| `large` | Added to the root element when the card has no avatar.|
+| `small` | Added to the root element when the card has avatar.|
+| `subtitle` | Added to the subtitle element.|
+| `title` | Added to the title element.|
+
+## CardMedia
+
+Used for displaying media such as images or videos on a card. Can also be used with a solid background color instead of an image.
 
-| Name              | Type          | Default         | Description|
+### Properties
+| Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `actions`       | `Array`        |               | Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.|
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the card.|
-| `color`         | `String`        |                 | Sets HEX or RGBA color to add a colored layer to the heading.|
-| `image`         | `String`        |                 | URL to sets a background image in the heading.|
-| `loading`       | `Boolean`       | `false`                | If true, component will be disabled and showing a loading animation.|
-| `onClick`       | `Function`      |                 | Callback function that is fired when the components's is clicked. It also will display a ripple effect on click. |
-| `subtitle`      | `String`        |                 | Sets a complementary smaller text under the title.|
-| `text`          | `String`        |                 | Sets a complementary text display as a card description.|
-| `title`         | `String`        |           | Sets the title of the card.|
-| `type`          | `String`        | `default`          | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. |
+| `aspectRatio` | `enum`(`'wide'`,`'square'`) |  | Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height. |
+| `children` | `Any` |  | Usually an image/video element or a `<CardTitle>` component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+| `color` | `String` |  | Sets the background color. |
+| `contentOverlay` | `Boolean` |  | Creates a dark overlay underneath the child components. |
+| `image` | `String`, `Element` |  | Can be used instead of children. Accepts an element or a URL string. |
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `cardMedia` | Added to the element root.|
+| `content` | Used for the content element.|
+| `contentOverlay` | Added to content element if its overlayed.|
+| `square` | Added to content element if its squared.|
+| `wide` | Added to content element if its wide.|
+
+## CardText
+Basic card content container. Good for small descriptions or other supplementary text.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+
+### Theme
+
+| Name       | Description|
+|:-----------|:-----------|
+| `cardText` | Used for the main root element.|
+
+## CardActions
+
+This component is used as a container for supplemental card actions. Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
+
+### Properties
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+
+### Theme
+
+| Name       | Description|
+|:-----------|:-----------|
+| `cardActions` | Used for a wrapper around actions as the root element.|
diff --git a/components/card/style.scss b/components/card/style.scss
deleted file mode 100644
index 48dd8809f..000000000
--- a/components/card/style.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.figure {
-  position: relative;
-  display: flex;
-  min-height: $card-title-height;
-  flex-direction: column;
-  justify-content: flex-end;
-  background-position: center center;
-  background-size: cover;
-  > *:not(.overflow) {
-    z-index: $z-index-normal;
-    font-weight: $font-weight-normal;
-  }
-  > .overflow {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    opacity: .75;
-  }
-}
-
-.text {
-  font-size: $font-size-small;
-  line-height: $font-size-big;
-  color: $color-text-secondary;
-}
-
-.navigation {
-  padding: $card-navigation-offset;
-  > * {
-    min-width: 0;
-    padding-right: $card-navigation-offset;
-    padding-left: $card-navigation-offset;
-  }
-}
-
-.ripple {
-  background-color: $color-text-secondary;
-}
-
-.root {
-  @include shadow-2dp();
-  position: relative;
-  display: flex;
-  width: $card-width-normal;
-  flex-direction: column;
-  overflow: hidden;
-  vertical-align: top;
-  background: $color-background;
-  > *:not(.navigation) {
-    padding: $card-offset;
-  }
-  &:not(.color) > *:not(.figure), > *:not(:last-child) {
-    box-shadow: 0 1px $color-divider;
-  }
-}
-
-.touch {
-  cursor: pointer;
-}
-
-.contrast {
-  .figure {
-    color: $card-color-white;
-    text-shadow: 0;
-  }
-  .ripple {
-    background-color: $card-color-white;
-  }
-}
-
-.loading {
-  pointer-events: none;
-  cursor: none;
-  filter: grayscale(100%);
-  .ripple {
-    @include ripple-loading(cardloading, 2 * $card-width-normal, 2 * $card-width-normal);
-    width: 2 * $card-width-normal;
-    height: 2 * $card-width-normal;
-    animation-name: cardloading;
-  }
-}
-
-.image {
-  &, .figure {
-    height: $card-width-normal;
-  }
-  .figure {
-    padding: 0;
-    > h5 {
-      padding: $card-offset;
-      font-size: $font-size-small;
-      font-weight: $font-weight-bold;
-      background-color: $card-text-overlay;
-    }
-  }
-}
-
-.event {
-  .figure {
-    justify-content: flex-start;
-  }
-}
-
-.wide {
-  width: $card-width-large;
-}
diff --git a/components/card/theme.scss b/components/card/theme.scss
new file mode 100644
index 000000000..c49ea5cf6
--- /dev/null
+++ b/components/card/theme.scss
@@ -0,0 +1,126 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.card {
+  @include shadow-2dp();
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  font-size: $card-font-size;
+  background: $card-background-color;
+  border-radius: .2 * $unit;
+  &.raised {
+    @include shadow-8dp();
+  }
+  [data-react-toolbox="avatar"] {
+    display: block;
+  }
+}
+
+.cardMedia {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  &.wide, &.square {
+    width: 100%;
+    .content {
+      position: absolute;
+      height: 100%;
+    }
+    .content > iframe, .content > video, .content > img {
+      max-width: 100%;
+    }
+  }
+  &::after {
+    display: block;
+    height: 0;
+    content: "";
+  }
+  &.wide::after {
+    padding-top: 56.25%;
+  }
+  &.square::after {
+    padding-top: 100%;
+  }
+  .content {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+  }
+  .contentOverlay {
+    .cardTitle, .cardActions, .cardText {
+      background-color: $card-text-overlay;
+    }
+  }
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  [data-react-toolbox="avatar"] {
+    margin-right: 1.3 * $unit;
+  }
+  .subtitle {
+    color: $color-text-secondary;
+  }
+  &.large {
+    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
+    .title {
+      @include typo-headline();
+      line-height: 1.25;
+    }
+  }
+  &.small {
+    padding: $card-padding;
+    .title {
+      @include typo-body-2(false, true);
+      line-height: 1.4;
+    }
+    .subtitle {
+      font-weight: 500;
+      line-height: 1.4;
+    }
+  }
+  .cardMedia & {
+    .title, .subtitle {
+      color: $card-color-white;
+    }
+  }
+}
+
+.cardTitle, .cardText {
+  padding: ($card-padding - .2 * $unit) $card-padding;
+  &:last-child {
+    padding-bottom: $card-padding-lg;
+  }
+  + .cardText {
+    padding-top: 0;
+  }
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: $card-padding-sm;
+  [data-react-toolbox="button"] {
+    min-width: 0;
+    padding: 0 $card-padding-sm;
+    margin: 0 $card-padding-sm / 2;
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
new file mode 100644
index 000000000..c2980d530
--- /dev/null
+++ b/components/checkbox/Check.js
@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const factory = (ripple) => {
+  const Check = ({checked, children, onMouseDown, theme, style}) => (
+    <div
+      data-react-toolbox='check'
+      className={classnames(theme.check, { [theme.checked]: checked })}
+      onMouseDown={onMouseDown}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+
+  Check.propTypes = {
+    checked: PropTypes.bool,
+    children: PropTypes.any,
+    onMouseDown: PropTypes.func,
+    style: PropTypes.object,
+    theme: PropTypes.shape({
+      check: PropTypes.string,
+      checked: PropTypes.string
+    })
+  };
+
+  return ripple(Check);
+};
+
+export default factory;
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
new file mode 100644
index 000000000..e963deb21
--- /dev/null
+++ b/components/checkbox/Checkbox.js
@@ -0,0 +1,99 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { CHECKBOX } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import checkFactory from './Check.js';
+
+const factory = (Check) => {
+  class Checkbox extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+      ]),
+      name: PropTypes.string,
+      onChange: PropTypes.func,
+      onMouseEnter: PropTypes.func,
+      onMouseLeave: PropTypes.func,
+      style: PropTypes.object,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string,
+        field: PropTypes.string,
+        input: PropTypes.string,
+        ripple: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
+
+    handleToggle = (event) => {
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!this.props.disabled && this.props.onChange) {
+        this.props.onChange(!this.props.checked, event);
+      }
+    };
+
+    blur () {
+      this.inputNode && this.inputNode.blur();
+    }
+
+    focus () {
+      this.inputNode && this.inputNode.focus();
+    }
+
+    render () {
+      const { checked, children, disabled, label, name, style, onChange, // eslint-disable-line
+        onMouseEnter, onMouseLeave, theme, ...others } = this.props;
+      const className = classnames(theme.field, {
+        [theme.disabled]: this.props.disabled
+      }, this.props.className);
+
+      return (
+        <label
+          data-react-toolbox='checkbox'
+          className={className}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          <input
+            {...others}
+            checked={checked}
+            className={theme.input}
+            disabled={disabled}
+            name={name}
+            onChange={() => {}}
+            onClick={this.handleToggle}
+            ref={node => { this.inputNode = node; }}
+            type='checkbox'
+          />
+          <Check
+            checked={checked}
+            disabled={disabled}
+            rippleClassName={theme.ripple}
+            style={style}
+            theme={theme}
+          />
+          {label ? <span data-react-toolbox='label' className={theme.text}>{label}</span> : null}
+          {children}
+        </label>
+      );
+    }
+  }
+
+  return Checkbox;
+};
+
+const Check = checkFactory(rippleFactory({ centered: true, spread: 2.6}));
+const Checkbox = factory(Check);
+export default themr(CHECKBOX)(Checkbox);
+export { factory as checkboxFactory };
+export { Checkbox };
diff --git a/components/checkbox/_config.scss b/components/checkbox/_config.scss
index 45c35a4d6..18266e498 100644
--- a/components/checkbox/_config.scss
+++ b/components/checkbox/_config.scss
@@ -1,12 +1,12 @@
-$checkbox-color: unquote("rgb(#{$color-primary})") !default;
-$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$checkbox-color: $color-primary !default;
+$checkbox-disabled-color: rgba($color-black, 0.26) !default;
 $checkbox-field-margin-bottom: 1.5 * $unit !default;
-$checkbox-focus-checked-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
 $checkbox-ripple-duration: 650ms !default;
 $checkbox-size: 1.8 * $unit !default;
-$checkbox-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
+$checkbox-focus-color: rgba($color-black, 0.1) !default;
 $checkbox-focus-size: $checkbox-size * 2.3 !default;
-$checkbox-text-color: unquote("rgb(#{$color-black})") !default;
+$checkbox-text-color: $color-black !default;
 $checkbox-text-font-size: $font-size-small !default;
 $checkbox-total-height: 1.8 * $unit !default;
 $checkbox-transition-duration: .2s !default;
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
new file mode 100644
index 000000000..64bd4a1c9
--- /dev/null
+++ b/components/checkbox/index.d.ts
@@ -0,0 +1,78 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface CheckboxTheme {
+  /**
+   * Used as root in the check element.
+   */
+  check?: string;
+  /**
+   * Used for the check element when it's checked.
+   */
+  checked?: string;
+  /**
+   * Used when the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for the ripple component.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label.
+   */
+  text?: string;
+}
+
+export interface CheckboxProps extends ReactToolbox.Props {
+  /**
+   * Value for the checkbox, can be true or false.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the checkbox shown as disabled and cannot be modified.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Text label to attach next to the checkbox element.
+   */
+  label?: React.ReactNode | string;
+  /**
+   * The name of the field to set in the input checkbox.
+   */
+  name?: string;
+  /**
+   * Callback called when the checkbox is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback called when the checkbox value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CheckboxTheme;
+  /**
+   * Additional properties passed to inner input element.
+   */
+  [key: string]: any;
+}
+
+export class Checkbox extends React.Component<CheckboxProps, {}> { }
+
+export default Checkbox;
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
new file mode 100644
index 000000000..5f89939a9
--- /dev/null
+++ b/components/checkbox/index.js
@@ -0,0 +1,12 @@
+import { themr } from 'react-css-themr';
+import { CHECKBOX } from '../identifiers.js';
+import themedRippleFactory from '../ripple';
+import { checkboxFactory } from './Checkbox.js';
+import checkFactory from './Check.js';
+import theme from './theme.scss';
+
+const ThemedCheck = checkFactory(themedRippleFactory({ centered: true, spread: 2.6}));
+const ThemedCheckbox = themr(CHECKBOX, theme)(checkboxFactory(ThemedCheck));
+
+export default ThemedCheckbox;
+export { ThemedCheckbox as Checkbox };
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
deleted file mode 100644
index b39ec1094..000000000
--- a/components/checkbox/index.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import Ripple from '../ripple';
-import events from '../utils/events';
-import style from './style';
-
-class Checkbox extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.any,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-  handleClick = (event) => {
-    events.pauseEvent(event);
-    if (!this.props.disabled && this.props.onChange) {
-      this.props.onChange(event);
-    }
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
-  };
-
-  render () {
-    let fieldClassName = style.field;
-    let checkboxClassName = style.check;
-    if (this.props.checked) checkboxClassName += ` ${style.checked}`;
-    if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
-    if (this.props.className) fieldClassName += ` ${this.props.className}`;
-
-    return (
-      <label
-        data-react-toolbox='checkbox'
-        className={fieldClassName}
-        onClick={this.handleClick}
-      >
-        <input
-          {...this.props}
-          className={style.input}
-          onClick={this.handleInputClick}
-          ref='input'
-          type='checkbox'
-        />
-        <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
-          <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
-        </span>
-        { this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
-      </label>
-    );
-  }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
-}
-
-export default Checkbox;
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index 8c0256328..4d2284ff8 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -1,36 +1,66 @@
 # Checkbox
 
-[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
+[Checkboxes](https://material.google.com/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
 
 <!-- example -->
 ```jsx
 import Checkbox from 'react-toolbox/lib/checkbox';
 
-const TestCheckbox = () => (
-  <div>
-    <Checkbox label="Checked option" checked />
-    <Checkbox label="Unchecked option" />
-    <Checkbox label="Disabled checkbox" checked disabled />
-  </div>
-);
+class TestCheckbox extends React.Component {
+  state = { check1: true, check2: false };
+
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
+  };
+
+  render () {
+    return (
+      <div>
+        <Checkbox
+          checked={this.state.check1}
+          label="Checked option"
+          onChange={this.handleChange.bind(this, 'check1')}
+        />
+        <Checkbox
+          checked={this.state.check2}
+          label="Unchecked option"
+          onChange={this.handleChange.bind(this, 'check2')}
+        />
+        <Checkbox
+          checked
+          disabled
+          label="Disabled checkbox"
+        />
+      </div>
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTCheckbox`.
+
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`       | `Bool`        |   `false`        | If true, the checkbox will be checked.|
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the checkbox field.|
-| `disabled`         | `Bool`        |     `false`          | If true, the checkbox shown as disabled and is not possible to modify it.|
-| `label`         | `String`        |                 | Text label to attach next to the checkbox element.|
-| `name`       | `String`       | `false`                | The name of the field to set in the input checkbox.|
-| `onBlur`       | `Function`       |                | Callback called when the checkbox is blurred.|
-| `onChange`       | `Function`       |                | Callback called when the checkbox value is changed.|
-| `onFocus`       | `Function`       |                | Callback called when the checkbox is focused |
-
-## Methods
+| `checked`       | `Boolean`       | `false`         | Value for the checkbox, can be `true` or `false`. |
+| `children`      | `String`, `Element` or `Array` |  | Children to pass through the component. |
+| `className`     | `String`        | `''`            | Sets a class to give customized styles to the checkbox field.|
+| `disabled`      | `Boolean`       | `false`         | If true, the checkbox shown as disabled and cannot be modified.|
+| `label`         | `String` of `node`        |                 | Text label to attach next to the checkbox element.|
+| `name`          | `String`        | `false`         | The name of the field to set in the input checkbox.|
+| `onBlur`        | `Function`      |                 | Callback called when the checkbox is blurred.|
+| `onChange`      | `Function`      |                 | Called with (isChecked, event) when the checkbox value is changed.|
+| `onFocus`       | `Function`      |                 | Callback called when the checkbox is focused |
 
-This component has state to control its value and how is it rendered. It exposes the following instance methods:
+## Theme
 
-- `blur` to blur the input.
-- `focus` to focus the input.
+| Name     | Description|
+|:---------|:-----------|
+| `check`  | Used as root in the check element.|
+| `checked`  | Used for the check element when it's checked.|
+| `disabled`   | Used when the component is disabled.|
+| `field`   | Used as the root class of the component.|
+| `input`   | Used for the input element.|
+| `ripple`   | Used for the ripple component.|
+| `text`   | Used for the text label.|
diff --git a/components/checkbox/style.scss b/components/checkbox/theme.scss
similarity index 91%
rename from components/checkbox/style.scss
rename to components/checkbox/theme.scss
index 87a7c5b7c..55b179205 100644
--- a/components/checkbox/style.scss
+++ b/components/checkbox/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .field {
@@ -8,6 +10,11 @@
   margin-bottom: $checkbox-field-margin-bottom;
   white-space: nowrap;
   vertical-align: middle;
+  .ripple {
+    background-color: $checkbox-color;
+    opacity: .3;
+    transition-duration: $checkbox-ripple-duration;
+  }
 }
 
 .text {
@@ -21,16 +28,16 @@
 }
 
 .input {
+  position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
   opacity: 0;
-  &:focus:not(&:active) + .check {
+  &:focus ~ .check {
     &:before {
       position: absolute;
       top: 50%;
       left: 50%;
-      z-index: $z-index-low;
       width: $checkbox-focus-size;
       height: $checkbox-focus-size;
       margin-top: - $checkbox-focus-size / 2;
@@ -82,12 +89,6 @@
   }
 }
 
-.ripple {
-  background-color: $checkbox-color;
-  opacity: .3;
-  transition-duration: $checkbox-ripple-duration;
-}
-
 .disabled {
   > .text {
     color: $checkbox-disabled-color;
diff --git a/components/chip/Chip.js b/components/chip/Chip.js
new file mode 100644
index 000000000..09d0a1011
--- /dev/null
+++ b/components/chip/Chip.js
@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { CHIP } from '../identifiers.js';
+import InjectAvatar from '../avatar/Avatar.js';
+
+const factory = (Avatar) => {
+  const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
+    let hasAvatar = false;
+    if (React.Children.count(children)) {
+      const flatChildren = React.Children.toArray(children);
+      const firstChild = flatChildren[0];
+      hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
+    }
+
+    const classes = classnames(theme.chip, {
+        [theme.deletable]: !!deletable,
+        [theme.avatar]: !!hasAvatar
+    }, className);
+
+    return (
+      <div data-react-toolbox='chip' className={classes} {...other}>
+        {typeof children === 'string' ? <span>{children}</span> : children}
+        {
+          deletable ? (
+            <span className={theme.delete} onClick={onDeleteClick}>
+              <svg viewBox="0 0 40 40" className={theme.deleteIcon}>
+                <path className={theme.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
+              </svg>
+            </span>
+          ) : null
+        }
+      </div>
+    );
+  };
+
+  Chip.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    deletable: PropTypes.bool,
+    onDeleteClick: PropTypes.func,
+    theme: PropTypes.shape({
+      avatar: PropTypes.string,
+      chip: PropTypes.string,
+      deletable: PropTypes.string,
+      delete: PropTypes.string,
+      deleteIcon: PropTypes.string,
+      deleteX: PropTypes.string
+    })
+  };
+
+  Chip.defaultProps = {
+    className: '',
+    deletable: false
+  };
+
+  return Chip;
+};
+
+const Chip = factory(InjectAvatar);
+export default themr(CHIP)(Chip);
+export { factory as chipFactory };
+export { Chip };
diff --git a/components/chip/__test__/index.spec.js b/components/chip/__test__/index.spec.js
new file mode 100644
index 000000000..87caae620
--- /dev/null
+++ b/components/chip/__test__/index.spec.js
@@ -0,0 +1,53 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-addons-test-utils';
+import { themr } from 'react-css-themr';
+import { CHIP } from '../../identifiers.js';
+import { chipFactory } from '../Chip';
+import { tooltipFactory } from '../../tooltip';
+
+const Avatar = ({title}) => <span>{title}</span>; // eslint-disable-line react/prop-types
+const Chip = themr(CHIP)(chipFactory(Avatar));
+
+describe('Chip', function () {
+  describe('with avatar', function () {
+    it('adds the avatar class to the element', function () {
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Chip theme={{avatar: 'avatar-class'}}>
+          <Avatar title='Test'/>
+          <span>Test</span>
+        </Chip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toMatch(/\bavatar-class\b/);
+    });
+
+    it('works with non-flat children', function () {
+      const TooltippedChip = tooltipFactory()(Chip);
+      const tree = ReactTestUtils.renderIntoDocument(
+        <TooltippedChip theme={{avatar: 'avatar-class'}} tooltip='Test tooltip'>
+          <Avatar title='Test'/>
+          <span>Test</span>
+        </TooltippedChip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toMatch(/\bavatar-class\b/);
+    });
+  });
+
+  describe('without avatar', function () {
+    it('does not add avatar class to the element', function () {
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Chip theme={{avatar: 'avatar-class'}}>
+          <span>Test</span>
+        </Chip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toNotMatch(/\bavatar-class\b/);
+    });
+  });
+});
diff --git a/components/chip/_config.scss b/components/chip/_config.scss
new file mode 100644
index 000000000..a335b2f66
--- /dev/null
+++ b/components/chip/_config.scss
@@ -0,0 +1,17 @@
+$chip-height: 3.2 * $unit !default;
+$chip-padding: 1.2 * $unit !default;
+$chip-margin-right: 0.25 * $unit !default;
+$chip-background: $palette-grey-200 !default;
+
+$chip-icon-font-size: 2 * $unit !default;
+$chip-icon-margin-right: 0.8 * $unit !default;
+
+$chip-color: $color-text-secondary !default;
+$chip-font-size: $font-size-small !default;
+
+$chip-remove-size: 2.4 * $unit !default;
+$chip-remove-margin: 0.4 * $unit !default;
+$chip-remove-stroke-width: 0.4 * $unit !default;
+$chip-remove-background: $palette-grey-400 !default;
+$chip-remove-background-hover: $palette-grey-500 !default;
+$chip-remove-color: $color-white !default;
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
new file mode 100644
index 000000000..f51e1fbd6
--- /dev/null
+++ b/components/chip/index.d.ts
@@ -0,0 +1,53 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ChipTheme {
+  /**
+   * Added to the root element when the component includes an avatar.
+   */
+  avatar?: string;
+  /**
+   * Used for the root element.
+   */
+  chip?: string;
+  /**
+   * Added to the root element when the component is deletable.
+   */
+  deletable?: string;
+  /**
+   * Used for the delete element wrapper.
+   */
+  delete?: string;
+  /**
+   * Used for the delete icon.
+   */
+  deleteIcon?: string;
+  /**
+   * Used for the delete svg inner layer.
+   */
+  deleteX?: string;
+}
+
+export interface ChipProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the chip will be rendered with a delete icon.
+   * @default false
+   */
+  deletable?: boolean;
+  /**
+   * Callback to be invoked when the delete icon is clicked.
+   */
+  onDeleteClick?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ChipTheme;
+}
+
+export class Chip extends React.Component<ChipProps, {}> { }
+
+export default Chip;
diff --git a/components/chip/index.js b/components/chip/index.js
new file mode 100644
index 000000000..62dd4d6d2
--- /dev/null
+++ b/components/chip/index.js
@@ -0,0 +1,11 @@
+import { CHIP } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { chipFactory } from './Chip.js';
+import Avatar from '../avatar';
+import theme from './theme.scss';
+
+const Chip = chipFactory(Avatar);
+const ThemedChip = themr(CHIP, theme)(Chip);
+
+export default ThemedChip;
+export { ThemedChip as Chip };
diff --git a/components/chip/readme.md b/components/chip/readme.md
new file mode 100644
index 000000000..e8ab3a876
--- /dev/null
+++ b/components/chip/readme.md
@@ -0,0 +1,57 @@
+# Chip
+
+Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons. To add an icon or contact image to a chip, include an `Avatar` element as the first child.
+
+<!-- example -->
+```jsx
+import Avatar from 'react-toolbox/lib/avatar';
+import Chip from 'react-toolbox/lib/chip';
+
+const ChipTest = () => (
+  <div>
+    <Chip>Example chip</Chip>
+    <Chip>
+      <span style={{textDecoration: 'line-through'}}>Standard</span>
+      <strong>Custom</strong> chip <small>(custom markup)</small>
+    </Chip>
+
+    <Chip deletable>Deletable Chip</Chip>
+
+    <Chip>
+      <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+      <span>Avatar Chip</span>
+    </Chip>
+
+    <Chip>
+      <Avatar title="A" /><span>Initial chip</span>
+    </Chip>
+
+    <Chip>
+      <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+      <span>Image contact chip</span>
+    </Chip>
+  </div>
+);
+```
+
+If you want to provide a theme via context, the component key is `RTChip`.
+
+## Properties
+
+| Name            | Type        | Default         | Description|
+|:----------------|:------------|:----------------|:-----------|
+| `children`      | `Node`      |                 | Child components, usually `Avatar` and inline elements. |
+| `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
+| `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
+| `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
+
+## Theme
+
+| Name       | Description|
+|:-----------|:-----------|
+| `avatar` | Added to the root element when the component includes an avatar.|
+| `chip` | Used for the root element.|
+| `deletable` | Added to the root element when the component is deletable.|
+| `delete` | Used for the delete element wrapper.|
+| `deleteIcon` | Used for the delete icon.|
+| `deleteX` | Used for the delete svg inner layer.|
diff --git a/components/chip/theme.scss b/components/chip/theme.scss
new file mode 100644
index 000000000..4baa8f9c9
--- /dev/null
+++ b/components/chip/theme.scss
@@ -0,0 +1,68 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.chip {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 $chip-padding;
+  margin-right: $chip-margin-right;
+  overflow: hidden;
+  font-size: $chip-font-size;
+  line-height: $chip-height;
+  color: $chip-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: $chip-background;
+  border-radius: $chip-height;
+}
+
+.avatar {
+  padding-left: 0;
+
+  > [data-react-toolbox="avatar"] {
+    width: $chip-height;
+    height: $chip-height;
+    margin-right: $chip-icon-margin-right;
+    vertical-align: middle;
+
+    > span {
+      font-size: $chip-icon-font-size;
+      line-height: $chip-height;
+    }
+  }
+}
+
+.deletable {
+  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
+}
+
+.delete {
+  position: absolute;
+  right: 0;
+  display: inline-block;
+  width: $chip-remove-size;
+  height: $chip-remove-size;
+  padding: $chip-remove-margin;
+  margin: $chip-remove-margin;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.delete:hover .deleteIcon {
+  background: $chip-remove-background-hover;
+}
+
+.deleteIcon {
+  vertical-align: top;
+  background: $chip-remove-background;
+  border-radius: $chip-remove-size;
+
+  .deleteX {
+    fill: transparent;
+    stroke-width: $chip-remove-stroke-width;
+    stroke: $chip-remove-color;
+  }
+}
diff --git a/components/commons.scss b/components/commons.scss
index 877c09973..54f9ba163 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,6 +1,7 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/~normalize.css";
-@import "http://github.com/base";
-@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
 
 html {
   font-size: 62.5%;
@@ -48,11 +49,6 @@ a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
 input:not([type="checkbox"]):not([type="radio"]), button {
   outline: none;
   appearance: none;
@@ -60,6 +56,11 @@ input:not([type="checkbox"]):not([type="radio"]), button {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
+// -- Remove firefox default style for required inputs
+input[required]:-moz-ui-invalid {
+  box-shadow: none;
+}
+
 // -- Material design font sizes
 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
   @include typo-display-3($color-contrast: true);
@@ -92,98 +93,3 @@ h6 {
 p {
   @include typo-body-1;
 }
-
-//-- Flex
-[data-flex] {
-  display: flex;
-}
-
-body[data-flex] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-// -- Direction
-[data-flex^="horizontal"] {
-  flex-direction: row;
-}
-
-[data-flex^="vertical"] {
-  flex-direction: column;
-}
-
-
-// -- Size {
-[data-flex*="grow"] {
-  > *:not([data-column]):not([data-flex-grow]) {
-    flex-grow: 1;
-  }
-}
-
-[data-flex-grow="min"] {
-  flex-grow: 0;
-}
-
-[data-flex-grow="max"] {
-  flex-grow: 2;
-}
-
-// -- Container properties
-[data-flex*="wrap"] {
-  flex-wrap: wrap;
-}
-
-[data-flex*="center"] {
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-}
-
-[data-flex-justify="start"] {
-  justify-content: flex-start;
-}
-
-[data-flex-justify="center"] {
-  justify-content: center;
-}
-
-[data-flex-justify="end"] {
-  justify-content: flex-end;
-}
-
-[data-flex-content="start"] {
-  align-content: flex-start;
-}
-
-[data-flex-content="center"] {
-  align-content: center;
-}
-
-[data-flex-content="end"] {
-  align-content: flex-end;
-}
-
-[data-flex-items="center"] {
-  align-items: center;
-}
-
-[data-flex-items="start"] {
-  align-items: flex-start;
-}
-
-[data-flex-items="end"] {
-  align-items: flex-end;
-}
-
-// -- Children properties
-[data-flex-order="first"] {
-  order: -1;
-}
-
-[data-flex-order="last"] {
-  order: 999999;
-}
diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
new file mode 100644
index 000000000..b8628fe74
--- /dev/null
+++ b/components/date_picker/Calendar.js
@@ -0,0 +1,159 @@
+import React, { Component, PropTypes } from 'react';
+import CssTransitionGroup from 'react-addons-css-transition-group';
+import { SlideLeft, SlideRight } from '../animations';
+import time from '../utils/time.js';
+import utils from '../utils/utils.js';
+import CalendarMonth from './CalendarMonth.js';
+
+const DIRECTION_STEPS = { left: -1, right: 1 };
+
+const factory = (IconButton) => {
+  class Calendar extends Component {
+    static propTypes = {
+      disabledDates: React.PropTypes.array,
+      display: PropTypes.oneOf(['months', 'years']),
+      enabledDates: React.PropTypes.array,
+      handleSelect: PropTypes.func,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
+      maxDate: PropTypes.object,
+      minDate: PropTypes.object,
+      onChange: PropTypes.func,
+      selectedDate: PropTypes.object,
+      sundayFirstDayOfWeek: React.PropTypes.bool,
+      theme: PropTypes.shape({
+        active: PropTypes.string,
+        calendar: PropTypes.string,
+        next: PropTypes.string,
+        prev: PropTypes.string,
+        years: PropTypes.string
+      }),
+      viewDate: PropTypes.object
+    };
+
+    static defaultProps = {
+      display: 'months',
+      selectedDate: new Date()
+    };
+
+    state = {
+      viewDate: this.props.selectedDate
+    };
+
+    componentWillMount () {
+      document.body.addEventListener('keydown', this.handleKeys);
+    }
+
+    componentDidUpdate () {
+      if (this.refs.activeYear) {
+        this.scrollToActive();
+      }
+    }
+
+    componentWillUnmount () {
+      document.body.removeEventListener('keydown', this.handleKeys);
+    }
+
+    scrollToActive () {
+      this.refs.years.scrollTop = this.refs.activeYear.offsetTop
+      - this.refs.years.offsetHeight / 2
+      + this.refs.activeYear.offsetHeight / 2;
+    }
+
+    handleDayClick = (day) => {
+      this.props.onChange(time.setDay(this.state.viewDate, day), true);
+    };
+
+    handleYearClick = (event) => {
+      const year = parseInt(event.currentTarget.id);
+      const viewDate = time.setYear(this.props.selectedDate, year);
+      this.setState({viewDate});
+      this.props.onChange(viewDate, false);
+    };
+
+    handleKeys = (e) => {
+      const { selectedDate } = this.props;
+
+      if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
+
+      switch (e.which) {
+        case 13: this.props.handleSelect(); break; // enter
+        case 37: this.handleDayArrowKey(time.addDays(selectedDate, -1)); break; // left
+        case 38: this.handleDayArrowKey(time.addDays(selectedDate, -7)); break; // up
+        case 39: this.handleDayArrowKey(time.addDays(selectedDate, 1)); break; // right
+        case 40: this.handleDayArrowKey(time.addDays(selectedDate, 7)); break; // down
+        default: break;
+      }
+    }
+
+    handleDayArrowKey = (date) => {
+      this.setState({ viewDate: date });
+      this.props.onChange(date, false);
+    }
+
+    changeViewMonth = (event) => {
+      const direction = event.currentTarget.id;
+      this.setState({
+        direction,
+        viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])
+      });
+    };
+
+    renderYears () {
+      return (
+        <ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
+          {utils.range(1900, 2100).map(year => (
+            <li
+              children={year}
+              className={year === this.state.viewDate.getFullYear() ? this.props.theme.active : ''}
+              id={year}
+              key={year}
+              onClick={this.handleYearClick}
+              ref={year === this.state.viewDate.getFullYear() ? 'activeYear' : undefined}
+            />
+          ))}
+        </ul>
+      );
+    }
+
+    renderMonths () {
+      const { theme } = this.props;
+      const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
+      return (
+        <div data-react-toolbox='calendar'>
+          <IconButton id='left' className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth} />
+          <IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
+          <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
+            <CalendarMonth
+              enabledDates={this.props.enabledDates}
+              disabledDates={this.props.disabledDates}
+              key={this.state.viewDate.getMonth()}
+              locale={this.props.locale}
+              maxDate={this.props.maxDate}
+              minDate={this.props.minDate}
+              onDayClick={this.handleDayClick}
+              selectedDate={this.props.selectedDate}
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
+              theme={this.props.theme}
+              viewDate={this.state.viewDate}
+            />
+          </CssTransitionGroup>
+        </div>
+      );
+    }
+
+    render () {
+      return (
+        <div className={this.props.theme.calendar}>
+          {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
+        </div>
+      );
+    }
+  }
+
+  return Calendar;
+};
+
+export default factory;
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
new file mode 100644
index 000000000..12829f912
--- /dev/null
+++ b/components/date_picker/CalendarDay.js
@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import time from '../utils/time.js';
+
+class Day extends Component {
+  static propTypes = {
+    day: PropTypes.number,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    selectedDate: PropTypes.object,
+    sundayFirstDayOfWeek: PropTypes.bool,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      day: PropTypes.string,
+      disabled: PropTypes.string
+    }),
+    viewDate: PropTypes.object
+  };
+
+  dayStyle () {
+    if (this.props.day === 1) {
+      const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
+      const firstDay = time.getFirstWeekDay(this.props.viewDate) - e;
+      return {
+        marginLeft: `${ (firstDay >= 0 ? firstDay : 6) * 100 / 7 }%`
+      };
+    }
+  }
+
+  isSelected () {
+    const sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
+    const sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
+    const sameDay = this.props.day === this.props.selectedDate.getDate();
+    return sameYear && sameMonth && sameDay;
+  }
+
+  handleClick = () => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(this.props.day);
+    }
+  };
+
+  render () {
+    const className = classnames(this.props.theme.day, {
+      [this.props.theme.active]: this.isSelected(),
+      [this.props.theme.disabled]: this.props.disabled
+    });
+
+    return (
+      <div data-react-toolbox='day' className={className} style={this.dayStyle()}>
+        <span onClick={this.handleClick}>
+          {this.props.day}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Day;
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
new file mode 100644
index 000000000..d7f9e1e43
--- /dev/null
+++ b/components/date_picker/CalendarMonth.js
@@ -0,0 +1,84 @@
+import React, { Component, PropTypes } from 'react';
+import time from '../utils/time.js';
+import utils from '../utils/utils.js';
+import CalendarDay from './CalendarDay.js';
+
+class Month extends Component {
+  static propTypes = {
+    disabledDates: React.PropTypes.array,
+    enabledDates: React.PropTypes.array,
+    locale: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.object
+    ]),
+    maxDate: PropTypes.object,
+    minDate: PropTypes.object,
+    onDayClick: PropTypes.func,
+    selectedDate: PropTypes.object,
+    sundayFirstDayOfWeek: React.PropTypes.bool,
+    theme: PropTypes.shape({
+      days: PropTypes.string,
+      month: PropTypes.string,
+      title: PropTypes.string,
+      week: PropTypes.string
+    }),
+    viewDate: PropTypes.object
+  };
+
+  static defaultProps = {
+    disabledDates: [],
+    enabledDates: []
+  };
+
+  handleDayClick = (day) => {
+    if (this.props.onDayClick) this.props.onDayClick(day);
+  };
+
+  isDayDisabled (date) {
+    const {minDate, maxDate, enabledDates, disabledDates} = this.props;
+    const compareDate = compDate => date.getTime() === compDate.getTime();
+    const dateInDisabled = disabledDates.filter(compareDate).length > 0;
+    const dateInEnabled = enabledDates.filter(compareDate).length > 0;
+    return time.dateOutOfRange(date, minDate, maxDate)
+      || (enabledDates.length > 0 && !dateInEnabled)
+      || dateInDisabled;
+  }
+
+  renderWeeks () {
+    const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
+    const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
+    return source.map((d, i) => (<span key={i}>{d}</span>));
+  }
+
+  renderDays () {
+    return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
+      const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
+      return (
+        <CalendarDay
+          key={i}
+          day={i}
+          disabled={this.isDayDisabled(date)}
+          onClick={this.handleDayClick}
+          selectedDate={this.props.selectedDate}
+          theme={this.props.theme}
+          viewDate={this.props.viewDate}
+          sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
+        />
+      );
+    });
+  }
+
+  render () {
+    return (
+      <div data-react-toolbox='month' className={this.props.theme.month}>
+        <span className={this.props.theme.title}>
+          {time.getFullMonth(this.props.viewDate, this.props.locale)} {this.props.viewDate.getFullYear()}
+        </span>
+        <div className={this.props.theme.week}>{this.renderWeeks()}</div>
+        <div className={this.props.theme.days}>{this.renderDays()}</div>
+      </div>
+    );
+  }
+}
+
+export default Month;
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
new file mode 100644
index 000000000..12b5d3afc
--- /dev/null
+++ b/components/date_picker/DatePicker.js
@@ -0,0 +1,171 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { DATE_PICKER } from '../identifiers.js';
+import events from '../utils/events.js';
+import time from '../utils/time.js';
+
+import InjectIconButton from '../button/IconButton.js';
+import InjectInput from '../input/Input.js';
+import InjectDialog from '../dialog/Dialog.js';
+import calendarFactory from './Calendar.js';
+import datePickerDialogFactory from './DatePickerDialog.js';
+
+const factory = (Input, DatePickerDialog) => {
+  class DatePicker extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
+      className: PropTypes.string,
+      disabledDates: React.PropTypes.array,
+      enabledDates: React.PropTypes.array,
+      error: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inputClassName: PropTypes.string,
+      inputFormat: PropTypes.func,
+      label: PropTypes.string,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
+      maxDate: PropTypes.object,
+      minDate: PropTypes.object,
+      name: PropTypes.string,
+      okLabel: PropTypes.string,
+      onChange: PropTypes.func,
+      onClick: PropTypes.func,
+      onDismiss: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
+      onKeyPress: PropTypes.func,
+      onOverlayClick: PropTypes.func,
+      readonly: PropTypes.bool,
+      sundayFirstDayOfWeek: React.PropTypes.bool,
+      theme: PropTypes.shape({
+        input: PropTypes.string
+      }),
+      value: PropTypes.oneOfType([
+        PropTypes.instanceOf(Date),
+        PropTypes.string
+      ])
+    };
+
+    static defaultProps = {
+      active: false,
+      locale: 'en',
+      sundayFirstDayOfWeek: false
+    };
+
+    state = {
+      active: this.props.active
+    };
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
+    }
+
+    handleDismiss = () => {
+      this.setState({active: false});
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
+    };
+
+    handleInputFocus = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+    };
+
+    handleInputBlur = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: false});
+    };
+
+    handleInputClick = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+      if (this.props.onClick) this.props.onClick(event);
+    };
+
+    handleInputKeyPress = (event) => {
+      if (event.charCode === 13) {
+        events.pauseEvent(event);
+        this.setState({active: true});
+      }
+      if (this.props.onKeyPress) this.props.onKeyPress(event);
+    };
+
+    handleSelect = (value, event) => {
+      if (this.props.onChange) this.props.onChange(value, event);
+      this.setState({active: false});
+    };
+
+    render () {
+      const { active, onDismiss,// eslint-disable-line
+        autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat,
+        locale, maxDate, minDate, okLabel, onEscKeyDown, onOverlayClick, readonly,
+        sundayFirstDayOfWeek, value, ...others } = this.props;
+      const finalInputFormat = inputFormat || time.formatDate;
+      const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
+      const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
+
+      return (
+        <div data-react-toolbox='date-picker'>
+          <Input
+            {...others}
+            className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
+            disabled={readonly}
+            error={this.props.error}
+            icon={this.props.icon}
+            label={this.props.label}
+            name={this.props.name}
+            onFocus={this.handleInputFocus}
+            onKeyPress={this.handleInputKeyPress}
+            onClick={this.handleInputClick}
+            readOnly
+            type='text'
+            value={formattedDate}
+          />
+          <DatePickerDialog
+            active={this.state.active}
+            autoOk={autoOk}
+            cancelLabel={cancelLabel}
+            className={this.props.className}
+            disabledDates={disabledDates}
+            enabledDates={enabledDates}
+            locale={locale}
+            maxDate={maxDate}
+            minDate={minDate}
+            name={this.props.name}
+            onDismiss={this.handleDismiss}
+            okLabel={okLabel}
+            onEscKeyDown={onEscKeyDown || this.handleDismiss}
+            onOverlayClick={onOverlayClick || this.handleDismiss}
+            onSelect={this.handleSelect}
+            sundayFirstDayOfWeek={sundayFirstDayOfWeek}
+            theme={this.props.theme}
+            value={date}
+          />
+        </div>
+      );
+    }
+  }
+
+  return DatePicker;
+};
+
+const Calendar = calendarFactory(InjectIconButton);
+const DatePickerDialog = datePickerDialogFactory(InjectDialog, Calendar);
+const DatePicker = factory(InjectInput, DatePickerDialog);
+
+export default themr(DATE_PICKER)(DatePicker);
+export {
+  DatePickerDialog as DatePickerDialog,
+  factory as datePickerFactory
+};
+export { DatePicker };
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
new file mode 100644
index 000000000..21447056a
--- /dev/null
+++ b/components/date_picker/DatePickerDialog.js
@@ -0,0 +1,145 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import time from '../utils/time.js';
+
+const factory = (Dialog, Calendar) => {
+  class CalendarDialog extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
+      className: PropTypes.string,
+      disabledDates: PropTypes.array,
+      enabledDates: PropTypes.array,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
+      maxDate: PropTypes.object,
+      minDate: PropTypes.object,
+      name: PropTypes.string,
+      okLabel: PropTypes.string,
+      onDismiss: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
+      onOverlayClick: PropTypes.func,
+      onSelect: PropTypes.func,
+      sundayFirstDayOfWeek: React.PropTypes.bool,
+      theme: PropTypes.shape({
+        button: PropTypes.string,
+        calendarWrapper: PropTypes.string,
+        date: PropTypes.string,
+        dialog: PropTypes.string,
+        header: PropTypes.string,
+        monthsDisplay: PropTypes.string,
+        year: PropTypes.string,
+        yearsDisplay: PropTypes.string
+      }),
+      value: PropTypes.object
+    };
+
+    static defaultProps = {
+      active: false,
+      cancelLabel: 'Cancel',
+      className: '',
+      okLabel: 'Ok',
+      value: new Date()
+    };
+
+    state = {
+      display: 'months',
+      date: this.props.value
+    };
+
+    componentWillMount () {
+      this.updateStateDate(this.props.value);
+    }
+
+    componentWillReceiveProps (nextProps) {
+      this.updateStateDate(nextProps.value);
+    }
+
+    handleNewDate = (value, dayClick) => {
+      const state = {display: 'months', date: value};
+      if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
+        if (this.props.maxDate && this.props.minDate) {
+          state.date = time.closestDate(value, this.props.maxDate, this.props.minDate);
+        } else {
+          state.date = this.props.maxDate || this.props.minDate;
+        }
+      }
+      this.setState(state);
+      if (dayClick && this.props.autoOk && this.props.onSelect) {
+        this.props.onSelect(value);
+      }
+    };
+
+    handleSelect = (event) => {
+      if (this.props.onSelect) this.props.onSelect(this.state.date, event);
+    };
+
+    handleSwitchDisplay = (event) => {
+      this.setState({ display: event.target.id });
+    };
+
+    updateStateDate = (date) => {
+      if (Object.prototype.toString.call(date) === '[object Date]') {
+        this.handleNewDate(date, false);
+      }
+    };
+
+    actions = [
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+    ];
+
+    render () {
+      const { theme } = this.props;
+      const display = `${this.state.display}Display`;
+      const className = classnames(theme.dialog, this.props.className);
+      const headerClassName = classnames(theme.header, theme[display]);
+      const shortDayOfWeek = time.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
+      const shortMonth = time.getShortMonth(this.state.date, this.props.locale);
+      const date = this.state.date.getDate();
+
+      return (
+        <Dialog
+          actions={this.actions}
+          active={this.props.active}
+          className={className}
+          onEscKeyDown={this.props.onEscKeyDown}
+          onOverlayClick={this.props.onOverlayClick}
+          type="custom"
+        >
+          <header className={headerClassName}>
+            <span id='years' className={theme.year} onClick={this.handleSwitchDisplay}>
+              {this.state.date.getFullYear()}
+            </span>
+            <h3 id='months' className={theme.date} onClick={this.handleSwitchDisplay}>
+              {shortDayOfWeek}, {shortMonth} {date}
+            </h3>
+          </header>
+
+          <div className={theme.calendarWrapper}>
+            <Calendar
+              disabledDates={this.props.disabledDates}
+              display={this.state.display}
+              enabledDates={this.props.enabledDates}
+              handleSelect={this.handleSelect}
+              maxDate={this.props.maxDate}
+              minDate={this.props.minDate}
+              onChange={this.handleNewDate}
+              selectedDate={this.state.date}
+              theme={this.props.theme}
+              locale={this.props.locale}
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
+            />
+          </div>
+        </Dialog>
+      );
+    }
+  }
+
+  return CalendarDialog;
+};
+
+export default factory;
diff --git a/components/date_picker/__test__/index.spec.js b/components/date_picker/__test__/index.spec.js
new file mode 100644
index 000000000..d44be7dd3
--- /dev/null
+++ b/components/date_picker/__test__/index.spec.js
@@ -0,0 +1,83 @@
+import expect from 'expect';
+import theme from '../theme.scss';
+import { DatePickerDialog } from '../DatePicker';
+import utils from '../../utils/testing';
+
+describe('DatePickerDialog', function () {
+  describe('#on mount', function () {
+    it('passes value through to calendar if no maxDate/minDate specified', function () {
+      const value = new Date(2016, 1, 1);
+      const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value});
+      expect(getDatePassedToCalendar(wrapper)).toBe(value);
+    });
+
+    describe('when minDate but not maxDate specified', function () {
+      const minDate = new Date(2016, 1, 2);
+
+      it('passes through a value after minDate', function () {
+        const value = new Date(2016, 1, 3);
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate});
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value before minDate to minDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme, value: new Date(2016, 1, 1), minDate
+        });
+        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+    });
+
+    describe('when maxDate but not minDate specified', function () {
+      const maxDate = new Date(2016, 1, 2);
+
+      it('passes through a value before maxDate', function () {
+        const value = new Date(2016, 1, 1);
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, maxDate});
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value after maxDate to maxDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme, value: new Date(2016, 1, 3), maxDate
+        });
+        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+    });
+
+    describe('if both minDate and maxDate are set', function () {
+      const minDate = new Date(2016, 1, 2);
+      const maxDate = new Date(2016, 1, 4);
+
+      it('sanitises value to minDate if value is before minDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme,
+          value: new Date(2016, 1, 1),
+          minDate,
+          maxDate
+        });
+        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+
+      it('sanitises value to maxDate if value is after maxDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme,
+          value: new Date(2016, 1, 5),
+          minDate,
+          maxDate
+        });
+        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+
+      it('doesn\'t sanitise when value is between maxDate/minDate', function () {
+        const value = new Date(2016, 1, 3);
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate, maxDate});
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+    });
+
+    function getDatePassedToCalendar (wrapper) {
+      return wrapper.props.children[1].props.children.props.selectedDate;
+    }
+  });
+});
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 1fbd88e0c..62acee078 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -1,15 +1,31 @@
-$datepicker-primary: $color-primary;
-$datepicker-primary-contrast: $color-primary-contrast;
-$datepicker-primary-dark: $color-primary-dark;
-$datepicker-primary-color: unquote("rgb(#{$datepicker-primary})") !default;
-$datepicker-primary-hover-color: unquote("rgba(#{$datepicker-primary}, 0.20)") !default;
-$datepicker-primary-contrast-color: unquote("rgb(#{$datepicker-primary-contrast})") !default;
-$datepicker-primary-dark-color: unquote("rgb(#{$datepicker-primary-dark})") !default;
-$datepicker-dialog-width: 30 * $unit;
-$datepicker-inactive-opacity: .6;
-$datepicker-weekday-line-height: 2 * $unit;
-$datepicker-weekday-font-size: $font-size-small;
-$datepicker-month-font-size: $font-size-big;
-$datepicker-day-font-size: 5 * $unit;
-$datepicker-day-line-height: 4 * $unit;
-$datepicker-year-font-size: 1.8 * $unit;
+$datepicker-primary: $color-primary !default;
+$datepicker-primary-contrast: $color-primary-contrast !default;
+$datepicker-primary-dark: $color-primary-dark !default;
+$datepicker-primary-color: $datepicker-primary !default;
+$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
+$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
+$datepicker-primary-dark-color: $datepicker-primary-dark !default;
+$datepicker-dialog-width: 33 * $unit !default;
+$datepicker-inactive-opacity: .6 !default;
+$datepicker-weekday-line-height: 2 * $unit !default;
+$datepicker-weekday-font-size: $font-size-small !default;
+$datepicker-month-font-size: $font-size-big !default;
+$datepicker-day-font-size: 5 * $unit !default;
+$datepicker-day-line-height: 4 * $unit !default;
+$datepicker-year-font-size: $font-size-small !default;
+
+$calendar-primary: $color-primary !default;
+$calendar-primary-contrast: $color-primary-contrast !default;
+$calendar-primary-color: $calendar-primary !default;
+$calendar-primary-contrast-color: $calendar-primary-contrast !default;
+$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
+$calendar-arrows-color: $palette-grey-600 !default;
+$calendar-arrows-font-size: 2 * $unit !default;
+$calendar-year-font-size: 2.4 * $unit !default;
+$calendar-day-font-size: 1.3 * $unit !default;
+$calendar-day-disable-opacity: 0.25 !default;
+$calendar-row-height: 3 * $unit !default;
+$calendar-day-padding-topbottom: .2 * $unit !default;
+$calendar-day-padding-leftright: 0 !default;
+$calendar-title-height: 3.6 * $unit !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
diff --git a/components/date_picker/calendar/_config.scss b/components/date_picker/calendar/_config.scss
deleted file mode 100644
index 85a2100ea..000000000
--- a/components/date_picker/calendar/_config.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$calendar-primary: $color-primary;
-$calendar-primary-contrast: $color-primary-contrast;
-$calendar-primary-color: unquote("rgb(#{$calendar-primary})") !default;
-$calendar-primary-contrast-color: unquote("rgb(#{$calendar-primary-contrast})") !default;
-$calendar-primary-hover-color: unquote("rgba(#{$calendar-primary}, 0.21)") !default;
-$calendar-arrows-color: unquote("rgb(#{$palette-grey-600})") !default;
-$calendar-arrows-font-size: 2 * $unit;
-$calendar-arrows-ripple-duration: 450ms;
-$calendar-year-font-size: 2.4;
-$calendar-day-font-size: 1.3 * $unit;
-$calendar-row-height: 3 * $unit;
-$calendar-day-padding: .2 * $unit;
-$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
diff --git a/components/date_picker/calendar/day.jsx b/components/date_picker/calendar/day.jsx
deleted file mode 100644
index f609946f1..000000000
--- a/components/date_picker/calendar/day.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import time from '../../utils/time';
-import style from './style';
-
-class Day extends React.Component {
-  static propTypes = {
-    day: React.PropTypes.number,
-    onClick: React.PropTypes.func,
-    selectedDate: React.PropTypes.object,
-    viewDate: React.PropTypes.object
-  };
-
-  dayStyle () {
-    if (this.props.day === 1) {
-      return {
-        marginLeft: `${time.getFirstWeekDay(this.props.viewDate) * 100 / 7}%`
-      };
-    }
-  }
-
-  isSelected () {
-    const sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
-    const sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
-    const sameDay = this.props.day === this.props.selectedDate.getDate();
-    return sameYear && sameMonth && sameDay;
-  }
-
-  render () {
-    const className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
-    return (
-      <div className={className} style={this.dayStyle()}>
-          <span onClick={this.props.onClick}>
-            {this.props.day}
-          </span>
-      </div>
-    );
-  }
-}
-
-export default Day;
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
deleted file mode 100644
index c785e8f36..000000000
--- a/components/date_picker/calendar/index.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import CSSTransitionGroup from 'react-addons-css-transition-group';
-import { SlideLeft, SlideRight } from '../../animations';
-import FontIcon from '../../font_icon';
-import Ripple from '../../ripple';
-import Month from './month';
-import utils from '../../utils';
-import style from './style';
-
-class Calendar extends React.Component {
-  static propTypes = {
-    display: React.PropTypes.oneOf(['months', 'years']),
-    onChange: React.PropTypes.func,
-    selectedDate: React.PropTypes.object,
-    viewDate: React.PropTypes.object
-  };
-
-  static defaultProps = {
-    display: 'months',
-    selectedDate: new Date()
-  };
-
-  state = {
-    selectedDate: this.props.selectedDate,
-    viewDate: this.props.selectedDate
-  };
-
-  componentDidUpdate () {
-    if (this.refs.activeYear) {
-      this.scrollToActive();
-    }
-  }
-
-  scrollToActive () {
-    this.refs.years.scrollTop =
-      this.refs.activeYear.offsetTop -
-      this.refs.years.offsetHeight / 2 +
-      this.refs.activeYear.offsetHeight / 2;
-  }
-
-  handleDayClick = (day) => {
-    const newDate = utils.time.setDay(this.state.viewDate, day);
-    this.setState({selectedDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
-  };
-
-  handleYearClick = (year) => {
-    const newDate = utils.time.setYear(this.state.selectedDate, year);
-    this.setState({selectedDate: newDate, viewDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
-  };
-
-  incrementViewMonth = () => {
-    this.refs.rippleRight.start(event);
-    this.setState({
-      direction: 'right',
-      viewDate: utils.time.addMonths(this.state.viewDate, 1)
-    });
-  };
-
-  decrementViewMonth = () => {
-    this.refs.rippleLeft.start(event);
-    this.setState({
-      direction: 'left',
-      viewDate: utils.time.addMonths(this.state.viewDate, -1)
-    });
-  };
-
-  renderYear (year) {
-    const props = {
-      className: year === this.state.viewDate.getFullYear() ? style.active : '',
-      key: year,
-      onClick: this.handleYearClick.bind(this, year)
-    };
-
-    if (year === this.state.viewDate.getFullYear()) {
-      props.ref = 'activeYear';
-    }
-
-    return <li {...props}>{ year }</li>;
-  }
-
-  renderYears () {
-    return (
-      <ul ref="years" className={style.years}>
-        { utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
-      </ul>
-    );
-  }
-
-  renderMonths () {
-    const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
-    return (
-      <div data-react-toolbox='calendar'>
-        <FontIcon className={style.prev} value='chevron-left' onMouseDown={this.decrementViewMonth}>
-          <Ripple ref='rippleLeft' className={style.ripple} spread={1.2} centered />
-        </FontIcon>
-        <FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
-          <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
-        </FontIcon>
-        <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
-          <Month
-            key={this.state.viewDate.getMonth()}
-            viewDate={this.state.viewDate}
-            selectedDate={this.state.selectedDate}
-            onDayClick={this.handleDayClick} />
-        </CSSTransitionGroup>
-      </div>
-    );
-  }
-
-  render () {
-    return (
-      <div className={style.root}>
-        { this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
-      </div>
-    );
-  }
-}
-
-export default Calendar;
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
deleted file mode 100644
index 82bcd42d0..000000000
--- a/components/date_picker/calendar/month.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import utils from '../../utils';
-import Day from './day';
-import style from './style';
-
-class Month extends React.Component {
-  static propTypes = {
-    onDayClick: React.PropTypes.func,
-    selectedDate: React.PropTypes.object,
-    viewDate: React.PropTypes.object
-  };
-
-  handleDayClick = (day) => {
-    if (this.props.onDayClick) this.props.onDayClick(day);
-  };
-
-  renderWeeks () {
-    return utils.range(0, 7).map(i => {
-      return <span key={i}>{ utils.time.getFullDayOfWeek(i).charAt(0) }</span>;
-    });
-  }
-
-  renderDays () {
-    return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
-      return (
-        <Day
-          key={i}
-          day={i}
-          onClick={this.handleDayClick.bind(this, i)}
-          selectedDate={this.props.selectedDate}
-          viewDate={this.props.viewDate}
-        />
-      );
-    });
-  }
-
-  render () {
-    return (
-      <div className={style.month}>
-        <span className={style.title}>
-          { utils.time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
-        </span>
-        <div className={style.week}>{ this.renderWeeks() }</div>
-        <div className={style.days}>{ this.renderDays() }</div>
-      </div>
-    );
-  }
-}
-
-export default Month;
diff --git a/components/date_picker/calendar/style.scss b/components/date_picker/calendar/style.scss
deleted file mode 100644
index 8339fcee1..000000000
--- a/components/date_picker/calendar/style.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  position: relative;
-  height: $calendar-total-height;
-  font-size: $font-size-small;
-  line-height: $calendar-row-height;
-  text-align: center;
-  background: $calendar-primary-contrast-color;
-  .prev, .next {
-    position: absolute;
-    top: 0;
-    z-index: $z-index-high;
-    width: $calendar-row-height;
-    height: $calendar-row-height;
-    font-size: $calendar-arrows-font-size;
-    line-height: $calendar-row-height;
-    color: $calendar-arrows-color;
-    text-align: center;
-    cursor: pointer;
-    opacity: .7;
-  }
-  .prev {
-    left: 0;
-  }
-  .next {
-    right: 0;
-  }
-}
-
-.title {
-  font-weight: 500;
-}
-
-.years {
-  height: 100%;
-  overflow: scroll;
-  font-size: $font-size-big;
-  > li {
-    line-height: 2.4;
-    cursor: pointer;
-    &.active {
-      font-size: $calendar-year-font-size;
-      color: $calendar-primary-color;
-    }
-  }
-}
-
-.week {
-  display: flex;
-  height: $calendar-row-height;
-  font-size: $calendar-day-font-size;
-  line-height: $calendar-row-height;
-  opacity: .5;
-
-  flex-wrap: wrap;
-  > span {
-    flex: 0 0 (100% / 7);
-  }
-}
-
-.days {
-  display: flex;
-  font-size: $calendar-day-font-size;
-
-  flex-wrap: wrap;
-}
-
-.day {
-  flex: 0 0 (100% / 7);
-  padding: $calendar-day-padding;
-  > span {
-    display: inline-block;
-    width: $calendar-row-height;
-    height: $calendar-row-height;
-    line-height: $calendar-row-height;
-    cursor: pointer;
-    border-radius: 50%;
-  }
-  &:hover:not(.active) > span {
-    color: $calendar-primary-contrast-color;
-    background: $calendar-primary-hover-color;
-  }
-  &.active > span {
-    color: $calendar-primary-contrast-color;
-    background: $calendar-primary-color;
-  }
-}
-
-.month {
-  background-color: $calendar-primary-contrast-color;
-}
-
-.ripple {
-  opacity: .5;
-  transition-duration: $calendar-arrows-ripple-duration;
-}
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
deleted file mode 100644
index 45644e149..000000000
--- a/components/date_picker/dialog.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import style from './style';
-import time from '../utils/time';
-import Calendar from './calendar';
-import Dialog from '../dialog';
-
-class CalendarDialog extends React.Component {
-  static propTypes = {
-    initialDate: React.PropTypes.object,
-    onDateSelected: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    initialDate: new Date()
-  };
-
-  state = {
-    date: this.props.initialDate,
-    display: 'months',
-    actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onDateCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.onDateSelected.bind(this) }
-    ]
-  };
-
-  handleCalendarChange = (date) => {
-    this.setState({date, display: 'months'});
-  };
-
-  displayMonths = () => {
-    this.setState({display: 'months'});
-  };
-
-  displayYears = () => {
-    this.setState({display: 'years'});
-  };
-
-  onDateCancel () {
-    this.refs.dialog.hide();
-  }
-
-  onDateSelected () {
-    if (this.props.onDateSelected) this.props.onDateSelected(this.state.date);
-    this.refs.dialog.hide();
-  }
-
-  show () {
-    this.refs.dialog.show();
-  }
-
-  render () {
-    const display = `display-${this.state.display}`;
-    const headerClassName = `${style.header} ${style[display]}`;
-
-    return (
-      <Dialog ref='dialog' type='custom' className={style.dialog} actions={this.state.actions}>
-          <header className={headerClassName}>
-            <span className={style.weekday}>
-              {time.getFullDayOfWeek(this.state.date.getDay())}
-            </span>
-            <div onClick={this.displayMonths}>
-              <span className={style.month}>{time.getShortMonth(this.state.date)}</span>
-              <span className={style.day}>{this.state.date.getDate()}</span>
-            </div>
-            <span className={style.year} onClick={this.displayYears}>
-              {this.state.date.getFullYear()}
-            </span>
-          </header>
-
-          <div className={style.wrapper}>
-            <Calendar
-              ref='calendar'
-              display={this.state.display}
-              onChange={this.handleCalendarChange}
-              selectedDate={this.state.date} />
-          </div>
-      </Dialog>
-    );
-  }
-}
-
-export default CalendarDialog;
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
new file mode 100644
index 000000000..7595298d1
--- /dev/null
+++ b/components/date_picker/index.d.ts
@@ -0,0 +1,221 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DatePickerTheme {
+  /**
+   * Used for the active day and year.
+   */
+  active?: string;
+  /**
+   * Used for the buttons in the dialog.
+   */
+  button?: string;
+  /**
+   * Used for the calendar root element.
+   */
+  calendar?: string;
+  /**
+   * Used as wrapper for the calendar component inside dialog.
+   */
+  calendarWrapper?: string;
+  /**
+   * Used for the date element inside header.
+   */
+  date?: string;
+  /**
+   * Used for the day element inside the calendar.
+   */
+  day?: string;
+  /**
+   * Used for the list of days inside a month.
+   */
+  days?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Added to day element when day is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the dialog header,.
+   */
+  header?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the month root element.
+   */
+  month?: string;
+  /**
+   * Added to the root dialog when months are displayed.
+   */
+  monthsDisplay?: string;
+  /**
+   * Used for the next month icon.
+   */
+  next?: string;
+  /**
+   * Used for the prev month icon.
+   */
+  prev?: string;
+  /**
+   * Used for the month title element.
+   */
+  title?: string;
+  /**
+   * Used for the weekdays wrapper.
+   */
+  week?: string;
+  /**
+   * Used for the year element inside header.
+   */
+  year?: string;
+  /**
+   * Used for the years list in years view.
+   */
+  years?: string;
+  /**
+   * Added to the root dialog when years are displayed.
+   */
+  yearsDisplay?: string;
+}
+
+export interface DatePickerProps extends ReactToolbox.Props {
+  /**
+   * Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Automatically selects a date upon clicking on a day
+   * @default false
+   */
+  autoOk?: boolean;
+  /**
+   * Label used for cancel button on Dialog.
+   * @default "Cancel"
+   */
+  cancelLabel?: string;
+  /**
+   * An array of date objects which will be disabled in the calendar. All other dates will be enabled.
+   */
+  disabledDates?: Date[];
+  /**
+   * An array of date objects which will be enabled in the calendar. All other dates will be disabled.
+   */
+  enabledDates?: Date[];
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of DatePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Function to format the date displayed on the input.
+   */
+  inputFormat?: Function;
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Sets locale for the Dialog.
+   * @default "en"
+   */
+  locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale;
+  /**
+   * Date object with the maximum selectable date.
+   */
+  maxDate?: Date;
+  /**
+   * Date object with the minimum selectable date.
+   */
+  minDate?: Date;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Label used for 'OK' button on Dialog.
+   * @default "Ok"
+   */
+  okLabel?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Callback fired on Input click.
+   */
+  onClick?: Function;
+  /**
+   * Callback fired after dismissing the Dialog.
+   */
+  onDismiss?: Function;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Callback invoked on Input key press.
+   */
+  onKeyPress?: Function;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
+  /**
+   * Set week's first day to Sunday. Default week's first day is Monday.
+   * @default false
+   */
+  sundayFirstDayOfWeek?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DatePickerTheme;
+  /**
+   * Date object with the currently selected date.
+   */
+  value?: Date | string;
+}
+
+export interface DatePickerLocale {
+  /**
+   * Month names.
+   */
+  months?: string[];
+  /**
+   * Month short names.
+   */
+  monthsShort?: string[];
+  /**
+   * Day names starting from Sunday.
+   */
+  weekdays?: string[];
+  /**
+   * Day short names starting from Sunday.
+   */
+  weekdaysShort?: string[];
+  /**
+   * Day letters starting from Sunday.
+   */
+  weekdaysLetter?: string[];
+}
+
+export class DatePicker extends React.Component<DatePickerProps, {}> { }
+
+export default DatePicker;
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
new file mode 100644
index 000000000..c9242d321
--- /dev/null
+++ b/components/date_picker/index.js
@@ -0,0 +1,21 @@
+import { themr } from 'react-css-themr';
+import { DATE_PICKER, DIALOG } from '../identifiers.js';
+import { datePickerFactory } from './DatePicker.js';
+import datePickerDialogFactory from './DatePickerDialog.js';
+import calendarFactory from './Calendar.js';
+
+import { IconButton } from '../button';
+import Input from '../input';
+import Dialog from '../dialog';
+import theme from './theme.scss';
+
+const Calendar = calendarFactory(IconButton);
+const DatePickerDialog = datePickerDialogFactory(Dialog, Calendar);
+const DatePicker = datePickerFactory(Input, DatePickerDialog);
+
+const ThemedDatePicker = themr(DATE_PICKER, theme)(DatePicker);
+export default ThemedDatePicker;
+export { ThemedDatePicker as DatePicker };
+
+const ThemedDatePickerDialog = themr(DIALOG, theme)(DatePickerDialog);
+export { ThemedDatePickerDialog as DatePickerDialog };
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
deleted file mode 100644
index ccb011b60..000000000
--- a/components/date_picker/index.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import CalendarDialog from './dialog';
-import Input from '../input';
-import events from '../utils/events';
-import time from '../utils/time';
-import style from './style';
-
-class DatePicker extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    value: React.PropTypes.object
-  };
-
-  static defaultProps = {
-    className: ''
-  };
-
-  state = {
-    value: this.props.value
-  };
-
-  handleDateSelected = (value) => {
-    this.refs.input.setValue(this.formatDate(value));
-    this.setState({value});
-  };
-
-  handleMouseDown = (event) => {
-    events.pauseEvent(event);
-    this.refs.dialog.show();
-  };
-
-  formatDate (date) {
-    return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
-  }
-
-  render () {
-    return (
-      <div data-toolbox='date-picker'>
-        <Input
-          ref='input'
-          className={style.input}
-          onMouseDown={this.handleMouseDown}
-          placeholder='Pick up date'
-          readOnly={true}
-          type='text'
-          value={this.state.value ? this.formatDate(this.state.value) : null}
-        />
-        <CalendarDialog
-          ref='dialog'
-          initialDate={this.state.value}
-          onDateSelected={this.handleDateSelected}
-        />
-      </div>
-    );
-  }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
-}
-
-export default DatePicker;
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 0ba84334d..f6cf6acff 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -1,27 +1,95 @@
 # Date Picker
 
-A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) date  picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
+A [dialog](https://material.google.com/components/pickers.html#pickers-date-pickers) date  picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
 
 <!-- example -->
 ```jsx
 import DatePicker from 'react-toolbox/lib/date_picker';
 
-const selectedDate = new Date(1995, 11, 17);
-const DatePickerTest = () => (
-  <DatePicker value={selectedDate} />
-);
+const datetime = new Date(2015, 10, 16);
+const min_datetime = new Date(new Date(datetime).setDate(8));
+datetime.setHours(17);
+datetime.setMinutes(28);
+
+const localeExample = {
+  months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+  monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+  weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+  weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+  weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+}
+
+class DatePickerTest extends React.Component {
+  state = {date2: datetime};
+
+  handleChange = (item, value) => {
+    this.setState({...this.state, [item]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <DatePicker label='Birthdate' sundayFirstDayOfWeek onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Locale (String) - Spanish' locale='es' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Locale (Object) - Basque' locale={localeExample} onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Expiration date' sundayFirstDayOfWeek minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
+        <DatePicker label='Formatted date' sundayFirstDayOfWeek inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
+      </section>
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTDatePicker`.
+
 ## Properties
 
-| Name          | Type    | Default         | Description|
+| Name            | Type            | Default       | Description |
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the time picker.|
-| `value`         | `Date`    |                 | Date object with the currently selected date. |
-
-## Methods
+| `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
+| `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day. |
+| `cancelLabel`   | `String`        | `'Cancel'`    | Label used for cancel button on date picker dialog. |
+| `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
+| `disabledDates`     | `Array`        |               | An array of date objects which will be disabled in the calendar. All other dates will be enabled.|
+| `enabledDates`     | `Array`        |               | An array of date objects which will be enabled in the calendar. All other dates will be disabled.|
+| `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
+| `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
+| `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
+| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('cs','de','no','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it','fr','ru','ua'). Object is supported too (see example above). |
+| `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
+| `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
+| `onChange`      | `Function`      |               | Called with (date, event) when the picker value is changed.|
+| `onClick`       | `Function`      |               | Callback fired on Input click.|
+| `onDismiss`     | `Function`      |               | Callback fired after dismissing the Dialog.|
+| `onEscKeyDown`  | `Function`      |               | Callback called when the ESC key is pressed with the overlay active. |
+| `onKeyPress`    | `Function`      |               | Callback invoked on Input key press.
+| `onOverlayClick`| `Function`      |               | Callback to be invoked when the dialog overlay is clicked.|
+| `readonly`      | `Boolean`       |               | The input element will be readonly and look like disabled.|
+| `sundayFirstDayOfWeek` | `Boolean`| `false`       | Set week's first day to Sunday. Default week's first day is Monday ([ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Week_dates)). |
+| `value`         | `Date`          |               | Date object with the currently selected date. |
 
-The DatePicker is a very easy component from the top level API but quite complex inside. It has state to keep the currently viewed date and the currently selected value.
+## Theme
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for the active day and year.|
+| `button` | Used for the buttons in the dialog.|
+| `calendar` | Used for the calendar root element.|
+| `calendarWrapper` | Used as wrapper for the calendar component inside dialog.|
+| `date` | Used for the date element inside header.|
+| `day` | Used for the day element inside the calendar.|
+| `days` | Used for the list of days inside a month.|
+| `dialog` | Used for the dialog component.|
+| `disabled` | Added to day element when day is disabled.|
+| `header` | Used for the dialog header,.|
+| `input` | Used for Input element that opens the picker.|
+| `label` | Used for the label element.|
+| `month` | Used for the month root element.|
+| `monthsDisplay` | Added to the root dialog when months are displayed.|
+| `next` | Used for the next month icon.|
+| `prev` | Used for the prev month icon.|
+| `title` | Used for the month title element.|
+| `week` | Used for the weekdays wrapper.|
+| `year` | Used for the year element inside header.|
+| `years` | Used for the years list in years view.|
+| `yearsDisplay` | Added to the root dialog when years are displayed.|
diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
deleted file mode 100644
index e06fba4ea..000000000
--- a/components/date_picker/style.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.input > [role="input"] {
-  cursor: pointer;
-}
-
-.header {
-  padding-bottom: $unit;
-  color: $datepicker-primary-contrast-color;
-  text-align: center;
-  background-color: $datepicker-primary-color;
-}
-
-.weekday {
-  display: block;
-  width: 100%;
-  font-size: $datepicker-weekday-font-size;
-  line-height: $datepicker-weekday-line-height;
-  background-color: $datepicker-primary-dark-color;
-}
-
-.month {
-  display: block;
-  padding: $unit;
-  font-size: $datepicker-month-font-size;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.day {
-  display: block;
-  font-size: $datepicker-day-font-size;
-  line-height: $datepicker-day-line-height;
-  cursor: pointer;;
-}
-
-.year {
-  display: inline-block;
-  margin-top: $unit;
-  font-size: $datepicker-year-font-size;
-  cursor: pointer;
-}
-
-.wrapper {
-  padding: $unit .5 * $unit 0;
-}
-
-.display-years {
-  .day, .month {
-    opacity: $datepicker-inactive-opacity;
-  }
-}
-
-.display-months {
-  .year {
-    opacity: $datepicker-inactive-opacity;
-  }
-}
-
-.dialog > [role="content"] {
-  width: $datepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-  }
-  > [role="navigation"] > .button {
-    color: $datepicker-primary-color;
-    &:hover {
-      background: $datepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $datepicker-primary-hover-color;
-    }
-  }
-}
diff --git a/components/date_picker/theme.scss b/components/date_picker/theme.scss
new file mode 100644
index 000000000..a1ee39156
--- /dev/null
+++ b/components/date_picker/theme.scss
@@ -0,0 +1,156 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.input:not(.disabled) > .inputElement {
+  cursor: pointer;
+}
+
+.header {
+  padding: 1.6 * $unit 2 * $unit;
+  color: $datepicker-primary-contrast-color;
+  cursor: pointer;
+  background-color: $datepicker-primary-color;
+}
+
+.year {
+  display: inline-block;
+  font-size: $datepicker-year-font-size;
+  transition: opacity, font-size $animation-duration $animation-curve-default;
+}
+
+.date {
+  display: block;
+  font-weight: $font-weight-semi-bold;
+  text-transform: capitalize;
+  transition: opacity $animation-duration $animation-curve-default;
+}
+
+.calendarWrapper {
+  padding: $unit .5 * $unit 0;
+}
+
+.yearsDisplay {
+  .date {
+    opacity: $datepicker-inactive-opacity;
+  }
+  .year {
+    font-size: $font-size-normal;
+  }
+}
+
+.monthsDisplay {
+  .year {
+    opacity: $datepicker-inactive-opacity;
+  }
+}
+
+.dialog {
+  width: $datepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+  }
+  > [role="navigation"] > .button {
+    color: $datepicker-primary-color;
+    &:hover {
+      background: $datepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $datepicker-primary-hover-color;
+    }
+  }
+}
+
+.calendar {
+  position: relative;
+  height: $calendar-total-height;
+  overflow: hidden;
+  font-size: $font-size-small;
+  line-height: $calendar-row-height;
+  text-align: center;
+  background: $calendar-primary-contrast-color;
+  .prev, .next {
+    position: absolute;
+    top: 0;
+    z-index: $z-index-high;
+    height: 3.6 * $unit;
+    cursor: pointer;
+    opacity: .7;
+  }
+  .prev {
+    left: 0;
+  }
+  .next {
+    right: 0;
+  }
+}
+
+.title {
+  display: inline-block;
+  font-weight: 500;
+  line-height: $calendar-row-height;
+}
+
+.years {
+  height: 100%;
+  overflow-y: auto;
+  font-size: $font-size-big;
+  > li {
+    line-height: 2.4;
+    cursor: pointer;
+    &.active {
+      font-size: $calendar-year-font-size;
+      font-weight: $font-weight-semi-bold;
+      color: $calendar-primary-color;
+    }
+  }
+}
+
+.week {
+  display: flex;
+  height: $calendar-row-height;
+  flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
+  line-height: $calendar-row-height;
+  opacity: .5;
+  > span {
+    flex: 0 0 (100% / 7);
+  }
+}
+
+.days {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
+}
+
+.day {
+  flex: 0 0 (100% / 7);
+  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
+  > span {
+    display: inline-block;
+    width: $calendar-row-height;
+    height: $calendar-row-height;
+    line-height: $calendar-row-height;
+    border-radius: 50%;
+  }
+  &:hover:not(.active):not(.disabled) > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-hover-color;
+  }
+  &.active > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-color;
+  }
+  &:hover:not(.disabled) > span {
+    cursor: pointer;
+  }
+  &.disabled {
+    opacity: $calendar-day-disable-opacity;
+  }
+}
+
+.month {
+  background-color: $calendar-primary-contrast-color;
+}
diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
new file mode 100644
index 000000000..08937cc26
--- /dev/null
+++ b/components/dialog/Dialog.js
@@ -0,0 +1,84 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { DIALOG } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import InjectButton from '../button/Button.js';
+import InjectOverlay from '../overlay/Overlay.js';
+
+const factory = (Overlay, Button) => {
+  const Dialog = (props) => {
+    const actions = props.actions.map((action, idx) => {
+      const className = classnames(props.theme.button, {[action.className]: action.className});
+      return <Button key={idx} {...action} className={className} />;
+    });
+
+    const className = classnames([props.theme.dialog, props.theme[props.type]], {
+      [props.theme.active]: props.active
+    }, props.className);
+
+    const bodyClassName = props.disableScrolling ? props.theme.body : classnames(props.theme.body, props.theme.scroll);
+
+    return (
+      <Overlay
+        active={props.active}
+        onClick={props.onOverlayClick}
+        onEscKeyDown={props.onEscKeyDown}
+        onMouseDown={props.onOverlayMouseDown}
+        onMouseMove={props.onOverlayMouseMove}
+        onMouseUp={props.onOverlayMouseUp}
+      >
+        <div data-react-toolbox='dialog' className={className}>
+          <section role='body' className={bodyClassName}>
+            {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
+            {props.children}
+          </section>
+          {actions.length
+            ? <nav role='navigation' className={props.theme.navigation}>
+                {actions}
+              </nav>
+            : null
+          }
+        </div>
+      </Overlay>
+    );
+  };
+
+  Dialog.propTypes = {
+    actions: PropTypes.array,
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disableScrolling: PropTypes.bool,
+    onEscKeyDown: PropTypes.func,
+    onOverlayClick: PropTypes.func,
+    onOverlayMouseDown: PropTypes.func,
+    onOverlayMouseMove: PropTypes.func,
+    onOverlayMouseUp: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      body: PropTypes.string,
+      button: PropTypes.string,
+      dialog: PropTypes.string,
+      navigation: PropTypes.string,
+      scroll: PropTypes.string,
+      title: PropTypes.string
+    }),
+    title: PropTypes.string,
+    type: PropTypes.string
+  };
+
+  Dialog.defaultProps = {
+    actions: [],
+    active: false,
+    disableScrolling: false,
+    type: 'normal'
+  };
+
+  return ActivableRenderer()(Dialog);
+};
+
+const Dialog = factory(InjectOverlay, InjectButton);
+export default themr(DIALOG)(Dialog);
+export { Dialog };
+export { factory as dialogFactory };
diff --git a/components/dialog/_config.scss b/components/dialog/_config.scss
index 47716a8ef..c522075c9 100644
--- a/components/dialog/_config.scss
+++ b/components/dialog/_config.scss
@@ -1,6 +1,6 @@
-$dialog-border-radius: .2 * $unit;
-$dialog-color-title: unquote("rgb(#{$color-black})") !default;
-$dialog-color-white: unquote("rgb(#{$color-white})") !default;
-$dialog-content-padding: 2.4 * $unit;
-$dialog-navigation-padding: .8 * $unit;
-$dialog-translate-y: 4 * $unit;
+$dialog-border-radius: .2 * $unit !default;
+$dialog-color-title: $color-black !default;
+$dialog-color-white: $color-white !default;
+$dialog-content-padding: 2.4 * $unit !default;
+$dialog-navigation-padding: .8 * $unit !default;
+$dialog-translate-y: 4 * $unit !default;
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
new file mode 100644
index 000000000..e02af38d5
--- /dev/null
+++ b/components/dialog/index.d.ts
@@ -0,0 +1,93 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DialogTheme {
+  /**
+   * Used for the root when the dialog is active.
+   */
+  active?: string;
+  /**
+   * Used to wrap the dialog body.
+   */
+  body?: string;
+  /**
+   * Used in buttons when the dialog implements actions.
+   */
+  button?: string;
+  /**
+   * Used for the root element.
+   */
+  dialog?: string;
+  /**
+   * Used for the navigation element when it implements actions.
+   */
+  navigation?: string;
+  /**
+   * Used for the title element of the dialog.
+   */
+  title?: string;
+}
+
+export interface DialogActionProps {
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * Callback called when the component is clicked.
+   */
+  onClick?: Function;
+}
+
+export interface DialogProps extends ReactToolbox.Props {
+  /**
+   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+   */
+  actions?: DialogActionProps[];
+  /**
+   * If true, the dialog will be active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * Callback called when the mouse button is pressed on the overlay.
+   */
+  onOverlayMouseDown?: Function;
+  /**
+   * Callback called when the mouse is moving over the overlay.
+   */
+  onOverlayMouseMove?: Function;
+  /**
+   * Callback called when the mouse button is released over the overlay.
+   */
+  onOverlayMouseUp?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DialogTheme;
+  /**
+   * The text string to use as standar title of the dialog.
+   */
+  title?: string;
+  /**
+   * Used to determine the size of the dialog. It can be small, normal or large.
+   * @default "normal"
+   */
+  type?: "small" | "normal" | "large" | string;
+}
+
+export class Dialog extends React.Component<DialogProps, {}> { }
+
+export default Dialog;
diff --git a/components/dialog/index.js b/components/dialog/index.js
new file mode 100644
index 000000000..1236aebb7
--- /dev/null
+++ b/components/dialog/index.js
@@ -0,0 +1,12 @@
+import { themr } from 'react-css-themr';
+import { DIALOG } from '../identifiers.js';
+import { dialogFactory } from './Dialog.js';
+import Overlay from '../overlay';
+import Button from '../button';
+import theme from './theme.scss';
+
+const Dialog = dialogFactory(Overlay, Button);
+const ThemedDialog = themr(DIALOG, theme)(Dialog);
+
+export default ThemedDialog;
+export { ThemedDialog as Dialog };
diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx
deleted file mode 100644
index 6a8d02c0c..000000000
--- a/components/dialog/index.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import Button from '../button';
-import style from './style';
-
-class Dialog extends React.Component {
-  static propTypes = {
-    actions: React.PropTypes.array,
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    title: React.PropTypes.string,
-    type: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    actions: [],
-    active: false,
-    type: 'normal'
-  };
-
-  state = {
-    active: this.props.active
-  };
-
-  renderActions () {
-    return this.props.actions.map((action, idx) => {
-      let className = style.button;
-      if (action.className) className += ` ${action.className}`;
-      return <Button key={idx} {...action} className={className} />;
-    });
-  }
-
-  render () {
-    let className = `${style.root} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='dialog' className={className}>
-        <div role='overlay' className={style.overlay} />
-        <div role='content' className={style.content}>
-          <section role='body' className={style.body}>
-            { this.props.title ? <h6 className={style.title}>{this.props.title}</h6> : null }
-            { this.props.children }
-          </section>
-          <nav role='navigation' className={style.navigation}>
-            { this.renderActions() }
-          </nav>
-        </div>
-      </div>
-    );
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-
-  show () {
-    this.setState({active: true});
-  }
-}
-
-export default Dialog;
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index 88207bba0..5b26bf5ee 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -1,30 +1,36 @@
 # Dialog
 
-[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
+[Dialogs](https://material.google.com/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
 
 <!-- example -->
 ```jsx
 import Dialog from 'react-toolbox/lib/dialog';
 
 class DialogTest extends React.Component {
-  showDialog = () => {
-    this.refs.dialog.show();
+  state = {
+    active: false
   };
 
-  closeDialog = () => {
-    this.refs.dialog.hide();
-  };
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
+  }
 
   actions = [
-    { label: "Cancel", onClick: this.closeDialog },
-    { label: "Save", onClick: this.closeDialog }
+    { label: "Cancel", onClick: this.handleToggle },
+    { label: "Save", onClick: this.handleToggle }
   ];
 
   render () {
     return (
       <div>
-        <Button label='Show my dialog' onClick={this.showDialog} />
-        <Dialog ref='dialog' title='My awesome dialog' actions={this.actions}>
+        <Button label='Show my dialog' onClick={this.handleToggle} />
+        <Dialog
+          actions={this.actions}
+          active={this.state.active}
+          onEscKeyDown={this.handleToggle}
+          onOverlayClick={this.handleToggle}
+          title='My awesome dialog'
+        >
           <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </div>
@@ -33,20 +39,33 @@ class DialogTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDialog`.
+
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name                    | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `actions`       | `Array`         |    `[]`         | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
-| `active`        | `Boolean`       |  `false`        | If true, the dialog will be active by default.|
-| `className`     | `String`        |     `''`        | Sets a class to give customized styles to the dialog.|
-| `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
-| `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
+| `actions`               | `Array`         | `[]`            | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
+| `active`                | `Boolean`       | `false`         | If true, the dialog will be active.|
+| `className`             | `String`        | `''`            | Sets a class to give customized styles to the dialog.|
+| `onEscKeyDown`          | `Function`      |                 | Callback called when the ESC key is pressed with the overlay active. |
+| `onOverlayClick`        | `Function`      |                 | Callback to be invoked when the dialog overlay is clicked.|
+| `onOverlayMouseDown`    | `Function`      |                 | Callback called when the mouse button is pressed on the overlay. |
+| `onOverlayMouseMove`    | `Function`      |                 | Callback called when the mouse is moving over the overlay. |
+| `onOverlayMouseUp`      | `Function`      |                 | Callback called when the mouse button is released over the overlay. |
+| `title`                 | `String`        |                 | The text string to use as standar title of the dialog.|
+| `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal`, `large` or `fullscreen`. |
 
-## Methods
+Notice that the `fullscreen` option only applies on mobile devices with small screens (i.e. cellphones), and on other devices it behaves as a `large` dialog.
 
-The Dialog has state to determine if it is being shown or not. It exposes methods to show and hide:
 
-- `show` is used to show the dialog.
-- `hide` is used to hide the dialog.
+## Theme
 
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for the root when the dialog is active.|
+| `body`  | Used to wrap the dialog body.|
+| `button` | Used in buttons when the dialog implements actions.|
+| `dialog` | Used for the root element.|
+| `navigation` | Used for the navigation element when it implements actions.|
+| `title`   | Used for the title element of the dialog.|
diff --git a/components/dialog/style.scss b/components/dialog/theme.scss
similarity index 55%
rename from components/dialog/style.scss
rename to components/dialog/theme.scss
index 8f9845a6a..d722c0b78 100644
--- a/components/dialog/style.scss
+++ b/components/dialog/theme.scss
@@ -1,39 +1,9 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.root {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $z-index-high;
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  > .content {
-    opacity: 0;
-    transform: translateY(-$dialog-translate-y);
-  }
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $color-overlay;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.content {
+.dialog {
   display: flex;
   max-width: 96vw;
   max-height: 96vh;
@@ -41,10 +11,52 @@
   background-color: $dialog-color-white;
   border-radius: $dialog-border-radius;
   box-shadow: $zdepth-shadow-5;
+  opacity: 0;
   transition-delay: $animation-delay;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity, transform;
+  transform: translateY(-$dialog-translate-y);
+  &.active {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.small {
+  width: 30vw;
+
+  @media screen and (max-width: $layout-breakpoint-sm-tablet) {
+    width: 50vw;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 75vw;
+  }
+}
+
+.normal {
+  width: 50vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 96vw;
+  }
+}
+
+.large {
+  width: 96vw;
+}
+
+.fullscreen {
+  width: 96vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 100vw;
+    max-width: 100vw;
+    min-height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+  }
 }
 
 .title {
@@ -57,10 +69,13 @@
 .body {
   flex-grow: 2;
   padding: $dialog-content-padding;
-  overflow-y: auto;
   color: $color-text-secondary;
 }
 
+.scroll {
+  overflow: auto;
+}
+
 .navigation {
   flex-grow: 0;
   padding: $dialog-navigation-padding;
@@ -73,26 +88,3 @@
   padding-left: $dialog-navigation-padding;
   margin-left: $dialog-navigation-padding;
 }
-
-.active {
-  pointer-events: all;
-  > .overlay {
-    opacity: $color-overlay-opacity;
-  }
-  > .content {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
-.small > .content {
-  width: 30vw;
-}
-
-.normal > .content {
-  width: 50vw;
-}
-
-.large > .content {
-  width: 96vw;
-}
diff --git a/components/drawer/Drawer.js b/components/drawer/Drawer.js
new file mode 100644
index 000000000..c2b3ae4a9
--- /dev/null
+++ b/components/drawer/Drawer.js
@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { DRAWER } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import InjectOverlay from '../overlay/Overlay.js';
+
+const factory = (Overlay) => {
+  const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
+    const _className = classnames([theme.drawer, theme[type]], {
+      [theme.active]: active
+    }, className);
+
+    return (
+      <Overlay active={active} onClick={onOverlayClick}>
+        <div data-react-toolbox='drawer' className={_className}>
+          <aside className={theme.content}>
+            {children}
+          </aside>
+        </div>
+      </Overlay>
+    );
+  };
+
+  Drawer.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onOverlayClick: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      content: PropTypes.string,
+      drawer: PropTypes.string,
+      left: PropTypes.string,
+      right: PropTypes.string
+    }),
+    type: PropTypes.oneOf(['left', 'right'])
+  };
+
+  Drawer.defaultProps = {
+    active: false,
+    className: '',
+    type: 'left'
+  };
+
+  return ActivableRenderer()(Drawer);
+};
+
+const Drawer = factory(InjectOverlay);
+export default themr(DRAWER)(Drawer);
+export { factory as drawerFactory };
+export { Drawer };
diff --git a/components/drawer/_config.scss b/components/drawer/_config.scss
index 21cf5900b..2401bc696 100644
--- a/components/drawer/_config.scss
+++ b/components/drawer/_config.scss
@@ -1,5 +1,4 @@
-$drawer-background-color: unquote("rgb(#{$palette-grey-50})") !default;
-$drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
-$drawer-overlay-color: $color-overlay;
-$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
-$drawer-width: 24 * $unit;
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+$drawer-width: 24 * $unit !default;
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
new file mode 100644
index 000000000..d090305d6
--- /dev/null
+++ b/components/drawer/index.d.ts
@@ -0,0 +1,54 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DrawerTheme {
+  /**
+   * Used for the root class when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the drawer content.
+   */
+  content?: string;
+  /**
+   * Root class.
+   */
+  drawer?: string;
+  /**
+   * Added to the root class when drawer is to the left.
+   */
+  left?: string;
+  /**
+   * Added to the root class when drawer is to the right.
+   */
+  right?: string;
+}
+
+export interface DrawerProps extends ReactToolbox.Props {
+  /**
+   * If true, the drawer will be visible.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DrawerTheme;
+  /**
+   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
+   * @default left
+   */
+  type?: "left" | "right";
+}
+
+export class Drawer extends React.Component<DrawerProps, {}> { }
+
+export default Drawer;
diff --git a/components/drawer/index.js b/components/drawer/index.js
new file mode 100644
index 000000000..8196b783c
--- /dev/null
+++ b/components/drawer/index.js
@@ -0,0 +1,11 @@
+import { themr } from 'react-css-themr';
+import { DRAWER } from '../identifiers.js';
+import { Overlay } from '../overlay';
+import { drawerFactory } from './Drawer.js';
+import theme from './theme.scss';
+
+const Drawer = drawerFactory(Overlay);
+const ThemedDrawer = themr(DRAWER, theme)(Drawer);
+
+export default ThemedDrawer;
+export { ThemedDrawer as Drawer };
diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
deleted file mode 100644
index 59623aea3..000000000
--- a/components/drawer/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import style from './style';
-
-class Drawer extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    hideable: React.PropTypes.bool,
-    type: React.PropTypes.oneOf(['left', 'right'])
-  };
-
-  static defaultProps = {
-    className: '',
-    hideable: true,
-    type: 'left'
-  };
-
-  state = {
-    active: this.props.active
-  };
-
-  handleOverlayClick = () => {
-    if (this.props.hideable) {
-      this.setState({active: false});
-    }
-  };
-
-  render () {
-    let className = `${style.drawer} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='drawer' className={className}>
-        <div className={style.overlay} onClick={this.handleOverlayClick}></div>
-        <aside className={style.content}>
-          { this.props.children }
-        </aside>
-      </div>
-    );
-  }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-}
-
-export default Drawer;
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index 073adda4c..3c2f795c0 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -1,21 +1,25 @@
 # Drawer
 
-The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
+The [navigation drawer](https://material.google.com/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
 
 <!-- example -->
 ```jsx
 import Drawer from 'react-toolbox/lib/drawer';
 
 class DrawerTest extends React.Component {
-  handleClick = () => {
-    this.refs.drawer.show();
+  state = {
+    active: false
+  };
+
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
   };
 
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
-        <Drawer ref='drawer' hideable>
+        <Button label='Show Drawer' raised accent onClick={this.handleToggle} />
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
@@ -25,19 +29,23 @@ class DrawerTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDrawer`.
+
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       |  `false`        | If true, the drawer will be active by default.|
-| `className`     | `String`        |     `''`        | Sets a class to give customized styles to the drawer.|
-| `hideable`      | `Bool`          | `true`           | If true, the drawer will be hidden by clicking the overlay.|
-| `type`          | `String`        | `left`          | Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.|
-
-## Methods
-
-The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
-
-- `show` is used to show the drawer.
-- `hide` is used to hide the drawer.
-
+| `active`          | `Boolean`       | `false`       | If true, the drawer will be visible.|
+| `className`       | `String`        | `''`          | Sets a class to give customized styles to the drawer.|
+| `onOverlayClick`  | `Function`      |               | Callback function to be invoked when the overlay is clicked.|
+| `type`            | `String`        | `left`        | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|
+
+## Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for the root class when the drawer is active.|
+| `content`  | Used for the drawer content.|
+| `drawer`   | Root class.|
+| `left`   | Added to the root class when drawer is to the left.|
+| `right`   | Added to the root class when drawer is to the right.|
diff --git a/components/drawer/style.scss b/components/drawer/style.scss
deleted file mode 100644
index 7e5e2f80a..000000000
--- a/components/drawer/style.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $z-index-high;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-}
-
-.active {
-  pointer-events: all;
-  > .content {
-    transition-delay: $animation-delay;
-    transform: translateX(0);
-  }
-  > .overlay {
-    opacity: $color-overlay-opacity;
-  }
-}
-
-.left {
-  > .content {
-    left: 0;
-    border-right: 1px solid $drawer-border-color;
-  }
-  &:not(.active) > .content {
-    transform: translateX(- 100%);
-  }
-}
-
-.right {
-  > .content {
-    right: 0;
-    border-left: 1px solid $drawer-border-color;
-  }
-  &:not(.active) > .content {
-    transform: translateX(100%);
-  }
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  background-color: $drawer-overlay-color;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.content {
-  @include shadow-2dp();
-  position: absolute;
-  top: 0;
-  display: block;
-  width: $drawer-width;
-  height: 100%;
-  overflow-y: scroll;
-  color: $drawer-text-color;
-  background-color: $drawer-background-color;
-  transition-delay: 0s;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: transform;
-  transform-style: preserve-3d;
-  will-change: transform;
-}
diff --git a/components/drawer/theme.scss b/components/drawer/theme.scss
new file mode 100644
index 000000000..a089640a3
--- /dev/null
+++ b/components/drawer/theme.scss
@@ -0,0 +1,43 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.drawer {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  display: block;
+  width: $drawer-width;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: $drawer-text-color;
+  pointer-events: none;
+  background-color: $drawer-background-color;
+  transition-delay: 0s;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: transform;
+  transform-style: preserve-3d;
+  will-change: transform;
+  &.active {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+  &.right {
+    right: 0;
+    border-left: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(100%);
+    }
+  }
+  &.left {
+    left: 0;
+    border-right: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(- 100%);
+    }
+  }
+}
diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
new file mode 100644
index 000000000..db3cf1156
--- /dev/null
+++ b/components/dropdown/Dropdown.js
@@ -0,0 +1,228 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { DROPDOWN } from '../identifiers.js';
+import InjectInput from '../input/Input.js';
+import events from '../utils/events.js';
+
+const factory = (Input) => {
+  class Dropdown extends Component {
+    static propTypes = {
+      allowBlank: PropTypes.bool,
+      auto: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      error: PropTypes.string,
+      label: PropTypes.string,
+      name: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onClick: PropTypes.func,
+      onFocus: PropTypes.func,
+      required: PropTypes.bool,
+      source: PropTypes.array.isRequired,
+      template: PropTypes.func,
+      theme: PropTypes.shape({
+        active: PropTypes.string,
+        disabled: PropTypes.string,
+        dropdown: PropTypes.string,
+        error: PropTypes.string,
+        errored: PropTypes.string,
+        field: PropTypes.string,
+        label: PropTypes.string,
+        required: PropTypes.string,
+        selected: PropTypes.string,
+        templateValue: PropTypes.string,
+        up: PropTypes.string,
+        value: PropTypes.string,
+        values: PropTypes.string
+      }),
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ])
+    };
+
+    static defaultProps = {
+      auto: true,
+      className: '',
+      allowBlank: true,
+      disabled: false,
+      required: false
+    };
+
+    state = {
+      active: false,
+      up: false
+    };
+
+    componentWillUpdate (nextProps, nextState) {
+      if (!this.state.active && nextState.active) {
+        events.addEventsToDocument(this.getDocumentEvents());
+      }
+    }
+
+    componentDidUpdate (prevProps, prevState) {
+      if (prevState.active && !this.state.active) {
+        events.removeEventsFromDocument(this.getDocumentEvents());
+      }
+    }
+
+    componentWillUnmount () {
+      if (this.state.active) {
+        events.removeEventsFromDocument(this.getDocumentEvents());
+      }
+    }
+
+    getDocumentEvents = () => ({
+      click: this.handleDocumentClick,
+      touchend: this.handleDocumentClick
+    });
+
+    open = (event) => {
+      if (this.state.active) return;
+      const client = event.target.getBoundingClientRect();
+      const screenHeight = window.innerHeight || document.documentElement.offsetHeight;
+      const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false;
+      if (this.inputNode) this.inputNode.blur();
+      this.setState({active: true, up});
+    };
+
+    close = () => {
+      if (this.state.active) {
+        this.setState({active: false});
+      }
+    }
+
+    handleDocumentClick = (event) => {
+      if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+        this.setState({active: false});
+      }
+    };
+
+    handleClick = (event) => {
+      this.open(event);
+      events.pauseEvent(event);
+      if (this.props.onClick) this.props.onClick(event);
+    };
+
+    handleSelect = (item, event) => {
+      if (this.props.onBlur) this.props.onBlur(event);
+      if (!this.props.disabled && this.props.onChange) {
+        if (this.props.name) {
+          event.target.name = this.props.name;
+        }
+        this.props.onChange(item, event);
+        this.close();
+      }
+    };
+
+    getSelectedItem = () => {
+      for (const item of this.props.source) {
+        if (item.value === this.props.value) return item;
+      }
+      if (!this.props.allowBlank) {
+        return this.props.source[0];
+      }
+    };
+
+    renderTemplateValue (selected) {
+      const { theme } = this.props;
+      const className = classnames(theme.field, {
+        [theme.errored]: this.props.error,
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
+      });
+
+      return (
+        <div className={className} onClick={this.handleClick}>
+          <div className={`${theme.templateValue} ${theme.value}`}>
+            {this.props.template(selected)}
+          </div>
+          {this.props.label
+            ? <label className={theme.label}>
+                {this.props.label}
+                {this.props.required ? <span className={theme.required}> * </span> : null}
+              </label>
+            : null}
+          {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
+        </div>
+      );
+    }
+
+    renderValue = (item, idx) => {
+      const { theme } = this.props;
+      const className = classnames({
+        [theme.selected]: item.value === this.props.value,
+        [theme.disabled]: item.disabled
+      });
+      return (
+        <li key={idx} className={className} onClick={!item.disabled ? this.handleSelect.bind(this, item.value) : null}>
+          {this.props.template ? this.props.template(item) : item.label}
+        </li>
+      );
+    };
+
+    handleFocus = event => {
+      event.stopPropagation();
+      if (!this.props.disabled) this.open(event);
+      if (this.props.onFocus) this.props.onFocus(event);
+    };
+
+    handleBlur = event => {
+      event.stopPropagation();
+      if (this.state.active) this.close();
+      if (this.props.onBlur) this.props.onBlur(event);
+    }
+
+    render () {
+      const {
+        allowBlank, auto, required, onChange, onFocus, onBlur, //eslint-disable-line no-unused-vars
+        source, template, theme, ...others
+      } = this.props;
+      const selected = this.getSelectedItem();
+      const className = classnames(theme.dropdown, {
+        [theme.up]: this.state.up,
+        [theme.active]: this.state.active,
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
+      }, this.props.className);
+
+      return (
+        <div
+          className={className}
+          data-react-toolbox='dropdown'
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
+          tabIndex="0"
+        >
+          <Input
+            {...others}
+            tabIndex="-1"
+            className={theme.value}
+            onClick={this.handleClick}
+            required={this.props.required}
+            readOnly
+            ref={node => { this.inputNode = node && node.getWrappedInstance(); }}
+            type={template && selected ? 'hidden' : null}
+            theme={theme}
+            themeNamespace="input"
+            value={selected && selected.label ? selected.label : ''}
+          />
+        {template && selected ? this.renderTemplateValue(selected) : null}
+          <ul className={theme.values} ref='values'>
+            {source.map(this.renderValue)}
+          </ul>
+        </div>
+      );
+    }
+  }
+
+  return Dropdown;
+};
+
+const Dropdown = factory(InjectInput);
+export default themr(DROPDOWN)(Dropdown);
+export { factory as dropdownFactory };
+export { Dropdown };
diff --git a/components/dropdown/__test__/index.spec.js b/components/dropdown/__test__/index.spec.js
new file mode 100644
index 000000000..472e5a55b
--- /dev/null
+++ b/components/dropdown/__test__/index.spec.js
@@ -0,0 +1,43 @@
+import expect from 'expect';
+import React from 'react';
+import {
+  renderIntoDocument,
+  scryRenderedDOMComponentsWithClass,
+  Simulate
+} from 'react-addons-test-utils';
+import sinon from 'sinon';
+import theme from '../theme.scss';
+import Dropdown from '../Dropdown';
+
+
+describe('Dropdown', function () {
+  describe('#renderValue', function () {
+    const source = [
+      { value: 'EN-gb', label: 'England' },
+      { value: 'ES-es', label: 'Spain', disabled: true },
+      { value: 'TH-th', label: 'Thailand', disabled: true },
+      { value: 'EN-en', label: 'USA'}
+    ];
+    it('renders dropdown item with disabled style', function () {
+      const tree = renderIntoDocument(<Dropdown theme={theme} source={source} />);
+      const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
+      expect(disabled.length).toEqual(2);
+    });
+    it('does not call onChange callback when disabled dorpdown item is clicked', function () {
+      const spy = sinon.spy();
+      const tree = renderIntoDocument(<Dropdown
+        theme={theme}
+        source={source}
+        value={source[0].value}
+        onChange={spy}
+      />);
+      const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
+      expect(spy.called).toEqual(false);
+      Simulate.click(disabled[0]);
+      expect(spy.called).toEqual(false);
+      const selected = scryRenderedDOMComponentsWithClass(tree, theme.selected);
+      Simulate.click(selected[0]);
+      expect(spy.called).toEqual(true);
+    });
+  });
+});
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index f924ec26c..1b26341ba 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -1,7 +1,7 @@
-$dropdown-offset: 1.6 * $unit;
-$dropdown-color-white: unquote("rgb(#{$color-white})");
-$dropdown-color-primary: unquote("rgb(#{$color-primary})");
-$dropdown-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$dropdown-value-hover-background: unquote("rgb(#{$palette-grey-200})");
-$dropdown-overflow-max-height: 45vh;
-$dropdown-value-border-radius: .2 * $unit;
+$dropdown-color-white: $color-white !default;
+$dropdown-color-primary: $color-primary !default;
+$dropdown-color-primary-contrast: $color-primary-contrast !default;
+$dropdown-color-disabled: rgba($color-black, 0.26) !default;
+$dropdown-value-hover-background: $palette-grey-200 !default;
+$dropdown-overflow-max-height: 45vh !default;
+$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
new file mode 100644
index 000000000..7a3da482c
--- /dev/null
+++ b/components/dropdown/index.d.ts
@@ -0,0 +1,124 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DropdownTheme {
+  /**
+   * Added to the root element when the dropdown is active.
+   */
+  active?: string;
+  /**
+   * Added to the root element when it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Root element class.
+   */
+  dropdown?: string;
+  /**
+   * Used for the error element.
+   */
+  error?: string;
+  /**
+   * Added to the inner wrapper if it's errored.
+   */
+  errored?: string;
+  /**
+   * Used for the inner wrapper of the component.
+   */
+  field?: string;
+  /**
+   * Used for the the label element.
+   */
+  label?: string;
+  /**
+   * Used when dropdown has required attribute.
+   */
+  required?: string;
+  /**
+   * Used to highlight the selected value.
+   */
+  selected?: string;
+  /**
+   * Used as a wrapper for the given template value.
+   */
+  templateValue?: string;
+  /**
+   * Added to the root element when it's opening up.
+   */
+  up?: string;
+  /**
+   * Used for each value in the dropdown component.
+   */
+  value?: string;
+  /**
+   * Used for the list of values.
+   */
+  values?: string;
+}
+
+export interface DropdownProps extends ReactToolbox.Props {
+  /**
+   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
+   * @default true
+   */
+  allowBlank?: boolean;
+  /**
+   * If true, the dropdown will open up or down depending on the position in the screen.
+   * @default true
+   */
+  auto?: boolean;
+  /**
+   * Set the component as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error string to display under the field.
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the component is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when the component is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Array of data objects with the data to represent in the dropdown.
+   */
+  source: any[];
+  /**
+   * Callback function that returns a JSX template to represent the element.
+   */
+  template?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DropdownTheme;
+  /**
+   * Default value using JSON data.
+   */
+  value?: string | number;
+  /**
+   * If true, the dropdown has a required attribute.
+   * @default false
+   */
+  required?: boolean;
+}
+
+export class Dropdown extends React.Component<DropdownProps, {}> { }
+
+export default Dropdown;
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
new file mode 100644
index 000000000..056478aa5
--- /dev/null
+++ b/components/dropdown/index.js
@@ -0,0 +1,11 @@
+import { themr } from 'react-css-themr';
+import { DROPDOWN } from '../identifiers.js';
+import { dropdownFactory } from './Dropdown.js';
+import { Input } from '../input';
+import theme from './theme.scss';
+
+const Dropdown = dropdownFactory(Input);
+const ThemedDropdown = themr(DROPDOWN, theme)(Dropdown);
+
+export default ThemedDropdown;
+export { ThemedDropdown as Dropdown };
diff --git a/components/dropdown/index.jsx b/components/dropdown/index.jsx
deleted file mode 100644
index c7d46d985..000000000
--- a/components/dropdown/index.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Ripple from '../ripple';
-import style from './style';
-
-const _selectValue = (value, dataSource) => {
-  let item;
-  if (value) {
-    for (item of dataSource) {
-      if (item.value.toString() === value.toString()) break;
-    }
-    return item;
-  } else {
-    return dataSource[0];
-  }
-};
-
-class Dropdown extends React.Component {
-  static propTypes = {
-    auto: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    dataSource: React.PropTypes.array.isRequired,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    template: React.PropTypes.func,
-    value: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    auto: true,
-    className: '',
-    disabled: false
-  };
-
-  state = {
-    active: false,
-    selected: _selectValue(this.props.value, this.props.dataSource),
-    up: false,
-    width: undefined
-  };
-
-  componentDidMount () {
-    this.setState({
-      width: ReactDOM.findDOMNode(this).getBoundingClientRect().width
-    });
-  }
-
-  componentDidUpdate (prev_props, prev_state) {
-    if (this.props.onChange && prev_state.selected !== this.state.selected && prev_state.active) {
-      this.props.onChange(this);
-    }
-  }
-
-  handleClick = (event) => {
-    const client = event.target.getBoundingClientRect();
-    const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-    const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-    this.setState({ active: true, up: up });
-  };
-
-  handleClickValue = (id) => {
-    if (!this.props.disabled) {
-      const value = id.toString();
-      for (const item of this.props.dataSource) {
-        if (item.value.toString() === value) {
-          this.setState({active: false, selected: item});
-          break;
-        }
-      }
-    }
-  };
-
-  renderValues () {
-    const items = this.props.dataSource.map((item, index) => {
-      let className;
-      if (item.value === this.state.selected.value) className = ` ${style.selected}`;
-
-      return (
-        <li
-          key={index}
-          className={className}
-          id={item.value}
-          onClick={this.handleClickValue.bind(this, item.value)}
-        >
-          { this.props.template ? this.props.template(item) : item.label }
-          <Ripple className={style.ripple}/>
-        </li>
-      );
-    });
-
-    let className = style.values;
-    const valuesStyle = {width: this.state.width};
-    if (this.state.up) className += ` ${style.up}`;
-
-    return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
-  }
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.state.active) className += ` ${style.active}`;
-
-    return (
-      <div data-react-toolbox='dropdown' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
-        { this.renderValues() }
-        <div ref='value' className={style.value} onClick={this.handleClick}>
-          { this.props.template ? this.props.template(this.state.selected) : <span>{this.state.selected.label}</span> }
-        </div>
-      </div>
-    );
-  }
-
-  getValue () {
-    return this.state.selected.value;
-  }
-
-  setValue (data) {
-    this.setState({selected: data});
-  }
-}
-
-export default Dropdown;
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 3bcf43f2f..174dab783 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -6,38 +6,68 @@ The Dropdown selects an option between multiple selections. The element displays
 ```jsx
 import Dropdown from 'react-toolbox/lib/dropdown';
 
-const countries: [
+const countries = [
   { value: 'EN-gb', label: 'England' },
   { value: 'ES-es', label: 'Spain'},
   { value: 'TH-th', label: 'Thailand' },
   { value: 'EN-en', label: 'USA'}
 ];
 
-const DropdownTest = () => (
-  <Dropdown 
-    auto
-    dataSource={countries}
-    value='TH-th'
-  />
-);
+class DropdownTest extends React.Component {
+  state = { value: 'ES-es' };
+
+  handleChange = (value) => {
+    this.setState({value: value});
+  };
+
+  render () {
+    return (
+      <Dropdown
+        auto
+        onChange={this.handleChange}
+        source={countries}
+        value={this.state.value}
+      />
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTDropdown`.
+
 ## Properties
 
-| Name              | Type          | Default         | Description |
-|:-----|:-----|:-----|:-----|
-| `auto`        | `Boolean`       |  `true`        | If true, the dropdown will open up or down depending on the position in the screen .|
-| `className`     | `String`        |  `''`               | Set the class to give custom styles to the dropdown.
-| `dataSource`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
-| `disabled`      | `Boolean`       | `false`         | Set the component as disabled.
-| `label`         | `String`        |                 | The text string to use for the floating label element.
-| `onChange`      | `Function`      |                 | Callback function that is fired when the component's value changes.
-| `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.
-| `value`         | `String`        |                 | Default value using JSON data.
+| Name         | Type       | Default | Description |
+|:-------------|:-----------|:--------|:------------|
+| `allowBlank` | `Boolean`  | `true`  | If false the dropdown will preselect the first item if the supplied value matches none of the options' values.|
+| `auto`       | `Boolean`  | `true`  | If true, the dropdown will open up or down depending on the position in the screen.|
+| `className`  | `String`   | `''`    | Set the class to give custom styles to the dropdown.|
+| `disabled`   | `Boolean`  | `false` | Set the component as disabled.|
+| `error`      | `String`   |         | Give an error string to display under the field.|
+| `label`      | `String`   |         | The text string to use for the floating label element.|
+| `onBlur`     | `Function` |         | Callback function that is fired when the component is blurred.|
+| `onChange`   | `Function` |         | Called with (item.value, event) when the component's value changes.|
+| `onFocus`    | `Function` |         | Callback function that is fired when the component is focused.|
+| `source`     | `Array`    |         | Array of data objects with the data to represent in the dropdown.|
+| `template`   | `Function` |         | Callback function that returns a JSX template to represent the element.|
+| `value`      | `String`   |         | Default value using JSON data.|
+| `required`   | `Boolean`  | `false` | If true, the dropdown has a required attribute.|
 
-## Methods
+## Theming
 
-This component has state to control its value and how is it rendered. It exposes the following instance methods:
+This component uses an `Input` under the covers. The theme object is passed down namespaced under `input` keyword. This means you can use the same theme classNames from `Input` component but namespaced with `input`. For example, to style the label you have to use `inputLabel` className.
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+| Name            | Description|
+|:----------------|:-----------|
+| `active`        | Added to the root element when the dropdown is active.|
+| `disabled`      | Added to the root element when it's disabled.|
+| `dropdown`      | Root element class.|
+| `error`         | Used for the error element.|
+| `errored`       | Added to the inner wrapper if it's errored.|
+| `field`         | Used for the inner wrapper of the component.|
+| `label`         | Used for the the label element.|
+| `selected`      | Used to highlight the selected value.|
+| `templateValue` | Used as a wrapper for the given template value.|
+| `up`            | Added to the root element when it's opening up.|
+| `value`         | Used for each value in the dropdown component.|
+| `values`        | Used for the list of values.|
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
deleted file mode 100644
index eeb07fc1e..000000000
--- a/components/dropdown/style.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-@import "http://github.com/input/config";
-
-.root {
-  position: relative;
-  width: inherit;
-  margin-bottom: $dropdown-offset;
-  color: $color-text;
-  cursor: pointer;
-  border-bottom: 1px solid $color-divider;
-  &:not(.active) {
-    > .values {
-      max-height: 0;
-      visibility: hidden;
-    }
-  }
-  &.active {
-    > .label, > .value {
-      opacity: .5;
-    }
-    > .values {
-      max-height: $dropdown-overflow-max-height;
-      visibility: visible;
-      box-shadow: $zdepth-shadow-1;
-    }
-  }
-  &.disabled {
-    color: $color-text-secondary;
-    pointer-events: none;
-    cursor: normal;
-    border-bottom-style: dotted;
-    > .value:after {
-      transform: scale(0);
-    }
-  }
-}
-
-.label {
-  font-size: $font-size-tiny;
-  color: $color-text-secondary;
-}
-
-.values {
-  position: absolute;
-  z-index: 2;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  list-style: none;
-  background-color: $dropdown-color-white;
-  border-radius: $dropdown-value-border-radius;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: max-height, box-shadow;
-  > * {
-    position: relative;
-    padding: $unit;
-    overflow: hidden;
-    cursor: pointer;
-    &:hover {
-      background-color: $dropdown-value-hover-background;
-    }
-    &.selected {
-      color: $dropdown-color-primary;
-    }
-  }
-  &:not(.up) {
-    top: 0;
-    bottom: auto;
-  }
-  &.up {
-    top: auto;
-    bottom: 0;
-  }
-}
-
-.value {
-  display: block;
-  > span {
-    display: inline-block;
-    height: $input-field-height;
-    font-size: $input-field-font-size;
-    line-height: $input-field-height;
-  }
-  > :not(span) {
-    margin: ($dropdown-offset / 2) 0;
-  }
-  &:after {
-    $size: ($input-field-height / 7);
-    $border: $size solid transparent;
-    position: absolute;
-    right: ($dropdown-offset / 2);
-    bottom: $dropdown-offset;
-    width: 0;
-    height: 0;
-    content: "";
-    border-top: $size solid $color-divider;
-    border-right: $border;
-    border-left: $border;
-    transition: transform $animation-duration $animation-curve-default;
-  }
-}
-
-.ripple {
-  z-index: 0;
-  background-color: $color-divider;
-}
diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
new file mode 100644
index 000000000..0401c348f
--- /dev/null
+++ b/components/dropdown/theme.scss
@@ -0,0 +1,142 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/input/config";
+@import "http://github.com/config";
+
+.dropdown {
+  position: relative;
+  &:not(.active) {
+    > .values {
+      max-height: 0;
+      visibility: hidden;
+    }
+  }
+  &.active {
+    > .label, > .value {
+      opacity: .5;
+    }
+    > .values {
+      max-height: $dropdown-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+  &:not(.up) > .values {
+    top: 0;
+    bottom: auto;
+  }
+  &.up > .values {
+    top: auto;
+    bottom: 0;
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+  }
+}
+
+.value {
+  > input {
+    cursor: pointer;
+  }
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
+
+.field {
+  position: relative;
+  padding: $input-padding 0;
+  cursor: pointer;
+  &.errored {
+    padding-bottom: 0;
+    > .label {
+      color: $input-text-error-color;
+    }
+    > .templateValue {
+      border-bottom: 1px solid $input-text-error-color;
+    }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+    > .templateValue {
+      border-bottom-style: dotted;
+      opacity: .7;
+    }
+  }
+}
+
+.templateValue {
+  position: relative;
+  min-height: $input-field-height;
+  padding: $input-field-padding 0;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border-bottom: 1px solid $input-text-bottom-border-color;
+}
+
+.label {
+  position: absolute;
+  top: $input-focus-label-top;
+  left: 0;
+  font-size: $input-label-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
+}
+
+.error {
+  margin-bottom: - $input-underline-height;
+  font-size: $input-label-font-size;
+  line-height: $input-underline-height;
+  color: $input-text-error-color;
+}
+
+.values {
+  @include no-webkit-scrollbar;
+  position: absolute;
+  z-index: $z-index-high;
+  width: 100%;
+  overflow-y: auto;
+  list-style: none;
+  background-color: $dropdown-color-white;
+  border-radius: $dropdown-value-border-radius;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+  > * {
+    position: relative;
+    padding: $unit;
+    overflow: hidden;
+    cursor: pointer;
+    &:hover:not(.disabled) {
+      background-color: $dropdown-value-hover-background;
+    }
+    &.selected {
+      color: $dropdown-color-primary;
+    }
+    &.disabled {
+      color: $dropdown-color-disabled;
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
new file mode 100644
index 000000000..29fa06f2a
--- /dev/null
+++ b/components/font_icon/FontIcon.js
@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const FontIcon = ({ children, className, value, ...other}) => (
+  <span
+    data-react-toolbox='font-icon'
+    className={classnames({'material-icons': typeof value === 'string' || typeof children === 'string'}, className)}
+    {...other}
+  >
+    {value}
+    {children}
+  </span>
+);
+
+FontIcon.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ])
+};
+
+FontIcon.defaultProps = {
+  className: ''
+};
+
+export default FontIcon;
+export { FontIcon };
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
new file mode 100644
index 000000000..12c0deb3f
--- /dev/null
+++ b/components/font_icon/index.d.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface FontIconProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * The key string for the icon you want be displayed.
+   */
+  value?: React.ReactNode | string;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any
+}
+
+export class FontIcon extends React.Component<FontIconProps, {}> { }
+
+export default FontIcon;
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
new file mode 100644
index 000000000..726aec89e
--- /dev/null
+++ b/components/font_icon/index.js
@@ -0,0 +1,4 @@
+import FontIcon from './FontIcon.js';
+
+export default FontIcon;
+export { FontIcon };
diff --git a/components/font_icon/index.jsx b/components/font_icon/index.jsx
deleted file mode 100644
index 2e6583d57..000000000
--- a/components/font_icon/index.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const FontIcon = props => {
-  let className = style[props.value];
-  if (props.className) className += ` ${props.className}`;
-  return (
-    <span data-react-toolbox='icon' {...props} className={className}>
-      {props.children}
-    </span>
-  );
-};
-
-FontIcon.propTypes = {
-  className: React.PropTypes.string,
-  value: React.PropTypes.string
-};
-
-FontIcon.defaultProps = {
-  className: ''
-};
-
-export default FontIcon;
diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index b5266e2ef..3ceb3ea10 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -1,6 +1,6 @@
 # Font Icon
 
-The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox automatically includes the font for you so you just need to specify the name of the icon. Every name corresponds with the original one but separated with dashes. The font icon is displayed with the current color so it can be inherited from the parent component.
+The font icon component is used to represent an icon from the [Google Material Design](https://material.io/icons/) icon font. React Toolbox does **not** provide the font icon for you. You need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
 
 <!-- example -->
 ```jsx
@@ -9,15 +9,17 @@ import FontIcon from 'react-toolbox/lib/font_icon';
 const FontIcons = () => (
   <span>
     <FontIcon value='add' />
-    <FontIcon value='add-circle-outline' />
-    <FontIcon value='star' />
+    <FontIcon value='favorite' />
+    <FontIcon value='account_circle' />
+    <FontIcon>star</FontIcon>
   </span>
 );
 ```
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name            | Type                    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        |                 | The class name to give custom styles such as sizing.|
-| `value`         | `String`        |                 | The key string for the icon you want be displayed.|
+| `children`      | `String`                |                 | The key string for the icon you want to be displayed.|
+| `className`     | `String`                | `''`            | The class name to give custom styles such as sizing.|
+| `value`         | `String` or `Element`   |                 | The key string for the icon you want be displayed.|
diff --git a/components/font_icon/style.scss b/components/font_icon/style.scss
deleted file mode 100644
index 184bd6094..000000000
--- a/components/font_icon/style.scss
+++ /dev/null
@@ -1,6378 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
-%icon {
-  display: inline-block;
-  font-family: "Material Icons";
-  font-size: inherit;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  transform: translate(0, 0);
-  text-rendering: auto;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.threed-rotation {
-  @extend %icon;
-
-  &::before {
-    content: "\e84d";
-  }
-}
-
-.access-alarm {
-  @extend %icon;
-
-  &::before {
-    content: "\e190";
-  }
-}
-
-.access-alarms {
-  @extend %icon;
-
-  &::before {
-    content: "\e191";
-  }
-}
-
-.access-time {
-  @extend %icon;
-
-  &::before {
-    content: "\e192";
-  }
-}
-
-.accessibility {
-  @extend %icon;
-
-  &::before {
-    content: "\e84e";
-  }
-}
-
-.account-balance {
-  @extend %icon;
-
-  &::before {
-    content: "\e84f";
-  }
-}
-
-.account-balance-wallet {
-  @extend %icon;
-
-  &::before {
-    content: "\e850";
-  }
-}
-
-.account-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e851";
-  }
-}
-
-.account-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e853";
-  }
-}
-
-.adb {
-  @extend %icon;
-
-  &::before {
-    content: "\e60e";
-  }
-}
-
-.add {
-  @extend %icon;
-
-  &::before {
-    content: "\e145";
-  }
-}
-
-.add-alarm {
-  @extend %icon;
-
-  &::before {
-    content: "\e193";
-  }
-}
-
-.add-alert {
-  @extend %icon;
-
-  &::before {
-    content: "\e003";
-  }
-}
-
-.add-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e146";
-  }
-}
-
-.add-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e147";
-  }
-}
-
-.add-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e148";
-  }
-}
-
-.add-shopping-cart {
-  @extend %icon;
-
-  &::before {
-    content: "\e854";
-  }
-}
-
-.add-to-photos {
-  @extend %icon;
-
-  &::before {
-    content: "\e39d";
-  }
-}
-
-.adjust {
-  @extend %icon;
-
-  &::before {
-    content: "\e39e";
-  }
-}
-
-.airline-seat-flat {
-  @extend %icon;
-
-  &::before {
-    content: "\e630";
-  }
-}
-
-.airline-seat-flat-angled {
-  @extend %icon;
-
-  &::before {
-    content: "\e631";
-  }
-}
-
-.airline-seat-individual-suite {
-  @extend %icon;
-
-  &::before {
-    content: "\e632";
-  }
-}
-
-.airline-seat-legroom-extra {
-  @extend %icon;
-
-  &::before {
-    content: "\e633";
-  }
-}
-
-.airline-seat-legroom-normal {
-  @extend %icon;
-
-  &::before {
-    content: "\e634";
-  }
-}
-
-.airline-seat-legroom-reduced {
-  @extend %icon;
-
-  &::before {
-    content: "\e635";
-  }
-}
-
-.airline-seat-recline-extra {
-  @extend %icon;
-
-  &::before {
-    content: "\e636";
-  }
-}
-
-.airline-seat-recline-normal {
-  @extend %icon;
-
-  &::before {
-    content: "\e637";
-  }
-}
-
-.airplanemode-active {
-  @extend %icon;
-
-  &::before {
-    content: "\e195";
-  }
-}
-
-.airplanemode-inactive {
-  @extend %icon;
-
-  &::before {
-    content: "\e194";
-  }
-}
-
-.airplay {
-  @extend %icon;
-
-  &::before {
-    content: "\e055";
-  }
-}
-
-.alarm {
-  @extend %icon;
-
-  &::before {
-    content: "\e855";
-  }
-}
-
-.alarm-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e856";
-  }
-}
-
-.alarm-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e857";
-  }
-}
-
-.alarm-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e858";
-  }
-}
-
-.album {
-  @extend %icon;
-
-  &::before {
-    content: "\e019";
-  }
-}
-
-.android {
-  @extend %icon;
-
-  &::before {
-    content: "\e859";
-  }
-}
-
-.announcement {
-  @extend %icon;
-
-  &::before {
-    content: "\e85a";
-  }
-}
-
-.apps {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c3";
-  }
-}
-
-.archive {
-  @extend %icon;
-
-  &::before {
-    content: "\e149";
-  }
-}
-
-.arrow-back {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c4";
-  }
-}
-
-.arrow-drop-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c5";
-  }
-}
-
-.arrow-drop-down-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c6";
-  }
-}
-
-.arrow-drop-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c7";
-  }
-}
-
-.arrow-forward {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c8";
-  }
-}
-
-.aspect-ratio {
-  @extend %icon;
-
-  &::before {
-    content: "\e85b";
-  }
-}
-
-.assessment {
-  @extend %icon;
-
-  &::before {
-    content: "\e85c";
-  }
-}
-
-.assignment {
-  @extend %icon;
-
-  &::before {
-    content: "\e85d";
-  }
-}
-
-.assignment-ind {
-  @extend %icon;
-
-  &::before {
-    content: "\e85e";
-  }
-}
-
-.assignment-late {
-  @extend %icon;
-
-  &::before {
-    content: "\e85f";
-  }
-}
-
-.assignment-return {
-  @extend %icon;
-
-  &::before {
-    content: "\e860";
-  }
-}
-
-.assignment-returned {
-  @extend %icon;
-
-  &::before {
-    content: "\e861";
-  }
-}
-
-.assignment-turned-in {
-  @extend %icon;
-
-  &::before {
-    content: "\e862";
-  }
-}
-
-.assistant {
-  @extend %icon;
-
-  &::before {
-    content: "\e39f";
-  }
-}
-
-.assistant-photo {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a0";
-  }
-}
-
-.attach-file {
-  @extend %icon;
-
-  &::before {
-    content: "\e226";
-  }
-}
-
-.attach-money {
-  @extend %icon;
-
-  &::before {
-    content: "\e227";
-  }
-}
-
-.attachment {
-  @extend %icon;
-
-  &::before {
-    content: "\e2bc";
-  }
-}
-
-.audiotrack {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a1";
-  }
-}
-
-.autorenew {
-  @extend %icon;
-
-  &::before {
-    content: "\e863";
-  }
-}
-
-.av-timer {
-  @extend %icon;
-
-  &::before {
-    content: "\e01b";
-  }
-}
-
-.backspace {
-  @extend %icon;
-
-  &::before {
-    content: "\e14a";
-  }
-}
-
-.backup {
-  @extend %icon;
-
-  &::before {
-    content: "\e864";
-  }
-}
-
-.battery-alert {
-  @extend %icon;
-
-  &::before {
-    content: "\e19c";
-  }
-}
-
-.battery-charging-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a3";
-  }
-}
-
-.battery-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a4";
-  }
-}
-
-.battery-std {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a5";
-  }
-}
-
-.battery-unknown {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a6";
-  }
-}
-
-.beenhere {
-  @extend %icon;
-
-  &::before {
-    content: "\e52d";
-  }
-}
-
-.block {
-  @extend %icon;
-
-  &::before {
-    content: "\e14b";
-  }
-}
-
-.bluetooth {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a7";
-  }
-}
-
-.bluetooth-audio {
-  @extend %icon;
-
-  &::before {
-    content: "\e60f";
-  }
-}
-
-.bluetooth-connected {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a8";
-  }
-}
-
-.bluetooth-disabled {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a9";
-  }
-}
-
-.bluetooth-searching {
-  @extend %icon;
-
-  &::before {
-    content: "\e1aa";
-  }
-}
-
-.blur-circular {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a2";
-  }
-}
-
-.blur-linear {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a3";
-  }
-}
-
-.blur-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a4";
-  }
-}
-
-.blur-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a5";
-  }
-}
-
-.book {
-  @extend %icon;
-
-  &::before {
-    content: "\e865";
-  }
-}
-
-.bookmark {
-  @extend %icon;
-
-  &::before {
-    content: "\e866";
-  }
-}
-
-.bookmark-border {
-  @extend %icon;
-
-  &::before {
-    content: "\e867";
-  }
-}
-
-.border-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e228";
-  }
-}
-
-.border-bottom {
-  @extend %icon;
-
-  &::before {
-    content: "\e229";
-  }
-}
-
-.border-clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e22a";
-  }
-}
-
-.border-color {
-  @extend %icon;
-
-  &::before {
-    content: "\e22b";
-  }
-}
-
-.border-horizontal {
-  @extend %icon;
-
-  &::before {
-    content: "\e22c";
-  }
-}
-
-.border-inner {
-  @extend %icon;
-
-  &::before {
-    content: "\e22d";
-  }
-}
-
-.border-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e22e";
-  }
-}
-
-.border-outer {
-  @extend %icon;
-
-  &::before {
-    content: "\e22f";
-  }
-}
-
-.border-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e230";
-  }
-}
-
-.border-style {
-  @extend %icon;
-
-  &::before {
-    content: "\e231";
-  }
-}
-
-.border-top {
-  @extend %icon;
-
-  &::before {
-    content: "\e232";
-  }
-}
-
-.border-vertical {
-  @extend %icon;
-
-  &::before {
-    content: "\e233";
-  }
-}
-
-.brightness-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a6";
-  }
-}
-
-.brightness-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a7";
-  }
-}
-
-.brightness-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a8";
-  }
-}
-
-.brightness-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a9";
-  }
-}
-
-.brightness-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3aa";
-  }
-}
-
-.brightness-6 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ab";
-  }
-}
-
-.brightness-7 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ac";
-  }
-}
-
-.brightness-auto {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ab";
-  }
-}
-
-.brightness-high {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ac";
-  }
-}
-
-.brightness-low {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ad";
-  }
-}
-
-.brightness-medium {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ae";
-  }
-}
-
-.broken-image {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ad";
-  }
-}
-
-.brush {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ae";
-  }
-}
-
-.bug-report {
-  @extend %icon;
-
-  &::before {
-    content: "\e868";
-  }
-}
-
-.build {
-  @extend %icon;
-
-  &::before {
-    content: "\e869";
-  }
-}
-
-.business {
-  @extend %icon;
-
-  &::before {
-    content: "\e0af";
-  }
-}
-
-.cached {
-  @extend %icon;
-
-  &::before {
-    content: "\e86a";
-  }
-}
-
-.cake {
-  @extend %icon;
-
-  &::before {
-    content: "\e7e9";
-  }
-}
-
-.call {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b0";
-  }
-}
-
-.call-end {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b1";
-  }
-}
-
-.call-made {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b2";
-  }
-}
-
-.call-merge {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b3";
-  }
-}
-
-.call-missed {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b4";
-  }
-}
-
-.call-received {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b5";
-  }
-}
-
-.call-split {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b6";
-  }
-}
-
-.camera {
-  @extend %icon;
-
-  &::before {
-    content: "\e3af";
-  }
-}
-
-.camera-alt {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b0";
-  }
-}
-
-.camera-enhance {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fc";
-  }
-}
-
-.camera-front {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b1";
-  }
-}
-
-.camera-rear {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b2";
-  }
-}
-
-.camera-roll {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b3";
-  }
-}
-
-.cancel {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c9";
-  }
-}
-
-.card-giftcard {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f6";
-  }
-}
-
-.card-membership {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f7";
-  }
-}
-
-.card-travel {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f8";
-  }
-}
-
-.cast {
-  @extend %icon;
-
-  &::before {
-    content: "\e307";
-  }
-}
-
-.cast-connected {
-  @extend %icon;
-
-  &::before {
-    content: "\e308";
-  }
-}
-
-.center-focus-strong {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b4";
-  }
-}
-
-.center-focus-weak {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b5";
-  }
-}
-
-.change-history {
-  @extend %icon;
-
-  &::before {
-    content: "\e86b";
-  }
-}
-
-.chat {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b7";
-  }
-}
-
-.chat-bubble {
-  @extend %icon;
-
-  &::before {
-    content: "\e0ca";
-  }
-}
-
-.chat-bubble-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cb";
-  }
-}
-
-.check {
-  @extend %icon;
-
-  &::before {
-    content: "\e5ca";
-  }
-}
-
-.check-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e834";
-  }
-}
-
-.check-box-outline-blank {
-  @extend %icon;
-
-  &::before {
-    content: "\e835";
-  }
-}
-
-.check-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e86c";
-  }
-}
-
-.chevron-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cb";
-  }
-}
-
-.chevron-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cc";
-  }
-}
-
-.chrome-reader-mode {
-  @extend %icon;
-
-  &::before {
-    content: "\e86d";
-  }
-}
-
-.class {
-  @extend %icon;
-
-  &::before {
-    content: "\e86e";
-  }
-}
-
-.clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e14c";
-  }
-}
-
-.clear-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b8";
-  }
-}
-
-.close {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cd";
-  }
-}
-
-.closed-caption {
-  @extend %icon;
-
-  &::before {
-    content: "\e01c";
-  }
-}
-
-.cloud {
-  @extend %icon;
-
-  &::before {
-    content: "\e2bd";
-  }
-}
-
-.cloud-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e2be";
-  }
-}
-
-.cloud-done {
-  @extend %icon;
-
-  &::before {
-    content: "\e2bf";
-  }
-}
-
-.cloud-download {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c0";
-  }
-}
-
-.cloud-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c1";
-  }
-}
-
-.cloud-queue {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c2";
-  }
-}
-
-.cloud-upload {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c3";
-  }
-}
-
-.code {
-  @extend %icon;
-
-  &::before {
-    content: "\e86f";
-  }
-}
-
-.collections {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b6";
-  }
-}
-
-.collections-bookmark {
-  @extend %icon;
-
-  &::before {
-    content: "\e431";
-  }
-}
-
-.color-lens {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b7";
-  }
-}
-
-.colorize {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b8";
-  }
-}
-
-.comment {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b9";
-  }
-}
-
-.compare {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b9";
-  }
-}
-
-.computer {
-  @extend %icon;
-
-  &::before {
-    content: "\e30a";
-  }
-}
-
-.confirmation-number {
-  @extend %icon;
-
-  &::before {
-    content: "\e638";
-  }
-}
-
-.contact-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cf";
-  }
-}
-
-.contacts {
-  @extend %icon;
-
-  &::before {
-    content: "\e0ba";
-  }
-}
-
-.content-copy {
-  @extend %icon;
-
-  &::before {
-    content: "\e14d";
-  }
-}
-
-.content-cut {
-  @extend %icon;
-
-  &::before {
-    content: "\e14e";
-  }
-}
-
-.content-paste {
-  @extend %icon;
-
-  &::before {
-    content: "\e14f";
-  }
-}
-
-.control-point {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ba";
-  }
-}
-
-.control-point-duplicate {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bb";
-  }
-}
-
-.create {
-  @extend %icon;
-
-  &::before {
-    content: "\e150";
-  }
-}
-
-.credit-card {
-  @extend %icon;
-
-  &::before {
-    content: "\e870";
-  }
-}
-
-.crop {
-  @extend %icon;
-
-  &::before {
-    content: "\e3be";
-  }
-}
-
-.crop-16-9 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bc";
-  }
-}
-
-.crop-3-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bd";
-  }
-}
-
-.crop-5-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bf";
-  }
-}
-
-.crop-7-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c0";
-  }
-}
-
-.crop-din {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c1";
-  }
-}
-
-.crop-free {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c2";
-  }
-}
-
-.crop-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c3";
-  }
-}
-
-.crop-original {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c4";
-  }
-}
-
-.crop-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c5";
-  }
-}
-
-.crop-square {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c6";
-  }
-}
-
-.dashboard {
-  @extend %icon;
-
-  &::before {
-    content: "\e871";
-  }
-}
-
-.data-usage {
-  @extend %icon;
-
-  &::before {
-    content: "\e1af";
-  }
-}
-
-.dehaze {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c7";
-  }
-}
-
-.delete {
-  @extend %icon;
-
-  &::before {
-    content: "\e872";
-  }
-}
-
-.description {
-  @extend %icon;
-
-  &::before {
-    content: "\e873";
-  }
-}
-
-.desktop-mac {
-  @extend %icon;
-
-  &::before {
-    content: "\e30b";
-  }
-}
-
-.desktop-windows {
-  @extend %icon;
-
-  &::before {
-    content: "\e30c";
-  }
-}
-
-.details {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c8";
-  }
-}
-
-.developer-board {
-  @extend %icon;
-
-  &::before {
-    content: "\e30d";
-  }
-}
-
-.developer-mode {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b0";
-  }
-}
-
-.device-hub {
-  @extend %icon;
-
-  &::before {
-    content: "\e335";
-  }
-}
-
-.devices {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b1";
-  }
-}
-
-.dialer-sip {
-  @extend %icon;
-
-  &::before {
-    content: "\e0bb";
-  }
-}
-
-.dialpad {
-  @extend %icon;
-
-  &::before {
-    content: "\e0bc";
-  }
-}
-
-.directions {
-  @extend %icon;
-
-  &::before {
-    content: "\e52e";
-  }
-}
-
-.directions-bike {
-  @extend %icon;
-
-  &::before {
-    content: "\e52f";
-  }
-}
-
-.directions-boat {
-  @extend %icon;
-
-  &::before {
-    content: "\e532";
-  }
-}
-
-.directions-bus {
-  @extend %icon;
-
-  &::before {
-    content: "\e530";
-  }
-}
-
-.directions-car {
-  @extend %icon;
-
-  &::before {
-    content: "\e531";
-  }
-}
-
-.directions-railway {
-  @extend %icon;
-
-  &::before {
-    content: "\e534";
-  }
-}
-
-.directions-run {
-  @extend %icon;
-
-  &::before {
-    content: "\e566";
-  }
-}
-
-.directions-subway {
-  @extend %icon;
-
-  &::before {
-    content: "\e533";
-  }
-}
-
-.directions-transit {
-  @extend %icon;
-
-  &::before {
-    content: "\e535";
-  }
-}
-
-.directions-walk {
-  @extend %icon;
-
-  &::before {
-    content: "\e536";
-  }
-}
-
-.disc-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e610";
-  }
-}
-
-.dns {
-  @extend %icon;
-
-  &::before {
-    content: "\e875";
-  }
-}
-
-.do-not-disturb {
-  @extend %icon;
-
-  &::before {
-    content: "\e612";
-  }
-}
-
-.do-not-disturb-alt {
-  @extend %icon;
-
-  &::before {
-    content: "\e611";
-  }
-}
-
-.dock {
-  @extend %icon;
-
-  &::before {
-    content: "\e30e";
-  }
-}
-
-.domain {
-  @extend %icon;
-
-  &::before {
-    content: "\e7ee";
-  }
-}
-
-.done {
-  @extend %icon;
-
-  &::before {
-    content: "\e876";
-  }
-}
-
-.done-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e877";
-  }
-}
-
-.drafts {
-  @extend %icon;
-
-  &::before {
-    content: "\e151";
-  }
-}
-
-.drive-eta {
-  @extend %icon;
-
-  &::before {
-    content: "\e613";
-  }
-}
-
-.dvr {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b2";
-  }
-}
-
-.edit {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c9";
-  }
-}
-
-.eject {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fb";
-  }
-}
-
-.email {
-  @extend %icon;
-
-  &::before {
-    content: "\e0be";
-  }
-}
-
-.equalizer {
-  @extend %icon;
-
-  &::before {
-    content: "\e01d";
-  }
-}
-
-.error {
-  @extend %icon;
-
-  &::before {
-    content: "\e000";
-  }
-}
-
-.error-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e001";
-  }
-}
-
-.event {
-  @extend %icon;
-
-  &::before {
-    content: "\e878";
-  }
-}
-
-.event-available {
-  @extend %icon;
-
-  &::before {
-    content: "\e614";
-  }
-}
-
-.event-busy {
-  @extend %icon;
-
-  &::before {
-    content: "\e615";
-  }
-}
-
-.event-note {
-  @extend %icon;
-
-  &::before {
-    content: "\e616";
-  }
-}
-
-.event-seat {
-  @extend %icon;
-
-  &::before {
-    content: "\e903";
-  }
-}
-
-.exit-to-app {
-  @extend %icon;
-
-  &::before {
-    content: "\e879";
-  }
-}
-
-.expand-less {
-  @extend %icon;
-
-  &::before {
-    content: "\e5ce";
-  }
-}
-
-.expand-more {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cf";
-  }
-}
-
-.explicit {
-  @extend %icon;
-
-  &::before {
-    content: "\e01e";
-  }
-}
-
-.explore {
-  @extend %icon;
-
-  &::before {
-    content: "\e87a";
-  }
-}
-
-.exposure {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ca";
-  }
-}
-
-.exposure-neg-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cb";
-  }
-}
-
-.exposure-neg-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cc";
-  }
-}
-
-.exposure-plus-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cd";
-  }
-}
-
-.exposure-plus-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ce";
-  }
-}
-
-.exposure-zero {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cf";
-  }
-}
-
-.extension {
-  @extend %icon;
-
-  &::before {
-    content: "\e87b";
-  }
-}
-
-.face {
-  @extend %icon;
-
-  &::before {
-    content: "\e87c";
-  }
-}
-
-.fast-forward {
-  @extend %icon;
-
-  &::before {
-    content: "\e01f";
-  }
-}
-
-.fast-rewind {
-  @extend %icon;
-
-  &::before {
-    content: "\e020";
-  }
-}
-
-.favorite {
-  @extend %icon;
-
-  &::before {
-    content: "\e87d";
-  }
-}
-
-.favorite-border {
-  @extend %icon;
-
-  &::before {
-    content: "\e87e";
-  }
-}
-
-.feedback {
-  @extend %icon;
-
-  &::before {
-    content: "\e87f";
-  }
-}
-
-.file-download {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c4";
-  }
-}
-
-.file-upload {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c6";
-  }
-}
-
-.filter {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d3";
-  }
-}
-
-.filter-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d0";
-  }
-}
-
-.filter-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d1";
-  }
-}
-
-.filter-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d2";
-  }
-}
-
-.filter-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d4";
-  }
-}
-
-.filter-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d5";
-  }
-}
-
-.filter-6 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d6";
-  }
-}
-
-.filter-7 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d7";
-  }
-}
-
-.filter-8 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d8";
-  }
-}
-
-.filter-9 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d9";
-  }
-}
-
-.filter-9-plus {
-  @extend %icon;
-
-  &::before {
-    content: "\e3da";
-  }
-}
-
-.filter-b-and-w {
-  @extend %icon;
-
-  &::before {
-    content: "\e3db";
-  }
-}
-
-.filter-center-focus {
-  @extend %icon;
-
-  &::before {
-    content: "\e3dc";
-  }
-}
-
-.filter-drama {
-  @extend %icon;
-
-  &::before {
-    content: "\e3dd";
-  }
-}
-
-.filter-frames {
-  @extend %icon;
-
-  &::before {
-    content: "\e3de";
-  }
-}
-
-.filter-hdr {
-  @extend %icon;
-
-  &::before {
-    content: "\e3df";
-  }
-}
-
-.filter-list {
-  @extend %icon;
-
-  &::before {
-    content: "\e152";
-  }
-}
-
-.filter-none {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e0";
-  }
-}
-
-.filter-tilt-shift {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e2";
-  }
-}
-
-.filter-vintage {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e3";
-  }
-}
-
-.find-in-page {
-  @extend %icon;
-
-  &::before {
-    content: "\e880";
-  }
-}
-
-.find-replace {
-  @extend %icon;
-
-  &::before {
-    content: "\e881";
-  }
-}
-
-.flag {
-  @extend %icon;
-
-  &::before {
-    content: "\e153";
-  }
-}
-
-.flare {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e4";
-  }
-}
-
-.flash-auto {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e5";
-  }
-}
-
-.flash-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e6";
-  }
-}
-
-.flash-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e7";
-  }
-}
-
-.flight {
-  @extend %icon;
-
-  &::before {
-    content: "\e539";
-  }
-}
-
-.flight-land {
-  @extend %icon;
-
-  &::before {
-    content: "\e904";
-  }
-}
-
-.flight-takeoff {
-  @extend %icon;
-
-  &::before {
-    content: "\e905";
-  }
-}
-
-.flip {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e8";
-  }
-}
-
-.flip-to-back {
-  @extend %icon;
-
-  &::before {
-    content: "\e882";
-  }
-}
-
-.flip-to-front {
-  @extend %icon;
-
-  &::before {
-    content: "\e883";
-  }
-}
-
-.folder {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c7";
-  }
-}
-
-.folder-open {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c8";
-  }
-}
-
-.folder-shared {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c9";
-  }
-}
-
-.folder-special {
-  @extend %icon;
-
-  &::before {
-    content: "\e617";
-  }
-}
-
-.font-download {
-  @extend %icon;
-
-  &::before {
-    content: "\e167";
-  }
-}
-
-.format-align-center {
-  @extend %icon;
-
-  &::before {
-    content: "\e234";
-  }
-}
-
-.format-align-justify {
-  @extend %icon;
-
-  &::before {
-    content: "\e235";
-  }
-}
-
-.format-align-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e236";
-  }
-}
-
-.format-align-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e237";
-  }
-}
-
-.format-bold {
-  @extend %icon;
-
-  &::before {
-    content: "\e238";
-  }
-}
-
-.format-clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e239";
-  }
-}
-
-.format-color-fill {
-  @extend %icon;
-
-  &::before {
-    content: "\e23a";
-  }
-}
-
-.format-color-reset {
-  @extend %icon;
-
-  &::before {
-    content: "\e23b";
-  }
-}
-
-.format-color-text {
-  @extend %icon;
-
-  &::before {
-    content: "\e23c";
-  }
-}
-
-.format-indent-decrease {
-  @extend %icon;
-
-  &::before {
-    content: "\e23d";
-  }
-}
-
-.format-indent-increase {
-  @extend %icon;
-
-  &::before {
-    content: "\e23e";
-  }
-}
-
-.format-italic {
-  @extend %icon;
-
-  &::before {
-    content: "\e23f";
-  }
-}
-
-.format-line-spacing {
-  @extend %icon;
-
-  &::before {
-    content: "\e240";
-  }
-}
-
-.format-list-bulleted {
-  @extend %icon;
-
-  &::before {
-    content: "\e241";
-  }
-}
-
-.format-list-numbered {
-  @extend %icon;
-
-  &::before {
-    content: "\e242";
-  }
-}
-
-.format-paint {
-  @extend %icon;
-
-  &::before {
-    content: "\e243";
-  }
-}
-
-.format-quote {
-  @extend %icon;
-
-  &::before {
-    content: "\e244";
-  }
-}
-
-.format-size {
-  @extend %icon;
-
-  &::before {
-    content: "\e245";
-  }
-}
-
-.format-strikethrough {
-  @extend %icon;
-
-  &::before {
-    content: "\e246";
-  }
-}
-
-.format-textdirection-l-to-r {
-  @extend %icon;
-
-  &::before {
-    content: "\e247";
-  }
-}
-
-.format-textdirection-r-to-l {
-  @extend %icon;
-
-  &::before {
-    content: "\e248";
-  }
-}
-
-.format-underlined {
-  @extend %icon;
-
-  &::before {
-    content: "\e249";
-  }
-}
-
-.forum {
-  @extend %icon;
-
-  &::before {
-    content: "\e0bf";
-  }
-}
-
-.forward {
-  @extend %icon;
-
-  &::before {
-    content: "\e154";
-  }
-}
-
-.forward-10 {
-  @extend %icon;
-
-  &::before {
-    content: "\e056";
-  }
-}
-
-.forward-30 {
-  @extend %icon;
-
-  &::before {
-    content: "\e057";
-  }
-}
-
-.forward-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e058";
-  }
-}
-
-.fullscreen {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d0";
-  }
-}
-
-.fullscreen-exit {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d1";
-  }
-}
-
-.functions {
-  @extend %icon;
-
-  &::before {
-    content: "\e24a";
-  }
-}
-
-.gamepad {
-  @extend %icon;
-
-  &::before {
-    content: "\e30f";
-  }
-}
-
-.games {
-  @extend %icon;
-
-  &::before {
-    content: "\e021";
-  }
-}
-
-.gesture {
-  @extend %icon;
-
-  &::before {
-    content: "\e155";
-  }
-}
-
-.get-app {
-  @extend %icon;
-
-  &::before {
-    content: "\e884";
-  }
-}
-
-.gif {
-  @extend %icon;
-
-  &::before {
-    content: "\e908";
-  }
-}
-
-.gps-fixed {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b3";
-  }
-}
-
-.gps-not-fixed {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b4";
-  }
-}
-
-.gps-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b5";
-  }
-}
-
-.grade {
-  @extend %icon;
-
-  &::before {
-    content: "\e885";
-  }
-}
-
-.gradient {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e9";
-  }
-}
-
-.grain {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ea";
-  }
-}
-
-.graphic-eq {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b8";
-  }
-}
-
-.grid-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3eb";
-  }
-}
-
-.grid-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ec";
-  }
-}
-
-.group {
-  @extend %icon;
-
-  &::before {
-    content: "\e7ef";
-  }
-}
-
-.group-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f0";
-  }
-}
-
-.group-work {
-  @extend %icon;
-
-  &::before {
-    content: "\e886";
-  }
-}
-
-.hd {
-  @extend %icon;
-
-  &::before {
-    content: "\e052";
-  }
-}
-
-.hdr-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ed";
-  }
-}
-
-.hdr-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ee";
-  }
-}
-
-.hdr-strong {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f1";
-  }
-}
-
-.hdr-weak {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f2";
-  }
-}
-
-.headset {
-  @extend %icon;
-
-  &::before {
-    content: "\e310";
-  }
-}
-
-.headset-mic {
-  @extend %icon;
-
-  &::before {
-    content: "\e311";
-  }
-}
-
-.healing {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f3";
-  }
-}
-
-.hearing {
-  @extend %icon;
-
-  &::before {
-    content: "\e023";
-  }
-}
-
-.help {
-  @extend %icon;
-
-  &::before {
-    content: "\e887";
-  }
-}
-
-.help-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fd";
-  }
-}
-
-.high-quality {
-  @extend %icon;
-
-  &::before {
-    content: "\e024";
-  }
-}
-
-.highlight-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e888";
-  }
-}
-
-.history {
-  @extend %icon;
-
-  &::before {
-    content: "\e889";
-  }
-}
-
-.home {
-  @extend %icon;
-
-  &::before {
-    content: "\e88a";
-  }
-}
-
-.hotel {
-  @extend %icon;
-
-  &::before {
-    content: "\e53a";
-  }
-}
-
-.hourglass-empty {
-  @extend %icon;
-
-  &::before {
-    content: "\e88b";
-  }
-}
-
-.hourglass-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e88c";
-  }
-}
-
-.http {
-  @extend %icon;
-
-  &::before {
-    content: "\e902";
-  }
-}
-
-.https {
-  @extend %icon;
-
-  &::before {
-    content: "\e88d";
-  }
-}
-
-.image {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f4";
-  }
-}
-
-.image-aspect-ratio {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f5";
-  }
-}
-
-.import-export {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c3";
-  }
-}
-
-.inbox {
-  @extend %icon;
-
-  &::before {
-    content: "\e156";
-  }
-}
-
-.indeterminate-check-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e909";
-  }
-}
-
-.info {
-  @extend %icon;
-
-  &::before {
-    content: "\e88e";
-  }
-}
-
-.info-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e88f";
-  }
-}
-
-.input {
-  @extend %icon;
-
-  &::before {
-    content: "\e890";
-  }
-}
-
-.insert-chart {
-  @extend %icon;
-
-  &::before {
-    content: "\e24b";
-  }
-}
-
-.insert-comment {
-  @extend %icon;
-
-  &::before {
-    content: "\e24c";
-  }
-}
-
-.insert-drive-file {
-  @extend %icon;
-
-  &::before {
-    content: "\e24d";
-  }
-}
-
-.insert-emoticon {
-  @extend %icon;
-
-  &::before {
-    content: "\e24e";
-  }
-}
-
-.insert-invitation {
-  @extend %icon;
-
-  &::before {
-    content: "\e24f";
-  }
-}
-
-.insert-link {
-  @extend %icon;
-
-  &::before {
-    content: "\e250";
-  }
-}
-
-.insert-photo {
-  @extend %icon;
-
-  &::before {
-    content: "\e251";
-  }
-}
-
-.invert-colors {
-  @extend %icon;
-
-  &::before {
-    content: "\e891";
-  }
-}
-
-.invert-colors-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c4";
-  }
-}
-
-.iso {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f6";
-  }
-}
-
-.keyboard {
-  @extend %icon;
-
-  &::before {
-    content: "\e312";
-  }
-}
-
-.keyboard-arrow-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e313";
-  }
-}
-
-.keyboard-arrow-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e314";
-  }
-}
-
-.keyboard-arrow-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e315";
-  }
-}
-
-.keyboard-arrow-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e316";
-  }
-}
-
-.keyboard-backspace {
-  @extend %icon;
-
-  &::before {
-    content: "\e317";
-  }
-}
-
-.keyboard-capslock {
-  @extend %icon;
-
-  &::before {
-    content: "\e318";
-  }
-}
-
-.keyboard-hide {
-  @extend %icon;
-
-  &::before {
-    content: "\e31a";
-  }
-}
-
-.keyboard-return {
-  @extend %icon;
-
-  &::before {
-    content: "\e31b";
-  }
-}
-
-.keyboard-tab {
-  @extend %icon;
-
-  &::before {
-    content: "\e31c";
-  }
-}
-
-.keyboard-voice {
-  @extend %icon;
-
-  &::before {
-    content: "\e31d";
-  }
-}
-
-.label {
-  @extend %icon;
-
-  &::before {
-    content: "\e892";
-  }
-}
-
-.label-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e893";
-  }
-}
-
-.landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f7";
-  }
-}
-
-.language {
-  @extend %icon;
-
-  &::before {
-    content: "\e894";
-  }
-}
-
-.laptop {
-  @extend %icon;
-
-  &::before {
-    content: "\e31e";
-  }
-}
-
-.laptop-chromebook {
-  @extend %icon;
-
-  &::before {
-    content: "\e31f";
-  }
-}
-
-.laptop-mac {
-  @extend %icon;
-
-  &::before {
-    content: "\e320";
-  }
-}
-
-.laptop-windows {
-  @extend %icon;
-
-  &::before {
-    content: "\e321";
-  }
-}
-
-.launch {
-  @extend %icon;
-
-  &::before {
-    content: "\e895";
-  }
-}
-
-.layers {
-  @extend %icon;
-
-  &::before {
-    content: "\e53b";
-  }
-}
-
-.layers-clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e53c";
-  }
-}
-
-.leak-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f8";
-  }
-}
-
-.leak-remove {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f9";
-  }
-}
-
-.lens {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fa";
-  }
-}
-
-.library-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e02e";
-  }
-}
-
-.library-books {
-  @extend %icon;
-
-  &::before {
-    content: "\e02f";
-  }
-}
-
-.library-music {
-  @extend %icon;
-
-  &::before {
-    content: "\e030";
-  }
-}
-
-.link {
-  @extend %icon;
-
-  &::before {
-    content: "\e157";
-  }
-}
-
-.list {
-  @extend %icon;
-
-  &::before {
-    content: "\e896";
-  }
-}
-
-.live-help {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c6";
-  }
-}
-
-.live-tv {
-  @extend %icon;
-
-  &::before {
-    content: "\e639";
-  }
-}
-
-.local-activity {
-  @extend %icon;
-
-  &::before {
-    content: "\e53f";
-  }
-}
-
-.local-airport {
-  @extend %icon;
-
-  &::before {
-    content: "\e53d";
-  }
-}
-
-.local-atm {
-  @extend %icon;
-
-  &::before {
-    content: "\e53e";
-  }
-}
-
-.local-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e540";
-  }
-}
-
-.local-cafe {
-  @extend %icon;
-
-  &::before {
-    content: "\e541";
-  }
-}
-
-.local-car-wash {
-  @extend %icon;
-
-  &::before {
-    content: "\e542";
-  }
-}
-
-.local-convenience-store {
-  @extend %icon;
-
-  &::before {
-    content: "\e543";
-  }
-}
-
-.local-dining {
-  @extend %icon;
-
-  &::before {
-    content: "\e556";
-  }
-}
-
-.local-drink {
-  @extend %icon;
-
-  &::before {
-    content: "\e544";
-  }
-}
-
-.local-florist {
-  @extend %icon;
-
-  &::before {
-    content: "\e545";
-  }
-}
-
-.local-gas-station {
-  @extend %icon;
-
-  &::before {
-    content: "\e546";
-  }
-}
-
-.local-grocery-store {
-  @extend %icon;
-
-  &::before {
-    content: "\e547";
-  }
-}
-
-.local-hospital {
-  @extend %icon;
-
-  &::before {
-    content: "\e548";
-  }
-}
-
-.local-hotel {
-  @extend %icon;
-
-  &::before {
-    content: "\e549";
-  }
-}
-
-.local-laundry-service {
-  @extend %icon;
-
-  &::before {
-    content: "\e54a";
-  }
-}
-
-.local-library {
-  @extend %icon;
-
-  &::before {
-    content: "\e54b";
-  }
-}
-
-.local-mall {
-  @extend %icon;
-
-  &::before {
-    content: "\e54c";
-  }
-}
-
-.local-movies {
-  @extend %icon;
-
-  &::before {
-    content: "\e54d";
-  }
-}
-
-.local-offer {
-  @extend %icon;
-
-  &::before {
-    content: "\e54e";
-  }
-}
-
-.local-parking {
-  @extend %icon;
-
-  &::before {
-    content: "\e54f";
-  }
-}
-
-.local-pharmacy {
-  @extend %icon;
-
-  &::before {
-    content: "\e550";
-  }
-}
-
-.local-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e551";
-  }
-}
-
-.local-pizza {
-  @extend %icon;
-
-  &::before {
-    content: "\e552";
-  }
-}
-
-.local-play {
-  @extend %icon;
-
-  &::before {
-    content: "\e553";
-  }
-}
-
-.local-post-office {
-  @extend %icon;
-
-  &::before {
-    content: "\e554";
-  }
-}
-
-.local-printshop {
-  @extend %icon;
-
-  &::before {
-    content: "\e555";
-  }
-}
-
-.local-see {
-  @extend %icon;
-
-  &::before {
-    content: "\e557";
-  }
-}
-
-.local-shipping {
-  @extend %icon;
-
-  &::before {
-    content: "\e558";
-  }
-}
-
-.local-taxi {
-  @extend %icon;
-
-  &::before {
-    content: "\e559";
-  }
-}
-
-.location-city {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f1";
-  }
-}
-
-.location-disabled {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b6";
-  }
-}
-
-.location-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c7";
-  }
-}
-
-.location-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c8";
-  }
-}
-
-.location-searching {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b7";
-  }
-}
-
-.lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e897";
-  }
-}
-
-.lock-open {
-  @extend %icon;
-
-  &::before {
-    content: "\e898";
-  }
-}
-
-.lock-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e899";
-  }
-}
-
-.looks {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fc";
-  }
-}
-
-.looks-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fb";
-  }
-}
-
-.looks-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fd";
-  }
-}
-
-.looks-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fe";
-  }
-}
-
-.looks-6 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ff";
-  }
-}
-
-.looks-one {
-  @extend %icon;
-
-  &::before {
-    content: "\e400";
-  }
-}
-
-.looks-two {
-  @extend %icon;
-
-  &::before {
-    content: "\e401";
-  }
-}
-
-.loop {
-  @extend %icon;
-
-  &::before {
-    content: "\e028";
-  }
-}
-
-.loupe {
-  @extend %icon;
-
-  &::before {
-    content: "\e402";
-  }
-}
-
-.loyalty {
-  @extend %icon;
-
-  &::before {
-    content: "\e89a";
-  }
-}
-
-.mail {
-  @extend %icon;
-
-  &::before {
-    content: "\e158";
-  }
-}
-
-.map {
-  @extend %icon;
-
-  &::before {
-    content: "\e55b";
-  }
-}
-
-.markunread {
-  @extend %icon;
-
-  &::before {
-    content: "\e159";
-  }
-}
-
-.markunread-mailbox {
-  @extend %icon;
-
-  &::before {
-    content: "\e89b";
-  }
-}
-
-.memory {
-  @extend %icon;
-
-  &::before {
-    content: "\e322";
-  }
-}
-
-.menu {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d2";
-  }
-}
-
-.merge-type {
-  @extend %icon;
-
-  &::before {
-    content: "\e252";
-  }
-}
-
-.message {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c9";
-  }
-}
-
-.mic {
-  @extend %icon;
-
-  &::before {
-    content: "\e029";
-  }
-}
-
-.mic-none {
-  @extend %icon;
-
-  &::before {
-    content: "\e02a";
-  }
-}
-
-.mic-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e02b";
-  }
-}
-
-.mms {
-  @extend %icon;
-
-  &::before {
-    content: "\e618";
-  }
-}
-
-.mode-comment {
-  @extend %icon;
-
-  &::before {
-    content: "\e253";
-  }
-}
-
-.mode-edit {
-  @extend %icon;
-
-  &::before {
-    content: "\e254";
-  }
-}
-
-.money-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e25c";
-  }
-}
-
-.monochrome-photos {
-  @extend %icon;
-
-  &::before {
-    content: "\e403";
-  }
-}
-
-.mood {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f2";
-  }
-}
-
-.mood-bad {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f3";
-  }
-}
-
-.more {
-  @extend %icon;
-
-  &::before {
-    content: "\e619";
-  }
-}
-
-.more-horiz {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d3";
-  }
-}
-
-.more-vert {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d4";
-  }
-}
-
-.mouse {
-  @extend %icon;
-
-  &::before {
-    content: "\e323";
-  }
-}
-
-.movie {
-  @extend %icon;
-
-  &::before {
-    content: "\e02c";
-  }
-}
-
-.movie-creation {
-  @extend %icon;
-
-  &::before {
-    content: "\e404";
-  }
-}
-
-.music-note {
-  @extend %icon;
-
-  &::before {
-    content: "\e405";
-  }
-}
-
-.my-location {
-  @extend %icon;
-
-  &::before {
-    content: "\e55c";
-  }
-}
-
-.nature {
-  @extend %icon;
-
-  &::before {
-    content: "\e406";
-  }
-}
-
-.nature-people {
-  @extend %icon;
-
-  &::before {
-    content: "\e407";
-  }
-}
-
-.navigate-before {
-  @extend %icon;
-
-  &::before {
-    content: "\e408";
-  }
-}
-
-.navigate-next {
-  @extend %icon;
-
-  &::before {
-    content: "\e409";
-  }
-}
-
-.navigation {
-  @extend %icon;
-
-  &::before {
-    content: "\e55d";
-  }
-}
-
-.network-cell {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b9";
-  }
-}
-
-.network-locked {
-  @extend %icon;
-
-  &::before {
-    content: "\e61a";
-  }
-}
-
-.network-wifi {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ba";
-  }
-}
-
-.new-releases {
-  @extend %icon;
-
-  &::before {
-    content: "\e031";
-  }
-}
-
-.nfc {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bb";
-  }
-}
-
-.no-sim {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cc";
-  }
-}
-
-.not-interested {
-  @extend %icon;
-
-  &::before {
-    content: "\e033";
-  }
-}
-
-.note-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e89c";
-  }
-}
-
-.notifications {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f4";
-  }
-}
-
-.notifications-active {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f7";
-  }
-}
-
-.notifications-none {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f5";
-  }
-}
-
-.notifications-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f6";
-  }
-}
-
-.notifications-paused {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f8";
-  }
-}
-
-.offline-pin {
-  @extend %icon;
-
-  &::before {
-    content: "\e90a";
-  }
-}
-
-.ondemand-video {
-  @extend %icon;
-
-  &::before {
-    content: "\e63a";
-  }
-}
-
-.open-in-browser {
-  @extend %icon;
-
-  &::before {
-    content: "\e89d";
-  }
-}
-
-.open-in-new {
-  @extend %icon;
-
-  &::before {
-    content: "\e89e";
-  }
-}
-
-.open-with {
-  @extend %icon;
-
-  &::before {
-    content: "\e89f";
-  }
-}
-
-.pages {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f9";
-  }
-}
-
-.pageview {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a0";
-  }
-}
-
-.palette {
-  @extend %icon;
-
-  &::before {
-    content: "\e40a";
-  }
-}
-
-.panorama {
-  @extend %icon;
-
-  &::before {
-    content: "\e40b";
-  }
-}
-
-.panorama-fish-eye {
-  @extend %icon;
-
-  &::before {
-    content: "\e40c";
-  }
-}
-
-.panorama-horizontal {
-  @extend %icon;
-
-  &::before {
-    content: "\e40d";
-  }
-}
-
-.panorama-vertical {
-  @extend %icon;
-
-  &::before {
-    content: "\e40e";
-  }
-}
-
-.panorama-wide-angle {
-  @extend %icon;
-
-  &::before {
-    content: "\e40f";
-  }
-}
-
-.party-mode {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fa";
-  }
-}
-
-.pause {
-  @extend %icon;
-
-  &::before {
-    content: "\e034";
-  }
-}
-
-.pause-circle-filled {
-  @extend %icon;
-
-  &::before {
-    content: "\e035";
-  }
-}
-
-.pause-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e036";
-  }
-}
-
-.payment {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a1";
-  }
-}
-
-.people {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fb";
-  }
-}
-
-.people-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fc";
-  }
-}
-
-.perm-camera-mic {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a2";
-  }
-}
-
-.perm-contact-calendar {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a3";
-  }
-}
-
-.perm-data-setting {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a4";
-  }
-}
-
-.perm-device-information {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a5";
-  }
-}
-
-.perm-identity {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a6";
-  }
-}
-
-.perm-media {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a7";
-  }
-}
-
-.perm-phone-msg {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a8";
-  }
-}
-
-.perm-scan-wifi {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a9";
-  }
-}
-
-.person {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fd";
-  }
-}
-
-.person-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fe";
-  }
-}
-
-.person-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e7ff";
-  }
-}
-
-.person-pin {
-  @extend %icon;
-
-  &::before {
-    content: "\e55a";
-  }
-}
-
-.personal-video {
-  @extend %icon;
-
-  &::before {
-    content: "\e63b";
-  }
-}
-
-.phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cd";
-  }
-}
-
-.phone-android {
-  @extend %icon;
-
-  &::before {
-    content: "\e324";
-  }
-}
-
-.phone-bluetooth-speaker {
-  @extend %icon;
-
-  &::before {
-    content: "\e61b";
-  }
-}
-
-.phone-forwarded {
-  @extend %icon;
-
-  &::before {
-    content: "\e61c";
-  }
-}
-
-.phone-in-talk {
-  @extend %icon;
-
-  &::before {
-    content: "\e61d";
-  }
-}
-
-.phone-iphone {
-  @extend %icon;
-
-  &::before {
-    content: "\e325";
-  }
-}
-
-.phone-locked {
-  @extend %icon;
-
-  &::before {
-    content: "\e61e";
-  }
-}
-
-.phone-missed {
-  @extend %icon;
-
-  &::before {
-    content: "\e61f";
-  }
-}
-
-.phone-paused {
-  @extend %icon;
-
-  &::before {
-    content: "\e620";
-  }
-}
-
-.phonelink {
-  @extend %icon;
-
-  &::before {
-    content: "\e326";
-  }
-}
-
-.phonelink-erase {
-  @extend %icon;
-
-  &::before {
-    content: "\e0db";
-  }
-}
-
-.phonelink-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e0dc";
-  }
-}
-
-.phonelink-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e327";
-  }
-}
-
-.phonelink-ring {
-  @extend %icon;
-
-  &::before {
-    content: "\e0dd";
-  }
-}
-
-.phonelink-setup {
-  @extend %icon;
-
-  &::before {
-    content: "\e0de";
-  }
-}
-
-.photo {
-  @extend %icon;
-
-  &::before {
-    content: "\e410";
-  }
-}
-
-.photo-album {
-  @extend %icon;
-
-  &::before {
-    content: "\e411";
-  }
-}
-
-.photo-camera {
-  @extend %icon;
-
-  &::before {
-    content: "\e412";
-  }
-}
-
-.photo-library {
-  @extend %icon;
-
-  &::before {
-    content: "\e413";
-  }
-}
-
-.photo-size-select-actual {
-  @extend %icon;
-
-  &::before {
-    content: "\e432";
-  }
-}
-
-.photo-size-select-large {
-  @extend %icon;
-
-  &::before {
-    content: "\e433";
-  }
-}
-
-.photo-size-select-small {
-  @extend %icon;
-
-  &::before {
-    content: "\e434";
-  }
-}
-
-.picture-as-pdf {
-  @extend %icon;
-
-  &::before {
-    content: "\e415";
-  }
-}
-
-.picture-in-picture {
-  @extend %icon;
-
-  &::before {
-    content: "\e8aa";
-  }
-}
-
-.pin-drop {
-  @extend %icon;
-
-  &::before {
-    content: "\e55e";
-  }
-}
-
-.place {
-  @extend %icon;
-
-  &::before {
-    content: "\e55f";
-  }
-}
-
-.play-arrow {
-  @extend %icon;
-
-  &::before {
-    content: "\e037";
-  }
-}
-
-.play-circle-filled {
-  @extend %icon;
-
-  &::before {
-    content: "\e038";
-  }
-}
-
-.play-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e039";
-  }
-}
-
-.play-for-work {
-  @extend %icon;
-
-  &::before {
-    content: "\e906";
-  }
-}
-
-.playlist-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e03b";
-  }
-}
-
-.plus-one {
-  @extend %icon;
-
-  &::before {
-    content: "\e800";
-  }
-}
-
-.poll {
-  @extend %icon;
-
-  &::before {
-    content: "\e801";
-  }
-}
-
-.polymer {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ab";
-  }
-}
-
-.portable-wifi-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e0ce";
-  }
-}
-
-.portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e416";
-  }
-}
-
-.power {
-  @extend %icon;
-
-  &::before {
-    content: "\e63c";
-  }
-}
-
-.power-input {
-  @extend %icon;
-
-  &::before {
-    content: "\e336";
-  }
-}
-
-.power-settings-new {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ac";
-  }
-}
-
-.present-to-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e0df";
-  }
-}
-
-.print {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ad";
-  }
-}
-
-.public {
-  @extend %icon;
-
-  &::before {
-    content: "\e80b";
-  }
-}
-
-.publish {
-  @extend %icon;
-
-  &::before {
-    content: "\e255";
-  }
-}
-
-.query-builder {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ae";
-  }
-}
-
-.question-answer {
-  @extend %icon;
-
-  &::before {
-    content: "\e8af";
-  }
-}
-
-.queue {
-  @extend %icon;
-
-  &::before {
-    content: "\e03c";
-  }
-}
-
-.queue-music {
-  @extend %icon;
-
-  &::before {
-    content: "\e03d";
-  }
-}
-
-.radio {
-  @extend %icon;
-
-  &::before {
-    content: "\e03e";
-  }
-}
-
-.radio-button-checked {
-  @extend %icon;
-
-  &::before {
-    content: "\e837";
-  }
-}
-
-.radio-button-unchecked {
-  @extend %icon;
-
-  &::before {
-    content: "\e836";
-  }
-}
-
-.rate-review {
-  @extend %icon;
-
-  &::before {
-    content: "\e560";
-  }
-}
-
-.receipt {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b0";
-  }
-}
-
-.recent-actors {
-  @extend %icon;
-
-  &::before {
-    content: "\e03f";
-  }
-}
-
-.redeem {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b1";
-  }
-}
-
-.redo {
-  @extend %icon;
-
-  &::before {
-    content: "\e15a";
-  }
-}
-
-.refresh {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d5";
-  }
-}
-
-.remove {
-  @extend %icon;
-
-  &::before {
-    content: "\e15b";
-  }
-}
-
-.remove-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e15c";
-  }
-}
-
-.remove-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e15d";
-  }
-}
-
-.remove-red-eye {
-  @extend %icon;
-
-  &::before {
-    content: "\e417";
-  }
-}
-
-.reorder {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fe";
-  }
-}
-
-.repeat {
-  @extend %icon;
-
-  &::before {
-    content: "\e040";
-  }
-}
-
-.repeat-one {
-  @extend %icon;
-
-  &::before {
-    content: "\e041";
-  }
-}
-
-.replay {
-  @extend %icon;
-
-  &::before {
-    content: "\e042";
-  }
-}
-
-.replay-10 {
-  @extend %icon;
-
-  &::before {
-    content: "\e059";
-  }
-}
-
-.replay-30 {
-  @extend %icon;
-
-  &::before {
-    content: "\e05a";
-  }
-}
-
-.replay-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e05b";
-  }
-}
-
-.reply {
-  @extend %icon;
-
-  &::before {
-    content: "\e15e";
-  }
-}
-
-.reply-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e15f";
-  }
-}
-
-.report {
-  @extend %icon;
-
-  &::before {
-    content: "\e160";
-  }
-}
-
-.report-problem {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b2";
-  }
-}
-
-.restaurant-menu {
-  @extend %icon;
-
-  &::before {
-    content: "\e561";
-  }
-}
-
-.restore {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b3";
-  }
-}
-
-.ring-volume {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d1";
-  }
-}
-
-.room {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b4";
-  }
-}
-
-.rotate-90-degrees-ccw {
-  @extend %icon;
-
-  &::before {
-    content: "\e418";
-  }
-}
-
-.rotate-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e419";
-  }
-}
-
-.rotate-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e41a";
-  }
-}
-
-.router {
-  @extend %icon;
-
-  &::before {
-    content: "\e328";
-  }
-}
-
-.satellite {
-  @extend %icon;
-
-  &::before {
-    content: "\e562";
-  }
-}
-
-.save {
-  @extend %icon;
-
-  &::before {
-    content: "\e161";
-  }
-}
-
-.scanner {
-  @extend %icon;
-
-  &::before {
-    content: "\e329";
-  }
-}
-
-.schedule {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b5";
-  }
-}
-
-.school {
-  @extend %icon;
-
-  &::before {
-    content: "\e80c";
-  }
-}
-
-.screen-lock-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e1be";
-  }
-}
-
-.screen-lock-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bf";
-  }
-}
-
-.screen-lock-rotation {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c0";
-  }
-}
-
-.screen-rotation {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c1";
-  }
-}
-
-.sd-card {
-  @extend %icon;
-
-  &::before {
-    content: "\e623";
-  }
-}
-
-.sd-storage {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c2";
-  }
-}
-
-.search {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b6";
-  }
-}
-
-.security {
-  @extend %icon;
-
-  &::before {
-    content: "\e32a";
-  }
-}
-
-.select-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e162";
-  }
-}
-
-.send {
-  @extend %icon;
-
-  &::before {
-    content: "\e163";
-  }
-}
-
-.settings {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b8";
-  }
-}
-
-.settings-applications {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b9";
-  }
-}
-
-.settings-backup-restore {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ba";
-  }
-}
-
-.settings-bluetooth {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bb";
-  }
-}
-
-.settings-brightness {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bd";
-  }
-}
-
-.settings-cell {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bc";
-  }
-}
-
-.settings-ethernet {
-  @extend %icon;
-
-  &::before {
-    content: "\e8be";
-  }
-}
-
-.settings-input-antenna {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bf";
-  }
-}
-
-.settings-input-component {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c0";
-  }
-}
-
-.settings-input-composite {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c1";
-  }
-}
-
-.settings-input-hdmi {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c2";
-  }
-}
-
-.settings-input-svideo {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c3";
-  }
-}
-
-.settings-overscan {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c4";
-  }
-}
-
-.settings-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c5";
-  }
-}
-
-.settings-power {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c6";
-  }
-}
-
-.settings-remote {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c7";
-  }
-}
-
-.settings-system-daydream {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c3";
-  }
-}
-
-.settings-voice {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c8";
-  }
-}
-
-.share {
-  @extend %icon;
-
-  &::before {
-    content: "\e80d";
-  }
-}
-
-.shop {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c9";
-  }
-}
-
-.shop-two {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ca";
-  }
-}
-
-.shopping-basket {
-  @extend %icon;
-
-  &::before {
-    content: "\e8cb";
-  }
-}
-
-.shopping-cart {
-  @extend %icon;
-
-  &::before {
-    content: "\e8cc";
-  }
-}
-
-.shuffle {
-  @extend %icon;
-
-  &::before {
-    content: "\e043";
-  }
-}
-
-.signal-cellular-4-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c8";
-  }
-}
-
-.signal-cellular-connected-no-internet-4-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e1cd";
-  }
-}
-
-.signal-cellular-no-sim {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ce";
-  }
-}
-
-.signal-cellular-null {
-  @extend %icon;
-
-  &::before {
-    content: "\e1cf";
-  }
-}
-
-.signal-cellular-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e1d0";
-  }
-}
-
-.signal-wifi-4-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e1d8";
-  }
-}
-
-.signal-wifi-4-bar-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e1d9";
-  }
-}
-
-.signal-wifi-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e1da";
-  }
-}
-
-.sim-card {
-  @extend %icon;
-
-  &::before {
-    content: "\e32b";
-  }
-}
-
-.sim-card-alert {
-  @extend %icon;
-
-  &::before {
-    content: "\e624";
-  }
-}
-
-.skip-next {
-  @extend %icon;
-
-  &::before {
-    content: "\e044";
-  }
-}
-
-.skip-previous {
-  @extend %icon;
-
-  &::before {
-    content: "\e045";
-  }
-}
-
-.slideshow {
-  @extend %icon;
-
-  &::before {
-    content: "\e41b";
-  }
-}
-
-.smartphone {
-  @extend %icon;
-
-  &::before {
-    content: "\e32c";
-  }
-}
-
-.sms {
-  @extend %icon;
-
-  &::before {
-    content: "\e625";
-  }
-}
-
-.sms-failed {
-  @extend %icon;
-
-  &::before {
-    content: "\e626";
-  }
-}
-
-.snooze {
-  @extend %icon;
-
-  &::before {
-    content: "\e046";
-  }
-}
-
-.sort {
-  @extend %icon;
-
-  &::before {
-    content: "\e164";
-  }
-}
-
-.sort-by-alpha {
-  @extend %icon;
-
-  &::before {
-    content: "\e053";
-  }
-}
-
-.space-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e256";
-  }
-}
-
-.speaker {
-  @extend %icon;
-
-  &::before {
-    content: "\e32d";
-  }
-}
-
-.speaker-group {
-  @extend %icon;
-
-  &::before {
-    content: "\e32e";
-  }
-}
-
-.speaker-notes {
-  @extend %icon;
-
-  &::before {
-    content: "\e8cd";
-  }
-}
-
-.speaker-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d2";
-  }
-}
-
-.spellcheck {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ce";
-  }
-}
-
-.star {
-  @extend %icon;
-
-  &::before {
-    content: "\e838";
-  }
-}
-
-.star-border {
-  @extend %icon;
-
-  &::before {
-    content: "\e83a";
-  }
-}
-
-.star-half {
-  @extend %icon;
-
-  &::before {
-    content: "\e839";
-  }
-}
-
-.stars {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d0";
-  }
-}
-
-.stay-current-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d3";
-  }
-}
-
-.stay-current-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d4";
-  }
-}
-
-.stay-primary-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d5";
-  }
-}
-
-.stay-primary-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d6";
-  }
-}
-
-.stop {
-  @extend %icon;
-
-  &::before {
-    content: "\e047";
-  }
-}
-
-.storage {
-  @extend %icon;
-
-  &::before {
-    content: "\e1db";
-  }
-}
-
-.store {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d1";
-  }
-}
-
-.store-mall-directory {
-  @extend %icon;
-
-  &::before {
-    content: "\e563";
-  }
-}
-
-.straighten {
-  @extend %icon;
-
-  &::before {
-    content: "\e41c";
-  }
-}
-
-.strikethrough-s {
-  @extend %icon;
-
-  &::before {
-    content: "\e257";
-  }
-}
-
-.style {
-  @extend %icon;
-
-  &::before {
-    content: "\e41d";
-  }
-}
-
-.subject {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d2";
-  }
-}
-
-.subtitles {
-  @extend %icon;
-
-  &::before {
-    content: "\e048";
-  }
-}
-
-.supervisor-account {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d3";
-  }
-}
-
-.surround-sound {
-  @extend %icon;
-
-  &::before {
-    content: "\e049";
-  }
-}
-
-.swap-calls {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d7";
-  }
-}
-
-.swap-horiz {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d4";
-  }
-}
-
-.swap-vert {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d5";
-  }
-}
-
-.swap-vertical-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d6";
-  }
-}
-
-.switch-camera {
-  @extend %icon;
-
-  &::before {
-    content: "\e41e";
-  }
-}
-
-.switch-video {
-  @extend %icon;
-
-  &::before {
-    content: "\e41f";
-  }
-}
-
-.sync {
-  @extend %icon;
-
-  &::before {
-    content: "\e627";
-  }
-}
-
-.sync-disabled {
-  @extend %icon;
-
-  &::before {
-    content: "\e628";
-  }
-}
-
-.sync-problem {
-  @extend %icon;
-
-  &::before {
-    content: "\e629";
-  }
-}
-
-.system-update {
-  @extend %icon;
-
-  &::before {
-    content: "\e62a";
-  }
-}
-
-.system-update-alt {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d7";
-  }
-}
-
-.tab {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d8";
-  }
-}
-
-.tab-unselected {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d9";
-  }
-}
-
-.tablet {
-  @extend %icon;
-
-  &::before {
-    content: "\e32f";
-  }
-}
-
-.tablet-android {
-  @extend %icon;
-
-  &::before {
-    content: "\e330";
-  }
-}
-
-.tablet-mac {
-  @extend %icon;
-
-  &::before {
-    content: "\e331";
-  }
-}
-
-.tag-faces {
-  @extend %icon;
-
-  &::before {
-    content: "\e420";
-  }
-}
-
-.tap-and-play {
-  @extend %icon;
-
-  &::before {
-    content: "\e62b";
-  }
-}
-
-.terrain {
-  @extend %icon;
-
-  &::before {
-    content: "\e564";
-  }
-}
-
-.text-format {
-  @extend %icon;
-
-  &::before {
-    content: "\e165";
-  }
-}
-
-.textsms {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d8";
-  }
-}
-
-.texture {
-  @extend %icon;
-
-  &::before {
-    content: "\e421";
-  }
-}
-
-.theaters {
-  @extend %icon;
-
-  &::before {
-    content: "\e8da";
-  }
-}
-
-.thumb-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e8db";
-  }
-}
-
-.thumb-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e8dc";
-  }
-}
-
-.thumbs-up-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e8dd";
-  }
-}
-
-.time-to-leave {
-  @extend %icon;
-
-  &::before {
-    content: "\e62c";
-  }
-}
-
-.timelapse {
-  @extend %icon;
-
-  &::before {
-    content: "\e422";
-  }
-}
-
-.timer {
-  @extend %icon;
-
-  &::before {
-    content: "\e425";
-  }
-}
-
-.timer-10 {
-  @extend %icon;
-
-  &::before {
-    content: "\e423";
-  }
-}
-
-.timer-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e424";
-  }
-}
-
-.timer-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e426";
-  }
-}
-
-.toc {
-  @extend %icon;
-
-  &::before {
-    content: "\e8de";
-  }
-}
-
-.today {
-  @extend %icon;
-
-  &::before {
-    content: "\e8df";
-  }
-}
-
-.toll {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e0";
-  }
-}
-
-.tonality {
-  @extend %icon;
-
-  &::before {
-    content: "\e427";
-  }
-}
-
-.toys {
-  @extend %icon;
-
-  &::before {
-    content: "\e332";
-  }
-}
-
-.track-changes {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e1";
-  }
-}
-
-.traffic {
-  @extend %icon;
-
-  &::before {
-    content: "\e565";
-  }
-}
-
-.transform {
-  @extend %icon;
-
-  &::before {
-    content: "\e428";
-  }
-}
-
-.translate {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e2";
-  }
-}
-
-.trending-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e3";
-  }
-}
-
-.trending-flat {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e4";
-  }
-}
-
-.trending-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e5";
-  }
-}
-
-.tune {
-  @extend %icon;
-
-  &::before {
-    content: "\e429";
-  }
-}
-
-.turned-in {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e6";
-  }
-}
-
-.turned-in-not {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e7";
-  }
-}
-
-.tv {
-  @extend %icon;
-
-  &::before {
-    content: "\e333";
-  }
-}
-
-.undo {
-  @extend %icon;
-
-  &::before {
-    content: "\e166";
-  }
-}
-
-.unfold-less {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d6";
-  }
-}
-
-.unfold-more {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d7";
-  }
-}
-
-.usb {
-  @extend %icon;
-
-  &::before {
-    content: "\e1e0";
-  }
-}
-
-.verified-user {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e8";
-  }
-}
-
-.vertical-align-bottom {
-  @extend %icon;
-
-  &::before {
-    content: "\e258";
-  }
-}
-
-.vertical-align-center {
-  @extend %icon;
-
-  &::before {
-    content: "\e259";
-  }
-}
-
-.vertical-align-top {
-  @extend %icon;
-
-  &::before {
-    content: "\e25a";
-  }
-}
-
-.vibration {
-  @extend %icon;
-
-  &::before {
-    content: "\e62d";
-  }
-}
-
-.video-library {
-  @extend %icon;
-
-  &::before {
-    content: "\e04a";
-  }
-}
-
-.videocam {
-  @extend %icon;
-
-  &::before {
-    content: "\e04b";
-  }
-}
-
-.videocam-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e04c";
-  }
-}
-
-.view-agenda {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e9";
-  }
-}
-
-.view-array {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ea";
-  }
-}
-
-.view-carousel {
-  @extend %icon;
-
-  &::before {
-    content: "\e8eb";
-  }
-}
-
-.view-column {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ec";
-  }
-}
-
-.view-comfy {
-  @extend %icon;
-
-  &::before {
-    content: "\e42a";
-  }
-}
-
-.view-compact {
-  @extend %icon;
-
-  &::before {
-    content: "\e42b";
-  }
-}
-
-.view-day {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ed";
-  }
-}
-
-.view-headline {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ee";
-  }
-}
-
-.view-list {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ef";
-  }
-}
-
-.view-module {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f0";
-  }
-}
-
-.view-quilt {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f1";
-  }
-}
-
-.view-stream {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f2";
-  }
-}
-
-.view-week {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f3";
-  }
-}
-
-.vignette {
-  @extend %icon;
-
-  &::before {
-    content: "\e435";
-  }
-}
-
-.visibility {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f4";
-  }
-}
-
-.visibility-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f5";
-  }
-}
-
-.voice-chat {
-  @extend %icon;
-
-  &::before {
-    content: "\e62e";
-  }
-}
-
-.voicemail {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d9";
-  }
-}
-
-.volume-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e04d";
-  }
-}
-
-.volume-mute {
-  @extend %icon;
-
-  &::before {
-    content: "\e04e";
-  }
-}
-
-.volume-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e04f";
-  }
-}
-
-.volume-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e050";
-  }
-}
-
-.vpn-key {
-  @extend %icon;
-
-  &::before {
-    content: "\e0da";
-  }
-}
-
-.vpn-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e62f";
-  }
-}
-
-.wallpaper {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bc";
-  }
-}
-
-.warning {
-  @extend %icon;
-
-  &::before {
-    content: "\e002";
-  }
-}
-
-.watch {
-  @extend %icon;
-
-  &::before {
-    content: "\e334";
-  }
-}
-
-.wb-auto {
-  @extend %icon;
-
-  &::before {
-    content: "\e42c";
-  }
-}
-
-.wb-cloudy {
-  @extend %icon;
-
-  &::before {
-    content: "\e42d";
-  }
-}
-
-.wb-incandescent {
-  @extend %icon;
-
-  &::before {
-    content: "\e42e";
-  }
-}
-
-.wb-iridescent {
-  @extend %icon;
-
-  &::before {
-    content: "\e436";
-  }
-}
-
-.wb-sunny {
-  @extend %icon;
-
-  &::before {
-    content: "\e430";
-  }
-}
-
-.wc {
-  @extend %icon;
-
-  &::before {
-    content: "\e63d";
-  }
-}
-
-.web {
-  @extend %icon;
-
-  &::before {
-    content: "\e051";
-  }
-}
-
-.whatshot {
-  @extend %icon;
-
-  &::before {
-    content: "\e80e";
-  }
-}
-
-.widgets {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bd";
-  }
-}
-
-.wifi {
-  @extend %icon;
-
-  &::before {
-    content: "\e63e";
-  }
-}
-
-.wifi-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e1e1";
-  }
-}
-
-.wifi-tethering {
-  @extend %icon;
-
-  &::before {
-    content: "\e1e2";
-  }
-}
-
-.work {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f9";
-  }
-}
-
-.wrap-text {
-  @extend %icon;
-
-  &::before {
-    content: "\e25b";
-  }
-}
-
-.youtube-searched-for {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fa";
-  }
-}
-
-.zoom-in {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ff";
-  }
-}
-
-.zoom-out {
-  @extend %icon;
-
-  &::before {
-    content: "\e900";
-  }
-}
diff --git a/components/form/Form.js b/components/form/Form.js
new file mode 100644
index 000000000..3f313399c
--- /dev/null
+++ b/components/form/Form.js
@@ -0,0 +1,86 @@
+import React, { Component, PropTypes } from 'react';
+import InjectAutocomplete from '../autocomplete/Autocomplete.js';
+import InjectButton from '../button/Button.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import InjectDatePicker from '../date_picker/DatePicker.js';
+import InjectDropdown from '../dropdown/Dropdown.js';
+import InjectInput from '../input/Input.js';
+import InjectRadioGroup from '../radio/RadioGroup.js';
+import InjectSlider from '../slider/Slider.js';
+import InjectSwitch from '../switch/Switch.js';
+import InjectTimePicker from '../time_picker/TimePicker.js';
+
+const factory = (
+    Autocomplete, Button, Checkbox, DatePicker, Dropdown,
+    Input, RadioGroup, Slider, Switch, TimePicker
+  ) => {
+
+  const COMPONENTS = {
+    'autocomplete': Autocomplete,
+    'button': Button,
+    'checkbox': Checkbox,
+    'datepicker': DatePicker,
+    'dropdown': Dropdown,
+    'input': Input,
+    'radioGroup': RadioGroup,
+    'slider': Slider,
+    'switch': Switch,
+    'timepicker': TimePicker
+  };
+
+  class Form extends Component {
+    static propTypes = {
+      attributes: PropTypes.array,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      model: PropTypes.object,
+      onChange: PropTypes.func,
+      onError: PropTypes.func,
+      onSubmit: PropTypes.func,
+      onValid: PropTypes.func,
+      storage: PropTypes.string
+    };
+
+    static defaultProps = {
+      attributes: [],
+      className: ''
+    };
+
+    onSubmit = (event) => {
+      event.preventDefault();
+      if (this.props.onSubmit) this.props.onSubmit(event);
+    };
+
+    onChange = (field, value, event) => {
+      if (this.props.onChange) this.props.onChange(field, value, event);
+    };
+
+    renderFields () {
+      return Object.keys(this.props.model).map((field, index) => {
+        const properties = this.props.model[field];
+        const Field = COMPONENTS[properties.kind.toLowerCase()];
+        return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
+      });
+    }
+
+    render () {
+      return (
+        <form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}>
+          {this.renderFields()}
+          {this.props.children}
+        </form>
+      );
+    }
+  }
+
+  return Form;
+};
+
+const Form = factory(
+  InjectAutocomplete, InjectButton, InjectCheckbox, InjectDatePicker, InjectDropdown,
+  InjectInput, InjectRadioGroup, InjectSlider, InjectSwitch, InjectTimePicker
+);
+
+export default Form;
+export { factory as formFactory };
+export { Form };
diff --git a/components/form/index.js b/components/form/index.js
new file mode 100644
index 000000000..7ae8c7f46
--- /dev/null
+++ b/components/form/index.js
@@ -0,0 +1,19 @@
+import { formFactory } from './Form.js';
+import Autocomplete from '../autocomplete';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import DatePicker from '../date_picker';
+import Dropdown from '../dropdown';
+import Input from '../input';
+import RadioGroup from '../radio';
+import Slider from '../slider';
+import Switch from '../switch';
+import TimePicker from '../time_picker';
+
+const ThemedForm = formFactory(
+  Autocomplete, Button, Checkbox, DatePicker, Dropdown,
+  Input, RadioGroup, Slider, Switch, TimePicker
+);
+
+export default ThemedForm;
+export { ThemedForm as Form };
diff --git a/components/form/index.jsx b/components/form/index.jsx
deleted file mode 100644
index 1de528dcc..000000000
--- a/components/form/index.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react';
-import style from './style';
-import Autocomplete from '../autocomplete';
-import Button from '../button';
-import Checkbox from '../checkbox';
-import DatePicker from '../date_picker';
-import Dropdown from '../dropdown';
-import Input from '../input';
-import RadioGroup from '../radio/radio_group';
-import Slider from '../slider';
-import Switch from '../switch';
-import TimePicker from '../time_picker';
-
-class Form extends React.Component {
-  static propTypes = {
-    attributes: React.PropTypes.array,
-    className: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    onError: React.PropTypes.func,
-    onSubmit: React.PropTypes.func,
-    onValid: React.PropTypes.func,
-    storage: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    attributes: [],
-    className: ''
-  };
-
-  state = {
-    attributes: this.storage(this.props)
-  };
-
-  componentWillReceiveProps (next_props) {
-    if (next_props.attributes) {
-      const attributes = this.storage(next_props);
-      this.setState({attributes});
-      this.setValue(attributes.map((item) => { return item; }));
-    }
-  }
-
-  onSubmit = (event) => {
-    event.preventDefault();
-    if (this.props.onSubmit) {
-      this.props.onSubmit(event, this);
-    }
-  };
-
-  onChange = (event) => {
-    let is_valid = true;
-    const value = this.getValue();
-    for (const attr of this.state.attributes) {
-      if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
-        is_valid = false;
-        if (this.refs[attr.ref].setError) this.refs[attr.ref].setError('Requited field');
-        break;
-      }
-    }
-
-    if (this.props.onChange) this.props.onChange(event, this);
-    if (this.props.storage) this.storage(this.props, value);
-
-    if (is_valid) {
-      if (this.refs.submit) this.refs.submit.getDOMNode().removeAttribute('disabled');
-      if (this.props.onValid) this.props.onValid(event, this);
-    } else {
-      if (this.refs.submit) this.refs.submit.getDOMNode().setAttribute('disabled', true);
-      if (this.props.onError) this.props.onError(event, this);
-    }
-  };
-
-  render () {
-    const className = `${style.root} ${this.props.className}`;
-    const attributes = this.state.attributes.map((attribute, index) => {
-      if (attribute.type === 'autocomplete') {
-        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
-      } else if (attribute.type === 'checkbox') {
-        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'date_picker') {
-        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'dropdown') {
-        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'radio_group') {
-        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'slider') {
-        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'switch') {
-        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'time_picker') {
-        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else {
-        return <Input key={index} {...attribute} />;
-      }
-    });
-
-    return (
-      <form
-        data-react-toolbox='form'
-        className={className}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-      >
-        { attributes }
-        { this.props.children }
-      </form>
-    );
-  }
-
-  storage (props, value) {
-    const key = `react-toolbox-form-${props.storage}`;
-    if (value) {
-      const store = {};
-      for (const attr of props.attributes) {
-        if (attr.storage) store[attr.ref] = value[attr.ref];
-      }
-      window.localStorage.setItem(key, JSON.stringify(store));
-    } else if (props.storage) {
-      const store = JSON.parse(window.localStorage.getItem(key) || {});
-      for (const input of props.attributes) {
-        if (store && store[input.ref]) {
-          input.value = store[input.ref];
-        }
-      }
-    }
-
-    return props.attributes;
-  }
-
-  getValue () {
-    const value = {};
-    for (const ref of Object.keys(this.refs)) {
-      const el = this.refs[ref];
-      if (el.getValue) {
-        if (ref.indexOf('.') === -1) {
-          value[ref] = el.getValue();
-        } else {
-          let parent = value;
-          const hierarchy = ref.split('.');
-          hierarchy.forEach((attr, index) => {
-            if (index === hierarchy.length - 1) {
-              parent[attr] = el.getValue();
-            } else {
-              parent[attr] = parent[attr] || {};
-              parent = parent[attr];
-            }
-          });
-        }
-      }
-    }
-
-    return value;
-  }
-
-  setValue (data = {}) {
-    for (const field of data) {
-      if (this.refs[field.ref].setValue) {
-        this.refs[field.ref].setValue(field.value);
-      }
-    }
-  }
-}
-
-export default Form;
diff --git a/components/form/readme.md b/components/form/readme.md
index e23ab646e..a26b12389 100644
--- a/components/form/readme.md
+++ b/components/form/readme.md
@@ -22,19 +22,3 @@ var fields : [
 | **onSubmit**      | Function      |                 | Dispatch callback when user clicks on submit <Button/> |
 | **onValid**       | Function      |                 | Dispatch callback when all required fields are full-filled.|
 | **Storage**       | String        |                 | Sets a localStorage key for save all current field values.|
-
-## Methods
-
-#### getValue
-Returns the value of the form.
-
-```
-form_instance.getValue();
-```
-
-#### setValue
-Sets the value of the form component.
-
-```
-form_instance.setValue(newValue);
-```
diff --git a/components/form/style.scss b/components/form/style.scss
deleted file mode 100644
index c099dd316..000000000
--- a/components/form/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.root {
-  & > :last-child {
-    margin-bottom: 0 !important;
-  }
-}
diff --git a/components/hoc/ActivableRenderer.js b/components/hoc/ActivableRenderer.js
new file mode 100644
index 000000000..d7ac8ad12
--- /dev/null
+++ b/components/hoc/ActivableRenderer.js
@@ -0,0 +1,55 @@
+import React, { Component, PropTypes } from 'react';
+
+const ActivableRendererFactory = (options = {delay: 500}) =>
+  ActivableComponent => class ActivableRenderer extends Component {
+    static propTypes = {
+      active: PropTypes.bool.isRequired,
+      children: PropTypes.any,
+      delay: PropTypes.number
+    };
+
+    static defaultProps = {
+      delay: options.delay
+    }
+
+    state = {
+      active: this.props.active,
+      rendered: this.props.active
+    };
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.active && !this.props.active) this.renderAndActivate();
+      if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
+    }
+
+    componentWillUnmount () {
+      clearTimeout(this.activateTimeout);
+      clearTimeout(this.unrenderTimeout);
+    }
+
+    renderAndActivate () {
+      if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
+      this.setState({ rendered: true, active: false }, () => {
+        this.activateTimeout = setTimeout(() => this.setState({ active: true }), 20);
+      });
+    }
+
+    deactivateAndUnrender () {
+      this.setState({ rendered: true, active: false }, () => {
+        this.unrenderTimeout = setTimeout(() => {
+          this.setState({ rendered: false });
+          this.unrenderTimeout = null;
+        }, this.props.delay);
+      });
+    }
+
+    render () {
+      const { delay, ...others } = this.props; // eslint-disable-line no-unused-vars
+      const { active, rendered } = this.state;
+      return rendered
+        ? <ActivableComponent {...others} active={active} />
+        : null;
+    }
+  };
+
+export default ActivableRendererFactory;
diff --git a/components/hoc/Portal.js b/components/hoc/Portal.js
new file mode 100644
index 000000000..015dcba8d
--- /dev/null
+++ b/components/hoc/Portal.js
@@ -0,0 +1,106 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+
+class Portal extends Component {
+  static propTypes = {
+    children: PropTypes.any,
+    container: PropTypes.any,
+    lockBody: PropTypes.bool
+  }
+
+  static defaultProps = {
+    lockBody: true
+  }
+
+  componentDidMount () {
+    this._renderOverlay();
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this._overlayTarget && nextProps.container !== this.props.container) {
+      this._portalContainerNode.removeChild(this._overlayTarget);
+      this._portalContainerNode = getContainer(nextProps.container);
+      this._portalContainerNode.appendChild(this._overlayTarget);
+    }
+  }
+
+  componentDidUpdate () {
+    this._renderOverlay();
+  }
+
+  componentWillUnmount () {
+    this._unrenderOverlay();
+    this._unmountOverlayTarget();
+  }
+
+  _mountOverlayTarget () {
+    if (!this._overlayTarget) {
+      this._overlayTarget = document.createElement('div');
+      this._portalContainerNode = getContainer(this.props.container);
+      this._portalContainerNode.appendChild(this._overlayTarget);
+    }
+  }
+
+  _unmountOverlayTarget () {
+    if (this._overlayTarget) {
+      this._portalContainerNode.removeChild(this._overlayTarget);
+      this._overlayTarget = null;
+    }
+    this._portalContainerNode = null;
+  }
+
+  _renderOverlay () {
+    const overlay = !this.props.children
+      ? null
+      : React.Children.only(this.props.children);
+
+    if (overlay !== null) {
+      this._mountOverlayTarget();
+      this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
+        this, overlay, this._overlayTarget
+      );
+    } else {
+      this._unrenderOverlay();
+      this._unmountOverlayTarget();
+    }
+  }
+
+  _unrenderOverlay () {
+    if (this._overlayTarget) {
+      ReactDOM.unmountComponentAtNode(this._overlayTarget);
+      this._overlayInstance = null;
+    }
+  }
+
+  getMountNode () {
+    return this._overlayTarget;
+  }
+
+  getOverlayDOMNode () {
+    if (!this.isMounted()) {
+      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+    }
+
+    if (this._overlayInstance) {
+      if (this._overlayInstance.getWrappedDOMNode) {
+        return this._overlayInstance.getWrappedDOMNode();
+      } else {
+        return ReactDOM.findDOMNode(this._overlayInstance);
+      }
+    }
+
+    return null;
+  }
+
+  render () {
+    return null;
+  }
+
+}
+
+function getContainer (container) {
+  const _container = typeof container === 'function' ? container() : container;
+  return ReactDOM.findDOMNode(_container) || document.body;
+}
+
+export default Portal;
diff --git a/components/identifiers.js b/components/identifiers.js
new file mode 100644
index 000000000..fa5902dc6
--- /dev/null
+++ b/components/identifiers.js
@@ -0,0 +1,27 @@
+export const APP_BAR = 'RTAppBar';
+export const AUTOCOMPLETE = 'RTAutocomplete';
+export const AVATAR = 'RTAvatar';
+export const BUTTON = 'RTButton';
+export const CARD = 'RTCard';
+export const CHIP = 'RTChip';
+export const CHECKBOX = 'RTCheckbox';
+export const DATE_PICKER = 'RTDatePicker';
+export const DIALOG = 'RTDialog';
+export const DROPDOWN = 'RTDropdown';
+export const INPUT = 'RTInput';
+export const LAYOUT = 'RTLayout';
+export const LINK = 'RTLink';
+export const LIST = 'RTList';
+export const MENU = 'RTMenu';
+export const NAVIGATION = 'RTNavigation';
+export const OVERLAY = 'RTOverlay';
+export const PROGRESS_BAR = 'RTProgressBar';
+export const RADIO = 'RTRadio';
+export const RIPPLE = 'RTRipple';
+export const SLIDER = 'RTSlider';
+export const SNACKBAR = 'RTSnackbar';
+export const SWITCH = 'RTSwitch';
+export const TABLE = 'RTTable';
+export const TABS = 'RTTabs';
+export const TOOLTIP = 'RTTooltip';
+export const TIME_PICKER = 'RTTimePicker';
diff --git a/components/index.d.ts b/components/index.d.ts
new file mode 100644
index 000000000..d18ecd7b0
--- /dev/null
+++ b/components/index.d.ts
@@ -0,0 +1,56 @@
+import * as React from "react";
+export declare namespace ReactToolbox {
+  interface Props {
+    /**
+     * Set a class for the root component.
+     */
+    className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
+    key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
+    onClick?: Function;
+    /**
+     * Fires after the mouse is released from the Component.
+     */
+    onMouseUp?: Function;
+    /**
+     * Callback called when the mouse enters the Component.
+     */
+    onMouseEnter?: Function;
+    /**
+     * Callback called when the mouse leaves the Component.
+     */
+    onMouseLeave?: Function;
+    /**
+     * Callback called when the mouse press the Component.
+     */
+    onMouseDown?: Function;
+    onContextMenu?: Function;
+    onDoubleClick?: Function;
+    onDrag?: Function;
+    onDragEnd?: Function;
+    onDragEnter?: Function;
+    onDragExit?: Function;
+    onDragLeave?: Function;
+    onDragOver?: Function;
+    onDragStart?: Function;
+    onDrop?: Function;
+    onMouseMove?: Function;
+    onMouseOut?: Function;
+    onMouseOver?: Function;
+    onTouchCancel?: Function;
+    onTouchEnd?: Function;
+    onTouchMove?: Function;
+    onTouchStart?: Function;
+    /**
+     * Set inline style for the root component.
+     */
+    style?: React.CSSProperties;
+  }
+}
+
+export default ReactToolbox;
diff --git a/components/index.js b/components/index.js
index 467794ee5..4d83a958a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,43 +1,30 @@
 import './utils/polyfills'; // Import polyfills for IE11
-import App from './app';
-import AppBar from './app_bar';
-import Autocomplete from './autocomplete';
-import Button from './button';
-import Card from './card';
-import Checkbox from './checkbox';
-import DatePicker from './date_picker';
-import Dialog from './dialog';
-import Drawer from './drawer';
-import Dropdown from './dropdown';
-import FontIcon from './font_icon';
-import Form from './form';
-import Input from './input';
-import Link from './link';
-import List from './list/list';
-import ListItem from './list/item';
-import ListDivider from './list/divider';
-import ListCheckbox from './list/checkbox';
-import ListSubHeader from './list/subheader';
-import Menu from './menu/menu';
-import MenuItem from './menu/menu_item';
-import MenuDivider from './menu/menu_divider';
-import IconMenu from './menu/icon_menu';
-import Navigation from './navigation';
-import ProgressBar from './progress_bar';
-import RadioGroup from './radio/radio_group';
-import RadioButton from './radio/radio_button';
-import Ripple from './ripple';
-import Slider from './slider';
-import Snackbar from './snackbar';
-import Switch from './switch';
-import Table from './table';
-import Tabs from './tabs/tabs';
-import Tab from './tabs/tab';
-import Tooltip from './tooltip';
-import TimePicker from './time_picker';
-
-export default { App, AppBar, Autocomplete, Button, Card, Checkbox, DatePicker,
-  Dialog, Drawer, Dropdown, FontIcon, Form, Input, Link, List, ListItem,
-  ListDivider, ListCheckbox, ListSubHeader, Menu, MenuItem, MenuDivider,
-  IconMenu, Navigation, ProgressBar, RadioGroup, RadioButton, Ripple, Slider,
-  Snackbar, Switch, Table, Tabs, Tab, Tooltip, TimePicker };
+export AppBar from './app_bar';
+export Autocomplete from './autocomplete';
+export Avatar from './avatar';
+export * from './button';
+export * from './card';
+export Chip from './chip';
+export Checkbox from './checkbox';
+export DatePicker from './date_picker';
+export Dialog from './dialog';
+export Drawer from './drawer';
+export Dropdown from './dropdown';
+export FontIcon from './font_icon';
+export Form from './form';
+export Input from './input';
+export * from './layout';
+export Link from './link';
+export * from './list';
+export * from './menu';
+export Navigation from './navigation';
+export ProgressBar from './progress_bar';
+export * from './radio';
+export Ripple from './ripple';
+export Slider from './slider';
+export Snackbar from './snackbar';
+export Switch from './switch';
+export Table from './table';
+export * from './tabs';
+export Tooltip from './tooltip';
+export TimePicker from './time_picker';
diff --git a/components/input/Input.js b/components/input/Input.js
new file mode 100644
index 000000000..71d23b69b
--- /dev/null
+++ b/components/input/Input.js
@@ -0,0 +1,218 @@
+import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { INPUT } from '../identifiers.js';
+import InjectedFontIcon from '../font_icon/FontIcon.js';
+
+const factory = (FontIcon) => {
+  class Input extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.any,
+      className: React.PropTypes.string,
+      disabled: React.PropTypes.bool,
+      error: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
+      floating: React.PropTypes.bool,
+      hint: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
+      icon: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+      ]),
+      label: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
+      maxLength: React.PropTypes.number,
+      multiline: React.PropTypes.bool,
+      name: React.PropTypes.string,
+      onBlur: React.PropTypes.func,
+      onChange: React.PropTypes.func,
+      onFocus: React.PropTypes.func,
+      onKeyPress: React.PropTypes.func,
+      required: React.PropTypes.bool,
+      rows: React.PropTypes.number,
+      theme: React.PropTypes.shape({
+        bar: React.PropTypes.string,
+        counter: React.PropTypes.string,
+        disabled: React.PropTypes.string,
+        error: React.PropTypes.string,
+        errored: React.PropTypes.string,
+        hidden: React.PropTypes.string,
+        hint: React.PropTypes.string,
+        icon: React.PropTypes.string,
+        input: React.PropTypes.string,
+        inputElement: React.PropTypes.string,
+        required: React.PropTypes.string,
+        withIcon: React.PropTypes.string
+      }),
+      type: React.PropTypes.string,
+      value: React.PropTypes.any
+    };
+
+    static defaultProps = {
+      className: '',
+      hint: '',
+      disabled: false,
+      floating: true,
+      multiline: false,
+      required: false,
+      type: 'text'
+    };
+
+    componentDidMount () {
+      if (this.props.multiline) {
+        window.addEventListener('resize', this.handleAutoresize);
+        this.handleAutoresize();
+      }
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (!this.props.multiline && nextProps.multiline) {
+        window.addEventListener('resize', this.handleAutoresize);
+      } else if (this.props.multiline && !nextProps.multiline) {
+        window.removeEventListener('resize', this.handleAutoresize);
+      }
+    }
+
+    componentDidUpdate () {
+      // resize the textarea, if nessesary
+      if (this.props.multiline) this.handleAutoresize();
+    }
+
+    componentWillUnmount () {
+      if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
+    }
+
+    handleChange = (event) => {
+      const { onChange, multiline, maxLength } = this.props;
+      const valueFromEvent = event.target.value;
+
+      // Trim value to maxLength if that exists (only on multiline inputs).
+      // Note that this is still required even tho we have the onKeyPress filter
+      // because the user could paste smt in the textarea.
+      const haveToTrim = (multiline && maxLength && event.target.value.length > maxLength);
+      const value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
+
+      // propagate to to store and therefore to the input
+      if (onChange) onChange(value, event);
+    };
+
+    handleAutoresize = () => {
+      const element = this.refs.input;
+      const rows = this.props.rows;
+
+      if (typeof rows === 'number' && !isNaN(rows)) {
+        element.style.height = null;
+      } else {
+        // compute the height difference between inner height and outer height
+        const style = getComputedStyle(element, null);
+        const heightOffset = style.boxSizing === 'content-box'
+          ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
+          : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+        // resize the input to its content size
+        element.style.height = 'auto';
+        element.style.height = `${element.scrollHeight + heightOffset}px`;
+      }
+    }
+
+    handleKeyPress = (event) => {
+      // prevent insertion of more characters if we're a multiline input
+      // and maxLength exists
+      const { multiline, maxLength, onKeyPress } = this.props;
+      if (multiline && maxLength) {
+        // check if smt is selected, in which case the newly added charcter would
+        // replace the selected characters, so the length of value doesn't actually
+        // increase.
+        const isReplacing = event.target.selectionEnd - event.target.selectionStart;
+        const value = event.target.value;
+
+        if (!isReplacing && value.length === maxLength) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+
+      if (onKeyPress) onKeyPress(event);
+    };
+
+    blur () {
+      this.refs.input.blur();
+    }
+
+    focus () {
+      this.refs.input.focus();
+    }
+
+    render () {
+      const { children, disabled, error, floating, hint, icon,
+              name, label: labelText, maxLength, multiline, required,
+              theme, type, value, onKeyPress, rows = 1, ...others} = this.props;
+      const length = maxLength && value ? value.length : 0;
+      const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
+
+      const className = classnames(theme.input, {
+        [theme.disabled]: disabled,
+        [theme.errored]: error,
+        [theme.hidden]: type === 'hidden',
+        [theme.withIcon]: icon
+      }, this.props.className);
+
+      const valuePresent = value !== null
+        && value !== undefined
+        && value !== ''
+        && !(typeof value === Number && isNaN(value));
+
+      const inputElementProps = {
+        ...others,
+        className: classnames(theme.inputElement, {[theme.filled]: valuePresent}),
+        onChange: this.handleChange,
+        ref: 'input',
+        role: 'input',
+        name,
+        disabled,
+        required,
+        type,
+        value
+      };
+      if (!multiline) {
+        inputElementProps.maxLength = maxLength;
+        inputElementProps.onKeyPress = onKeyPress;
+      } else {
+        inputElementProps.rows = rows;
+        inputElementProps.onKeyPress = this.handleKeyPress;
+      }
+
+      return (
+        <div data-react-toolbox='input' className={className}>
+          {React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
+          {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
+          <span className={theme.bar} />
+          {labelText
+            ? <label className={labelClassName}>
+                {labelText}
+                {required ? <span className={theme.required}> * </span> : null}
+              </label>
+            : null}
+          {hint ? <span hidden={labelText} className={theme.hint}>{hint}</span> : null}
+          {error ? <span className={theme.error}>{error}</span> : null}
+          {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
+          {children}
+        </div>
+      );
+    }
+  }
+
+  return Input;
+};
+
+const Input = factory(InjectedFontIcon);
+export default themr(INPUT, null, { withRef: true })(Input);
+export { factory as inputFactory };
+export { Input };
diff --git a/components/input/_config.scss b/components/input/_config.scss
index a8dbeac40..9b8966456 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -1,16 +1,21 @@
-$input-padding: 2 * $unit;
-$input-field-padding: .8 * $unit;
-$input-field-font-size: 1.6 * $unit;
-$input-field-height: $input-field-padding * 2 + $input-field-font-size;
-$input-label-font-size: 1.2 * $unit;
-$input-focus-label-top: .6 * $unit;
+$input-padding: 2 * $unit !default;
+$input-field-padding: .8 * $unit !default;
+$input-field-font-size: 1.6 * $unit !default;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
+$input-label-font-size: 1.2 * $unit !default;
+$input-focus-label-top: .6 * $unit !default;
 $input-text-background-color: transparent !default;
-$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
+$input-text-label-color: rgba($color-black, 0.26) !default;
+$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
+$input-text-highlight-color: $color-primary !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
-$input-icon-font-size: 2.4 * $unit;
-$input-icon-size: 2 * $input-icon-font-size;
-$input-icon-offset: 1.6 * $unit;
+$input-text-error-color: rgb(222, 50, 38) !default;
+$input-text-required-color: rgb(222, 50, 38) !default;
+$input-underline-height:  2 * $unit !default;
+$input-icon-font-size: 2.4 * $unit !default;
+$input-icon-size: 2 * $input-icon-font-size !default;
+$input-icon-offset: 1.6 * $unit !default;
+$input-icon-right-space: 2 * $unit !default;
+$input-chevron-offset: .8 * $unit !default;
+$input-hint-opacity: 1 !default;
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
new file mode 100644
index 000000000..1eb9074c1
--- /dev/null
+++ b/components/input/index.d.ts
@@ -0,0 +1,141 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface InputTheme {
+  /**
+   * Used for the bar under the input.
+   */
+  bar?: string;
+  /**
+   * Used for the counter element.
+   */
+  counter?: string;
+  /**
+   * Added to the root class when input is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the text error.
+   */
+  error?: string;
+  /**
+   * Added to the root class when input is errored.
+   */
+  errored?: string;
+  /**
+   * Used when the input is hidden.
+   */
+  hidden?: string;
+  /**
+   * Used for the hint text.
+   */
+  hint?: string;
+  /**
+   * Used for the icon in case the input has icon.
+   */
+  icon?: string;
+  /**
+   * Used as root class for the component.
+   */
+  input?: string;
+  /**
+   * Used for the HTML input element.
+   */
+  inputElement?: string;
+  /**
+   * Used in case the input is required.
+   */
+  required?: string;
+  /**
+   * Added to the root class if the input has icon.
+   */
+  withIcon?: string;
+}
+
+export interface InputProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string | React.ReactNode;
+  /**
+   * Indicates if the label is floating in the input field or not.
+   * @default true
+   */
+  floating?: boolean;
+  /**
+   * The text string to use for hint text element.
+   */
+  hint?: string | React.ReactNode;
+  /**
+   * Name of an icon to use as a label for the input.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string | React.ReactNode;
+  /**
+   * Specifies the maximum number of characters allowed in the component
+   */
+  maxLength?: number;
+  /**
+   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+   * @default false
+   */
+  multiline?: boolean;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the component's value changes
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Callback function that is fired when a key is pressed.
+   */
+  onKeyPress?: Function;
+  /**
+   * If true, the html input has a required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * The number of rows the multiline input field has.
+   */
+  rows?:number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: InputTheme;
+  /**
+   * Type of the input element. It can be a valid HTML5 input type.
+   * @default "text"
+   */
+  type?: string;
+  /**
+   * Current value of the input element.
+   */
+  value?: any;
+}
+
+export class Input extends React.Component<InputProps, {}> { }
+
+export default Input;
diff --git a/components/input/index.js b/components/input/index.js
new file mode 100644
index 000000000..fc4474238
--- /dev/null
+++ b/components/input/index.js
@@ -0,0 +1,11 @@
+import { INPUT } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { inputFactory } from './Input.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import theme from './theme.scss';
+
+const Input = inputFactory(FontIcon);
+const ThemedInput = themr(INPUT, theme, { withRef: true })(Input);
+
+export default ThemedInput;
+export { ThemedInput as Input };
diff --git a/components/input/index.jsx b/components/input/index.jsx
deleted file mode 100644
index 9d7de88fc..000000000
--- a/components/input/index.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import style from './style';
-import FontIcon from '../font_icon';
-import Tooltip from '../tooltip';
-
-class Input extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    error: React.PropTypes.string,
-    floating: React.PropTypes.bool,
-    icon: React.PropTypes.string,
-    label: React.PropTypes.string,
-    multiline: React.PropTypes.bool,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    onKeyPress: React.PropTypes.func,
-    required: React.PropTypes.bool,
-    type: React.PropTypes.string,
-    value: React.PropTypes.any
-  };
-
-  static defaultProps = {
-    className: '',
-    disabled: false,
-    floating: true,
-    multiline: false,
-    required: false,
-    type: 'text'
-  };
-
-  state = {
-    value: this.props.value
-  };
-
-  onChange = (event) => {
-    this.setState({value: event.target.value}, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
-  renderInput () {
-    let className = style.input;
-    if (this.state.value && this.state.value.length > 0) className += ` ${style.filled}`;
-
-    if (this.props.multiline) {
-      return (
-        <textarea
-          role='input'
-          {...this.props}
-          ref='input'
-          className={className}
-          onChange={this.onChange}
-          value={this.state.value}
-        />
-      );
-    } else {
-      return (
-        <input
-          role='input'
-          {...this.props}
-          ref='input'
-          className={className}
-          onChange={this.onChange}
-          value={this.state.value}
-        />
-      );
-    }
-  }
-
-  render () {
-    let className = style.root;
-    let labelClassName = style.label;
-    if (this.props.error) className += ` ${style.errored}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.type === 'hidden') className += ` ${style.hidden}`;
-    if (this.props.icon) className += ` ${style['with-icon']}`;
-    if (!this.props.floating) labelClassName += ` ${style.fixed}`;
-
-    return (
-      <div data-react-toolbox='input' className={className}>
-        { this.renderInput() }
-        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
-        <span className={style.bar}></span>
-        { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
-        { this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
-        { this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
-      </div>
-    );
-  }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
-}
-
-export default Input;
diff --git a/components/input/readme.md b/components/input/readme.md
index 96452a656..77dfb63d7 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -1,46 +1,77 @@
 # Input
 
-Although we are calling then Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
+Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://material.google.com/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
 
 <!-- example -->
 ```jsx
 import Input from 'react-toolbox/lib/input';
 
-const InputTest = () => (
-  <div>
-    <Input type='text' label='Firstname' />
-    <Input type='email' label='Label fixed' floating={false} />
-    <Input type='text' label='Disabled field' disabled />
-    <Input type='tel' label='With icon' icon='phone' />
-    <Input type='email' label='With icon' icon='email' />
-  </div>
-);
+class InputTest extends React.Component {
+  state = { name: '', phone: '', email: '', hint: '' };
+
+  handleChange = (name, value) => {
+    this.setState({...this.state, [name]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
+      </section>
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTInput`.
+
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name            | Type                    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        |`''`              | Sets a class name to give custom styles.|
-| `disabled`      | `Boolean`       | `false`         | If true, component will be disabled.|
-| `error`         | `String`        |                 | Give an error string to display under the field.|
-| `icon`         | `String`        |                 | Name of an icon to use as a label for the input.|
-| `floating`     | `Boolean`       | `true`         | Indicates if the label is floating in the input field or not.|
-| `label`         | `String`        |             | The text string to use for the floating label element.|
-| `multiline`     | `Boolean`       | `false`        | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
-| `onBlur`        | `Function`      |                 | Callback function that is fired when components is blured.|
-| `onChange`      | `Function`      |                 | Callback function that is fired when the components's value changes.|
-| `onFocus`       | `Function`      |                 | Callback function that is fired when components is focused.|
-| `onKeyPress`    | `Function`      |                 | Callback function that is fired when a key is pressed.|
-| `required`      | `Boolean`       | `false`         | If true, the html input has a required value.|
-| `type`          | `String`        | `text`        | Type of the input element. It can be a valid HTML5 input type|
-| `value`         | `String`        |                 | Initial value of the input element.|
+| `className`     | `String`                | `''`            | Sets a class name to give custom styles.|
+| `disabled`      | `Boolean`               | `false`         | If true, component will be disabled.|
+| `error`         | `String` or `Node`      |                 | Give an error node to display under the field.|
+| `floating`      | `Boolean`               | `true`          | Indicates if the label is floating in the input field or not.|
+| `hint`          | `String` or `Node`      | `''`            | The text string to use for hint text element.|
+| `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
+| `label`         | `String` or `Node`      |                 | The text string to use for the floating label element.|
+| `maxLength`     | `Number`                |                 | Specifies the maximum number of characters allowed in the component.|
+| `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
+| `rows`          | `Number`                |                 | The number of rows the multiline input field has.|
+| `onBlur`        | `Function`              |                 | Callback function that is fired when component is blurred.|
+| `onChange`      | `Function`              |                 | Called with (value, event) when the value changes.|
+| `onFocus`       | `Function`              |                 | Callback function that is fired when component is focused.|
+| `onKeyPress`    | `Function`              |                 | Callback function that is fired when a key is pressed.|
+| `required`      | `Boolean`               | `false`         | If true, the html input has a required attribute.|
+| `type`          | `String`                | `text`          | Type of the input element. It can be a valid HTML5 input type|
+| `value`         | `Any`                   |                 | Current value of the input element.|
+
+## Theming
+
+| Name       | Description|
+|:-----------|:-----------|
+| `bar`     | Used for the bar under the input.|
+| `counter` | Used for the counter element.|
+| `disabled` | Added to the root class when input is disabled.|
+| `error` | Used for the text error.|
+| `errored` | Added to the root class when input is errored.|
+| `hidden` | Used when the input is hidden.|
+| `hint` | Used for the hint text.|
+| `icon`   | Used for the icon in case the input has icon.|
+| `input` | Used as root class for the component.|
+| `inputElement` | Used for the HTML input element.|
+| `label` | Used for the label when the input has a label.|
+| `required` | Used in case the input is required.|
+| `withIcon` | Added to the root class if the input has icon.|
 
 ## Methods
 
-The input component has a state to control its value. It exposes instance methods to retrieve and set the current value and to control the input state:
+The `Input` component has some imperative methods that are used as a bypass to the native rendered DOM element. To call this methods you will need to retrieve the instance of the component. Check the [Install](http://react-toolbox.com/#/install) section for details on how to do this. The methods included for the `Input` are:
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
-- `blur` to blur the input field.
-- `focus` to focus the input field.
+- `blur` used to blur the `input` element.
+- `focus` used to focus the `input` element.
diff --git a/components/input/style.scss b/components/input/theme.scss
similarity index 59%
rename from components/input/style.scss
rename to components/input/theme.scss
index 2c0d69aef..948556a3c 100644
--- a/components/input/style.scss
+++ b/components/input/theme.scss
@@ -1,18 +1,20 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.root {
+.input {
   position: relative;
   padding: $input-padding 0;
-  &.with-icon {
-    margin-left: $input-icon-size;
+  &.withIcon {
+    margin-left: $input-icon-size + $input-icon-right-space;
   }
 }
 
 .icon {
   position: absolute;
   top: $input-icon-offset;
-  left: -$input-icon-size;
+  left: -($input-icon-size + $input-icon-right-space);
   display: block;
   width: $input-icon-size;
   height: $input-icon-size;
@@ -23,7 +25,7 @@
   transition: color $animation-duration $animation-curve-default;
 }
 
-.input {
+.inputElement {
   display: block;
   width: 100%;
   padding: $input-field-padding 0;
@@ -33,24 +35,34 @@
   border: 0;
   border-bottom: 1px solid $input-text-bottom-border-color;
   outline: none;
-  &:focus {
+  &:focus:not([disabled]):not([readonly]) {
     ~ .bar:before, ~ .bar:after {
       width: 50%;
     }
     ~ .label:not(.fixed) {
       color: $input-text-highlight-color;
     }
+    ~ .label > .required {
+      color: $input-text-required-color;
+    }
+    ~ .hint {
+      display: block;
+      opacity: $input-hint-opacity;
+    }
     ~ .icon {
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time']{
+  &:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
     }
+    &.filled ~ .hint {
+      opacity: 0;
+    }
   }
-  &.filled ~ .label.fixed {
+  &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
   }
 }
@@ -66,6 +78,23 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: top, font-size, color;
+  &.fixed ~ .hint {
+    display: none;
+  }
+}
+
+.hint {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  opacity: $input-hint-opacity;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
 }
 
 .bar {
@@ -90,29 +119,35 @@
   }
 }
 
-.error {
+.error, .counter {
+  margin-bottom: - $input-underline-height;
   font-size: $input-label-font-size;
-  line-height: 1.6 * $unit;
+  line-height: $input-underline-height;
   color: $input-text-error-color;
 }
 
-.disabled > .input {
+.counter {
+  position: absolute;
+  right: 0;
+  color: $input-text-label-color;
+}
+
+.disabled > .inputElement {
   color: $input-text-disabled-text-color;
   border-bottom-style: dotted;
 }
 
 .errored {
   padding-bottom: 0;
-  > .input {
+  > .inputElement {
+    margin-top: 1px;
     border-bottom-color: $input-text-error-color;
-    &:focus {
-      ~ .label:not(.fixed) {
-        color: $input-text-error-color;
-      }
-      ~ .bar:before, ~ .bar:after {
-        background-color: $input-text-error-color;
-      }
-    }
+  }
+  > .counter, > .label {
+    color: $input-text-error-color;
+  }
+  > .label > .required {
+    color: $input-text-required-color;
   }
 }
 
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
new file mode 100644
index 000000000..0e356395d
--- /dev/null
+++ b/components/layout/Layout.js
@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import { LAYOUT } from '../identifiers.js';
+
+const Layout = ({ className, children, theme }) => (
+  <div data-react-toolbox='layout' className={classnames(theme.layout, className)}>
+    {React.Children.map(children, (child) => React.cloneElement(child, { theme }))}
+  </div>
+);
+
+Layout.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element
+  ]),
+  className: PropTypes.string,
+  theme: PropTypes.shape({
+    layout: PropTypes.string
+  })
+};
+
+Layout.defaultProps = {
+  className: ''
+};
+
+export default themr(LAYOUT)(Layout);
+export { Layout };
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
new file mode 100644
index 000000000..631ea5e3d
--- /dev/null
+++ b/components/layout/NavDrawer.js
@@ -0,0 +1,64 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
+
+const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, pinned, scrollY, theme, width }) => {
+  const rootClasses = classnames([theme.navDrawer], {
+    [theme[permanentAt + 'Permanent']]: permanentAt,
+    [theme.wide]: (width === 'wide'),
+    [theme.active]: active,
+    [theme.pinned]: pinned
+  }, className);
+
+  const drawerClasses = classnames(theme.drawerContent, {
+      [theme.scrollY]: scrollY
+  });
+
+  return (
+    <div data-react-toolbox='nav-drawer' className={rootClasses}>
+      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim} onClick={onOverlayClick} />
+      <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
+        {children}
+      </aside>
+    </div>
+  );
+};
+
+NavDrawer.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  onOverlayClick: PropTypes.func,
+  permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
+  pinned: PropTypes.bool,
+  scrollY: PropTypes.bool,
+  theme: PropTypes.shape({
+    active: PropTypes.string,
+    drawerContent: PropTypes.string,
+    lgPermanent: PropTypes.string,
+    lgTabletPermanent: PropTypes.string,
+    mdPermanent: PropTypes.string,
+    navDrawer: PropTypes.string,
+    pinned: PropTypes.string,
+    scrim: PropTypes.string,
+    scrollY: PropTypes.string,
+    smPermanent: PropTypes.string,
+    smTabletPermanent: PropTypes.string,
+    wide: PropTypes.string,
+    xlPermanent: PropTypes.string,
+    xxlPermanent: PropTypes.string,
+    xxxlPermanent: PropTypes.string
+  }),
+  width: PropTypes.oneOf(['normal', 'wide'])
+};
+
+NavDrawer.defaultProps = {
+  active: false,
+  className: '',
+  scrollY: false,
+  width: 'normal'
+};
+
+export default themr(LAYOUT)(NavDrawer);
+export { NavDrawer };
diff --git a/components/layout/Panel.js b/components/layout/Panel.js
new file mode 100644
index 000000000..658b2ae48
--- /dev/null
+++ b/components/layout/Panel.js
@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
+
+const Panel = ({ children, className, onScroll, scrollY, theme }) => {
+  const _className = classnames(theme.panel, {
+    [theme.scrollY]: scrollY
+  }, className);
+
+  return (
+    <div data-react-toolbox='panel' onScroll={onScroll} className={_className}>
+      {children}
+    </div>
+  );
+};
+
+Panel.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  onScroll: PropTypes.func,
+  scrollY: PropTypes.bool,
+  theme: PropTypes.shape({
+    panel: PropTypes.string,
+    scrollY: PropTypes.string
+  })
+};
+
+Panel.defaultProps = {
+  className: '',
+  scrollY: false
+};
+
+export default themr(LAYOUT)(Panel);
+export { Panel };
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
new file mode 100644
index 000000000..7b8923a26
--- /dev/null
+++ b/components/layout/Sidebar.js
@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
+
+const Sidebar = ({ children, className, pinned, scrollY, theme, width }) => {
+  const wrapperClasses = classnames(theme.sidebar, theme[`width-${width}`], {
+    [theme.pinned]: pinned
+  }, className);
+
+  const innerClasses = classnames(theme.sidebarContent, {
+    [theme.scrollY]: scrollY
+  });
+
+  return (
+    <div data-react-toolbox='sidebar' className={wrapperClasses}>
+      <aside data-react-toolbox='sidebar-content' className={innerClasses}>
+        {children}
+      </aside>
+    </div>
+  );
+};
+
+Sidebar.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  pinned: PropTypes.bool,
+  scrollY: PropTypes.bool,
+  theme: PropTypes.shape({
+    pinned: PropTypes.string,
+    scrollY: PropTypes.string,
+    sidebar: PropTypes.string,
+    sidebarContent: PropTypes.string
+  }),
+  width: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+};
+
+Sidebar.defaultProps = {
+  className: '',
+  pinned: false,
+  scrollY: false,
+  width: 5
+};
+
+export default themr(LAYOUT)(Sidebar);
+export { Sidebar };
diff --git a/components/layout/_config.scss b/components/layout/_config.scss
new file mode 100644
index 000000000..16f778f18
--- /dev/null
+++ b/components/layout/_config.scss
@@ -0,0 +1,18 @@
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+
+$drawer-overlay-color: $color-black !default;
+$drawer-overlay-opacity: .6 !default;
+
+// from: https://material.google.com/layout/structure.html#structure-side-nav
+$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width: 40 * $unit !default;
+
+// Mobile:
+// Width = Screen width − 56 dp
+// Maximum width: 320dp
+$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
+
+// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
+$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/components/layout/_mixins.scss b/components/layout/_mixins.scss
new file mode 100644
index 000000000..e998d174f
--- /dev/null
+++ b/components/layout/_mixins.scss
@@ -0,0 +1,27 @@
+@mixin open() {
+  transition-delay: $animation-delay;
+  .drawerContent {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+}
+
+@mixin permanent() {
+  @include open();
+
+  width: $navigation-drawer-desktop-width;
+  max-width: $navigation-drawer-desktop-width;
+
+  &.wide {
+    width: $navigation-drawer-max-desktop-width;
+    max-width: $navigation-drawer-max-desktop-width;
+  }
+
+  &.active {
+    & > .scrim {
+      width: 0;
+      background-color: rgba($drawer-overlay-color, 0);
+    }
+  }
+}
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
new file mode 100644
index 000000000..f06fd16be
--- /dev/null
+++ b/components/layout/index.d.ts
@@ -0,0 +1,206 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface LayoutTheme {
+  /**
+   * Class used in the container to position and align inner items.
+   */
+  layout?: string;
+}
+
+export interface LayoutProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: [NavDrawer | Panel | Sidebar];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LayoutTheme;
+}
+
+export class Layout extends React.Component<LayoutProps, {}> { }
+
+export interface NavDrawerTheme {
+  /**
+   * Used when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the content of the drawer.
+   */
+  drawerContent?: string;
+  /**
+   * Added to the root class for large drawer.
+   */
+  lgPermanent?: string;
+  /**
+   * Added to the root class for large drawer (tablet landscape).
+   */
+  lgTabletPermanent?: string;
+  /**
+   * Added to the root class for medium drawer.
+   */
+  mdPermanent?: string;
+  /**
+   * Root class for the drawer.
+   */
+  navDrawer?: string;
+  /**
+   * Added to the root class if positioning is pinned.
+   */
+  pinned?: string;
+  /**
+   * Used as a wrapper for the drawer content.
+   */
+  scrim?: string;
+  /**
+   * Added to the drawer content if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Added to the root class for small drawer.
+   */
+  smPermanent?: string;
+  /**
+   * Added to the root class for small drawer (tablet portrait).
+   */
+  smTabletPermanent?: string;
+  /**
+   * Added to the root class if width is wide.
+   */
+  wide?: string;
+  /**
+   * Added to the root class for extra big drawer.
+   */
+  xlPermanent?: string;
+  /**
+   * Added to the root class for super big drawer.
+   */
+  xxlPermanent?: string;
+  /**
+   * Added to the root class for largest possible drawer.
+   */
+  xxxlPermanent?: string;
+}
+
+export interface NavDrawerProps extends ReactToolbox.Props {
+  /**
+   * If true, the drawer will be shown as an overlay.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * The breakpoint at which the drawer is automatically pinned.
+   */
+  permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl";
+  /**
+   * If true, the drawer will be pinned open. pinned takes precedence over active.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the drawer will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavDrawerTheme;
+  /**
+   * 320px or 400px. Only applicable above the sm breakpoint.
+   * @default normal
+   */
+  width?: "normal" | "wide";
+}
+
+export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
+
+export interface PanelTheme {
+  /**
+   * Used as the root class of the panel component.
+   */
+  panel?: string;
+  /**
+   * Used in case the panel is scrollable.
+   */
+  scrollY?: string;
+}
+
+export interface PanelProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback function to be invoked when the component scrolls.
+   */
+  onScroll?: Function;
+  /**
+   * If true, the panel will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PanelTheme;
+}
+
+export class Panel extends React.Component<PanelProps, {}> { }
+
+export interface SidebarTheme {
+  /**
+   * Added to the root class if sidebar is pinned.
+   */
+  pinned?: string;
+  /**
+   * Add to the content of sidebar if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Root class of the sidebar.
+   */
+  sidebar?: string;
+  /**
+   * Used in for the content element of the sidebar.
+   */
+  sidebarContent?: string;
+}
+
+export interface SidebarProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the sidebar will be pinned open.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the sidebar will vertically scroll all content
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SidebarTheme;
+  /**
+   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
+   * @default 5
+   */
+  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+}
+
+export class Sidebar extends React.Component<SidebarProps, {}> { }
diff --git a/components/layout/index.js b/components/layout/index.js
new file mode 100644
index 000000000..d44ec77d3
--- /dev/null
+++ b/components/layout/index.js
@@ -0,0 +1,17 @@
+import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
+import { Layout } from './Layout.js';
+import { Panel } from './Panel.js';
+import { NavDrawer } from './NavDrawer.js';
+import { Sidebar } from './Sidebar.js';
+import theme from './theme.scss';
+
+const ThemedLayout = themr(LAYOUT, theme)(Layout);
+const ThemedPanel = themr(LAYOUT, theme)(Panel);
+const ThemedNavDrawer = themr(LAYOUT, theme)(NavDrawer);
+const ThemedSidebar = themr(LAYOUT, theme)(Sidebar);
+
+export { ThemedLayout as Layout };
+export { ThemedPanel as Panel };
+export { ThemedNavDrawer as NavDrawer };
+export { ThemedSidebar as Sidebar };
diff --git a/components/layout/readme.md b/components/layout/readme.md
new file mode 100644
index 000000000..7a0d88d82
--- /dev/null
+++ b/components/layout/readme.md
@@ -0,0 +1,201 @@
+# Layout
+
+A Layout is a container that can hold a main content area with an optional navigation drawer (on the left) and/or sidebar (on the right). According to the [material design spec](https://material.google.com/layout/structure.html#structure-side-nav), the left drawer is typically used for navigation or identity-based content, while the right sidebar is secondary content related to the main content.
+
+<!-- example -->
+```jsx
+import { AppBar, Checkbox, IconButton } from 'react-toolbox';
+import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';
+
+class LayoutTest extends React.Component {
+    state = {
+        drawerActive: false,
+        drawerPinned: false,
+        sidebarPinned: false
+    };
+
+    toggleDrawerActive = () => {
+        this.setState({ drawerActive: !this.state.drawerActive });
+    };
+
+    toggleDrawerPinned = () => {
+        this.setState({ drawerPinned: !this.state.drawerPinned });
+    }
+
+    toggleSidebar = () => {
+        this.setState({ sidebarPinned: !this.state.sidebarPinned });
+    };
+
+    render() {
+        return (
+            <Layout>
+                <NavDrawer active={this.state.drawerActive}
+                    pinned={this.state.drawerPinned} permanentAt='xxxl'
+                    onOverlayClick={ this.toggleDrawerActive }>
+                    <p>
+                        Navigation, account switcher, etc. go here.
+                    </p>
+                </NavDrawer>
+                <Panel>
+                    <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
+                    <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
+                        <h1>Main Content</h1>
+                        <p>Main content goes here.</p>
+                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
+                        <Checkbox label='Show sidebar' checked={this.state.sidebarPinned} onChange={this.toggleSidebar} />
+                    </div>
+                </Panel>
+                <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
+                    <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
+                    <div style={{ flex: 1 }}>
+                        <p>Supplemental content goes here.</p>
+                    </div>
+                </Sidebar>
+            </Layout>
+        );
+    }
+}
+```
+
+If you want to provide a theme for Layout subcomponents the key to use is `RTLayout`;
+
+## Layout
+
+The primary layout component. This acts as the main container that all subcomponents are placed within. The layout is typically placed so as to fill the entire screen, although it does not have to be.
+
+### Breakpoints and Increments
+
+The Layout's subcomponents can alter their appearance and behavior based on the current screen size. The layout uses the screen breakpoints described in the [material design spec](https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints), namely:
+
+| Width | Abreviation | Typical Device |
+|:-----|:-----|:-----|
+| 480px | `xxs` | Phone (portrait) |
+| 600px | `xs` | Small tablet, phone (landscape) |
+| 720px | `smTablet` | Small tablet (portrait) |
+| 840px | `sm` | Large tablet (portrait) |
+| 960px | `md` | Small tablet (landscape) |
+| 1024px | `lgTablet` | Large tablet (landscape) |
+| 1280px | `lg` | Large tablet (landscape), desktop |
+| 1440px | `xl` | desktop |
+| 1600px | `xxl` | desktop |
+| 1920px | `xxxl` | desktop |
+
+The components also make use of [standard increments](https://material.google.com/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments), which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is 56px. On larger screens, it is 64px.
+
+### Content Area Layout
+
+The content areas of all three of the subcomponents (`NavDrawer`, `Panel`, and `Sidebar`) use flexbox column layouts set to fill the entire height of the containing `Layout`. The column layout lends itself well to the fixed header/scrolling content that will frequently inhabit these components. By default, these components also do not scroll content vertically so that you can control where scrolling occurs. (For example, see the content of the `Panel` in the sample.)
+
+If the column layout does not suit your needs, simply fill the content area with an element with `flex` set to 1, and use whatever layout you like within it.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Nodes` |  | A `Panel`, optionally preceded by a `NavDrawer` and/or followed by a `Sidebar` |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+### Theme
+The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrapper it should only provide one class interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `layout` | Class used in the container to position and align inner items.|
+
+## NavDrawer
+
+The [navigation drawer](https://material.google.com/patterns/navigation-drawer.html) slides in from the left and usually holds [the application's main navigation](https://material.google.com/layout/structure.html#structure-side-nav). The drawer's width is based on the screen size:
+
+| Breakpoint | Drawer Width | Notes |
+|:-----|:-----|:-----|
+| < `xs` | 280px or (Screen width - 85px) | whichever is smaller |
+| > `xs` | 320px | |
+| > `xs` | 400px | If property `width` is set to `wide` |
+
+The drawer can be docked to the left side of the screen or can float temporarily as an overlay. You can control the drawer's display manually `active` and `pinned` properties, and can also specify a breakpoint at which the drawer automatically becomes permanently docked.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `width` | `enum`(`'normal'`,`'wide'`) | `normal` | 320px or 400px. Only applicable above the `sm` breakpoint. |
+| `active` | `bool` | `false` | If true, the drawer will be shown as an overlay. |
+| `pinned` | `bool` | `false` | If true, the drawer will be pinned open. `pinned` takes precedence over `active`. |
+| `permanentAt` | `enum`(`'sm'`,`'md'`,`'lg'`,`'xl'`,`'xxl'`,`'xxxl'`) |  | The breakpoint at which the drawer is automatically pinned. |
+| `scrollY` | `bool` | `false` | If true, the drawer will vertically scroll all content. |
+| `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used when the drawer is active.|
+| `drawerContent` | Used for the content of the drawer.|
+| `lgPermanent` | Added to the root class for large drawer.|
+| `mdPermanent` | Added to the root class for medium drawer.|
+| `navDrawer` | Root class for the drawer.|
+| `pinned` | Added to the root class if positioning is pinned.|
+| `scrim` | Used as a wrapper for the drawer content.|
+| `scrollY` | Added to the drawer content if its scrollable.|
+| `smPermanent` | Added to the root class for small drawer.|
+| `wide` | Added to the root class if width is wide.|
+| `xlPermanent` | Added to the root class for extra big drawer.|
+| `xxlPermanent` | Added to the root class for super big drawer.|
+| `xxxlPermanent` | Added to the root class for largest possible drawer.|
+
+## Panel
+
+The `Panel` is the main content area within a `Layout`.  It is a full-height flexbox column that takes up all remaining horizontal space after the `NavDrawer` and `Sidebar` are laid out.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `onScroll` | `Function` | | Callback function to be invoked when the component scrolls. |
+| `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `panel` | Used as the root class of the panel component.|
+| `scrollY` | Used in case the panel is scrollable.|
+
+## Sidebar
+
+The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. The sidebar's width can be set either to a multiple of the "standard increment" (1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%). Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that covers the entire screen (see [examples](https://material.google.com/layout/structure.html#structure-side-nav)).
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `width` | `enum`(`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`,`25`,`33`,`50`,`66`,`75`,`100`) | `5` | Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100) |
+| `pinned` | `bool` | `false` | If true, the sidebar will be pinned open. |
+| `scrollY` | `bool` | `false` | If true, the sidebar will vertically scroll all content. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `pinned` | Added to the root class if sidebar is pinned.|
+| `scrollY` | Add to the content of sidebar if its scrollable.|
+| `sidebar` | Root class of the sidebar.|
+| `sidebarContent` | Used in for the content element of the sidebar.|
+
+## Nesting Layouts
+
+The `Layout` is meant to be used near the top level of your application, so that it occupies the entire screen. However, it is possible to nest one layout inside another:
+
+```jsx
+<Layout>
+    <NavDrawer>[navigation here]<NavDrawer>
+    <Panel>
+        <Layout>
+            <Panel>
+                [main content here]
+            </Panel>
+            <Sidebar>
+                [supplemental info here]
+            </Sidebar>
+        </Layout>
+    </Panel>
+</Layout>
+```
+
+The main reason you would want to do something like this would be so that the navigation could be rendered at a high level, while the contents of the inner `Layout` would be controlled by react-router or something like that.
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
new file mode 100644
index 000000000..405d5121b
--- /dev/null
+++ b/components/layout/theme.scss
@@ -0,0 +1,325 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+@import "http://github.com/mixins";
+
+.layout {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  overflow-y: hidden;
+
+  .navDrawer {
+    width: 0;
+    min-width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width, min-width;
+
+    .scrim {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $z-index-higher;
+      width: 0;
+      height: 100%;
+      background-color: rgba($drawer-overlay-color, 0);
+      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
+    }
+
+    .drawerContent {
+      @include shadow-2dp();
+      position: absolute;
+      z-index: $z-index-highest;
+      display: flex;
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      color: $drawer-text-color;
+      pointer-events: none;
+      background-color: $drawer-background-color;
+      border-right: 1px solid $drawer-border-color;
+      transition: transform $animation-duration $animation-curve-default;
+      transform: translateX(-100%);
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
+
+    &.pinned {
+      @include open();
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+    }
+
+    &.active {
+      &:not(.pinned) {
+        @include open();
+        .scrim {
+          width: 100%;
+          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
+          transition: background-color $animation-duration $animation-curve-default;
+        }
+      }
+    }
+
+    // Larger than mobile width drawer
+    @media screen and (min-width: $layout-breakpoint-xs) {
+      &.pinned {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
+
+      .drawerContent {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
+
+      &.wide {
+        &.pinned {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+
+        .drawerContent {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+      }
+    }
+
+    // Permanent screen, ignore .active and make part of layout
+    @media screen and (min-width: $layout-breakpoint-sm) {
+      &.smPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      &.smTabletPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-md) {
+      &.mdPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-lg) {
+      &.lgPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
+      &.lgTabletPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xl) {
+      &.xlPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xxl) {
+      &.xxlPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xxxl) {
+      &.xxxlPermanent {
+        @include permanent();
+      }
+    }
+  }
+
+  & .layout {
+    .scrim {
+      z-index: $z-index-highest - 1;
+    }
+    & .layout {
+      .scrim {
+        z-index: $z-index-highest - 2;
+      }
+    }
+  }
+
+  .panel {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+    overflow-y: hidden;
+
+    &.scrollY {
+      overflow-y: auto;
+    }
+  }
+
+  .sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-highest - 1;
+    width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    color: $drawer-text-color;
+    background-color: $drawer-background-color;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width;
+
+    .sidebarContent {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-y: hidden;
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
+
+    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+
+    @each $increment in $increments {
+      &.width-#{$increment} {
+        $mobile: $standard-increment-mobile * $increment;
+        $desktop: $standard-increment-desktop * $increment;
+
+        .sidebarContent {
+          min-width: 100%;
+        }
+
+        &.pinned {
+          width: 100%;
+        }
+
+        @if $increment < 10 {
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $mobile;
+            }
+
+            &.pinned {
+              width: $mobile;
+            }
+          }
+
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
+            }
+
+            &.pinned {
+              width: $desktop;
+            }
+          }
+        }
+
+        @if $increment < 11 {
+          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
+            }
+
+            &.pinned {
+              width: $desktop;
+            }
+          }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-sm) {
+          position: relative;
+
+          .sidebarContent {
+            min-width: $desktop;
+          }
+
+          &.pinned {
+            width: $desktop;
+          }
+        }
+      }
+    }
+
+
+    $percentages: (25, 33, 50, 66, 75);
+
+    &.width-100 {
+      position: absolute;
+
+      .sidebarContent {
+        min-width: 100%;
+      }
+
+      &.pinned {
+        width: 100%;
+      }
+    }
+
+    @each $pct in $percentages {
+      &.width-#{$pct} {
+        position: absolute;
+
+        .sidebarContent {
+          min-width: 100%;
+        }
+
+        &.pinned {
+          width: 100%;
+        }
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      @each $pct in $percentages {
+        &.width-#{$pct} {
+          position: relative;
+
+          .sidebarContent {
+            min-width: $pct * 1%;
+          }
+
+          &.pinned {
+            width: $pct * 1%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/link/Link.js b/components/link/Link.js
new file mode 100644
index 000000000..f37bfc6eb
--- /dev/null
+++ b/components/link/Link.js
@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LINK } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
+
+const Link = ({active, children, className, count, icon, label, theme, ...others}) => {
+  const _className = classnames(theme.link, {
+    [theme.active]: active
+  }, className);
+
+  return (
+    <a data-react-toolbox='link' className={_className} {...others}>
+      {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
+      {label ? <abbr>{label}</abbr> : null}
+      {count && parseInt(count) !== 0 ? <small>{count}</small> : null}
+      {children}
+    </a>
+  );
+};
+
+Link.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  count: PropTypes.number,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  label: PropTypes.string,
+  theme: PropTypes.shape({
+    active: PropTypes.string,
+    icon: PropTypes.string,
+    link: PropTypes.string
+  })
+};
+
+Link.defaultProps = {
+  active: false,
+  className: ''
+};
+
+export default themr(LINK)(Link);
+export { Link };
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
new file mode 100644
index 000000000..36ae45b4c
--- /dev/null
+++ b/components/link/index.d.ts
@@ -0,0 +1,55 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface LinkTheme {
+  /**
+   * Added to the root element if the Link is active.
+   */
+  active?: string;
+  /**
+   * Used for the icon element if it's present.
+   */
+  icon?: string;
+  /**
+   * Used for the root element.
+   */
+  link?: string;
+}
+
+export interface LinkProps extends ReactToolbox.Props {
+  /**
+   * If true, adds active style to link.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Sets a count number.
+   */
+  count?: number;
+  /**
+   * Sets the anchor link.
+   */
+  href?: string;
+  /**
+   * An icon key string to include a FontIcon component in front of the text.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * The text string used for the text content of the link.
+   */
+  label?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LinkTheme;
+  /**
+   * Additional parameters passed to anchor element.
+   */
+  [key: string]: any;
+}
+
+export class Link extends React.Component<LinkProps, {}> { }
diff --git a/components/link/index.js b/components/link/index.js
new file mode 100644
index 000000000..3dcfcf1b5
--- /dev/null
+++ b/components/link/index.js
@@ -0,0 +1,9 @@
+import { themr } from 'react-css-themr';
+import { LINK } from '../identifiers.js';
+import { Link } from './Link.js';
+import theme from './theme.scss';
+
+const ThemedLink = themr(LINK, theme)(Link);
+
+export default ThemedLink;
+export { ThemedLink as Link };
diff --git a/components/link/index.jsx b/components/link/index.jsx
deleted file mode 100644
index b659aa216..000000000
--- a/components/link/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import style from './style';
-import FontIcon from '../font_icon';
-
-const Link = (props) => {
-  let className = style.root;
-  if (props.className) className += ` ${props.className}`;
-
-  return (
-    <a
-      {...props}
-      data-react-toolbox='link'
-      className={className}
-    >
-      { props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
-      { props.label ? <abbr>{props.label}</abbr> : null }
-      { props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
-    </a>
-  );
-};
-
-Link.propTypes = {
-  className: React.PropTypes.string,
-  count: React.PropTypes.number,
-  icon: React.PropTypes.string,
-  label: React.PropTypes.string
-};
-
-Link.defaultProps = {
-  className: ''
-};
-
-export default Link;
diff --git a/components/link/readme.md b/components/link/readme.md
index 4589c487b..1de725eb1 100644
--- a/components/link/readme.md
+++ b/components/link/readme.md
@@ -8,21 +8,31 @@ import Link from 'react-toolbox/lib/link';
 
 const LinksTest = () => (
   <nav>
-    <Link href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
-    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker-notes' />
+    <Link active href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
+    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' />
     <Link href="http://github.com/#/components/link" label="Explore" icon='explore' />
   </nav>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTLink`.
+
 ## Properties
 
 You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
 
-| Name              | Type          | Default         | Description|
+| Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `label`       | `String`        |         | The text string used for the text content of the link.|
-| `className`     | `String`      | `''`            | Sets a custom class name to add styles to the link.|
-| `count`         | `Number`        |                 | Sets a count number useful to display in the page how many times was visited for example.|
-| `icon`          | `String`        |                 | An icon key string to include a `FontIcon` component in front of the text.|
+| `active`     | `Boolean`             | `false`         | If true, adds active style to link.|
+| `className`  | `String`              | `''`            | Sets a custom class name to add styles to the link.|
+| `count`      | `Number`              |                 | Sets a count number.|
+| `icon`       | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
+| `label`      | `String`              |                 | The text string used for the text content of the link.|
+
+## Theme
 
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the root element if the Link is active.|
+| `icon`  | Used for the icon element if it's present.|
+| `link`   | Used for the root element.|
diff --git a/components/link/style.scss b/components/link/theme.scss
similarity index 88%
rename from components/link/style.scss
rename to components/link/theme.scss
index a1a1ac8eb..11eb90844 100644
--- a/components/link/style.scss
+++ b/components/link/theme.scss
@@ -1,18 +1,19 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .icon {
   margin-right: $unit;
   font-size: 1.8 * $unit;
 }
 
-.root {
+.link {
   position: relative;
   display: flex;
   flex-direction: row;
   align-content: center;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
   line-height: 1.5;
   cursor: pointer;
   transition: opacity $animation-duration $animation-curve-default;
diff --git a/components/list/List.js b/components/list/List.js
new file mode 100644
index 000000000..f7b46517e
--- /dev/null
+++ b/components/list/List.js
@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import InjectListItem from './ListItem.js';
+
+const mergeProp = (propName, child, parent) => (
+  child[propName] !== undefined
+  ? child[propName]
+  : parent[propName]
+);
+
+const factory = (ListItem) => {
+  class List extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      ripple: PropTypes.bool,
+      selectable: PropTypes.bool,
+      theme: PropTypes.shape({
+        list: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      className: '',
+      ripple: false,
+      selectable: false
+    };
+
+    renderItems () {
+      return React.Children.map(this.props.children, (item) => {
+        if (item.type === ListItem) {
+          const selectable = mergeProp('selectable', item.props, this.props);
+          const ripple = mergeProp('ripple', item.props, this.props);
+          return React.cloneElement(item, { selectable, ripple });
+        } else {
+          return React.cloneElement(item);
+        }
+      });
+    }
+
+    render () {
+      return (
+        <ul data-react-toolbox='list' className={classnames(this.props.theme.list, this.props.className)}>
+          {this.renderItems()}
+        </ul>
+      );
+    }
+  }
+
+  return List;
+};
+
+const List = factory(InjectListItem);
+export default themr(LIST)(List);
+export { factory as listFactory };
+export { List };
diff --git a/components/list/ListCheckbox.js b/components/list/ListCheckbox.js
new file mode 100644
index 000000000..c50379dde
--- /dev/null
+++ b/components/list/ListCheckbox.js
@@ -0,0 +1,60 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import InjectListItemContent from './ListItemContent.js';
+
+const factory = (Checkbox, ListItemContent) => {
+  const ListCheckbox = ({ caption, checked, className, disabled, legend, name, onBlur, onChange, onFocus, theme }) => {
+    const _className = classnames(theme.item, theme.checkboxItem, {
+      [theme.disabled]: disabled
+    }, className);
+
+    return (
+      <li className={_className}>
+        <Checkbox
+          checked={checked}
+          className={theme.checkbox}
+          disabled={disabled}
+          label={<ListItemContent caption={caption} legend={legend} />}
+          name={name}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+        />
+      </li>
+    );
+  };
+
+  ListCheckbox.propTypes = {
+    caption: PropTypes.string,
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    legend: PropTypes.string,
+    name: PropTypes.string,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    theme: PropTypes.shape({
+      checkbox: PropTypes.string,
+      checkboxItem: PropTypes.string,
+      disabled: PropTypes.string,
+      item: PropTypes.string
+    })
+  };
+
+  ListCheckbox.defaultProps = {
+    checked: false,
+    disabled: false
+  };
+
+  return ListCheckbox;
+};
+
+const ListCheckbox = factory(InjectCheckbox, InjectListItemContent);
+
+export default themr(LIST)(ListCheckbox);
+export { factory as listCheckboxFactory };
+export { ListCheckbox };
diff --git a/components/list/ListDivider.js b/components/list/ListDivider.js
new file mode 100644
index 000000000..f1cc252f8
--- /dev/null
+++ b/components/list/ListDivider.js
@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+
+const ListDivider = ({inset, theme}) => (
+  <hr className={inset ? `${theme.divider} ${theme.inset}` : theme.divider} />
+);
+
+ListDivider.propTypes = {
+  inset: PropTypes.bool,
+  theme: PropTypes.shape({
+    divider: PropTypes.string,
+    inset: PropTypes.string
+  })
+};
+
+ListDivider.defaultProps = {
+  inset: false
+};
+
+export default themr(LIST)(ListDivider);
+export { ListDivider };
diff --git a/components/list/ListItem.js b/components/list/ListItem.js
new file mode 100644
index 000000000..e9a068256
--- /dev/null
+++ b/components/list/ListItem.js
@@ -0,0 +1,85 @@
+import React, { Component, PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import InjectListItemContent from './ListItemContent.js';
+import InjectListItemLayout from './ListItemLayout.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple, ListItemLayout, ListItemContent) => {
+  class ListItem extends Component {
+    static propTypes = {
+      children: PropTypes.any,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      onClick: PropTypes.func,
+      ripple: PropTypes.bool,
+      theme: PropTypes.shape({
+        listItem: PropTypes.string
+      }),
+      to: PropTypes.string
+    };
+
+    static defaultProps = {
+      className: '',
+      disabled: false,
+      ripple: false
+    };
+
+    handleClick = (event) => {
+      if (this.props.onClick && !this.props.disabled) {
+        this.props.onClick(event);
+      }
+    };
+
+    groupChildren () {
+      const children = {
+        leftActions: [],
+        rightActions: [],
+        ignored: []
+      };
+
+      React.Children.forEach(this.props.children, (child, i) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+
+        const { listItemIgnore, ...rest } = child.props;
+        const strippedChild = { ...child, ...{ props: rest } };
+
+        if (listItemIgnore) {
+          children.ignored.push(strippedChild);
+          return;
+        }
+        if (child.type === ListItemContent) {
+          children.itemContent = strippedChild;
+          return;
+        }
+        const bucket = children.itemContent ? 'rightActions' : 'leftActions';
+        children[bucket].push({...strippedChild, key: i});
+      });
+
+      return children;
+    }
+
+    render () {
+      const {className, onMouseDown, onTouchStart, to, onClick, ripple: hasRipple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+      const children = this.groupChildren();
+      const content = <ListItemLayout theme={theme} {...children} {...other}/>;
+      return (
+        <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown} onTouchStart={onTouchStart}>
+          {to ? <a href={this.props.to}>{content}</a> : content}
+          {children.ignored}
+        </li>
+      );
+    }
+  }
+
+  return ripple(ListItem);
+};
+
+const ripple = rippleFactory({ centered: false, listItemIgnore: true });
+const ListItem = factory(ripple, InjectListItemLayout, InjectListItemContent);
+
+export default themr(LIST)(ListItem);
+export { factory as listItemFactory };
+export { ListItem };
diff --git a/components/list/ListItemAction.js b/components/list/ListItemAction.js
new file mode 100644
index 000000000..f424cac50
--- /dev/null
+++ b/components/list/ListItemAction.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+
+const ListItemAction = ({action, theme}) => {
+  const {onClick, onMouseDown} = action.props;
+  const stopRipple = onClick && !onMouseDown;
+  const stop = e => e.stopPropagation();
+  return (
+    <span className={theme.itemAction} onMouseDown={stopRipple && stop} onClick={onClick && stop}>
+      {action}
+    </span>
+  );
+};
+
+ListItemAction.propTypes = {
+  action: PropTypes.object,
+  theme: PropTypes.shape({
+    itemAction: PropTypes.string
+  })
+};
+
+export default themr(LIST)(ListItemAction);
+export { ListItemAction };
diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
new file mode 100644
index 000000000..94ed511d9
--- /dev/null
+++ b/components/list/ListItemActions.js
@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import InjectListItemAction from './ListItemAction.js';
+
+const factory = (ListItemAction) => {
+  const ListItemActions = ({type, children, theme}) => {
+    const validChildren = React.Children.toArray(children).filter(c => (
+      React.isValidElement(c)
+    ));
+
+    return (
+      <span className={theme[type]}>
+        {validChildren.map((action, i) => <ListItemAction key={i} theme={theme} action={action} />)}
+      </span>
+    );
+  };
+
+  ListItemActions.propTypes = {
+    children: PropTypes.any,
+    theme: PropTypes.shape({
+      left: PropTypes.string,
+      right: PropTypes.string
+    }),
+    type: PropTypes.oneOf(['left', 'right'])
+  };
+
+  return ListItemActions;
+};
+
+const ListItemActions = factory(InjectListItemAction);
+export default themr(LIST)(ListItemActions);
+export { factory as listItemActionsFactory };
+export { ListItemActions };
diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
new file mode 100644
index 000000000..c02438edf
--- /dev/null
+++ b/components/list/ListItemContent.js
@@ -0,0 +1,60 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import InjectListItemText from './ListItemText.js';
+
+const types = ['auto', 'normal', 'large'];
+
+const factory = (ListItemText) => {
+  class ListItemContent extends Component {
+    static propTypes = {
+      caption: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+      ]),
+      children: PropTypes.any,
+      legend: PropTypes.string,
+      theme: PropTypes.shape({
+        auto: PropTypes.string,
+        itemContentRoot: PropTypes.string,
+        large: PropTypes.string,
+        normal: PropTypes.string
+      }),
+      type: PropTypes.oneOf(types)
+    };
+
+    getType () {
+      const {type, children, caption, legend} = this.props;
+
+      let count = React.Children.count(children);
+      [caption, legend].forEach(s => { count += s ? 1 : 0; });
+      const typeIndex = Math.min(count, types.length);
+
+      return type || types[typeIndex];
+    }
+
+    render () {
+      const {children, caption, legend, theme} = this.props;
+      const contentType = this.getType();
+      const className = classnames(theme.itemContentRoot, {
+        [theme[contentType]]: theme[contentType]
+      });
+
+      return (
+        <span className={className}>
+          {caption && <ListItemText theme={theme} primary>{caption}</ListItemText>}
+          {legend && <ListItemText theme={theme}>{legend}</ListItemText>}
+          {children}
+        </span>
+      );
+    }
+  }
+
+  return ListItemContent;
+};
+
+const ListItemContent = factory(InjectListItemText);
+export default themr(LIST)(ListItemContent);
+export { factory as listItemContentFactory };
+export { ListItemContent };
diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
new file mode 100644
index 000000000..18c114e17
--- /dev/null
+++ b/components/list/ListItemLayout.js
@@ -0,0 +1,79 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import InjectAvatar from '../avatar/Avatar.js';
+import InjectListItemContent from './ListItemContent.js';
+import InjectListItemActions from './ListItemActions.js';
+
+const factory = (Avatar, ListItemContent, ListItemActions) => {
+  const ListItemLayout = (props) => {
+    const className = classnames(props.theme.item, {
+      [props.theme.disabled]: props.disabled,
+      [props.theme.selectable]: props.selectable
+    }, props.className);
+
+    const leftActions = [
+      props.leftIcon && <FontIcon value={props.leftIcon} key='leftIcon'/>,
+      props.avatar && <Avatar image={props.avatar} key='avatar'/>,
+      ...props.leftActions
+    ];
+    const rightActions = [
+      props.rightIcon && <FontIcon value={props.rightIcon} key='rightIcon'/>,
+      ...props.rightActions
+    ];
+    const content = props.itemContent || <ListItemContent theme={props.theme} caption={props.caption} legend={props.legend} />;
+    const emptyActions = (item) => !item[0] && !item[1] && !item[2];
+
+    return (
+      <span className={className}>
+        {!emptyActions(leftActions) > 0 && <ListItemActions type='left' theme={props.theme}>{leftActions}</ListItemActions>}
+        {content}
+        {!emptyActions(rightActions) > 0 && <ListItemActions type='right' theme={props.theme}>{rightActions}</ListItemActions>}
+      </span>
+    );
+  };
+
+  ListItemLayout.propTypes = {
+    avatar: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    caption: PropTypes.string,
+    children: PropTypes.any,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    itemContent: PropTypes.element,
+    leftActions: PropTypes.array,
+    leftIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    legend: PropTypes.string,
+    rightActions: PropTypes.array,
+    rightIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    selectable: PropTypes.bool,
+    theme: PropTypes.shape({
+      disabled: PropTypes.string,
+      item: PropTypes.string,
+      selectable: PropTypes.string
+    }),
+    to: PropTypes.string
+  };
+
+  ListItemLayout.defaultProps = {
+    disabled: false,
+    selectable: false
+  };
+
+  return ListItemLayout;
+};
+
+const ListItemLayout = factory(InjectAvatar, InjectListItemContent, InjectListItemActions);
+export default themr(LIST)(ListItemLayout);
+export { factory as listItemLayoutFactory };
+export { ListItemLayout };
diff --git a/components/list/ListItemText.js b/components/list/ListItemText.js
new file mode 100644
index 000000000..6d930c786
--- /dev/null
+++ b/components/list/ListItemText.js
@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+
+const ListItemText = ({className, primary, children, theme, ...other}) => {
+  const _className = classnames(theme.itemText, {[theme.primary]: primary}, className);
+  return (
+    <span data-react-toolbox="list-item-text" className={_className} {...other}>
+      {children}
+    </span>
+  );
+};
+
+ListItemText.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  primary: PropTypes.bool,
+  theme: PropTypes.shape({
+    itemText: PropTypes.string,
+    primary: PropTypes.string
+  })
+};
+
+ListItemText.defaultProps = {
+  primary: false
+};
+
+export default themr(LIST)(ListItemText);
+export { ListItemText };
diff --git a/components/list/ListSubHeader.js b/components/list/ListSubHeader.js
new file mode 100644
index 000000000..e4da57981
--- /dev/null
+++ b/components/list/ListSubHeader.js
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+
+const ListSubHeader = ({ caption, className, theme }) => (
+  <h5 className={classnames(theme.subheader, className)}>{caption}</h5>
+);
+
+ListSubHeader.propTypes = {
+  caption: PropTypes.string,
+  className: PropTypes.string,
+  theme: PropTypes.object
+};
+
+ListSubHeader.defaultProps = {
+  className: ''
+};
+
+export default themr(LIST)(ListSubHeader);
+export { ListSubHeader };
diff --git a/components/list/_config.scss b/components/list/_config.scss
index 0528ed883..a8814551f 100644
--- a/components/list/_config.scss
+++ b/components/list/_config.scss
@@ -1,16 +1,18 @@
-$list-vertical-padding: .8 * $unit;
-$list-horizontal-padding: 1.6 * $unit;
-$list-content-left-spacing: 7.2 * $unit;
-$list-subheader-height: 4.8 * $unit;
-$list-subheader-font-size: 1.4 * $unit;
-$list-subheader-font-weight: 500;
-$list-divider-height: .1 * $unit;
-$list-item-min-height: 4.8 * $unit;
-$list-item-min-height-legend: 7.2 * $unit;
-$list-item-hover-color: unquote("rgb(#{$palette-grey-200})");
-$list-item-legend-margin-top: .3 * $unit;
-$list-item-icon-font-size: 2.4 * $unit;
-$list-item-icon-size: 1.8 * $unit;
-$list-item-right-icon-margin: $list-content-left-spacing - $list-horizontal-padding - $list-item-icon-size;
-$list-item-avatar-height: 4 * $unit;
-$list-item-avatar-margin: .8 * $unit;
+$list-vertical-padding: .8 * $unit !default;
+$list-horizontal-padding: 1.6 * $unit !default;
+$list-content-left-spacing: 7.2 * $unit !default;
+$list-subheader-height: 4.8 * $unit !default;
+$list-subheader-font-size: 1.4 * $unit !default;
+$list-subheader-font-weight: 500 !default;
+$list-divider-height: .1 * $unit !default;
+$list-item-min-height: 4.8 * $unit !default;
+$list-item-min-height-legend: 7.2 * $unit !default;
+$list-item-hover-color: $palette-grey-200 !default;
+$list-item-legend-margin-top: .3 * $unit !default;
+$list-item-icon-font-size: 2.4 * $unit !default;
+$list-item-icon-size: 1.8 * $unit !default;
+$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
+$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
+$list-item-avatar-height: 4 * $unit !default;
+$list-item-avatar-margin: .8 * $unit !default;
+$list-item-child-margin: .8 * $unit !default;
diff --git a/components/list/checkbox.jsx b/components/list/checkbox.jsx
deleted file mode 100644
index c0723ed5f..000000000
--- a/components/list/checkbox.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import Checkbox from '../checkbox';
-import ListItemContent from './content';
-import style from './style';
-
-const ListCheckbox = (props) => {
-  let className = `${style.item} ${style['checkbox-item']}`;
-  if (props.legend) className += ` ${style['with-legend']}`;
-  if (props.disabled) className += ` ${style.disabled}`;
-  if (props.className) className += ` ${props.className}`;
-
-  return (
-    <li className={className}>
-      <Checkbox
-        checked={props.checked}
-        className={style.checkbox}
-        disabled={props.disabled}
-        label={<ListItemContent caption={props.caption} legend={props.legend} />}
-        name={props.name}
-        onBlur={props.onBlur}
-        onChange={props.onChange}
-        onFocus={props.onFocus}
-      />
-    </li>
-  );
-};
-
-ListCheckbox.propTypes = {
-  caption: React.PropTypes.string.isRequired,
-  checked: React.PropTypes.bool,
-  className: React.PropTypes.string,
-  disabled: React.PropTypes.bool,
-  legend: React.PropTypes.string,
-  name: React.PropTypes.string,
-  onBlur: React.PropTypes.func,
-  onChange: React.PropTypes.func,
-  onFocus: React.PropTypes.func
-};
-
-ListCheckbox.defaultProps = {
-  checked: false,
-  disabled: false
-};
-
-export default ListCheckbox;
diff --git a/components/list/content.jsx b/components/list/content.jsx
deleted file mode 100644
index 1e4d57819..000000000
--- a/components/list/content.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const ListItemContent = ({ caption, legend }) => (
-  <span className={style.text}>
-    <span className={style.caption}>{caption}</span>
-    <span className={style.legend}>{legend}</span>
-  </span>
-);
-
-ListItemContent.propTypes = {
-  caption: React.PropTypes.string.isRequired,
-  legend: React.PropTypes.any
-};
-
-export default ListItemContent;
diff --git a/components/list/divider.jsx b/components/list/divider.jsx
deleted file mode 100644
index a7b873e89..000000000
--- a/components/list/divider.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const ListDivider = ({inset}) => {
-  const className = inset ? `${style.divider} ${style.inset}` : style.divider;
-  return <hr className={className} />;
-};
-
-ListDivider.propTypes = {
-  inset: React.PropTypes.bool
-};
-
-ListDivider.defaultProps = {
-  inset: false
-};
-
-export default ListDivider;
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
new file mode 100644
index 000000000..c3b197ca3
--- /dev/null
+++ b/components/list/index.d.ts
@@ -0,0 +1,371 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ListTheme {
+  /**
+   * Used for the root element of the list.
+   */
+  list?: string;
+}
+
+export interface ListProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, each element in the list will have a ripple effect on click
+   * @default false
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListTheme;
+}
+
+export class List extends React.Component<ListProps, {}> { }
+
+export interface ListCheckboxTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  checkbox?: string;
+  /**
+   * Added to the checkbox element.
+   */
+  checkboxItem?: string;
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+}
+
+export interface ListCheckboxProps extends ReactToolbox.Props {
+  /**
+   * Main text of the item. Required.
+   */
+  caption?: string;
+  /**
+   * If true the checkbox appears checked by default.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * Name for the checkbox input item.
+   */
+  name?: string;
+  /**
+   * Callback called when the input element is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback called when the input element is changed.
+   */
+  onChange?: Function;
+  /**
+   * Callback called when the input element is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListCheckboxTheme;
+}
+
+export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
+
+export interface ListDividerTheme {
+  /**
+   * Added to the root element.
+   */
+  divider?: string;
+  /**
+   * Added to root element if inset is true.
+   */
+  inset?: string;
+}
+
+export interface ListDividerProps extends ReactToolbox.Props {
+  /**
+   * If true, will leave a space at the left side.
+   */
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends React.Component<ListDividerProps, {}> { }
+
+export interface ListItemTheme {
+  /**
+   * Used for the root element of the list.
+   */
+  listItem?: string;
+}
+
+export interface ListItemProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   * @default false
+   */
+  theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItem extends React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  subheader?: string;
+}
+
+export interface ListSubHeaderProps extends ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
+  caption?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
+
+export interface ListItemActionTheme {
+  /**
+   * Used for each action element (left/right).
+   */
+  itemAction?: string;
+}
+
+export interface ListItemActionProps {
+  /**
+   * List item action.
+   */
+  action?: React.ReactNode;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemActionTheme;
+}
+
+export class ListItemAction extends React.Component<ListItemActionProps, {}> { }
+
+export interface ListItemActionsTheme {
+  /**
+   * Added for the element that wraps left actions.
+   */
+  left?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
+  right?: string;
+}
+
+export interface ListItemActionsProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemActionsTheme & ListItemActionTheme;
+  /**
+   * List item action type.
+   */
+  type?: "left" | "right";
+}
+
+export class ListItemActions extends React.Component<ListItemActionsProps, {}> { }
+
+export interface ListItemContentTheme {
+  /**
+   * Added to the content wrapper element if type is "auto".
+   */
+  auto?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the content wrapper element if type is "large".
+   */
+  large?: string;
+  /**
+   * Added to the content wrapper element if type is "normal".
+   */
+  normal?: string;
+}
+
+export interface ListItemContentProps {
+  /**
+   * Main text of the item.
+   */
+  caption?: React.ReactNode;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemContentTheme;
+  /**
+   * List item content type.
+   */
+  type?: "auto" | "normal" | "large";
+}
+
+export class ListItemContent extends React.Component<ListItemContentProps, {}> { }
+
+export interface ListItemLayoutTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Added when layout is selectable.
+   */
+  selectable?: string;
+}
+
+export interface ListItemLayoutProps extends ReactToolbox.Props {
+  /**
+   * A string URL to specify an avatar in the left side of the item.
+   */
+  avatar?: string | React.ReactElement<any>;
+  /**
+   * Main text of the item.
+   */
+  caption?: string;
+    /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Layout content.
+   */
+  itemContent?: React.ReactChild;
+  /**
+   * A list of elements that are placed on the left side of the item and after the avatar attribute.
+   */
+  leftActions?: React.ReactNode[];
+  /**
+   * A string key of a font icon or element to display an icon in the left side of the item.
+   */
+  leftIcon?: string | React.ReactElement<any>;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+   */
+  rightActions?: React.ReactNode[];
+  /**
+   * The same as the leftIcon but in this case the icon is displayed in the right side.
+   */
+  rightIcon?: string | React.ReactElement<any>;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemLayoutTheme & ListItemContentTheme & ListItemActionsTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItemLayout extends React.Component<ListItemLayoutProps, {}> { }
+
+export interface ListItemTextTheme {
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+}
+
+export interface ListItemTextProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Whether list item text should have 'primary' look.
+   * @default
+   */
+  primary?: boolean;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemTextTheme;
+  /**
+   * Additional properties passed to root container.
+   */
+  [key: string]: any;
+}
+
+export class ListItemText extends React.Component<ListItemTextProps, {}> { }
diff --git a/components/list/index.js b/components/list/index.js
new file mode 100644
index 000000000..06edbf81a
--- /dev/null
+++ b/components/list/index.js
@@ -0,0 +1,39 @@
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import { Avatar } from '../avatar';
+import { Checkbox } from '../checkbox';
+import { ListItemText } from './ListItemText.js';
+import { ListItemAction } from './ListItemAction.js';
+import { ListSubHeader } from './ListSubHeader.js';
+import { ListDivider } from './ListDivider.js';
+import { listFactory } from './List.js';
+import { listItemFactory } from './ListItem.js';
+import { listCheckboxFactory } from './ListCheckbox.js';
+import { listItemActionsFactory } from './ListItemActions.js';
+import { listItemContentFactory } from './ListItemContent.js';
+import { listItemLayoutFactory } from './ListItemLayout.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(LIST, theme)(Component);
+const ripple = themedRippleFactory({ centered: false, listItemIgnore: true });
+const ThemedListItemAction = applyTheme(ListItemAction);
+const ThemedListSubHeader = applyTheme(ListSubHeader);
+const ThemedListItemText = applyTheme(ListItemText);
+const ThemedListDivider = applyTheme(ListDivider);
+const ThemedListItemContent = applyTheme(listItemContentFactory(ThemedListItemText));
+const ThemedListItemActions = applyTheme(listItemActionsFactory(ThemedListItemAction));
+const ThemedListItemLayout = applyTheme(listItemLayoutFactory(Avatar, ThemedListItemContent, ThemedListItemActions));
+const ThemedListCheckbox = applyTheme(listCheckboxFactory(Checkbox, ThemedListItemContent));
+const ThemedListItem = applyTheme(listItemFactory(ripple, ThemedListItemLayout, ThemedListItemContent));
+const ThemedList = applyTheme(listFactory(ThemedListItem));
+
+export { ThemedListItemActions as ListItemActions };
+export { ThemedListItemContent as ListItemContent };
+export { ThemedListItemLayout as ListItemLayout };
+export { ThemedListSubHeader as ListSubHeader };
+export { ThemedListItemText as ListItemText };
+export { ThemedListCheckbox as ListCheckbox };
+export { ThemedListDivider as ListDivider };
+export { ThemedListItem as ListItem };
+export { ThemedList as List };
diff --git a/components/list/index.jsx b/components/list/index.jsx
deleted file mode 100644
index 124b4da22..000000000
--- a/components/list/index.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  List: require('./list'),
-  ListItem: require('./item'),
-  ListDivider: require('./divider'),
-  ListCheckbox: require('./checkbox'),
-  ListSubHeader: require('./subheader')
-};
diff --git a/components/list/item.jsx b/components/list/item.jsx
deleted file mode 100644
index cd8dc9a9d..000000000
--- a/components/list/item.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import FontIcon from '../font_icon';
-import ListItemContent from './content';
-import Ripple from '../ripple';
-import style from './style';
-
-class ListItem extends React.Component {
-  static propTypes = {
-    avatar: React.PropTypes.string,
-    caption: React.PropTypes.string.isRequired,
-    disabled: React.PropTypes.bool,
-    leftIcon: React.PropTypes.string,
-    legend: React.PropTypes.string,
-    rightIcon: React.PropTypes.string,
-    ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool,
-    to: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    disabled: false,
-    ripple: false,
-    selectable: false
-  };
-
-  handleClick = (event) => {
-    if (this.props.onClick && !this.props.disabled) {
-      this.props.onClick(event);
-    }
-  };
-
-  handleMouseDown = (event) => {
-    if (this.refs.ripple && !this.props.disabled) {
-      this.refs.ripple.start(event);
-    }
-  };
-
-  renderContent () {
-    let className = style.item;
-    if (this.props.legend) className += ` ${style['with-legend']}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.selectable) className += ` ${style.selectable}`;
-
-    return (
-      <span className={className}>
-        { this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null }
-        { this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null }
-        <ListItemContent caption={this.props.caption} legend={this.props.legend} />
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null }
-        { this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null }
-      </span>
-    );
-  }
-
-  render () {
-    return (
-      <li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
-        { this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent() }
-      </li>
-    );
-  }
-}
-
-export default ListItem;
diff --git a/components/list/list.jsx b/components/list/list.jsx
deleted file mode 100644
index d020999d4..000000000
--- a/components/list/list.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import ListItem from './item';
-import style from './style';
-
-class List extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: '',
-    ripple: false,
-    selectable: false
-  };
-
-  renderItems () {
-    return React.Children.map(this.props.children, (item) => {
-      if (item.type === ListItem) {
-        return React.cloneElement(item, {
-          ripple: this.props.ripple,
-          selectable: this.props.selectable
-        });
-      } else {
-        return React.cloneElement(item);
-      }
-    });
-  }
-
-  render () {
-    let className = style.list;
-    if (this.props.className) className += ` ${this.props.className}`;
-    return (
-      <ul className={className}>
-        { this.renderItems() }
-      </ul>
-    );
-  }
-}
-
-export default List;
diff --git a/components/list/readme.md b/components/list/readme.md
index 543b883a0..8e1354962 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -1,12 +1,12 @@
 # List
 
-A [list component](https://www.google.com/design/spec/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list. 
+A [list component](https://material.google.com/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list.
 
 Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension with the goal of differentiating between like data types or qualities within a single data type. You can compose lists based on subcomponents.
 
 <!-- example -->
 ```jsx
-import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toobox';
+import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox/lib/list';
 
 const ListTest = () => (
   <List selectable ripple>
@@ -31,58 +31,114 @@ const ListTest = () => (
     />
     <ListSubHeader caption='Configuration' />
     <ListCheckbox checked caption='Notify new comics' legend='You will receive a notification when a new one is published' />
+    <ListDivider />
     <ListItem caption='Contact the publisher' leftIcon='send' />
     <ListItem caption='Remove this publication' leftIcon='delete' />
   </List>
 );
 ```
 
+If you want to provide styles via context to this components, you should use the key `RTList`.
+
 ## List
 
-Is used as a wrapper for the list. It can hold properties that affect to the whole list and also it can get styles for the wrapper.
+Is used as a wrapper for the list. It can hold properties that affect to the whole list and get styles for the wrapper.
 
+### Properties
 | Name          | Type        | Default    | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`      | Sets a class to give custom styles to the list wrapper.| 
-| `ripple`      | `Boolean`   | `false`    | If true, each element in the list will have a ripple effect on click | 
+| `className`   | `String`    |  `''`      | Sets a class to give custom styles to the list wrapper.|
+| `ripple`      | `Boolean`   | `false`    | If true, each element in the list will have a ripple effect on click |
 | `selectable`  | `Boolean`   | `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. |
 
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `list`   | Used for the root element of the list.|
+
 ## List Item
 
-Represents a list item that can have avatar, icons, title and subtitle, etc. It's important to notice that you have to set it as an inmediate child of `List` component.
+Represents a list item that can have avatar, icons, title, subtitle, etc. Note: you have to set it as an inmediate child of `List` component.
 
-| Name              | Type          | Default         | Description|
+### Properties
+| Name              | Type                  | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `avatar`   | `String`    |        | A string URL to specify an avatar in the left side of the item.| 
-| `caption`   | `String`    |       | Main text of the item. Required.| 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the list item.| 
-| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.| 
-| `leftIcon`    | `String`       |    | A string key of a font icon to display an icon in the left side of the item. |
-| `legend`   | `String`      |       | Secondary text to display under the caption.|
-| `rightIcon`  | `String`      |       | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
-| `ripple` | `Boolean`      |   `false`  | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
-| `selectable` | `Boolean`      |   `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent |
+| `avatar`          | `String` or `Element` |               | A string URL to specify an avatar in the left side of the item.|
+| `caption`         | `String`              |               | Main text of the item.|
+| `className`       | `String`              | `''`          | Set a class to give custom styles to the list item.|
+| `disabled`        | `String`              | `false`       | If true, the item is displayed as disabled and is not clickable.|
+| `itemContent`     | `Element`             |               | An element that will be displayed as the item. If set, this will override `caption` and `legend`.|
+| `leftActions`     | `Array of Elements`   |               | A list of elements that are placed on the left side of the item and after the avatar attribute.|
+| `leftIcon`        | `String` or `Element` |               | A string key of a font icon or element to display an icon in the left side of the item. |
+| `legend`          | `String`              |               | Secondary text to display under the caption.|
+| `onClick`         | `Function`            |               | Callback the is invoked when the item is clicked if it's not disabled. |
+| `rightIcon`       | `String` or `Element` |               | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
+| `rightActions`    | `Array of Elements`   |               | A list of elements that are placed on the right side of the item and after the rightIcon attribute.|
+| `ripple`          | `Boolean`             | `false`       | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
+| `selectable`      | `Boolean`             | `false`       | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
+| `to`              | `String`              |               | In case you want to provide the item as a link, you can pass this property to specify the href. |
+
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Added to the inner content if its a disabled item.|
+| `item` | Used for the inner content of a list item.|
+| `itemAction` | Used for each action element (left/right).|
+| `itemContentRoot` | Used for the content wrapper element in list item.|
+| `itemText` | Added to the text inside of the list item.|
+| `large` | Added to the content wrapper element if size is large.|
+| `left` | Added for the element that wraps left actions.|
+| `listItem` | Used for the root element of the list.|
+| `primary` | Added to the text inside of the list item if its primary.|
+| `right` | Added for the element that wraps right actions.|
+| `selectable` | Added to the inner content if its a selectable item.|
+
 
 ## List Checkbox
 
 A special type of item that has a checkbox control on the left side. It implements similar methods to the `ListItem` component and some additional to control the checkbox.
 
-| Name              | Type          | Default         | Description|
+### Properties
+| Name            | Type            | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |       | Main text of the item. Required.| 
-| `checked`   | `Boolean`    |  `false`    | If true the checkbox appears checked by default.| 
-| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.| 
-| `legend`   | `String`      |       | Secondary text to display under the caption.|
-| `name`  | `String`      |       | Name for the checkbox input item.|
-| `onBlur` | `Function`      |    | Callback called when the input element is blurred.|
-| `onFocus` | `Function`      |    | Callback called when the input element is focused.|
-| `onChange` | `Function`      |    | Callback called when the input element is changed.|
+| `caption`       | `String`        |               | Main text of the item. Required.|
+| `className`     | `String`        |               | Set a class to give custom styles to Component.|
+| `checked`       | `Boolean`       | `false`       | If true the checkbox appears checked by default.|
+| `disabled`      | `String`        | `false`       | If true, the item is displayed as disabled and it's not clickable.|
+| `legend`        | `String`        |               | Secondary text to display under the caption.|
+| `name`          | `String`        |               | Name for the checkbox input item.|
+| `onBlur`        | `Function`      |               | Passed through to the wrapped Checkbox component.|
+| `onChange`      | `Function`      |               | Passed through to the wrapped Checkbox component.|
+| `onFocus`       | `Function`      |               | Passed through to the wrapped Checkbox component.|
+
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `checkbox` | Used as a wrapper class for the subheader element.|
+| `checkboxItem` | Added to the checkbox element.|
+| `disabled` | Added to the root element if the component is disabled.|
+| `item` | Used as a wrapper class root element element. Same as List.|
+| `itemContentRoot` | Used for the content wrapper element in list item.|
+| `itemText` | Added to the text inside of the list item.|
+| `large` | Added to the content wrapper element if size is large.|
+| `primary` | Added to the text inside of the list item if its primary.|
+
 
 ## List Subheader
 
-Simple subcomponent used to give a title to a list area. It only have a property `caption` which is a `String` to set the text that should be displayed.
+Simple subcomponent used to give a title to a list area.
 
-## List Divider
+### Properties
+| Name          | Type        | Default       | Description|
+|:-----|:-----|:-----|:-----|
+| `caption`     | `String`    |               | Text that will be displayed.|
+| `className`   | `String`    | `''`          | Set a class to give custom styles to the list subheader.|
 
-Simple subcomponent used to separate list sections or items. It has only one property `inset` which is a `Boolean` that indicates if the divider should be full with or should leave an space to the left side.
+### Theme
+| Name     | Description|
+|:---------|:-----------|
+| `subheader` | Used as a wrapper class for the subheader element.|
+
+## List Divider
 
+Simple subcomponent used to separate list sections or items. It has only one property `inset` which is a `Boolean` that indicates if the divider should be full with or should leave an space to the left side. It has two theming keys: `inset` and `divider` that will be used depending on wether it should full width or leave space.
diff --git a/components/list/subheader.jsx b/components/list/subheader.jsx
deleted file mode 100644
index a5fcd3426..000000000
--- a/components/list/subheader.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const ListSubHeader = (props) => {
-  let className = style.subheader;
-  if (props.className) className += ` ${props.className}`;
-  return <h5 className={className}>{props.caption}</h5>;
-};
-
-ListSubHeader.propTypes = {
-  caption: React.PropTypes.string
-};
-
-export default ListSubHeader;
diff --git a/components/list/style.scss b/components/list/theme.scss
similarity index 51%
rename from components/list/style.scss
rename to components/list/theme.scss
index e3eccd578..c2e779625 100644
--- a/components/list/style.scss
+++ b/components/list/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .list {
@@ -9,6 +11,16 @@
   text-align: left;
   white-space: nowrap;
   list-style: none;
+
+  & > a {
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $list-item-hover-color;
+    }
+  }
 }
 
 .subheader {
@@ -32,8 +44,20 @@
   .list + & {
     margin-top: - $list-vertical-padding;
   }
-  .list-item ~ & {
-    margin: $list-vertical-padding 0;
+  .listItem ~ & {
+    margin-top: $list-vertical-padding;
+    margin-bottom: $list-vertical-padding;
+  }
+}
+
+.listItem {
+  position: relative;
+  > [data-react-toolbox="ripple"] {
+    overflow: hidden;
+  }
+
+  .ripple {
+    color: $color-text-secondary;
   }
 }
 
@@ -43,89 +67,103 @@
   min-height: $list-item-min-height;
   align-items: center;
   padding: 0 $list-horizontal-padding;
-  overflow: hidden;
   color: $color-text;
   &.selectable:not(.disabled):hover {
     cursor: pointer;
     background-color: $list-item-hover-color;
   }
-  &.with-legend {
-    height: $list-item-min-height-legend;
-  }
   &.disabled {
     pointer-events: none;
-    &:not(.checkbox-item) {
+    &:not(.checkboxItem) {
       opacity: .5;
     }
-    > .checkbox > [data-role='label'] {
+    > .checkbox > [data-react-toolbox="label"] {
       opacity: .5;
     }
   }
 }
 
-.checkbox {
-  display: flex;
-  width: 100%;
-  min-height: $list-item-min-height;
-  align-items: center;
-  margin: 0;
-  cursor: pointer;
-  > [data-role='checkbox'] {
-    margin-right: $list-item-right-icon-margin;
+.left {
+  [data-react-toolbox="font-icon"] {
+    width: $list-item-icon-size;
   }
-  > [data-role='label'] {
-    padding-left: 0;
+  & :last-child {
+    > [data-react-toolbox="font-icon"] {
+      margin-right: $list-item-right-icon-margin;
+    }
   }
 }
 
-.ripple {
-  opacity: .1;
-}
+.right {
+  > :last-child  {
+    margin-right: 0;
+  }
 
-.text {
-  flex-grow: 1;
+  > :first-child {
+    margin-left: $list-horizontal-padding;
+  }
 }
 
-.caption {
-  display: block;
-  font-size: $font-size-normal;
-  color: $color-text;
+.left, .right {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  vertical-align: middle;
 }
 
-.legend {
-  display: block;
-  padding-top: $list-item-legend-margin-top;
-  font-size: $font-size-small;
-  color: $color-text-secondary;
-  white-space: normal;
+.itemAction {
+  display: flex;
+  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
+
+  > * {
+    padding: 0;
+  }
+
+  > [data-react-toolbox="font-icon"] {
+    font-size: $list-item-icon-font-size;
+    color: $color-text-secondary;
+  }
 }
 
-.avatar {
-  display: flex;
-  width: $list-item-avatar-height;
-  height: $list-item-avatar-height;
-  margin: $list-item-avatar-margin $list-horizontal-padding $list-item-avatar-margin 0;
-  overflow: hidden;
-  border-radius: 50%;
+.itemContentRoot {
+  display: block;
+  flex-grow: 1;
+  &.large {
+    display: flex;
+    height: $list-item-min-height-legend;
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 
-.right, .left {
+.checkbox {
   display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: $list-item-min-height;
   align-items: center;
-  vertical-align: middle;
-  &.icon {
-    font-size: $list-item-icon-font-size;
-    color: $color-text-secondary;
+  margin: 0;
+  cursor: pointer;
+  > [data-react-toolbox="check"] {
+    margin-right: $list-item-right-checkbox-margin;
+  }
+  > [data-react-toolbox="label"] {
+    padding-left: 0;
   }
 }
 
-.right {
-  margin-left: $list-horizontal-padding;
-}
+.itemText {
+  display: block;
 
-.left {
-  &.icon {
-    width: $list-item-icon-size;
-    margin-right: $list-item-right-icon-margin;
+  &:not(.primary) {
+    padding-top: $list-item-legend-margin-top;
+    font-size: $font-size-small;
+    color: $color-text-secondary;
+    white-space: normal;
+  }
+
+  &.primary {
+    font-size: $font-size-normal;
+    color: $color-text;
   }
 }
diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
new file mode 100644
index 000000000..190b3cba9
--- /dev/null
+++ b/components/menu/IconMenu.js
@@ -0,0 +1,92 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
+import InjectIconButton from '../button/IconButton.js';
+import InjectMenu from './Menu.js';
+
+const factory = (IconButton, Menu) => {
+  class IconMenu extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      iconRipple: PropTypes.bool,
+      menuRipple: PropTypes.bool,
+      onClick: PropTypes.func,
+      onHide: PropTypes.func,
+      onSelect: PropTypes.func,
+      onShow: PropTypes.func,
+      position: PropTypes.string,
+      selectable: PropTypes.bool,
+      selected: PropTypes.any,
+      theme: PropTypes.shape({
+        icon: PropTypes.string,
+        iconMenu: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      className: '',
+      icon: 'more_vert',
+      iconRipple: true,
+      menuRipple: true,
+      position: 'auto',
+      selectable: false
+    };
+
+    state = {
+      active: false
+    }
+
+    handleButtonClick = (event) => {
+      this.setState({ active: !this.state.active });
+      if (this.props.onClick) this.props.onClick(event);
+    };
+
+    handleMenuHide = () => {
+      this.setState({ active: false });
+      if (this.props.onHide) this.props.onHide();
+    }
+
+    render () {
+      const {
+        children, className, icon, iconRipple, menuRipple, onHide, // eslint-disable-line
+        onSelect, onShow, position, selectable, selected, theme, ...other
+      } = this.props;
+      return (
+        <div {...other} className={classnames(theme.iconMenu, className)}>
+          <IconButton
+            className={theme.icon}
+            icon={icon}
+            onClick={this.handleButtonClick}
+            ripple={iconRipple}
+          />
+          <Menu
+            active={this.state.active}
+            onHide={this.handleMenuHide}
+            onSelect={onSelect}
+            onShow={onShow}
+            position={position}
+            ripple={menuRipple}
+            selectable={selectable}
+            selected={selected}
+            theme={theme}
+          >
+            {children}
+          </Menu>
+        </div>
+      );
+    }
+  }
+
+  return IconMenu;
+};
+
+const IconMenu = factory(InjectIconButton, InjectMenu);
+export default themr(MENU)(IconMenu);
+export { factory as iconMenuFactory };
+export { IconMenu };
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
new file mode 100644
index 000000000..67bc5e490
--- /dev/null
+++ b/components/menu/Menu.js
@@ -0,0 +1,235 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
+import { events, utils } from '../utils';
+import InjectMenuItem from './MenuItem.js';
+
+const POSITION = {
+  AUTO: 'auto',
+  STATIC: 'static',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight'
+};
+
+const factory = (MenuItem) => {
+  class Menu extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      onHide: PropTypes.func,
+      onSelect: PropTypes.func,
+      onShow: PropTypes.func,
+      outline: PropTypes.bool,
+      position: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
+      ripple: PropTypes.bool,
+      selectable: PropTypes.bool,
+      selected: PropTypes.any,
+      theme: PropTypes.shape({
+        active: PropTypes.string,
+        bottomLeft: PropTypes.string,
+        bottomRight: PropTypes.string,
+        menu: PropTypes.string,
+        menuInner: PropTypes.string,
+        outline: PropTypes.string,
+        rippled: PropTypes.string,
+        static: PropTypes.string,
+        topLeft: PropTypes.string,
+        topRight: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      active: false,
+      outline: true,
+      position: POSITION.STATIC,
+      ripple: true,
+      selectable: true
+    };
+
+    state = {
+      active: this.props.active,
+      rippled: false
+    };
+
+    componentDidMount () {
+      this.positionTimeoutHandle = setTimeout(() => {
+        const { width, height } = this.refs.menu.getBoundingClientRect();
+        const position = this.props.position === POSITION.AUTO
+          ? this.calculatePosition()
+          : this.props.position;
+        this.setState({ position, width, height });
+      });
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (this.props.position !== nextProps.position) {
+        const position = nextProps.position === POSITION.AUTO
+          ? this.calculatePosition()
+          : nextProps.position;
+        this.setState({ position });
+      }
+
+      /**
+       * If the menu is going to be activated via props and its not active, verify
+       * the position is appropriated and then show it recalculating position if its
+       * wrong. It should be shown in two consecutive setState.
+       */
+      if (!this.props.active && nextProps.active && !this.state.active) {
+        if (nextProps.position === POSITION.AUTO) {
+          const position = this.calculatePosition();
+          if (this.state.position !== position) {
+            this.setState({ position, active: false }, () => {
+              this.activateTimeoutHandle = setTimeout(() => { this.show(); }, 20);
+            });
+          } else {
+            this.show();
+          }
+        } else {
+          this.show();
+        }
+      }
+
+      /**
+       * If the menu is being deactivated via props and the current state is
+       * active, it should be hid.
+       */
+      if (this.props.active && !nextProps.active && this.state.active) {
+        this.hide();
+      }
+    }
+
+    componentWillUpdate (nextProps, nextState) {
+      if (!this.state.active && nextState.active) {
+        events.addEventsToDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick
+        });
+      }
+    }
+
+    componentDidUpdate (prevProps, prevState) {
+      if (prevState.active && !this.state.active) {
+        if (this.props.onHide) this.props.onHide();
+        events.removeEventsFromDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick
+        });
+      } else if (!prevState.active && this.state.active && this.props.onShow) {
+        this.props.onShow();
+      }
+    }
+
+    componentWillUnmount () {
+      if (this.state.active) {
+        events.removeEventsFromDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick
+        });
+      }
+      clearTimeout(this.positionTimeoutHandle);
+      clearTimeout(this.activateTimeoutHandle);
+    }
+
+    handleDocumentClick = (event) => {
+      if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+        this.setState({active: false, rippled: false});
+      }
+    };
+
+    handleSelect = (item, event) => {
+      const { value, onClick } = item.props;
+      if (onClick) event.persist();
+      this.setState({ active: false, rippled: this.props.ripple }, () => {
+        if (onClick) onClick(event);
+        if (this.props.onSelect) this.props.onSelect(value);
+      });
+    };
+
+    calculatePosition () {
+      const parentNode = ReactDOM.findDOMNode(this).parentNode;
+      if (!parentNode) return;
+      const {top, left, height, width} = parentNode.getBoundingClientRect();
+      const {height: wh, width: ww} = utils.getViewport();
+      const toTop = top < ((wh / 2) - height / 2);
+      const toLeft = left < ((ww / 2) - width / 2);
+      return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
+    }
+
+    getMenuStyle () {
+      const { width, height, position } = this.state;
+      if (position !== POSITION.STATIC) {
+        if (this.state.active) {
+          return { clip: `rect(0 ${width}px ${height}px 0)` };
+        } else if (position === POSITION.TOP_RIGHT) {
+          return { clip: `rect(0 ${width}px 0 ${width}px)` };
+        } else if (position === POSITION.BOTTOM_RIGHT) {
+          return { clip: `rect(${height}px ${width}px ${height}px ${width}px)` };
+        } else if (position === POSITION.BOTTOM_LEFT) {
+          return { clip: `rect(${height}px 0 ${height}px 0)` };
+        } else if (position === POSITION.TOP_LEFT) {
+          return { clip: 'rect(0 0 0 0)' };
+        }
+      }
+    }
+
+    getRootStyle () {
+      if (this.state.position !== POSITION.STATIC) {
+        return { width: this.state.width, height: this.state.height };
+      }
+    }
+
+    renderItems () {
+      return React.Children.map(this.props.children, (item) => {
+        if (!item) return item;
+        if (item.type === MenuItem) {
+          return React.cloneElement(item, {
+            ripple: item.props.ripple || this.props.ripple,
+            selected: typeof item.props.value !== 'undefined' && this.props.selectable && item.props.value === this.props.selected,
+            onClick: this.handleSelect.bind(this, item)
+          });
+        } else {
+          return React.cloneElement(item);
+        }
+      });
+    }
+
+    show () {
+      const { width, height } = this.refs.menu.getBoundingClientRect();
+      this.setState({active: true, width, height});
+    }
+
+    hide () {
+      this.setState({active: false});
+    }
+
+    render () {
+      const { theme } = this.props;
+      const outlineStyle = { width: this.state.width, height: this.state.height };
+      const className = classnames([theme.menu, theme[this.state.position]], {
+        [theme.active]: this.state.active,
+        [theme.rippled]: this.state.rippled
+      }, this.props.className);
+
+      return (
+        <div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
+          {this.props.outline ? <div className={theme.outline} style={outlineStyle} /> : null}
+          <ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
+            {this.renderItems()}
+          </ul>
+        </div>
+      );
+    }
+  }
+
+  return Menu;
+};
+
+const Menu = factory(InjectMenuItem);
+export default themr(MENU)(Menu);
+export { factory as menuFactory };
+export { Menu };
diff --git a/components/menu/MenuDivider.js b/components/menu/MenuDivider.js
new file mode 100644
index 000000000..b99cf87c8
--- /dev/null
+++ b/components/menu/MenuDivider.js
@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
+
+const MenuDivider = ({ theme }) => (
+  <hr data-react-toolbox='menu-divider' className={theme.menuDivider}/>
+);
+
+MenuDivider.propTypes = {
+  theme: PropTypes.shape({
+    menuDivider: PropTypes.string
+  })
+};
+
+export default themr(MENU)(MenuDivider);
+export { MenuDivider };
diff --git a/components/menu/MenuItem.js b/components/menu/MenuItem.js
new file mode 100644
index 000000000..4ce2dc185
--- /dev/null
+++ b/components/menu/MenuItem.js
@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple) => {
+  class MenuItem extends Component {
+    static propTypes = {
+      caption: PropTypes.string,
+      children: PropTypes.any,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      onClick: PropTypes.func,
+      selected: PropTypes.bool,
+      shortcut: PropTypes.string,
+      theme: PropTypes.shape({
+        caption: PropTypes.string,
+        disabled: PropTypes.string,
+        icon: PropTypes.string,
+        menuItem: PropTypes.string,
+        selected: PropTypes.string,
+        shortcut: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      className: '',
+      disabled: false,
+      selected: false
+    };
+
+    handleClick = (event) => {
+      if (this.props.onClick && !this.props.disabled) {
+        this.props.onClick(event, this);
+      }
+    };
+
+    render () {
+      const {icon, caption, children, shortcut, selected, disabled, theme, ...others} = this.props;
+      const className = classnames(theme.menuItem, {
+        [theme.selected]: selected,
+        [theme.disabled]: disabled
+      }, this.props.className);
+
+      return (
+        <li {...others} data-react-toolbox='menu-item' className={className} onClick={this.handleClick}>
+          {icon ? <FontIcon value={icon} className={theme.icon}/> : null}
+          <span className={theme.caption}>{caption}</span>
+          {shortcut ? <small className={theme.shortcut}>{shortcut}</small> : null}
+          {children}
+        </li>
+      );
+    }
+  }
+
+  return ripple(MenuItem);
+};
+
+const MenuItem = factory(rippleFactory({}));
+export default themr(MENU)(MenuItem);
+export { factory as menuItemFactory };
+export { MenuItem };
diff --git a/components/menu/__test__/index.spec.js b/components/menu/__test__/index.spec.js
new file mode 100644
index 000000000..fefb186fc
--- /dev/null
+++ b/components/menu/__test__/index.spec.js
@@ -0,0 +1,29 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-addons-test-utils';
+import Menu from '../Menu';
+import MenuItem, {MenuItem as RawMenuItem} from '../MenuItem';
+
+describe('MenuItem', function () {
+  describe('#onClick', function () {
+    it('passes to listener the event', function () {
+      let listenerCalled = false;
+      const handleClick = function (event) {
+        listenerCalled = true;
+        expect(event).toExist();
+        expect(event.target).toExist();
+      };
+
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Menu>
+          <MenuItem key="1" onClick={handleClick}/>
+        </Menu>);
+
+      const menuItem = ReactTestUtils.findRenderedComponentWithType(tree, RawMenuItem);
+      ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(menuItem));
+
+      expect(listenerCalled).toBe(true);
+    });
+  });
+});
diff --git a/components/menu/_config.scss b/components/menu/_config.scss
index 631cf29ac..0b5343661 100644
--- a/components/menu/_config.scss
+++ b/components/menu/_config.scss
@@ -1,15 +1,16 @@
 $menu-expand-duration: .3s !default;
 $menu-fade-duration: .2s !default;
 $menu-ripple-delay: .3s !default;
-$menu-background-color: unquote("rgb(#{$color-white})");
-$menu-padding: .8 * $unit 0;
-$menu-outline-border-radius: .2 * $unit;
-$menu-item-hover-background: unquote("rgb(#{$palette-grey-200})");
-$menu-item-icon-font-size: 2.4 * $unit;
-$menu-item-icon-size: 1.6 * $menu-item-icon-font-size;
-$menu-item-height: 4.8 * $unit;
-$menu-item-padding: 1.6 * $unit;
-$menu-item-font-size: 1.6 * $unit;
-$menu-divider-height: (4.8 * $unit) / 4;
-$menu-icon-size: 2.3 * $unit;
-$menu-icon-ripple-duration: 650ms;
+$menu-background-color: $color-white !default;
+$menu-padding: .8 * $unit 0 !default;
+$menu-outline-border-radius: .2 * $unit !default;
+$menu-item-hover-background: $palette-grey-200 !default;
+$menu-item-selected-background: transparent !default;
+$menu-item-icon-font-size: 2.4 * $unit !default;
+$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
+$menu-item-height: 4.8 * $unit !default;
+$menu-item-padding: 1.6 * $unit !default;
+$menu-item-font-size: 1.6 * $unit !default;
+$menu-divider-height: (4.8 * $unit) / 4 !default;
+$menu-icon-size: 2.3 * $unit !default;
+$menu-icon-ripple-duration: 650ms !default;
diff --git a/components/menu/icon_menu.jsx b/components/menu/icon_menu.jsx
deleted file mode 100644
index 51a5da009..000000000
--- a/components/menu/icon_menu.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import FontIcon from '../font_icon';
-import Menu from './menu';
-import Ripple from '../ripple';
-import style from './style.icon_menu';
-
-class IconMenu extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    icon: React.PropTypes.string,
-    iconRipple: React.PropTypes.bool,
-    menuRipple: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    onHide: React.PropTypes.func,
-    onShow: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    position: React.PropTypes.string,
-    selectable: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: '',
-    icon: 'more-vert',
-    iconRipple: true,
-    menuRipple: true,
-    position: 'auto',
-    selectable: false
-  };
-
-  handleButtonClick = () => {
-    this.refs.menu.show();
-    if (this.props.onClick) this.props.onClick();
-  };
-
-  handleMouseDown = (event) => {
-    if (this.props.iconRipple) {
-      this.refs.ripple.start(event);
-    }
-  };
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div className={className}>
-        <FontIcon
-          className={style.icon}
-          onClick={this.handleButtonClick}
-          onMouseDown={this.handleMouseDown}
-          value={this.props.icon}
-        />
-        <Menu
-          ref='menu'
-          onHide={this.props.onHide}
-          onSelect={this.props.onSelect}
-          onShow={this.props.onShow}
-          position={this.props.position}
-          ripple={this.props.menuRipple}
-          selectable={this.props.selectable}
-        >
-          { this.props.children }
-        </Menu>
-        { this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null }
-      </div>
-    );
-  }
-}
-
-export default IconMenu;
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
new file mode 100644
index 000000000..d8de21a22
--- /dev/null
+++ b/components/menu/index.d.ts
@@ -0,0 +1,242 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface MenuTheme {
+  /**
+   * Added to the root element when menu is active.
+   */
+  active?: string;
+  /**
+   * Added to the root when position is bottom left.
+   */
+  bottomLeft?: string;
+  /**
+   * Added to the root when position is bottom right.
+   */
+  bottomRight?: string;
+  /**
+   * Used for the root element of the menu.
+   */
+  menu?: string;
+  /**
+   * Used for the inner wrapper.
+   */
+  menuInner?: string;
+  /**
+   * Used to draw the outline.
+   */
+  outline?: string;
+  /**
+   * Added to the menu in case if should have ripple.
+   */
+  rippled?: string;
+  /**
+   * Added to the root in case its static.
+   */
+  static?: string;
+  /**
+   * Added to the root when position is top left.
+   */
+  topLeft?: string;
+  /**
+   * Added to the root when position is top right.
+   */
+  topRight?: string;
+}
+
+export interface MenuProps extends ReactToolbox.Props {
+  /**
+   * If true, the menu will be displayed as opened by default.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * If true the menu wrapper will show an outline with a soft shadow.
+   * @default true
+   */
+  outline?: boolean;
+  /**
+   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
+   * @default static
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu items will show a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuTheme;
+}
+
+export class Menu extends React.Component<MenuProps, {}> { }
+
+export interface IconMenuTheme {
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the root element of the icon menu.
+   */
+  iconMenu?: string;
+}
+
+export interface IconMenuProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Icon font key string or Element to display the opener icon.
+   * @default more_vert
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the icon will show a ripple when is clicked.
+   * @default true
+   */
+  iconRipple?: boolean;
+  /**
+   * Transferred to the Menu component.
+   * @default true
+   */
+  menuRipple?: boolean;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * Determines the position of the menu. This property is transferred to the inner Menu component.
+   * @default auto
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconMenuTheme;
+}
+
+export class IconMenu extends React.Component<IconMenuProps, {}> { }
+
+export interface MenuDividerTheme {
+  /**
+   *
+   */
+  menuDivider?: string;
+}
+
+export interface MenuDividerProps extends ReactToolbox.Props {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuDividerTheme;
+}
+
+export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
+
+export interface MenuItemTheme {
+  /**
+   * Used for the caption inside the item.
+   */
+  caption?: string;
+  /**
+   * Added to the root element if it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the icon element if exists.
+   */
+  icon?: string;
+  /**
+   * Used as the root class for the component.
+   */
+  menuItem?: string;
+  /**
+   * Added to the root element in case it's selected.
+   */
+  selected?: string;
+  /**
+   * Used for the shortcut element if exists.
+   */
+  shortcut?: string;
+}
+
+export interface MenuItemProps extends ReactToolbox.Props {
+  /**
+   * The text to include in the menu item. Required.
+   */
+  caption: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled and is not selectable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon font key string or Element to display in the right side of the option.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Displays shortcut text on the right side of the caption attribute.
+   */
+  shortcut?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuItemTheme;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, {}> { }
diff --git a/components/menu/index.js b/components/menu/index.js
new file mode 100644
index 000000000..e5a52a3cb
--- /dev/null
+++ b/components/menu/index.js
@@ -0,0 +1,20 @@
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
+import { IconButton } from '../button';
+import { MenuDivider } from './MenuDivider.js';
+import { menuItemFactory } from './MenuItem.js';
+import { menuFactory } from './Menu.js';
+import { iconMenuFactory } from './IconMenu.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(MENU, theme)(Component);
+const ThemedMenuDivider = applyTheme(MenuDivider);
+const ThemedMenuItem = applyTheme(menuItemFactory(themedRippleFactory({})));
+const ThemedMenu = applyTheme(menuFactory(ThemedMenuItem));
+const ThemedIconMenu = applyTheme(iconMenuFactory(IconButton, ThemedMenu));
+
+export { ThemedMenuDivider as MenuDivider };
+export { ThemedMenuItem as MenuItem };
+export { ThemedMenu as Menu };
+export { ThemedIconMenu as IconMenu };
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
deleted file mode 100644
index 42a2075ae..000000000
--- a/components/menu/index.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  Menu: require('./menu'),
-  MenuItem: require('./menu_item'),
-  MenuDivider: require('./menu_divider'),
-  IconMenu: require('./icon_menu')
-};
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
deleted file mode 100644
index 30106f24e..000000000
--- a/components/menu/menu.jsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import MenuItem from './menu_item';
-import utils from '../utils';
-import style from './style.menu';
-
-const POSITION = {
-  AUTO: 'auto',
-  STATIC: 'static',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right'
-};
-
-class Menu extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    onHide: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    onShow: React.PropTypes.func,
-    outline: React.PropTypes.bool,
-    position: React.PropTypes.string,
-    ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool,
-    value: React.PropTypes.any
-  };
-
-  static defaultProps = {
-    active: false,
-    outline: true,
-    position: POSITION.STATIC,
-    ripple: true,
-    selectable: true
-  };
-
-  state = {
-    active: this.props.active,
-    rippled: false,
-    value: this.props.value
-  };
-
-  componentDidMount () {
-    const { width, height } = this.refs.menu.getBoundingClientRect();
-    const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
-    this.setState({ position, width, height });
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      if (this.props.onHide) this.props.onHide();
-      utils.events.removeEventsFromDocument({click: this.handleDocumentClick});
-    } else if (!prevState.active && this.state.active && this.props.onShow) {
-      this.props.onShow();
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (this.props.position !== nextProps.position) {
-      const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
-      this.setState({ position });
-    }
-  }
-
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
-      utils.events.addEventsToDocument({click: this.handleDocumentClick});
-    }
-  }
-
-  shouldComponentUpdate (nextProps, nextState) {
-    if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
-      const position = this.calculatePosition();
-      if (this.state.position !== position) {
-        this.setState({ position, active: false }, () => {
-          setTimeout(() => {this.setState({active: true}); }, 20);
-        });
-        return false;
-      }
-    }
-    return true;
-  }
-
-  handleDocumentClick = (event) => {
-    if (this.state.active && !utils.events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
-      this.setState({active: false, rippled: false});
-    }
-  };
-
-  handleSelect = (item) => {
-    const { value, onClick } = item.props;
-    this.setState({ value, active: false, rippled: this.props.ripple }, () => {
-      if (onClick) onClick();
-      if (this.props.onSelect) this.props.onSelect(value, this);
-    });
-  };
-
-  calculatePosition () {
-    const {top, left, height, width} = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect();
-    const {height: wh, width: ww} = utils.getViewport();
-    const toTop = top < ((wh / 2) - height / 2);
-    const toLeft = left < ((ww / 2) - width / 2);
-    return `${toTop ? 'top' : 'bottom'}-${toLeft ? 'left' : 'right'}`;
-  }
-
-  getMenuStyle () {
-    const { width, height, position } = this.state;
-    if (position !== POSITION.STATIC) {
-      if (this.state.active) {
-        return { clip: `rect(0 ${width}px ${height}px 0)` };
-      } else if (position === POSITION.TOP_RIGHT) {
-        return { clip: `rect(0 ${width}px 0 ${width}px)` };
-      } else if (position === POSITION.BOTTOM_RIGHT) {
-        return { clip: `rect(${height}px ${width}px ${height}px ${width}px)` };
-      } else if (position === POSITION.BOTTOM_LEFT) {
-        return { clip: `rect(${height}px 0 ${height}px 0)` };
-      } else if (position === POSITION.TOP_LEFT) {
-        return { clip: `rect(0 0 0 0)` };
-      }
-    }
-  }
-
-  getRootStyle () {
-    if (this.state.position !== POSITION.STATIC) {
-      return { width: this.state.width, height: this.state.height };
-    }
-  }
-
-  renderItems () {
-    return React.Children.map(this.props.children, (item) => {
-      if (item.type === MenuItem) {
-        return React.cloneElement(item, {
-          ripple: item.props.ripple || this.props.ripple,
-          selected: item.props.value && this.props.selectable && item.props.value === this.state.value,
-          onClick: this.handleSelect.bind(this, item)
-        });
-      } else {
-        return React.cloneElement(item);
-      }
-    });
-  }
-
-  render () {
-    const outlineStyle = { width: this.state.width, height: this.state.height };
-    let className = `${style.root} ${style[this.state.position]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.state.rippled) className += ` ${style.rippled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div className={className} style={this.getRootStyle()}>
-        { this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null }
-        <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
-          { this.renderItems() }
-        </ul>
-      </div>
-    );
-  }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value: value});
-  }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-}
-
-export default Menu;
diff --git a/components/menu/menu_divider.jsx b/components/menu/menu_divider.jsx
deleted file mode 100644
index 8eac0f304..000000000
--- a/components/menu/menu_divider.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import style from './style.menu_divider';
-
-const MenuDivider = () => (
-  <hr data-react-toolbox='menu-divider' className={style.root}/>
-);
-
-export default MenuDivider;
diff --git a/components/menu/menu_item.jsx b/components/menu/menu_item.jsx
deleted file mode 100644
index a827d81dd..000000000
--- a/components/menu/menu_item.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import FontIcon from '../font_icon';
-import Ripple from '../ripple';
-import style from './style.menu_item';
-
-class MenuItem extends React.Component {
-  static propTypes = {
-    caption: React.PropTypes.string.isRequired,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    icon: React.PropTypes.string,
-    ripple: React.PropTypes.bool,
-    shortcut: React.PropTypes.string,
-    selected: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: '',
-    disabled: false,
-    ripple: false,
-    selected: false
-  };
-
-  handleClick = (event) => {
-    if (this.props.onClick && !this.props.disabled) {
-      this.props.onClick(event, this);
-    }
-  };
-
-  handleMouseDown = (event) => {
-    if (this.props.ripple && !this.props.disabled) {
-      this.refs.ripple.start(event);
-    }
-  };
-
-  render () {
-    let className = style.root;
-    if (this.props.selected) className += ` ${style.selected}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <li
-        data-react-toolbox='menu-item'
-        className={className}
-        onClick={this.handleClick}
-        onMouseDown={this.handleMouseDown}
-      >
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null }
-        <span className={style.caption}>{this.props.caption}</span>
-        { this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null }
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null }
-      </li>
-    );
-  }
-}
-
-export default MenuItem;
diff --git a/components/menu/readme.md b/components/menu/readme.md
index f4fe43c5c..e88357ed2 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -1,75 +1,112 @@
 # Menu
- 
-A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
+
+A [Menu](https://material.google.com/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
 
 <!-- example -->
 ```jsx
-import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox';
- 
+import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox/lib/menu';
+
 const MenuTest = () => (
-  <IconMenu icon='more-vert' position='top-left' menuRipple selectable>
-    <MenuItem value='download' icon='get-app' caption='Download' />
+  <IconMenu icon='more_vert' position='topLeft' menuRipple>
+    <MenuItem value='download' icon='get_app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
-    <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
+    <MenuItem value='settings' icon='open_in_browser' caption='Open in app' />
     <MenuDivider />
     <MenuItem value='signout' icon='delete' caption='Delete' disabled />
   </IconMenu>
 );
 ```
 
+If you want to provide a theme for any of these subcomponents via context, the component key is `RTMenu`.
+
 ## Menu
 
 This subcomponent is the default wrapper for a menu and is responsible for the opening behavior. Its properties can affect to the Item children.
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name          | Type          | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `active`   | `Boolean`    | `false`    | If true, the menu will be displayed as opened by default.| 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the menu wrapper.| 
-| `onHide`    | `Function`    |    | Callback that will be called when the menu is being hid. |
-| `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
-| `outline`    | `Boolean`    | `true`  | If true the menu wrapper will show an outline with a soft shadow. |
-| `position`    | `String`    | `static`  | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `top-left`, `top-right`, `bottom-left`, `bottom-right`. |
-| `ripple`    | `Boolean`    | `true`  | If true, the menu items will show a ripple effect on click. |
-| `selectable`    | `Boolean`    | `true`  | If true, the menu will keep a value to highlight the active child item. |
-| `value`    | `Boolean`    |  | Used for selectable menus and indicates the initial value so the child item with this value can be highlighted. |
-
-The menu has state to keep a value with the currently selected item. It also exposes methods to show and hide the menu from the code:
-
-- `getValue` is used to get the current value.
-- `setValue` is used to set a new active value.
-- `show` is used to show the menu.
-- `hide` is used to hide the menu.
+| `active`      | `Boolean`     | `false`     | If true, the menu will be displayed as opened by default.|
+| `className`   | `String`      | `''`        | Set a class to give custom styles to the menu wrapper.|
+| `onHide`      | `Function`    |             | Callback that will be called when the menu is being hidden. |
+| `onSelect`    | `Function`    |             | Callback that will be invoked when a menu item is selected. |
+| `onShow`      | `Function`    |             | Callback that will be invoked when the menu is being shown. |
+| `outline`     | `Boolean`     | `true`      | If true the menu wrapper will show an outline with a soft shadow. |
+| `position`    | `String`      | `static`    | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `topLeft`, `topRight`, `bottomLeft`, `bottomRight`. |
+| `ripple`      | `Boolean`     | `true`      | If true, the menu items will show a ripple effect on click. |
+| `selectable`  | `Boolean`     | `false`     | If true, the menu will keep a value to highlight the active child item. |
+| `selected`    | `Any`         |             | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `active`   | Added to the root element when menu is active.|
+| `bottomLeft`   | Added to the root when position is bottom left.|
+| `bottomRight`   | Added to the root when position is bottom right.|
+| `menu`   | Used for the root element of the menu.|
+| `menuInner`   | Used for the inner wrapper.|
+| `outline`   | Used to draw the outline.|
+| `rippled`   | Added to the menu in case if should have ripple.|
+| `static`   | Added to the root in case its static.|
+| `topLeft`   | Added to the root when position is top left.|
+| `topRight`   | Added to the root when position is top right.|
 
 ## Icon Menu
 
 As the most usual scenario will be to open the menu from a click in an Icon, we provide this subcomponent implementing this behavior. The `IconMenu` shows an icon and implements a `Menu` under the covers that is shown when is clicked. Some of its properties are transferred to the menu, others to the children:
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the icon wrapper.| 
-| `icon`    | `String`    | `more-vert`  | Icon font key string to display the opener icon. |
-| `iconRipple`    | `String`    | `true`  | If true, the icon will show a ripple when is clicked. |
-| `menuRipple`    | `String`    | `true`  | Transferred to the `Menu` component. |
-| `onClick`    | `Function`    |    | Callback that will be called when the icon is clicked. |
-| `onHide`    | `Function`    |    | Callback that will be called when the menu is being hid. |
-| `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
-| `onSelect`    | `Function`    |    | Callback that will be invoked when a menu item is selected. |
-| `position`    | `String`    | `auto`  | Determine the position of the menu. This property is transferred to the inner `Menu` component. |
-| `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. Transferred to the `Menu` |
+| `className`     | `String`              |  `''`           | Set a class to give custom styles to the icon wrapper.|
+| `icon`          | `String` or `Element` | `more_vert`     | Icon font key string or Element to display the opener icon. |
+| `iconRipple`    | `Boolean`             | `true`          | If true, the icon will show a ripple when is clicked. |
+| `menuRipple`    | `Boolean`             | `true`          | Transferred to the `Menu` component. |
+| `onClick`       | `Function`            |                 | Callback that will be called when the icon is clicked. |
+| `onHide`        | `Function`            |                 | Callback that will be called when the menu is being hidden. |
+| `onSelect`      | `Function`            |                 | Callback that will be invoked when a menu item is selected. |
+| `onShow`        | `Function`            |                 | Callback that will be invoked when the menu is being shown. |
+| `position`      | `String`              | `auto`          | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
+| `selectable`    | `Boolean`             | `false`         | If true, the menu will keep a value to highlight the active child item. |
+| `selected`      | `Any`                 |                 | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `icon`   | Used for the icon element.|
+| `iconMenu`   | Used for the root element of the icon menu.|
 
 ## Menu Item
 
-Is the inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
+The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name              | Type              | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |    | The text to include in the menu item.| 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the item.| 
-| `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled and is not selectable.| 
-| `icon`    | `String`    |  | Icon font key string to display in the right side of the option. |
-| `ripple`    | `Boolean`    | `false`  | If true, the item will show a ripple effect when it's clicked. Inherited from the parent. |
-| `selected`    | `Boolean`    | `false`  | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
+| `caption`     | `String`              |             | The text to include in the menu item. Required.|
+| `className`   | `String`              | `''`        | Set a class to give custom styles to the item.|
+| `disabled`    | `Boolean`             | `false`     | If true, the item will be displayed as disabled and is not selectable.|
+| `icon`        | `String` or `Element` |             | Icon font key string or Element to display in the right side of the option. |
+| `onClick`     | `Function`            |             | Callback that will be called when Component is clicked. |
+| `selected`    | `Boolean`             | `false`     | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
+| `shortcut`    | `String`              | `''`        | Displays shortcut text on the right side of the `caption` attribute. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `caption`   | Used for the caption inside the item.|
+| `disabled`   | Added to the root element if it's disabled.|
+| `icon`   | Used for the icon element if exists.|
+| `menuItem`   | Used as the root class for the component.|
+| `selected`   | Added to the root element in case it's selected.|
+| `shortcut`   | Used for the shortcut element if exists.|
 
 ## Menu Divider
 
-A very simple component that just displays a separator between options. It has no props and no state or methods, just markup.
+A very simple component that just displays a separator between options. It has no props and no state or methods, just markup. Also it accepts a single class for the styling which is `menuDivider`.
diff --git a/components/menu/style.icon_menu.scss b/components/menu/style.icon_menu.scss
deleted file mode 100644
index 961680bfc..000000000
--- a/components/menu/style.icon_menu.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  position: relative;
-  display: inline-block;
-  text-align: center;
-}
-
-.icon {
-  font-size: $menu-icon-size;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.ripple {
-  opacity: .1;
-  transition-duration: $menu-icon-ripple-duration;
-}
diff --git a/components/menu/style.menu_divider.scss b/components/menu/style.menu_divider.scss
deleted file mode 100644
index dcd63f78e..000000000
--- a/components/menu/style.menu_divider.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: $menu-divider-height 0;
-  background-color: $color-divider;
-}
diff --git a/components/menu/style.menu_item.scss b/components/menu/style.menu_item.scss
deleted file mode 100644
index 7445b64b5..000000000
--- a/components/menu/style.menu_item.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  position: relative;
-  display: flex;
-  height: $menu-item-height;
-  align-items: center;
-  padding: 0 $menu-item-padding;
-  overflow: hidden;
-  font-size: $menu-item-font-size;
-  color: $color-text;
-  &:not(.disabled):hover {
-    cursor: pointer;
-    background-color: $menu-item-hover-background;
-  }
-  &.disabled {
-    pointer-events: none;
-    opacity: .5;
-  }
-  &.selected {
-    font-weight: 500;
-  }
-}
-
-.icon {
-  width: $menu-item-icon-size;
-  font-size: $menu-item-icon-font-size !important;
-}
-
-.caption {
-  flex-grow: 1;
-  font-size: $font-size-normal;
-}
-
-.shortcut {
-  margin-left: $menu-item-padding;
-}
-
-.ripple {
-  opacity: .1;
-}
diff --git a/components/menu/style.menu.scss b/components/menu/theme.scss
similarity index 58%
rename from components/menu/style.menu.scss
rename to components/menu/theme.scss
index 0026f0419..9f4ec9b3c 100644
--- a/components/menu/style.menu.scss
+++ b/components/menu/theme.scss
@@ -1,10 +1,21 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.root {
+.iconMenu {
   position: relative;
   display: inline-block;
-  &.top-left {
+  text-align: center;
+  .icon {
+    cursor: pointer;
+  }
+}
+
+.menu {
+  position: relative;
+  display: inline-block;
+  &.topLeft {
     position: absolute;
     top: 0;
     left: 0;
@@ -12,7 +23,7 @@
       transform-origin: 0 0;
     }
   }
-  &.top-right {
+  &.topRight {
     position: absolute;
     top: 0;
     right: 0;
@@ -20,7 +31,7 @@
       transform-origin: 100% 0;
     }
   }
-  &.bottom-left {
+  &.bottomLeft {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -28,7 +39,7 @@
       transform-origin: 0 100%;
     }
   }
-  &.bottom-right {
+  &.bottomRight {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -46,7 +57,7 @@
       transform: scale(0);
       will-change: transform;
     }
-    > .menu {
+    > .menuInner {
       position: absolute;
       top: 0;
       left: 0;
@@ -56,7 +67,7 @@
       > .outline {
         transition-delay: $menu-ripple-delay;
       }
-      > .menu {
+      > .menuInner {
         transition-delay: $menu-ripple-delay;
       }
     }
@@ -66,7 +77,7 @@
         opacity: 1;
         transform: scale(1);
       }
-      > .menu {
+      > .menuInner {
         opacity: 1;
         transition: opacity $menu-fade-duration $animation-curve-default,
         clip $menu-expand-duration $animation-curve-default;
@@ -85,7 +96,7 @@
   border-radius: $menu-outline-border-radius;
 }
 
-.menu {
+.menuInner {
   position: relative;
   display: block;
   padding: $menu-padding;
@@ -93,3 +104,51 @@
   white-space: nowrap;
   list-style: none;
 }
+
+.menuItem {
+  position: relative;
+  display: flex;
+  height: $menu-item-height;
+  align-items: center;
+  padding: 0 $menu-item-padding;
+  overflow: hidden;
+  font-size: $menu-item-font-size;
+  color: $color-text;
+  &:not(.disabled):hover {
+    cursor: pointer;
+    background-color: $menu-item-hover-background;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: .5;
+  }
+  &.selected {
+    font-weight: 500;
+    background-color: $menu-item-selected-background;
+  }
+  .ripple {
+    color: $color-text-secondary;
+  }
+
+  .icon {
+    width: $menu-item-icon-size;
+    font-size: $menu-item-icon-font-size !important;
+  }
+}
+
+.caption {
+  flex-grow: 1;
+  font-size: $font-size-normal;
+}
+
+.shortcut {
+  margin-left: $menu-item-padding;
+}
+
+.menuDivider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: $menu-divider-height 0;
+  background-color: $color-divider;
+}
diff --git a/components/navigation/Navigation.js b/components/navigation/Navigation.js
new file mode 100644
index 000000000..79d384ae3
--- /dev/null
+++ b/components/navigation/Navigation.js
@@ -0,0 +1,55 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { NAVIGATION } from '../identifiers.js';
+import InjectButton from '../button/Button.js';
+import InjectLink from '../link/Link.js';
+
+const factory = (Button, Link) => {
+  const Navigation = ({ actions, children, className, routes, theme, type }) => {
+    const _className = classnames(theme[type], className);
+    const buttons = actions.map((action, index) => {
+      return <Button className={theme.button} key={index} {...action} />;
+    });
+
+    const links = routes.map((route, index) => {
+      return <Link className={theme.link} key={index} {...route} />;
+    });
+
+    return (
+      <nav data-react-toolbox='navigation' className={_className}>
+        {links}
+        {buttons}
+        {children}
+      </nav>
+    );
+  };
+
+  Navigation.propTypes = {
+    actions: PropTypes.array,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    routes: PropTypes.array,
+    theme: PropTypes.shape({
+      button: PropTypes.string,
+      horizontal: PropTypes.string,
+      link: PropTypes.string,
+      vertical: PropTypes.string
+    }),
+    type: PropTypes.oneOf(['vertical', 'horizontal'])
+  };
+
+  Navigation.defaultProps = {
+    actions: [],
+    className: '',
+    type: 'horizontal',
+    routes: []
+  };
+
+  return Navigation;
+};
+
+const Navigation = factory(InjectButton, InjectLink);
+export default themr(NAVIGATION)(Navigation);
+export { factory as navigationFactory };
+export { Navigation };
diff --git a/components/navigation/_config.scss b/components/navigation/_config.scss
index a24e899f0..6b654ac73 100644
--- a/components/navigation/_config.scss
+++ b/components/navigation/_config.scss
@@ -1,3 +1,2 @@
-$navigation-space: $unit;
-$navigation-color: unquote("rgb(#{$color-black})") !default;
-$navigation-background: unquote("rgb(#{$color-white})") !default;
+$navigation-space: $unit !default;
+$navigation-color: $color-black !default;
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
new file mode 100644
index 000000000..07dfaba3b
--- /dev/null
+++ b/components/navigation/index.d.ts
@@ -0,0 +1,47 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface NavigationTheme {
+  /**
+   * Used for buttons provided in the component.
+   */
+  button?: string;
+  /**
+   * Used for the root element if the layout is horizontal.
+   */
+  horizontal?: string;
+  /**
+   * Used for links provided in the component.
+   */
+  link?: string;
+  /**
+   * Used for the root element if the layout is vertical.
+   */
+  vertical?: string;
+}
+
+export interface NavigationProps extends ReactToolbox.Props {
+  /**
+   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
+   */
+  actions?: any[];
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+   */
+  routes?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavigationTheme;
+  /**
+   * Type of the navigation, it can be vertical or horizontal.
+   * @default horizontal
+   */
+  type?: "vertical" | "horizontal";
+}
+
+export class Navigation extends React.Component<NavigationProps, {}> { }
diff --git a/components/navigation/index.js b/components/navigation/index.js
new file mode 100644
index 000000000..d02ab54d0
--- /dev/null
+++ b/components/navigation/index.js
@@ -0,0 +1,10 @@
+import { themr } from 'react-css-themr';
+import { NAVIGATION } from '../identifiers.js';
+import { navigationFactory } from './Navigation.js';
+import { Button } from '../button';
+import { Link } from '../link';
+import theme from './theme.scss';
+
+const ThemedNavigation = themr(NAVIGATION, theme)(navigationFactory(Button, Link));
+export default ThemedNavigation;
+export { ThemedNavigation as Navigation };
diff --git a/components/navigation/index.jsx b/components/navigation/index.jsx
deleted file mode 100644
index ee960f392..000000000
--- a/components/navigation/index.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import style from './style';
-import Button from '../button';
-import Link from '../link';
-
-const Navigation = props => {
-  let className = `${style[props.type]}`;
-  if (props.className) className += ` ${props.className}`;
-
-  const buttons = props.actions.map((action, index) => {
-    return <Button className={style.button} key={index} {...action} />;
-  });
-
-  const links = props.routes.map((route, index) => {
-    return <Link className={style.link} key={index} {...route} />;
-  });
-
-  return (
-    <nav data-react-toolbox='navigation' className={className}>
-      { links }
-      { buttons }
-      { props.children }
-    </nav>
-  );
-};
-
-Navigation.propTypes = {
-  actions: React.PropTypes.array,
-  className: React.PropTypes.string,
-  routes: React.PropTypes.array,
-  type: React.PropTypes.oneOf(['vertical', 'horizontal'])
-};
-
-Navigation.defaultProps = {
-  actions: [],
-  className: '',
-  type: 'horizontal',
-  routes: []
-};
-
-export default Navigation;
diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index 5c41537d4..3d143e704 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -5,30 +5,40 @@ This component is intended to be a common wrapper for a group of links or button
 <!-- example -->
 ```jsx
 import Navigation from 'react-toolbox/lib/navigation';
-
-const links = [
-  { href: 'http://', icon: 'person', label: 'Profile' },
-  { href: 'http://', icon: 'inbox', label: 'Inbox'}
-];
+import Link from 'react-toolbox/lib/link';
 
 const actions = [
-  { label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
-  { label: 'Location', kind: 'raised', accent: true, icon: 'room'}
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
   <div>
     <Navigation type='horizontal' actions={actions} />
-    <Navigation type='horizontal' routes={links} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </div>
 );
 ```
 
+The theming for this component can be provided using the key `RTNavigation`.
+
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name            | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `actions`      | `Array`         |                 | Array of objects that represent buttons so the keys will be transferred as properties to those.|
-| `className`     | `String`        |                 | Set a custom class styles to style the navigation.|
-| `routes`        | `Array`         |                 | Array of objects similar to actions but that will be rendered as `<Link/>` component definition. |
-| `type`          | `String`        | `horizontal`        | Type of the navigation, it can be vertical or horizontal.|
+| `actions`       | `Array`       |                 | Array of objects that will be represented as `<Button/>` so the keys will be transferred as properties the Button Component.|
+| `className`     | `String`      |                 | Set a custom class styles to style the navigation.|
+| `routes`        | `Array`       |                 | Array of objects similar to actions but that will be rendered as `<Link/>` component definition. |
+| `type`          | `String`      | `horizontal`    | Type of the navigation, it can be `vertical` or `horizontal`.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `button` | Used for buttons provided in the component.|
+| `horizontal`  | Used for the root element if the layout is horizontal.|
+| `link`   | Used for links provided in the component.|
+| `vertical`   | Used for the root element if the layout is vertical.|
diff --git a/components/navigation/style.scss b/components/navigation/style.scss
deleted file mode 100644
index 867d0c32d..000000000
--- a/components/navigation/style.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.horizontal {
-  padding-top: $navigation-space;
-  padding-bottom: $navigation-space;
-
-  > .link, > .button {
-    display: inline-block;
-    margin-right: $navigation-space;
-    font-size: $font-size-normal;
-    font-weight: $font-weight-normal;
-    color: $navigation-color;
-    > small {
-      padding: 0 $navigation-space;
-      margin-left: $navigation-space;
-      font-weight: $font-weight-bold;
-      color: $navigation-color;
-      background-color: $navigation-background;
-      border-radius: $navigation-space;
-    }
-  }
-}
-
-.vertical {
-  padding-top: $navigation-space;
-  padding-bottom: $navigation-space;
-
-  > .link, > .button {
-    display: block;
-    padding: 0 $navigation-space;
-    line-height: $unit;
-    transition-property: box-shadow, opacity;
-    &.active {
-      box-shadow: inset 10 * $unit 0 $navigation-background;
-    }
-    > small {
-      float: right;
-      opacity: .5;
-    }
-  }
-}
diff --git a/components/navigation/theme.scss b/components/navigation/theme.scss
new file mode 100644
index 000000000..2d8375fd2
--- /dev/null
+++ b/components/navigation/theme.scss
@@ -0,0 +1,26 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.horizontal {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
+    display: inline-block;
+    margin: 0 $navigation-space / 2;
+  }
+}
+
+.vertical {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
+    display: block;
+    margin: $navigation-space / 2;
+  }
+}
+
+.vertical, .horizontal {
+  padding: $navigation-space / 2;
+
+  > [data-react-toolbox="link"] {
+    color: $navigation-color;
+  }
+}
diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
new file mode 100644
index 000000000..ffce05dc2
--- /dev/null
+++ b/components/overlay/Overlay.js
@@ -0,0 +1,75 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { OVERLAY } from '../identifiers.js';
+import Portal from '../hoc/Portal.js';
+
+class Overlay extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    invisible: PropTypes.bool,
+    onClick: PropTypes.func,
+    onEscKeyDown: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      backdrop: PropTypes.string,
+      invisible: PropTypes.string,
+      overlay: PropTypes.string
+    })
+  };
+
+  static defaultProps = {
+    invisible: false
+  };
+
+  componentDidMount () {
+    if (this.props.active) {
+      document.body.addEventListener('keydown', this.handleEscKey);
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  componentWillUpdate (nextProps) {
+    if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
+    if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
+  }
+
+  componentDidUpdate () {
+    if (this.props.active) {
+      document.body.addEventListener('keydown', this.handleEscKey);
+    }
+  }
+
+  componentWillUnmount () {
+    if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
+    document.body.removeEventListener('keydown', this.handleEscKey);
+  }
+
+  handleEscKey = (e) => {
+    if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
+      this.props.onEscKeyDown(e);
+    }
+  }
+
+  render () {
+    const { active, className, children, invisible, onClick, theme } = this.props;
+    const _className = classnames(theme.overlay, {
+      [theme.active]: active,
+      [theme.invisible]: invisible
+    }, className);
+
+    return (
+      <Portal>
+        <div className={_className} data-react-toolbox="overlay">
+          <div className={theme.backdrop} onClick={onClick} />
+          {children}
+        </div>
+      </Portal>
+    );
+  }
+}
+
+export default themr(OVERLAY)(Overlay);
+export { Overlay };
diff --git a/components/overlay/_config.scss b/components/overlay/_config.scss
new file mode 100644
index 000000000..ccba4d3c7
--- /dev/null
+++ b/components/overlay/_config.scss
@@ -0,0 +1,2 @@
+$overlay-color: $color-black !default;
+$overlay-opacity: .6 !default;
diff --git a/components/overlay/index.d.ts b/components/overlay/index.d.ts
new file mode 100644
index 000000000..6dc9293d0
--- /dev/null
+++ b/components/overlay/index.d.ts
@@ -0,0 +1,55 @@
+import * as React from "react";
+
+export interface OverlayTheme {
+  /**
+   * Active class name.
+   */
+  active?: string;
+  /**
+   * Backdrop class name.
+   */
+  backdrop?: string;
+  /**
+   * Invisible class name.
+   */
+  invisible?: string;
+  /**
+   * Overlay class name.
+   */
+  overlay?: string;
+}
+
+
+export interface OverlayProps {
+  /**
+   * Whether overlay is active.
+   */
+  active?: boolean;
+  /**
+   * Nodes to be nested inside Overlay.
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional class name(s) for root container.
+   */
+  className?: string;
+  /**
+   * Whether Overlay should have 'invisible' styles.
+   * @default false
+   */
+  invisible?: boolean;
+  /**
+   * Callback invoked on Overlay click.
+   */
+  onClick?: Function;
+  /**
+   * Callback invoked on ESC key.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Overlay theme.
+   */
+  theme?: OverlayTheme;
+}
+
+export default class Overlay extends React.Component<OverlayProps, {}> { }
diff --git a/components/overlay/index.js b/components/overlay/index.js
new file mode 100644
index 000000000..818edb280
--- /dev/null
+++ b/components/overlay/index.js
@@ -0,0 +1,8 @@
+import { themr } from 'react-css-themr';
+import { OVERLAY } from '../identifiers.js';
+import { Overlay } from './Overlay.js';
+import theme from './theme.scss';
+
+const ThemedOverlay = themr(OVERLAY, theme)(Overlay);
+export default ThemedOverlay;
+export { ThemedOverlay as Overlay };
diff --git a/components/overlay/theme.scss b/components/overlay/theme.scss
new file mode 100644
index 000000000..e740884ea
--- /dev/null
+++ b/components/overlay/theme.scss
@@ -0,0 +1,42 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-highest;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  &.invisible > *:not(.backdrop) {
+    pointer-events: all;
+  }
+}
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $overlay-color;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.active {
+  pointer-events: all;
+  > .backdrop {
+    opacity: $overlay-opacity;
+  }
+}
diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
new file mode 100644
index 000000000..fb38d85cc
--- /dev/null
+++ b/components/progress_bar/ProgressBar.js
@@ -0,0 +1,105 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { PROGRESS_BAR } from '../identifiers.js';
+import prefixer from '../utils/prefixer.js';
+
+class ProgressBar extends Component {
+  static propTypes = {
+    buffer: PropTypes.number,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    max: PropTypes.number,
+    min: PropTypes.number,
+    mode: PropTypes.oneOf(['determinate', 'indeterminate']),
+    multicolor: PropTypes.bool,
+    theme: PropTypes.shape({
+      buffer: PropTypes.string,
+      circle: PropTypes.string,
+      circular: PropTypes.string,
+      indeterminate: PropTypes.string,
+      linear: PropTypes.string,
+      multicolor: PropTypes.string,
+      path: PropTypes.string,
+      value: PropTypes.string
+    }),
+    type: PropTypes.oneOf(['linear', 'circular']),
+    value: PropTypes.number
+  };
+
+  static defaultProps = {
+    buffer: 0,
+    className: '',
+    max: 100,
+    min: 0,
+    mode: 'indeterminate',
+    multicolor: false,
+    type: 'linear',
+    value: 0
+  };
+
+  calculateRatio (value) {
+    if (value < this.props.min) return 0;
+    if (value > this.props.max) return 1;
+    return (value - this.props.min) / (this.props.max - this.props.min);
+  }
+
+  circularStyle () {
+    if (this.props.mode !== 'indeterminate') {
+      return {strokeDasharray: `${2 * Math.PI * 25 * this.calculateRatio(this.props.value)}, 400`};
+    }
+  }
+
+  linearStyle () {
+    if (this.props.mode !== 'indeterminate') {
+      return {
+        buffer: prefixer({transform: `scaleX(${this.calculateRatio(this.props.buffer)})`}),
+        value: prefixer({transform: `scaleX(${this.calculateRatio(this.props.value)})`})
+      };
+    } else {
+      return {};
+    }
+  }
+
+  renderCircular () {
+    return (
+      <svg className={this.props.theme.circle} viewBox="0 0 60 60">
+        <circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
+      </svg>
+    );
+  }
+
+  renderLinear () {
+    const {buffer, value} = this.linearStyle();
+    return (
+      <div>
+        <span ref='buffer' data-ref='buffer' className={this.props.theme.buffer} style={buffer}/>
+        <span ref='value' data-ref='value' className={this.props.theme.value} style={value}/>
+      </div>
+    );
+  }
+
+  render () {
+    const { className, disabled, max, min, mode, multicolor, type, theme, value } = this.props;
+    const _className = classnames(theme[type], {
+      [theme[mode]]: mode,
+      [theme.multicolor]: multicolor
+    }, className);
+
+    return (
+      <div
+        disabled={disabled}
+        data-react-toolbox='progress-bar'
+        aria-valuenow={value}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        className={_className}
+      >
+        {type === 'circular' ? this.renderCircular() : this.renderLinear()}
+      </div>
+    );
+  }
+}
+
+export default themr(PROGRESS_BAR)(ProgressBar);
+export { ProgressBar };
diff --git a/components/progress_bar/__test__/index.spec.jsx b/components/progress_bar/__test__/index.spec.js
similarity index 64%
rename from components/progress_bar/__test__/index.spec.jsx
rename to components/progress_bar/__test__/index.spec.js
index 4e7a983b0..52e9ae174 100644
--- a/components/progress_bar/__test__/index.spec.jsx
+++ b/components/progress_bar/__test__/index.spec.js
@@ -1,14 +1,17 @@
+import React from 'react';
 import expect from 'expect';
-import style from '../../progress_bar/style';
+import TestUtils from 'react-addons-test-utils';
+import ProgressBar, { ProgressBar as RawProgressBar } from '../ProgressBar';
+import theme from '../theme.scss';
 import utils from '../../utils/testing';
-import ProgressBar from '../index';
 
 describe('ProgressBar', function () {
   let progressBar;
 
   describe('#calculateRatio', function () {
     before(function () {
-      progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300});
+      const tree = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} theme={theme} />);
+      progressBar = TestUtils.findRenderedComponentWithType(tree, RawProgressBar);
     });
 
     it('calculates the right ratio', function () {
@@ -28,14 +31,14 @@ describe('ProgressBar', function () {
     let buffer, value, wrapper, circle, strokeLength;
 
     it('renders the value and buffer bars when it is linear', function () {
-      wrapper = utils.shallowRenderComponent(ProgressBar).props.children;
+      wrapper = utils.shallowRenderComponent(RawProgressBar, {theme}).props.children;
       expect(wrapper.props.children.length).toEqual(2);
       expect(wrapper.props.children[0].ref).toEqual('buffer');
       expect(wrapper.props.children[1].ref).toEqual('value');
     });
 
     it('renders the value and buffer bars when it is linear', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60});
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', value: 30, buffer: 60, theme});
       buffer = (progressBar.props.children.props.children[0]);
       value = (progressBar.props.children.props.children[1]);
       expect(buffer.props.style.transform).toEqual(`scaleX(${0.6})`);
@@ -43,22 +46,22 @@ describe('ProgressBar', function () {
     });
 
     it('renders the svg circle when it is circular', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'});
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', theme});
       expect(progressBar.props.children.type).toEqual('svg');
       expect(progressBar.props.children.props.children.type).toEqual('circle');
     });
 
     it('renders the proper circle length style when it is circular and determinate', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular', mode: 'determinate', value: 30});
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', mode: 'determinate', value: 30, theme});
       circle = progressBar.props.children.props.children;
       strokeLength = 2 * Math.PI * circle.props.r * 0.3;
       expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
     });
 
     it('contains mode and className in its className', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'});
-      expect(progressBar.props.className).toContain(style.determinate);
-      expect(progressBar.props.className).toContain(style.tight);
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', className: 'tight', theme});
+      expect(progressBar.props.className).toContain(theme.determinate);
+      expect(progressBar.props.className).toContain(theme.tight);
     });
   });
 });
diff --git a/components/progress_bar/_config.scss b/components/progress_bar/_config.scss
index 3f78ce585..143a80963 100644
--- a/components/progress_bar/_config.scss
+++ b/components/progress_bar/_config.scss
@@ -1,6 +1,7 @@
-$progress-height: .4 * $unit;
-$progress-main-color: unquote("rgb(#{$color-primary})") !default;
-$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
-$circle-wrapper-width: 60;
-$circle-radius: 25;
-$scale-ratio: $circle-radius / 20;
+$progress-height: .4 * $unit !default;
+$progress-main-color: $color-primary !default;
+$progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$progress-disabled-color: rgba($color-black, 0.26) !default;
+$circle-wrapper-width: 60 !default;
+$circle-radius: 25 !default;
+$scale-ratio: $circle-radius / 20 !default;
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
new file mode 100644
index 000000000..90db36011
--- /dev/null
+++ b/components/progress_bar/index.d.ts
@@ -0,0 +1,88 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ProgressBarTheme {
+  /**
+   * Used to style the buffer element in the linear progress.
+   */
+  buffer?: string;
+  /**
+   * Used for the circle element in the circular progress.
+   */
+  circle?: string;
+  /**
+   * Used for the root element when the type is circular.
+   */
+  circular?: string;
+  /**
+   * Added to the root element if mode is indeterminate.
+   */
+  indeterminate?: string;
+  /**
+   * Used for the root element when the type is linear.
+   */
+  linear?: string;
+  /**
+   * Added to the root if the component is multicolor (circular).
+   */
+  multicolor?: string;
+  /**
+   * Used for the inner path in the circular progress.
+   */
+  path?: string;
+  /**
+   * Used to style the value element in the linear progress.
+   */
+  value?: string;
+}
+
+export interface ProgressBarProps extends ReactToolbox.Props {
+  /**
+   * Value of a secondary progress bar useful for buffering.
+   * @default 0
+   */
+  buffer?: number;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Mode of the progress bar, it can be determinate or indeterminate.
+   * @default indeterminate
+   */
+  mode?: "determinate" | "indeterminate";
+  /**
+   * If true, the circular progress bar will be changing its color.
+   * @default false
+   */
+  multicolor?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ProgressBarTheme;
+  /**
+   * Type of the progress bar, it can be circular or linear.
+   * @default linear
+   */
+  type?: "linear" | "circular";
+  /**
+   * Value of the current progress.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
+
+export default ProgressBar;
diff --git a/components/progress_bar/index.js b/components/progress_bar/index.js
new file mode 100644
index 000000000..6c4a36d1d
--- /dev/null
+++ b/components/progress_bar/index.js
@@ -0,0 +1,9 @@
+import { themr } from 'react-css-themr';
+import { PROGRESS_BAR } from '../identifiers.js';
+import { ProgressBar } from './ProgressBar.js';
+import theme from './theme.scss';
+
+const ThemedProgressBar = themr(PROGRESS_BAR, theme)(ProgressBar);
+
+export default ThemedProgressBar;
+export { ThemedProgressBar as ProgressBar };
diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.jsx
deleted file mode 100644
index 7016da9d2..000000000
--- a/components/progress_bar/index.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import style from './style';
-import prefixer from '../utils/prefixer';
-
-class ProgressBar extends React.Component {
-  static propTypes = {
-    buffer: React.PropTypes.number,
-    className: React.PropTypes.string,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    mode: React.PropTypes.string,
-    multicolor: React.PropTypes.bool,
-    type: React.PropTypes.string,
-    value: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    buffer: 0,
-    className: '',
-    max: 100,
-    min: 0,
-    mode: 'indeterminate',
-    multicolor: false,
-    type: 'linear',
-    value: 0
-  };
-
-  calculateRatio (value) {
-    if (value < this.props.min) return 0;
-    if (value > this.props.max) return 1;
-    return (value - this.props.min) / (this.props.max - this.props.min);
-  }
-
-  circularStyle () {
-    if (this.props.mode !== 'indeterminate') {
-      return {strokeDasharray: `${2 * Math.PI * 25 * this.calculateRatio(this.props.value)}, 400`};
-    }
-  }
-
-  linearStyle () {
-    if (this.props.mode !== 'indeterminate') {
-      return {
-        buffer: prefixer({transform: `scaleX(${this.calculateRatio(this.props.buffer)})`}),
-        value: prefixer({transform: `scaleX(${this.calculateRatio(this.props.value)})`})
-      };
-    } else {
-      return {};
-    }
-  }
-
-  renderCircular () {
-    return (
-      <svg className={style.circle}>
-        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
-      </svg>
-    );
-  }
-
-  renderLinear () {
-    const {buffer, value} = this.linearStyle();
-    return (
-      <div>
-        <span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
-        <span ref='value' data-ref='value' className={style.value} style={value}></span>
-      </div>
-    );
-  }
-
-  render () {
-    let className = this.props.type === 'linear' ? style.linear : style.circular;
-    if (this.props.mode) className += ` ${style[this.props.mode]}`;
-    if (this.props.multicolor) className += ` ${style.multicolor}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div
-        data-react-toolbox='progress-bar'
-        aria-valuenow={this.props.value}
-        aria-valuemin={this.props.min}
-        aria-valuemax={this.props.max}
-        className={className}
-      >
-        { this.props.type === 'circular' ? this.renderCircular() : this.renderLinear() }
-      </div>
-    );
-  }
-}
-
-export default ProgressBar;
diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 45f54fdb0..813043f13 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -1,6 +1,6 @@
 # Progress Bar
 
-Minimize visual changes that occur while your app loads content by representing each operation with a single [activity indicator](https://www.google.com/design/spec/components/progress-activity.html). For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
+Minimize visual changes that occur while your app loads content by representing each operation with a single [activity indicator](https://material.google.com/components/progress-activity.html). For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
 
 <!-- example -->
 ```jsx
@@ -9,21 +9,36 @@ import ProgressBar from 'react-toolbox/lib/progress_bar';
 const ProgressTest = () => (
   <div>
     <ProgressBar type="circular" mode="indeterminate" />
-    <ProgressBar type="linear" mode="determinate" value={83} buffer={90}/>    
+    <ProgressBar type="linear" mode="determinate" value={83} buffer={90} />
   </div>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTProgressBar`.
+
 ## Properties
 
-| Name          | Type    | Default         | Description|
+| Name          | Type        | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `buffer`    | `Number`  | `0`             | Value of a secondary progress bar useful for buffering.|
-| `className` | `String`  | `''`            | Additional class name to provide custom styling.|
-| `max`       | `Number`  | `100`           | Maximum value permitted.|
-| `min`       | `Number`  | `0`             | Minimum value permitted.|
-| `mode`      | `String`  | `indeterminate` | Mode of the progress bar, it can be *determinate* or *indeterminate*.|
-| `multicolor`  | `Boolean`  | `false` | If true, the circular progress bar will be changing its color.|
-| `type`      | `String`  | `linear`        | Type of the progress bar, it can be *circular* or *linear*.|
-| `value`     | `Number`  | `0`             | Value of the current progress.|
+| `buffer`      | `Number`    | `0`             | Value of a secondary progress bar useful for buffering.|
+| `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
+| `disabled`    | `Boolean`   | `false`         | If true, component will be disabled.|
+| `max`         | `Number`    | `100`           | Maximum value permitted.|
+| `min`         | `Number`    | `0`             | Minimum value permitted.|
+| `mode`        | `String`    | `indeterminate` | Mode of the progress bar, it can be `determinate` or `indeterminate`.|
+| `multicolor`  | `Boolean`   | `false`         | If true, the circular progress bar will be changing its color.|
+| `type`        | `String`    | `linear`        | Type of the progress bar, it can be `circular` or `linear`.|
+| `value`       | `Number`    | `0`             | Value of the current progress.|
+
+## Theme
 
+| Name     | Description|
+|:---------|:-----------|
+| `buffer` | Used to style the buffer element in the linear progress.|
+| `circle` | Used for the circle element in the circular progress.|
+| `circular` | Used for the root element when the type is circular.|
+| `indeterminate` | Added to the root element if mode is indeterminate.|
+| `linear` | Used for the root element when the type is linear.|
+| `multicolor` | Added to the root if the component is multicolor (circular).|
+| `path` | Used for the inner path in the circular progress.|
+| `value` | Used to style the value element in the linear progress.|
diff --git a/components/progress_bar/style.scss b/components/progress_bar/theme.scss
similarity index 84%
rename from components/progress_bar/style.scss
rename to components/progress_bar/theme.scss
index 70111bf00..6f5cc2c1c 100644
--- a/components/progress_bar/style.scss
+++ b/components/progress_bar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .linear {
@@ -8,7 +10,6 @@
   height: $progress-height;
   overflow: hidden;
   background: $color-divider;
-
   &.indeterminate .value {
     transform-origin: center center;
     animation: linear-indeterminate-bar 1s linear infinite;
@@ -31,9 +32,18 @@
   background-color: $progress-main-color;
 }
 
+[disabled] .value {
+  background-color: $progress-disabled-color;
+}
+
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-                      linear-gradient(to right, $progress-main-color, $progress-main-color);
+  linear-gradient(to right, $progress-main-color, $progress-main-color);
+}
+
+[disabled] .buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
 }
 
 .circular {
@@ -42,21 +52,19 @@
   width: $circle-wrapper-width * 1px;
   height: $circle-wrapper-width * 1px;
   transform: rotate(-90deg);
-
   &.indeterminate {
     .circle {
       animation: circular-indeterminate-bar-rotate 2s linear infinite;
     }
-
     .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+
       stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
       stroke-dashoffset: 0;
     }
-
     &.multicolor .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
-                       colors (1.5s * 4) ease-in-out infinite;
+      colors (1.5s * 4) ease-in-out infinite;
     }
   }
 }
@@ -68,13 +76,14 @@
 
 .path {
   transition: stroke-dasharray $animation-duration $animation-curve-default;
+  fill: none;
+
   stroke-dasharray: 0, $scale-ratio * 200;
   stroke-dashoffset: 0;
   stroke-linecap: round;
   stroke-miterlimit: 20;
   stroke-width: 4;
   stroke: $progress-main-color;
-  fill: none;
 }
 
 @keyframes linear-indeterminate-bar {
diff --git a/components/radio/Radio.js b/components/radio/Radio.js
new file mode 100644
index 000000000..713cffec0
--- /dev/null
+++ b/components/radio/Radio.js
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react';
+
+const factory = (ripple) => {
+  const Radio = ({checked, onMouseDown, theme, ...other}) => (
+    <div
+      data-react-toolbox='radio'
+      className={theme[checked ? 'radioChecked' : 'radio']}
+      onMouseDown={onMouseDown}
+      {...other}
+    />
+  );
+
+  Radio.propTypes = {
+    checked: PropTypes.bool,
+    children: PropTypes.any,
+    onMouseDown: PropTypes.func,
+    theme: PropTypes.shape({
+      radio: PropTypes.string,
+      radioChecked: PropTypes.string,
+      ripple: PropTypes.string
+    })
+  };
+
+  return ripple(Radio);
+};
+
+export default factory;
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
new file mode 100644
index 000000000..8add1fe6d
--- /dev/null
+++ b/components/radio/RadioButton.js
@@ -0,0 +1,91 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import radioFactory from './Radio.js';
+
+const factory = (Radio) => {
+  class RadioButton extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+      ]),
+      name: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onFocus: PropTypes.func,
+      onMouseEnter: PropTypes.func,
+      onMouseLeave: PropTypes.func,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string,
+        field: PropTypes.string,
+        input: PropTypes.string,
+        text: PropTypes.string
+      }),
+      value: PropTypes.any
+    };
+
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
+
+    handleClick = (event) => {
+      const {checked, disabled, onChange} = this.props;
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!disabled && !checked && onChange) onChange(event, this);
+    };
+
+    blur () {
+      this.inputNode && this.inputNode.blur();
+    }
+
+    focus () {
+      this.inputNode && this.inputNode.focus();
+    }
+
+    render () {
+      const { checked, children, className, disabled, label, name, onChange,  // eslint-disable-line
+        onMouseEnter, onMouseLeave, theme, ...others } = this.props;
+      const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
+      return (
+        <label
+          data-react-toolbox='radio-button'
+          className={_className}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          <input
+            {...others}
+            checked={checked}
+            className={theme.input}
+            disabled={disabled}
+            name={name}
+            onChange={() => {}}
+            onClick={this.handleClick}
+            ref={node => { this.inputNode = node; }}
+            type='radio'
+          />
+          <Radio checked={checked} disabled={disabled} theme={theme} />
+          {label ? <span className={theme.text}>{label}</span> : null}
+          {children}
+        </label>
+      );
+    }
+  }
+
+  return RadioButton;
+};
+
+const Radio = radioFactory(rippleFactory({ centered: true, spread: 2.6 }));
+const RadioButton = factory(Radio);
+export default themr(RADIO)(RadioButton);
+export { factory as radioButtonFactory };
+export { RadioButton };
diff --git a/components/radio/RadioGroup.js b/components/radio/RadioGroup.js
new file mode 100644
index 000000000..c73c1e77b
--- /dev/null
+++ b/components/radio/RadioGroup.js
@@ -0,0 +1,54 @@
+import React, { Component, PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import InjectRadioButton from './RadioButton.js';
+import { isComponentOfType } from '../utils/react.js';
+
+const factory = (RadioButton) => {
+  class RadioGroup extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      name: PropTypes.string,
+      onChange: PropTypes.func,
+      value: PropTypes.any
+    };
+
+    static defaultProps = {
+      className: '',
+      disabled: false
+    };
+
+    handleChange = (value, event) => {
+      if (this.props.onChange) this.props.onChange(value, event);
+    };
+
+    renderRadioButtons () {
+      return React.Children.map(this.props.children, child => (
+        !isComponentOfType(RadioButton, child)
+          ? child
+          : React.cloneElement(child, {
+              checked: child.props.value === this.props.value,
+              disabled: this.props.disabled || child.props.disabled,
+              onChange: this.handleChange.bind(this, child.props.value)
+            })
+      ));
+    }
+
+    render () {
+      return (
+        <div data-react-toolbox='radio-group' className={this.props.className}>
+          {this.renderRadioButtons()}
+        </div>
+      );
+    }
+  }
+
+  return RadioGroup;
+};
+
+const RadioGroup = factory(InjectRadioButton);
+export default themr(RADIO)(RadioGroup);
+export { factory as radioGroupFactory };
+export { RadioGroup };
diff --git a/components/radio/_config.scss b/components/radio/_config.scss
index 4fec5abc2..0c335c7cc 100644
--- a/components/radio/_config.scss
+++ b/components/radio/_config.scss
@@ -1,9 +1,9 @@
-$radio-field-margin-bottom: 1.5 * $unit;
-$radio-button-size: 1.6 * $unit !default;
-$radio-inner-margin: $radio-button-size / 4;
-$radio-inner-color: unquote("rgb(#{$color-primary})") !default;
-$radio-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
-$radio-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
-$radio-text-color: unquote("rgb(#{$color-black})") !default;
-$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$radio-text-font-size: 1.4 * $unit;
+$radio-field-margin-bottom: 1.5 * $unit !default;
+$radio-button-size: 2 * $unit !default;
+$radio-inner-margin: $radio-button-size / 4 !default;
+$radio-inner-color: $color-primary !default;
+$radio-focus-color: rgba($color-black, 0.1) !default;
+$radio-checked-focus-color: rgba($color-primary, 0.26) !default;
+$radio-text-color: $color-black !default;
+$radio-disabled-color: rgba($color-black, 0.26) !default;
+$radio-text-font-size: 1.4 * $unit !default;
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
new file mode 100644
index 000000000..3e8bbb58a
--- /dev/null
+++ b/components/radio/index.d.ts
@@ -0,0 +1,129 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface RadioGroupProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the group will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Name for the input element group.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Default value selected in the radio group.
+   */
+  value?: any;
+}
+
+export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
+
+export interface RadioButtonTheme {
+  /**
+   * Added to the root of the Radio in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used to style the text label element.
+   */
+  text?: string;
+}
+
+export interface RadioButtonProps extends ReactToolbox.Props {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Label for the radio button.
+   */
+  label?: React.ReactNode | string;
+  /**
+   * Name for the input element.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the input is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that will be invoked when the input is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RadioButtonTheme & RadioTheme;
+  /**
+   * Value for the radio button.
+   */
+  value?: any;
+}
+
+export class RadioButton extends React.Component<RadioButtonProps, {}> { }
+
+export interface RadioTheme {
+  /**
+   * Used to for the radio element.
+   */
+  radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
+  radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
+  ripple?: string;
+}
+
+export interface RadioProps {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback invoked on mouse down.
+   */
+  onMouseDown?: Function;
+  /**
+   * Additional properties passed to Radio container.
+   */
+  [key: string]: any;
+}
diff --git a/components/radio/index.js b/components/radio/index.js
new file mode 100644
index 000000000..62167cce4
--- /dev/null
+++ b/components/radio/index.js
@@ -0,0 +1,15 @@
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import themedRippleFactory from '../ripple';
+import radioFactory from './Radio.js';
+import { radioButtonFactory } from './RadioButton.js';
+import { radioGroupFactory } from './RadioGroup.js';
+import theme from './theme.scss';
+
+const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2.6}));
+const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
+const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton));
+
+export default ThemedRadioButton;
+export { ThemedRadioButton as RadioButton };
+export { ThemedRadioGroup as RadioGroup };
diff --git a/components/radio/index.jsx b/components/radio/index.jsx
deleted file mode 100644
index 34176952d..000000000
--- a/components/radio/index.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  RadioButton: require('./radio_button'),
-  RadioGroup: require('./radio_group')
-};
diff --git a/components/radio/radio_button.jsx b/components/radio/radio_button.jsx
deleted file mode 100644
index f65ed1760..000000000
--- a/components/radio/radio_button.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import Ripple from '../ripple';
-import style from './style';
-import events from '../utils/events';
-
-class RadioButton extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    value: React.PropTypes.any
-  };
-
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-  handleChange = (event) => {
-    if (!this.props.checked && this.props.onChange) {
-      this.props.onChange(event, this);
-    }
-  };
-
-  handleClick = (event) => {
-    events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
-  };
-
-  render () {
-    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
-    if (this.props.className) labelClassName += ` ${this.props.className}`;
-
-    return (
-      <label className={labelClassName} onClick={this.handleClick}>
-        <input
-          {...this.props}
-          ref='input'
-          className={style.input}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
-          type='radio'
-        />
-        <span role='radio' className={radioClassName} onMouseDown={this.handleMouseDown}>
-          <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
-        </span>
-        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
-      </label>
-    );
-  }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
-}
-
-export default RadioButton;
diff --git a/components/radio/radio_group.jsx b/components/radio/radio_group.jsx
deleted file mode 100644
index 40de24aea..000000000
--- a/components/radio/radio_group.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import RadioButton from './radio_button';
-
-class RadioGroup extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    name: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    value: React.PropTypes.any
-  };
-
-  static defaultProps = {
-    className: '',
-    disabled: false
-  };
-
-  state = {
-    value: this.props.value
-  };
-
-  handleChange = (value, event) => {
-    this.setState({ value }, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
-  renderRadioButtons () {
-    return React.Children.map(this.props.children, (radio, idx) => {
-      return (
-        <RadioButton
-          {...radio.props}
-          checked={radio.props.value === this.state.value}
-          disabled={this.props.disabled || radio.props.disabled}
-          key={idx}
-          label={radio.props.label}
-          onChange={this.handleChange.bind(this, radio.props.value)}
-          value={radio.props.value}
-        />
-      );
-    });
-  }
-
-  render () {
-    return (
-      <div className={this.props.className}>
-        {this.renderRadioButtons()}
-      </div>
-    );
-  }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({ value });
-  }
-}
-
-export default RadioGroup;
diff --git a/components/radio/readme.md b/components/radio/readme.md
index 7f9d3fa31..a5123a00d 100644
--- a/components/radio/readme.md
+++ b/components/radio/readme.md
@@ -1,48 +1,76 @@
 # Radio buttons
 
-[Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
+[Radio buttons](https://material.google.com/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
+
+You can provide the theme for this component using the key `ToolboxButton`
 
 <!-- example -->
 ```jsx
-import { RadioGroup, RadioButton } from 'react-toolbox';
-
-const RadioTest = () => (
-  <RadioGroup ref='group' name='comic' value='vvendetta'>
-    <RadioButton label='The Walking Dead' value='thewalkingdead'/>
-    <RadioButton label='From Hell' value='fromhell' disabled/>
-    <RadioButton label='V for a Vendetta' value='vvendetta'/>
-    <RadioButton label='Watchmen' value='watchmen'/>
-  </RadioGroup>
-);
+import { RadioGroup, RadioButton } from 'react-toolbox/lib/radio';
+
+class RadioTest extends React.Component {
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    this.setState({value});
+  };
+
+  render () {
+    return (
+      <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
+        <RadioButton label='The Walking Dead' value='thewalkingdead'/>
+        <RadioButton label='From Hell' value='fromhell' disabled/>
+        <RadioButton label='V for a Vendetta' value='vvendetta'/>
+        <RadioButton label='Watchmen' value='watchmen'/>
+      </RadioGroup>
+    );
+  }
+}
 ```
 
 ## Radio Group
 
 A radio selector is mean to get a value from a set of choices, that's why a radio group is needed. It can take some properties and actions that will be transferred to the children, but they also can behave independently.
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the group.| 
-| `disabled`   | `Boolean`    |  `false`    | If true, the group will be displayed as disabled.| 
-| `name`    | `String`    |  | Name for the input element group. |
-| `onChange`    | `Function`    |   | Callback function that will be invoked when the value changes. |
-| `value`    | `Any`    |  | Default value selected in the radio group. |
+| `className`   | `String`      | `''`        | Set a class to give custom styles to the group.|
+| `disabled`    | `Boolean`     | `false`     | If true, the group will be displayed as disabled.|
+| `name`        | `String`      |             | Name for the input element group. |
+| `onChange`    | `Function`    |             | Called with (value, event) when the value changes.|
+| `value`       | `Any`         |             | Default value selected in the radio group. |
 
-This component has state to keep the currently selected value and that's why it exposes to methods to work from the code with it:
-- `getValue` used to retrieve the currently selected value.
-- `setValue` used to set a new value.
 
 ## Radio Button
 
 The inner component to compose radio selectors. They will be rendered as radio input elements of HTML transferring the given properties that concerns to them.
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`   | `Boolean`    |  `false`    | If true, the input element will be selected by default. Transferred from the parent. | 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the radio button.| 
-| `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled.| 
-| `name`    | `String`    |  | Name for the input element. |
-| `onBlur`    | `Function`    |   | Callback function that will be invoked when the input is blurred. |
-| `onChange`    | `Function`    |   | Callback function that will be invoked when the value changes. |
-| `onFocus`    | `Function`    |   | Callback function that will be invoked when the input is focused. |
-| `value`    | `Any`    |  | Value for the radio button. |
+| `checked`     | `Boolean`     | `false`     | If true, the input element will be selected by default. Transferred from the parent. |
+| `className`   | `String`      | `''`        | Set a class to give custom styles to the radio button.|
+| `disabled`    | `Boolean`     | `false`     | If true, the item will be displayed as disabled.|
+| `label`       | `String` of `node`  | `''`        | Label for the radio button.|
+| `name`        | `String`      |             | Name for the input element. |
+| `onBlur`      | `Function`    |             | Callback function that will be invoked when the input is blurred. |
+| `onChange`    | `Function`    |             | Called with (value, event) when the value changes. Context is bound to the parent RadioGroup.|
+| `onFocus`     | `Function`    |             | Callback function that will be invoked when the input is focused. |
+| `value`       | `Any`         |             | Value for the radio button. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Added to the root of the Radio in case it's disabled.|
+| `field` | Used as the root class of the component.|
+| `input` | Used for the input element.|
+| `radio` | Used to for the radio element.|
+| `radioChecked` | Used for the radio element when it's checked.|
+| `ripple` | To provide styles for the ripple.|
+| `text` | Used to style the text label element.|
diff --git a/components/radio/style.scss b/components/radio/theme.scss
similarity index 64%
rename from components/radio/style.scss
rename to components/radio/theme.scss
index c6c25976c..93eac42ef 100644
--- a/components/radio/style.scss
+++ b/components/radio/theme.scss
@@ -1,6 +1,45 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
+.radio {
+  position: relative;
+  display: inline-block;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  vertical-align: top;
+  cursor: pointer;
+  border: .2 * $unit solid $radio-text-color;
+  border-radius: 50%;
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background-color: $radio-inner-color;
+    border-radius: 50%;
+    transition: transform $animation-duration $animation-curve-default;
+    transform: scale(0);
+  }
+
+  .ripple {
+    background-color: $radio-inner-color;
+    opacity: .3;
+    transition-duration: 650ms;
+  }
+}
+
+.radioChecked {
+  @extend .radio;
+  border: .2 * $unit solid $radio-inner-color;
+  &:before {
+    transform: scale(0.65);
+  }
+}
+
 .field {
   position: relative;
   display: block;
@@ -28,56 +67,15 @@
   margin: 0;
   border: 0;
   opacity: 0;
-
   appearance: none;
-  &:focus:not(&:active) {
-    + .radio {
-      box-shadow: 0 0 0 $unit $radio-focus-color;
-    }
-    + .radio-checked {
-      box-shadow: 0 0 0 $unit $radio-checked-focus-color;
-    }
-  }
-}
-
-.radio {
-  position: relative;
-  display: inline-block;
-  width: $radio-button-size;
-  height: $radio-button-size;
-  vertical-align: top;
-  cursor: pointer;
-  border: .2 * $unit solid $radio-text-color;
-  border-radius: 50%;
-  &:before {
-    @include material-animation-default();
-    position: absolute;
-    top: $radio-inner-margin - .2 * $unit;
-    left: $radio-inner-margin - .2 * $unit;
-    width: $radio-button-size - $radio-inner-margin * 2;
-    height: $radio-button-size - $radio-inner-margin * 2;
-    content: "";
-    background-color: $radio-inner-color;
-    border-radius: 50%;
-    transition-property: transform;
-    transform: scale3d(0, 0, 0);
+  &:focus ~ .radio {
+    box-shadow: 0 0 0 $unit $radio-focus-color;
   }
-}
-
-.radio-checked {
-  @extend .radio;
-  border: .2 * $unit solid $radio-inner-color;
-  &:before {
-    transform: scale3d(1, 1, 1);
+  &:focus ~ .radioChecked {
+    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
   }
 }
 
-.ripple {
-  background-color: $radio-inner-color;
-  opacity: .3;
-  transition-duration: 650ms;
-}
-
 .disabled {
   @extend .field;
   .text {
@@ -87,7 +85,7 @@
     cursor: auto;
     border-color: $radio-disabled-color;
   }
-  .radio-checked {
+  .radioChecked {
     cursor: auto;
     border-color: $radio-disabled-color;
     &:before {
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
new file mode 100644
index 000000000..cbf0d6b9a
--- /dev/null
+++ b/components/ripple/Ripple.js
@@ -0,0 +1,261 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import update from 'immutability-helper';
+import { themr } from 'react-css-themr';
+import { RIPPLE } from '../identifiers.js';
+import events from '../utils/events';
+import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
+
+const defaults = {
+  centered: false,
+  className: '',
+  multiple: true,
+  spread: 2,
+  theme: {}
+};
+
+const rippleFactory = (options = {}) => {
+  const {
+    centered: defaultCentered,
+    className: defaultClassName,
+    multiple: defaultMultiple,
+    spread: defaultSpread,
+    theme: defaultTheme,
+    ...props
+  } = {...defaults, ...options};
+
+  return ComposedComponent => {
+    class RippledComponent extends Component {
+      static propTypes = {
+        children: PropTypes.any,
+        disabled: PropTypes.bool,
+        onRippleEnded: PropTypes.func,
+        ripple: PropTypes.bool,
+        rippleCentered: PropTypes.bool,
+        rippleClassName: PropTypes.string,
+        rippleMultiple: PropTypes.bool,
+        rippleSpread: PropTypes.number,
+        theme: PropTypes.shape({
+          ripple: PropTypes.string,
+          rippleActive: PropTypes.string,
+          rippleRestarting: PropTypes.string,
+          rippleWrapper: PropTypes.string
+        })
+      };
+
+      static defaultProps = {
+        disabled: false,
+        ripple: true,
+        rippleCentered: defaultCentered,
+        rippleClassName: defaultClassName,
+        rippleMultiple: defaultMultiple,
+        rippleSpread: defaultSpread
+      };
+
+      state = {
+        ripples: {}
+      };
+
+      componentDidUpdate (prevProps, prevState) {
+        // If a new ripple was just added, add a remove event listener to its animation
+        if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
+          this.addRippleRemoveEventListener(this.getLastKey());
+        }
+      }
+
+      componentWillUnmount () {
+        // Remove document event listeners for ripple if they still exists
+        Object.keys(this.state.ripples).forEach(key => {
+          this.state.ripples[key].endRipple();
+        });
+      }
+
+      /**
+       * Add an event listener to the reference with given key so when the animation transition
+       * ends we can be sure that it finished and it can be safely removed from the state.
+       * This function is called whenever a new ripple is added to the component.
+       *
+       * @param {String} rippleKey Is the key of the ripple to add the event.
+       */
+      addRippleRemoveEventListener (rippleKey) {
+        const self = this;
+        events.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd (e) {
+          if (e.propertyName === 'opacity') {
+            if (self.props.onRippleEnded) self.props.onRippleEnded(e);
+            events.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
+            self.setState({ ripples: utils.removeObjectKey(rippleKey, self.state.ripples) });
+          }
+        });
+      }
+
+      /**
+       * Start a ripple animation on an specific point with touch or mouse events. First
+       * decides if the animation should trigger. If the ripple is multiple or there is no
+       * ripple present, it creates a new key. If it's a simple ripple and already exists,
+       * it just restarts the current ripple. The animation happens in two state changes
+       * to allow triggering via css.
+       *
+       * @param {Number} x Coordinate X on the screen where animation should start
+       * @param {Number} y Coordinate Y on the screen where animation should start
+       * @param {Boolean} isTouch Use events from touch or mouse.
+       */
+      animateRipple (x, y, isTouch) {
+        if (this.rippleShouldTrigger(isTouch)) {
+          const { top, left, width } = this.getDescriptor(x, y);
+          const noRipplesActive = Object.keys(this.state.ripples).length === 0;
+          const key = this.props.rippleMultiple || noRipplesActive ? this.getNextKey() : this.getLastKey();
+          const endRipple = this.addRippleDeactivateEventListener(isTouch, key);
+          const initialState = { active: false, restarting: true, top, left, width, endRipple };
+          const runningState = { active: true, restarting: false };
+          this.setState(update(this.state, { ripples: { [key]: { $set: initialState } } }), () => {
+            this.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
+            this.setState(update(this.state, { ripples: { [key]: { $merge: runningState } } }));
+          });
+        }
+      }
+
+      /**
+       * Determine if a ripple should start depending if its a touch event. For mobile both
+       * touchStart and mouseDown are launched so in case is touch we should always trigger
+       * but if its not we should check if a touch was already triggered to decide.
+       *
+       * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
+       * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
+       */
+      rippleShouldTrigger (isTouch) {
+        const shouldStart = isTouch ? true : !this.touchCache;
+        this.touchCache = isTouch;
+        return shouldStart;
+      }
+
+      /**
+       * Find out a descriptor object for the ripple element being created depending on
+       * the position where the it was triggered and the component's dimensions.
+       *
+       * @param {Number} x Coordinate x in the viewport where ripple was triggered
+       * @param {Number} y Coordinate y in the viewport where ripple was triggered
+       * @return {Object} Descriptor element including position and size of the element
+       */
+      getDescriptor (x, y) {
+        const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        const { rippleCentered: centered, rippleSpread: spread } = this.props;
+        return {
+          left: centered ? 0 : x - left - width / 2,
+          top: centered ? 0 : y - top - height / 2,
+          width: width * spread
+        };
+      }
+
+      /**
+       * Increments and internal counter and returns the next value as a string. It
+       * is used to assign key references to new ripple elements.
+       *
+       * @return {String} Key to be assigned to a ripple.
+       */
+      getNextKey () {
+        this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
+        return `ripple${this.currentCount}`;
+      }
+
+      /**
+       * Return the last generated key for a ripple element. When there is only one ripple
+       * and to get the reference when a ripple was just created.
+       *
+       * @return {String} The last generated ripple key.
+       */
+      getLastKey () {
+        return `ripple${this.currentCount}`;
+      }
+
+      /**
+       * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
+       * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
+       * ending function is created from a factory function and returned.
+       *
+       * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
+       * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+       * @return {Function} Callback function that deactivates the ripple and removes the event listener
+       */
+      addRippleDeactivateEventListener (isTouch, rippleKey) {
+        const eventType = isTouch ? 'touchend' : 'mouseup';
+        const endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
+        document.addEventListener(eventType, endRipple);
+        return endRipple;
+      }
+
+      /**
+       * Generates a function that can be called to deactivate a given ripple and remove its finishing
+       * event listener. If is generated because we need to store it to be called on unmount in case
+       * the ripple is still running.
+       *
+       * @param {String} eventType Is the event type that can be touchend or mouseup
+       * @param {String} rippleKey Is the key representing the ripple
+       * @return {Function} Callback function that deactivates the ripple and removes the listener
+       */
+      createRippleDeactivateCallback (eventType, rippleKey) {
+        const self = this;
+        return function endRipple () {
+          document.removeEventListener(eventType, endRipple);
+          self.setState({ ripples: update(self.state.ripples, {
+            [rippleKey]: { $merge: { active: false } }
+          }) });
+        };
+      }
+
+      handleMouseDown = (event) => {
+        if (this.props.onMouseDown) this.props.onMouseDown(event);
+        if (!this.props.disabled) {
+          const { x, y } = events.getMousePosition(event);
+          this.animateRipple(x, y, false);
+        }
+      };
+
+      handleTouchStart = (event) => {
+        if (this.props.onTouchStart) this.props.onTouchStart(event);
+        if (!this.props.disabled) {
+          const { x, y } = events.getTouchPosition(event);
+          this.animateRipple(x, y, true);
+        }
+      };
+
+      renderRipple (key, className, { active, left, restarting, top, width }) {
+        const scale = restarting ? 0 : 1;
+        const transform = `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`;
+        const _className = classnames(this.props.theme.ripple, {
+          [this.props.theme.rippleActive]: active,
+          [this.props.theme.rippleRestarting]: restarting
+        }, className);
+        return (
+          <span key={key} data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
+            <span
+              role='ripple'
+              ref={key}
+              className={_className}
+              style={prefixer({ transform }, {width, height: width})}
+            />
+          </span>
+        );
+      }
+
+      render () {
+        const { ripples } = this.state;
+        const { onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, // eslint-disable-line
+          children, ripple, rippleClassName, ...other } = this.props;
+
+        if (!ripple) return <ComposedComponent children={children} {...other} />;
+        return (
+          <ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
+            {children}
+            {Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]))}
+          </ComposedComponent>
+        );
+      }
+    }
+
+    return themr(RIPPLE, defaultTheme)(RippledComponent);
+  };
+};
+
+export default rippleFactory;
diff --git a/components/ripple/_config.scss b/components/ripple/_config.scss
index 5013d0eaf..8c26b6f10 100644
--- a/components/ripple/_config.scss
+++ b/components/ripple/_config.scss
@@ -1,3 +1,3 @@
-$ripple-duration: 1.2s;
-$ripple-final-opacity: .3;
-$ripple-size: 15 * $unit;
+$ripple-duration: 800ms !default;
+$ripple-final-opacity: .3 !default;
+$ripple-size: 15 * $unit !default;
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
new file mode 100644
index 000000000..171d18478
--- /dev/null
+++ b/components/ripple/index.d.ts
@@ -0,0 +1,61 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface RippleTheme {
+  /**
+   * Root classname for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Applied when the ripple is active.
+   */
+  rippleActive?: string;
+  /**
+   * Applied when the ripple is restarting.
+   */
+  rippleRestarting?: string;
+  /**
+   * Wrapper class to fit to the parent element.
+   */
+  rippleWrapper?: string;
+}
+
+export interface RippleProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * True in case you want a centered ripple.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Function that will be called when the ripple animation ends.
+   */
+  onRippleEnded?: Function;
+  /**
+   * Factor to indicate how much should the ripple spread under the component.
+   * @default 2
+   */
+  spread?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RippleTheme;
+  /**
+   * Additional properties passed to rippled component.
+   */
+  [key: string]: any;
+}
+
+export interface RippledComponentFactory {
+  <P, RippledComponent extends (React.ComponentClass<P> | React.SFC<P>)>(component: RippledComponent): RippledComponent;
+}
+
+export function rippleFactory(
+  options: RippleProps
+): RippledComponentFactory;
+
+
+export default rippleFactory;
diff --git a/components/ripple/index.js b/components/ripple/index.js
new file mode 100644
index 000000000..634eeb545
--- /dev/null
+++ b/components/ripple/index.js
@@ -0,0 +1,5 @@
+import rippleFactory from './Ripple.js';
+import theme from './theme.scss';
+
+export const Ripple = (options) => rippleFactory({ ...options, theme });
+export default Ripple;
diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
deleted file mode 100644
index 0ed431c11..000000000
--- a/components/ripple/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import style from './style';
-
-class Ripple extends React.Component {
-  static propTypes = {
-    centered: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    loading: React.PropTypes.bool,
-    spread: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    centered: false,
-    className: '',
-    loading: false,
-    spread: 2
-  };
-
-  state = {
-    active: false,
-    left: null,
-    restarting: false,
-    top: null,
-    width: null
-  };
-
-  handleEnd = () => {
-    document.removeEventListener('mouseup', this.handleEnd);
-    this.setState({active: false});
-  };
-
-  start = ({ pageX, pageY }) => {
-    document.addEventListener('mouseup', this.handleEnd);
-    const {top, left, width} = this._getDescriptor(pageX, pageY);
-    this.setState({active: false, restarting: true, width: 0}, () => {
-      this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-      this.setState({active: true, restarting: false, top, left, width});
-    });
-  };
-
-  _getDescriptor (pageX, pageY) {
-    const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
-    return {
-      left: this.props.centered ? width / 2 : pageX - left,
-      top: this.props.centered ? height / 2 : pageY - top,
-      width: width * this.props.spread
-    };
-  }
-
-  render () {
-    const { left, top, width } = this.state;
-    const rippleStyle = {left, top, width, height: width};
-    let className = style[this.props.loading ? 'loading' : 'normal'];
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.state.restarting) className += ` ${style.restarting}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <span data-react-toolbox='ripple' className={style.wrapper}>
-        <span ref='ripple' role='ripple' className={className} style={rippleStyle} />
-      </span>
-    );
-  }
-}
-
-export default Ripple;
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
new file mode 100644
index 000000000..9f83d1814
--- /dev/null
+++ b/components/ripple/readme.md
@@ -0,0 +1,55 @@
+# Ripple
+
+The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement `children`, `onMouseDown` and `onTouchStart` (in case you want to support touch) props. Also it should be placed as relative. Hiding the overflow is up to you.
+
+<!-- example -->
+```jsx
+import Ripple from 'react-toolbox/lib/ripple';
+import theme from 'react-toolbox/lib/ripple/theme';
+
+const Link = (props) => (
+  <a {...props} style={{position: 'relative'}}>
+    {props.children}
+  </a>
+);
+
+const RippleLink = Ripple({spread: 3})(Link);
+const RippleTest = () => <RippleLink href='#' theme={theme}>Test</RippleLink>;
+```
+
+## Options
+
+You can pass some options to configure the default props for the ripple when decorating a component:
+
+| Name            | Type        | Default     | Description|
+|:-----|:-----|:-----|:-----|
+| `centered`      | `Boolean`   | `false`     | True in case you want a centered ripple.|
+| `className`     | `String`    | `''`        | String to customize appearance (color and opacity for example).|
+| `multiple`      | `Boolean`   | `true`      | If true each touch produces a different wave. If false the same wave is restarted. |
+| `spread`        | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
+| `theme`         | `Object`    | `null`      | Classnames object defining the ripple style.|
+
+## Properties
+
+In any component you decorate with the Ripple you'd get some additional props namespaced with `ripple` prefix. Some of them will get the default from the options given to the ripple factory function:
+
+| Name              | Type         | Default             | Description|
+|:-----|:-----|:-----|:-----|
+| `onRippleEnded`   | `Function`  |                     | Function that will be called when the ripple animation ends. Beware if your animation supports multiple waves this function will be called for each ended ripple. |
+| `ripple`          | `Boolean`   | `true`              | False in case you want to deactivate the ripple.|
+| `rippleCentered`  | `Boolean`   | `options.centered`  | True in case you want a centered ripple.|
+| `rippleClassName` | `String`    | `options.className` | String to customize appearance (color and opacity for example).|
+| `rippleMultiple`  | `Boolean`   | `options.multiple`  | If true each touch produces a different wave. If false the same wave is restarted. |
+| `rippleSpread`    | `Number`    | `options.spread`    | Factor to indicate how much should the ripple spread under the component.|
+| `theme`           | `Object`    | `options.theme`     | Classnames object defining the ripple style.|
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxRipple`, it should implement the following interface:
+
+| Name               | Description|
+|:-------------------|:-----------|
+| `ripple`           | Root classname for the ripple.|
+| `rippleActive`     | Applied when the ripple is active.|
+| `rippleRestarting` | Applied when the ripple is restarting.|
+| `rippleWrapper`    | Wrapper class to fit to the parent element.|
diff --git a/components/ripple/style.scss b/components/ripple/style.scss
deleted file mode 100644
index a25845fc0..000000000
--- a/components/ripple/style.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-%ripple {
-  position: absolute;
-  z-index: $z-index-high;
-  pointer-events: none;
-  background-color: currentColor;
-  border-radius: 50%;
-  transform-style: preserve-3d;
-  transform: translate3d(-50%, -50%, 0);
-  backface-visibility: hidden;
-  will-change: width, height, opacity;
-}
-
-.wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $z-index-normal;
-  pointer-events: none;
-}
-
-.normal {
-  @extend %ripple;
-  width: 0;
-  height: 0;
-  opacity: $ripple-final-opacity;
-  transition-timing-function: $animation-curve-linear-out-slow-in;
-  transition-duration: $ripple-duration;
-  transition-property: height, width;
-  &:not(.active) {
-    opacity: 0;
-    transition-property: height, width, opacity;
-    &.restarting {
-      transition-property: none;
-    }
-  }
-}
-
-.loading {
-  @extend %ripple;
-  @include ripple-loading(ripple, $ripple-size, $ripple-size);
-  top: 50%;
-  left: 50%;
-  width: $ripple-size;
-  height: $ripple-size;
-  opacity: $ripple-final-opacity;
-  animation-name: ripple;
-  animation-duration: $ripple-duration;
-  animation-timing-function: $animation-curve-linear-out-slow-in;
-  animation-iteration-count: infinite;
-}
diff --git a/components/ripple/theme.scss b/components/ripple/theme.scss
new file mode 100644
index 000000000..6212078db
--- /dev/null
+++ b/components/ripple/theme.scss
@@ -0,0 +1,42 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+%ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $z-index-high;
+  pointer-events: none;
+  background-color: currentColor;
+  border-radius: 50%;
+  transform-origin: 50% 50%;
+}
+
+.rippleWrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-normal;
+  pointer-events: none;
+}
+
+.ripple {
+  @extend %ripple;
+  transition-duration: $ripple-duration;
+  &.rippleRestarting {
+    opacity: $ripple-final-opacity;
+    transition-property: none;
+  }
+  &.rippleActive {
+    opacity: $ripple-final-opacity;
+    transition-property: transform;
+  }
+  &:not(.rippleActive):not(.rippleRestarting) {
+    opacity: 0;
+    transition-property: opacity, transform;
+  }
+}
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
new file mode 100644
index 000000000..df1abd89f
--- /dev/null
+++ b/components/slider/Slider.js
@@ -0,0 +1,318 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { SLIDER } from '../identifiers.js';
+import events from '../utils/events.js';
+import utils from '../utils/utils.js';
+import InjectProgressBar from '../progress_bar/ProgressBar.js';
+import InjectInput from '../input/Input.js';
+
+const factory = (ProgressBar, Input) => {
+  class Slider extends Component {
+    static propTypes = {
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      editable: PropTypes.bool,
+      max: PropTypes.number,
+      min: PropTypes.number,
+      onChange: PropTypes.func,
+      pinned: PropTypes.bool,
+      snaps: PropTypes.bool,
+      step: PropTypes.number,
+      theme: PropTypes.shape({
+        container: PropTypes.string,
+        editable: PropTypes.string,
+        innerknob: PropTypes.string,
+        innerprogress: PropTypes.string,
+        input: PropTypes.string,
+        knob: PropTypes.string,
+        pinned: PropTypes.string,
+        pressed: PropTypes.string,
+        progress: PropTypes.string,
+        ring: PropTypes.string,
+        slider: PropTypes.string,
+        snap: PropTypes.string,
+        snaps: PropTypes.string
+      }),
+      value: PropTypes.number
+    };
+
+    static defaultProps = {
+      className: '',
+      editable: false,
+      max: 100,
+      min: 0,
+      pinned: false,
+      snaps: false,
+      step: 0.01,
+      value: 0
+    };
+
+    state = {
+      inputFocused: false,
+      inputValue: null,
+      sliderLength: 0,
+      sliderStart: 0
+    };
+
+    componentDidMount () {
+      window.addEventListener('resize', this.handleResize);
+      this.handleResize();
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (this.state.inputFocused && this.props.value !== nextProps.value) {
+        this.setState({inputValue: this.valueForInput(nextProps.value)});
+      }
+    }
+
+    shouldComponentUpdate (nextProps, nextState) {
+      return this.state.inputFocused || !nextState.inputFocused;
+    }
+
+    componentWillUnmount () {
+      window.removeEventListener('resize', this.handleResize);
+      events.removeEventsFromDocument(this.getMouseEventMap());
+      events.removeEventsFromDocument(this.getTouchEventMap());
+      events.removeEventsFromDocument(this.getKeyboardEvents());
+    }
+
+    handleInputFocus = () => {
+      this.setState({
+        inputFocused: true,
+        inputValue: this.valueForInput(this.props.value)
+      });
+    };
+
+    handleInputChange = (value) => {
+      this.setState({inputValue: value});
+    };
+
+    handleInputBlur = (event) => {
+      const value = this.state.inputValue || 0;
+      this.setState({inputFocused: false, inputValue: null}, () => {
+        this.props.onChange(this.trimValue(value), event);
+      });
+    };
+
+    handleKeyDown = (event) => {
+      if ([13, 27].indexOf(event.keyCode) !== -1) this.getInput().blur();
+      if (event.keyCode === 38) this.addToValue(this.props.step);
+      if (event.keyCode === 40) this.addToValue(-this.props.step);
+    };
+
+    handleMouseDown = (event) => {
+      if (this.state.inputFocused) this.getInput().blur();
+      events.addEventsToDocument(this.getMouseEventMap());
+      this.start(events.getMousePosition(event));
+      events.pauseEvent(event);
+    };
+
+    handleMouseMove = (event) => {
+      events.pauseEvent(event);
+      this.move(events.getMousePosition(event));
+    };
+
+    handleMouseUp = () => {
+      this.end(this.getMouseEventMap());
+    };
+
+    handleResize = (event, callback) => {
+      const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
+      const cb = (callback) || (() => {});
+      this.setState({sliderStart: left, sliderLength: right - left}, cb);
+    };
+
+    handleSliderBlur = () => {
+      events.removeEventsFromDocument(this.getKeyboardEvents());
+    };
+
+    handleSliderFocus = () => {
+      events.addEventsToDocument(this.getKeyboardEvents());
+    };
+
+    handleTouchEnd = () => {
+      this.end(this.getTouchEventMap());
+    };
+
+    handleTouchMove = (event) => {
+      this.move(events.getTouchPosition(event));
+    };
+
+    handleTouchStart = (event) => {
+      if (this.state.inputFocused) this.getInput().blur();
+      this.start(events.getTouchPosition(event));
+      events.addEventsToDocument(this.getTouchEventMap());
+      events.pauseEvent(event);
+    };
+
+    addToValue (increment) {
+      let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+      value = this.trimValue(value + increment);
+      if (value !== this.props.value) this.props.onChange(value);
+    }
+
+    getInput () {
+      return this.refs.input && this.refs.input.getWrappedInstance
+        ? this.refs.input.getWrappedInstance()
+        : this.refs.input;
+    }
+
+    getKeyboardEvents () {
+      return {
+        keydown: this.handleKeyDown
+      };
+    }
+
+    getMouseEventMap () {
+      return {
+        mousemove: this.handleMouseMove,
+        mouseup: this.handleMouseUp
+      };
+    }
+
+    getTouchEventMap () {
+      return {
+        touchmove: this.handleTouchMove,
+        touchend: this.handleTouchEnd
+      };
+    }
+
+    end (revents) {
+      events.removeEventsFromDocument(revents);
+      this.setState({ pressed: false });
+    }
+
+    knobOffset () {
+      const { max, min } = this.props;
+      const translated = this.state.sliderLength * (this.props.value - min) / (max - min);
+      return translated * 100 / this.state.sliderLength;
+    }
+
+    move (position) {
+      const newValue = this.positionToValue(position);
+      if (newValue !== this.props.value) this.props.onChange(newValue);
+    }
+
+    positionToValue (position) {
+      const { sliderStart: start, sliderLength: length } = this.state;
+      const { max, min, step } = this.props;
+      const pos = (position.x - start) / length * (max - min);
+      return this.trimValue(Math.round(pos / step) * step + min);
+    }
+
+    start (position) {
+      this.handleResize(null, () => {
+        this.setState({pressed: true});
+        this.props.onChange(this.positionToValue(position));
+      });
+    }
+
+    stepDecimals () {
+      return (this.props.step.toString().split('.')[1] || []).length;
+    }
+
+    trimValue (value) {
+      if (value < this.props.min) return this.props.min;
+      if (value > this.props.max) return this.props.max;
+      return utils.round(value, this.stepDecimals());
+    }
+
+    valueForInput (value) {
+      const decimals = this.stepDecimals();
+      return decimals > 0 ? value.toFixed(decimals) : value.toString();
+    }
+
+    renderSnaps () {
+      if (this.props.snaps) {
+        return (
+          <div ref='snaps' className={this.props.theme.snaps}>
+            {utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
+              return <div key={`span-${i}`} className={this.props.theme.snap} />;
+            })}
+          </div>
+        );
+      }
+    }
+
+    renderInput () {
+      if (this.props.editable) {
+        const value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
+        return (
+          <Input
+            ref='input'
+            className={this.props.theme.input}
+            disabled={this.props.disabled}
+            onFocus={this.handleInputFocus}
+            onChange={this.handleInputChange}
+            onBlur={this.handleInputBlur}
+            value={value}
+            />
+        );
+      }
+    }
+
+    render () {
+      const { theme } = this.props;
+      const knobStyles = {left: `${this.knobOffset()}%`};
+      const className = classnames(theme.slider, {
+        [theme.editable]: this.props.editable,
+        [theme.disabled]: this.props.disabled,
+        [theme.pinned]: this.props.pinned,
+        [theme.pressed]: this.state.pressed,
+        [theme.ring]: this.props.value === this.props.min
+      }, this.props.className);
+
+      return (
+        <div
+          className={className}
+          disabled={this.props.disabled}
+          data-react-toolbox='slider'
+          onBlur={this.handleSliderBlur}
+          onFocus={this.handleSliderFocus}
+          tabIndex='0'
+          >
+          <div
+            ref='slider'
+            className={theme.container}
+            onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleTouchStart}
+            >
+            <div
+              ref='knob'
+              className={theme.knob}
+              onMouseDown={this.handleMouseDown}
+              onTouchStart={this.handleTouchStart}
+              style={knobStyles}
+              >
+              <div className={theme.innerknob} data-value={parseInt(this.props.value)}/>
+            </div>
+
+            <div className={theme.progress}>
+              <ProgressBar
+                disabled={this.props.disabled}
+                ref='progressbar'
+                className={theme.innerprogress}
+                max={this.props.max}
+                min={this.props.min}
+                mode='determinate'
+                value={this.props.value}
+                />
+              {this.renderSnaps()}
+            </div>
+          </div>
+
+          {this.renderInput()}
+        </div>
+      );
+    }
+  }
+
+  return Slider;
+};
+
+const Slider = factory(InjectProgressBar, InjectInput);
+export default themr(SLIDER)(Slider);
+export { factory as sliderFactory };
+export { Slider };
diff --git a/components/slider/__tests__/index.spec.jsx b/components/slider/__tests__/index.spec.js
similarity index 55%
rename from components/slider/__tests__/index.spec.jsx
rename to components/slider/__tests__/index.spec.js
index d7c4a9f43..bf4e3ab1e 100644
--- a/components/slider/__tests__/index.spec.jsx
+++ b/components/slider/__tests__/index.spec.js
@@ -1,20 +1,21 @@
-import expect from 'expect';
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
 import sinon from 'sinon';
+import expect from 'expect';
+import { ProgressBar } from '../../progress_bar/ProgressBar.js';
+import Input, { Input as RawInput } from '../../input/Input.js';
+import Slider, { Slider as RawSlider } from '../Slider.js';
 import utils from '../../utils/testing';
-import style from '../../slider/style';
-import ProgressBar from '../../progress_bar';
-import Input from '../../input';
-import Slider from '../index';
-import TestUtils from 'react-addons-test-utils';
+import theme from '../theme.scss';
 
 describe('Slider', function () {
-  let props, state, slider, progress, input;
+  let slider, progress, input, onChange;
 
   describe('#positionToValue', function () {
     before(function () {
-      props = { min: -500, max: 500 };
-      state = { sliderStart: 500, sliderLength: 100 };
-      slider = utils.renderComponent(Slider, props, state);
+      const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
     });
 
     it('returns min when position is less than origin', function () {
@@ -32,8 +33,8 @@ describe('Slider', function () {
 
   describe('#trimValue', function () {
     before(function () {
-      props = { min: 0, max: 100, step: 0.1 };
-      slider = utils.renderComponent(Slider, props);
+      const tree = TestUtils.renderIntoDocument(<Slider min={0} max={100} step={0.1} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
     });
 
     it('rounds to the proper number', function () {
@@ -52,8 +53,8 @@ describe('Slider', function () {
 
   describe('#valueForInput', function () {
     before(function () {
-      props = { min: 0, max: 100, step: 0.01 };
-      slider = utils.renderComponent(Slider, props);
+      const tree = TestUtils.renderIntoDocument(<Slider min={0} max={100} step={0.01} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
     });
 
     it('returns a fixed number when an integer is given', function () {
@@ -67,31 +68,17 @@ describe('Slider', function () {
 
   describe('#knobOffset', function () {
     it('returns the corresponding offset for a given value and slider length/start', function () {
-      props = { min: -500, max: 500, value: -250 };
-      state = { sliderStart: 500, sliderLength: 100 };
-      slider = utils.renderComponent(Slider, props, state);
+      const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} value={-250} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
       expect(slider.knobOffset()).toEqual(25);
     });
   });
 
-  describe('#getValue', function () {
-    it('retrieves the current value', function () {
-      slider = utils.renderComponent(Slider, {value: 10});
-      expect(slider.getValue()).toEqual(slider.state.value);
-    });
-  });
-
-  describe('#setValue', function () {
-    it('set the current value', function () {
-      slider = utils.renderComponent(Slider, {value: 10});
-      slider.setValue(50);
-      expect(slider.state.value).toEqual(50);
-    });
-  });
-
   describe('#render', function () {
     it('contains a linear progress bar with proper properties', function () {
-      slider = utils.renderComponent(Slider, {min: 100, max: 1000, value: 140});
+      const tree = TestUtils.renderIntoDocument(<Slider min={100} max={1000} value={140} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
       progress = TestUtils.findRenderedComponentWithType(slider, ProgressBar);
       expect(progress.props.mode).toEqual('determinate');
       expect(progress.props.type).toEqual('linear');
@@ -101,25 +88,27 @@ describe('Slider', function () {
     });
 
     it('contains an input component if its editable', function () {
-      slider = utils.renderComponent(Slider, {editable: true, value: 130});
+      const tree = TestUtils.renderIntoDocument(<Slider editable value={130} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
       input = TestUtils.findRenderedComponentWithType(slider, Input);
-      expect(input.props.value).toEqual(slider.props.value);
+      expect(parseInt(input.props.value)).toEqual(slider.props.value);
     });
 
     it('contains the proper number of snaps when snapped', function () {
-      slider = utils.shallowRenderComponent(Slider, {editable: true, pinned: true});
-      expect(slider.props.className).toContain(style.ring);
-      expect(slider.props.className).toContain(style.pinned);
-      slider = utils.shallowRenderComponent(Slider, {editable: true, value: 50});
-      expect(slider.props.className).toNotContain(style.ring);
+      slider = utils.shallowRenderComponent(RawSlider, {editable: true, pinned: true, theme});
+      expect(slider.props.className).toContain(theme.ring);
+      expect(slider.props.className).toContain(theme.pinned);
+      slider = utils.shallowRenderComponent(RawSlider, {editable: true, value: 50, theme});
+      expect(slider.props.className).toNotContain(theme.ring);
     });
   });
 
   describe('#events', function () {
-    before(function () {
-      props = { min: -500, max: 500 };
-      state = { sliderStart: 0, sliderLength: 1000 };
-      slider = utils.renderComponent(Slider, props, state);
+    beforeEach(function () {
+      onChange = sinon.spy();
+      const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} onChange={onChange} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
       slider.handleResize = (event, callback) => { callback(); };
     });
 
@@ -135,33 +124,42 @@ describe('Slider', function () {
 
     it('sets a proper value when the slider is clicked', function () {
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
-      expect(slider.state.value).toEqual(-300);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(-300);
     });
 
     it('sets a proper value when the slider is touched', function () {
       TestUtils.Simulate.touchStart(slider.refs.slider, {touches: [{pageX: 200, pageY: 0}]});
-      expect(slider.state.value).toEqual(-300);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(-300);
     });
 
     it('changes input value when slider changes', function () {
-      slider = utils.renderComponent(Slider, {editable: true}, {sliderStart: 0, sliderLength: 1000});
+      const tree = TestUtils.renderIntoDocument(<Slider editable onChange={onChange} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({sliderStart: 0, sliderLength: 1000});
       slider.handleResize = (event, callback) => { callback(); };
       input = TestUtils.findRenderedComponentWithType(slider, Input);
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
-      expect(input.state.value).toEqual(90);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(90);
     });
 
     it('changes its value when input is blurred', function () {
-      slider = utils.renderComponent(Slider, {editable: true, value: 50});
-      input = TestUtils.findRenderedComponentWithType(slider, Input);
+      const tree = TestUtils.renderIntoDocument(<Slider editable value={50} onChange={onChange} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      input = TestUtils.findRenderedComponentWithType(slider, RawInput);
       TestUtils.Simulate.change(input.refs.input, {target: {value: '80'}});
       TestUtils.Simulate.blur(input.refs.input);
-      expect(slider.state.value).toEqual(80);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(80);
     });
 
     it('calls onChange callback when the value is changed', function () {
       const onChangeSpy = sinon.spy();
-      slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});
+      const tree = TestUtils.renderIntoDocument(<Slider onChange={onChangeSpy} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({sliderStart: 0, sliderLength: 1000});
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
       expect(onChangeSpy.called).toEqual(true);
     });
diff --git a/components/slider/_config.scss b/components/slider/_config.scss
index 5e97a8563..6563e3015 100644
--- a/components/slider/_config.scss
+++ b/components/slider/_config.scss
@@ -1,12 +1,13 @@
-$slider-main-color: unquote("rgb(#{$color-primary})") !default;
-$slider-main-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$slider-snap-color: unquote("rgb(#{$color-black})") !default;
-$slider-knob-size: 3.2 * $unit;
-$slider-inner-knob-size: 1.2 * $unit;
-$slider-snap-size: .2 * $unit;
-$slider-input-width: 5 * $unit;
-$slider-bar-height: .2 * $unit;
-$slider-pin-size: 2.6 * $unit;
-$slider-pin-elevation: 1.7 * $unit;
-$slider-side-separation: 1 * $unit;
-$slider-empty-knob-border: .2 * $unit;
+$slider-main-color: $color-primary !default;
+$slider-main-color-contrast: $color-primary-contrast !default;
+$slider-disabled-color: rgba(177, 177, 177, 1) !default;
+$slider-snap-color: $color-black !default;
+$slider-knob-size: 3.2 * $unit !default;
+$slider-inner-knob-size: 1.2 * $unit !default;
+$slider-snap-size: .2 * $unit !default;
+$slider-input-width: 5 * $unit !default;
+$slider-bar-height: .2 * $unit !default;
+$slider-pin-size: 2.6 * $unit !default;
+$slider-pin-elevation: 1.7 * $unit !default;
+$slider-side-separation: 1 * $unit !default;
+$slider-empty-knob-border: .2 * $unit !default;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
new file mode 100644
index 000000000..b33f1e3b3
--- /dev/null
+++ b/components/slider/index.d.ts
@@ -0,0 +1,112 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface SliderTheme {
+  /**
+   * Used as an inner container of the root component.
+   */
+  container?: string;
+  /**
+   * Added to the root of in case the Slider is editable.
+   */
+  editable?: string;
+  /**
+   * Used to style the inner element of the knob.
+   */
+  innerknob?: string;
+  /**
+   * Provided to the ProgressBar component.
+   */
+  innerprogress?: string;
+  /**
+   * Provided to the Input element in case it's editable.
+   */
+  input?: string;
+  /**
+   * Used to style the outer layer of the knob.
+   */
+  knob?: string;
+  /**
+   * Added to the root in case the Slider is pinned.
+   */
+  pinned?: string;
+  /**
+   * Added to the root in case the state is pressed.
+   */
+  pressed?: string;
+  /**
+   * Used as an outer wrapper for the ProgressBar.
+   */
+  progress?: string;
+  /**
+   * Used in the root when the knob should be a ring.
+   */
+  ring?: string;
+  /**
+   * Class used for the root element.
+   */
+  slider?: string;
+  /**
+   * Used for every individual snap element.
+   */
+  snap?: string;
+  /**
+   * Used as a wrapper for the group of snaps when it's snapped.
+   */
+  snaps?: string;
+}
+
+export interface SliderProps extends ReactToolbox.Props {
+  /**
+   * If true, an input is shown and the user can set the slider from keyboard value.
+   * @default false
+   */
+  editable?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Callback function that will be invoked when the slider value changes.
+   */
+  onChange?: Function;
+  /**
+   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+   * @default false
+   */
+  snaps?: boolean;
+  /**
+   * Amount to vary the value when the knob is moved or increase/decrease is called.
+   * @default 0.01
+   */
+  step?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SliderTheme;
+  /**
+   * Current value of the slider.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class Slider extends React.Component<SliderProps, {}> { }
+
+export default Slider;
diff --git a/components/slider/index.js b/components/slider/index.js
new file mode 100644
index 000000000..629a34570
--- /dev/null
+++ b/components/slider/index.js
@@ -0,0 +1,10 @@
+import { themr } from 'react-css-themr';
+import { SLIDER } from '../identifiers.js';
+import { ProgressBar } from '../progress_bar';
+import { Input} from '../input';
+import { sliderFactory } from './Slider.js';
+import theme from './theme.scss';
+
+const ThemedSlider = themr(SLIDER, theme)(sliderFactory(ProgressBar, Input));
+export default ThemedSlider;
+export { ThemedSlider as Slider };
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
deleted file mode 100644
index 6289e714c..000000000
--- a/components/slider/index.jsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import style from './style';
-import utils from '../utils';
-import ProgressBar from '../progress_bar';
-import Input from '../input';
-
-class Slider extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    editable: React.PropTypes.bool,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    onChange: React.PropTypes.func,
-    pinned: React.PropTypes.bool,
-    snaps: React.PropTypes.bool,
-    step: React.PropTypes.number,
-    value: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    className: '',
-    editable: false,
-    max: 100,
-    min: 0,
-    pinned: false,
-    snaps: false,
-    step: 0.01,
-    value: 0
-  };
-
-  state = {
-    sliderStart: 0,
-    sliderLength: 0,
-    value: this.props.value
-  };
-
-  componentDidMount () {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.value !== this.state.value) {
-      if (this.props.onChange) this.props.onChange(this);
-      if (this.refs.input) this.refs.input.setValue(this.valueForInput(this.state.value));
-    }
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-
-  handleInputBlur = () => {
-    this.setState({value: this.trimValue(this.refs.input.getValue()) });
-  };
-
-  handleKeyDown = (event) => {
-    if ([13, 27].indexOf(event.keyCode) !== -1) {
-      this.refs.input.blur();
-      ReactDOM.findDOMNode(this).blur();
-    }
-    if (event.keyCode === 38) this.addToValue(this.props.step);
-    if (event.keyCode === 40) this.addToValue(-this.props.step);
-  };
-
-  handleMouseDown = (event) => {
-    utils.events.addEventsToDocument(this.getMouseEventMap());
-    this.start(utils.events.getMousePosition(event));
-    utils.events.pauseEvent(event);
-  };
-
-  handleMouseMove = (event) => {
-    utils.events.pauseEvent(event);
-    this.move(utils.events.getMousePosition(event));
-  };
-
-  handleMouseUp = () => {
-    this.end(this.getMouseEventMap());
-  };
-
-  handleResize = (event, callback) => {
-    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
-    const cb = callback || () => {};
-    this.setState({sliderStart: left, sliderLength: right - left}, cb);
-  };
-
-  handleSliderBlur = () => {
-    utils.events.removeEventsFromDocument(this.getKeyboardEvents());
-  };
-
-  handleSliderFocus = () => {
-    utils.events.addEventsToDocument(this.getKeyboardEvents());
-  };
-
-  handleTouchEnd = () => {
-    this.end(this.getTouchEventMap());
-  };
-
-  handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
-  };
-
-  handleTouchStart = (event) => {
-    this.start(utils.events.getTouchPosition(event));
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    utils.events.pauseEvent(event);
-  };
-
-  addToValue (value) {
-    this.setState({value: this.trimValue(this.state.value + value)});
-  }
-
-  getKeyboardEvents () {
-    return {
-      keydown: this.handleKeyDown
-    };
-  }
-
-  getMouseEventMap () {
-    return {
-      mousemove: this.handleMouseMove,
-      mouseup: this.handleMouseUp
-    };
-  }
-
-  getTouchEventMap () {
-    return {
-      touchmove: this.handleTouchMove,
-      touchend: this.handleTouchEnd
-    };
-  }
-
-  end (revents) {
-    utils.events.removeEventsFromDocument(revents);
-    this.setState({pressed: false});
-  }
-
-  knobOffset () {
-    const { max, min } = this.props;
-    return this.state.sliderLength * (this.state.value - min) / (max - min);
-  }
-
-  move (position) {
-    this.setState({value: this.positionToValue(position)});
-  }
-
-  positionToValue (position) {
-    const { sliderStart: start, sliderLength: length } = this.state;
-    const { max, min } = this.props;
-    return this.trimValue((position.x - start) / length * (max - min) + min);
-  }
-
-  start (position) {
-    this.handleResize(null, () => {
-      this.setState({pressed: true, value: this.positionToValue(position)});
-    });
-  }
-
-  stepDecimals () {
-    return (this.props.step.toString().split('.')[1] || []).length;
-  }
-
-  trimValue (value) {
-    if (value < this.props.min) return this.props.min;
-    if (value > this.props.max) return this.props.max;
-    return utils.round(value, this.stepDecimals());
-  }
-
-  valueForInput (value) {
-    const decimals = this.stepDecimals();
-    return decimals > 0 ? value.toFixed(decimals) : value.toString();
-  }
-
-  renderSnaps () {
-    if (this.props.snaps) {
-      return (
-        <div ref='snaps' className={style.snaps}>
-          {
-            utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
-              return (<div key={`span-${i}`} className={style.snap}></div>);
-            })
-          }
-        </div>
-      );
-    }
-  }
-
-  renderInput () {
-    if (this.props.editable) {
-      return (
-        <Input
-          ref='input'
-          className={style.input}
-          onBlur={this.handleInputBlur}
-          value={this.valueForInput(this.state.value)} />
-      );
-    }
-  }
-
-  render () {
-    const knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
-    let className = this.props.className;
-    if (this.props.editable) className += ` ${style.editable}`;
-    if (this.props.pinned) className += ` ${style.pinned}`;
-    if (this.state.pressed) className += ` ${style.pressed}`;
-    if (this.state.value === this.props.min) className += ` ${style.ring}`;
-
-    return (
-      <div
-        data-react-toolbox='slider'
-        className={style.root + className}
-        tabIndex='0'
-        onBlur={this.handleSliderBlur}
-        onFocus={this.handleSliderFocus}
-      >
-        <div
-          ref='slider'
-          className={style.container}
-          onMouseDown={this.handleMouseDown}
-          onTouchStart={this.handleTouchStart}
-        >
-          <div
-            ref='knob'
-            className={style.knob}
-            onMouseDown={this.handleMouseDown}
-            onTouchStart={this.handleTouchStart}
-            style={knobStyles}
-          >
-            <div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
-          </div>
-
-          <div className={style.progress}>
-            <ProgressBar
-              ref='progressbar'
-              className={style.innerprogress}
-              max={this.props.max}
-              min={this.props.min}
-              mode='determinate'
-              value={this.state.value}
-            />
-            { this.renderSnaps() }
-          </div>
-        </div>
-
-        { this.renderInput() }
-      </div>
-    );
-  }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
-}
-
-export default Slider;
diff --git a/components/slider/readme.md b/components/slider/readme.md
index e1a03f51a..fe3654d78 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -1,39 +1,72 @@
 # Slider
 
-[Sliders](https://www.google.com/design/spec/components/sliders.html#) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
+[Sliders](https://material.google.com/components/sliders.html) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
 
 <!-- example -->
 ```jsx
 import Slider from 'react-toolbox/lib/slider';
 
-const SliderTest = () => (
-  <section>
-    <p>Default slider</p>
-    <Slider />
-    <p>With steps, initial value and editable</p>
-    <Slider value={5} min={0} max={10} editable />
-    <p>Pinned and with snaps</p>
-    <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
-  </section>
-);
+class SliderTest extends React.Component {
+  state = {
+    slider2: 5,
+    slider3: 1,
+    slider4: 3
+  };
+
+  handleChange = (slider, value) => {
+    const newState = {};
+    newState[slider] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <p>Normal slider</p>
+        <Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
+        <p>With steps, initial value and editable</p>
+        <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
+        <p>Pinned and with snaps</p>
+        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
+      </section>
+    );
+  }
+}
 ```
 
+This component can be styled by context providing a theme with the key `RTSlider` through the theme provider.
+
 ## Properties
 
-| Name          | Type    | Default   | Description|
+| Name          | Type          | Default   | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''`      | Additional class name to provide custom styling.|
-| `editable`  | `Boolean` | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
-| `max`       | `Number`  | `100`     | Maximum value permitted.|
-| `min`       | `Number`  | `0`       | Minimum value permitted.|
-| `pinned`    | `Boolean` | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
-| `snaps`     | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
-| `step`      | `Number`  | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
-| `value`     | `Number`  | `0`       | Value of the current value.|
-
-## Methods
+| `className`   | `String`      | `''`      | Additional class name to provide custom styling.|
+| `disabled`    | `Boolean`     | `false`   | If true, component will be disabled.|
+| `editable`    | `Boolean`     | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
+| `max`         | `Number`      | `100`     | Maximum value permitted.|
+| `min`         | `Number`      | `0`       | Minimum value permitted.|
+| `onChange`    | `Function`    |           | Called with (value) when the slider value changes.|
+| `pinned`      | `Boolean`     | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
+| `snaps`       | `Boolean`     | `false`   | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
+| `step`        | `Number`      | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
+| `value`       | `Number`      | `0`       | Current value of the slider.|
 
-Since the slider is able to keep a value it needs state and exposes methods to retrieve and set the current value as usual.
+## Theme
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+| Name     | Description|
+|:---------|:-----------|
+| `container` | Used as an inner container of the root component.|
+| `editable` | Added to the root of in case the Slider is editable.|
+| `innerknob` | Used to style the inner element of the knob.|
+| `innerprogress` | Provided to the ProgressBar component.|
+| `input` | Provided to the Input element in case it's editable.|
+| `knob` | Used to style the outer layer of the knob.|
+| `pinned` | Added to the root in case the Slider is pinned.|
+| `pressed` | Added to the root in case the state is pressed.|
+| `progress` | Used as an outer wrapper for the ProgressBar.|
+| `ring` | Used in the root when the knob should be a ring.|
+| `slider` | Class used for the root element.|
+| `snap` | Used for every individual snap element.|
+| `snaps` | Used as a wrapper for the group of snaps when it's snapped.|
diff --git a/components/slider/style.scss b/components/slider/theme.scss
similarity index 95%
rename from components/slider/style.scss
rename to components/slider/theme.scss
index 4b0276316..310e80097 100644
--- a/components/slider/style.scss
+++ b/components/slider/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .container {
@@ -96,7 +98,7 @@
   }
 }
 
-.root {
+.slider {
   &:focus .knob:before {
     position: absolute;
     top: 0;
@@ -109,6 +111,13 @@
     border-radius: 50%;
     opacity: .26;
   }
+  &[disabled] {
+    pointer-events: none;
+    cursor: auto;
+    .innerknob {
+      background-color: $slider-disabled-color;
+    }
+  }
   &.editable {
     display: flex;
     flex-direction: row;
diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
new file mode 100644
index 000000000..399a8118b
--- /dev/null
+++ b/components/snackbar/Snackbar.js
@@ -0,0 +1,86 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { SNACKBAR } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import InjectOverlay from '../overlay/Overlay.js';
+import InjectButton from '../button/Button.js';
+
+const factory = (Overlay, Button) => {
+  class Snackbar extends Component {
+    static propTypes = {
+      action: PropTypes.string,
+      active: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      onClick: PropTypes.func,
+      onTimeout: PropTypes.func,
+      theme: PropTypes.shape({
+        accept: PropTypes.string,
+        active: PropTypes.string,
+        button: PropTypes.string,
+        cancel: PropTypes.string,
+        label: PropTypes.string,
+        snackbar: PropTypes.string,
+        warning: PropTypes.string
+      }),
+      timeout: PropTypes.number,
+      type: PropTypes.oneOf([ 'accept', 'cancel', 'warning' ])
+    };
+
+    componentDidMount () {
+      if (this.props.active && this.props.timeout) {
+        this.scheduleTimeout(this.props);
+      }
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.active && nextProps.timeout) {
+        this.scheduleTimeout(nextProps);
+      }
+    }
+
+    componentWillUnmount () {
+      clearTimeout(this.curTimeout);
+    }
+
+    scheduleTimeout = props => {
+      const { onTimeout, timeout } = props;
+      if (this.curTimeout) clearTimeout(this.curTimeout);
+      this.curTimeout = setTimeout(() => {
+        if (onTimeout) onTimeout();
+        this.curTimeout = null;
+      }, timeout);
+    }
+
+    render () {
+      const {action, active, children, label, onClick, theme, type } = this.props;
+      const className = classnames([theme.snackbar, theme[type]], {
+        [theme.active]: active
+      }, this.props.className);
+
+      return (
+        <Overlay invisible>
+          <div data-react-toolbox='snackbar' className={className}>
+            <span className={theme.label}>
+              {label}
+              {children}
+            </span>
+            {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
+          </div>
+        </Overlay>
+      );
+    }
+  }
+
+  return ActivableRenderer()(Snackbar);
+};
+
+const Snackbar = factory(InjectOverlay, InjectButton);
+export default themr(SNACKBAR)(Snackbar);
+export { factory as snackbarFactory };
+export { Snackbar };
diff --git a/components/snackbar/_config.scss b/components/snackbar/_config.scss
index 7a96ab3be..69f7cdf50 100644
--- a/components/snackbar/_config.scss
+++ b/components/snackbar/_config.scss
@@ -1,6 +1,9 @@
+$snackbar-color-cancel: $palette-red-500 !default;
+$snackbar-color-accept: $palette-green-500 !default;
+$snackbar-color-warning: $palette-lime-a200 !default;
 $snackbar-background-color: $color-text !default;
-$snackbar-border-radius: .2 * $unit;
-$snackbar-button-offset: 4.8 * $unit;
-$snackbar-color: unquote("rgb(#{$color-white})") !default;
-$snackbar-horizontal-offset: 2.4 * $unit;
-$snackbar-vertical-offset: 1.4 * $unit;
+$snackbar-border-radius: .2 * $unit !default;
+$snackbar-button-offset: 4.8 * $unit !default;
+$snackbar-color: $color-white !default;
+$snackbar-horizontal-offset: 2.4 * $unit !default;
+$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
new file mode 100644
index 000000000..9286938da
--- /dev/null
+++ b/components/snackbar/index.d.ts
@@ -0,0 +1,77 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface SnackbarTheme {
+  /**
+   * Added to the root element in case it's accept type.
+   */
+  accept?: string;
+  /**
+   * Added to the root element when its active.
+   */
+  active?: string;
+  /**
+   * Used for the button inside the component.
+   */
+  button?: string;
+  /**
+   * Added to the root element in case it's cancel type.
+   */
+  cancel?: string;
+  /**
+   * Used for the label element.
+   */
+  label?: string;
+  /**
+   * Used as the className for the root element of the component.
+   */
+  snackbar?: string;
+  /**
+   * Added to the root element in case it's warning type.
+   */
+  warning?: string;
+}
+
+export interface SnackbarProps extends ReactToolbox.Props {
+  /**
+   * Label for the action component inside the Snackbar.
+   */
+  action?: string;
+  /**
+   * If true, the snackbar will be active.
+   * @default true
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Text to display in the content.
+   */
+  label?: string;
+  /**
+   * Callback function that will be called when the button action is clicked.
+   */
+  onClick?: Function;
+  /**
+   * Callback function when finish the set timeout.
+   */
+  onTimeout?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SnackbarTheme;
+  /**
+   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
+   */
+  timeout?: number;
+  /**
+   * Indicates the action type. Can be accept, warning or cancel
+   */
+  type?: "accept" | "cancel" | "warning";
+}
+
+export class Snackbar extends React.Component<SnackbarProps, {}> { }
+
+export default Snackbar;
diff --git a/components/snackbar/index.js b/components/snackbar/index.js
new file mode 100644
index 000000000..5825088c3
--- /dev/null
+++ b/components/snackbar/index.js
@@ -0,0 +1,11 @@
+import { themr } from 'react-css-themr';
+import { SNACKBAR } from '../identifiers.js';
+import { snackbarFactory } from './Snackbar.js';
+import { Overlay } from '../overlay';
+import { Button } from '../button';
+import theme from './theme.scss';
+
+const ThemedSnackbar = themr(SNACKBAR, theme)(snackbarFactory(Overlay, Button));
+
+export default ThemedSnackbar;
+export { ThemedSnackbar as Snackbar };
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
deleted file mode 100644
index c60620bda..000000000
--- a/components/snackbar/index.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import style from './style';
-import Button from '../button';
-import FontIcon from '../font_icon';
-
-class Snackbar extends React.Component {
-  static propTypes = {
-    action: React.PropTypes.string,
-    className: React.PropTypes.string,
-    icon: React.PropTypes.string,
-    label: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func,
-    timeout: React.PropTypes.number,
-    type: React.PropTypes.string
-  };
-
-  state = {
-    active: false
-  };
-
-  handleClick = (event) => {
-    this.setState({active: false});
-    if (this.props.onClick) {
-      this.props.onClick(event, this);
-    }
-  };
-
-  renderButton () {
-    if (this.props.action) {
-      return (
-        <Button
-          className={style.button}
-          kind='flat'
-          label={this.props.action}
-          onClick={this.handleClick}
-        />
-      );
-    }
-  }
-
-  render () {
-    let className = `${style.root} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='snackbar' className={className}>
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
-        <span className={style.label}>{this.props.label}</span>
-        { this.renderButton() }
-      </div>
-    );
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-
-  show () {
-    this.setState({active: true});
-    if (this.props.timeout) {
-      setTimeout(() => {
-        this.setState({ active: false });
-      }, this.props.timeout * 1000);
-    }
-  }
-}
-
-export default Snackbar;
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 7c4ec32e4..7728354a8 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -18,10 +18,9 @@ class SnackbarTest extends React.Component {
   render () {
     return (
       <section>
-        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show Snackbar' raised onClick={this.handleClick} />
         <Snackbar
           action='http://github.com/Nice'
-          icon='question-answer'
           label='A new developer started using React Toolbox'
           onClick={this.handleSnackbarClick}
           ref='snackbar'
@@ -33,22 +32,30 @@ class SnackbarTest extends React.Component {
 }
 ```
 
+This component can be styled by context providing a theme with the key `RTSnackbar` through the theme provider.
+
 ## Properties
 
-| Name          | Type    | Default   | Description|
+| Name          | Type                    | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `action`  | `String` |   | Label for the action component inside the Snackbar.|
-| `className` | `String`  | `''`      | Additional class name to provide custom styling.|
-| `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
-| `label` | `String`  |       | Text to display in the content.|
-| `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
-| `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
-| `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|
-
-## Methods
-
-The Snackbar, in a similar way to the Dialog and Drawer holds state to check whether it's being displayed or not. It exposes methods to hide and show it manually:
-
-- `hide` used to hide the Snackbar.
-- `show` used to show the Snackbar.
-
+| `action`      | `String`                |               | Label for the action component inside the Snackbar.|
+| `active`      | `Boolean`               |  `false`      | If true, the snackbar will be active.|
+| `children`    | `String or Element`     |  `false`      | Text or node to be displayed in the content as alternative to `label`.|
+| `className`   | `String`                | `''`          | Additional class name to provide custom styling.|
+| `label`       | `String or Element`     |               | Text to display in the content.|
+| `onClick`     | `Function`              |               | Callback function that will be called when the button action is clicked.|
+| `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
+| `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
+| `type`        | `String`                |               | Indicates the action type. Can be `accept`, `warning` or `cancel`|
+
+## Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `accept` | Added to the root element in case it's accept type.|
+| `active` | Added to the root element when its active.|
+| `button` | Used for the button inside the component.|
+| `cancel` | Added to the root element in case it's cancel type.|
+| `label` | Used for the label element.|
+| `snackbar` | Used as the className for the root element of the component.|
+| `warning` | Added to the root element in case it's warning type.|
diff --git a/components/snackbar/style.scss b/components/snackbar/theme.scss
similarity index 83%
rename from components/snackbar/style.scss
rename to components/snackbar/theme.scss
index 50fb89113..4c7d0770e 100644
--- a/components/snackbar/style.scss
+++ b/components/snackbar/theme.scss
@@ -1,29 +1,31 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.root {
-  z-index: $z-index-higher;
+.snackbar {
   position: fixed;
+  right: $snackbar-horizontal-offset;
   bottom: 0;
   left: $snackbar-horizontal-offset;
-  right: $snackbar-horizontal-offset;
-  margin: 0 auto;
+  z-index: $z-index-higher;
   display: flex;
   align-items: center;
   padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
+  margin: 0 auto;
   margin-top: $snackbar-vertical-offset;
   color: $snackbar-color;
   background-color: $snackbar-background-color;
   border-radius: $snackbar-border-radius;
   transition: all $animation-duration $animation-curve-default $animation-duration;
   &.accept .button {
-    color: green;
+    color: $snackbar-color-accept;
   }
   &.warning .button {
-    color: orange;
+    color: $snackbar-color-warning;
   }
   &.cancel .button {
-    color: red;
+    color: $snackbar-color-cancel;
   }
   &:not(.active) {
     transform: translateY(100%);
@@ -33,10 +35,6 @@
   }
 }
 
-.icon {
-  margin-right: $snackbar-vertical-offset;
-}
-
 .label {
   flex-grow: 1;
   font-size: $font-size-small;
@@ -45,11 +43,7 @@
 .button {
   min-width: inherit;
   margin-top: - $snackbar-vertical-offset / 2;
-  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-right: - $snackbar-horizontal-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-left: $snackbar-button-offset;
-  color: white;
-  > abbr {
-    line-height: inherit;
-  }
 }
diff --git a/components/switch/Switch.js b/components/switch/Switch.js
new file mode 100644
index 000000000..32f1a090b
--- /dev/null
+++ b/components/switch/Switch.js
@@ -0,0 +1,83 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { SWITCH } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import thumbFactory from './Thumb.js';
+
+const factory = (Thumb) => {
+  class Switch extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.string,
+      name: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onFocus: PropTypes.func,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string,
+        field: PropTypes.string,
+        input: PropTypes.string,
+        off: PropTypes.string,
+        on: PropTypes.string,
+        ripple: PropTypes.string,
+        text: PropTypes.string,
+        thumb: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
+
+    handleToggle = (event) => {
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!this.props.disabled && this.props.onChange) {
+        this.props.onChange(!this.props.checked, event);
+      }
+    };
+
+    blur () {
+      this.refs.input.blur();
+    }
+
+    focus () {
+      this.refs.input.focus();
+    }
+
+    render () {
+      const { className, checked, disabled, onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+      const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
+      return (
+        <label data-react-toolbox='switch' className={_className}>
+          <input
+            {...others}
+            checked={this.props.checked}
+            className={theme.input}
+            onClick={this.handleToggle}
+            readOnly
+            ref='input'
+            type='checkbox'
+          />
+          <span className={theme[checked ? 'on' : 'off']}>
+            <Thumb disabled={this.props.disabled} theme={theme} />
+          </span>
+          {this.props.label ? <span className={theme.text}>{this.props.label}</span> : null}
+        </label>
+      );
+    }
+  }
+
+  return Switch;
+};
+
+const Thumb = thumbFactory(rippleFactory({ centered: true, spread: 2.6 }));
+const Switch = factory(Thumb);
+
+export default themr(SWITCH)(Switch);
+export { factory as switchFactory };
+export { Switch };
diff --git a/components/switch/Thumb.js b/components/switch/Thumb.js
new file mode 100644
index 000000000..f9694cd9b
--- /dev/null
+++ b/components/switch/Thumb.js
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+
+const factory = (ripple) => {
+  const Thumb = ({onMouseDown, theme, ...other}) => (
+    <span role='thumb' className={theme.thumb} onMouseDown={onMouseDown} {...other} />
+  );
+
+  Thumb.propTypes = {
+    children: PropTypes.any,
+    theme: PropTypes.shape({
+      ripple: PropTypes.string,
+      thumb: PropTypes.string
+    })
+  };
+
+  return ripple(Thumb);
+};
+
+export default factory;
diff --git a/components/switch/_config.scss b/components/switch/_config.scss
index 0e0a8389c..784084717 100644
--- a/components/switch/_config.scss
+++ b/components/switch/_config.scss
@@ -1,14 +1,14 @@
-$switch-color: unquote("rgb(#{$color-primary})") !default;
-$switch-text-color: unquote("rgb(#{$color-black})") !default;
-$switch-thumb-off-color: unquote("rgb(#{$palette-grey-50})") !default;
-$switch-track-on-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
-$switch-track-off-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$switch-off-ripple-color: unquote("rgba(#{$color-black}, 0.4)") !default;
-$switch-on-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
-$switch-off-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
-$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
-$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$switch-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$switch-color: $color-primary !default;
+$switch-text-color: $color-black !default;
+$switch-thumb-off-color: $palette-grey-50 !default;
+$switch-track-on-color: rgba($color-primary, 0.5) !default;
+$switch-track-off-color: rgba($color-black, 0.26) !default;
+$switch-off-ripple-color: rgba($color-black, 0.4) !default;
+$switch-on-focus-color: rgba($color-primary, 0.26) !default;
+$switch-off-focus-color: rgba($color-black, 0.1) !default;
+$switch-disabled-thumb-color: $palette-grey-400 !default;
+$switch-disabled-track-color: rgba($color-black, 0.12) !default;
+$switch-disabled-text-color: rgba($color-black, 0.26) !default;
 $switch-total-height: 2.4 * $unit !default;
 $switch-track-length: 3.6 * $unit !default;
 $switch-track-height: 1.4 * $unit !default;
@@ -16,7 +16,7 @@ $switch-thumb-size: 2 * $unit !default;
 $switch-thumb-on-color: $switch-color !default;
 $switch-focus-init-size: .8 * $unit !default;
 $switch-focus-size: $switch-total-height * 2 !default;
-$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2;
+$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
 $switch-ripple-duration: 650ms !default;
 $switch-font-size: $font-size-small !default;
 $switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
new file mode 100644
index 000000000..03fc29716
--- /dev/null
+++ b/components/switch/index.d.ts
@@ -0,0 +1,78 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface SwitchTheme {
+  /**
+   * Used for the root element if the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the root element if the component is not disabled.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is false.
+   */
+  off?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is true.
+   */
+  on?: string;
+  /**
+   * Used for the ripple inside the switch.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label element.
+   */
+  text?: string;
+  /**
+   * Used for the thumb element.
+   */
+  thumb?: string;
+}
+
+export interface SwitchProps extends ReactToolbox.Props {
+  /**
+   * If true, the switch will be enabled.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * The text string used as name of the input.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when when the switch is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when the switch is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SwitchTheme;
+}
+
+export class Switch extends React.Component<SwitchProps, {}> { }
+
+export default Switch;
diff --git a/components/switch/index.js b/components/switch/index.js
new file mode 100644
index 000000000..28c3ec386
--- /dev/null
+++ b/components/switch/index.js
@@ -0,0 +1,14 @@
+import { themr } from 'react-css-themr';
+import { switchFactory } from './Switch.js';
+import { SWITCH } from '../identifiers.js';
+import thumbFactory from './Thumb.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(SWITCH, theme)(Component);
+const ripple = themedRippleFactory({ centered: true, spread: 2.6 });
+const ThemedThumb = applyTheme(thumbFactory(ripple));
+const ThemedSwitch = applyTheme(switchFactory(ThemedThumb));
+
+export default ThemedSwitch;
+export { ThemedSwitch as Switch };
diff --git a/components/switch/index.jsx b/components/switch/index.jsx
deleted file mode 100644
index b2099a6c3..000000000
--- a/components/switch/index.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import Ripple from '../ripple';
-import style from './style';
-import events from '../utils/events';
-
-class Switch extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-  state = {
-    checked: this.props.checked
-  };
-
-  handleChange = (event) => {
-    this.setState({checked: !this.state.checked}, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
-  handleClick = (event) => {
-    events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
-  };
-
-  render () {
-    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    const switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
-    if (this.props.className) labelClassName += ` ${this.props.className}`;
-
-    return (
-      <label
-        data-react-toolbox='checkbox'
-        className={labelClassName}
-        onClick={this.handleClick}
-      >
-        <input
-          {...this.props}
-          ref='input'
-          checked={this.state.checked}
-          className={style.input}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
-          type='checkbox'
-        />
-        <span role='switch' className={switchClassName}>
-          <span role='thumb' className={style.thumb} onMouseDown={this.handleMouseDown}>
-            <Ripple ref='ripple' role='ripple' className={style.ripple} spread={2.4} centered />
-          </span>
-        </span>
-        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
-      </label>
-    );
-  }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
-
-  getValue () {
-    return this.state.checked;
-  }
-
-  setValue (value) {
-    this.setState({checked: value});
-  }
-}
-
-export default Switch;
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 7952c8da5..1e9654958 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -6,24 +6,66 @@ On/off switches toggle the state of a single settings option. The option that th
 ```jsx
 import Switch from 'react-toolbox/lib/switch';
 
-const SwitchTest = () => (
-  <fieldset>
-    <Switch label="Push notifications" />
-    <Switch checked label="Mail notifications" />
-    <Switch disabled label="Nothing, thanks"/>
-  </fieldset>
-);
+class SwitchTest extends React.Component {
+  state = {
+    switch_1: true,
+    switch_2: false,
+    switch_3: true
+  };
+
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <Switch
+          checked={this.state.switch_1}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 'switch_1')}
+        />
+        <Switch
+          checked={this.state.switch_2}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 'switch_2')}
+        />
+        <Switch
+          checked={this.state.switch_3}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 'switch_3')}
+        />
+      </section>
+    );
+  }
+}
 ```
 
+This component can be styled by context providing a theme with the key `RTSwitch` through the theme provider.
+
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name              | Type          | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`      | `Boolean`   | `false` | If true, the switch will be enabled.|
-| `className`    | `String`   | `''`  | Sets a class to give custom styles to the switch.|
-| `disabled`     | `Boolean`  | `false`  | If true, component will be disabled.|
-| `label`        | `String`   |       | The text string to use for the floating label element.|
-| `name`         | `String`   |        | The text string used as name of the input.|
-| `onBlur`       | `Function` |        | Callback function that is fired when when the switch is blurred.|
-| `onChange`     | `Function` |        | Callback function that is fired when the components's value changes.|
-| `onFocus`      | `Function`  |        | Callback function fire when the switch is focused.|
+| `checked`      | `Boolean`        | `false`       | If true, the switch will be enabled.|
+| `className`    | `String`         | `''`          | Sets a class to give custom styles to the switch.|
+| `disabled`     | `Boolean`        | `false`       | If true, component will be disabled.|
+| `label`        | `String`         |               | The text string to use for the floating label element.|
+| `name`         | `String`         |               | The text string used as name of the input.|
+| `onBlur`       | `Function`       |               | Callback function that is fired when when the switch is blurred.|
+| `onChange`     | `Function`       |               | Called with (checked, event) when the component's value changes.|
+| `onFocus`      | `Function`       |               | Callback function that is fired when the switch is focused.|
+
+## Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Used for the root element if the component is disabled.|
+| `field` | Used for the root element if the component is not disabled.|
+| `input` | Used for the input element.|
+| `off` | Used for a wrapper around the thumb if checked is `false`.|
+| `on` | Used for a wrapper around the thumb if checked is `true`.|
+| `ripple` | Used for the ripple inside the switch.|
+| `text` | Used for the text label element.|
+| `thumb` | Used for the thumb element.|
diff --git a/components/switch/style.scss b/components/switch/theme.scss
similarity index 90%
rename from components/switch/style.scss
rename to components/switch/theme.scss
index 1e783464e..08a5c2900 100644
--- a/components/switch/style.scss
+++ b/components/switch/theme.scss
@@ -1,10 +1,12 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .field {
   position: relative;
   display: block;
-  height: $switch-total-height;
+  height: auto;
   margin-bottom: $switch-field-margin-bottom;
   white-space: nowrap;
   vertical-align: middle;
@@ -16,7 +18,7 @@
   font-size: $switch-font-size;
   line-height: $switch-total-height;
   color: $switch-text-color;
-  white-space: nowrap;
+  white-space: normal;
   vertical-align: top;
 }
 
@@ -40,15 +42,15 @@
   cursor: pointer;
   border-radius: 50%;
   transition-property: left;
-}
 
-.ripple {
-  background-color: $switch-color;
-  opacity: .3;
-  transition-duration: $switch-ripple-duration;
+  .ripple {
+    background-color: $switch-color;
+    opacity: .3;
+    transition-duration: $switch-ripple-duration;
+  }
 }
 
-.switch-on {
+.on {
   @extend %switch;
   background: $switch-track-on-color;
   .thumb {
@@ -58,7 +60,7 @@
   }
 }
 
-.switch-off {
+.off {
   @extend %switch;
   background: $switch-track-off-color;
   .thumb {
@@ -109,7 +111,7 @@
   .text {
     color: $switch-disabled-text-color;
   }
-  .switch-on, .switch-off {
+  .on, .off {
     cursor: auto;
     background: $switch-disabled-track-color;
   }
diff --git a/components/table/Table.js b/components/table/Table.js
new file mode 100644
index 000000000..ec01b9c7b
--- /dev/null
+++ b/components/table/Table.js
@@ -0,0 +1,130 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { TABLE } from '../identifiers.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import tableHeadFactory from './TableHead.js';
+import tableRowFactory from './TableRow.js';
+
+const factory = (TableHead, TableRow) => {
+  class Table extends Component {
+    static propTypes = {
+      className: PropTypes.string,
+      heading: PropTypes.bool,
+      model: PropTypes.object,
+      multiSelectable: PropTypes.bool,
+      onChange: PropTypes.func,
+      onRowClick: PropTypes.func,
+      onSelect: PropTypes.func,
+      selectable: PropTypes.bool,
+      selected: PropTypes.array,
+      source: PropTypes.array,
+      theme: PropTypes.shape({
+        table: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      className: '',
+      heading: true,
+      selectable: true,
+      multiSelectable: true,
+      selected: [],
+      source: []
+    };
+
+    handleFullSelect = () => {
+      if (this.props.onSelect) {
+        const {source, selected} = this.props;
+        const newSelected = source.length === selected.length ? [] : source.map((i, idx) => idx);
+        this.props.onSelect(newSelected);
+      }
+    };
+
+    handleRowSelect = (index) => {
+      if (this.props.onSelect) {
+        let newSelection = [...this.props.selected];
+        if (this.props.multiSelectable) {
+          const position = this.props.selected.indexOf(index);
+          newSelection = position !== -1
+            ? newSelection.filter((el, idx) => idx !== position)
+            : newSelection.concat([index]);
+        } else {
+          newSelection = [index];
+        }
+        this.props.onSelect(newSelection);
+      }
+    };
+
+    handleRowChange = (index, key, value) => {
+      if (this.props.onChange) {
+        this.props.onChange(index, key, value);
+      }
+    };
+
+    handleRowClick = (index, event) => {
+      if (this.props.onRowClick) {
+        this.props.onRowClick(index, event);
+      }
+    }
+
+    renderHead () {
+      if (this.props.heading) {
+        const {model, selected, source, selectable, multiSelectable} = this.props;
+        const isSelected = selected.length === source.length;
+        return (
+          <TableHead
+            model={model}
+            onSelect={this.handleFullSelect}
+            selectable={selectable}
+            multiSelectable={multiSelectable}
+            selected={isSelected}
+            theme={this.props.theme}
+          />
+        );
+      }
+    }
+
+    renderBody () {
+      const { source, model, onChange, selectable, selected, theme } = this.props;
+      return (
+        <tbody>
+          {source.map((data, index) => (
+            <TableRow
+              data={data}
+              index={index}
+              key={index}
+              model={model}
+              onChange={onChange ? this.handleRowChange.bind(this) : undefined}
+              onSelect={this.handleRowSelect.bind(this, index)}
+              onRowClick={this.handleRowClick.bind(this, index)}
+              selectable={selectable}
+              selected={selected.indexOf(index) !== -1}
+              theme={theme}
+            />
+          ))}
+        </tbody>
+      );
+    }
+
+    render () {
+      const { className, theme } = this.props;
+      return (
+        <table data-react-toolbox='table' className={classnames(theme.table, className)}>
+          {this.renderHead()}
+          {this.renderBody()}
+        </table>
+      );
+    }
+  }
+
+  return Table;
+};
+
+const TableHead = tableHeadFactory(InjectCheckbox);
+const TableRow = tableRowFactory(InjectCheckbox);
+const Table = factory(TableHead, TableRow);
+
+export default themr(TABLE)(Table);
+export { factory as tableFactory };
+export { Table };
diff --git a/components/table/TableHead.js b/components/table/TableHead.js
new file mode 100644
index 000000000..884699c39
--- /dev/null
+++ b/components/table/TableHead.js
@@ -0,0 +1,50 @@
+import React, { PropTypes } from 'react';
+
+const factory = (Checkbox) => {
+  const TableHead = ({model, onSelect, selectable, multiSelectable, selected, theme}) => {
+    let selectCell;
+    const contentCells = Object.keys(model).map((key) => {
+      const name = model[key].title || key;
+      return <th key={key}>{name}</th>;
+    });
+
+    if (selectable && multiSelectable) {
+      selectCell = (
+        <th key='select' className={theme.selectable}>
+          <Checkbox onChange={onSelect} checked={selected}/>
+        </th>
+      );
+    } else if (selectable) {
+      selectCell = (
+        <th key='select' className={theme.selectable}/>
+      );
+    }
+    return (
+      <thead>
+        <tr>{[selectCell, ...contentCells]}</tr>
+      </thead>
+    );
+  };
+
+  TableHead.propTypes = {
+    className: PropTypes.string,
+    model: PropTypes.object,
+    multiSelectable: PropTypes.bool,
+    onSelect: PropTypes.func,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    theme: PropTypes.shape({
+      selectable: PropTypes.string
+    })
+  };
+
+  TableHead.defaultProps = {
+    className: '',
+    model: {},
+    selected: false
+  };
+
+  return TableHead;
+};
+
+export default factory;
diff --git a/components/table/TableRow.js b/components/table/TableRow.js
new file mode 100644
index 000000000..8b47c13f2
--- /dev/null
+++ b/components/table/TableRow.js
@@ -0,0 +1,119 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import utils from '../utils/utils';
+
+const factory = (Checkbox) => {
+  class TableRow extends Component {
+    static propTypes = {
+      data: PropTypes.object,
+      index: PropTypes.number,
+      model: PropTypes.object,
+      onChange: PropTypes.func,
+      onRowClick: PropTypes.func,
+      onSelect: PropTypes.func,
+      selectable: PropTypes.bool,
+      selected: PropTypes.bool,
+      theme: PropTypes.shape({
+        editable: PropTypes.string,
+        row: PropTypes.string,
+        selectable: PropTypes.string,
+        selected: PropTypes.string
+      })
+    };
+
+    handleInputChange = (index, key, type, event) => {
+      let value;
+      switch (type) {
+        case 'checkbox':
+          value = event.target.checked;
+          break;
+        // Handle contentEditable
+        case 'text':
+          value = event.target.textContent;
+          break;
+        default:
+          value = event.target.value;
+          break;
+      }
+
+      const onChange = this.props.model[key].onChange || this.props.onChange;
+      onChange(index, key, value);
+    };
+
+    renderSelectCell () {
+      if (this.props.selectable) {
+        return (
+          <td className={this.props.theme.selectable}>
+            <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />
+          </td>
+        );
+      }
+    }
+
+    renderCells () {
+      return Object.keys(this.props.model).map((key) => {
+        return <td key={key} onClick={this.props.onRowClick}>{this.renderCell(key)}</td>;
+      });
+    }
+
+    renderCell (key) {
+      const value = this.props.data[key];
+
+      // if the value is a valid React element return it directly, since it
+      // cannot be edited and should not be converted to a string...
+      if (React.isValidElement(value)) { return value; }
+
+      const onChange = this.props.model[key].onChange || this.props.onChange;
+      if (onChange) {
+        return this.renderInput(key, value);
+      } else if (value) {
+        return value.toString();
+      }
+    }
+
+    renderInput (key, value) {
+      const index = this.props.index;
+      const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
+      const inputValue = utils.prepareValueForInput(value, inputType);
+      const checked = inputType === 'checkbox' && value ? true : null;
+
+      if (inputType === 'text') {
+        return (
+          <div
+            children={inputValue}
+            contentEditable
+            suppressContentEditableWarning
+            onInput={this.handleInputChange.bind(null, index, key, inputType)}
+          />
+        );
+      }
+
+      return (
+        <input
+          checked={checked}
+          onChange={this.handleInputChange.bind(null, index, key, inputType)}
+          type={inputType}
+          value={inputValue}
+        />
+      );
+    }
+
+    render () {
+      const className = classnames(this.props.theme.row, {
+        [this.props.theme.editable]: this.props.onChange,
+        [this.props.theme.selected]: this.props.selected
+      });
+
+      return (
+        <tr data-react-toolbox-table='row' className={className}>
+          {this.renderSelectCell()}
+          {this.renderCells()}
+        </tr>
+      );
+    }
+  }
+
+  return TableRow;
+};
+
+export default factory;
diff --git a/components/table/_config.scss b/components/table/_config.scss
index 07e90ec3f..7ec3b5a2b 100644
--- a/components/table/_config.scss
+++ b/components/table/_config.scss
@@ -1,5 +1,5 @@
-$table-row-height: 48px;
-$table-row-divider: solid 1px rgba(0,0,0,.12);
-$table-row-offset: 1.8 * $unit;
-$table-row-highlight: #eee;
-$table-text-color: #757575;
+$table-row-height: 48px !default;
+$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
+$table-row-offset: 1.8 * $unit !default;
+$table-row-highlight: #eee !default;
+$table-text-color: #757575 !default;
diff --git a/components/table/components/head.jsx b/components/table/components/head.jsx
deleted file mode 100644
index 3f869618e..000000000
--- a/components/table/components/head.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import Checkbox from '../../checkbox';
-import style from './style';
-
-class Head extends React.Component {
-
-  static propTypes = {
-    className: React.PropTypes.string,
-    model: React.PropTypes.object,
-    onSelect: React.PropTypes.func,
-    selected: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: '',
-    model: {},
-    selected: false
-  };
-
-  handleSelectChange = (event) => {
-    this.props.onSelect(event);
-  };
-
-  renderCellSelectable () {
-    if (this.props.onSelect) {
-      return (
-        <th className={style.selectable}>
-          <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
-        </th>
-      );
-    }
-  }
-
-  render () {
-    return (
-      <thead data-react-toolbox-table='head' className={this.props.className}>
-        <tr>
-        { this.renderCellSelectable() }
-        {
-          Object.keys(this.props.model).map((key) => {
-            return (<th key={key}>{key}</th>);
-          })
-        }
-        </tr>
-      </thead>
-    );
-  }
-}
-
-export default Head;
diff --git a/components/table/components/row.jsx b/components/table/components/row.jsx
deleted file mode 100644
index 7e97cc767..000000000
--- a/components/table/components/row.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import Checkbox from '../../checkbox';
-import style from './style';
-
-// Private
-const _castType = (type) => {
-  let input_type = 'text';
-  if (type === Date) {
-    input_type = 'date';
-  } else if (type === Number) {
-    input_type = 'number';
-  } else if (type === Boolean) {
-    input_type = 'checkbox';
-  }
-  return input_type;
-};
-
-const _castValue = (value, type) => {
-  let cast = value;
-  if (value && type === Date) {
-    cast = new Date(value).toISOString().slice(0, 10);
-  }
-  return cast;
-};
-
-class Row extends React.Component {
-
-  static propTypes = {
-    changed: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    data: React.PropTypes.object,
-    index: React.PropTypes.number,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    selected: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: ''
-  };
-
-  handleInputChange = (key, event) => {
-    this.props.onChange(event, this, key, event.target.value);
-  };
-
-  handleSelectChange = (event) => {
-    this.props.onSelect(event, this);
-  };
-
-  renderCell (key) {
-    let value = this.props.data[key];
-
-    if (this.props.onChange) {
-      const attr = this.props.model[key];
-      value = _castValue(value, attr.type);
-      return (
-        <input
-          type={_castType(attr.type)}
-          value={value}
-          onChange={this.handleInputChange.bind(null, key)}
-        />
-      );
-    } else {
-      return value;
-    }
-  }
-
-  renderCellSelectable () {
-    if (this.props.onSelect) {
-      return (
-        <td className={style.selectable}>
-          <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
-        </td>
-      );
-    }
-  }
-
-  render () {
-    let className = `${this.props.className} ${style.row}`;
-    if (this.props.changed) className += ` ${style.changed}`;
-    if (this.props.onChange) className += ` ${style.editable}`;
-    if (this.props.selected) className += ` ${style.selected}`;
-
-    return (
-      <tr data-react-toolbox-table='row' className={className}>
-      { this.renderCellSelectable() }
-      {
-        Object.keys(this.props.model).map((key) => {
-          return (<td key={key}>{this.renderCell(key)}</td>);
-        })
-      }
-      </tr>
-    );
-  }
-}
-
-export default Row;
diff --git a/components/table/components/style.scss b/components/table/components/style.scss
deleted file mode 100644
index b09d8aebc..000000000
--- a/components/table/components/style.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.row {
-  transition: background-color $animation-duration $animation-curve-default;
-  &:last-child {
-    border-color: transparent;
-  }
-  > td {
-    > input {
-      display: block;
-      width: 100%;
-      background-color: transparent;
-      border: none;
-    }
-  }
-}
-
-.selected, .row:hover {
-  background-color: $table-row-highlight;
-}
-
-.editable > * {
-  cursor: pointer;
-}
-
-.changed {
-  // @TODO: We've to create a style for changed rows.
-}
-
-.selectable {
-  padding-right: 0 !important;
-  width: 1.8 * $unit;
-  > * {
-    margin: 0;
-  }
-}
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
new file mode 100644
index 000000000..a4946bd34
--- /dev/null
+++ b/components/table/index.d.ts
@@ -0,0 +1,151 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface TableTheme extends TableRowTheme {
+  /**
+   * Classname used for the root element.
+   */
+  table?: string;
+}
+
+export interface TableProps extends ReactToolbox.Props {
+  /**
+   * If true, component will show a heading using model field names.
+   * @default true
+   */
+  heading?: boolean;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback fired when row was clicked.
+   */
+  onRowClick?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: Function;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   * @default true
+   */
+  multiSelectable?: boolean;
+  /**
+   * Array of indexes of the items in the source that should appear as selected.
+   */
+  selected?: any[];
+  /**
+   * Array of objects representing each item to show.
+   */
+  source?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableTheme;
+}
+
+export class Table extends React.Component<TableProps, {}> { }
+
+export interface TableHeadTheme {
+  /**
+   * It will be added to a row in case it is selectable.
+   */
+  selectable?: string;
+}
+
+export interface TableHeadProps extends ReactToolbox.Props {
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   */
+  multiSelectable?: boolean;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: Function;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * Whether header should look selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableHeadTheme;
+}
+
+export class TableHead extends React.Component<TableHeadProps, {}> { }
+
+export interface TableRowTheme extends TableHeadTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
+  editable?: string;
+  /**
+   * Used for the row element.
+   */
+  row?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
+  selected?: string;
+}
+
+export interface TableRowProps {
+  /**
+   * Single row data.
+   */
+  data?: any;
+  /**
+   * Row index.
+   */
+  index?: number;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback fired when row was clicked.
+   */
+  onRowClick?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: Function;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * Whether table row should look selected.
+   * @default false
+   */
+  selected?: boolean;
+}
+
+export class TableRow extends React.Component<TableRowProps, {}> { }
+
+export default Table;
diff --git a/components/table/index.js b/components/table/index.js
new file mode 100644
index 000000000..77e1c7751
--- /dev/null
+++ b/components/table/index.js
@@ -0,0 +1,15 @@
+import { themr } from 'react-css-themr';
+import { TABLE } from '../identifiers.js';
+import { Checkbox } from '../checkbox';
+import { tableFactory } from './Table.js';
+import tableHeadFactory from './TableHead.js';
+import tableRowFactory from './TableRow.js';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(TABLE, theme)(Component);
+const ThemedTableHead = applyTheme(tableHeadFactory(Checkbox));
+const ThemedTableRow = applyTheme(tableRowFactory(Checkbox));
+const ThemedTable = applyTheme(tableFactory(ThemedTableHead, ThemedTableRow));
+
+export default ThemedTable;
+export { ThemedTable as Table };
diff --git a/components/table/index.jsx b/components/table/index.jsx
deleted file mode 100644
index 013bc96a8..000000000
--- a/components/table/index.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import Head from './components/head';
-import Row from './components/row';
-import style from './style';
-import utils from '../utils';
-
-class Table extends React.Component {
-
-  static propTypes = {
-    className: React.PropTypes.string,
-    dataSource: React.PropTypes.array,
-    model: React.PropTypes.object,
-    heading: React.PropTypes.bool,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    className: '',
-    dataSource: [],
-    heading: true
-  };
-
-  state = {
-    dataSource: utils.cloneObject(this.props.dataSource),
-    selected: false,
-    selected_rows: []
-  };
-
-  componentWillReceiveProps = (next_props) => {
-    if (next_props.dataSource) {
-      this.setState({dataSource: utils.cloneObject(next_props.datasSource)});
-    }
-  };
-
-  handleRowChange = (event, row, key, value) => {
-    const dataSource = this.state.dataSource;
-    dataSource[row.props.index][key] = value;
-    this.setState({ dataSource: dataSource });
-    if (this.props.onChange) {
-      this.props.onChange(event, this, row);
-    }
-  };
-
-  handleRowSelect = (event, instance) => {
-    if (this.props.onSelect) {
-      const index = instance.props.index;
-      const selected_rows = this.state.selected_rows;
-      const selected = selected_rows.indexOf(index) === -1;
-      if (selected) {
-        selected_rows.push(index);
-        this.props.onSelect(event, instance.props.data);
-      } else {
-        delete selected_rows[selected_rows.indexOf(index)];
-      }
-      this.setState({ selected_rows: selected_rows });
-    }
-  };
-
-  handleRowsSelect = () => {
-    this.setState({ selected: !this.state.selected });
-  };
-
-  isChanged = (data, base) => {
-    let changed = false;
-    Object.keys(data).map((key) => {
-      if (data[key] !== base[key]) {
-        changed = true;
-      }
-    });
-    return changed;
-  };
-
-  renderHead () {
-    if (this.props.heading) {
-      return (
-        <Head
-          model={this.props.model}
-          onSelect={this.props.onSelect ? this.handleRowsSelect : null}
-          selected={this.state.selected}
-        />
-      );
-    }
-  }
-
-  renderBody () {
-    return (
-      <tbody>
-      {
-        this.state.dataSource.map((data, index) => {
-          return (
-            <Row
-              changed={this.isChanged(data, this.props.dataSource[index])}
-              data={data}
-              index={index}
-              key={index}
-              model={this.props.model}
-              onChange={this.props.onChange ? this.handleRowChange : null}
-              onSelect={this.props.onSelect ? this.handleRowSelect : null}
-              selected={this.state.selected || this.state.selected_rows.indexOf(index) !== -1}
-            />
-          );
-        })
-      }
-      </tbody>
-    );
-  }
-
-  render () {
-    const className = `${this.props.className} ${style.root}`;
-    return (
-      <table data-react-toolbox='table' className={className}>
-        { this.renderHead() }
-        { this.renderBody() }
-      </table>
-    );
-  }
-
-  getValue () {
-    return this.state.dataSource;
-  }
-
-  getSelected () {
-    const rows = [];
-    this.state.dataSource.map((row, index) => {
-      if (this.state.selected_rows.indexOf(index) !== -1) rows.push(row);
-    });
-    return rows;
-  }
-}
-
-export default Table;
diff --git a/components/table/readme.md b/components/table/readme.md
index 2eed7aa29..4a3853740 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -1,50 +1,91 @@
 # Table
 
-The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new dataSource with each change.
+The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
+
+*A note about models and table headers*: By default, the table header text uses name of the property in the model. Additionally, the table header text is automatically set in title case (first letter of each word capitalized). Thus, if you use the property name `twitter` in your model, the displayed table header will be `Twitter`. You can override the default text by including a `title` attribute, as demonstrated in the example below for the `birthdate` property. You may also override the title case in your own theme's css. In the following example, we force the first letter of the table header text to lowercase, using SCSS syntax:
+
+```
+.table {
+  th {
+    &:first-letter {
+      text-transform: lowercase;
+    }
+  }
+}
+```
 
 <!-- example -->
+
 ```jsx
 import Table from 'react-toolbox/lib/table';
 
 const UserModel = {
-  name: {type: String}
-,
-  twitter: {type: String}
-,
-  birthdate: {type: Date}
-,
-  cats: {type: Number}
-,
-  dogs: {type: Number}
-,
+  name: {type: String},
+  twitter: {type: String},
+  birthdate: {type: Date,
+    title: 'Date of Birth'},
+  cats: {type: Number},
+  dogs: {type: Number},
   active: {type: Boolean}
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1}
-,
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
-const TableTest = () => (
-  <Table model={UserModel} dataSource={users} />
-)
+class TableTest extends React.Component {
+  state = { selected: [], source: users };
+
+  handleChange = (row, key, value) => {
+    const source = this.state.source;
+    source[row][key] = value;
+    this.setState({source});
+  };
+
+  handleSelect = (selected) => {
+    this.setState({selected});
+  };
+
+  render () {
+    return (
+      <Table
+        model={UserModel}
+        onChange={this.handleChange}
+        onSelect={this.handleSelect}
+        selectable
+        multiSelectable
+        selected={this.state.selected}
+        source={this.state.source}
+      />
+    );
+  }
+}
+`
 ```
 
-## Properties
+This component can be styled by context providing a theme with the key `RTTable` through the theme provider.
 
-| Name              | Type          | Default         | Description|
-|:-----|:-----|:-----|:-----|
-| `className`     | `String`      | `''`            | Sets a class to style of the Component.|
-| `dataSource`    | `Array`       |           | array representing all items for show.|
-| `model`         | `Object`      |                 | If true, component will be disabled.|
-| `heading`       | `Bool`        | `true`          | If true, component will show a heading using model field names.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `onSelect`      | `Function`    |                 | Callback function when  selects a determinate row.|
+## Properties
 
-## Methods
+Name              | Type       | Default | Description
+:---------------- | :--------- | :------ | :--------------------------------------------------------------------------------------------------
+`className`       | `String`   | `''`    | Sets a custom class to style the Component.
+`heading`         | `Boolean`  | `true`  | If true, component will show a heading using model field names.
+`model`           | `Object`   |         | Object describing the data model that represents each object in the `source`.
+`onChange`        | `Function` |         | Callback function that is fired when an item in a row changes. If set, rows are editable.
+`onSelect`        | `Function` |         | Callback function invoked when the row selection changes.
+`selectable`      | `Boolean`  | `true`  | If true, each row will display a checkbox to allow the user to select that one row.
+`multiSelectable` | `Boolean`  | `true`  | If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+`selected`        | `Array`    |         | Array of indexes of the items in the source that should appear as selected.
+`source`          | `Array`    |         | Array of objects representing each item to show.
 
-This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
+## Theme
 
-- `getValue` is used to retrieve the current dataSource.
-- `getSelected` is used to retrieve the current rows selected.
+Name         | Description
+:----------- | :--------------------------------------------------
+`editable`   | It will be added to a row in case it is editable.
+`row`        | Used for the row element.
+`selectable` | It will be added to a row in case it is selectable.
+`selected`   | Added to a row in case it is selected.
+`table`      | Classname used for the root element.
diff --git a/components/table/style.scss b/components/table/style.scss
deleted file mode 100644
index 6dd2531fb..000000000
--- a/components/table/style.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  width: 100%;
-  font-size: $font-size-tiny;
-  color: $table-text-color;
-  text-align: left;
-  tr {
-    height: $table-row-height;
-    line-height: $table-row-height;
-    border-bottom: $table-row-divider;
-
-  }
-  th {
-    font-weight: $font-weight-bold;
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-  th, td {
-    position: relative;
-    padding: 0 $table-row-offset;
-  }
-}
diff --git a/components/table/theme.scss b/components/table/theme.scss
new file mode 100644
index 000000000..232ed4268
--- /dev/null
+++ b/components/table/theme.scss
@@ -0,0 +1,59 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.table {
+  width: 100%;
+  font-size: $font-size-tiny;
+  color: $table-text-color;
+  text-align: left;
+  border-spacing: 0;
+  tr {
+    height: $table-row-height;
+    line-height: $table-row-height;
+  }
+  th {
+    font-weight: $font-weight-bold;
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+  th, td {
+    position: relative;
+    padding: 0 $table-row-offset;
+    border-bottom: $table-row-divider;
+    &.selectable {
+      width: 1.8 * $unit;
+      padding-right: 0;
+      > * {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.row {
+  transition: background-color $animation-duration $animation-curve-default;
+  &:last-child {
+    td {
+      border-color: transparent;
+    }
+  }
+  > td {
+    > input {
+      display: block;
+      width: 100%;
+      background-color: transparent;
+      border: 0;
+    }
+  }
+}
+
+.selected, .row:hover {
+  background-color: $table-row-highlight;
+}
+
+.editable > * {
+  cursor: pointer;
+}
diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
new file mode 100644
index 000000000..8b9cb7721
--- /dev/null
+++ b/components/tabs/Tab.js
@@ -0,0 +1,71 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { FontIcon } from '../font_icon';
+import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
+
+class Tab extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    activeClassName: PropTypes.string,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    hidden: PropTypes.bool,
+    icon: PropTypes.node,
+    label: PropTypes.node,
+    onActive: PropTypes.func,
+    onClick: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      disabled: PropTypes.string,
+      hidden: PropTypes.string,
+      label: PropTypes.string,
+      withIcon: PropTypes.string,
+      withText: PropTypes.string
+    })
+  };
+
+  static defaultProps = {
+    active: false,
+    className: '',
+    disabled: false,
+    hidden: false
+  };
+
+  componentDidUpdate (prevProps) {
+    if (!prevProps.active && this.props.active && this.props.onActive) {
+      this.props.onActive();
+    }
+  }
+
+  handleClick = (event) => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(event);
+    }
+  };
+
+  render () {
+    const {
+      onActive, // eslint-disable-line
+      active, activeClassName, className, disabled, hidden, label, icon, theme, ...other
+    } = this.props;
+    const _className = classnames(theme.label, {
+      [theme.active]: active,
+      [theme.hidden]: hidden,
+      [theme.withText]: label,
+      [theme.withIcon]: icon,
+      [theme.disabled]: disabled,
+      [activeClassName]: active
+    }, className);
+
+    return (
+      <button type="button" {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
+        {icon && <FontIcon className={theme.icon} value={icon}/>}
+        {label}
+      </button>
+    );
+  }
+}
+
+export default themr(TABS)(Tab);
+export { Tab };
diff --git a/components/tabs/TabContent.js b/components/tabs/TabContent.js
new file mode 100644
index 000000000..b4ff9f839
--- /dev/null
+++ b/components/tabs/TabContent.js
@@ -0,0 +1,37 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
+
+class TabContent extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tabIndex: PropTypes.number,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      tab: PropTypes.string
+    })
+  };
+
+  static defaultProps = {
+    active: false,
+    className: ''
+  };
+
+  render () {
+    const className = classnames(this.props.theme.tab, {
+      [this.props.theme.active]: this.props.active
+    }, this.props.className);
+
+    return (
+      <section className={className} tabIndex={this.props.tabIndex}>
+        {this.props.children}
+      </section>
+    );
+  }
+}
+
+export default themr(TABS)(TabContent);
+export { TabContent };
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
new file mode 100644
index 000000000..92625317e
--- /dev/null
+++ b/components/tabs/Tabs.js
@@ -0,0 +1,204 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import InjectTab from './Tab.js';
+import InjectTabContent from './TabContent.js';
+
+const factory = (Tab, TabContent, FontIcon) => {
+  class Tabs extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disableAnimatedBottomBorder: PropTypes.bool,
+      fixed: PropTypes.bool,
+      hideMode: PropTypes.oneOf(['display', 'unmounted']),
+      index: PropTypes.number,
+      inverse: PropTypes.bool,
+      onChange: PropTypes.func,
+      theme: PropTypes.shape({
+        arrow: PropTypes.string,
+        arrowContainer: PropTypes.string,
+        disableAnimation: PropTypes.string,
+        fixed: PropTypes.string,
+        inverse: PropTypes.string,
+        navigation: PropTypes.string,
+        navigationContainer: PropTypes.string,
+        pointer: PropTypes.string,
+        tabs: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      index: 0,
+      fixed: false,
+      inverse: false,
+      hideMode: 'unmounted'
+    };
+
+    state = {
+      pointer: {},
+      arrows: {}
+    };
+
+    componentDidMount () {
+      window.addEventListener('resize', this.handleResize);
+      this.handleResize();
+    }
+
+    componentDidUpdate (prevProps) {
+      const { index, children } = this.props;
+      const { index: prevIndex, children: prevChildren } = prevProps;
+      if (index !== prevIndex || children !== prevChildren) {
+        this.updatePointer(index);
+      }
+    }
+
+    componentWillUnmount () {
+      window.removeEventListener('resize', this.handleResize);
+      clearTimeout(this.resizeTimeout);
+    }
+
+    handleHeaderClick = (event) => {
+      const idx = parseInt(event.currentTarget.id);
+      if (this.props.onChange) this.props.onChange(idx);
+    };
+
+    handleResize = () => {
+      if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = setTimeout(() => {
+        this.updatePointer(this.props.index);
+        this.updateArrows();
+      }, 100);
+    };
+
+    updatePointer = idx => {
+      if (this.navigationNode && this.navigationNode.children[idx]) {
+        const nav = this.navigationNode.getBoundingClientRect();
+        const label = this.navigationNode.children[idx].getBoundingClientRect();
+        const scrollLeft = this.navigationNode.scrollLeft;
+        this.setState({
+          pointer: {
+            top: `${nav.height}px`,
+            left: `${label.left - nav.left + scrollLeft}px`,
+            width: `${label.width}px`
+          }
+        });
+      }
+    }
+
+    updateArrows = () => {
+      const nav = this.navigationNode;
+      this.setState({
+        arrows: {
+          left: nav.scrollLeft > 0,
+          right: nav.scrollWidth > nav.clientWidth
+            && (nav.scrollLeft + nav.clientWidth) < nav.scrollWidth
+        }
+      });
+    }
+
+    scrollNavigation = (factor) => {
+      const oldScrollLeft = this.navigationNode.scrollLeft;
+      this.navigationNode.scrollLeft += factor * this.navigationNode.clientWidth;
+      if (this.navigationNode.scrollLeft !== oldScrollLeft) {
+        this.updateArrows();
+      }
+    }
+
+    scrollRight = () =>
+      this.scrollNavigation(-1);
+
+    scrollLeft = () =>
+      this.scrollNavigation(+1);
+
+    parseChildren () {
+      const headers = [];
+      const contents = [];
+
+      React.Children.forEach(this.props.children, (item) => {
+        if (item.type === Tab) {
+          headers.push(item);
+          if (item.props.children) {
+            contents.push(<TabContent children={item.props.children} theme={this.props.theme} />);
+          }
+        } else if (item.type === TabContent) {
+          contents.push(item);
+        }
+      });
+
+      return {headers, contents};
+    }
+
+    renderHeaders (headers) {
+      return headers.map((item, idx) => {
+        return React.cloneElement(item, {
+          id: idx,
+          key: idx,
+          theme: this.props.theme,
+          active: this.props.index === idx,
+          onClick: (event) => {
+            this.handleHeaderClick(event);
+            item.props.onClick && item.props.onClick(event);
+          }
+        });
+      });
+    }
+
+    renderContents (contents) {
+      const contentElements = contents.map((item, idx) => {
+        return React.cloneElement(item, {
+          key: idx,
+          theme: this.props.theme,
+          active: this.props.index === idx,
+          hidden: this.props.index !== idx && this.props.hideMode === 'display',
+          tabIndex: idx
+        });
+      });
+
+      return this.props.hideMode === 'display'
+        ? contentElements
+        : contentElements.filter((item, idx) => (idx === this.props.index));
+    }
+
+    render () {
+      const { className, disableAnimatedBottomBorder, theme, fixed, inverse } = this.props;
+      const { left: hasLeftArrow, right: hasRightArrow } = this.state.arrows;
+      const { headers, contents } = this.parseChildren();
+      const classNamePointer = classnames(theme.pointer, {
+        [theme.disableAnimation]: disableAnimatedBottomBorder
+      });
+
+      const classNames = classnames(theme.tabs, {
+        [theme.fixed]: fixed,
+        [theme.inverse]: inverse
+      }, className);
+
+      return (
+        <div data-react-toolbox='tabs' className={classNames}>
+          <div className={theme.navigationContainer}>
+            {hasLeftArrow && <div className={theme.arrowContainer} onClick={this.scrollRight}>
+              <FontIcon className={theme.arrow} value="keyboard_arrow_left" />
+            </div>}
+            <nav className={theme.navigation} ref={node => {this.navigationNode = node; }}>
+              {this.renderHeaders(headers)}
+              <span className={classNamePointer} style={this.state.pointer} />
+            </nav>
+            {hasRightArrow && <div className={theme.arrowContainer} onClick={this.scrollLeft}>
+              <FontIcon className={theme.arrow} value="keyboard_arrow_right" />
+            </div>}
+          </div>
+          {this.renderContents(contents)}
+        </div>
+      );
+    }
+  }
+
+  return Tabs;
+};
+
+const Tabs = factory(InjectTab, InjectTabContent, InjectFontIcon);
+export default themr(TABS)(Tabs);
+export { factory as tabsFactory };
+export { Tabs };
diff --git a/components/tabs/__tests__/index.spec.js b/components/tabs/__tests__/index.spec.js
new file mode 100644
index 000000000..522e5c229
--- /dev/null
+++ b/components/tabs/__tests__/index.spec.js
@@ -0,0 +1,114 @@
+import expect from 'expect';
+import utils from '../../utils/testing';
+import ReactTestUtils from 'react-addons-test-utils';
+
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import Tabs, { Tabs as RawTabs } from '../Tabs';
+import Tab from '../Tab';
+import TabContent from '../TabContent';
+import theme from '../theme.scss';
+
+const getRenderedClassName = (tree, TargetComponent) => {
+  const rendered = ReactTestUtils.findRenderedComponentWithType(tree, TargetComponent);
+  return ReactDOM.findDOMNode(rendered).getAttribute('class');
+};
+
+describe('Tabs', function () {
+  let tabContents, composition;
+
+  class Composition extends Component {
+    constructor () {
+      super();
+      this.state = { index: 0 };
+    }
+
+    render () {
+      return (
+        <Tabs index={this.state.index} {...this.props}>
+          <Tab label="tab1">tab1</Tab>
+          <Tab label="tab2">tab2</Tab>
+        </Tabs>
+      );
+    }
+  }
+
+  it('defaults to only rendering the current tab', function () {
+    // initial render
+    composition = utils.renderComponent(Composition);
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(1);
+    expect(tabContents[0].props.tabIndex).toEqual(0);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(1);
+    expect(tabContents[0].props.tabIndex).toEqual(1);
+  });
+
+  it('renders inactive tabs when hideMode is set to display', function () {
+    // initial render
+    composition = utils.renderComponent(Composition, { hideMode: 'display' });
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(2);
+
+    let tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
+    let tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
+
+    expect(tabOne.props.hidden).toEqual(false);
+    expect(tabTwo.props.hidden).toEqual(true);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(2);
+
+    tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
+    tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
+
+    expect(tabOne.props.hidden).toEqual(true);
+    expect(tabTwo.props.hidden).toEqual(false);
+  });
+
+  describe('#render', function () {
+    it('does not use fixed by default', function () {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toNotContain(theme.fixed);
+    });
+
+    it('uses fixed when set', function () {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} fixed />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toContain(theme.fixed);
+    });
+
+    it('does not use inverse by default', function () {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toNotContain(theme.inverse);
+    });
+
+    it('uses inverse when set', function () {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} inverse />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toContain(theme.inverse);
+    });
+  });
+});
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 5b29e5345..e5ee9c8e0 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -1,11 +1,20 @@
-$tab-label-disabled-opacity: .2;
-$tab-label-h-padding: 1.2 * $unit;
-$tab-label-height: 4.8 * $unit;
-$tab-text-height: 1.4 * $unit;
-$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2;
-$tab-navigation-border-color: $color-divider;
-$tab-pointer-color: unquote("rgb(#{$color-primary})") !default;
-$tab-pointer-height: .2 * $unit;
+$tab-label-disabled-opacity: .2 !default;
+$tab-label-h-padding: 1.2 * $unit !default;
+$tab-label-height: 4.8 * $unit !default;
+$tab-icon-height: 2.4 * $unit !default;
+$tab-icon-margin-bottom: .8 * $unit !default;
+$tab-text-height: 1.4 * $unit !default;
+$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
+$tab-navigation-border-color: $color-divider !default;
+$tab-pointer-color: $color-primary !default;
+$tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
-$tab-text-color: unquote("rgb(#{$tab-text})") !default;
-$tab-text-inactive-color: unquote("rgba(#{$tab-text}, 0.70)") !default;
+$tab-text-color: $tab-text !default;
+$tab-text-inactive-color: rgba($tab-text, .7) !default;
+
+// Inverse
+$tab-inverse-bar-color: $color-primary !default;
+$tab-inverse-pointer-color: $color-accent !default;
+$tab-inverse-text: $color-primary-contrast !default;
+$tab-inverse-text-color: $tab-inverse-text !default;
+$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
new file mode 100644
index 000000000..35750cb0e
--- /dev/null
+++ b/components/tabs/index.d.ts
@@ -0,0 +1,185 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface TabsTheme extends TabTheme, TabContentTheme {
+  /**
+   * Class used for arrows.
+   */
+  arrow?: string;
+  /**
+   * Class used for arrow container.
+   */
+  arrowContainer?: string;
+  /**
+   * Class used when 'disableAnimatedBottomBorder' is true.
+   */
+  disableAnimation?: string;
+  /**
+   * Used to make the 'fixed tabs'.
+   */
+  fixed?: string;
+  /**
+   * Used to invert the colors.
+   */
+  inverse?: string;
+  /**
+   * Used for the navigation element.
+   */
+  navigation?: string;
+  /**
+   * Used for navigation container.
+   */
+  navigationContainer?: string;
+  /**
+   * Used for the moving underline element.
+   */
+  pointer?: string;
+  /**
+   * Used as a root classname for the component.
+   */
+  tabs?: string;
+}
+
+export interface TabsProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Disable the animation below the active tab.
+   * @default false
+   */
+  disableAnimatedBottomBorder?: boolean;
+  /**
+   * Current
+   * @default 0
+   */
+  index?: number;
+  /**
+   * `unmounted` mode will not mount the tab content of inactive tabs.
+   * `display` mode will mount but hide inactive tabs.
+   * Consider holding state outside of the Tabs component before using `display` mode
+   * @default unmounted
+   */
+  hideMode?: 'display' | 'unmounted';
+  /**
+   * If True, the tabs will have an inverse style.
+   */
+  inverse?: boolean;
+  /**
+   * If True, the tabs will be fixed, covering the whole width.
+   */
+  fixed?: boolean;
+  /**
+   * Callback function that is fired when the tab changes.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabsTheme;
+}
+
+export class Tabs extends React.Component<TabsProps, {}> { }
+
+export interface TabTheme {
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  active?: string;
+  /**
+   * Added to the navigation tab element in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Added to the navigation tab element in case it's hidden.
+   */
+  hidden?: string;
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  label?: string;
+  /**
+   * Class added when icon is set.
+   */
+  withIcon?: string;
+  /**
+   * Class added when label is set.
+   */
+  withText?: string;
+}
+
+export interface TabProps extends ReactToolbox.Props {
+  /**
+   * If true, the current component is visible.
+   */
+  active?: boolean;
+  /**
+   * Additional class name to provide custom styling for the active tab.
+   */
+  activeClassName?: string;
+  /**
+   * If true, the current component is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the current component is not visible.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * Icon to be used in inner FontIcon.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Label text for navigation header. Required.
+   */
+  label: string;
+  /**
+   * Callback function that is fired when the tab is activated.
+   */
+  onActive?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabTheme;
+  /**
+   * Additional properties passed to Tab root container.
+   */
+  [key: string]: any;
+}
+
+export class Tab extends React.Component<TabProps, {}> { }
+
+export interface TabContentTheme {
+  /**
+   * Added when tab is active.
+   */
+  active?: string;
+  /**
+   * Used for the tab content element.
+   */
+  tab?: string;
+}
+
+export interface TabContentProps extends ReactToolbox.Props {
+  /**
+   * Whether tab is active.
+   */
+  active?: boolean;
+  /**
+   * Tab content.
+   */
+  children?: React.ReactNode;
+  /**
+   * Current tab index.
+   */
+  tabIndex?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabContentTheme;
+}
+
+export class TabContent extends React.Component<TabContentProps, {}> { }
diff --git a/components/tabs/index.js b/components/tabs/index.js
new file mode 100644
index 000000000..728020542
--- /dev/null
+++ b/components/tabs/index.js
@@ -0,0 +1,15 @@
+import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
+import { tabsFactory } from './Tabs.js';
+import { TabContent } from './TabContent.js';
+import { Tab } from './Tab.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(TABS, theme)(Component);
+const ThemedTabContent = applyTheme(TabContent);
+const ThemedTab = applyTheme(Tab);
+const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent, FontIcon));
+
+export { ThemedTab as Tab };
+export { ThemedTabs as Tabs };
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
deleted file mode 100644
index 8ef447e6e..000000000
--- a/components/tabs/index.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  Tab: require('./tab'),
-  Tabs: require('./tabs')
-};
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 9e49e38b9..07680ce95 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -1,44 +1,118 @@
 # Tabs
 
-[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. For now we are using tabs along with content so it's not possible to render just the tab headers with event listeners. In the future we will add this feature but for now you can compose your tabs with content:
+[Tabs](https://material.google.com/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
 
 <!-- example -->
 ```jsx
 import {Tab, Tabs} from 'react-toolbox';
 
-const TabsExample = () => (
-  <Tabs>
-    <Tab label='Primary'><small>Primary content</small></Tab>
-    <Tab label='Secondary'><small>Secondary content</small></Tab>
-    <Tab label='Third' disabled><small>Disabled content</small></Tab>
-    <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-    <Tab label='Fifth'><small>Fifth content</small></Tab>
-  </Tabs>
-);
+class TabsTest extends React.Component {
+  state = {
+    index: 1,
+    fixedIndex: 1,
+    inverseIndex: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  handleFixedTabChange = (index) => {
+    this.setState({fixedIndex: index});
+  };
+
+  handleInverseTabChange = (index) => {
+    this.setState({inverseIndex: index});
+  };
+
+  handleActive = () => {
+    console.log('Special one activated');
+  };
+
+  render () {
+    return (
+      <section>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+        <h5>Fixed Tabs</h5>
+        <Tabs index={this.state.fixedIndex} onChange={this.handleFixedTabChange} fixed>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+          <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTTabs`.
+
 ## Tabs
 
 This component acts as the wrapper and the main controller of the content that is being displayed. It gets some properties that can be spread to the children.
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name                          | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        | `''`            | Additional class name to provide custom styling.|
-| `index`         | `Number`        | `0`             | Current <Tab> |
-| `onChange`      | `Function`      |                 | Callback function that is fired when the tab changes.
+| `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
+| `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab.|
+| `fixed`                       | `Boolean`       | `false`         | If True, the tabs will be 'fixed tabs'.|
+| `hideMode`                    | `enum`(`'display'`,`'unmounted'`) | `unmounted`         | `unmounted` mode will not mount the tab content of inactive tabs. `display` mode will mount but hide inactive tabs. Consider holding state outside of the Tabs component before using `display` mode |
+| `index`                       | `Number`        | `0`             | Current <Tab> |
+| `inverse`                     | `Boolean`       | `false`         | If True, the tabs will have an inverse style.|
+| `onChange`                    | `Function`      |                 | Callback function that is fired when the tab changes.|
+
+### Theming
 
-The tabs component has state to hold the currently activated tab and exposes a method to change it manually called `active`. You can call this method with the index value of the child you want to activate.
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the active tab content and header.|
+| `fixed` | Used to make the tabs 'fixed tabs'.|
+| `inverse` | Used to invert the colors.|
+| `navigation` | Used for the navigation element.|
+| `pointer` | Used for the moving underline element.|
+| `tabs` |Used as a root classname for the component.|
+| `tab` | Used for the tab content element.|
 
 ## Tab
 
 Represent a single tab element and it should include some properties to describe the tab itself and get children elements as content.
 
-| Name              | Type          | Default         | Description|
+### Properties
+
+| Name              | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       | `false`         | If true, the current component is visible.|
-| `className`     | `String`        | `''`            | Additional class name to provide custom styling.|
-| `disabled`      | `Boolean`       | `false`         | If true, the current component is not clickable.|
-| `hidden`        | `Boolean`       | `false`         | If true, the current component is not visible.|
-| `label`         | `String`        |                 | Label text for navigation header |
-| `onActive`      | `Function`      |                 | Callback function that is fired when the tab is activated. |
-| `tabIndex`      | `Number`        |                 | Sets the tabindex html attribute.|
+| `active`          | `Boolean`       | `false`         | If true, the current component is visible.|
+| `activeClassName` | `String`        | `''`            | Additional class name to provide custom styling for the active tab.|
+| `className`       | `String`        | `''`            | Additional class name to provide custom styling for each tab.|
+| `disabled`        | `Boolean`       | `false`         | If true, the current component is not clickable.|
+| `hidden`          | `Boolean`       | `false`         | If true, the current component is not visible.|
+| `icon`            | `String`        |                 | Icon for navigation header. |
+| `label`           | `String`        |                 | Label text for navigation header. |
+| `onActive`        | `Function`      |                 | Callback function that is fired when the tab is activated. |
+| `onClick`         | `Function`      |                 | Callback function that is fired when the tab is clicked. |
+
+It is required to provide either a label or an icon (or both).
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the navigation tab element in case it's active.|
+| `disabled` | Added to the navigation tab element in case it's disabled.|
+| `hidden` | Added to the navigation tab element in case it's hidden.|
+| `label` | Added to the navigation tab element in case it's active.|
diff --git a/components/tabs/style.scss b/components/tabs/style.scss
deleted file mode 100644
index 8f3388d26..000000000
--- a/components/tabs/style.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.navigation {
-  display: flex;
-  flex-direction: row;
-  box-shadow: inset 0 -1px $tab-navigation-border-color;
-}
-
-.label {
-  padding: $tab-label-v-padding $tab-label-h-padding;
-  font-size: $tab-text-height;
-  font-weight: $font-weight-semi-bold;
-  line-height: 1;
-  color: $tab-text-inactive-color;
-  text-transform: uppercase;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: box-shadow, color;
-  &.active {
-    color: $tab-text-color;
-  }
-  &.disabled {
-    opacity: $tab-label-disabled-opacity;
-  }
-  &:not(.disabled) {
-    cursor: pointer;
-  }
-  &.hidden {
-    display: none;
-  }
-}
-
-.pointer {
-  position: absolute;
-  width: 0;
-  height: $tab-pointer-height;
-  margin-top: - $tab-pointer-height;
-  background-color: $tab-pointer-color;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: left, width;
-}
-
-.tab {
-  display: flex;
-  flex-direction: column;
-  padding: $tab-label-v-padding $tab-label-h-padding;
-  &:not(.active) {
-    display: none;
-  }
-  &.active {
-    display: block;
-  }
-}
diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
deleted file mode 100644
index bfc9e9fac..000000000
--- a/components/tabs/tab.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import style from './style';
-
-class Tab extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    hidden: React.PropTypes.bool,
-    label: React.PropTypes.string.isRequired,
-    onActive: React.PropTypes.func,
-    tabIndex: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    className: ''
-  };
-
-  componentDidMount () {
-    this.active(this.props.active);
-  }
-
-  componentWillReceiveProps (next_props) {
-    if (next_props.active) this.active(next_props.active);
-  }
-
-  render () {
-    let className = `${style.tab} ${this.props.className}`;
-    if (this.props.active) className += ` ${style.active}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.hidden) className += ` ${style.hidden}`;
-
-    return (
-      <section
-        data-react-toolbox='tab'
-        className={className}
-        tabIndex={this.props.tabIndex}
-      >
-        { this.props.children }
-      </section>
-    );
-  }
-
-  active (value) {
-    this.setState({active: value});
-    if (this.props.onActive && value) {
-      this.props.onActive(this);
-    }
-  }
-}
-
-export default Tab;
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
deleted file mode 100644
index 46d4d2d3a..000000000
--- a/components/tabs/tabs.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import style from './style';
-
-class Tabs extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    index: React.PropTypes.number.isRequired,
-    onChange: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    className: '',
-    index: 0
-  };
-
-  state = {
-    index: this.props.index,
-    pointer: {}
-  };
-
-  componentDidMount () {
-    setTimeout(() => {
-      this.setState({pointer: this._pointerPosition(this.state.index)});
-    }, 20);
-  }
-
-  componentWillReceiveProps (next_props) {
-    const index = next_props.index || this.state.index;
-    this.setState({
-      index,
-      pointer: this._pointerPosition(index)
-    });
-  }
-
-  _pointerPosition (index = 0) {
-    const startPoint = this.refs.tabs.getBoundingClientRect().left;
-    const label = this.refs.navigation.children[index].getBoundingClientRect();
-
-    return {
-      top: `${this.refs.navigation.getBoundingClientRect().height}px`,
-      left: `${label.left - startPoint}px`,
-      width: `${label.width}px`
-    };
-  }
-
-  handleClick = (index) => {
-    this.setState({
-      index,
-      pointer: this._pointerPosition(index)
-    });
-    if (this.props.onChange) this.props.onChange(this);
-  };
-
-  renderLabels (labels) {
-    return labels.map((props) => {
-      return <label {...props}>{ props.label }</label>;
-    });
-  }
-
-  render () {
-    const labels = [];
-
-    const tabs = this.props.children.map((tab, index) => {
-      const active = this.state.index === index;
-      let className = `${style.label} ${tab.props.className}`;
-
-      if (active) className += ` ${style.active}`;
-      if (tab.props.disabled) className += ` ${style.disabled}`;
-      if (tab.props.hidden) className += ` ${style.hidden}`;
-
-      labels.push({
-        className,
-        label: tab.props.label,
-        key: index,
-        onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
-      });
-
-      return React.cloneElement(tab, { active, key: index, tabIndex: index });
-    });
-
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='tabs' ref='tabs' className={className}>
-        <nav className={style.navigation} ref='navigation'>
-          { this.renderLabels(labels) }
-        </nav>
-        <span className={style.pointer} style={this.state.pointer} />
-        { tabs }
-      </div>
-    );
-  }
-
-  active (value) {
-    this.setState({active: value});
-    if (this.props.onActive && value) {
-      this.props.onActive(this);
-    }
-  }
-}
-
-export default Tabs;
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
new file mode 100644
index 000000000..e7400f15a
--- /dev/null
+++ b/components/tabs/theme.scss
@@ -0,0 +1,145 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.navigation {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow-x: hidden;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+}
+
+.navigationContainer {
+  display: flex;
+
+  .navigation {
+    flex: 1;
+  }
+}
+
+.arrow {
+  padding: 0 $tab-label-h-padding;
+  color: $tab-text-color;
+}
+
+.arrowContainer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+}
+
+.label {
+  padding: $tab-label-v-padding $tab-label-h-padding;
+  font-family: inherit;
+  font-size: $tab-text-height;
+  font-weight: $font-weight-semi-bold;
+  line-height: 1;
+  color: $tab-text-inactive-color;
+  text-align: center;
+  text-transform: uppercase;
+  background: none;
+  border: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: box-shadow, color;
+
+  &.active {
+    color: $tab-text-color;
+  }
+
+  &.disabled {
+    opacity: $tab-label-disabled-opacity;
+  }
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.withIcon {
+    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+  }
+
+  &.withText {
+    .icon {
+      margin-bottom: $tab-icon-margin-bottom;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  height: $tab-icon-height;
+  margin: 0 auto;
+  line-height: $tab-icon-height;
+}
+
+.pointer {
+  position: absolute;
+  width: 0;
+  height: $tab-pointer-height;
+  margin-top: - $tab-pointer-height;
+  background-color: $tab-pointer-color;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: left, width;
+
+  &.disableAnimation {
+    transition: none;
+  }
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  padding: $tab-label-v-padding $tab-label-h-padding;
+
+  &:not(.active) {
+    display: none;
+  }
+
+  &.active {
+    display: flex;
+  }
+}
+
+.fixed {
+  .label {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.inverse {
+  .navigation, .arrowContainer {
+    background-color: $tab-inverse-bar-color;
+  }
+
+  .label {
+    color: $tab-inverse-text-inactive-color;
+
+    &.active {
+      color: $tab-inverse-text-color;
+    }
+  }
+
+  .arrow {
+    color: $tab-inverse-text-color;
+  }
+
+  .pointer {
+    background-color: $tab-inverse-pointer-color;
+  }
+}
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
new file mode 100644
index 000000000..3ef97fbcc
--- /dev/null
+++ b/components/time_picker/Clock.js
@@ -0,0 +1,125 @@
+import React, { Component, PropTypes } from 'react';
+import CssTransitionGroup from 'react-addons-css-transition-group';
+import { ZoomIn, ZoomOut } from '../animations';
+import time from '../utils/time.js';
+import Hours from './ClockHours.js';
+import Minutes from './ClockMinutes.js';
+
+class Clock extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    display: PropTypes.oneOf(['hours', 'minutes']),
+    format: PropTypes.oneOf(['24hr', 'ampm']),
+    onChange: PropTypes.func,
+    onHandMoved: PropTypes.func,
+    theme: PropTypes.shape({
+      clock: PropTypes.string,
+      clockWrapper: PropTypes.string,
+      placeholder: PropTypes.string
+    }),
+    time: PropTypes.object
+  };
+
+  static defaultProps = {
+    className: '',
+    display: 'hours',
+    format: '24hr',
+    time: new Date()
+  };
+
+  state = {
+    center: {x: null, y: null},
+    radius: 0
+  };
+
+  componentDidMount () {
+    window.addEventListener('resize', this.handleCalculateShape);
+    setTimeout(() => {
+      this.handleCalculateShape();
+    });
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleCalculateShape);
+  }
+
+  handleHourChange = (hours) => {
+    if (this.props.time.getHours() !== hours) {
+      this.props.onChange(time.setHours(this.props.time, this.adaptHourToFormat(hours)));
+    }
+  };
+
+  handleMinuteChange = (minutes) => {
+    if (this.props.time.getMinutes() !== minutes) {
+      this.props.onChange(time.setMinutes(this.props.time, minutes));
+    }
+  };
+
+  handleCalculateShape = () => {
+    const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
+    this.setState({
+      center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
+      radius: width / 2
+    });
+  };
+
+  adaptHourToFormat (hour) {
+    if (this.props.format === 'ampm') {
+      if (time.getTimeMode(this.props.time) === 'pm') {
+        return hour < 12 ? hour + 12 : hour;
+      } else {
+        return hour === 12 ? 0 : hour;
+      }
+    } else {
+      return hour;
+    }
+  }
+
+  renderHours () {
+    return (
+      <Hours
+        center={this.state.center}
+        format={this.props.format}
+        onChange={this.handleHourChange}
+        radius={this.state.radius}
+        selected={this.props.time.getHours()}
+        spacing={this.state.radius * 0.18}
+        onHandMoved={this.props.onHandMoved}
+        theme={this.props.theme}
+      />
+    );
+  }
+
+  renderMinutes () {
+    return (
+      <Minutes
+        center={this.state.center}
+        onChange={this.handleMinuteChange}
+        radius={this.state.radius}
+        selected={this.props.time.getMinutes()}
+        spacing={this.state.radius * 0.18}
+        onHandMoved={this.props.onHandMoved}
+        theme={this.props.theme}
+      />
+    );
+  }
+
+  render () {
+    const { theme } = this.props;
+    const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
+    return (
+      <div data-react-toolbox='clock' className={theme.clock}>
+        <div ref='placeholder' className={theme.placeholder} style={{height: this.state.radius * 2}}>
+          <CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+            <div key={this.props.display} className={theme.clockWrapper} style={{height: this.state.radius * 2}}>
+              {this.props.display === 'hours' ? this.renderHours() : null}
+              {this.props.display === 'minutes' ? this.renderMinutes() : null}
+            </div>
+          </CssTransitionGroup>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Clock;
diff --git a/components/time_picker/ClockFace.js b/components/time_picker/ClockFace.js
new file mode 100644
index 000000000..7561b1e89
--- /dev/null
+++ b/components/time_picker/ClockFace.js
@@ -0,0 +1,69 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+
+class Face extends Component {
+  static propTypes = {
+    active: PropTypes.number,
+    numbers: PropTypes.array,
+    radius: PropTypes.number,
+    spacing: PropTypes.number,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      face: PropTypes.string,
+      number: PropTypes.string
+    }),
+    twoDigits: PropTypes.bool
+  };
+
+  static defaultProps = {
+    active: null,
+    numbers: [],
+    radius: 0,
+    twoDigits: false
+  };
+
+  numberStyle (rad, num) {
+    return {
+      position: 'absolute',
+      left: (rad + rad * Math.sin(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing),
+      top: (rad - rad * Math.cos(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing)
+    };
+  }
+
+  faceStyle () {
+    return {
+      height: this.props.radius * 2,
+      width: this.props.radius * 2
+    };
+  }
+
+  renderNumber = (number, idx) => {
+    const { active, radius, spacing, theme, twoDigits } = this.props;
+    return (
+      <span
+        className={classnames(theme.number, {[theme.active]: number === active})}
+        style={this.numberStyle(radius - spacing, idx + 1)}
+        key={number}
+      >
+        {twoDigits ? ('0' + number).slice(-2) : number}
+      </span>
+    );
+  }
+
+  render () {
+    const { numbers, onTouchStart, onMouseDown, theme } = this.props;
+    return (
+      <div
+        ref='root'
+        className={theme.face}
+        onTouchStart={onTouchStart}
+        onMouseDown={onMouseDown}
+        style={this.faceStyle()}
+      >
+        {numbers.map(this.renderNumber)}
+      </div>
+    );
+  }
+}
+
+export default Face;
diff --git a/components/time_picker/clock/hand.jsx b/components/time_picker/ClockHand.js
similarity index 55%
rename from components/time_picker/clock/hand.jsx
rename to components/time_picker/ClockHand.js
index 334d8a895..904c49685 100644
--- a/components/time_picker/clock/hand.jsx
+++ b/components/time_picker/ClockHand.js
@@ -1,13 +1,21 @@
-import React from 'react';
-import style from './style';
-import utils from '../../utils';
+import React, { Component, PropTypes } from 'react';
+import events from '../utils/events.js';
+import prefixer from '../utils/prefixer.js';
+import utils from '../utils/utils.js';
 
-class Hand extends React.Component {
+class Hand extends Component {
   static propTypes = {
-    className: React.PropTypes.string,
-    angle: React.PropTypes.number,
-    onMove: React.PropTypes.func,
-    onMoved: React.PropTypes.func
+    angle: PropTypes.number,
+    className: PropTypes.string,
+    length: PropTypes.number,
+    onMove: PropTypes.func,
+    onMoved: PropTypes.func,
+    origin: PropTypes.object,
+    step: PropTypes.number,
+    theme: PropTypes.shape({
+      hand: PropTypes.string,
+      knob: PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -22,7 +30,14 @@ class Hand extends React.Component {
   };
 
   componentDidMount () {
-    this.setState({knobWidth: this.refs.knob.offsetWidth});
+    setTimeout(() => {
+      this.setState({knobWidth: this.refs.knob.offsetWidth});
+    });
+  }
+
+  componentWillUnmount () {
+    events.removeEventsFromDocument(this.getMouseEventMap());
+    events.removeEventsFromDocument(this.getTouchEventMap());
   }
 
   getMouseEventMap () {
@@ -40,11 +55,11 @@ class Hand extends React.Component {
   }
 
   handleMouseMove = (event) => {
-    this.move(utils.events.getMousePosition(event));
+    this.move(events.getMousePosition(event));
   };
 
   handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
+    this.move(events.getTouchPosition(event));
   };
 
   handleMouseUp = () => {
@@ -56,14 +71,14 @@ class Hand extends React.Component {
   };
 
   mouseStart (event) {
-    utils.events.addEventsToDocument(this.getMouseEventMap());
-    this.move(utils.events.getMousePosition(event));
+    events.addEventsToDocument(this.getMouseEventMap());
+    this.move(events.getMousePosition(event));
   }
 
   touchStart (event) {
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    this.move(utils.events.getTouchPosition(event));
-    utils.events.pauseEvent(event);
+    events.addEventsToDocument(this.getTouchEventMap());
+    this.move(events.getTouchPosition(event));
+    events.pauseEvent(event);
   }
 
   getPositionRadius (position) {
@@ -80,9 +95,9 @@ class Hand extends React.Component {
     return utils.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
   }
 
-  end (events) {
+  end (evts) {
     if (this.props.onMoved) this.props.onMoved();
-    utils.events.removeEventsFromDocument(events);
+    events.removeEventsFromDocument(evts);
   }
 
   move (position) {
@@ -92,15 +107,16 @@ class Hand extends React.Component {
   }
 
   render () {
-    const className = `${style.hand} ${this.props.className}`;
-    const handStyle = utils.prefixer({
+    const { theme } = this.props;
+    const className = `${theme.hand} ${this.props.className}`;
+    const handStyle = prefixer({
       height: this.props.length - this.state.knobWidth / 2,
       transform: `rotate(${this.props.angle}deg)`
     });
 
     return (
       <div className={className} style={handStyle}>
-        <div ref='knob' className={style.knob}></div>
+        <div ref='knob' className={theme.knob}/>
       </div>
     );
   }
diff --git a/components/time_picker/clock/hours.jsx b/components/time_picker/ClockHours.js
similarity index 78%
rename from components/time_picker/clock/hours.jsx
rename to components/time_picker/ClockHours.js
index f380ba9fe..5e37cd2e3 100644
--- a/components/time_picker/clock/hours.jsx
+++ b/components/time_picker/ClockHours.js
@@ -1,19 +1,23 @@
-import React from 'react';
-import utils from '../../utils';
-import Face from './face';
-import Hand from './hand';
+import React, { Component, PropTypes } from 'react';
+import utils from '../utils/utils.js';
+import Hand from './ClockHand.js';
+import Face from './ClockFace.js';
 
 const outerNumbers = [0, ...utils.range(13, 24)];
 const innerNumbers = [12, ...utils.range(1, 12)];
 const innerSpacing = 1.7;
 const step = 360 / 12;
 
-class Hours extends React.Component {
+class Hours extends Component {
   static propTypes = {
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onChange: React.PropTypes.func,
-    onHandMoved: React.PropTypes.func,
-    selected: React.PropTypes.number
+    center: PropTypes.object,
+    format: PropTypes.oneOf(['24hr', 'ampm']),
+    onChange: PropTypes.func,
+    onHandMoved: PropTypes.func,
+    radius: PropTypes.number,
+    selected: PropTypes.number,
+    spacing: PropTypes.number,
+    theme: PropTypes.object
   };
 
   state = {
@@ -56,6 +60,7 @@ class Hours extends React.Component {
           numbers={innerNumbers}
           spacing={this.props.spacing}
           radius={innerRadius}
+          theme={this.props.theme}
           active={this.props.selected}
         />
       );
@@ -76,12 +81,14 @@ class Hours extends React.Component {
             radius={radius}
             twoDigits={is24hr}
             active={is24hr ? selected : (selected % 12 || 12)}
+            theme={this.props.theme}
           />
-          { this.renderInnerFace(radius - spacing * innerSpacing) }
+          {this.renderInnerFace(radius - spacing * innerSpacing)}
           <Hand ref='hand'
             angle={selected * step}
             length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
             onMove={this.handleHandMove}
+            theme={this.props.theme}
             onMoved={onHandMoved}
             origin={center}
             step={step}
diff --git a/components/time_picker/clock/minutes.jsx b/components/time_picker/ClockMinutes.js
similarity index 66%
rename from components/time_picker/clock/minutes.jsx
rename to components/time_picker/ClockMinutes.js
index 164091b65..0debec800 100644
--- a/components/time_picker/clock/minutes.jsx
+++ b/components/time_picker/ClockMinutes.js
@@ -1,16 +1,21 @@
-import React from 'react';
-import utils from '../../utils';
-import style from './style';
-import Face from './face';
-import Hand from './hand';
+import React, { Component, PropTypes } from 'react';
+import utils from '../utils/utils.js';
+import Hand from './ClockHand.js';
+import Face from './ClockFace.js';
 
 const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
 
-class Minutes extends React.Component {
+class Minutes extends Component {
   static propTypes = {
-    selected: React.PropTypes.number,
-    onChange: React.PropTypes.func
+    center: PropTypes.object,
+    onChange: PropTypes.func,
+    radius: PropTypes.number,
+    selected: PropTypes.number,
+    spacing: PropTypes.number,
+    theme: PropTypes.shape({
+      small: PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -39,15 +44,17 @@ class Minutes extends React.Component {
           numbers={minutes}
           spacing={this.props.spacing}
           radius={this.props.radius}
-          twoDigits={true}
           active={this.props.selected}
+          theme={this.props.theme}
+          twoDigits
         />
         <Hand ref='hand'
-          className={minutes.indexOf(this.props.selected) === -1 ? style.small : ''}
+          className={minutes.indexOf(this.props.selected) === -1 ? this.props.theme.small : ''}
           angle={this.props.selected * step}
           length={this.props.radius - this.props.spacing}
           onMove={this.handleHandMove}
           origin={this.props.center}
+          theme={this.props.theme}
           step={step}
         />
       </div>
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
new file mode 100644
index 000000000..ebceb501e
--- /dev/null
+++ b/components/time_picker/TimePicker.js
@@ -0,0 +1,136 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { TIME_PICKER } from '../identifiers.js';
+import events from '../utils/events.js';
+import time from '../utils/time.js';
+import InjectDialog from '../dialog/Dialog.js';
+import InjectInput from '../input/Input.js';
+import timePickerDialogFactory from './TimePickerDialog.js';
+
+const factory = (TimePickerDialog, Input) => {
+  class TimePicker extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
+      className: PropTypes.string,
+      error: PropTypes.string,
+      format: PropTypes.oneOf(['24hr', 'ampm']),
+      inputClassName: PropTypes.string,
+      label: PropTypes.string,
+      name: PropTypes.string,
+      okLabel: PropTypes.string,
+      onChange: PropTypes.func,
+      onClick: PropTypes.func,
+      onDismiss: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
+      onKeyPress: PropTypes.func,
+      onOverlayClick: PropTypes.func,
+      readonly: PropTypes.bool,
+      theme: PropTypes.shape({
+        input: PropTypes.string
+      }),
+      value: PropTypes.object
+    };
+
+    static defaultProps = {
+      active: false,
+      className: '',
+      format: '24hr'
+    };
+
+    state = {
+      active: this.props.active
+    };
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
+    }
+
+    handleDismiss = () => {
+      this.setState({active: false});
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
+    };
+
+    handleInputFocus = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+    };
+
+    handleInputBlur = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: false});
+    };
+
+    handleInputClick = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+      if (this.props.onClick) this.props.onClick(event);
+    };
+
+    handleInputKeyPress = (event) => {
+      if (event.charCode === 13) {
+        events.pauseEvent(event);
+        this.setState({active: true});
+      }
+      if (this.props.onKeyPress) this.props.onKeyPress(event);
+    };
+
+    handleSelect = (value, event) => {
+      if (this.props.onChange) this.props.onChange(value, event);
+      this.setState({active: false});
+    };
+
+    render () {
+      const {
+        active, onDismiss, // eslint-disable-line
+        cancelLabel, format, inputClassName, okLabel, onEscKeyDown, onOverlayClick,
+        readonly, value, ...others
+      } = this.props;
+      const formattedTime = value ? time.formatTime(value, format) : '';
+      return (
+        <div data-react-toolbox='time-picker'>
+          <Input
+            {...others}
+            className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
+            disabled={readonly}
+            error={this.props.error}
+            label={this.props.label}
+            name={this.props.name}
+            onKeyPress={this.handleInputKeyPress}
+            onClick={this.handleInputClick}
+            readOnly
+            type='text'
+            value={formattedTime}
+          />
+          <TimePickerDialog
+            active={this.state.active}
+            cancelLabel={cancelLabel}
+            className={this.props.className}
+            format={format}
+            name={this.props.name}
+            okLabel={okLabel}
+            onDismiss={this.handleDismiss}
+            onEscKeyDown={onEscKeyDown}
+            onOverlayClick={onOverlayClick}
+            onSelect={this.handleSelect}
+            theme={this.props.theme}
+            value={this.props.value}
+          />
+        </div>
+      );
+    }
+  }
+
+  return TimePicker;
+};
+
+const TimePickerDialog = timePickerDialogFactory(InjectDialog);
+const TimePicker = factory(TimePickerDialog, InjectInput);
+export default themr(TIME_PICKER)(TimePicker);
+export { factory as timePickerFactory };
+export { TimePicker };
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
new file mode 100644
index 000000000..8ba81e282
--- /dev/null
+++ b/components/time_picker/TimePickerDialog.js
@@ -0,0 +1,147 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import time from '../utils/time.js';
+import Clock from './Clock.js';
+
+const factory = (Dialog) => {
+  class TimePickerDialog extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
+      className: PropTypes.string,
+      format: PropTypes.oneOf(['24hr', 'ampm']),
+      name: PropTypes.string,
+      okLabel: PropTypes.string,
+      onDismiss: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
+      onOverlayClick: PropTypes.func,
+      onSelect: PropTypes.func,
+      theme: PropTypes.shape({
+        am: PropTypes.string,
+        amFormat: PropTypes.string,
+        ampm: PropTypes.string,
+        button: PropTypes.string,
+        dialog: PropTypes.string,
+        header: PropTypes.string,
+        hours: PropTypes.string,
+        hoursDisplay: PropTypes.string,
+        minutes: PropTypes.string,
+        minutesDisplay: PropTypes.string,
+        pm: PropTypes.string,
+        pmFormat: PropTypes.string,
+        separator: PropTypes.string
+      }),
+      value: PropTypes.object
+    };
+
+    static defaultProps = {
+      active: false,
+      cancelLabel: 'Cancel',
+      format: '24hr',
+      okLabel: 'Ok',
+      value: new Date()
+    };
+
+    state = {
+      display: 'hours',
+      displayTime: new Date(this.props.value.getTime())
+    };
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
+        this.setState({ displayTime: new Date(nextProps.value.getTime()) });
+      }
+    }
+
+    componentDidUpdate (prevProps) {
+      if (!prevProps.active && this.props.active) {
+        setTimeout(this.refs.clock.handleCalculateShape, 1000);
+      }
+    }
+
+    handleClockChange = (value) => {
+      this.setState({displayTime: value});
+    };
+
+    handleSelect = (event) => {
+      this.props.onSelect(this.state.displayTime, event);
+    };
+
+    toggleTimeMode = () => {
+      this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
+    };
+
+    handleHandMoved = () => {
+      if (this.state.display === 'hours') this.setState({display: 'minutes'});
+    };
+
+    switchDisplay = (event) => {
+      this.setState({display: event.target.id});
+    };
+
+    actions = [
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+    ];
+
+    formatHours () {
+      if (this.props.format === 'ampm') {
+        return this.state.displayTime.getHours() % 12 || 12;
+      } else {
+        return this.state.displayTime.getHours();
+      }
+    }
+
+    renderAMPMLabels () {
+      const { theme } = this.props;
+      if (this.props.format === 'ampm') {
+        return (
+          <div className={theme.ampm}>
+            <span className={theme.am} onClick={this.toggleTimeMode}>AM</span>
+            <span className={theme.pm} onClick={this.toggleTimeMode}>PM</span>
+          </div>
+        );
+      }
+    }
+
+    render () {
+      const { theme } = this.props;
+      const display = `${this.state.display}Display`;
+      const format = `${time.getTimeMode(this.state.displayTime)}Format`;
+      const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
+      return (
+        <Dialog
+          actions={this.actions}
+          active={this.props.active}
+          className={className}
+          onEscKeyDown={this.props.onEscKeyDown}
+          onOverlayClick={this.props.onOverlayClick}
+        >
+          <header className={theme.header}>
+            <span id='hours' className={theme.hours} onClick={this.switchDisplay}>
+              {('0' + this.formatHours()).slice(-2)}
+            </span>
+            <span className={theme.separator}>:</span>
+            <span id='minutes' className={theme.minutes} onClick={this.switchDisplay}>
+              {('0' + this.state.displayTime.getMinutes()).slice(-2)}
+            </span>
+            {this.renderAMPMLabels()}
+          </header>
+          <Clock
+            ref='clock'
+            display={this.state.display}
+            format={this.props.format}
+            onChange={this.handleClockChange}
+            onHandMoved={this.handleHandMoved}
+            theme={this.props.theme}
+            time={this.state.displayTime}
+          />
+        </Dialog>
+      );
+    }
+  }
+
+  return TimePickerDialog;
+};
+
+export default factory;
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index 486d7777c..51fbd509b 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -1,13 +1,27 @@
-$timepicker-header-font-size: 5.2 * $unit;
-$timepicker-header-padding: $unit;
-$timepicker-ampm-font-size: 1.6 * $unit;
-$timepicker-primary: $color-primary;
-$timepicker-primary-contrast: $color-primary-contrast;
-$timepicker-primary-dark: $color-primary-dark;
-$timepicker-primary-color: unquote("rgb(#{$timepicker-primary})") !default;
-$timepicker-primary-hover-color: unquote("rgba(#{$timepicker-primary}, 0.20)") !default;
-$timepicker-primary-contrast-color: unquote("rgb(#{$timepicker-primary-contrast})") !default;
-$timepicker-primary-dark-color: unquote("rgb(#{$timepicker-primary-dark})") !default;
-$timepicker-ampm-height: 2.2 * $unit;
-$timepicker-ampm-width: 4 * $unit;
-$timepicker-dialog-width: 30 * $unit;
+$timepicker-header-font-size: 5.2 * $unit !default;
+$timepicker-header-padding: $unit !default;
+$timepicker-ampm-font-size: 1.6 * $unit !default;
+$timepicker-primary: $color-primary !default;
+$timepicker-primary-contrast: $color-primary-contrast !default;
+$timepicker-primary-dark: $color-primary-dark !default;
+$timepicker-primary-color: $timepicker-primary !default;
+$timepicker-primary-hover-color: rgba($timepicker-primary, .2) !default;
+$timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
+$timepicker-primary-dark-color: $timepicker-primary-dark !default;
+$timepicker-ampm-height: 2.2 * $unit !default;
+$timepicker-ampm-width: 4 * $unit !default;
+$timepicker-dialog-width: 30 * $unit !default;
+
+$clock-padding: 1.5 * $unit 2 * $unit !default;
+$clock-primary: $color-primary !default;
+$clock-primary-contrast: $color-primary-contrast !default;
+$clock-primary-dark: $color-primary-dark !default;
+$clock-primary-color: $clock-primary !default;
+$clock-primary-hover-color: rgba($clock-primary, .2) !default;
+$clock-primary-contrast-color: $clock-primary-contrast !default;
+$clock-primary-dark-color: $clock-primary-dark !default;
+$clock-number-size: 2 * $unit !default;
+$clock-hand-width: .4 * $unit !default;
+$clock-hand-dot-size: 1 * $unit !default;
+$clock-knob-size: 3.4 * $unit !default;
+$clock-knob-small-size: 1.2 * $unit !default;
diff --git a/components/time_picker/clock/_config.scss b/components/time_picker/clock/_config.scss
deleted file mode 100644
index 1b1ad40db..000000000
--- a/components/time_picker/clock/_config.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$clock-padding: 1.5 * $unit 2 * $unit;
-$clock-primary: $color-primary;
-$clock-primary-contrast: $color-primary-contrast;
-$clock-primary-dark: $color-primary-dark;
-$clock-primary-color: unquote("rgb(#{$clock-primary})") !default;
-$clock-primary-hover-color: unquote("rgba(#{$clock-primary}, 0.20)") !default;
-$clock-primary-contrast-color: unquote("rgb(#{$clock-primary-contrast})") !default;
-$clock-primary-dark-color: unquote("rgb(#{$clock-primary-dark})") !default;
-$clock-number-size: 2 * $unit;
-$clock-hand-width: .4 * $unit;
-$clock-hand-dot-size: 1 * $unit;
-$clock-knob-size: 3.4 * $unit;
-$clock-knob-small-size: 1.2 * $unit;
diff --git a/components/time_picker/clock/face.jsx b/components/time_picker/clock/face.jsx
deleted file mode 100644
index 345112876..000000000
--- a/components/time_picker/clock/face.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import style from './style';
-
-class Face extends React.Component {
-  static defaultProps = {
-    active: null,
-    numbers: [],
-    radius: 0,
-    twoDigits: false
-  };
-
-  numberStyle (rad, num) {
-    return {
-      position: 'absolute',
-      left: (rad + rad * Math.sin(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing),
-      top: (rad - rad * Math.cos(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing)
-    };
-  }
-
-  faceStyle () {
-    return {
-      height: this.props.radius * 2,
-      width: this.props.radius * 2
-    };
-  }
-
-  renderNumber (number, idx) {
-    let className = style.number;
-    if (number === this.props.active) className += ` ${style.active}`;
-    return (
-      <span
-        className={className}
-        style={this.numberStyle(this.props.radius - this.props.spacing, idx + 1)}
-        key={number}
-      >
-        { this.props.twoDigits ? ('0' + number).slice(-2) : number }
-      </span>
-    );
-  }
-
-  render () {
-    return (
-      <div
-        ref='root'
-        className={style.face}
-        onTouchStart={this.props.onTouchStart}
-        onMouseDown={this.props.onMouseDown}
-        style={this.faceStyle()}
-      >
-        { this.props.numbers.map(this.renderNumber.bind(this))}
-      </div>
-    );
-  }
-}
-
-export default Face;
diff --git a/components/time_picker/clock/index.jsx b/components/time_picker/clock/index.jsx
deleted file mode 100644
index 388579781..000000000
--- a/components/time_picker/clock/index.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import style from './style';
-import time from '../../utils/time';
-import Hours from './hours';
-import Minutes from './minutes';
-
-class Clock extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    display: React.PropTypes.oneOf(['hours', 'minutes']),
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    initialTime: React.PropTypes.object,
-    onChange: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    className: '',
-    display: 'hours',
-    format: '24hr',
-    initialTime: new Date()
-  };
-
-  state = {
-    center: {x: null, y: null},
-    radius: 0,
-    time: this.props.initialTime
-  };
-
-  componentDidMount () {
-    window.addEventListener('resize', this.handleCalculateShape);
-    this.handleCalculateShape();
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleCalculateShape);
-  }
-
-  handleHourChange = (hours) => {
-    if (this.state.time.getHours() !== hours) {
-      const newTime = time.setHours(this.state.time, this.adaptHourToFormat(hours));
-      this.setState({time: newTime});
-      if (this.props.onChange) this.props.onChange(newTime);
-    }
-  };
-
-  handleMinuteChange = (minutes) => {
-    if (this.state.time.getMinutes() !== minutes) {
-      const newTime = time.setMinutes(this.state.time, minutes);
-      this.setState({time: newTime});
-      if (this.props.onChange) this.props.onChange(newTime);
-    }
-  };
-
-  handleCalculateShape = () => {
-    const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
-    this.setState({
-      center: { x: left + width / 2, y: top + width / 2 },
-      radius: width / 2
-    });
-  };
-
-  toggleTimeMode () {
-    const newTime = time.toggleTimeMode(this.state.time);
-    this.setState({time: newTime});
-    if (this.props.onChange) this.props.onChange(newTime);
-  }
-
-  adaptHourToFormat (hour) {
-    if (this.props.format === 'ampm') {
-      if (time.getTimeMode(this.state.time) === 'pm') {
-        return hour < 12 ? hour + 12 : hour;
-      } else {
-        return hour === 12 ? 0 : hour;
-      }
-    } else {
-      return hour;
-    }
-  }
-
-  renderHours () {
-    return (
-      <Hours
-        center={this.state.center}
-        format={this.props.format}
-        onChange={this.handleHourChange}
-        radius={this.state.radius}
-        selected={this.state.time.getHours()}
-        spacing={this.state.radius * 0.18}
-      />
-    );
-  }
-
-  renderMinutes () {
-    return (
-      <Minutes
-        center={this.state.center}
-        onChange={this.handleMinuteChange}
-        radius={this.state.radius}
-        selected={this.state.time.getMinutes()}
-        spacing={this.state.radius * 0.18}
-      />
-    );
-  }
-
-  render () {
-    return (
-      <div data-react-toolbox='clock' className={style.root}>
-        <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
-          { this.props.display === 'hours' ? this.renderHours() : '' }
-          { this.props.display === 'minutes' ? this.renderMinutes() : '' }
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Clock;
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
deleted file mode 100644
index 2522bda08..000000000
--- a/components/time_picker/dialog.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import style from './style';
-import time from '../utils/time';
-import Clock from './clock';
-import Dialog from '../dialog';
-
-class TimePickerDialog extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    initialTime: React.PropTypes.object,
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onTimeSelected: React.PropTypes.func
-  };
-
-  static defaultProps = {
-      className: '',
-      initialTime: new Date(),
-      format: '24hr'
-  };
-
-  state = {
-    display: 'hours',
-    time: this.props.initialTime,
-    actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onTimeCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.onTimeSelected.bind(this) }
-    ]
-  };
-
-  handleClockChange = (newTime) => {
-    this.setState({time: newTime});
-  };
-
-  displayMinutes = () => {
-    this.setState({display: 'minutes'});
-  };
-
-  displayHours = () => {
-    this.setState({display: 'hours'});
-  };
-
-  toggleTimeMode = () => {
-    this.refs.clock.toggleTimeMode();
-  };
-
-  onTimeCancel () {
-    this.refs.dialog.hide();
-  }
-
-  onTimeSelected () {
-    if (this.props.onTimeSelected) this.props.onTimeSelected(this.state.time);
-    this.refs.dialog.hide();
-  }
-
-  show () {
-    this.refs.dialog.show();
-    setTimeout(this.refs.clock.handleCalculateShape, 1000);
-  }
-
-  formatHours () {
-    if (this.props.format === 'ampm') {
-      return this.state.time.getHours() % 12 || 12;
-    } else {
-      return this.state.time.getHours();
-    }
-  }
-
-  renderAMPMLabels () {
-    if (this.props.format === 'ampm') {
-      return (
-        <div className={style.ampm}>
-          <span className={style.am} onClick={this.toggleTimeMode}>AM</span>
-          <span className={style.pm} onClick={this.toggleTimeMode}>PM</span>
-        </div>
-      );
-    }
-  }
-
-  render () {
-    const display = `display-${this.state.display}`;
-    const format = `format-${time.getTimeMode(this.state.time)}`;
-    const className = `${style.dialog} ${style[display]} ${style[format]}`;
-
-    return (
-      <Dialog ref='dialog' className={className} type='custom' actions={this.state.actions}>
-        <header className={style.header}>
-          <span className={style.hours} onClick={this.displayHours}>
-            { ('0' + this.formatHours()).slice(-2) }
-          </span>
-          <span className={style.separator}>:</span>
-          <span className={style.minutes} onClick={this.displayMinutes}>
-            { ('0' + this.state.time.getMinutes()).slice(-2) }
-          </span>
-          { this.renderAMPMLabels() }
-        </header>
-        <Clock
-          ref='clock'
-          display={this.state.display}
-          format={this.props.format}
-          initialTime={this.props.initialTime}
-          onChange={this.handleClockChange}
-        />
-      </Dialog>
-    );
-  }
-}
-
-export default TimePickerDialog;
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
new file mode 100644
index 000000000..5180e1219
--- /dev/null
+++ b/components/time_picker/index.d.ts
@@ -0,0 +1,180 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface TimePickerTheme {
+  /**
+   * Added to the number which is active in clock face.
+   */
+  active?: string;
+  /**
+   * AM label in dialog header when mode is AM/PM.
+   */
+  am?: string;
+  /**
+   * Added to the dialog when the selected format is AM.
+   */
+  amFormat?: string;
+  /**
+   * Wrapper for AM and PM labels in header when mode is AM/PM.
+   */
+  ampm?: string;
+  /**
+   * Used for buttons inside the dialog of the picker.
+   */
+  button?: string;
+  /**
+   * Clock root class element.
+   */
+  clock?: string;
+  /**
+   * Wrapper for the proper positioning of the clock.
+   */
+  clockWrapper?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Used to style the clock face.
+   */
+  face?: string;
+  /**
+   * Used for the clock's hand.
+   */
+  hand?: string;
+  /**
+   * Dialog header wrapper class.
+   */
+  header?: string;
+  /**
+   * Used for hours in dialog header.
+   */
+  hours?: string;
+  /**
+   * Added to the dialog hours are displayed.
+   */
+  hoursDisplay?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the knob of the hand.
+   */
+  knob?: string;
+  /**
+   * Used for minutes in dialog header.
+   */
+  minutes?: string;
+  /**
+   * Added to the dialog minutes are displayed.
+   */
+  minutesDisplay?: string;
+  /**
+   * Each of the numbers in the clock's face.
+   */
+  number?: string;
+  /**
+   * Placeholder for the clock inside the dialog (inner wrapper).
+   */
+  placeholder?: string;
+  /**
+   * PM label in dialog header when mode is AM/PM.
+   */
+  pm?: string;
+  /**
+   * Added to the dialog when the selected format is PM.
+   */
+  pmFormat?: string;
+  /**
+   * Is the : separator between hours and minutes in dialog header.
+   */
+  separator?: string;
+  /**
+   * Added to the knob when no round number is selected.
+   */
+  small?: string;
+}
+
+export interface TimePickerProps {
+  /**
+   * Whether time picker is active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Label used for cancel button.
+   * @default "Cancel"
+   */
+  cancelLabel?: string;
+  /**
+   * Provide error text which will be displayed under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of TimePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Format to display the clock. It can be 24hr or ampm.
+   * @default "24hr"
+   */
+  format?: "24hr" | "ampm";
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Label used for 'OK' button on Dialog.
+   * @default "Ok"
+   */
+  okLabel?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Callback fired on Input click.
+   */
+  onClick?: Function;
+  /**
+   * Callback fired after dismissing the Dialog.
+   */
+  onDismiss?: Function;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Callback invoked on Input key press.
+   */
+  onKeyPress?: Function;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TimePickerTheme;
+  /**
+   * Datetime object with currrently selected time.
+   */
+  value?: Date;
+  /**
+   * Additional attributes passed to inner Input component.
+   */
+  [key: string]: any;
+}
+
+export class TimePicker extends React.Component<TimePickerProps, {}> { }
+
+export default TimePicker;
diff --git a/components/time_picker/index.js b/components/time_picker/index.js
new file mode 100644
index 000000000..c9ec8b8f7
--- /dev/null
+++ b/components/time_picker/index.js
@@ -0,0 +1,12 @@
+import { themr } from 'react-css-themr';
+import { TIME_PICKER } from '../identifiers.js';
+import { timePickerFactory } from './TimePicker.js';
+import timePickerDialogFactory from './TimePickerDialog.js';
+import Dialog from '../dialog';
+import Input from '../input';
+import theme from './theme.scss';
+
+const TimePickerDialog = timePickerDialogFactory(Dialog);
+const ThemedTimePicker = themr(TIME_PICKER, theme)(timePickerFactory(TimePickerDialog, Input));
+export default ThemedTimePicker;
+export { ThemedTimePicker as TimePicker };
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
deleted file mode 100644
index f0417aed0..000000000
--- a/components/time_picker/index.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import time from '../utils/time';
-import style from './style';
-import events from '../utils/events';
-import Input from '../input';
-import TimeDialog from './dialog';
-
-class TimePicker extends React.Component {
-  static propTypes = {
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    value: React.PropTypes.object
-  };
-
-  static defaultProps = {
-    format: '24hr'
-  };
-
-  state = {
-    value: this.props.value
-  };
-
-  onTimeSelected = (newTime) => {
-    this.refs.input.setValue(time.formatTime(newTime, this.props.format));
-    this.setState({value: newTime});
-  };
-
-  openTimeDialog = (event) => {
-    events.pauseEvent(event);
-    this.refs.dialog.show();
-  };
-
-  formatTime () {
-    if (this.state.value) {
-      return time.formatTime(this.state.value, this.props.format);
-    }
-  }
-
-  render () {
-    return (
-      <div data-react-toolbox='time-picker'>
-        <Input
-          ref='input'
-          className={style.input}
-          onMouseDown={this.openTimeDialog}
-          placeholder='Pick up time'
-          readOnly={true}
-          type='text'
-          value={this.formatTime()}
-        />
-        <TimeDialog
-          ref='dialog'
-          format={this.props.format}
-          initialTime={this.state.value}
-          onTimeSelected={this.onTimeSelected}
-        />
-      </div>
-    );
-  }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
-}
-
-export default TimePicker;
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 30293ed6f..c0184d574 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -1,31 +1,74 @@
 # Time Picker
 
-A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
+A [dialog picker](https://material.google.com/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
 
 <!-- example -->
 ```jsx
 import TimePicker from 'react-toolbox/lib/time_picker';
 
-let selectedTime = new Date();
-selectedTime.setHours(17);
-selectedTime.setMinutes(28);
+let time = new Date();
+time.setHours(17);
+time.setMinutes(28);
 
-const TimePickerTest = () => (
-  <TimePicker value={selectedTime} />
-);
+class TimePickerTest extends React.Component {
+  state = {time};
+
+  handleChange = (time) => {
+    this.setState({time});
+  };
+
+  render () {
+    return (
+      <TimePicker
+        label='Finishing time'
+        onChange={this.handleChange}
+        value={this.state.time}
+      />
+    );
+  }
+}
 ```
 
+If you want to provide a theme via context, the component key is `RTTimePicker`.
+
 ## Properties
 
-| Name          | Type    | Default         | Description|
+| Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `className`  | `String`    |     `''`            | Sets a class to give customized styles.|
-| `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
-| `value`     | `Date`    |   | Datetime object with currrently selected time |
-
-## Methods
+| `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
+| `className`     | `String`    |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
+| `error`         | `String`    |             | Provide error text which will be displayed under the field.|
+| `inputClassName`| `String`        |         | This class will be applied to `Input` component of `TimePicker`. |
+| `format`        | `String`    | `24hr`      | Format to display the clock. It can be `24hr` or `ampm`.|
+| `label`         | `String`    |             | The text string to use for the floating label element in the input component.|
+| `onChange`      | `Function`  |             | Called with (value, event) when the picker value changes.|
+| `readonly`      | `Boolean`   |             | The input element will be readonly and look like disabled.|
+| `value`         | `Date`      |             | Datetime object with currrently selected time. |
 
-The TimePicker is a very easy component from the top level API but quite complex inside. It has state to keep the the currently selected value.
+## Theme
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the number which is active in clock face.|
+| `am` | AM label in dialog header when mode is AM/PM.|
+| `amFormat` | Added to the dialog when the selected format is AM.|
+| `ampm` | Wrapper for AM and PM labels in header when mode is AM/PM.|
+| `button` | Used for buttons inside the dialog of the picker.|
+| `clock` | Clock root class element.|
+| `clockWrapper` | Wrapper for the proper positioning of the clock.|
+| `dialog` | Used for the dialog component.|
+| `face` | Used to style the clock face.|
+| `hand` | Used for the clock's hand.|
+| `header` | Dialog header wrapper class.|
+| `hours` | Used for hours in dialog header.|
+| `hoursDisplay` | Added to the dialog hours are displayed.|
+| `input` | Used for Input element that opens the picker.|
+| `knob` | Used for the knob of the hand.|
+| `minutes` | Used for minutes in dialog header.|
+| `minutesDisplay` | Added to the dialog minutes are displayed.|
+| `number` | Each of the numbers in the clock's face.|
+| `placeholder` | Placeholder for the clock inside the dialog (inner wrapper).|
+| `pm` | PM label in dialog header when mode is AM/PM.|
+| `pmFormat` | Added to the dialog when the selected format is PM.|
+| `separator` | Is the `:` separator between hours and minutes in dialog header.|
+| `small` | Added to the knob when no round number is selected.|
diff --git a/components/time_picker/style.scss b/components/time_picker/style.scss
deleted file mode 100644
index f5e77637d..000000000
--- a/components/time_picker/style.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.input > [role="input"] {
-  cursor: pointer;
-}
-
-.header {
-  position: relative;
-  width: 100%;
-  padding: $timepicker-header-padding;
-  font-size: $timepicker-header-font-size;
-  color: $timepicker-primary-contrast-color;
-  text-align: center;
-  background: $timepicker-primary-color;
-}
-
-.hours, .minutes {
-  display: inline-block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.separator {
-  margin: 0 $timepicker-header-padding / 2;
-  opacity: .6;
-}
-
-.ampm {
-  position: absolute;
-  top: 50%;
-  right: 2 * $unit;
-  width: $timepicker-ampm-width;
-  height: $timepicker-ampm-height * 2;
-  margin-top: - $timepicker-ampm-height;
-  font-size: $timepicker-ampm-font-size;
-  line-height: $timepicker-ampm-height;
-  text-align: center;
-}
-
-.am, .pm {
-  display: block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.dialog {
-  > [role="content"] {
-    width: $timepicker-dialog-width;
-    > [role="body"] {
-      padding: 0;
-    }
-    > [role="navigation"] > .button {
-      color: $timepicker-primary-color;
-      &:hover {
-        background: $timepicker-primary-hover-color;
-      }
-      &:focus:not(:active) {
-        background: $timepicker-primary-hover-color;
-      }
-    }
-  }
-  &.display-hours .hours, &.display-minutes .minutes, &.format-am .am,
-  &.format-pm .pm {
-    opacity: 1;
-  }
-}
diff --git a/components/time_picker/clock/style.scss b/components/time_picker/theme.scss
similarity index 59%
rename from components/time_picker/clock/style.scss
rename to components/time_picker/theme.scss
index 9feac7738..328cdc43e 100644
--- a/components/time_picker/clock/style.scss
+++ b/components/time_picker/theme.scss
@@ -1,12 +1,84 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.root {
+.input:not(.disabled) > .inputElement {
+  cursor: pointer;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  padding: $timepicker-header-padding;
+  font-size: $timepicker-header-font-size;
+  color: $timepicker-primary-contrast-color;
+  text-align: center;
+  background: $timepicker-primary-color;
+}
+
+.hours, .minutes {
+  display: inline-block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.separator {
+  margin: 0 $timepicker-header-padding / 2;
+  opacity: .6;
+}
+
+.ampm {
+  position: absolute;
+  top: 50%;
+  right: 2 * $unit;
+  width: $timepicker-ampm-width;
+  height: $timepicker-ampm-height * 2;
+  margin-top: - $timepicker-ampm-height;
+  font-size: $timepicker-ampm-font-size;
+  line-height: $timepicker-ampm-height;
+  text-align: center;
+}
+
+.am, .pm {
+  display: block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.dialog {
+  width: $timepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+    overflow-y: visible;
+  }
+  > [role="navigation"] > .button {
+    color: $timepicker-primary-color;
+    &:hover {
+      background: $timepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $timepicker-primary-hover-color;
+    }
+  }
+  &.hoursDisplay .hours, &.minutesDisplay .minutes, &.amFormat .am,
+  &.pmFormat .pm {
+    opacity: 1;
+  }
+}
+
+.clock {
   padding: $clock-padding;
 }
 
-.wrapper {
+.placeholder {
   position: relative;
+  z-index: $z-index-high;
+}
+
+.clockWrapper {
+  position: absolute;
+  width: 100%;
   background-color: $color-divider;
   border-radius: 50%;
 }
diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
new file mode 100644
index 000000000..34ee54194
--- /dev/null
+++ b/components/tooltip/Tooltip.js
@@ -0,0 +1,224 @@
+import React, { Component, PropTypes } from 'react';
+import Portal from '../hoc/Portal';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { TOOLTIP } from '../identifiers.js';
+import events from '../utils/events';
+import utils from '../utils/utils';
+
+const POSITION = {
+  BOTTOM: 'bottom',
+  HORIZONTAL: 'horizontal',
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  VERTICAL: 'vertical'
+};
+
+const defaults = {
+  className: '',
+  delay: 0,
+  hideOnClick: true,
+  showOnClick: false,
+  position: POSITION.VERTICAL,
+  theme: {}
+};
+
+const tooltipFactory = (options = {}) => {
+  const {
+    className: defaultClassName,
+    delay: defaultDelay,
+    hideOnClick: defaultHideOnClick,
+    showOnClick: defaultShowOnClick,
+    position: defaultPosition,
+    theme: defaultTheme
+  } = {...defaults, ...options};
+
+  return ComposedComponent => {
+    class TooltippedComponent extends Component {
+      static propTypes = {
+        children: PropTypes.any,
+        className: PropTypes.string,
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        theme: PropTypes.shape({
+          tooltip: PropTypes.string,
+          tooltipActive: PropTypes.string,
+          tooltipWrapper: PropTypes.string
+        }),
+        tooltip: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.node
+        ]),
+        tooltipDelay: PropTypes.number,
+        tooltipHideOnClick: PropTypes.bool,
+        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
+        tooltipShowOnClick: PropTypes.bool
+      };
+
+      static defaultProps = {
+        className: defaultClassName,
+        tooltipDelay: defaultDelay,
+        tooltipHideOnClick: defaultHideOnClick,
+        tooltipPosition: defaultPosition,
+        tooltipShowOnClick: defaultShowOnClick
+      };
+
+      state = {
+        active: false,
+        position: this.props.tooltipPosition,
+        visible: false
+      };
+
+      componentWillUnmount () {
+        if (this.refs.tooltip) {
+          events.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+        }
+      }
+
+      activate ({ top, left, position }) {
+        if (this.timeout) clearTimeout(this.timeout);
+        this.setState({ visible: true, position });
+        this.timeout = setTimeout(() => {
+          this.setState({ active: true, top, left });
+        }, this.props.tooltipDelay);
+      }
+
+      deactivate () {
+        if (this.timeout) clearTimeout(this.timeout);
+        if (this.state.active) {
+          events.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+          this.setState({ active: false });
+        } else if (this.state.visible) {
+          this.setState({ visible: false });
+        }
+      }
+
+      getPosition (element) {
+        const { tooltipPosition } = this.props;
+        if (tooltipPosition === POSITION.HORIZONTAL) {
+          const origin = element.getBoundingClientRect();
+          const { width: ww } = utils.getViewport();
+          const toRight = origin.left < ((ww / 2) - origin.width / 2);
+          return toRight ? POSITION.RIGHT : POSITION.LEFT;
+        } else if (tooltipPosition === POSITION.VERTICAL) {
+          const origin = element.getBoundingClientRect();
+          const { height: wh } = utils.getViewport();
+          const toBottom = origin.top < ((wh / 2) - origin.height / 2);
+          return toBottom ? POSITION.BOTTOM : POSITION.TOP;
+        } else {
+          return tooltipPosition;
+        }
+      }
+
+      calculatePosition (element) {
+        const position = this.getPosition(element);
+        const { top, left, height, width } = element.getBoundingClientRect();
+        const xOffset = window.scrollX || window.pageXOffset;
+        const yOffset = window.scrollY || window.pageYOffset;
+        if (position === POSITION.BOTTOM) {
+          return {
+            top: top + height + yOffset,
+            left: left + (width / 2) + xOffset,
+            position
+          };
+        } else if (position === POSITION.TOP) {
+          return {
+            top: top + yOffset,
+            left: left + (width / 2) + xOffset,
+            position
+          };
+        } else if (position === POSITION.LEFT) {
+          return {
+            top: top + (height / 2) + yOffset,
+            left: left + xOffset,
+            position
+          };
+        } else if (position === POSITION.RIGHT) {
+          return {
+            top: top + (height / 2) + yOffset,
+            left: left + width + xOffset,
+            position
+          };
+        }
+      }
+
+      onTransformEnd = (e) => {
+        if (e.propertyName === 'transform') {
+          events.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+          this.setState({ visible: false });
+        }
+      };
+
+      handleMouseEnter = (event) => {
+        this.activate(this.calculatePosition(event.currentTarget));
+        if (this.props.onMouseEnter) this.props.onMouseEnter(event);
+      };
+
+      handleMouseLeave = (event) => {
+        this.deactivate();
+        if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+      };
+
+      handleClick = (event) => {
+        if (this.props.tooltipHideOnClick && this.state.active) {
+            this.deactivate();
+        }
+
+        if (this.props.tooltipShowOnClick && !this.state.active) {
+          this.activate(this.calculatePosition(event.currentTarget));
+        }
+
+        if (this.props.onClick) this.props.onClick(event);
+      };
+
+      render () {
+        const { active, left, top, position, visible } = this.state;
+        const positionClass = `tooltip${position.charAt(0).toUpperCase() + position.slice(1)}`;
+        const {
+          children,
+          className,
+          theme,
+          tooltip,
+          tooltipDelay,       //eslint-disable-line no-unused-vars
+          tooltipHideOnClick, //eslint-disable-line no-unused-vars
+          tooltipPosition,    //eslint-disable-line no-unused-vars
+          tooltipShowOnClick, //eslint-disable-line no-unused-vars
+          ...other
+        } = this.props;
+
+        const _className = classnames(theme.tooltip, {
+          [theme.tooltipActive]: active,
+          [theme[positionClass]]: theme[positionClass]
+        });
+
+        const isNative = typeof ComposedComponent === 'string';
+
+        return (
+          <ComposedComponent
+            {...other}
+            className={className}
+            onClick={this.handleClick}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+            {...isNative ? {} : {theme}}
+          >
+            {children ? children : null}
+            {visible && (
+              <Portal>
+                <span ref="tooltip" className={_className} data-react-toolbox="tooltip" style={{top, left}}>
+                  <span className={theme.tooltipInner}>{tooltip}</span>
+                </span>
+              </Portal>
+            )}
+          </ComposedComponent>
+        );
+      }
+    }
+
+    return themr(TOOLTIP, defaultTheme)(TooltippedComponent);
+  };
+};
+
+export default tooltipFactory;
diff --git a/components/tooltip/_config.scss b/components/tooltip/_config.scss
index c29f4c415..042410519 100644
--- a/components/tooltip/_config.scss
+++ b/components/tooltip/_config.scss
@@ -1,7 +1,8 @@
-$tooltip-background: rgba(97,97,97,.9);
-$tooltip-border-radius: .2 * $unit;
-$tooltip-color: #fff;
-$tooltip-font-size: $unit;
-$tooltip-max-width: 17 * $unit;
-$tooltip-padding: .8 * $unit;
-$tooltip-animation-duration: 2000ms;
+$tooltip-background: rgba(97,97,97,.9) !default;
+$tooltip-margin: 0.5 * $unit !default;
+$tooltip-border-radius: .2 * $unit !default;
+$tooltip-color: #fff !default;
+$tooltip-font-size: $unit !default;
+$tooltip-max-width: 17 * $unit !default;
+$tooltip-padding: .8 * $unit !default;
+$tooltip-animation-duration: 200ms !default;
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
new file mode 100644
index 000000000..3b4cfae1c
--- /dev/null
+++ b/components/tooltip/index.d.ts
@@ -0,0 +1,79 @@
+import * as React from "react";
+
+export interface TooltipTheme {
+  /**
+   * Added to the tooltip element.
+   */
+  tooltip?: string;
+  /**
+   * Added to the root when the tooltip is active.
+   */
+  tooltipActive?: string;
+  /**
+   * Wrapper for the root element used to position the tooltip.
+   */
+  tooltipWrapper?: string;
+}
+
+export interface TooltipProps {
+  /**
+   * Additional class added to composed component.
+   */
+  className?: string;
+  /**
+   * Callback to be invoked when Component is clicked.
+   */
+  onClick?: Function;
+  /**
+   * Callback called when the mouse enters the Component.
+   */
+  onMouseEnter?: Function;
+  /**
+   * Callback called when the mouse leaves the Component.
+   */
+  onMouseLeave?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TooltipTheme;
+  /**
+   * The text (or node) used for the tooltip.
+   */
+  tooltip?: React.ReactNode;
+  /**
+   * Amount of time in miliseconds spent before the tooltip is visible.
+   * @default 0
+   */
+  tooltipDelay?: number;
+  /**
+   * If true, the Tooltip hides after a click in the host component.
+   * @default true
+   */
+  tooltipHideOnClick?: boolean;
+  /**
+   * Tooltip position.
+   * @default "vertical"
+   */
+  tooltipPosition?: "bottom" | "top" | "left" | "right" | "horizontal" | "vertical";
+  /**
+   * Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.
+   * @default false
+   */
+  tooltipShowOnClick?: boolean;
+  /**
+   * Additional attributes passed to composed component.
+   */
+  [key: string]: any;
+}
+
+declare class TooltipComponent<P, S> extends React.Component<P, S> {
+  props: P & TooltipProps;
+}
+
+interface TooltippedComponentClass<P> extends TooltipProps {
+  new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
+
+export default Tooltip;
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
new file mode 100644
index 000000000..9612facdd
--- /dev/null
+++ b/components/tooltip/index.js
@@ -0,0 +1,6 @@
+import tooltipFactory from './Tooltip.js';
+import theme from './theme.scss';
+
+const themedTooltipFactory = (options) => tooltipFactory({ ...options, theme });
+export default tooltipFactory({ theme });
+export { themedTooltipFactory as tooltipFactory };
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
deleted file mode 100644
index 2c07add98..000000000
--- a/components/tooltip/index.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import style from './style';
-
-class Tooltip extends React.Component {
-
-  static propTypes = {
-    className: React.PropTypes.string,
-    label: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    className: ''
-  };
-
-  state = {
-    active: false
-  };
-
-  componentDidMount = () => {
-    const node = ReactDOM.findDOMNode(this);
-    const parent = node.parentNode;
-    if (parent) {
-      parent.onmouseover = () => {
-        const position = parent.getBoundingClientRect();
-        node.style.top = `${position.top + position.height}px`;
-        node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-        if (!this.state.active) this.setState({ active: true});
-      };
-      parent.onmouseout = () => {
-        if (this.state.active) this.setState({ active: false});
-      };
-    }
-  };
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.state.active) className += ` ${style.active}`;
-
-    return (
-      <span data-react-toolbox='tooltip' className={className}>
-        {this.props.label}
-      </span>
-    );
-  }
-}
-
-export default Tooltip;
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 7ff5a0336..98c4e3a36 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -1,26 +1,53 @@
 # Tooltip
 
-A tooltip is Useful for show information on hover in any kind of component. Out of the box react-toolbox offers you a property `tooltip` in the component `<Button>`.
+A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. Also, it's factory function is exposed so you can create your own decorator with specific properties.
 
 <!-- example -->
 ```jsx
 import Button from 'react-toolbox/lib/button';
 import Tooltip from 'react-toolbox/lib/tooltip';
+import Link from 'react-toolbox/lib/link';
+
+const TooltipButton = Tooltip(Button);
+const TooltipInput = Tooltip(Input);
+const TooltipLink = Tooltip(Link);
 
 const TooltipTest = () => (
   <div>
-    <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
-    </p>
-    
-    <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
+    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipLink count={42} href="#" label="The answer is" icon='speaker_notes' tooltip='Question - universe?'/>
+    <TooltipInput tooltip='lorem ipsum...' />
   </div>
 );
 ```
 
+This component can be styled by context providing a theme with the key `RTTooltip` through the theme provider.
+
 ## Properties
 
-| Name      | Type      | Default         | Description|
+In any component you decorate with the Tooltip you'd get some additional props:
+
+| Name                  | Type          | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `label`     | `String`  |  | The text string to use for the tooltip.|
+| `className`           | `String`      | `''`          | Sets a class to give customized styles to the tooltip.|
+| `onClick`             | `Function`    |               | Callback to be invoked when Component is clicked.|
+| `onMouseEnter`        | `Function`    |               | Callback called when the mouse enters the Component.|
+| `onMouseLeave`        | `Function`    |               | Callback called when the mouse leaves the Component.|
+| `tooltip`             | `String`      |               | The text string to use for the tooltip.|
+| `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
+| `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|
+| `tooltipPosition`     | `String`      | `vertical`    | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
+| `tooltipShowOnClick`  | `Boolean`     | `false`       | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `tooltip` | Added to the tooltip element wrapper.|
+| `tooltipActive` | Added to the root when the tooltip is active.|
+| `tooltipBottom` | Added to the root in case the tooltip is being positioned at bottom.|
+| `tooltipInner` | Added to the inner element which sets the background, font and rounded borders.|
+| `tooltipLeft` | Added to the root in case the tooltip is being positioned at left.|
+| `tooltipRight` | Added to the root in case the tooltip is being positioned at right.|
+| `tooltipTop` | Added to the root in case the tooltip is being positioned at top.|
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
deleted file mode 100644
index 75e3d9609..000000000
--- a/components/tooltip/style.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.root {
-  position: fixed;
-  z-index: $z-index-higher;
-  display: inline-block;
-  max-width: $tooltip-max-width;
-  margin-top: 10px;
-  padding: $tooltip-padding;
-  font-size: $font-size-tiny;
-  font-size: $tooltip-font-size;
-  font-weight: $font-weight-bold;
-  line-height: $font-size-small;
-  color: $tooltip-color;
-  text-align: center;
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
-  transform: scale(0);
-  transform-origin: top center;
-  animation-duration: $tooltip-animation-duration;
-  animation-timing-function: $animation-curve-default;
-  animation-iteration-count: 1;
-  animation-direction: forwards;
-  &.active {
-    animation-name: tooltip-animation;
-  }
-  &.large {
-    font-size: $font-size-small;
-    padding: 2 * $tooltip-padding;
-  }
-
-  @keyframes tooltip-animation {
-    0% {
-      transform: scale(0);
-    }
-    10%, 99% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0);
-    }
-  }
-}
diff --git a/components/tooltip/theme.scss b/components/tooltip/theme.scss
new file mode 100644
index 000000000..3daa20a8c
--- /dev/null
+++ b/components/tooltip/theme.scss
@@ -0,0 +1,55 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.tooltip {
+  position: absolute;
+  z-index: $z-index-higher;
+  display: block;
+  max-width: $tooltip-max-width;
+  padding: $tooltip-margin;
+  font-family: Roboto, sans-serif;
+  font-size: $tooltip-font-size;
+  font-weight: $font-weight-bold;
+  line-height: $font-size-small;
+  text-align: center;
+  text-transform: none;
+  pointer-events: none;
+  transition: $animation-curve-default $tooltip-animation-duration transform;
+  transform: scale(0) translateX(-50%);
+  transform-origin: top left;
+
+  &.tooltipActive {
+    transform: scale(1) translateX(-50%);
+  }
+
+  &.tooltipTop {
+    transform: scale(0) translateX(-50%) translateY(-100%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-50%) translateY(-100%);
+    }
+  }
+
+  &.tooltipLeft {
+    transform: scale(0) translateX(-100%) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-100%) translateY(-50%);
+    }
+  }
+
+  &.tooltipRight {
+    transform: scale(0) translateX(0) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(0) translateY(-50%);
+    }
+  }
+}
+
+.tooltipInner {
+  display: block;
+  padding: $tooltip-padding;
+  color: $tooltip-color;
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
+}
diff --git a/components/utils/__test__/time.spec.js b/components/utils/__test__/time.spec.js
new file mode 100644
index 000000000..f88a05a23
--- /dev/null
+++ b/components/utils/__test__/time.spec.js
@@ -0,0 +1,17 @@
+/* global describe */
+/* global it */
+import expect from 'expect';
+import time from '../time';
+
+describe('time', function () {
+  describe('toggleTimeMode', function () {
+    it('changes from am to pm', function () {
+      const date = new Date(107, 2, 2, 10, 30);
+      expect(time.toggleTimeMode(date).getTime()).toEqual(new Date(107, 2, 2, 22, 30).getTime());
+    });
+    it('changes from pm to am', function () {
+      const date = new Date(107, 2, 2, 22, 30);
+      expect(time.toggleTimeMode(date).getTime()).toEqual(new Date(107, 2, 2, 10, 30).getTime());
+    });
+  });
+});
diff --git a/components/utils/events.js b/components/utils/events.js
index cc2ef9cb8..b3bb60a22 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -1,24 +1,21 @@
-module.exports = {
-
+export default {
   getMousePosition (event) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.pageX - (window.scrollX || window.pageXOffset),
+      y: event.pageY - (window.scrollY || window.pageYOffset)
     };
   },
 
   getTouchPosition (event) {
     return {
-      x: event.touches[0].pageX,
-      y: event.touches[0].pageY
+      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
+      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
     };
   },
 
   pauseEvent (event) {
     event.stopPropagation();
     event.preventDefault();
-    event.returnValue = false;
-    event.cancelBubble = true;
   },
 
   addEventsToDocument (eventMap) {
@@ -40,6 +37,34 @@ module.exports = {
       node = node.parentNode;
     }
     return false;
+  },
+
+  addEventListenerOnTransitionEnded (element, fn) {
+    const eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.addEventListener(eventName, fn);
+    return true;
+  },
+
+  removeEventListenerOnTransitionEnded (element, fn) {
+    const eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.removeEventListener(eventName, fn);
+    return true;
   }
+};
 
+const TRANSITIONS = {
+  'transition': 'transitionend',
+  'OTransition': 'oTransitionEnd',
+  'MozTransition': 'transitionend',
+  'WebkitTransition': 'webkitTransitionEnd'
 };
+
+function transitionEventNamesFor (element) {
+  for (const transition in TRANSITIONS) {
+    if (element && element.style[transition] !== undefined) {
+      return TRANSITIONS[transition];
+    }
+  }
+}
diff --git a/components/utils/index.js b/components/utils/index.js
index e668417f2..5e804193e 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -1,51 +1,10 @@
-module.exports = {
-
-  angleFromPositions (cx, cy, ex, ey) {
-    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
-    return theta * 180 / Math.PI;
-  },
-
-  angle360FromPositions (cx, cy, ex, ey) {
-    const angle = this.angleFromPositions(cx, cy, ex, ey);
-    return angle < 0 ? 360 + angle : angle;
-  },
-
-  range (start = 0, stop = null, step = 1) {
-    let [_start, _stop] = [0, start];
-    if (stop !== null) {
-      [_start, _stop] = [start, stop];
-    }
-    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    const range = Array(length);
-
-    for (let idx = 0; idx < length; idx++, _start += step) {
-      range[idx] = _start;
-    }
-
-    return range;
-  },
-
-  round (number, decimals) {
-    if (!isNaN(parseFloat(number)) && isFinite(number)) {
-      const decimalPower = Math.pow(10, decimals);
-      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
-    }
-    return NaN;
-  },
-
-  getViewport () {
-    return {
-      height: window.innerHeight || document.documentElement.offsetHeight,
-      width: window.innerWidth || document.documentElement.offsetWidth
-    };
-  },
-
-  cloneObject (object) {
-    return JSON.parse(JSON.stringify(object));
-  },
-
-  events: require('./events'),
-  prefixer: require('./prefixer'),
-  time: require('./time'),
-  testing: require('./testing')
-};
+import events from './events.js';
+import prefixer from './prefixer.js';
+import time from './time.js';
+import utils from './utils.js';
+
+export default {events, prefixer, time, utils};
+export {events};
+export {prefixer};
+export {time};
+export {utils};
diff --git a/components/utils/polyfills.js b/components/utils/polyfills.js
index 9082e6cb3..63cfdba00 100644
--- a/components/utils/polyfills.js
+++ b/components/utils/polyfills.js
@@ -1,5 +1,7 @@
 import 'core-js/fn/array/from';
 import 'core-js/fn/array/iterator';
+import 'core-js/fn/array/find-index';
 import 'core-js/fn/map';
 import 'core-js/fn/string/starts-with';
+import 'core-js/fn/string/includes';
 import 'core-js/fn/symbol';
diff --git a/components/utils/prefixer.js b/components/utils/prefixer.js
index 1f3eeb13a..ac27ad47d 100644
--- a/components/utils/prefixer.js
+++ b/components/utils/prefixer.js
@@ -25,8 +25,8 @@ function addPrefixesTo (style, property, value) {
   return style;
 }
 
-function prefixer (style) {
-  const _style = {};
+function prefixer (style, defaultValue = {}) {
+  const _style = defaultValue;
   for (const property in style) {
     _style[property] = style[property];
     if (properties[property]) {
@@ -37,4 +37,4 @@ function prefixer (style) {
   return _style;
 }
 
-module.exports = prefixer;
+export default prefixer;
diff --git a/components/utils/react.js b/components/utils/react.js
new file mode 100644
index 000000000..01860283b
--- /dev/null
+++ b/components/utils/react.js
@@ -0,0 +1,3 @@
+export function isComponentOfType (classType, reactElement) {
+  return reactElement && reactElement.type === classType;
+}
diff --git a/components/utils/testing.js b/components/utils/testing.js
index 9902076c5..6aa2fa3fa 100644
--- a/components/utils/testing.js
+++ b/components/utils/testing.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 
-module.exports = {
-
+export default {
   renderComponent (Component, props = {}, state = {}) {
     const component = TestUtils.renderIntoDocument(<Component {...props} />);
     if (state !== {}) { component.setState(state); }
@@ -14,5 +13,4 @@ module.exports = {
     shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
     return shallowRenderer.getRenderOutput();
   }
-
 };
diff --git a/components/utils/time.js b/components/utils/time.js
index 91155fc51..b28ff35de 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,5 +1,154 @@
-module.exports = {
+const dateLocales = {
+  cs: {
+    months: 'Leden_Únor_Březen_Duben_Květen_Červen_Červenec_Srpen_Září_Říjen_Listopad_Prosinec'.split('_'),
+    monthsShort: 'Led_Úno_Bře_Dub_Kvě_Čvn_Čvc_Srp_Zář_Říj_Lis_Pro'.split('_'),
+    weekdays: 'Neděle_Pondělí_Úterý_Středa_Čtvrtek_Pátek_Sobota'.split('_'),
+    weekdaysShort: 'Ne_Po_Út_St_Čt_Pá_So'.split('_'),
+    weekdaysLetter: 'N_P_Ú_S_Č_P_S'.split('_')
+  },
+  de: {
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),
+    weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    weekdaysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    weekdaysLetter: 'S_M_D_M_D_F_S'.split('_')
+  },
+  no: {
+    months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
+    monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
+    weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
+    weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
+    weekdaysLetter: []
+  },
+  en: {
+    months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
+    weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+    weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  es: {
+    months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
+    monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'),
+    weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
+    weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
+    weekdaysLetter: 'D_L_M_X_J_V_S'.split('_')
+  },
+  af: {
+    months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'),
+    monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'),
+    weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'),
+    weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  ar: {
+    months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+    weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
+    weekdaysLetter: []
+  },
+  be: {
+    months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'),
+    monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'),
+    weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'),
+    weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'),
+    weekdaysLetter: []
+  },
+  bg: {
+    months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'),
+    monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'),
+    weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'),
+    weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'),
+    weekdaysLetter: []
+  },
+  bn: {
+    months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'),
+    monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'),
+    weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'),
+    weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'),
+    weekdaysLetter: []
+  },
+  bo: {
+    months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'),
+    weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'),
+    weekdaysLetter: []
+  },
+  br: {
+    months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'),
+    monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'),
+    weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'),
+    weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'),
+    weekdaysLetter: []
+  },
+  bs: {
+    months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'),
+    monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'),
+    weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'),
+    weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),
+    weekdaysLetter: []
+  },
+  ca: {
+    months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'),
+    monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'),
+    weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'),
+    weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'),
+    weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_')
+  },
+  gl: {
+    months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'),
+    monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'),
+    weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'),
+    weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'),
+    weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_')
+  },
+  eu: {
+    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+  },
+  pt: {
+    months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'),
+    monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'),
+    weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'),
+    weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'),
+    weekdaysLetter: []
+  },
+  it: {
+    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
+    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
+    weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'),
+    weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),
+    weekdaysLetter: []
+  },
+  fr: {
+    months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+    monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+    weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+    weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+    weekdaysLetter: []
+  },
+  ru: {
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
+    weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
+    weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
+  },
+  ua: {
+    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
+    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
+    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
+    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
+  }
+};
 
+const time = {
   getDaysInMonth (d) {
     const resultDate = this.getFirstDayOfMonth(d);
     resultDate.setMonth(resultDate.getMonth() + 1);
@@ -19,68 +168,31 @@ module.exports = {
     return d.getHours() >= 12 ? 'pm' : 'am';
   },
 
-  getFullMonth (d) {
+  getFullMonth (d, locale = 'en') {
     const month = d.getMonth();
-    switch (month) {
-      default: return 'Unknown';
-      case 0: return 'January';
-      case 1: return 'February';
-      case 2: return 'March';
-      case 3: return 'April';
-      case 4: return 'May';
-      case 5: return 'June';
-      case 6: return 'July';
-      case 7: return 'August';
-      case 8: return 'September';
-      case 9: return 'October';
-      case 10: return 'November';
-      case 11: return 'December';
-    }
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('months')) ? l.months[month] || 'Unknown' : 'Unknown';
   },
 
-  getShortMonth (d) {
+  getShortMonth (d, locale = 'en') {
     const month = d.getMonth();
-    switch (month) {
-      default: return 'Unknown';
-      case 0: return 'Jan';
-      case 1: return 'Feb';
-      case 2: return 'Mar';
-      case 3: return 'Apr';
-      case 4: return 'May';
-      case 5: return 'Jun';
-      case 6: return 'Jul';
-      case 7: return 'Aug';
-      case 8: return 'Sep';
-      case 9: return 'Oct';
-      case 10: return 'Nov';
-      case 11: return 'Dec';
-    }
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('monthsShort')) ? l.monthsShort[month] || 'Unknown' : 'Unknown';
   },
 
-  getFullDayOfWeek (day) {
-    switch (day) {
-      default: return 'Unknown';
-      case 0: return 'Sunday';
-      case 1: return 'Monday';
-      case 2: return 'Tuesday';
-      case 3: return 'Wednesday';
-      case 4: return 'Thursday';
-      case 5: return 'Friday';
-      case 6: return 'Saturday';
-    }
+  getFullDayOfWeek (day, locale = 'en') {
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('weekdays')) ? l.weekdays[day] || 'Unknown' : 'Unknown';
   },
 
-  getShortDayOfWeek (day) {
-    switch (day) {
-      default: return 'Unknown';
-      case 0: return 'Sun';
-      case 1: return 'Mon';
-      case 2: return 'Tue';
-      case 3: return 'Wed';
-      case 4: return 'Thu';
-      case 5: return 'Fri';
-      case 6: return 'Sat';
-    }
+  getShortDayOfWeek (day, locale = 'en') {
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('weekdaysShort')) ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
+  },
+
+  getDayOfWeekLetter (day, locale = 'en') {
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('weekdaysLetter')) ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
   },
 
   clone (d) {
@@ -105,7 +217,7 @@ module.exports = {
 
   addMonths (d, months) {
     const newDate = this.clone(d);
-    newDate.setMonth(d.getMonth() + months);
+    newDate.setMonth(d.getMonth() + months, 1);
     return newDate;
   },
 
@@ -149,7 +261,7 @@ module.exports = {
     const newDate = this.clone(d);
     const hours = newDate.getHours();
 
-    newDate.setHours(hours - (hours > 12 ? -12 : 12));
+    newDate.setHours(hours + (hours > 12 ? -12 : 12));
     return newDate;
   },
 
@@ -172,6 +284,28 @@ module.exports = {
     if (hours.length < 2) hours = '0' + hours;
     if (mins.length < 2) mins = '0' + mins;
     return hours + ':' + mins;
-  }
+  },
 
+  dateOutOfRange (date, minDate, maxDate) {
+    return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
+  },
+
+  closestDate (to, date1, date2) {
+    const toTime = to.getTime();
+
+    const diff1 = Math.abs(toTime - date1.getTime());
+    const diff2 = Math.abs(toTime - date2.getTime());
+
+    return diff1 < diff2 ? date1 : date2;
+  },
+
+  formatDate (date, locale = 'en') {
+    if (locale === 'en') {
+      return `${date.getDate()} ${time.getFullMonth(date, locale)} ${date.getFullYear()}`;
+    } else {
+      return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+    }
+  }
 };
+
+export default time;
diff --git a/components/utils/utils.js b/components/utils/utils.js
new file mode 100644
index 000000000..bc024a07d
--- /dev/null
+++ b/components/utils/utils.js
@@ -0,0 +1,68 @@
+export default {
+  angleFromPositions (cx, cy, ex, ey) {
+    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    return theta * 180 / Math.PI;
+  },
+
+  angle360FromPositions (cx, cy, ex, ey) {
+    const angle = this.angleFromPositions(cx, cy, ex, ey);
+    return angle < 0 ? 360 + angle : angle;
+  },
+
+  range (start = 0, stop = null, step = 1) {
+    let [_start, _stop] = [0, start];
+    if (stop !== null) {
+      [_start, _stop] = [start, stop];
+    }
+    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    const range = Array(length);
+
+    for (let idx = 0; idx < length; idx++, _start += step) {
+      range[idx] = _start;
+    }
+
+    return range;
+  },
+
+  round (number, decimals) {
+    if (!isNaN(parseFloat(number)) && isFinite(number)) {
+      const decimalPower = Math.pow(10, decimals);
+      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
+    }
+    return NaN;
+  },
+
+  getViewport () {
+    return {
+      height: window.innerHeight || document.documentElement.offsetHeight,
+      width: window.innerWidth || document.documentElement.offsetWidth
+    };
+  },
+
+  cloneObject (object) {
+    return JSON.parse(JSON.stringify(object));
+  },
+
+  inputTypeForPrototype (prototype) {
+    if (prototype === Date) return 'date';
+    if (prototype === Number) return 'number';
+    if (prototype === Boolean) return 'checkbox';
+    return 'text';
+  },
+
+  prepareValueForInput (value, type) {
+    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
+    if (type === 'checkbox') {
+      return value ? 'on' : '';
+    }
+    return value;
+  },
+
+  removeObjectKey (key, object) {
+    const newObject = {};
+    Object.keys(object)
+      .filter(k => k !== key)
+      .forEach(k => { newObject[k] = object[k]; });
+    return newObject;
+  }
+};
diff --git a/docs/.babelrc b/docs/.babelrc
new file mode 100644
index 000000000..4ef551af4
--- /dev/null
+++ b/docs/.babelrc
@@ -0,0 +1,19 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }]
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/docs/.eslintrc b/docs/.eslintrc
new file mode 100644
index 000000000..1b11bd11f
--- /dev/null
+++ b/docs/.eslintrc
@@ -0,0 +1,229 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "es6": true
+  },
+
+  "ecmaFeatures": {
+    "jsx": true,
+    "templateStrings": true,
+    "superInFunctions": false,
+    "classes": true,
+    "modules": true
+  },
+
+  "parser": "babel-eslint",
+
+  "plugins": [
+    "babel",
+    "react"
+  ],
+
+  "rules": {
+    "block-scoped-var": [0],
+    "brace-style": [2, "1tbs", {
+      "allowSingleLine": true
+    }],
+    "camelcase": [0],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2],
+    "comma-style": [2, "last"],
+    "complexity": [0, 11],
+    "constructor-super": [2],
+    "consistent-return": [0],
+    "consistent-this": [0, "that"],
+    "curly": [2, "multi-line"],
+    "default-case": [2],
+    "dot-notation": [2, {
+      "allowKeywords": true
+    }],
+    "eol-last": [2],
+    "eqeqeq": [2],
+    "func-names": [0],
+    "func-style": [0, "declaration"],
+    "generator-star-spacing": [2, "after"],
+    "guard-for-in": [0],
+    "handle-callback-err": [0],
+    "key-spacing": [2, {
+      "beforeColon": false,
+      "afterColon": true
+    }],
+    "quotes": [2, "single", "avoid-escape"],
+    "max-depth": [0, 4],
+    "max-len": [0, 80, 4],
+    "max-nested-callbacks": [0, 2],
+    "max-params": [0, 3],
+    "max-statements": [0, 10],
+    "new-parens": [2],
+    "new-cap": [0],
+    "newline-after-var": [0],
+    "no-alert": [2],
+    "no-array-constructor": [2],
+    "no-bitwise": [0],
+    "no-caller": [2],
+    "no-catch-shadow": [2],
+    "no-cond-assign": [2],
+    "no-console": [0],
+    "no-constant-condition": [1],
+    "no-continue": [2],
+    "no-control-regex": [2],
+    "no-debugger": [2],
+    "no-delete-var": [2],
+    "no-div-regex": [0],
+    "no-dupe-args": [2],
+    "no-dupe-keys": [2],
+    "no-duplicate-case": [2],
+    "no-else-return": [0],
+    "no-empty": [2],
+    "no-empty-character-class": [2],
+    "no-eq-null": [0],
+    "no-eval": [2],
+    "no-ex-assign": [2],
+    "no-extend-native": [1],
+    "no-extra-bind": [2],
+    "no-extra-boolean-cast": [2],
+    "no-extra-parens": [0],
+    "no-extra-semi": [1],
+    "no-fallthrough": [2],
+    "no-floating-decimal": [2],
+    "no-func-assign": [2],
+    "no-implied-eval": [2],
+    "no-inline-comments": [0],
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": [2],
+    "no-irregular-whitespace": [2],
+    "no-iterator": [2],
+    "no-label-var": [2],
+    "no-labels": [2],
+    "no-lone-blocks": [2],
+    "no-lonely-if": [2],
+    "no-loop-func": [2],
+    "no-mixed-requires": [0, false],
+    "no-mixed-spaces-and-tabs": [2, false],
+    "no-multi-spaces": [2],
+    "no-multi-str": [2],
+    "no-multiple-empty-lines": [2, {
+      "max": 2
+    }],
+    "no-native-reassign": [1],
+    "no-negated-in-lhs": [2],
+    "no-nested-ternary": [0],
+    "no-new": [2],
+    "no-new-func": [2],
+    "no-new-object": [2],
+    "no-new-require": [0],
+    "no-new-wrappers": [2],
+    "no-obj-calls": [2],
+    "no-octal": [2],
+    "no-octal-escape": [2],
+    "no-path-concat": [0],
+    "no-param-reassign": [2],
+    "no-plusplus": [0],
+    "no-process-env": [0],
+    "no-process-exit": [2],
+    "no-proto": [2],
+    "no-redeclare": [2],
+    "no-regex-spaces": [2],
+    "no-reserved-keys": [0],
+    "no-restricted-modules": [0],
+    "no-return-assign": [2],
+    "no-script-url": [2],
+    "no-self-compare": [0],
+    "no-sequences": [2],
+    "no-shadow": [2],
+    "no-shadow-restricted-names": [2],
+    "semi-spacing": [2],
+    "no-spaced-func": [2],
+    "no-sparse-arrays": [2],
+    "no-sync": [0],
+    "no-ternary": [0],
+    "no-this-before-super": [2],
+    "no-throw-literal": [2],
+    "no-trailing-spaces": [2],
+    "no-undef": [2],
+    "no-undef-init": [2],
+    "no-undefined": [0],
+    "no-underscore-dangle": [0],
+    "no-unreachable": [2],
+    "no-unused-expressions": [2, {
+      "allowShortCircuit": true
+    }],
+    "no-unused-vars": [1, {
+      "vars": "all",
+      "args": "after-used"
+    }],
+    "no-use-before-define": [2, "nofunc"],
+    "no-var": [2],
+    "no-void": [0],
+    "no-warning-comments": [0, {
+      "terms": ["todo", "fixme", "xxx"],
+      "location": "start"
+    }],
+    "no-with": [2],
+    "one-var": [0],
+    "operator-assignment": [0, "always"],
+    "operator-linebreak": [2, "before"],
+    "padded-blocks": [0],
+    "prefer-const": [2],
+    "prefer-spread": [2],
+    "quote-props": [0],
+    "radix": [0],
+    "semi": [2],
+    "sort-vars": [0],
+    "keyword-spacing": [2, {"after": true}],
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "always" }],
+    "space-before-blocks": [0, "always"],
+    "space-in-brackets": [0, "never", {
+      "singleValue": true,
+      "arraysInArrays": false,
+      "arraysInObjects": false,
+      "objectsInArrays": true,
+      "objectsInObjects": true,
+      "propertyName": false
+    }],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": [2],
+    "space-unary-ops": [2, {
+      "words": true,
+      "nonwords": false
+    }],
+    "spaced-line-comment": [0, "always"],
+    "strict": [1],
+    "use-isnan": [2],
+    "valid-jsdoc": [0],
+    "valid-typeof": [2],
+    "vars-on-top": [0],
+    "wrap-iife": [2],
+    "wrap-regex": [2],
+    "yoda": [2, "never", {
+      "exceptRange": true
+    }],
+    "babel/object-shorthand": [2],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/sort-prop-types": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 0,
+    "react/no-unknown-property": 1,
+    "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 1
+  }
+}
diff --git a/docs/app/components/Carbon.js b/docs/app/components/Carbon.js
new file mode 100644
index 000000000..c37559328
--- /dev/null
+++ b/docs/app/components/Carbon.js
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+
+class Carbon extends Component {
+  static propTypes = {
+    className: PropTypes.string
+  };
+
+  componentDidMount () {
+    const script = document.createElement('script');
+    script.src = '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reacttoolboxcom';
+    script.async = true;
+    script.id = '_carbonads_js';
+    this.carbonNode.appendChild(script);
+  }
+
+  render () {
+    return (
+      <div
+        className={this.props.className}
+        ref={node => { this.carbonNode = node; }}
+      />
+    );
+  }
+}
+
+export default Carbon;
diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index 41bcea688..7e32be88c 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,9 +1,12 @@
-@import "http://github.com/~react-toolbox/base";
+@import "http://github.com/~react-toolbox/colors";
+@import "http://github.com/~react-toolbox/globals";
+@import "http://github.com/~react-toolbox/mixins";
+@import "http://github.com/theme/theme";
 
 $unit: 1rem;
-$color-primary-dark: unquote("rgb(#{$color-primary-dark})");
-$color-primary-light: unquote("rgb(#{$color-primary-light})");
-$color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$color-accent: unquote("rgb(#{$color-accent})");
+$color-primary-dark: $color-primary-dark;
+$color-primary-light: $color-primary-light;
+$color-primary-contrast: $color-primary-contrast;
+$color-accent: $color-accent;
 $color-divider: $color-divider;
 $color-content: #fafafa;
diff --git a/docs/app/components/appbar/index.jsx b/docs/app/components/appbar/index.js
similarity index 100%
rename from docs/app/components/appbar/index.jsx
rename to docs/app/components/appbar/index.js
diff --git a/docs/app/components/appbar/style.scss b/docs/app/components/appbar/style.scss
index fce7d795d..4cbcc9446 100644
--- a/docs/app/components/appbar/style.scss
+++ b/docs/app/components/appbar/style.scss
@@ -8,14 +8,12 @@
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
-  background: $color-primary-dark;
   box-shadow: $appbar-shadow;
 }
 
 .logo {
   width: $appbar-logo-size;
   height: $appbar-logo-size;
-  margin-top: ($appbar-height - $appbar-logo-size) / 2;
   fill: $color-primary-contrast;
 }
 
diff --git a/docs/app/components/editor/index.jsx b/docs/app/components/editor/index.js
similarity index 97%
rename from docs/app/components/editor/index.jsx
rename to docs/app/components/editor/index.js
index b187a6d03..cf7c5bdac 100644
--- a/docs/app/components/editor/index.jsx
+++ b/docs/app/components/editor/index.js
@@ -6,6 +6,7 @@ import 'codemirror/mode/javascript/javascript';
 class Editor extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
+    codeText: React.PropTypes.string,
     lineNumbers: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     readOnly: React.PropTypes.bool,
@@ -47,6 +48,11 @@ class Editor extends React.Component {
     }
   };
 
+  setCode (code) {
+    this.editor.getDoc().setValue(code);
+    this.handleChange();
+  }
+
   render () {
     let className = style.editor;
     if (this.props.className) className += ` ${this.props.className}`;
@@ -56,11 +62,6 @@ class Editor extends React.Component {
       </div>
     );
   }
-
-  setCode (code) {
-    this.editor.getDoc().setValue(code);
-    this.handleChange();
-  }
 }
 
 export default Editor;
diff --git a/docs/app/components/layout/home/index.js b/docs/app/components/layout/home/index.js
new file mode 100644
index 000000000..aca827398
--- /dev/null
+++ b/docs/app/components/layout/home/index.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Link } from 'react-router';
+import Button from 'react-toolbox/button';
+import {Card, CardTitle, CardMedia, CardText, CardActions} from 'react-toolbox/card';
+import Carbon from '../../Carbon';
+import Logo from '../../logo';
+import Navigation from '../../navigation';
+import style from './style';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const TwitterIcon = () => (
+  <svg viewBox="0 0 274 223">
+    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
+  </svg>
+);
+
+
+const Home = () => (
+  <article>
+    <header className={style.header}>
+      <div className={style.github}>
+        <iframe src='https://ghbtns.com/github-btn.html?user=react-toolbox&amp;repo=react-toolbox&amp;type=star&amp;count=true' frameBorder='0' scrolling='0' />
+        <iframe src='https://ghbtns.com/github-btn.html?user=react-toolbox&amp;repo=react-toolbox&amp;type=fork&amp;count=true' frameBorder='0' scrolling='0' />
+        <a className={style.donate} href='https://www.paypal.me/javivelasco' target='_blank'>
+          <span className={style.legend}>support</span>
+          <span className={style.paypal}>paypal</span>
+        </a>
+      </div>
+
+      <Logo className={style.logo} />
+      <h2 className={style.title}>React Toolbox</h2>
+      <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
+      <Navigation className={style.navigation} />
+      <Carbon className={style.ad} />
+    </header>
+
+    <section className={style.content}>
+      <p>
+        React Toolbox is a set of React components that implements Google Material Design specification.
+        It's built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6.
+        The library harmoniously integrates with your Webpack workflow and it's easily customizable and very flexible.
+      </p>
+
+      <p>
+        Check our awesome documentation (which is built using React Toolbox) and try all the components with
+        live examples. We've created a playground so you don't need to install anything to fall in love with
+        our components, so fun!
+      </p>
+
+      <Link to='/components'>
+        <Button label='Try it now!' raised accent />
+      </Link>
+    </section>
+
+    <section className={`${style.content}`}>
+      <h3>About the authors</h3>
+      <ul className={style.authors}>
+        <Card className={style.author}>
+          <CardMedia aspectRatio='wide' image='images/javivelasco.jpg' />
+          <CardTitle title="Javi Velasco" subtitle="@javivelasco" />
+          <CardText>Software gardener • Film, music & comic lover • Frontend Engineer at Audiense  • Any biographer in the room?</CardText>
+          <CardActions>
+            <Button href='http://github.com/javivelasco' target='_blank'><GithubIcon /> Github</Button>
+            <Button href='http://twitter.com/javivelasco' target='_blank' className={style.twitter}><TwitterIcon /> Twitter</Button>
+          </CardActions>
+        </Card>
+
+        <Card className={style.author}>
+          <CardMedia aspectRatio='wide' image='images/soyjavi.jpg' />
+          <CardTitle title="Javi Jiménez" subtitle="@soyjavi" />
+          <CardText>Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO</CardText>
+          <CardActions>
+            <Button href='http://github.com/soyjavi' target='_blank'><GithubIcon /> Github</Button>
+            <Button href='http://twitter.com/soyjavi' target='_blank' className={style.twitter}><TwitterIcon /> Twitter</Button>
+          </CardActions>
+        </Card>
+      </ul>
+    </section>
+
+    <footer className={style.footer}>
+      <p>React Toolbox © 2016</p>
+      <small>Crafted with <span className={style.love}>ღ</span> between Spain and Thailand</small>
+    </footer>
+  </article>
+);
+
+export default Home;
diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
deleted file mode 100644
index 41a66040c..000000000
--- a/docs/app/components/layout/home/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-import { Card, Button } from 'react-toolbox';
-import Logo from '../../logo';
-import Navigation from '../../navigation';
-import style from './style';
-import authors from './modules/authors';
-
-const Home = () => (
-  <article>
-    <header className={style.header}>
-      <div className={style.github}>
-        <iframe src='https://ghbtns.com/github-btn.html?user=react-toolbox&amp;repo=react-toolbox&amp;type=star&amp;count=true' frameBorder='0' scrolling='0' />
-        <iframe src='https://ghbtns.com/github-btn.html?user=react-toolbox&amp;repo=react-toolbox&amp;type=fork&amp;count=true' frameBorder='0' scrolling='0' />
-        <a className={style.donate} href='https://www.paypal.me/javivelasco' target='_blank'>
-          <span className={style.legend}>support</span>
-          <span className={style.paypal}>paypal</span>
-        </a>
-      </div>
-
-      <Logo className={style.logo} />
-      <h2 className={style.title}>React Toolbox</h2>
-      <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
-      <Navigation className={style.navigation} />
-    </header>
-
-    <section className={style.content}>
-      <p>
-        React Toolbox is a set of React components that implements Google Material Design specification.
-        It's built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6.
-        The library harmoniously integrates with your Webpack workflow and it's easily customizable and very flexible.
-      </p>
-
-      <p>
-        Check our awesome documentation (which is built using React Toolbox) and try all the components with
-        live examples. We've created a playground so you don't need to install anything to fall in love with
-        our components, so fun!
-      </p>
-
-      <Link to='/components'>
-        <Button label='Try it now!' kind='raised' accent />
-      </Link>
-    </section>
-
-    <section className={`${style.content}`}>
-      <h3>About the authors</h3>
-      <ul className={style.authors}>
-      {
-        authors.map((author, index) => {
-          author.actions.map((action) => {
-            const url = `https:\\\\${ action.label }.com\\${ author.subtitle }`;
-            action.onClick = () => { window.open(url.toLowerCase(), '_blank'); };
-          });
-          return <Card key={index} {...author} />;
-        })
-      }
-      </ul>
-    </section>
-
-    <footer className={style.footer}>
-      <p>React Toolbox © 2015</p>
-      <small>Crafted with <span className={style.love}>ღ</span> between Spain and Thailand</small>
-    </footer>
-  </article>
-);
-
-export default Home;
diff --git a/docs/app/components/layout/home/modules/authors.js b/docs/app/components/layout/home/modules/authors.js
deleted file mode 100644
index 3aac70d0a..000000000
--- a/docs/app/components/layout/home/modules/authors.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default [
-  {
-    title: 'Javi Velasco',
-    subtitle: 'javivelasco',
-    actions: [
-      { label: 'Github' },
-      { label: 'Twitter' }
-    ],
-    image: '/images/javivelasco.jpg',
-    text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
-    color: '#3f51b5'
-  },
-  {
-    title: 'Javi Jimenez',
-    subtitle: 'soyjavi',
-    actions: [
-      { label: 'Github' },
-      { label: 'Twitter' }
-    ],
-    image: '/images/soyjavi.jpg',
-    text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
-    color: '#3f51b5'
-  }
-];
diff --git a/docs/app/components/layout/home/modules/readme.md b/docs/app/components/layout/home/modules/readme.md
deleted file mode 100644
index 0e6303bde..000000000
--- a/docs/app/components/layout/home/modules/readme.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# React Toolbox Components
-
-React Toolbox is a library of React Components based on Google's Material Design Guidelines. The main purpose of the documentation is to explore each of the components and to learn how to use them. To make the best possible experience and to experiment with the components properties and methods, we've created a playground to try components live.
-
-On the top right side of the screen you will see a rounded button with a code icon. It opens a the playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
-
-Enjoy and remember that [feedback](https://github.com/react-toolbox/react-toolbox/issues) is really appreciated.
-
-# Lorem ipsum...
-
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-# Authors
diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss
index dd9360905..969207a59 100644
--- a/docs/app/components/layout/home/style.scss
+++ b/docs/app/components/layout/home/style.scss
@@ -1,6 +1,8 @@
 @import "http://github.com/globals";
 @import "http://github.com/config";
-$content-offset: 4.8 * $unit;
+
+$twitter-color: #55acee;
+$content-offset: 2.8 * $unit;
 $content-width: 740px;
 
 .header {
@@ -29,10 +31,10 @@ $content-width: 740px;
     opacity: $hero-text-secondary-opacity;
   }
   .github {
-    z-index: $z-index-higher;
     position: fixed;
     top: 2 * $unit;
     left: 2 * $unit;
+    z-index: $z-index-higher;
     text-align: center;
     iframe {
       display: inline-block;
@@ -51,6 +53,7 @@ $content-width: 740px;
         display: inline-block;
         margin: 0 10px;
         font-size: 50px;
+        line-height: 60px;
         vertical-align: middle;
         content: "·";
       }
@@ -59,7 +62,7 @@ $content-width: 740px;
         position: relative;
         display: inline-block;
         font-weight: 400;
-        line-height: 1.2;
+        line-height: 60px;
         color: $hero-text-color;
         vertical-align: middle;
         opacity: $hero-text-secondary-opacity;
@@ -74,11 +77,10 @@ $content-width: 740px;
 .content {
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
   padding: $content-offset;
   background-color: $color-content;
-
-  flex-wrap: wrap;
   &:nth-child(3) {
     background-color: darken($color-content, 5%);
   }
@@ -87,9 +89,13 @@ $content-width: 740px;
     align-items: flex-start;
     justify-content: center;
     > * {
+      max-width: 32 * $unit;
       flex: 1 auto;
       margin: 0 $unit;
     }
+    .twitter {
+      color: $twitter-color !important;
+    }
   }
   > p {
     max-width: $content-width;
@@ -125,6 +131,27 @@ $content-width: 740px;
   }
 }
 
+.donate {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 1.1 * $unit;
+  color: #fff;
+  vertical-align: top;
+  border-radius: 3px;
+  .legend {
+    display: inline-block;
+    padding: 0 .5 * $unit;
+    line-height: 2 * $unit;
+    background-color: #555;
+  }
+  .paypal {
+    display: inline-block;
+    padding: 0 .5 * $unit;
+    line-height: 2 * $unit;
+    background-color: #007ec6;
+  }
+}
+
 @media all and (max-width: 768px) {
   .header {
     .github {
@@ -149,23 +176,38 @@ $content-width: 740px;
   }
 }
 
-.donate {
-  display: inline-block;
-  overflow: hidden;
-  font-size: 1.1 * $unit;
-  color: #fff;
-  vertical-align: top;
-  border-radius: 3px;
-  .legend {
+.ad {
+  display: block;
+  padding: $hero-item-spacing / 2 0;
+  margin: 0 auto;
+
+  > div {
     display: inline-block;
-    padding: 0 .5 * $unit;
-    line-height: 2 * $unit;
-    background-color: #555;
+    max-width: 330px;
+    padding: 10px 10px 10px 160px;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: left;
+    border: solid $palette-indigo-500;
+    border-width: 1px;
+    border-radius: 4px;
+
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
   }
-  .paypal {
-    display: inline-block;
-    padding: 0 .5 * $unit;
-    line-height: 2 * $unit;
-    background-color: #007ec6;
+
+  :global {
+    .carbon-img {
+      float: left;
+      margin-left: -145px;
+    }
+
+    .carbon-poweredby {
+      display: block;
+      color: #cdbfe3 !important;
+    }
   }
 }
diff --git a/docs/app/components/layout/install/index.jsx b/docs/app/components/layout/install/index.js
similarity index 100%
rename from docs/app/components/layout/install/index.jsx
rename to docs/app/components/layout/install/index.js
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 7f5737940..07662def0 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -1,61 +1,224 @@
 # Installation, usage and customization
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [Webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
-React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox);
+React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
+```bash
+$ npm install --save react-toolbox
 ```
-npm install --save react-toolbox
+
+## Prerequisites
+
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written in [SASS](http://sass-lang.com/). In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.
+
+Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement.
+
+Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look to [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make component easily themeable.
+
+## Basic usage
+
+In this minimal example, we import a `Button` with styles already bundled:
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'react-toolbox/lib/button';
+
+ReactDOM.render(
+  <Button label="Hello World!" />,
+  document.getElementById('app')
+);
+```
+
+Take into account that any required style will be included in the final CSS so your final would include `Button` styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it.
+
+## Importing components
+
+First let's take a look on how the components are structured in the project. The [components](https://github.com/react-toolbox/react-toolbox/tree/dev/components) folder contains a folder for each component or set of related components. For example, the `app_bar`:
+
+```
+ |- /app_bar
+ |---- AppBar.js
+ |---- _config.scss
+ |---- index.js
+ |---- readme.md
+ |---- theme.scss
+```
+
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme SASS stylesheet and a configuration partial with configuration variables. Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
+
+### Bundled component
+
+You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:
+
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar';
 ```
 
-## Usage
+### Raw component
 
-Although there are other ways to use React Toolbox, the recommended way is to create a Webpack workflow with [Babel Loader](https://github.com/babel/babel-loader), [CSS Loader](https://github.com/webpack/css-loader) and [SASS Loader](https://github.com/jtangelder/sass-loader). A good starting point is [React Hot Webpack Boilerplate](https://github.com/gaearon/react-hot-boilerplate).
+You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
+
+```js
+import AppBar from 'react-toolbox/lib/app_bar/AppBar.js';
+```
 
-Once you have the workflow ready, you can just require and use the components:
+## Customizing components
 
-```jsx
+Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented **classname API** so if you want to customize a component, you just need to provide a theme object with the appropriated classname  mapping.  
+
+If the component has already a theme injected, the properties you pass will be merged with the injected. In this way, you can **add** classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the `AppBar` to be purple:
+
+```js
 import React from 'react';
-import Button from 'react-toolbox/lib/button';
+import { AppBar } from 'react-toolbox/lib/app_bar';
+import theme from './PurpleAppBar.scss';
 
-const CustomButton = () => (
-  <Button label="Hello world" kind="raised" accent />
+const PurpleAppBar = (props) => (
+  <AppBar {...props} theme={theme} />
 );
 
-export default CustomButton;
+export default PurpleAppBar;
+
+```
+
+```scss
+.appBar {
+  background-color: #800080;
+}
+```
+
+In this case we are **adding** styles to an `AppBar` component that already has some styles injected. It works because the component background by default has the same priority as the one we added. There will be cases where the original rule is more restrictive. For those cases you would need to boost priority using the same restrictions as in the original stylesheet. Feel free to take a look into the original themes or just check the selectors you want to override in DevTools.
+
+If the component has no styles injected, you should provide a theme object implementing the full API. You are free to require the CSS Module you want but take into account that every classname is there for a reason. You can either provide a theme via prop or via context as we will see later.
+
+## Theming
+
+You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_colors.scss) and [globals](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_globals.scss) files to get an overview on the **variables** you have to override to get the results you want.
+
+In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a `_theme.scss` SASS file:
+
+```scss
+@import "http://github.com/~react-toolbox/lib/colors";
+
+$color-primary: $palette-blue-500;
+$color-primary-dark: $palette-blue-700;
 ```
 
-The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **ES6 JSX** and **SASS** of the component. If you want to still use CSS Modules but avoiding [Babel](https://babeljs.io/) and [SASS](http://sass-lang.com/) you can require from `react-toolbox/lib`.
+This file should be prepended to each stylesheet compilation which be achieved in multiple ways.
 
-We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
+### Using SASS Loader
 
-## Customization
+If you are using  [Webpack](http://webpack.github.io/) as module bundler, you are probably using [sass-loader](https://github.com/jtangelder/sass-loader) as well. What we want to do is to prepend to each SASS file compilation a bunch of variables to override and this can be done with the `data` option. For example:
 
-Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:
+```js
+sassLoader: {
+  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+}
+```
 
-### Via React Toolbox Loader
+In this case we have are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.
 
-Thanks to the power of SASS, all components in React Toolbox are configured from a variables file. The best way to customize your build is to create a custom configuration SASS file overriding configuration variables like colors or sizes.
+### Using SASS imports and props
 
-With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want.
+Remember that you can import components without styles and provide those styles using the theme property. For example, a theme for a button customized with the previous theme file would be like:
+
+```scss
+@import "http://github.com/theme.scss";
+@import "http://github.com/~react-toolbox/lib/button/theme";
+```
 
-### Via `className` property
+Then, when you use a button you can inject the appropriated theme:
 
-Generally each component will have a `className` prop so you can tell the class name you want to keep in the root node of the resulting markup. All markup is style with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
+```js
+import Button from 'react-toolbox/lib/button/Button';
+import buttonTheme from './theme/button.scss';
 
-```jsx
-const CustomButton = () => (
-  <Button className='customized' label='Custom button' />
+const ThemedButton = (props) => (
+  <Button theme={buttonTheme}  {...props} />
 );
+
+export default ThemedButton;
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-role="label"` so you can avoid styling directly tag names. You can now write your CSS:
+With this technique you have to create wrappers for every component and this is not cool at all... but don't worry, we can provide the theme via context to avoid this.
+
+### Using SASS imports and context
 
-```css
-.customized > [data-role="label"] {
-  color: green;
-  font-weight: bold;
+This is a good moment to check out [react-css-themr](http://github.com/javivelasco/react-css-themr) if you still didn't. Every component in React Toolbox has a key assigned that can be used to provide a default CSS Module. You can create a theme like:
+
+```js
+export default {
+  RTRipple: require('./ripple.scss'),
+  RTButton: require('./button.scss')
 }
 ```
+
+Check for each component what key uses. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here:
+
+```js
+import React from 'react';
+import { render } from 'react-dom';
+import { ThemeProvider } from 'react-css-themr';
+import theme from './theme/theme.js';
+import App from './App.js';
+
+render(
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>
+, document.getElementById('app'))
+```
+
+A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them.
+
+## Roboto Font and Material Design Icons
+
+React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
+
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
+
+## References to Components
+
+As mentioned in the theming section, you'd usually import a component with a theme already injected. To do this we use a [Higher Order Component](http://github.com/javivelasco/react-css-themr). If you add a `ref` property to a React Toolbox component, what you will get is the **HOC** instead of the **Wrapped** component.
+
+For components with imperative methods such as the `Input`, you can also get its real instance instead of the HOC. To do this, the HOC includes a `getWrappedInstance` method that returns the wrapped component instance. This way you can call methods directly on the component's instance.
+
+## Server Side Rendering
+
+The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like [CSS Modules register hook](https://github.com/css-modules/css-modules-require-hook) or [Webpack Isomorphic tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). Also, make sure you can import from `node_modules`.
+
+## Examples
+
+For now we have a [repository example](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository.
+
+## TypeScript
+
+A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
+
+Note that to comply with the typings requirement, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
+
+## Authors and Contributors
+
+The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
+
+To work in the project you'd need a `node` version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the package has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
+
+To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:
+
+```
+$ git clone https://github.com/react-toolbox/react-toolbox.git
+$ npm install
+$ cd docs/
+$ npm install
+$ npm start
+```
+
+Local documentation will then be available at `http://localhost:8081/`.
+
+## License
+
+This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).
diff --git a/docs/app/components/layout/main/_config.scss b/docs/app/components/layout/main/_config.scss
index ca774b3d2..d564a848c 100644
--- a/docs/app/components/layout/main/_config.scss
+++ b/docs/app/components/layout/main/_config.scss
@@ -1,5 +1,7 @@
 @import "http://github.com/globals";
 
+$media-min-width: 1440px;
+$playground-max-width: $media-min-width / 2;
 $playground-width: 50%;
 $navigation-width: 22 * $unit;
 $navigation-h-padding: 2.4 * $unit;
diff --git a/docs/app/components/layout/main/button-theme.scss b/docs/app/components/layout/main/button-theme.scss
new file mode 100644
index 000000000..a2900e340
--- /dev/null
+++ b/docs/app/components/layout/main/button-theme.scss
@@ -0,0 +1,2 @@
+@import "http://github.com/globals";
+@import "http://github.com/~react-toolbox/button/theme";
diff --git a/docs/app/components/layout/main/components/navigation.js b/docs/app/components/layout/main/components/navigation.js
new file mode 100644
index 000000000..33a4b3940
--- /dev/null
+++ b/docs/app/components/layout/main/components/navigation.js
@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react';
+import { List, ListItem } from 'react-toolbox';
+import classnames from 'classnames';
+import Carbon from '../../../Carbon';
+import components from '../modules/components';
+import style from './navigation.scss';
+
+const MainNavigation = ({ className }, { router }) => {
+  const drawerItems = Object.keys(components).map((key) => {
+    const isActive = router.isActive(components[key].path);
+    return (
+      <ListItem
+        key={key}
+        caption={components[key].name}
+        className={classnames(style.item, { [style.active]: isActive })}
+        selectable
+        onClick={() => { router.push(components[key].path);}}
+      />
+    );
+  });
+
+  return (
+    <aside className={classnames(style.root, { [className]: className })}>
+      <List className={style.list} selectable ripple>
+        {drawerItems}
+      </List>
+      <footer className={style.footer}>
+        <span className={style.footerLegend}>React Toolbox © 2017</span>
+        <Carbon className={style.ad} />
+      </footer>
+    </aside>
+  );
+};
+
+MainNavigation.propTypes = {
+  className: PropTypes.string
+};
+
+MainNavigation.contextTypes = {
+  router: PropTypes.object
+};
+
+export default MainNavigation;
diff --git a/docs/app/components/layout/main/components/navigation.jsx b/docs/app/components/layout/main/components/navigation.jsx
deleted file mode 100644
index 09678b5f3..000000000
--- a/docs/app/components/layout/main/components/navigation.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { History } from 'react-router';
-import { List, ListItem } from 'react-toolbox';
-import components from '../modules/components';
-import style from './navigation.scss';
-
-const MainNavigation = React.createClass({
-  mixins: [History],
-
-  propTypes: {
-    active: React.PropTypes.bool
-  },
-
-  renderDrawerItems () {
-    return Object.keys(components).map((key) => {
-      const ToolboxComponent = components[key];
-      const to = this.context.history.createHref(ToolboxComponent.path);
-      let className = style.item;
-      if (this.context.history.isActive(ToolboxComponent.path)) {
-        className += ` ${style.active}`;
-      }
-
-      return (
-        <ListItem
-          key={key}
-          caption={ToolboxComponent.name}
-          className={className}
-          selectable
-          to={to}
-        />
-      );
-    });
-  },
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <aside className={className}>
-        <List className={style.list} selectable ripple>
-          { this.renderDrawerItems() }
-        </List>
-        <footer className={style.footer}>
-          <span>React Toolbox © 2015</span>
-        </footer>
-      </aside>
-    );
-  }
-});
-
-export default MainNavigation;
diff --git a/docs/app/components/layout/main/components/navigation.scss b/docs/app/components/layout/main/components/navigation.scss
index 56632441b..774b306b4 100644
--- a/docs/app/components/layout/main/components/navigation.scss
+++ b/docs/app/components/layout/main/components/navigation.scss
@@ -8,13 +8,16 @@
 }
 
 .list {
+  @include no-webkit-scrollbar;
   flex-grow: 1;
   overflow-y: auto;
 }
 
 .item {
-  padding: $navigation-v-padding $navigation-h-padding;
-  > span > span {
+  > span {
+    padding: $navigation-v-padding $navigation-h-padding;
+  }
+  [data-react-toolbox="list-item-text"] {
     font-size: $font-size-small;
     font-weight: $font-weight-semi-bold;
   }
@@ -25,13 +28,48 @@
 }
 
 .footer {
-  flex-grow: 0;
-  padding: $navigation-h-padding;
-  overflow: hidden;
+  padding: 20px 10px 5px;
+  border-top: 1px solid rgb(224, 224, 224);
+}
+
+.footerLegend {
+  display: block;
   font-size: $font-size-small;
   color: $color-text-secondary;
-  border-top: $navigation-footer-border;
-  > * {
-    display: block;
+}
+
+.ad {
+  display: block;
+  margin: 10px auto 0;
+
+  > div {
+    display: inline-block;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: left;
+    border-radius: 4px;
+
+    a {
+      display: block;
+      width: 100%;
+      color: #757575 !important;
+      text-decoration: none;
+    }
+  }
+
+  :global {
+    .carbon-img {
+      display: block;
+      margin: 0 auto;
+    }
+
+    .carbon-poweredby {
+      display: inline-block;
+      color: #757575 !important;
+    }
   }
 }
+
diff --git a/docs/app/components/layout/main/components/playground.jsx b/docs/app/components/layout/main/components/playground.js
similarity index 100%
rename from docs/app/components/layout/main/components/playground.jsx
rename to docs/app/components/layout/main/components/playground.js
index 93b8904bf..c848fec29 100644
--- a/docs/app/components/layout/main/components/playground.jsx
+++ b/docs/app/components/layout/main/components/playground.js
@@ -17,6 +17,10 @@ class Playground extends React.Component {
     this.setState({code});
   };
 
+  loadCode (code) {
+    this.refs.editor.setCode(code);
+  }
+
   render () {
     return (
       <aside className={this.props.className}>
@@ -33,10 +37,6 @@ class Playground extends React.Component {
       </aside>
     );
   }
-
-  loadCode (code) {
-    this.refs.editor.setCode(code);
-  }
 }
 
 export default Playground;
diff --git a/docs/app/components/layout/main/components/playground.scss b/docs/app/components/layout/main/components/playground.scss
index 343f3419b..b10e79879 100644
--- a/docs/app/components/layout/main/components/playground.scss
+++ b/docs/app/components/layout/main/components/playground.scss
@@ -1,10 +1,10 @@
 @import "http://github.com/config";
 
-
 .editor, .preview {
+  @include no-webkit-scrollbar;
   position: absolute;
   right: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .editor {
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.js
similarity index 81%
rename from docs/app/components/layout/main/index.jsx
rename to docs/app/components/layout/main/index.js
index b0869d8c7..7685e20f6 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.js
@@ -3,26 +3,33 @@ import ReactDOM from 'react-dom';
 import { Button } from 'react-toolbox';
 import Appbar from '../../../components/appbar';
 import Markdown from '../../../components/markdown';
-import Playground from './components/playground';
-import MainNavigation from './components/navigation';
+import Playground from './components/playground.js';
+import MainNavigation from './components/navigation.js';
 import BaseDocs from './modules/components.md';
 import components from './modules/components.js';
+import buttonTheme from './button-theme.scss';
 import style from './style';
 
-const LoadExampleButton = (props) => {
-  return (
-    <Button
-      accent
-      kind='raised'
-      icon='code'
-      label='Load in playground'
-      onClick={props.onClick}
-    />
-  );
+const LoadExampleButton = (props) => (
+  <Button
+    accent
+    icon='code'
+    label="Load in playground"
+    theme={buttonTheme}
+    onClick={props.onClick}
+    raised
+  />
+);
+
+LoadExampleButton.propTypes = {
+  onClick: React.PropTypes.func
 };
 
 class Main extends React.Component {
-  LOAD_EXAMPLE_CLASS = 'js-load-in-playground playground-button';
+  static propTypes = {
+    onClick: React.PropTypes.func,
+    params: React.PropTypes.object
+  };
 
   state = {
     playground: false
@@ -36,6 +43,8 @@ class Main extends React.Component {
     this.renderExampleLoaders();
   }
 
+  LOAD_EXAMPLE_CLASS = 'js-load-in-playground playground-button';
+
   handlePlayGroundClick = () => {
     this.setState({ playground: !this.state.playground});
   };
@@ -76,9 +85,9 @@ class Main extends React.Component {
         <Appbar className={style.appbar}/>
         <Button
           accent
+          floating
           className={style['playground-button']}
           icon={this.state.playground ? 'close' : 'code'}
-          kind='floating'
           onClick={this.handlePlayGroundClick}
         />
         <MainNavigation className={style.navigation} />
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index dce621c09..8e6477742 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -1,21 +1,25 @@
 // Documentation files
 import AppBar from 'react-toolbox/app_bar/readme';
 import Autocomplete from 'react-toolbox/autocomplete/readme';
+import Avatar from 'react-toolbox/avatar/readme';
 import Button from 'react-toolbox/button/readme';
 import Card from 'react-toolbox/card/readme';
 import Checkbox from 'react-toolbox/checkbox/readme';
+import Chip from 'react-toolbox/chip/readme';
 import DatePicker from 'react-toolbox/date_picker/readme';
 import Dialog from 'react-toolbox/dialog/readme';
 import Drawer from 'react-toolbox/drawer/readme';
 import Dropdown from 'react-toolbox/dropdown/readme';
 import FontIcon from 'react-toolbox/font_icon/readme';
 import Input from 'react-toolbox/input/readme';
+import Layout from 'react-toolbox/layout/readme';
 import Link from 'react-toolbox/link/readme';
 import List from 'react-toolbox/list/readme';
 import Menu from 'react-toolbox/menu/readme';
 import Navigation from 'react-toolbox/navigation/readme';
 import ProgressBar from 'react-toolbox/progress_bar/readme';
 import RadioGroup from 'react-toolbox/radio/readme';
+import Ripple from 'react-toolbox/ripple/readme';
 import Slider from 'react-toolbox/slider/readme';
 import Snackbar from 'react-toolbox/snackbar/readme';
 import Switch from 'react-toolbox/switch/readme';
@@ -25,9 +29,12 @@ import Tooltip from 'react-toolbox/tooltip/readme';
 import TimePicker from 'react-toolbox/time_picker/readme';
 
 // Examples for the Playground
-import ButtonExample1 from './examples/button_example_1.txt';
+import AppBarExample1 from './examples/app_bar_example_1.txt';
 import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
+import AvatarExample1 from './examples/avatar_example_1.txt';
+import ButtonExample1 from './examples/button_example_1.txt';
 import CardExample1 from './examples/card_example_1.txt';
+import ChipExample1 from './examples/chip_example_1.txt';
 import CheckboxExample1 from './examples/checkbox_example_1.txt';
 import DatePickerExample1 from './examples/datepicker_example_1.txt';
 import DialogExample1 from './examples/dialog_example_1.txt';
@@ -35,6 +42,7 @@ import DrawerExample1 from './examples/drawer_example_1.txt';
 import DrodpownExample1 from './examples/dropdown_example_1.txt';
 import FontIconExample1 from './examples/font_icon_example_1.txt';
 import InputExample1 from './examples/input_example_1.txt';
+import LayoutExample1 from './examples/layout_example_1.txt';
 import LinkExample1 from './examples/link_example_1.txt';
 import ListExample1 from './examples/list_example_1.txt';
 import MenuExample1 from './examples/menu_example_1.txt';
@@ -42,6 +50,7 @@ import NavigationExample1 from './examples/navigation_example_1.txt';
 import ProgressBarExample1 from './examples/progressbar_example_1.txt';
 import RadioExample1 from './examples/radio_example_1.txt';
 import SliderExample1 from './examples/slider_example_1.txt';
+import RippleExample1 from './examples/ripple_example_1.txt';
 import SnackbarExample1 from './examples/snackbar_example_1.txt';
 import SwitchExample1 from './examples/switch_example_1.txt';
 import TableExample1 from './examples/table_example_1.txt';
@@ -53,7 +62,8 @@ export default {
   app_bar: {
     name: 'App Bar',
     docs: AppBar,
-    path: '/components/app_bar'
+    path: '/components/app_bar',
+    examples: [AppBarExample1]
   },
   autocomplete: {
     name: 'Autocomplete',
@@ -61,6 +71,12 @@ export default {
     path: '/components/autocomplete',
     examples: [AutocompleteExample1]
   },
+  avatar: {
+    name: 'Avatar',
+    docs: Avatar,
+    path: '/components/avatar',
+    examples: [AvatarExample1]
+  },
   button: {
     name: 'Button',
     docs: Button,
@@ -73,6 +89,12 @@ export default {
     path: '/components/card',
     examples: [CardExample1]
   },
+  chip: {
+    name: 'Chip',
+    docs: Chip,
+    path: '/components/chip',
+    examples: [ChipExample1]
+  },
   checkbox: {
     name: 'Checkbox',
     docs: Checkbox,
@@ -115,6 +137,12 @@ export default {
     path: '/components/input',
     examples: [InputExample1]
   },
+  layout: {
+    name: 'Layout',
+    docs: Layout,
+    path: '/components/layout',
+    examples: [LayoutExample1]
+  },
   link: {
     name: 'Link',
     docs: Link,
@@ -151,6 +179,12 @@ export default {
     path: '/components/radio_group',
     examples: [RadioExample1]
   },
+  ripple: {
+    name: 'Ripple',
+    docs: Ripple,
+    path: '/components/ripple',
+    examples: [RippleExample1]
+  },
   slider: {
     name: 'Slider',
     docs: Slider,
diff --git a/docs/app/components/layout/main/modules/components.md b/docs/app/components/layout/main/modules/components.md
index 675a940b2..3a69810dd 100644
--- a/docs/app/components/layout/main/modules/components.md
+++ b/docs/app/components/layout/main/modules/components.md
@@ -1,7 +1,7 @@
 # React Toolbox Components
 
-React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). The main purpose of this documentation is to explore each of the components and to learn how to use them. To make the best possible experience and to experiment with the components properties and methods, we've created a playground to try components live.
+React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://material.google.com/). The main purpose of this documentation is to explore each of the components and learn how to use them. To make the best possible experience and to experiment with the components' properties and methods, we've created a playground to try the components live.
 
-On the top right side of the screen you will see a rounded button with a code icon. It opens a the playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
+On the top right side of the screen you will see a round button with a code icon. It opens a playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
 
 Enjoy and remember that [feedback](https://github.com/react-toolbox/react-toolbox/issues) is really appreciated.
diff --git a/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt b/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt
new file mode 100644
index 000000000..246fb96a8
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt
@@ -0,0 +1,16 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const AppBarTest = () => (
+  <AppBar title="React Toolbox" leftIcon="menu" rightIcon={<GithubIcon />}>
+    <Navigation type="horizontal">
+      <Link href="http://" label="Inbox" icon="inbox" />
+      <Link href="http://" active label="Profile" icon="person" />
+    </Navigation>
+  </AppBar>
+);
+
+return <AppBarTest />
diff --git a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
index e01190bab..41a96580a 100644
--- a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
@@ -1,20 +1,43 @@
-const countries = {
-  'EN-gb': 'England',
-  'ES-es': 'Spain',
-  'TH-th': 'Thailand',
-  'EN-en': 'USA'
-};
+const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
+const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
 
-const selected = ['ES-es', 'EN-gb'];
+class AutocompleteTest extends React.Component {
+  state = {
+    simple: 'Spain',
+    multiple: ['ES-es', 'TH-th']
+  };
 
-const AutocompleteTest = () => (
-  <Autocomplete
-    auto={false}
-    label="Choose a country"
-    placeholder="Elements is up to you..."
-    dataSource={countries}
-    value={selected}
-  />
-)
+  handleSimpleChange = (value) => {
+    this.setState({simple: value});
+  };
+
+  handleMultipleChange = (value) => {
+    this.setState({multiple: value});
+  };
+
+  render () {
+    return (
+      <div>
+        <Autocomplete
+          direction="down"
+          onChange={this.handleMultipleChange}
+          label="Choose countries"
+          source={countriesObject}
+          value={this.state.multiple}
+        />
+
+        <Autocomplete
+          direction="down"
+          label="Choose a country"
+          hint="You can only choose one..."
+          multiple={false}
+          onChange={this.handleSimpleChange}
+          source={countriesArray}
+          value={this.state.simple}
+        />
+      </div>
+    );
+  }
+}
 
 return <AutocompleteTest />
diff --git a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
new file mode 100644
index 000000000..294c9c41d
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
@@ -0,0 +1,17 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const AvatarTest = () => (
+  <div>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />}/>
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+  </div>
+);
+
+return <AvatarTest />
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index 60db342d6..a550584aa 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -1,10 +1,24 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const ButtonsTest = () => (
   <div>
-    <Button label="Flat button" />
-    <Button kind="raised" label="Raised" />
-    <Button kind="raised" label="Raised accent" accent icon="favorite" />
-    <Button className="primary" kind="floating" icon="add" />
-    <Button mini kind="floating" icon="add" accent />
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
+    </Button>
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating accent mini />
+    <IconButton icon='favorite' accent />
+    <IconButton icon={<GithubIcon />} accent />
+    <IconButton primary><GithubIcon /></IconButton>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
   </div>
 );
 
diff --git a/docs/app/components/layout/main/modules/examples/card_example_1.txt b/docs/app/components/layout/main/modules/examples/card_example_1.txt
index 3238b889e..fe8cf7b46 100644
--- a/docs/app/components/layout/main/modules/examples/card_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/card_example_1.txt
@@ -1,17 +1,26 @@
-const actions = [
-  { label: 'Play', icon: 'play-arrow'},
-  { label: 'Close' }
-];
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card
-    image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
-    text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
-    title='Deerhunter'
-    subtitle='Fading Frontier'
-    color="rgba(0,0,0,.4)"
-    actions={actions}
-  />
+  <Card style={{width: '350px'}}>
+    <CardTitle
+      avatar="https://placeimg.com/80/80/animals"
+      title="Avatar style title"
+      subtitle="Subtitle here"
+    />
+    <CardMedia
+      aspectRatio="wide"
+      image="https://placeimg.com/800/450/nature"
+    />
+    <CardTitle
+      title="Title goes here"
+      subtitle="Subtitle here"
+    />
+    <CardText>{dummyText}</CardText>
+    <CardActions>
+      <Button label="Action 1" />
+      <Button label="Action 2" />
+    </CardActions>
+  </Card>
 );
 
 return <TestCards />;
diff --git a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
index 79190d386..8e22bcc53 100644
--- a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
@@ -1,9 +1,34 @@
-const TestCheckbox = () => (
-  <div>
-    <Checkbox label="Checked option" checked />
-    <Checkbox label="Unchecked option" />
-    <Checkbox label="Disabled checkbox" checked disabled />
-  </div>
-);
+class TestCheckbox extends React.Component {
+  state = {
+    check1: true,
+    check2: false
+  };
+
+  handleChange = (field, value) => {
+    this.setState({[field]: value});
+  };
+
+  render () {
+    return (
+      <div>
+        <Checkbox
+          checked={this.state.check1}
+          label="Checked option"
+          onChange={this.handleChange.bind(this, 'check1')}
+        />
+        <Checkbox
+          checked={this.state.check2}
+          label="Unchecked option"
+          onChange={this.handleChange.bind(this, 'check2')}
+        />
+        <Checkbox
+          checked
+          disabled
+          label="Disabled checkbox"
+        />
+      </div>
+    );
+  }
+}
 
 return <TestCheckbox />;
diff --git a/docs/app/components/layout/main/modules/examples/chip_example_1.txt b/docs/app/components/layout/main/modules/examples/chip_example_1.txt
new file mode 100644
index 000000000..1f36f335b
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/chip_example_1.txt
@@ -0,0 +1,47 @@
+class ChipTest extends React.Component {
+  state = {
+    deleted: false
+  };
+
+  handleDeleteClick = () => {
+    this.setState({
+      deleted: true
+    });
+  };
+
+  render () {
+    return (
+      <section>
+        <Chip>Example chip</Chip>
+        <Chip>
+          <span style={{textDecoration: 'line-through'}}>Standard</span>
+          <strong>Custom</strong> chip <small>(custom markup)</small>
+        </Chip>
+
+        {
+          this.state.deleted ? null : (
+            <Chip deletable onDeleteClick={this.handleDeleteClick}>
+              Deletable Chip
+            </Chip>
+          )
+        }
+
+        <Chip>
+          <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+          <span>Avatar Chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar title="A" /><span>Initial chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+          <span>Image contact chip</span>
+        </Chip>
+      </section>
+    );
+  }
+}
+
+return <ChipTest />
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index 018d1115d..eebe52316 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -1,7 +1,67 @@
-const selectedDate = new Date(1995, 11, 17);
+const datetime = new Date(2015, 10, 16);
+const min_datetime = new Date(new Date(datetime).setDate(8));
+const max_datetime = new Date(new Date(datetime).setDate(24));
+datetime.setHours(17);
+datetime.setMinutes(28);
 
-const DatePickerTest = () => (
-  <DatePicker value={selectedDate} />
-);
+const localeExample = {
+  months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+  monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+  weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+  weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+  weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+}
+
+class DatePickerTest extends React.Component {
+  state = {date2: datetime};
+
+  handleChange = (item, value) => {
+    this.setState({...this.state, [item]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <DatePicker
+          label='Birthdate'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='Locale (String) - Spanish'
+          locale='es'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+        />
+
+        <DatePicker
+          label='Locale (Object) - Basque'
+          locale={localeExample}
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+        />
+
+        <DatePicker
+          label='Expiration date'
+          minDate={min_datetime}
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='Formatted Date'
+          autoOk
+          inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
+          onChange={this.handleChange.bind(this, 'date3')}
+          value={this.state.date3}
+          sundayFirstDayOfWeek
+        />
+      </section>
+    );
+  }
+}
 
 return <DatePickerTest />;
diff --git a/docs/app/components/layout/main/modules/examples/dialog_example_1.txt b/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
index fb155a005..71fe73798 100644
--- a/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
@@ -1,22 +1,28 @@
 class DialogTest extends React.Component {
-  showDialog = () => {
-    this.refs.dialog.show();
+  state = {
+    active: false
   };
 
-  closeDialog = () => {
-    this.refs.dialog.hide();
-  };
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
+  }
 
   actions = [
-    { label: "Cancel", onClick: this.closeDialog },
-    { label: "Save", onClick: this.closeDialog }
+    { label: "Cancel", onClick: this.handleToggle },
+    { label: "Save", onClick: this.handleToggle }
   ];
 
   render () {
     return (
       <div>
-        <Button label='Show my dialog' onClick={this.showDialog} />
-        <Dialog ref='dialog' title='My awesome dialog' type='small' actions={this.actions}>
+        <Button label='Show my dialog' onClick={this.handleToggle} />
+        <Dialog
+          actions={this.actions}
+          active={this.state.active}
+          onEscKeyDown={this.handleToggle}
+          onOverlayClick={this.handleToggle}
+          title='My awesome dialog'
+        >
           <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </div>
diff --git a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
index af9b8fc54..1a0c95c44 100644
--- a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
@@ -1,13 +1,17 @@
 class DrawerTest extends React.Component {
-  handleClick = () => {
-    this.refs.drawer.show();
+  state = {
+    active: false
+  };
+
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
   };
 
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
-        <Drawer ref='drawer' hideable>
+        <Button raised accent label='Show Drawer' onClick={this.handleToggle} />
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
diff --git a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
index e3b394f1b..362720330 100644
--- a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
@@ -1,27 +1,55 @@
 class DropdownTest extends React.Component {
   state = {
-    selected: null
+    albumSelected: 3,
+    countrySelected: 'ES-es'
   };
 
   albums = [
     { value: 1, artist: 'Radiohead', album: 'In Rainbows', img: 'http://www.clasesdeperiodismo.com/wp-content/uploads/2012/02/radiohead-in-rainbows.png' },
     { value: 2, artist: 'QOTSA', album: 'Sons for the Deaf', img: 'http://static.musictoday.com/store/bands/93/product_large/MUDD6669.JPG' },
     { value: 3, artist: 'Kendrick Lamar', album: 'Good Kid Maad City', img: 'https://cdn.shopify.com/s/files/1/0131/9332/products/0bd4b1846ba3890f574810dbeddddf8c.500x500x1_grande.png?v=1425070323' },
-    { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg' }
+    { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg', disabled: true }
   ];
+  countries = [
+    { value: 'EN-gb', label: 'England' },
+    { value: 'ES-es', label: 'Spain'},
+    { value: 'TH-th', label: 'Thailand', disabled: true },
+    { value: 'EN-en', label: 'USA'}
+  ];
+
+  handleAlbumChange = (value) => {
+    this.setState({albumSelected: value});
+  };
+
+  handleCountryChange = (value) => {
+    this.setState({countrySelected: value});
+  };
 
   customItem (item) {
-    const style = {
-      width: 36,
-      height: 36,
-      backgroundColor: '#ccc',
-      marginRight: 8
+    const containerStyle = {
+      display: 'flex',
+      flexDirection: 'row'
+    };
+
+    const imageStyle = {
+      display: 'flex',
+      width: '32px',
+      height: '32px',
+      flexGrow: 0,
+      marginRight: '8px',
+      backgroundColor: '#ccc'
+    };
+
+    const contentStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 2
     };
 
     return (
-      <div data-flex="horizontal grow" data-flex-content="center">
-        <img src={item.img} data-flex-grow="min" style={style} />
-        <div data-flex-grow="max" data-flex="vertical" >
+      <div style={containerStyle}>
+        <img src={item.img} style={imageStyle}/>
+        <div style={contentStyle}>
           <strong>{item.artist}</strong>
           <small>{item.album}</small>
         </div>
@@ -31,16 +59,23 @@ class DropdownTest extends React.Component {
 
   render () {
     return (
-      <Dropdown
-        auto={false}
-        dataSource={this.albums}
-        label='Select your favorite album'
-        template={this.customItem}
-        value={this.state.selected}
-      />
+      <div>
+        <Dropdown
+          auto={false}
+          source={this.albums}
+          onChange={this.handleAlbumChange}
+          label='Select your favorite album'
+          template={this.customItem}
+          value={this.state.albumSelected}
+        />
+        <Dropdown
+          source={this.countries}
+          onChange={this.handleCountryChange}
+          value={this.state.countrySelected}
+        />
+      </div>
     );
   }
 }
 
 return <DropdownTest />;
-
diff --git a/docs/app/components/layout/main/modules/examples/example.txt b/docs/app/components/layout/main/modules/examples/example.txt
index 063ebcb05..b1eb90779 100644
--- a/docs/app/components/layout/main/modules/examples/example.txt
+++ b/docs/app/components/layout/main/modules/examples/example.txt
@@ -6,25 +6,25 @@
 // but loading new examples will smash your changes!
 
 class Welcome extends React.Component {
-  hideDialog = () => {
-    this.refs.dialog.hide();
+  state = {
+    active: false
   };
 
-  showDialog = () => {
-    this.refs.dialog.show();
-  };
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
+  }
 
   actions = [{
     label: 'Great!',
-    onClick: this.hideDialog
+    onClick: this.handleToggle
   }];
 
   render () {
     return (
       <section>
-        <Button label="Let's start!" onClick={this.showDialog} />
-        <Dialog ref="dialog" type="small" actions={this.actions} title="Welcome to React Toolbox">
-          <p>Enjoy Beautiful React Material Design Components!</p>
+        <Button label="Let's start!" onClick={this.handleToggle} />
+        <Dialog actions={this.actions} active={this.state.active} title='My awesome dialog' type="small">
+          <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </section>
     );
diff --git a/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt b/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
index b6dfc9e9e..ca44de5c3 100644
--- a/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
@@ -2,7 +2,8 @@ const FontIcons = () => (
   <span>
     <FontIcon value='add' />
     <FontIcon value='favorite' />
-    <FontIcon value='add-circle-outline' />
+    <FontIcon value='account_circle' />
+    <FontIcon>star</FontIcon>
   </span>
 );
 
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index f23b3cc7e..80cdde523 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,10 +1,24 @@
-const InputTest = () => (
-  <div>
-    <Input type='text' label='Your fullname' icon='account-box' value='Tony Stark' />
-    <Input type='tel' label='Telephone number' icon='phone' />
-    <Input type='email' label='Email address' icon='email' />
-    <Input type='text' label='Disabled field' disabled />
-  </div>
-);
+class InputTest extends React.Component {
+  state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
+
+  handleChange = (name, value) => {
+    this.setState({...this.state, [name]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
+        <Input type='text' hint='With Hint, no label' name='name' value={this.state.label} onChange={this.handleChange.bind(this, 'label')} maxLength={16} />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
+        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
+        <Input type='text' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
+      </section>
+    );
+  }
+}
 
 return <InputTest />;
diff --git a/docs/app/components/layout/main/modules/examples/layout_example_1.txt b/docs/app/components/layout/main/modules/examples/layout_example_1.txt
new file mode 100644
index 000000000..77aa21e60
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/layout_example_1.txt
@@ -0,0 +1,50 @@
+class LayoutTest extends React.Component {
+    state = {
+        drawerActive: false,
+        drawerPinned: false,
+        sidebarPinned: false
+    };
+
+    toggleDrawerActive = () => {
+        this.setState({ drawerActive: !this.state.drawerActive });
+    };
+
+    toggleDrawerPinned = () => {
+        this.setState({ drawerPinned: !this.state.drawerPinned });
+    }
+
+    toggleSidebar = () => {
+        this.setState({ sidebarPinned: !this.state.sidebarPinned });
+    };
+
+    render() {
+        return (
+            <Layout>
+                <NavDrawer active={this.state.drawerActive}
+                    pinned={this.state.drawerPinned} permanentAt='xxxl'
+                    onOverlayClick={ this.toggleDrawerActive }>
+                    <p>
+                        Navigation, account switcher, etc. go here.
+                    </p>
+                </NavDrawer>
+                <Panel>
+                    <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
+                    <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
+                        <h1>Main Content</h1>
+                        <p>Main content goes here.</p>
+                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
+                        <Checkbox label='Show sidebar' checked={this.state.sidebarPinned} onChange={this.toggleSidebar} />
+                    </div>
+                </Panel>
+                <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
+                    <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
+                    <div style={{ flex: 1 }}>
+                        <p>Supplemental content goes here.</p>
+                    </div>
+                </Sidebar>
+            </Layout>
+        );
+    }
+}
+
+return <LayoutTest />;
diff --git a/docs/app/components/layout/main/modules/examples/link_example_1.txt b/docs/app/components/layout/main/modules/examples/link_example_1.txt
index 4b5af365f..aea0ef1cf 100644
--- a/docs/app/components/layout/main/modules/examples/link_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/link_example_1.txt
@@ -1,7 +1,7 @@
 const LinksTest = () => (
   <nav>
-    <Link href="#/components/link" label="Work" count={4} icon='business' />
-    <Link href="#/components/link" label="Blog" icon='speaker-notes' />
+    <Link active href="#/components/link" label="Work" count={4} icon='business' />
+    <Link href="#/components/link" label="Blog" icon='speaker_notes' />
     <Link href="#/components/link" label="Explore" icon='explore' />
   </nav>
 );
diff --git a/docs/app/components/layout/main/modules/examples/list_example_1.txt b/docs/app/components/layout/main/modules/examples/list_example_1.txt
index 31c5f4f53..1df5482bd 100644
--- a/docs/app/components/layout/main/modules/examples/list_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/list_example_1.txt
@@ -1,29 +1,48 @@
-const ListTest = () => (
-  <List selectable ripple>
-    <ListSubHeader caption='Explore characters' />
-    <ListItem
-      avatar='https://dl.dropboxusercontent.com/u/2247264/assets/m.jpg'
-      caption='Dr. Manhattan'
-      legend="Jonathan 'Jon' Osterman"
-      rightIcon='star'
-    />
-    <ListItem
-      avatar='https://dl.dropboxusercontent.com/u/2247264/assets/o.jpg'
-      caption='Ozymandias'
-      legend='Adrian Veidt'
-      rightIcon='star'
-    />
-    <ListItem
-      avatar='https://dl.dropboxusercontent.com/u/2247264/assets/r.jpg'
-      caption='Rorschach'
-      legend='Walter Joseph Kovacs'
-      rightIcon='star'
-    />
-    <ListSubHeader caption='Configuration' />
-    <ListCheckbox checked caption='Notify new comics' legend='You will receive a notification when a new one is published' />
-    <ListItem caption='Contact the publisher' leftIcon='send' />
-    <ListItem caption='Remove this publication' leftIcon='delete' />
-  </List>
-);
+class ListTest extends React.Component {
+  state = {
+    checkbox: false
+  };
+
+  handleCheckboxChange = () => {
+    this.setState({checkbox: !this.state.checkbox});
+  };
+
+  render () {
+    return (
+      <List selectable ripple>
+        <ListSubHeader caption='Explore characters' />
+        <ListItem
+          avatar='https://dl.dropboxusercontent.com/u/2247264/assets/m.jpg'
+          caption='Dr. Manhattan'
+          legend="Jonathan 'Jon' Osterman"
+          rightIcon='star'
+        />
+        <ListItem
+          avatar='https://dl.dropboxusercontent.com/u/2247264/assets/o.jpg'
+          caption='Ozymandias'
+          legend='Adrian Veidt'
+          rightIcon='star'
+        />
+        <ListItem
+          avatar='https://dl.dropboxusercontent.com/u/2247264/assets/r.jpg'
+          caption='Rorschach'
+          legend='Walter Joseph Kovacs'
+          rightIcon='star'
+        />
+        <ListSubHeader caption='Configuration' />
+        <ListCheckbox
+          caption='Notify new comics'
+          checked={this.state.checkbox}
+          legend='You will receive a notification when a new one is published'
+          onChange={this.handleCheckboxChange}
+        />
+        <ListDivider />
+        <ListItem caption='Contact the publisher' leftIcon='send' />
+        <ListItem caption='Remove this publication' leftIcon='delete' />
+      </List>
+    );
+  }
+
+}
 
 return <ListTest />;
diff --git a/docs/app/components/layout/main/modules/examples/menu_example_1.txt b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
index 6c8642502..b665da599 100644
--- a/docs/app/components/layout/main/modules/examples/menu_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
@@ -1,8 +1,8 @@
 const MenuTest = () => (
-  <IconMenu icon='more-vert' position='top-left' menuRipple selectable>
-    <MenuItem value='download' icon='get-app' caption='Download' />
+  <IconMenu icon='more_vert' position='topLeft' menuRipple>
+    <MenuItem value='download' icon='get_app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
-    <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
+    <MenuItem value='settings' icon='open_in_browser' caption='Open in app' />
     <MenuDivider />
     <MenuItem value='signout' icon='delete' caption='Delete' disabled />
   </IconMenu>
diff --git a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
index 7ac3efb27..c521db973 100644
--- a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
@@ -1,17 +1,15 @@
-const links = [
-  { href: '#/components/navigation', icon: 'person', label: 'Profile' },
-    { href: '#/components/navigation', icon: 'inbox', label: 'Inbox'}
-];
-
 const actions = [
-  { label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
-  { label: 'Location', kind: 'raised', accent: true, icon: 'room'}
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
   <div>
     <Navigation type='horizontal' actions={actions} />
-    <Navigation type='horizontal' routes={links} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </div>
 );
 
diff --git a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
index 0ed4e9fa9..c5fe1807c 100644
--- a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
@@ -43,6 +43,8 @@ class ProgressBarTest extends React.Component {
         <ProgressBar mode='indeterminate'/>
         <p style={{margin: '5px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate' multicolor />
+        <p style={{margin: '5px auto'}}>Disabled</p>
+        <ProgressBar disabled mode='determinate' value={57} min={0} max={100}/>
       </section>
     );
   }
diff --git a/docs/app/components/layout/main/modules/examples/radio_example_1.txt b/docs/app/components/layout/main/modules/examples/radio_example_1.txt
index 8491bd0ea..10713f79a 100644
--- a/docs/app/components/layout/main/modules/examples/radio_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/radio_example_1.txt
@@ -1,10 +1,22 @@
-const RadioTest = () => (
-  <RadioGroup name='comic' value='vvendetta'>
-    <RadioButton label='The Walking Dead' value='thewalkingdead'/>
-    <RadioButton label='From Hell' value='fromhell' disabled/>
-    <RadioButton label='V for a Vendetta' value='vvendetta'/>
-    <RadioButton label='Watchmen' value='watchmen'/>
-  </RadioGroup>
-);
+class RadioTest extends React.Component {
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    this.setState({value});
+  };
+
+  render () {
+    return (
+      <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
+        <RadioButton label='The Walking Dead' value='thewalkingdead'/>
+        <RadioButton label='From Hell' value='fromhell' disabled/>
+        <RadioButton label='V for a Vendetta' value='vvendetta'/>
+        <RadioButton label='Watchmen' value='watchmen'/>
+      </RadioGroup>
+    );
+  }
+}
 
 return <RadioTest />;
diff --git a/docs/app/components/layout/main/modules/examples/ripple_example_1.txt b/docs/app/components/layout/main/modules/examples/ripple_example_1.txt
new file mode 100644
index 000000000..4fb40987d
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/ripple_example_1.txt
@@ -0,0 +1,10 @@
+const CustomLink = (props) => (
+  <a {...props} style={{position: 'relative'}}>
+    {props.children}
+  </a>
+);
+
+const RippleLink = Ripple({spread: 3})(CustomLink);
+const RippleTest = () => <RippleLink>Test</RippleLink>;
+
+return <RippleTest />;
diff --git a/docs/app/components/layout/main/modules/examples/slider_example_1.txt b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
index 8189862f1..0803c7b0e 100644
--- a/docs/app/components/layout/main/modules/examples/slider_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
@@ -1,12 +1,30 @@
-const SliderTest = () => (
-  <section>
-    <p>Default slider</p>
-    <Slider />
-    <p>With steps, initial value and editable</p>
-    <Slider value={5} min={0} max={10} editable />
-    <p>Pinned and with snaps</p>
-    <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
-  </section>
-);
+class SliderTest extends React.Component {
+  state = {
+    slider2: 5,
+    slider3: 1,
+    slider4: 3
+  };
+
+  handleChange = (slider, value) => {
+    const newState = {};
+    newState[slider] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <p>Normal slider</p>
+        <Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
+        <p>With steps, initial value and editable</p>
+        <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
+        <p>Pinned and with snaps</p>
+        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
+      </section>
+    );
+  }
+}
 
 return <SliderTest />;
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index e3751ec37..b996ed0b9 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -1,24 +1,35 @@
 class SnackbarTest extends React.Component {
+  handleSnackbarClick = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
+  handleSnackbarTimeout = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
   handleClick = () => {
-    this.refs.snackbar.show();
+    this.setState({ active: true });
   };
 
-  handleSnackbarClick = () => {
-    this.refs.snackbar.hide();
+  state = {
+    active: false
   };
 
   render () {
     return (
       <section>
-        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' raised primary onClick={this.handleClick} />
         <Snackbar
-          action='http://github.com/Nice'
-          icon='question-answer'
-          label='A new developer started using React Toolbox'
+          action='http://github.com/Dismiss'
+          active={this.state.active}
+          label='Snackbar action cancel'
+          timeout={2000}
           onClick={this.handleSnackbarClick}
-          ref='snackbar'
-          type='accept'
-      />
+          onTimeout={this.handleSnackbarTimeout}
+          type='cancel'
+        />
       </section>
     );
   }
diff --git a/docs/app/components/layout/main/modules/examples/switch_example_1.txt b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
index cb4f535b5..5f7126fcf 100644
--- a/docs/app/components/layout/main/modules/examples/switch_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
@@ -1,9 +1,36 @@
-const SwitchTest = () => (
-  <fieldset>
-    <Switch label="Push notifications" />
-    <Switch checked label="Mail notifications" />
-    <Switch disabled label="Nothing, thanks"/>
-  </fieldset>
-);
+class SwitchTest extends React.Component {
+  state = {
+    switch_1: true,
+    switch_2: false,
+    switch_3: true
+  };
+
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <Switch
+          checked={this.state.switch_1}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 'switch_1')}
+        />
+        <Switch
+          checked={this.state.switch_2}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 'switch_2')}
+        />
+        <Switch
+          checked={this.state.switch_3}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 'switch_3')}
+        />
+      </section>
+    );
+  }
+}
 
 return <SwitchTest />;
diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
index 00f1b39f5..f2aee1442 100644
--- a/docs/app/components/layout/main/modules/examples/table_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -1,29 +1,43 @@
 const UserModel = {
-  name: {type: String}
-,
-  twitter: {type: String}
-,
-  birthdate: {type: Date}
-,
-  cats: {type: Number}
-,
-  dogs: {type: Number}
-,
+  name: {type: String},
+  twitter: {type: String},
+  birthdate: {type: Date},
+  cats: {type: Number},
+  dogs: {type: Number},
   active: {type: Boolean}
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1}
-,
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
-const handleSelect = (event, row, instance) => {
-  alert(row.twitter);
-};
+class TableTest extends React.Component {
+  state = { selected: [], source: users };
+
+  handleChange = (row, key, value) => {
+    const source = this.state.source;
+    source[row][key] = value;
+    this.setState({source});
+  };
+
+  handleSelect = (selected) => {
+    this.setState({selected});
+  };
 
-const TableTest = () => (
-  <Table model={UserModel} dataSource={users} onSelect={handleSelect} />
-)
+  render () {
+    return (
+      <Table
+        model={UserModel}
+        onChange={this.handleChange}
+        onSelect={this.handleSelect}
+        selectable
+        multiSelectable
+        selected={this.state.selected}
+        source={this.state.source}
+      />
+    );
+  }
+}
 
 return <TableTest />
diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
index 843739833..b01e15c5e 100644
--- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
@@ -1,11 +1,52 @@
-const TabsExample = () => (
-  <Tabs>
-    <Tab label='Primary'><small>Primary content</small></Tab>
-    <Tab label='Secondary'><small>Secondary content</small></Tab>
-    <Tab label='Third' disabled><small>Disabled content</small></Tab>
-    <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-    <Tab label='Fifth'><small>Fifth content</small></Tab>
-  </Tabs>
-);
+class TabsExample extends React.Component {
+  state = {
+    index: 1,
+    fixedIndex: 1,
+    inverseIndex: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  handleFixedTabChange = (index) => {
+    this.setState({fixedIndex: index});
+  };
+
+  handleInverseTabChange = (index) => {
+    this.setState({inverseIndex: index});
+  };
+
+  handleActive = () => {
+    console.log('Special one activated');
+  };
+
+  render () {
+    return (
+      <section>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+        <h5>Fixed Tabs</h5>
+        <Tabs index={this.state.fixedIndex} onChange={this.handleFixedTabChange} fixed>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+          <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 
 return <TabsExample />;
diff --git a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
index 599fd668b..3017b481a 100644
--- a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
@@ -1,9 +1,17 @@
-let selectedTime = new Date();
-selectedTime.setHours(17);
-selectedTime.setMinutes(28);
+let time = new Date();
+time.setHours(17);
+time.setMinutes(28);
 
-const TimePickerTest = () => (
-  <TimePicker value={selectedTime} />
-);
+class TimePickerTest extends React.Component {
+	state = {time};
+
+  handleChange = (time) => {
+  	this.setState({time});
+  };
+
+  render () {
+  	return <TimePicker label='Finishing time' onChange={this.handleChange} value={this.state.time} />;
+  }
+}
 
 return <TimePickerTest />
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index 80d1277f1..abc2fde09 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,10 +1,13 @@
+const TooltipButton = Tooltip(Button);
+const TooltipInput = Tooltip(Input);
+const TooltipLink = Tooltip(Link);
+
 const TooltipTest = () => (
   <div>
-    <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
-    </p>
-    
-    <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
+    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipLink count={42} href="#" label="The answer is" icon='speaker_notes' tooltip='Question - universe?'/>
+    <TooltipInput tooltip='lorem ipsum...' />
   </div>
 );
 
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 42c11ffd8..764d0e50a 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -2,6 +2,11 @@
 @import "http://github.com/~react-toolbox/app_bar/config";
 @import "http://github.com/~react-toolbox/button/config";
 
+hr {
+  margin: 4rem 0;
+  border-top: 1px solid $color-divider;
+}
+
 .appbar {
   padding-right: 8 * $unit;
 }
@@ -10,7 +15,7 @@
   position: fixed;
   top: $appbar-height - ($button-floating-height / 2);
   right: $button-floating-height / 2;
-  z-index: $z-index-higher;
+  z-index: $z-index-highest;
 }
 
 .documentation {
@@ -19,7 +24,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  transition: all $animation-duration $animation-curve-default;
+  z-index: $z-index-normal;
+  transition: padding $animation-duration $animation-curve-default;
 }
 
 .navigation {
@@ -29,24 +35,25 @@
   left: 0;
   z-index: $z-index-high;
   box-shadow: $documentation-left-shadow;
-  transition: all $animation-duration $animation-curve-default;
+  transition: transform $animation-duration $animation-curve-default;
 }
 
 .playground {
   position: fixed;
   top: $appbar-height;
+  right: 0;
   bottom: 0;
   z-index: $z-index-high;
   width: $playground-width;
   background: $color-background;
   box-shadow: $documentation-right-shadow;
-  transition: right $animation-duration $animation-curve-default;
+  transition: transform $animation-duration $animation-curve-default;
 }
 
 .root {
   &:not(.with-playground) {
     > .playground {
-      right: - ($playground-width * 1.1);
+      transform: translateX(100%);
     }
     > .documentation {
       padding-right: 0;
@@ -58,7 +65,7 @@
   }
   &.with-playground {
     > .playground {
-      right: 0;
+      transform: translateY(0);
     }
     > .documentation {
       padding-right: $playground-width;
@@ -73,3 +80,20 @@
 .load-button {
   display: inline-block;
 }
+
+@media(min-width: $media-min-width) {
+  .root {
+    .playground {
+      width: $playground-max-width;
+    }
+    &.with-playground {
+      > .documentation {
+        padding-right: $playground-max-width;
+        padding-left: $navigation-width;
+      }
+      > .navigation {
+        transform: translateX(0);
+      }
+    }
+  }
+}
diff --git a/docs/app/components/logo/index.jsx b/docs/app/components/logo/index.js
similarity index 98%
rename from docs/app/components/logo/index.jsx
rename to docs/app/components/logo/index.js
index 8bbbbc353..58007acd5 100644
--- a/docs/app/components/logo/index.jsx
+++ b/docs/app/components/logo/index.js
@@ -8,8 +8,8 @@ const Logo = (props) => {
   return (
     <svg className={className} viewBox="0 0 144 131">
       <g>
-        <path d="M118.954,87.235 C117.784,80.465 115.755,73.277 112.881,65.938 C115.756,58.592 117.784,51.398 118.952,44.624 C130.693,50.324 137.999,57.982 138,65.909 C138,73.901 130.708,81.552 118.954,87.235 L118.954,87.235 Z M105,123.11 C102.829,124.364 100.281,125 97.428,125 C91.361,125 84.259,122.231 76.981,117.308 C82.313,112.871 87.579,107.457 92.545,101.223 C100.313,100.042 107.527,98.206 113.955,95.844 C114.897,108.916 111.902,119.125 105,123.11 L105,123.11 Z M46.568,124.997 C43.717,124.997 41.171,124.362 39.001,123.108 C32.104,119.127 29.109,108.918 30.052,95.846 C36.472,98.205 43.677,100.037 51.435,101.218 C56.402,107.454 61.671,112.871 67.005,117.309 C59.731,122.23 52.633,124.997 46.568,124.997 L46.568,124.997 Z M6,65.909 C6,57.957 13.296,50.305 25.036,44.612 C26.204,51.397 28.236,58.604 31.117,65.963 C28.25,73.288 26.224,80.464 25.055,87.221 C13.301,81.532 6,73.877 6,65.909 L6,65.909 Z M46.881,37.496 C34.717,58.616 46.806,37.626 34.785,58.498 C32.879,52.829 31.528,47.322 30.729,42.143 C35.601,40.255 41.033,38.677 46.881,37.496 L46.881,37.496 Z M72.005,18.28 C76.117,21.584 80.221,25.531 84.168,30.008 C60.223,29.96 84.478,30.009 59.886,29.959 C63.82,25.502 67.909,21.571 72.005,18.28 L72.005,18.28 Z M109.214,58.468 C97.071,37.445 109.179,58.408 97.101,37.496 C102.949,38.678 108.383,40.259 113.26,42.152 C112.461,47.319 111.113,52.813 109.214,58.468 L109.214,58.468 Z M109.235,73.475 C111.119,79.096 112.457,84.56 113.251,89.702 C108.396,91.576 102.987,93.144 97.16,94.319 C109.053,73.79 96.994,94.605 109.235,73.475 L109.235,73.475 Z M34.764,73.5 C47.04,94.67 34.992,73.892 46.834,94.313 C41.014,93.136 35.61,91.567 30.758,89.691 C31.551,84.56 32.886,79.107 34.764,73.5 L34.764,73.5 Z M84.108,101.947 C80.175,106.402 76.088,110.332 71.993,113.623 C67.883,110.321 63.78,106.375 59.835,101.902 C83.777,101.946 59.54,101.901 84.108,101.947 L84.108,101.947 Z M86.649,95.951 L71.75,95.924 L56.853,95.896 C56.122,95.812 55.399,95.718 54.677,95.622 C54.474,95.357 54.27,95.096 54.068,94.829 L38.235,67.525 C38.011,67.004 37.8,66.484 37.584,65.963 C37.731,65.609 37.871,65.255 38.022,64.9 L53.936,37.268 C54.21,36.903 54.487,36.545 54.764,36.185 C55.365,36.105 55.965,36.024 56.572,35.953 L72.262,35.984 L87.951,36.016 C88.387,36.069 88.816,36.131 89.248,36.188 C89.475,36.483 89.702,36.775 89.927,37.073 L105.949,64.813 C106.109,65.189 106.259,65.564 106.414,65.939 C106.2,66.457 105.989,66.975 105.766,67.494 L89.983,94.737 C89.757,95.038 89.529,95.331 89.301,95.628 C88.424,95.744 87.54,95.853 86.649,95.951 L86.649,95.951 Z M144,65.909 C143.999,54.951 134.647,45.112 119.808,38.364 C121.377,22.123 117.514,9.088 108.001,3.596 C104.843,1.774 101.279,0.905 97.437,0.905 L97.438,6.905 C100.286,6.905 102.831,7.54 105.001,8.793 C111.904,12.778 114.898,22.945 113.965,35.978 C107.519,33.608 100.279,31.77 92.485,30.588 C87.54,24.392 82.299,19.008 76.992,14.593 C84.266,9.672 91.365,6.906 97.435,6.905 L97.437,0.905 L97.434,0.905 C89.71,0.906 80.873,4.42 72.008,10.742 C63.141,4.418 54.301,0.904 46.573,0.904 L46.573,6.904 C52.639,6.904 59.74,9.672 67.017,14.594 C61.711,19.009 56.47,24.391 51.525,30.586 C43.724,31.768 36.477,33.608 30.026,35.981 C29.095,22.949 32.093,12.782 39,8.794 C41.172,7.54 43.72,6.904 46.573,6.904 L46.573,0.904 C42.729,0.904 39.16,1.773 36,3.597 C26.486,9.091 22.619,22.126 24.184,38.366 C9.349,45.114 0,54.953 0,65.909 C0,76.869 9.357,86.709 24.202,93.457 C22.615,109.734 26.472,122.804 36.001,128.304 C39.16,130.128 42.725,130.997 46.568,130.997 C54.292,130.997 63.128,127.484 71.992,121.162 C80.859,127.486 89.7,131 97.428,131 C101.271,131 104.84,130.131 108,128.306 C117.53,122.803 121.391,109.73 119.804,93.451 C134.643,86.702 144,76.866 144,65.909 L144,65.909 Z"></path>
-        <path d="M71.5482968,65.9688173 C69.154234,70.0775221 66.7769144,74.1965782 64.47,78.356 C63.271,80.497 62.097,82.654 60.931,84.815 C59.794,86.993 58.615,89.146 57.518,91.348 C58.905,89.316 60.21,87.237 61.558,85.183 C62.876,83.111 64.187,81.035 65.472,78.944 C67.9377029,74.9691498 70.3353266,70.9543598 72.7167607,66.929899 L99.741,65.952 L72.7137677,64.9739927 C70.3372065,60.9888441 67.9401733,57.0159615 65.476,53.083 C64.19,51.014 62.88,48.96 61.562,46.909 C60.212,44.879 58.907,42.821 57.518,40.813 C58.613,42.995 59.792,45.128 60.926,47.286 C62.093,49.426 63.268,51.561 64.466,53.682 C66.7739163,57.7980908 69.150305,61.8738486 71.5470195,65.9374346 L71.5387573,65.952 L71.5482968,65.9688173 Z M56.341,93.07 L40.684,65.952 L56.344,38.834 L87.657,38.831 L103.315,65.952 L87.659,93.073 L56.341,93.07 Z"></path>
+        <path d="M118.954,87.235 C117.784,80.465 115.755,73.277 112.881,65.938 C115.756,58.592 117.784,51.398 118.952,44.624 C130.693,50.324 137.999,57.982 138,65.909 C138,73.901 130.708,81.552 118.954,87.235 L118.954,87.235 Z M105,123.11 C102.829,124.364 100.281,125 97.428,125 C91.361,125 84.259,122.231 76.981,117.308 C82.313,112.871 87.579,107.457 92.545,101.223 C100.313,100.042 107.527,98.206 113.955,95.844 C114.897,108.916 111.902,119.125 105,123.11 L105,123.11 Z M46.568,124.997 C43.717,124.997 41.171,124.362 39.001,123.108 C32.104,119.127 29.109,108.918 30.052,95.846 C36.472,98.205 43.677,100.037 51.435,101.218 C56.402,107.454 61.671,112.871 67.005,117.309 C59.731,122.23 52.633,124.997 46.568,124.997 L46.568,124.997 Z M6,65.909 C6,57.957 13.296,50.305 25.036,44.612 C26.204,51.397 28.236,58.604 31.117,65.963 C28.25,73.288 26.224,80.464 25.055,87.221 C13.301,81.532 6,73.877 6,65.909 L6,65.909 Z M46.881,37.496 C34.717,58.616 46.806,37.626 34.785,58.498 C32.879,52.829 31.528,47.322 30.729,42.143 C35.601,40.255 41.033,38.677 46.881,37.496 L46.881,37.496 Z M72.005,18.28 C76.117,21.584 80.221,25.531 84.168,30.008 C60.223,29.96 84.478,30.009 59.886,29.959 C63.82,25.502 67.909,21.571 72.005,18.28 L72.005,18.28 Z M109.214,58.468 C97.071,37.445 109.179,58.408 97.101,37.496 C102.949,38.678 108.383,40.259 113.26,42.152 C112.461,47.319 111.113,52.813 109.214,58.468 L109.214,58.468 Z M109.235,73.475 C111.119,79.096 112.457,84.56 113.251,89.702 C108.396,91.576 102.987,93.144 97.16,94.319 C109.053,73.79 96.994,94.605 109.235,73.475 L109.235,73.475 Z M34.764,73.5 C47.04,94.67 34.992,73.892 46.834,94.313 C41.014,93.136 35.61,91.567 30.758,89.691 C31.551,84.56 32.886,79.107 34.764,73.5 L34.764,73.5 Z M84.108,101.947 C80.175,106.402 76.088,110.332 71.993,113.623 C67.883,110.321 63.78,106.375 59.835,101.902 C83.777,101.946 59.54,101.901 84.108,101.947 L84.108,101.947 Z M86.649,95.951 L71.75,95.924 L56.853,95.896 C56.122,95.812 55.399,95.718 54.677,95.622 C54.474,95.357 54.27,95.096 54.068,94.829 L38.235,67.525 C38.011,67.004 37.8,66.484 37.584,65.963 C37.731,65.609 37.871,65.255 38.022,64.9 L53.936,37.268 C54.21,36.903 54.487,36.545 54.764,36.185 C55.365,36.105 55.965,36.024 56.572,35.953 L72.262,35.984 L87.951,36.016 C88.387,36.069 88.816,36.131 89.248,36.188 C89.475,36.483 89.702,36.775 89.927,37.073 L105.949,64.813 C106.109,65.189 106.259,65.564 106.414,65.939 C106.2,66.457 105.989,66.975 105.766,67.494 L89.983,94.737 C89.757,95.038 89.529,95.331 89.301,95.628 C88.424,95.744 87.54,95.853 86.649,95.951 L86.649,95.951 Z M144,65.909 C143.999,54.951 134.647,45.112 119.808,38.364 C121.377,22.123 117.514,9.088 108.001,3.596 C104.843,1.774 101.279,0.905 97.437,0.905 L97.438,6.905 C100.286,6.905 102.831,7.54 105.001,8.793 C111.904,12.778 114.898,22.945 113.965,35.978 C107.519,33.608 100.279,31.77 92.485,30.588 C87.54,24.392 82.299,19.008 76.992,14.593 C84.266,9.672 91.365,6.906 97.435,6.905 L97.437,0.905 L97.434,0.905 C89.71,0.906 80.873,4.42 72.008,10.742 C63.141,4.418 54.301,0.904 46.573,0.904 L46.573,6.904 C52.639,6.904 59.74,9.672 67.017,14.594 C61.711,19.009 56.47,24.391 51.525,30.586 C43.724,31.768 36.477,33.608 30.026,35.981 C29.095,22.949 32.093,12.782 39,8.794 C41.172,7.54 43.72,6.904 46.573,6.904 L46.573,0.904 C42.729,0.904 39.16,1.773 36,3.597 C26.486,9.091 22.619,22.126 24.184,38.366 C9.349,45.114 0,54.953 0,65.909 C0,76.869 9.357,86.709 24.202,93.457 C22.615,109.734 26.472,122.804 36.001,128.304 C39.16,130.128 42.725,130.997 46.568,130.997 C54.292,130.997 63.128,127.484 71.992,121.162 C80.859,127.486 89.7,131 97.428,131 C101.271,131 104.84,130.131 108,128.306 C117.53,122.803 121.391,109.73 119.804,93.451 C134.643,86.702 144,76.866 144,65.909 L144,65.909 Z"/>
+        <path d="M71.5482968,65.9688173 C69.154234,70.0775221 66.7769144,74.1965782 64.47,78.356 C63.271,80.497 62.097,82.654 60.931,84.815 C59.794,86.993 58.615,89.146 57.518,91.348 C58.905,89.316 60.21,87.237 61.558,85.183 C62.876,83.111 64.187,81.035 65.472,78.944 C67.9377029,74.9691498 70.3353266,70.9543598 72.7167607,66.929899 L99.741,65.952 L72.7137677,64.9739927 C70.3372065,60.9888441 67.9401733,57.0159615 65.476,53.083 C64.19,51.014 62.88,48.96 61.562,46.909 C60.212,44.879 58.907,42.821 57.518,40.813 C58.613,42.995 59.792,45.128 60.926,47.286 C62.093,49.426 63.268,51.561 64.466,53.682 C66.7739163,57.7980908 69.150305,61.8738486 71.5470195,65.9374346 L71.5387573,65.952 L71.5482968,65.9688173 Z M56.341,93.07 L40.684,65.952 L56.344,38.834 L87.657,38.831 L103.315,65.952 L87.659,93.073 L56.341,93.07 Z"/>
       </g>
     </svg>
   );
diff --git a/docs/app/components/markdown/index.jsx b/docs/app/components/markdown/index.js
similarity index 100%
rename from docs/app/components/markdown/index.jsx
rename to docs/app/components/markdown/index.js
diff --git a/docs/app/components/markdown/style.scss b/docs/app/components/markdown/style.scss
index af4024290..14f503e1d 100644
--- a/docs/app/components/markdown/style.scss
+++ b/docs/app/components/markdown/style.scss
@@ -19,7 +19,7 @@ $documentation-table-font-size: 1.4 * $unit;
   max-height: 100%;
   flex-grow: 1;
   padding-bottom: 4 * $unit;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: $font-size-normal;
   color: $color-text;
   > *:not(pre) {
@@ -63,8 +63,9 @@ $documentation-table-font-size: 1.4 * $unit;
     text-align: left;
     > button {
       height: $documentation-playground-button-height;
-      > abbr {
-        font-size: $documentation-playground-button-font-size;
+      font-size: $documentation-playground-button-font-size;
+      line-height: $documentation-playground-button-height;
+      > span {
         line-height: $documentation-playground-button-height;
       }
     }
diff --git a/docs/app/components/navigation/index.jsx b/docs/app/components/navigation/index.js
similarity index 83%
rename from docs/app/components/navigation/index.jsx
rename to docs/app/components/navigation/index.js
index fc25581d3..63fb279ad 100644
--- a/docs/app/components/navigation/index.jsx
+++ b/docs/app/components/navigation/index.js
@@ -14,14 +14,14 @@ const Navigation = (props) => {
 };
 
 Navigation.propTypes = {
-  className: React.PropTypes.string,
-  activeClassName: React.PropTypes.string
+  activeClassName: React.PropTypes.string,
+  className: React.PropTypes.string
 };
 
 
 Navigation.defaultProps = {
-  className: '',
-  activeClassName: ''
+  activeClassName: '',
+  className: ''
 };
 
 export default Navigation;
diff --git a/docs/app/components/preview/index.jsx b/docs/app/components/preview/index.js
similarity index 79%
rename from docs/app/components/preview/index.jsx
rename to docs/app/components/preview/index.js
index d1badd056..e9b45aed9 100644
--- a/docs/app/components/preview/index.jsx
+++ b/docs/app/components/preview/index.js
@@ -1,7 +1,10 @@
+/*eslint-disable no-eval*/
 import React from 'react';
 import ReactDOM from 'react-dom';
-import babel from 'babel-core/browser';
-import ReactToolbox from 'react-toolbox';
+import { ThemeProvider } from 'react-css-themr';
+import { transform } from 'babel-standalone';
+import * as ReactToolbox from 'react-toolbox';
+import theme from '../../theme/theme.js';
 import style from './style';
 
 const ERROR_TIMEOUT = 500;
@@ -39,7 +42,7 @@ const Preview = React.createClass({
 
   setTimeout () {
     clearTimeout(this.timeoutID);
-    this.timeoutID = setTimeout.apply(null, arguments);
+    this.timeoutID = setTimeout(...arguments);
   },
 
   compileCode () {
@@ -47,8 +50,9 @@ const Preview = React.createClass({
       (function (${Object.keys(this.props.scope).join(', ')}, mountNode) {
         ${this.props.code}
       });`;
-    return babel.transform(code, {
-      optional: ['es7.classProperties']
+
+    return transform(code, {
+      presets: ['es2015', 'stage-0', 'react']
     }).code;
   },
 
@@ -69,11 +73,11 @@ const Preview = React.createClass({
     }
 
     try {
-      const compiledCode = this.compileCode();
-
-      /*eslint-disable no-eval*/
-      const Component = eval(compiledCode).apply(null, scope);
-      ReactDOM.render(Component, mountNode);
+      ReactDOM.render(
+        <ThemeProvider theme={theme}>
+          {eval(this.compileCode())(...scope)}
+        </ThemeProvider>
+      , mountNode);
       if (this.state.error) {
         this.setState({error: null});
       }
diff --git a/docs/app/index.js b/docs/app/index.js
new file mode 100644
index 000000000..1b5ecc877
--- /dev/null
+++ b/docs/app/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, useRouterHistory } from 'react-router';
+import createHashHistory from 'history/lib/createHashHistory';
+import Home from './components/layout/home';
+import Install from './components/layout/install';
+import Main from './components/layout/main';
+
+ReactDOM.render((
+  <Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
+    <Route path="/" component={Home} />
+    <Route path="/install" component={Install} />
+    <Route path="/components" component={Main}>
+      <Route path=":component" />
+    </Route>
+  </Router>
+), document.getElementById('app'));
diff --git a/docs/app/index.jsx b/docs/app/index.jsx
deleted file mode 100644
index 637bda104..000000000
--- a/docs/app/index.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute } from 'react-router';
-import { App } from 'react-toolbox';
-import { createHashHistory } from 'history';
-
-import Home from './components/layout/home';
-import Install from './components/layout/install';
-import Main from './components/layout/main';
-
-ReactDOM.render((
-  <Router history={createHashHistory({queryKey: false})}>
-    <Route component={App}>
-      <Route path="/" component={Home} />
-      <Route path="/install" component={Install} />
-      <Route path="/components" component={Main}>
-        <Route path=":component" />
-      </Route>
-      <IndexRoute component={Home}/>
-    </Route>
-  </Router>
-), document.getElementById('app'));
diff --git a/docs/theme.scss b/docs/app/theme/_theme.scss
similarity index 83%
rename from docs/theme.scss
rename to docs/app/theme/_theme.scss
index 4eef11c78..96be0e6ba 100644
--- a/docs/theme.scss
+++ b/docs/app/theme/_theme.scss
@@ -1,3 +1,5 @@
+@import "http://github.com/~react-toolbox/colors"; // Import minimal colors
+
 $color-primary: $palette-indigo-500;
 $color-primary-dark: $palette-indigo-700;
 $color-primary-light: $palette-indigo-500;
diff --git a/docs/app/theme/theme.js b/docs/app/theme/theme.js
new file mode 100644
index 000000000..68c3ea1c6
--- /dev/null
+++ b/docs/app/theme/theme.js
@@ -0,0 +1,61 @@
+import 'react-toolbox/commons';
+
+import ToolboxAppBar from 'react-toolbox/app_bar/theme.scss';
+import ToolboxAutocomplete from 'react-toolbox/autocomplete/theme.scss';
+import ToolboxAvatar from 'react-toolbox/avatar/theme.scss';
+import ToolboxButton from 'react-toolbox/button/theme.scss';
+import ToolboxCard from 'react-toolbox/card/theme.scss';
+import ToolboxCheckbox from 'react-toolbox/checkbox/theme.scss';
+import ToolboxChip from 'react-toolbox/chip/theme.scss';
+import ToolboxDatePicker from 'react-toolbox/date_picker/theme.scss';
+import ToolboxDialog from 'react-toolbox/dialog/theme.scss';
+import ToolboxDrawer from 'react-toolbox/drawer/theme.scss';
+import ToolboxDropdown from 'react-toolbox/dropdown/theme.scss';
+import ToolboxInput from 'react-toolbox/input/theme.scss';
+import ToolboxLayout from 'react-toolbox/layout/theme.scss';
+import ToolboxLink from 'react-toolbox/link/theme.scss';
+import ToolboxList from 'react-toolbox/list/theme.scss';
+import ToolboxMenu from 'react-toolbox/menu/theme.scss';
+import ToolboxNavigation from 'react-toolbox/navigation/theme.scss';
+import ToolboxOverlay from 'react-toolbox/overlay/theme.scss';
+import ToolboxProgress from 'react-toolbox/progress_bar/theme.scss';
+import ToolboxRadio from 'react-toolbox/radio/theme.scss';
+import ToolboxRipple from 'react-toolbox/ripple/theme.scss';
+import ToolboxSlider from 'react-toolbox/slider/theme.scss';
+import ToolboxSnackbar from 'react-toolbox/snackbar/theme.scss';
+import ToolboxSwitch from 'react-toolbox/switch/theme.scss';
+import ToolboxTable from 'react-toolbox/table/theme.scss';
+import ToolboxTabs from 'react-toolbox/tabs/theme.scss';
+import ToolboxTimePicker from 'react-toolbox/time_picker/theme.scss';
+import ToolboxTooltip from 'react-toolbox/tooltip/theme.scss';
+
+export default {
+  ToolboxAppBar,
+  ToolboxAutocomplete,
+  ToolboxAvatar,
+  ToolboxButton,
+  ToolboxCard,
+  ToolboxCheckbox,
+  ToolboxChip,
+  ToolboxDatePicker,
+  ToolboxDialog,
+  ToolboxDrawer,
+  ToolboxDropdown,
+  ToolboxInput,
+  ToolboxLayout,
+  ToolboxLink,
+  ToolboxList,
+  ToolboxMenu,
+  ToolboxNavigation,
+  ToolboxOverlay,
+  ToolboxProgress,
+  ToolboxRadio,
+  ToolboxRipple,
+  ToolboxSlider,
+  ToolboxSnackbar,
+  ToolboxSwitch,
+  ToolboxTable,
+  ToolboxTabs,
+  ToolboxTimePicker,
+  ToolboxTooltip
+};
diff --git a/docs/package.json b/docs/package.json
index 45b253e1a..cb6db1679 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,47 +4,52 @@
   "description": "Documentation for React Toolbox",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "scripts": {
-    "start": "node ./server",
+    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config.production --colors --profile --progress",
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
-    "codemirror": "^5.8.0",
-    "history": "^1.12.6",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "react-router": "^1.0.0-rc3"
+    "babel-standalone": "^6.7.7",
+    "classnames": "^2.2.5",
+    "codemirror": "^5.14.2",
+    "history": "^2.1.1",
+    "react": "^15.2.0",
+    "react-css-themr": "^1.2.0",
+    "react-dom": "^15.2.0",
+    "react-router": "^2.4.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-react-transform": "^1.1.1",
-    "cross-env": "^1.0.4",
-    "css-loader": "^0.21.0",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.8.2",
-    "gh-pages": "^0.5.0",
+    "autoprefixer": "^6.4.0",
+    "babel-core": "^6.13.2",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-preset-stage-2": "^6.13.0",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.26.1",
+    "express": "^4.13.4",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "gh-pages": "^0.12.0",
     "highlight-loader": "git://github.com/javivelasco/highlight-loader.git#master",
-    "highlight.js": "^8.9.1",
-    "html-loader": "^0.3.0",
-    "html-webpack-plugin": "^1.6.2",
+    "highlight.js": "^9.3.0",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.16.1",
     "markdown-loader": "^0.1.7",
-    "node-sass": "^3.3.3",
-    "postcss-loader": "^0.7.0",
+    "node-sass": "^3.7.0",
+    "postcss-loader": "^1.2.1",
     "raw-loader": "^0.5.1",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.1.1",
-    "sass-loader": "^3.0.0",
-    "style-loader": "^0.13.0",
-    "toolbox-loader": "0.0.2",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.2.4",
+    "sass-loader": "^4.0.0",
+    "style-loader": "^0.13.1",
     "transfer-webpack-plugin": "^0.1.4",
-    "webpack": "^1.12.0",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.4.1"
+    "webpack": "^1.13.0",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "repository": "github:react-toolbox/react-toolbox",
   "license": "MIT"
diff --git a/docs/server.js b/docs/server.js
index c355af21f..85eabda26 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -1,5 +1,3 @@
-process.env.UV_THREADPOOL_SIZE = 100;
-
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
@@ -9,6 +7,7 @@ const app = express();
 const compiler = webpack(config);
 
 app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
   publicPath: config.output.publicPath,
   stats: {
     colors: true
@@ -17,11 +16,11 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.get('*', (req, res) => {
+app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, './www/index.html'));
 });
 
-app.listen(8081, '0.0.0.0', (err) => {
+app.listen(8081, '0.0.0.0', function (err) {
   if (err) {
     console.log(err);
     return;
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index efc2907c5..7d4857f87 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -2,13 +2,14 @@ const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const TransferWebpackPlugin = require('transfer-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  devtool: 'inline-source-map',
+	devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
-    './app/index.jsx'
+    './app/index.js'
   ],
   output: {
     path: path.join(__dirname, 'build'),
@@ -16,7 +17,8 @@ module.exports = {
     publicPath: '/'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
+    extensions: ['', '.scss', '.js', '.json', '.md'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
     },
@@ -30,25 +32,32 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
+        test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
-        test: /(\.scss|\.css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
+        test: /\.(scss|css)$/,
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
       }, {
-        test: /(\.txt)$/,
+        test: /\.(txt)$/,
         loader: 'raw',
         include: path.resolve(__dirname, './app/components/layout/main/modules')
       }, {
-        test: /(\.md)$/,
+        test: /\.(md)$/,
         loader: 'html!highlight!markdown'
       }
     ]
   },
   postcss: [autoprefixer],
+  sassLoader: {
+    data: '@import "' + path.resolve(__dirname, 'app/theme/_theme.scss') + '";'
+  },
   plugins: [
     new ExtractTextPlugin('docs.css', { allChunks: true }),
+    new TransferWebpackPlugin([{
+      from: 'www/images',
+      to: 'images'
+    }], path.resolve(__dirname, './')),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({
diff --git a/docs/webpack.config.production.js b/docs/webpack.config.production.js
index 4ecbc7826..1eda47694 100644
--- a/docs/webpack.config.production.js
+++ b/docs/webpack.config.production.js
@@ -7,13 +7,14 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  entry: ['./app/index.jsx'],
+  entry: ['./app/index.js'],
   output: {
     path: path.join(__dirname, 'build'),
     filename: 'docs.js'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
+    extensions: ['', '.scss', '.js', '.json', '.md'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
     },
@@ -27,23 +28,26 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
+        test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
-        test: /(\.scss|\.css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass!toolbox')
+        test: /\.(scss|css)$/,
+        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
       }, {
-        test: /(\.txt)$/,
+        test: /\.(txt)$/,
         loader: 'raw',
         include: path.resolve(__dirname, './app/components/layout/main/modules')
       }, {
-        test: /(\.md)$/,
+        test: /\.(md)$/,
         loader: 'html?removeComments=false!highlight!markdown'
       }
     ]
   },
   postcss: [autoprefixer],
+  sassLoader: {
+    data: '@import "' + path.resolve(__dirname, 'app/theme/_theme.scss') + '";'
+  },
   plugins: [
     new ExtractTextPlugin('docs.css', { allChunks: true }),
     new webpack.optimize.UglifyJsPlugin({
diff --git a/docs/www/index.html b/docs/www/index.html
index 29b5b8fad..a875ef4b5 100644
--- a/docs/www/index.html
+++ b/docs/www/index.html
@@ -27,6 +27,8 @@
     <meta name="og:type" content="app">
 
     <link rel="canonical" href="http://www.react-toolbox.com/">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="http://github.com/docs.css">
   </head>
 
diff --git a/docs/yarn.lock b/docs/yarn.lock
new file mode 100644
index 000000000..cadbef018
--- /dev/null
+++ b/docs/yarn.lock
@@ -0,0 +1,4292 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+CSSselect@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
+  dependencies:
+    CSSwhat "0.4"
+    domutils "1.4"
+
+CSSwhat@0.4:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/CSSwhat/-/CSSwhat-0.4.7.tgz#867da0ff39f778613242c44cfea83f0aa4ebdf9b"
+
+abbrev@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
+amdefine@>=0.0.4:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.0.tgz#fd17474700cb5cc9c2b709f0be9d23ce3c198c33"
+
+ansi-html@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.6.tgz#bda8e33dd2ee1c20f54c08eb405713cbfc0ed80e"
+
+ansi-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+anymatch@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+aproba@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.0 || ^1.1.13"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-index@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-index/-/array-index-1.0.0.tgz#ec56a749ee103e4e08c790b9c353df16055b97f9"
+  dependencies:
+    debug "^2.2.0"
+    es6-symbol "^3.0.2"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+assert-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
+assert@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+ast-types@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.0.tgz#c8721c8747ae4d5b29b929e99c5317b4e8745623"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async@2.1.2, async@^2.0.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0, async@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+autoprefixer@^6.3.1, autoprefixer@^6.4.0:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
+  dependencies:
+    browserslist "~1.4.0"
+    caniuse-db "^1.0.30000597"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.6"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^2.0.0"
+
+babel-core@^6.13.2, babel-core@^6.18.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.21.0.tgz#75525480c21c803f826ef3867d22c19f080a3724"
+  dependencies:
+    babel-code-frame "^6.20.0"
+    babel-generator "^6.21.0"
+    babel-helpers "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.20.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.21.0"
+    babel-types "^6.21.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-eslint@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-traverse "^6.15.0"
+    babel-types "^6.15.0"
+    babylon "^6.13.0"
+    lodash.pickby "^4.6.0"
+
+babel-generator@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.21.0.tgz#605f1269c489a1c75deeca7ea16d43d4656c8494"
+  dependencies:
+    babel-messages "^6.8.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+
+babel-helper-bindify-decorators@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.18.0.tgz#fc00c573676a6e702fffa00019580892ec8780a5"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.18.0.tgz#8ae814989f7a53682152e3401a04fabd0bb333a6"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-react-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.18.0.tgz#ab02f19a2eb7ace936dd87fa55896d02be59bf71"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    esutils "^2.0.0"
+    lodash "^4.2.0"
+
+babel-helper-call-delegate@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.18.0.tgz#05b14aafa430884b034097ef29e9f067ea4133bd"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-define-map@^6.18.0, babel-helper-define-map@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.18.0.tgz#8d6c85dc7fbb4c19be3de40474d18e97c3676ec2"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-explode-assignable-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.18.0.tgz#14b8e8c2d03ad735d4b20f1840b24cd1f65239fe"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-explode-class@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.18.0.tgz#c44f76f4fa23b9c5d607cbac5d4115e7a76f62cb"
+  dependencies:
+    babel-helper-bindify-decorators "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-function-name@^6.18.0, babel-helper-function-name@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.18.0.tgz#68ec71aeba1f3e28b2a6f0730190b754a9bf30e6"
+  dependencies:
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-get-function-arity@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.18.0.tgz#a5b19695fd3f9cdfc328398b47dafcd7094f9f24"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-hoist-variables@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.18.0.tgz#a835b5ab8b46d6de9babefae4d98ea41e866b82a"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-optimise-call-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.18.0.tgz#9261d0299ee1a4f08a6dd28b7b7c777348fd8f0f"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-regex@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.18.0.tgz#ae0ebfd77de86cb2f1af258e2cc20b5fe893ecc6"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-remap-async-to-generator@^6.16.0, babel-helper-remap-async-to-generator@^6.16.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.18.0.tgz#336cdf3cab650bb191b02fc16a3708e7be7f9ce5"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.18.0.tgz#28ec69877be4144dbd64f4cc3a337e89f29a924e"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helpers@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.16.0.tgz#1095ec10d99279460553e67eb3eee9973d3867e3"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+
+babel-loader@^6.2.4:
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.11"
+    mkdirp "^0.5.1"
+    object-assign "^4.0.1"
+
+babel-messages@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.8.0.tgz#bf504736ca967e6d65ef0adb5a2a5f947c8e0eb9"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-check-es2015-constants@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-react-transform@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-transform/-/babel-plugin-react-transform-2.0.2.tgz#515bbfa996893981142d90b1f9b1635de2995109"
+  dependencies:
+    lodash "^4.6.1"
+
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
+babel-plugin-syntax-do-expressions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
+
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-function-bind@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
+
+babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.3.13:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.13.0.tgz#2b84b7d53dd744f94ff1fad7669406274b23f541"
+
+babel-plugin-transform-async-generator-functions@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.17.0.tgz#d0b5a2b2f0940f2b245fa20a00519ed7bc6cae54"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.2"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-async-to-generator@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.16.0.tgz#19ec36cb1486b59f9f468adfa42ce13908ca2999"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.0"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-class-constructor-call@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.18.0.tgz#80855e38a1ab47b8c6c647f8ea1bcd2c00ca3aae"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-class-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.18.0.tgz#bc1266a39d4c8726e0bd7b15c56235177e6ede57"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.9.1"
+
+babel-plugin-transform-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.13.0.tgz#82d65c1470ae83e2d13eebecb0a1c2476d62da9d"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-helper-explode-class "^6.8.0"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-types "^6.13.0"
+
+babel-plugin-transform-do-expressions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.8.0.tgz#fda692af339835cc255bb7544efb8f7c1306c273"
+  dependencies:
+    babel-plugin-syntax-do-expressions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.8.0.tgz#ed95d629c4b5a71ae29682b998f70d9833eb366d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.18.0.tgz#3bfdcfec318d46df22525cdea88f1978813653af"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-template "^6.15.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-plugin-transform-es2015-classes@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.18.0.tgz#ffe7a17321bf83e494dcda0ae3fc72df48ffd1d9"
+  dependencies:
+    babel-helper-define-map "^6.18.0"
+    babel-helper-function-name "^6.18.0"
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-helper-replace-supers "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.14.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-computed-properties@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.8.0.tgz#f51010fd61b3bd7b6b60a5fdfd307bb7a5279870"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-destructuring@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.18.0.tgz#a08fb89415ab82058649558bedb7bf8dafa76ba5"
+  dependencies:
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-for-of@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.18.0.tgz#4c517504db64bf8cfc119a6b8f177211f2028a70"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-function-name@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.9.0.tgz#8c135b17dbd064e5bba56ec511baaee2fca82719"
+  dependencies:
+    babel-helper-function-name "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.9.0"
+
+babel-plugin-transform-es2015-literals@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.8.0.tgz#50aa2e5c7958fc2ab25d74ec117e0cc98f046468"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.18.0.tgz#49a054cbb762bdf9ae2d8a807076cfade6141e40"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.18.0.tgz#c15ae5bb11b32a0abdcc98a5837baa4ee8d67bcc"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.18.0.tgz#f09294707163edae4d3b3e8bfacecd01d920b7ad"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.11.6"
+    babel-template "^6.14.0"
+
+babel-plugin-transform-es2015-modules-umd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.18.0.tgz#23351770ece5c1f8e83ed67cb1d7992884491e50"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-object-super@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.8.0.tgz#1b858740a5a4400887c23dcff6f4d56eea4a24c5"
+  dependencies:
+    babel-helper-replace-supers "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-parameters@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.18.0.tgz#9b2cfe238c549f1635ba27fc1daa858be70608b1"
+  dependencies:
+    babel-helper-call-delegate "^6.18.0"
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-spread@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.8.0.tgz#0217f737e3b821fa5a669f187c6ed59205f05e9c"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.8.0.tgz#e73d300a440a35d5c64f5c2a344dc236e3df47be"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-template-literals@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.8.0.tgz#86eb876d0a2c635da4ec048b4f7de9dfc897e66b"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.18.0.tgz#0b14c48629c90ff47a0650077f6aa699bee35798"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.3.13:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.11.0.tgz#6298ceabaad88d50a3f4f392d8de997260f6ef2c"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.8.0.tgz#db25742e9339eade676ca9acec46f955599a68a4"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.8.0"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-export-extensions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.8.0.tgz#fa80ff655b636549431bfd38f6b817bd82e47f5b"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-flow-strip-types@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.18.0.tgz#4d3e642158661e9b40db457c004a30817fa32592"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-function-bind@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.8.0.tgz#e7f334ce69f50d28fe850a822eaaab9fa4f4d821"
+  dependencies:
+    babel-plugin-syntax-function-bind "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-object-rest-spread@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.16.0.tgz#db441d56fffc1999052fdebe2e2f25ebd28e36a9"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-display-name@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.8.0.tgz#f7a084977383d728bdbdc2835bba0159577f660e"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-jsx-self@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.11.0.tgz#605c9450c1429f97a930f7e1dfe3f0d9d0dbd0f4"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx-source@^6.3.13:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.9.0.tgz#af684a05c2067a86e0957d4f343295ccf5dccf00"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.8.0.tgz#94759942f70af18c617189aa7f3593f1644a71ab"
+  dependencies:
+    babel-helper-builder-react-jsx "^6.8.0"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-regenerator@^6.16.0:
+  version "6.16.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.16.1.tgz#a75de6b048a14154aae14b0122756c5bed392f59"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.16.0"
+    private "~0.1.5"
+
+babel-plugin-transform-strict-mode@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.18.0.tgz#df7cf2991fe046f44163dcd110d5ca43bc652b9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-preset-es2015@^6.13.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.18.0.tgz#b8c70df84ec948c43dcf2bf770e988eb7da88312"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.18.0"
+    babel-plugin-transform-es2015-classes "^6.18.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.18.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.18.0"
+    babel-plugin-transform-es2015-function-name "^6.9.0"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-umd "^6.18.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.18.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.18.0"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.18.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-regenerator "^6.16.0"
+
+babel-preset-react@^6.5.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.16.0.tgz#aa117d60de0928607e343c4828906e4661824316"
+  dependencies:
+    babel-plugin-syntax-flow "^6.3.13"
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-flow-strip-types "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.3.13"
+    babel-plugin-transform-react-jsx "^6.3.13"
+    babel-plugin-transform-react-jsx-self "^6.11.0"
+    babel-plugin-transform-react-jsx-source "^6.3.13"
+
+babel-preset-stage-0@^6.5.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-0/-/babel-preset-stage-0-6.16.0.tgz#f5a263c420532fd57491f1a7315b3036e428f823"
+  dependencies:
+    babel-plugin-transform-do-expressions "^6.3.13"
+    babel-plugin-transform-function-bind "^6.3.13"
+    babel-preset-stage-1 "^6.16.0"
+
+babel-preset-stage-1@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.16.0.tgz#9d31fbbdae7b17c549fd3ac93e3cf6902695e479"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.3.13"
+    babel-plugin-transform-export-extensions "^6.3.13"
+    babel-preset-stage-2 "^6.16.0"
+
+babel-preset-stage-2@^6.13.0, babel-preset-stage-2@^6.16.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.18.0.tgz#9eb7bf9a8e91c68260d5ba7500493caaada4b5b5"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.18.0"
+    babel-plugin-transform-decorators "^6.13.0"
+    babel-preset-stage-3 "^6.17.0"
+
+babel-preset-stage-3@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.17.0.tgz#b6638e46db6e91e3f889013d8ce143917c685e39"
+  dependencies:
+    babel-plugin-syntax-trailing-function-commas "^6.3.13"
+    babel-plugin-transform-async-generator-functions "^6.17.0"
+    babel-plugin-transform-async-to-generator "^6.16.0"
+    babel-plugin-transform-exponentiation-operator "^6.3.13"
+    babel-plugin-transform-object-rest-spread "^6.16.0"
+
+babel-register@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.18.0.tgz#892e2e03865078dd90ad2c715111ec4449b32a68"
+  dependencies:
+    babel-core "^6.18.0"
+    babel-runtime "^6.11.6"
+    core-js "^2.4.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.2"
+
+babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.20.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-standalone@^6.7.7:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.19.0.tgz#e3fa6169fd0afe6ccfd95c8856fbb5e87ec1784e"
+
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-traverse "^6.16.0"
+    babel-types "^6.16.0"
+    babylon "^6.11.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
+  dependencies:
+    babel-code-frame "^6.20.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
+    babylon "^6.11.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.21.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
+  dependencies:
+    babel-runtime "^6.20.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babylon@^6.11.0, babylon@^6.13.0:
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.13.1.tgz#adca350e088f0467647157652bafead6ddb8dfdb"
+
+balanced-match@^0.4.1, balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+balanced-match@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+binary-extensions@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.7.0.tgz#6c1610db163abfb34edfe42fa423343a1e01185d"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.4.6:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+  dependencies:
+    balanced-match "^0.4.1"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+  dependencies:
+    caniuse-db "^1.0.30000539"
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
+buffer@^4.9.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+
+camel-case@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
+  version "1.0.30000597"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
+
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+change-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.0.0.tgz#6c9c8e35f8790870a82b6b0745be8c3cbef9b081"
+  dependencies:
+    camel-case "^3.0.0"
+    constant-case "^2.0.0"
+    dot-case "^2.1.0"
+    header-case "^1.0.0"
+    is-lower-case "^1.1.0"
+    is-upper-case "^1.1.0"
+    lower-case "^1.1.1"
+    lower-case-first "^1.0.0"
+    no-case "^2.2.0"
+    param-case "^2.1.0"
+    pascal-case "^2.0.0"
+    path-case "^2.1.0"
+    sentence-case "^2.1.0"
+    snake-case "^2.1.0"
+    swap-case "^1.1.0"
+    title-case "^2.1.0"
+    upper-case "^1.1.1"
+    upper-case-first "^1.1.0"
+
+cheerio@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.18.0.tgz#4e1c06377e725b740e996e0dfec353863de677fa"
+  dependencies:
+    CSSselect "~0.4.0"
+    dom-serializer "~0.0.0"
+    entities "~1.1.1"
+    htmlparser2 "~3.8.1"
+    lodash "~2.4.1"
+
+chokidar@^1.0.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+clap@^1.0.9:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.1.tgz#a8a93e0bfb7581ac199c4f001a5525a724ce696d"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+clean-css@3.4.x:
+  version "3.4.20"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.20.tgz#c0d8963b5448e030f0bcd3ddd0dac4dfe3dea501"
+  dependencies:
+    commander "2.8.x"
+    source-map "0.4.x"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+coa@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  dependencies:
+    q "^1.1.2"
+
+code-point-at@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.0.1.tgz#1104cd34f9b5b45d3eba88f1babc1924e1ce35fb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+codemirror@^5.14.2:
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.21.0.tgz#9ec4caeda50807575b2115226bf12414f85d2246"
+
+collections@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/collections/-/collections-0.2.2.tgz#1f23026b2ef36f927eecc901e99c5f0d48fa334e"
+  dependencies:
+    weak-map "1.0.0"
+
+color-convert@^1.3.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.6.0.tgz#7592755faf53938a05b1ea8e5374cab77d6dd190"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.8.x:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commander@2.9.0, commander@2.9.x, commander@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constant-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
+  dependencies:
+    snake-case "^2.1.0"
+    upper-case "^1.1.1"
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+content-disposition@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+convert-source-map@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.1.tgz#817f2c2039347a1e9bf7d090c0923e53f749ca82"
+  dependencies:
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+cross-env@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.1.3.tgz#58cd8231808f50089708b091f7dd37275a8e8154"
+  dependencies:
+    cross-spawn "^3.0.1"
+
+cross-spawn@^3.0.0, cross-spawn@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+css-color-names@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+css-loader@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    loader-utils "~0.2.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.4"
+
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.0.tgz#bb90ac5292f42b679d9a05f6da0e9697556bb80d"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
+dashdash@^1.12.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.0.tgz#29e486c5418bf0f356034a993d51686a33e84141"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-equal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+deep-extend@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+dom-serializer@0, dom-serializer@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.0.1.tgz#9589827f1e32d22c37c829adabd59b3247af8eaf"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+domelementtype@1, domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domhandler@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  dependencies:
+    domelementtype "1"
+
+domhandler@2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.4:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.4.3.tgz#0865513796c6b306031850e175516baf80b72a6f"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5, domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.0.tgz#4b43dd0d7403c34cb645424add397e80bfe85ca6"
+  dependencies:
+    no-case "^2.2.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+entities@1.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+error-ex@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-stack-parser@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+  dependencies:
+    stackframe "^0.3.1"
+
+es5-ext@^0.10.7, es5-ext@~0.10.11, es5-ext@~0.10.2:
+  version "0.10.12"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.7"
+    es6-symbol "3"
+
+es6-symbol@3, es6-symbol@^3.0.2, es6-symbol@~3.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+
+es6-templates@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
+  dependencies:
+    recast "~0.11.12"
+    through "~2.3.6"
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.1.tgz#02dbcc5ac3ece81070377f99158ec742ab5dda06"
+
+esutils@^2.0.0, esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+express@^4.13.4:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.1"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    finalhandler "0.5.0"
+    fresh "0.3.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    path-to-regexp "0.1.7"
+    proxy-addr "~1.1.2"
+    qs "6.2.0"
+    range-parser "~1.2.0"
+    send "0.14.1"
+    serve-static "~1.11.1"
+    type-is "~1.6.13"
+    utils-merge "1.0.0"
+    vary "~1.1.0"
+
+extend@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
+  dependencies:
+    async "^1.5.0"
+    loader-utils "^0.2.3"
+    webpack-sources "^0.1.0"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+fbjs@^0.8.1, fbjs@^0.8.4:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008"
+  dependencies:
+    core-js "^1.0.0"
+    immutable "^3.7.6"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    ua-parser-js "^0.7.9"
+
+filename-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+
+for-own@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  dependencies:
+    for-in "^0.1.5"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+
+form-data@~2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.1.tgz#4adf0342e1a79afa1e84c8c320a9ffc82392a1f3"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+fresh@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.14.tgz#558e8cc38643d8ef40fe45158486d0d25758eee4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fstream-ignore@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+gauge@~2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.6.0.tgz#d35301ad18e96902b4751dcbbe40f4218b942a46"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-color "^0.1.7"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+getpass@^0.1.1:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  dependencies:
+    assert-plus "^1.0.0"
+
+gh-pages@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-0.12.0.tgz#d951e3ed98b85699d4b0418eb1a15b1a04988dc1"
+  dependencies:
+    async "2.1.2"
+    commander "2.9.0"
+    globby "^6.1.0"
+    graceful-fs "4.1.10"
+    q "1.4.1"
+    q-io "1.13.2"
+    rimraf "^2.5.4"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.1.tgz#5f757908c7cbabce54f386ae440e11e26b7916df"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
+globals@^9.0.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.1.0.tgz#c49352e4dc183d85893ee825385eb994bb6df45f"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.16.4"
+    minimatch "~3.0.2"
+
+graceful-fs@4.1.10:
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
+
+graceful-fs@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.2.tgz#fe2239b7574972e67e41f808823f9bfa4a991e37"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-color@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+he@1.1.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
+
+he@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
+
+header-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.0.tgz#d9e335909505d56051ec16a0106821889e910781"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.3"
+
+"highlight-loader@git://github.com/javivelasco/highlight-loader.git#master":
+  version "0.4.5"
+  resolved "git://github.com/javivelasco/highlight-loader.git#24a6155f81190a34ec923d98c3aec3f6930939ff"
+  dependencies:
+    cheerio "^0.18.0"
+    he "^0.5.0"
+    highlight.js "^8.4.0"
+
+highlight.js@^8.4.0:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-8.9.1.tgz#b8a9c5493212a9392f0222b649c9611497ebfb88"
+
+highlight.js@^9.3.0:
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.7.0.tgz#e7a926bf3079c65b2ae50314878e456a009b4aac"
+
+history@^2.1.1, history@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-2.1.2.tgz#4aa2de897a0e4867e4539843be6ecdb2986bfdec"
+  dependencies:
+    deep-equal "^1.0.0"
+    invariant "^2.0.0"
+    query-string "^3.0.0"
+    warning "^2.0.0"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
+html-entities@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+
+html-loader@^0.4.3:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.4.4.tgz#f2b5b9acd5e035ff3ab5fd369c13c97a7bb014da"
+  dependencies:
+    es6-templates "^0.2.2"
+    fastparse "^1.1.1"
+    html-minifier "^3.0.1"
+    loader-utils "^0.2.15"
+    object-assign "^4.1.0"
+
+html-minifier@^3.0.1, html-minifier@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.1.0.tgz#e0b35d7a1fff89ae989e2fa51c572bc0d1f2d1f6"
+  dependencies:
+    change-case "3.0.x"
+    clean-css "3.4.x"
+    commander "2.9.x"
+    he "1.1.x"
+    ncname "1.0.x"
+    relateurl "0.2.x"
+    uglify-js "2.7.x"
+
+html-webpack-plugin@^2.16.1:
+  version "2.24.1"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.24.1.tgz#7f45fc678f66eac2d433f22336b4399da023b57e"
+  dependencies:
+    bluebird "^3.4.6"
+    html-minifier "^3.1.0"
+    loader-utils "^0.2.16"
+    lodash "^4.16.4"
+    pretty-error "^2.0.2"
+    toposort "^1.0.0"
+
+htmlparser2@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.1"
+    domutils "1.1"
+    readable-stream "1.0"
+
+htmlparser2@~3.8.1:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.3"
+    domutils "1.5"
+    entities "1.0"
+    readable-stream "1.1"
+
+http-errors@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.0.tgz#b1cb3d8260fd8e2386cad3189045943372d48211"
+  dependencies:
+    inherits "2.0.1"
+    setprototypeof "1.0.1"
+    statuses ">= 1.3.0 < 2"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@~0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+icss-replace-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+immutable@^3.7.6:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.1, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.1.tgz#b097010547668c7e337028ebe816ebe36c8a8d54"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ipaddr.js@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+
+is-absolute-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.0.0.tgz#9c4b20b0e5c0cbef9a479a367ede6f991679f359"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.0.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-dotfile@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+
+is-equal-shallow@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-lower-case@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393"
+  dependencies:
+    lower-case "^1.1.0"
+
+is-my-json-valid@^2.12.4:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number@^2.0.2, is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-posix-bracket@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-svg@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.0.1.tgz#f93ab3bf1d6bbca30e9753cd3485b1300eebc013"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-upper-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f"
+  dependencies:
+    upper-case "^1.1.0"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isexe@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jodid25519@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
+  dependencies:
+    jsbn "~0.1.0"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+js-tokens@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
+
+js-yaml@^3.4.3, js-yaml@~3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+
+json5@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.0.tgz#9b20715b026cbe3778fd769edccd822d8332a5b2"
+
+jsonpointer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.0.tgz#6661e161d2fc445f19f98430231343722e1fcbd5"
+
+jsprim@^1.2.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  dependencies:
+    extsprintf "1.0.2"
+    json-schema "0.2.3"
+    verror "1.3.6"
+
+kind-of@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
+  dependencies:
+    is-buffer "^1.0.2"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+load-json-file@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.clonedeep@^4.3.2:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+
+lodash.indexof@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+
+lodash.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.4, lodash@^4.2.0, lodash@^4.6.1, lodash@~4.16.4:
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
+
+lodash@~2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
+  dependencies:
+    js-tokens "^2.0.0"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lower-case-first@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
+  dependencies:
+    lower-case "^1.1.2"
+
+lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+
+lru-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.1.tgz#1343955edaf2e37d9b9e7ee7241e27c4b9fb72be"
+  dependencies:
+    pseudomap "^1.0.1"
+    yallist "^2.0.0"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+markdown-loader@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/markdown-loader/-/markdown-loader-0.1.7.tgz#2ab6616fd17652a7cbfe66540781b55e4f19e267"
+  dependencies:
+    loader-utils "^0.2.7"
+    marked "^0.3.2"
+    object-assign "^2.0.0"
+
+marked@^0.3.2:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+  dependencies:
+    lodash.indexof "^4.0.5"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.24.0:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.12.tgz#152ba256777020dd4663f54c2e7bc26381e71729"
+  dependencies:
+    mime-db "~1.24.0"
+
+mime@1.3.4, mime@^1.2.11, mime@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+mimeparse@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/mimeparse/-/mimeparse-0.1.4.tgz#dafb02752370fd226093ae3152c271af01ac254a"
+
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.1.3, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+nan@^2.3.0, nan@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
+
+ncname@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+  dependencies:
+    xml-char-classes "^1.0.0"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+no-case@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-dir@^0.1.6:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.16.tgz#d2ef583aa50b90d93db8cdd26fcea58353957fe4"
+  dependencies:
+    minimatch "^3.0.2"
+
+node-fetch@^1.0.1:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-gyp@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.4.0.tgz#dda558393b3ecbbe24c9e6b8703c71194c63fa36"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3"
+    osenv "0"
+    path-array "^1.0.0"
+    request "2"
+    rimraf "2"
+    semver "2.x || 3.x || 4 || 5"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.31"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.31.tgz#d8a00ddaa301a940615dbcc8caad4024d58f6017"
+  dependencies:
+    mkdirp "~0.5.1"
+    nopt "~3.0.6"
+    npmlog "^4.0.0"
+    rc "~1.1.6"
+    request "^2.75.0"
+    rimraf "~2.5.4"
+    semver "~5.3.0"
+    tar "~2.2.1"
+    tar-pack "~3.3.0"
+
+node-sass@^3.7.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.1.tgz#7240fbbff2396304b4223527ed3020589c004fc2"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "^2.61.0"
+    sass-graph "^2.1.1"
+
+node-uuid@~1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
+
+"nopt@2 || 3", nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@^1.4.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.7.0.tgz#d82452d98d38821cffddab4d77a5f8d20ce66db0"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+"npmlog@0 || 1 || 2 || 3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-3.1.2.tgz#2d46fa874337af9498a2f12bb43d8d0be4a36873"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+npmlog@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.0.tgz#e094503961c70c1774eb76692080e8d578a9f88f"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0, once@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.3.tgz#83cf05c6d6458fc4d5ac6362ea325d92f2754217"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+param-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  dependencies:
+    no-case "^2.2.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  dependencies:
+    error-ex "^1.2.0"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+pascal-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.0.tgz#39c248bde5a8dc02d5160696bdb01e044d016ee1"
+  dependencies:
+    camel-case "^3.0.0"
+    upper-case-first "^1.1.0"
+
+path-array@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-array/-/path-array-1.0.1.tgz#7e2f0f35f07a2015122b868b7eac0eb2c4fec271"
+  dependencies:
+    array-index "^1.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.0.tgz#5ac491de642936e5dfe0e18d16c461b8be8cf073"
+  dependencies:
+    no-case "^2.2.0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  dependencies:
+    find-up "^1.0.0"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.4.1.tgz#45dce4d4e33b7d967b97a4d937f270ea98d2fe7a"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.1.tgz#5fae3f1a71df3e19cffb37309d1a7dba56c4589c"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.2.tgz#5d72f7d05d11de0a9589e001958067ccae1b4931"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-load-config@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.0.0.tgz#1399f60dcd6bd9c3124b2eb22960f77f9dc08b3d"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.0.2"
+    postcss-load-plugins "^2.0.0"
+
+postcss-load-options@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.0.2.tgz#b99eb5759a588f4b2dd8b6471c6985f72060e7b0"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.1.0.tgz#dbb6f46271df8d16e19b5d691ebda5175ce424a0"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.2.1.tgz#8809ab184a9f903a01f660385f2e296ff563d22c"
+  dependencies:
+    loader-utils "^0.2.16"
+    object-assign "^4.1.0"
+    postcss "^5.2.6"
+    postcss-load-config "^1.0.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.10.tgz#54b360be804e7e69a5c7222635247b92a3569e9b"
+  dependencies:
+    postcss "^5.0.4"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.0.5.tgz#82d602643b8616a61fb3634d7ede0289836d67f9"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.0.5.tgz#4e1f966fb49c95266804016ba9a3c6645bb601e0"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-scope@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-values@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  dependencies:
+    icss-replace-symbols "^1.0.2"
+    postcss "^5.0.14"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.0.tgz#2fbd30e12248c442981d31ea2484d46fd0628970"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.7.tgz#6bd90d0a4bc5a1df22c26ea65c53257dc3829f4e"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.0.tgz#8f739b938289ef2e48936d7101783e4741ca9bbb"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.1.tgz#fdbf696103b12b0a64060e5610507f410491f7c8"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.5.tgz#46fc0363f01bab6a36a9abb01c229fcc45363094"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss-zindex@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.1.1.tgz#ea3fbe656c9738aa8729e2ee96ec2a46089b720f"
+  dependencies:
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.6:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.1.2"
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-error@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
+  dependencies:
+    renderkid "~2.0.0"
+    utila "~0.4"
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process@^0.11.0:
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
+promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+proxy-addr@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.1.1"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q-io@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/q-io/-/q-io-1.13.2.tgz#eea130d481ddb5e1aa1bc5a66855f7391d06f003"
+  dependencies:
+    collections "^0.2.0"
+    mime "^1.2.11"
+    mimeparse "^0.1.4"
+    q "^1.0.1"
+    qs "^1.2.1"
+    url2 "^0.0.0"
+
+q@1.4.1, q@^1.0.1, q@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+qs@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+
+qs@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-1.2.2.tgz#19b57ff24dc2a99ce1f8bdf6afcda59f8ef61f88"
+
+qs@~6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+
+query-string@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-3.0.3.tgz#ae2e14b4d05071d4e9b9eb4873c35b0dcd42e638"
+  dependencies:
+    strict-uri-encode "^1.0.0"
+
+query-string@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0, querystring@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+randomatic@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
+  dependencies:
+    is-number "^2.0.2"
+    kind-of "^3.0.2"
+
+range-parser@^1.0.3, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-loader@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+
+rc@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~1.0.4"
+
+react-css-themr@^1.2.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.0.tgz#dd8b04027e3967ed4ecfdd87922d215f4bc55be7"
+  dependencies:
+    invariant "^2.2.1"
+
+react-deep-force-update@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
+
+react-dom@^15.2.0:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
+  dependencies:
+    fbjs "^0.8.1"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+react-proxy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
+  dependencies:
+    lodash "^4.6.1"
+    react-deep-force-update "^1.0.0"
+
+react-router@^2.4.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-2.8.1.tgz#73e9491f6ceb316d0f779829081863e378ee4ed7"
+  dependencies:
+    history "^2.1.2"
+    hoist-non-react-statics "^1.2.0"
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    warning "^3.0.0"
+
+react-transform-catch-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
+
+react-transform-hmr@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
+  dependencies:
+    global "^4.3.0"
+    react-proxy "^1.1.7"
+
+react@^15.2.0:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
+  dependencies:
+    fbjs "^0.8.4"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@1.0:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@1.1:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readdirp@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+recast@~0.11.12:
+  version "0.11.15"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.15.tgz#3d03ee4f74b2ef4aa2f6ea2059d92db843d1316c"
+  dependencies:
+    ast-types "0.9.0"
+    esprima "~3.1.0"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
+redbox-react@^1.2.4:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.3.tgz#63ec9c2cb9c620c46e2b9f8543b4898f1b787e41"
+  dependencies:
+    error-stack-parser "^1.3.6"
+    object-assign "^4.0.1"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.1.tgz#fa02e126e695824263cab91d3a5b0fdc1dd27a9a"
+  dependencies:
+    balanced-match "~0.1.0"
+
+regenerate@^1.2.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+
+renderkid@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.0.tgz#1859753e7a5adbf35443aba0d4e4579e78abee85"
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "~0.1"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+request@2, request@^2.61.0, request@^2.75.0:
+  version "2.76.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.76.0.tgz#be44505afef70360a0436955106be3945d95560e"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+sass-graph@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    yargs "^4.7.1"
+
+sass-loader@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.1.0.tgz#fd8604c5bf90001b173bb27540e8f2f5ed64602b"
+  dependencies:
+    async "^2.0.1"
+    loader-utils "^0.2.15"
+    object-assign "^4.1.0"
+
+sax@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+send@0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+  dependencies:
+    debug "~2.2.0"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    fresh "0.3.0"
+    http-errors "~1.5.0"
+    mime "1.3.4"
+    ms "0.7.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.0"
+
+sentence-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.0.tgz#d592fbed457fd1a59e3af0ee17e99f6fd70d7efd"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case-first "^1.1.2"
+
+serve-static@~1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.14.1"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+setprototypeof@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.1.tgz#52009b27888c4dc48f591949c0a8275834c1ca7e"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.1.tgz#5a4c884992b63a7acd9badb7894c3ee9cfccad81"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+snake-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
+  dependencies:
+    no-case "^2.2.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^0.1.4, source-list-map@~0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
+
+source-list-map@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e"
+
+source-map-support@^0.4.2:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map@0.4.x, source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jodid25519 "^1.0.0"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+stackframe@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
+"statuses@>= 1.3.0 < 2", statuses@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-http@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+  dependencies:
+    builtin-status-codes "^2.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.1.0"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@^0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
+style-loader@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  dependencies:
+    loader-utils "^0.2.7"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^3.1.0, supports-color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+  dependencies:
+    has-flag "^1.0.0"
+
+svgo@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.2.1"
+    js-yaml "~3.6.1"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+swap-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3"
+  dependencies:
+    lower-case "^1.1.1"
+    upper-case "^1.1.1"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+  dependencies:
+    debug "~2.2.0"
+    fstream "~1.0.10"
+    fstream-ignore "~1.0.5"
+    once "~1.3.3"
+    readable-stream "~2.1.4"
+    rimraf "~2.5.1"
+    tar "~2.2.1"
+    uid-number "~0.0.6"
+
+tar@^2.0.0, tar@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+through@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  dependencies:
+    setimmediate "^1.0.4"
+
+title-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.0.3"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+to-fast-properties@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+
+toposort@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+transfer-webpack-plugin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/transfer-webpack-plugin/-/transfer-webpack-plugin-0.1.4.tgz#6b5adedc58cbaa89ddcb9eb4e90e36f67655ed76"
+  dependencies:
+    node-dir "^0.1.6"
+    vow "^0.4.9"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.3.tgz#3da382f670f25ded78d7b3d1792119bca0b7132d"
+
+type-is@~1.6.13:
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.13.tgz#6e83ba7bc30cd33a7bb0b7fb00737a2085bf9d08"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.11"
+
+ua-parser-js@^0.7.9:
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f"
+
+uglify-js@2.7.x, uglify-js@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.4.tgz#a295a0de12b6a650c031c40deb0dc40b14568bd2"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+
+uid-number@~0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+upper-case-first@^1.1.0, upper-case-first@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115"
+  dependencies:
+    upper-case "^1.1.1"
+
+upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+url2@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/url2/-/url2-0.0.0.tgz#4eaabd1d5c3ac90d62ab4485c998422865a04b1a"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.3, util@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+vary@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+verror@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+vow@^0.4.9:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/vow/-/vow-0.4.13.tgz#e7c14f1bd9c8be0e7359a4597fe2d1ef6d1a7e88"
+
+warning@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-2.1.0.tgz#21220d9c63afc77a8c92111e011af705ce0c6901"
+  dependencies:
+    loose-envify "^1.0.0"
+
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+weak-map@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/weak-map/-/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@^1.6.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+
+webpack-hot-middleware@^2.10.0:
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.2.tgz#6500b15e6d4f1a9590f8df708183f4d2ac2c3e9e"
+  dependencies:
+    ansi-html "0.0.6"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
+webpack-sources@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.2.tgz#057a3f3255f8ba561b901d9150589aa103a57e65"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.5.3"
+
+webpack@^1.13.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+whatwg-fetch@>=0.10.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which@1, which@^1.2.9:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.11.tgz#c8b2eeea6b8c1659fa7c1dd4fdaabe9533dc5e8b"
+  dependencies:
+    isexe "^1.1.1"
+
+wide-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+window-size@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
+
+wordwrap@0.0.2, wordwrap@~0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wrap-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.0.0.tgz#7d30f8f873f9a5bbc3a64dabc8d177e071ae426f"
+  dependencies:
+    string-width "^1.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xml-char-classes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+
+yargs-parser@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
+  dependencies:
+    camelcase "^3.0.0"
+    lodash.assign "^4.0.6"
+
+yargs@^4.7.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+  dependencies:
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    lodash.assign "^4.0.3"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.1"
+    which-module "^1.0.0"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^2.4.1"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 000000000..b731e9043
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,115 @@
+// Type definitions for react-toolbox
+// Project: https://github.com/react-toolbox/react-toolbox
+// Definitions by: Per Bergqwist <https://github.com/normano64>
+
+import { AppBar } from "react-toolbox/lib/app_bar";
+import { Autocomplete } from "react-toolbox/lib/autocomplete";
+import { Avatar } from "react-toolbox/lib/avatar";
+import { Button, IconButton } from "react-toolbox/lib/button";
+import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
+import { Checkbox } from "react-toolbox/lib/checkbox";
+import { Chip } from "react-toolbox/lib/chip";
+import { DatePicker } from "react-toolbox/lib/date_picker";
+import { Dialog } from "react-toolbox/lib/dialog";
+import { Drawer } from "react-toolbox/lib/drawer";
+import { Dropdown } from "react-toolbox/lib/dropdown";
+import { FontIcon } from "react-toolbox/lib/font_icon";
+import { Input } from "react-toolbox/lib/input";
+import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
+import { Link } from "react-toolbox/lib/link";
+import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
+import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
+import { Navigation } from "react-toolbox/lib/navigation";
+import { ProgressBar } from "react-toolbox/lib/progress_bar";
+import { RadioGroup, RadioButton } from "react-toolbox/lib/radio";
+import { Ripple } from "react-toolbox/lib/ripple";
+import { Slider } from "react-toolbox/lib/slider";
+import { Snackbar } from "react-toolbox/lib/snackbar";
+import { Switch } from "react-toolbox/lib/switch";
+import { Tabs, Tab } from "react-toolbox/lib/tabs";
+import { TimePicker } from "react-toolbox/lib/time_picker";
+import { Tooltip } from "react-toolbox/lib/tooltip";
+
+import { AppBarTheme } from "react-toolbox/lib/app_bar";
+import { AutocompleteTheme } from "react-toolbox/lib/autocomplete";
+import { AvatarTheme } from "react-toolbox/lib/avatar";
+import { ButtonTheme, IconButtonTheme } from "react-toolbox/lib/button";
+import { CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme } from "react-toolbox/lib/card";
+import { CheckboxTheme } from "react-toolbox/lib/checkbox";
+import { ChipTheme } from "react-toolbox/lib/chip";
+import { DatePickerTheme } from "react-toolbox/lib/date_picker";
+import { DialogTheme } from "react-toolbox/lib/dialog";
+import { DrawerTheme } from "react-toolbox/lib/drawer";
+import { DropdownTheme } from "react-toolbox/lib/dropdown";
+import { InputTheme } from "react-toolbox/lib/input";
+import { LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme } from "react-toolbox/lib/layout";
+import { LinkTheme } from "react-toolbox/lib/link";
+import { ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme } from "react-toolbox/lib/list";
+import { MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme } from "react-toolbox/lib/menu";
+import { NavigationTheme } from "react-toolbox/lib/navigation";
+import { ProgressBarTheme } from "react-toolbox/lib/progress_bar";
+import { RadioButtonTheme } from "react-toolbox/lib/radio";
+import { RippleTheme } from "react-toolbox/lib/ripple";
+import { SliderTheme } from "react-toolbox/lib/slider";
+import { SnackbarTheme } from "react-toolbox/lib/snackbar";
+import { SwitchTheme } from "react-toolbox/lib/switch";
+import { TabsTheme, TabTheme } from "react-toolbox/lib/tabs";
+import { TimePickerTheme } from "react-toolbox/lib/time_picker";
+import { TooltipTheme } from "react-toolbox/lib/tooltip";
+
+export {
+  AppBar,
+  Autocomplete,
+  Avatar,
+  Button, IconButton,
+  Card, CardTitle, CardMedia, CardText, CardActions,
+  Checkbox,
+  Chip,
+  DatePicker,
+  Dialog,
+  Drawer,
+  Dropdown,
+  FontIcon,
+  Input,
+  Layout, Panel, NavDrawer, Sidebar,
+  Link,
+  List, ListCheckbox, ListItem, ListDivider, ListSubHeader,
+  Menu, MenuDivider, MenuItem, IconMenu,
+  Navigation,
+  ProgressBar,
+  RadioGroup, RadioButton,
+  Ripple,
+  Slider,
+  Snackbar,
+  Switch,
+  Tabs, Tab,
+  TimePicker,
+  Tooltip,
+
+  AppBarTheme,
+  AutocompleteTheme,
+  AvatarTheme,
+  ButtonTheme, IconButtonTheme,
+  CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme,
+  CheckboxTheme,
+  ChipTheme,
+  DatePickerTheme,
+  DialogTheme,
+  DrawerTheme,
+  DropdownTheme,
+  InputTheme,
+  LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme,
+  LinkTheme,
+  ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme,
+  MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme,
+  NavigationTheme,
+  ProgressBarTheme,
+  RadioButtonTheme,
+  RippleTheme,
+  SliderTheme,
+  SnackbarTheme,
+  SwitchTheme,
+  TabsTheme, TabTheme,
+  TimePickerTheme,
+  TooltipTheme
+}
diff --git a/karma.conf.js b/karma.conf.js
index ba434c835..f0d933e76 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,3 +1,4 @@
+require('babel-polyfill');
 const webpackConfig = require('./webpack.config.test');
 
 module.exports = function (config) {
@@ -7,7 +8,7 @@ module.exports = function (config) {
     frameworks: ['mocha'],
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
-      './node_modules/babel-core/browser-polyfill.js',
+      './node_modules/babel-polyfill/dist/polyfill.js',
       'tests.webpack.js'
     ],
     reporters: ['dots'],
diff --git a/package.json b/package.json
index 2a7fd1c58..3fa440213 100644
--- a/package.json
+++ b/package.json
@@ -1,94 +1,124 @@
 {
   "name": "react-toolbox",
-  "version": "0.11.5",
-  "description": "A set of complementary tools to ReactJS.",
-  "author": "React Toolbox Team (http://github.com/react-toolbox)",
+  "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
+  "homepage": "http://www.react-toolbox.com/",
+  "version": "1.3.4",
+  "main": "./lib",
+  "author": {
+    "name": "React Toolbox Team",
+    "url": "http://github.com/react-toolbox"
+  },
   "contributors": [
     {
       "name": "Javi Jimenez Villar",
-      "url": "http://soyjavi.com/",
-      "email": "javi.jimenez.villar@gmail.com"
+      "email": "javi.jimenez.villar@gmail.com",
+      "url": "http://soyjavi.com/"
     },
     {
       "name": "Javi Velasco Arjona",
-      "url": "http://javivelasco.com/",
-      "email": "javier.velasco86@gmail.com"
+      "email": "javier.velasco86@gmail.com",
+      "url": "http://javivelasco.com/"
     }
   ],
-  "main": "./lib",
-  "scripts": {
-    "start": "node ./server",
-    "lint": "eslint ./ --ext .js,.jsx",
-    "babel": "babel ./components --out-dir ./lib",
-    "sass": "cpx './components/**/*.scss' ./lib",
-    "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
-    "clean": "rimraf ./lib",
-    "prebuild": "npm run clean",
-    "prepublish": "npm run build",
-    "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-toolbox/react-toolbox.git"
   },
   "bugs": {
-    "url": "https://github.com/react-toolbox/react-toolbox/issues",
-    "email": "issues@react-toolbox.com"
+    "email": "issues@react-toolbox.com",
+    "url": "https://github.com/react-toolbox/react-toolbox/issues"
   },
   "keywords": [
+    "components",
+    "material design",
     "react",
     "react-component",
-    "material design",
-    "toolkit",
-    "components"
+    "toolkit"
   ],
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^0.14",
-    "react-dom": "^0.14.0",
-    "react-addons-css-transition-group": "^0.14.0",
-    "normalize.css": "^3.0.3"
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "core-js": "^2.4.0",
+    "immutability-helper": "^2.0.0",
+    "normalize.css": "^4.2.0",
+    "react-css-themr": "^1.7.1"
   },
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-react-transform": "^1.1.1",
-    "core-js": "^1.2.6",
-    "cross-env": "^1.0.4",
-    "cpx": "^1.2.1",
-    "css-loader": "^0.21.0",
-    "eslint": "^1.7.3",
-    "eslint-plugin-react": "^3.3.1",
-    "expect": "^1.8.0",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.8.2",
-    "karma": "^0.13.3",
-    "karma-chrome-launcher": "^0.2.0",
-    "karma-cli": "^0.1.0",
-    "karma-mocha": "^0.2.0",
-    "karma-phantomjs-launcher": "~0.2",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.3",
-    "node-sass": "^3.3.3",
-    "normalize.css": "^3.0.3",
-    "phantomjs": "^1.9.18",
-    "phantomjs-polyfill": "0.0.1",
-    "postcss-loader": "^0.7.0",
-    "react": "^0.14",
-    "react-addons-css-transition-group": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.1.1",
-    "rimraf": "^2.4.3",
-    "sass-loader": "^3.0.0",
-    "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
-    "style-loader": "^0.13.0",
-    "toolbox-loader": "0.0.2",
-    "webpack": "^1.12.0",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.4.1"
+    "autoprefixer": "^6.5.4",
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-polyfill": "^6.20.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "cpx": "^1.5.0",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.12.2",
+    "eslint-import-resolver-webpack": "^0.8.0",
+    "eslint-plugin-babel": "^4.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.8.0",
+    "expect": "^1.20.1",
+    "express": "^4.14.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "git-dirty": "^1.0.2",
+    "glob": "^7.1.1",
+    "immutability-helper": "^2.0.0",
+    "internal-ip": "^1.2.0",
+    "karma": "^1.3.0",
+    "karma-cli": "^1.0.0",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-webpack": "^1.8.0",
+    "lint-staged": "^3.2.3",
+    "mocha": "^3.2.0",
+    "node-sass": "^3.13.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "postcss-loader": "^1.2.1",
+    "pre-commit": "^1.2.2",
+    "react": "^15.4.1",
+    "react-addons-css-transition-group": "^15.4.1",
+    "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.3.2",
+    "rimraf": "^2.5.2",
+    "sass-lint": "^1.10.2",
+    "sass-loader": "^4.1.0",
+    "sinon": "^2.0.0-pre.2",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.14.0",
+    "webpack-dev-middleware": "^1.9.0",
+    "webpack-hot-middleware": "^2.13.0"
+  },
+  "scripts": {
+    "babel": "babel ./components --out-dir ./lib",
+    "build": "cross-env NODE_ENV=production npm run babel && npm run sass && npm run tsd",
+    "clean": "rimraf ./lib",
+    "lint": "npm run lint:js && npm run lint:scss",
+    "lint:js": "eslint ./ --ext .js",
+    "lint:scss": "sass-lint ./components/**/*.scss -v -i ./components/slider/style.scss",
+    "lint:staged": "lint-staged",
+    "patch": "bumped release patch",
+    "prebuild": "npm run clean",
+    "prepublish": "npm run build",
+    "release": "bumped release",
+    "sass": "cpx \"./components/**/*.scss\" ./lib",
+    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
+    "test": "cross-env NODE_ENV=test karma start",
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
+    "tsd": "cpx \"./components/**/*.d.ts\" ./lib"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^0.14 || ~15.4.0",
+    "react-addons-css-transition-group": "^0.14.0 || ~15.4.0",
+    "react-dom": "^0.14.0 || ~15.4.0"
   },
-  "repository": "github:react-toolbox/react-toolbox"
+  "pre-commit": "lint:staged"
 }
diff --git a/server.js b/server.js
index 98d389f3b..19af0fa5e 100644
--- a/server.js
+++ b/server.js
@@ -1,14 +1,14 @@
-process.env.UV_THREADPOOL_SIZE = 100;
-
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
+const internalIp = require('internal-ip');
 const config = require('./webpack.config.development');
 
 const app = express();
 const compiler = webpack(config);
 
 app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
   publicPath: config.output.publicPath,
   stats: {
     colors: true
@@ -17,15 +17,21 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.get('*', (req, res) => {
+app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, './spec/index.html'));
 });
 
-app.listen(8080, '0.0.0.0', (err) => {
+const port = 8080;
+const ip = internalIp.v4();
+
+app.listen(port, (err) => {
   if (err) {
     console.log(err);
     return;
   }
 
-  console.log('Listening at http://0.0.0.0:8080');
+  console.log(' --------------------------------------');
+  console.log(`    Local: http://0.0.0.0:${port}`);
+  console.log(` External: http://${ip}:${port}`);
+  console.log(' --------------------------------------');
 });
diff --git a/spec/components/app_bar.js b/spec/components/app_bar.js
new file mode 100644
index 000000000..ba13fa297
--- /dev/null
+++ b/spec/components/app_bar.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import AppBar from '../../components/app_bar';
+
+const AppBarTest = () => (
+  <section>
+    <h5>AppBar</h5>
+    <br/>
+    <AppBar title='Title' />
+    <br/>
+    <AppBar leftIcon='menu' title='Title' />
+    <br/>
+    <AppBar leftIcon='arrow_back' title='Title' rightIcon='close' />
+    <br/>
+    <AppBar>
+      Custom content
+    </AppBar>
+  </section>
+);
+
+export default AppBarTest;
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
new file mode 100644
index 000000000..e9d2f9303
--- /dev/null
+++ b/spec/components/autocomplete.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import Autocomplete from '../../components/autocomplete';
+
+class AutocompleteTest extends React.Component {
+  state = {
+    simple: 'Spain',
+    simpleShowAll: 'England',
+    multipleArray: ['ES-es', 'TH-th'],
+    multipleObject: {'ES-es': 'Spain', 'TH-th': 'Thailand'},
+    countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
+    countriesObject: {
+      'EN-gb': 'England',
+      'EN-en': 'United States of America', 'EN-nz': 'New Zealand'
+    }
+  };
+
+  handleFocus = (event) => {
+    console.log('This is focused');
+    console.log(event);
+  };
+
+  handleMultipleArrayChange = (value) => {
+    this.setState({
+      multipleArray: value,
+      countriesObject: {
+        ...this.state.countriesObject,
+        ...(value[0] && !this.state.countriesObject[value[0]]) ? {[value[0]]: value[0]} : {}
+      }
+    });
+  };
+
+  handleMultipleObjectChange = (value) => {
+    this.setState({
+      multipleObject: value
+    });
+  };
+
+  handleSimpleChange = (value) => {
+    this.setState({simple: value});
+  };
+
+  handleSimpleShowAllChange = (value) => {
+    this.setState({simpleShowAll: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Autocomplete</h5>
+        <p>You can have a multiple or simple autocomplete.</p>
+
+        <Autocomplete
+          allowCreate
+          keepFocusOnChange
+          label="Pick multiple elements..."
+          onFocus={this.handleFocus}
+          onChange={this.handleMultipleArrayChange}
+          source={this.state.countriesObject}
+          suggestionMatch="anywhere"
+          value={this.state.multipleArray}
+        />
+
+        <Autocomplete
+          allowCreate
+          label="Pick multiple elements with object value..."
+          onChange={this.handleMultipleObjectChange}
+          showSelectedWhenNotInSource
+          source={this.state.countriesObject}
+          suggestionMatch="anywhere"
+          value={this.state.multipleObject}
+        />
+
+        <Autocomplete
+          hint="Elements up to you..."
+          label="Choose a country"
+          multiple={false}
+          onChange={this.handleSimpleChange}
+          source={this.state.countriesArray}
+          value={this.state.simple}
+        />
+
+        <Autocomplete
+          hint="Elements up to you..."
+          label="Choose a country (showing all suggestions)"
+          multiple={false}
+          onChange={this.handleSimpleShowAllChange}
+          showSuggestionsWhenValueIsSet
+          source={this.state.countriesArray}
+          value={this.state.simpleShowAll}
+        />
+      </section>
+    );
+  }
+}
+
+export default AutocompleteTest;
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
deleted file mode 100644
index c41b73476..000000000
--- a/spec/components/autocomplete.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import Autocomplete from '../../components/autocomplete';
-
-class AutocompleteTest extends React.Component {
-  state = {
-    countries: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
-    countries_obj: {
-      'ES-es': 'Spain',
-      'TH-th': 'Thailand',
-      'EN-gb': 'England',
-      'EN-en': 'USA'
-    }
-  };
-
-  onAutocompleteValues = () => {
-    console.log(this.refs.autocomplete_multiple.getValue());
-    console.log(this.refs.autocomplete_simple.getValue());
-  };
-
-  render () {
-    const countries_selected = ['USA', 'Tongo'];
-    const countries_obj_selected = 'TH-th';
-
-    return (
-      <section>
-        <h5>Autocomplete</h5>
-        <p>You can have a multiple or simple autocomplete.</p>
-
-        <Autocomplete
-          ref="autocomplete_multiple"
-          label="Choose a country"
-          onChange={this.onAutocompleteValues}
-          placeholder="Elements is up to you..."
-          dataSource={this.state.countries}
-          value={countries_selected}/>
-
-        <Autocomplete
-          ref="autocomplete_simple"
-          multiple={false}
-          onChange={this.onAutocompleteValues}
-          dataSource={this.state.countries_obj}
-          value={countries_obj_selected}/>
-      </section>
-    );
-  }
-}
-
-export default AutocompleteTest;
diff --git a/spec/components/avatar.js b/spec/components/avatar.js
new file mode 100644
index 000000000..8255435cf
--- /dev/null
+++ b/spec/components/avatar.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Avatar from '../../components/avatar';
+import GithubIcon from './github_icon';
+
+const AvatarTest = () => (
+  <section>
+    <h5>Avatars</h5>
+    <p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />}/>
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar image="https://placeimg.com/80/80/animals" />
+    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
+    <Avatar title="Javier"/>
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+  </section>
+);
+
+export default AvatarTest;
diff --git a/spec/components/button.js b/spec/components/button.js
new file mode 100644
index 000000000..03ed7d2ba
--- /dev/null
+++ b/spec/components/button.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import GithubIcon from './github_icon';
+import { Button, IconButton, BrowseButton } from '../../components/button';
+
+const ButtonTest = () => (
+  <section>
+    <h5>Buttons</h5>
+    <p>lorem ipsum...</p>
+
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
+    </Button>
+    <Button icon='bookmark' label='Bookmark' accent onRippleEnded={rippleEnded} />
+    <Button icon='bookmark' label='Bookmark' raised primary rippleMultiple={false} onRippleEnded={rippleEnded} />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating primary />
+    <Button icon='add' floating primary disabled />
+    <Button icon='add' floating accent mini />
+    <IconButton icon='favorite' accent />
+    <IconButton icon='favorite' inverse />
+    <IconButton icon='favorite' />
+    <IconButton icon='favorite' disabled />
+    <IconButton primary><GithubIcon/></IconButton>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
+    <h5>Icon Button Alignment</h5>
+    <p>
+      Icon Buttons should align in the vertical center, to see this we need to
+      put them next to text or highlight thier background color.
+    </p>
+    <IconButton icon='menu' style={{backgroundColor: 'red'}} inverse />
+    <span style={{verticalAlign: 'middle'}}>Menu</span>
+    <IconButton icon='menu' />
+    <span style={{verticalAlign: 'middle'}}>Menu</span>
+    <IconButton><GithubIcon /></IconButton>
+    <span style={{verticalAlign: 'middle'}}>Github</span>
+    <h5>Browse Button</h5>
+    <br/>
+    <BrowseButton icon='folder_open' label='BROWSE' raised primary />
+    &nbsp;
+    <BrowseButton label='BROWSE' raised />
+</section>
+);
+
+function rippleEnded () {
+  console.log('Ripple animation ended!');
+}
+
+export default ButtonTest;
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
deleted file mode 100644
index ee576e68f..000000000
--- a/spec/components/button.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import Button from '../../components/button';
-
-const ButtonTest = () => (
-  <section>
-    <h5>Buttons</h5>
-    <p>lorem ipsum...</p>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' />
-    <Button kind='flat' accent label='Inbox' icon='inbox' />
-    <Button kind='floating' primary icon='add' />
-    <Button kind='floating' primary disabled icon='add' />
-    <Button kind='floating' accent mini icon='add' />
-    <Button kind='flat' primary icon='add' label='Add this' />
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' loading />
-    <Button kind='flat' disabled icon='add' label='Add this' />
-  </section>
-);
-
-export default ButtonTest;
diff --git a/spec/components/card.js b/spec/components/card.js
new file mode 100644
index 000000000..ed14bcee1
--- /dev/null
+++ b/spec/components/card.js
@@ -0,0 +1,246 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import Button, { IconButton } from '../../components/button';
+import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';
+import style from '../style';
+
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
+
+const Spacer = () => <div style={{display: 'flex', flex: '1 1 auto'}}/>;
+const CardList = ({children}) => <ul className={style.cardsGroup}>{children}</ul>;
+const CardListItem = ({component, name}) => (
+  <li className={style.cardItem}>
+    <div className={style.cardItemContent}>{component}</div>
+    <div className={style.cardItemName}>{name}</div>
+  </li>
+);
+
+const cards = {
+  basic: [{
+    name: 'Basic Card',
+    component: (
+      <Card className={style.card}>
+        <CardTitle
+          title="Title goes here"
+          subtitle="Subtitle here"
+        />
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Raised Card',
+    component: (
+      <Card raised className={style.card}>
+        <CardTitle
+          title="Title goes here"
+          subtitle="Subtitle here"
+        />
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Customized header',
+    component: (
+      <Card className={style.card}>
+        <CardTitle
+          title={<u>Title component</u>}
+          subtitle={<u>Subtitle component</u>}
+        />
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }],
+  media: [{
+    name: '16:9 Card Media Area',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          aspectRatio="wide"
+          className={style.primary}
+        >
+          <CardTitle>Basic Card</CardTitle>
+        </CardMedia>
+        <CardTitle subtitle="You can also use a subtitle like this" />
+        <CardText>{dummyText}</CardText>
+      </Card>
+    )
+  }, {
+    name: '16:9 Card Media Image',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          aspectRatio="wide"
+          image="https://placeimg.com/800/450/nature"
+        />
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+        <CardText>{dummyText}</CardText>
+      </Card>
+    )
+  }, {
+    name: 'Square Media Card',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          contentOverlay
+          aspectRatio="square"
+          image="https://placeimg.com/700/700/nature"
+        >
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardActions>
+            <Button inverse label="Action 1" />
+            <Button inverse label="Action 2" />
+          </CardActions>
+        </CardMedia>
+      </Card>
+    )
+  }],
+  avatar: [{
+    name: 'Avatar Card Title',
+    component: (
+      <Card className={style.card}>
+        <CardTitle
+          avatar="https://placeimg.com/80/80/animals"
+          title="Avatar Card"
+          subtitle="An awesome basic card"
+        />
+        <CardMedia
+          aspectRatio="wide"
+          image="https://placeimg.com/800/450/nature"
+        />
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          <IconButton icon="share" />
+          <IconButton icon="favorite" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Video in a card',
+    component: (
+      <Card className={style.card}>
+        <CardTitle
+          avatar="https://placeimg.com/80/80/animals"
+          title="Avatar Card"
+          subtitle="An awesome basic card"
+        />
+        <CardMedia
+          aspectRatio="wide"
+        >
+          <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen />
+        </CardMedia>
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          <IconButton icon="report_problem" />
+          <Spacer/>
+          <IconButton icon="share" />
+          <IconButton icon="favorite" />
+        </CardActions>
+      </Card>
+    )
+  }],
+  horizontal: [{
+    name: 'Alternative Layout Example',
+    component: (
+      <Card className={style.card}>
+        <div className={style.cardRow}>
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardMedia
+            className={style.media}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Another Variation',
+    component: (
+      <Card>
+        <div className={style.cardRow}>
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardMedia
+            className={style.mediaLarge}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+      </Card>
+    )
+  }],
+  small: [{
+    name: 'Small Media Card',
+    component: (
+      <Card>
+        <CardMedia
+          aspectRatio="square"
+          image="https://placeimg.com/400/400/nature"
+        >
+          <CardTitle>Test</CardTitle>
+        </CardMedia>
+        <CardActions style={{justifyContent: 'center'}}>
+          <IconButton icon="thumb_down" />
+          <IconButton icon="thumb_up" />
+          <IconButton icon="turned_in_not" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Small Media Controls',
+    component: (
+      <Card style={{width: '140px'}}>
+        <CardMedia
+          contentOverlay
+          aspectRatio="square"
+          image="https://placeimg.com/280/280/people"
+        >
+          <CardActions style={{justifyContent: 'center'}}>
+            <IconButton inverse icon="fast_rewind" />
+            <IconButton inverse icon="play_arrow" />
+            <IconButton inverse icon="fast_forward" />
+          </CardActions>
+        </CardMedia>
+      </Card>
+    )
+  }]
+};
+
+const CardTest = () => (
+  <section>
+    <h5>Cards</h5>
+    <p>You have multiple options for cards. Combine different subcomponents to create your own:</p>
+
+    <div className={style.cards}>
+      {Object.keys(cards).map((key) => (
+        <CardList key={key}>
+          {cards[key].map((demo, i) => <CardListItem key={key + i} {...demo} />)}
+        </CardList>
+      ))}
+    </div>
+  </section>
+);
+
+export default CardTest;
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
deleted file mode 100644
index 0f4dde4b0..000000000
--- a/spec/components/card.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Card from '../../components/card';
-
-class CardTest extends React.Component {
-  onClick = () => {
-    console.log('onClick', arguments);
-  };
-
-  onActionClick () {
-    console.log('onClick', arguments);
-  }
-
-  render () {
-    const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
-    const actions = [
-      { label: 'Save', icon: 'add', className: 'flat accent', onClick: this.onActionClick.bind(this) },
-      { label: 'Close', className: 'flat', onClick: this.onActionClick.bind(this) }];
-
-    return (
-      <section>
-        <h5>Cards</h5>
-        <Card title='Default Card' />
-        <Card title='Default Card loading' loading />
-        <Card type='wide' title='Wide card' />
-        <Card title='Default Card with text' text={text} />
-        <Card title='Default Card with actions' actions={actions} />
-        <Card title='Default Card with text and image' text={text} image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
-        <Card title='Default Card with text, image and color' text={text} color='#e91e63' image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
-        <Card title='Default Card with text, image and color' text={text} color='#00bcd4' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
-        <Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} />
-        <Card type='wide' title='Wide Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
-        <Card type='image' title='javivelasco.jpg' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
-        <Card type='event' title='Featured event: May 24, 2016 7-11pm' color='#00bcd4' />
-      </section>
-    );
-  }
-}
-
-export default CardTest;
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.js
similarity index 88%
rename from spec/components/checkbox.jsx
rename to spec/components/checkbox.js
index 0772068da..5e395f109 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.js
@@ -2,17 +2,14 @@ import React from 'react';
 import Checkbox from '../../components/checkbox';
 
 class CheckboxTest extends React.Component {
-
   state = {
     checkbox_1: true,
     checkbox_2: false,
     checkbox_3: true
   };
 
-  handleChange = (key) => {
-    const state = this.state;
-    state[key] = !state[key];
-    this.setState(state);
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
   };
 
   handleFocus = () => {
@@ -38,7 +35,7 @@ class CheckboxTest extends React.Component {
         />
         <Checkbox
           checked={this.state.checkbox_2}
-          label="Not checked biatch"
+          label="Not checked checkbox"
           onChange={this.handleChange.bind(this, 'checkbox_2')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
diff --git a/spec/components/chip.js b/spec/components/chip.js
new file mode 100644
index 000000000..de554a07e
--- /dev/null
+++ b/spec/components/chip.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import Avatar from '../../components/avatar';
+import Chip from '../../components/chip';
+import style from '../style';
+
+class ChipTest extends React.Component {
+  state = {
+    deleted: false
+  };
+
+  handleDeleteClick = () => {
+    this.setState({
+      deleted: true
+    });
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Chips</h5>
+        <p>Chips can be deletable and have an avatar.</p>
+
+        <Chip>Example chip</Chip>
+        <Chip>
+          <span style={{textDecoration: 'line-through'}}>Standard</span>
+          <strong>Custom</strong> chip <small>(custom markup)</small>
+        </Chip>
+
+        {
+          this.state.deleted ? null : (
+            <Chip
+              deletable
+              onDeleteClick={this.handleDeleteClick}
+            >
+              Deletable Chip
+            </Chip>
+          )
+        }
+
+        <Chip>
+          <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+          <span>Avatar Chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar title="A" /><span>Initial chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+          <span>Image contact chip</span>
+        </Chip>
+
+        <div className={style.chipTruncateWrapper}>
+          <Chip deletable>
+            Truncated chip with long label. Lorem ipsum Amet quis mollit Excepteur id dolore.
+          </Chip>
+        </div>
+
+      </section>
+    );
+  }
+}
+
+export default ChipTest;
+
diff --git a/spec/components/dialog.js b/spec/components/dialog.js
new file mode 100644
index 000000000..ebe35197a
--- /dev/null
+++ b/spec/components/dialog.js
@@ -0,0 +1,95 @@
+import React, { PropTypes } from 'react';
+import Button from '../../components/button';
+import Dialog from '../../components/dialog';
+import Dropdown from '../../components/dropdown';
+
+const dialogTypes = [
+  {value: 'small', label: 'small'},
+  {value: 'normal', label: 'normal'},
+  {value: 'large', label: 'large'},
+  {value: 'fullscreen', label: 'fullscreen'}
+];
+
+class DialogTest extends React.Component {
+  state = {
+    active: false,
+    type: 'normal'
+  };
+
+  handleToggle = () => {
+    this.setState({
+      active: !this.state.active
+    });
+  };
+
+  changeDialogType = (value) => {
+    this.setState({type: value});
+  };
+
+  actions = [
+    { label: 'Disagree', primary: true, onClick: this.handleToggle },
+    { label: 'Agree', primary: true, onClick: this.handleToggle }
+  ];
+
+  render () {
+    return (
+      <section>
+        <h5>Dialog</h5>
+        <p>lorem ipsum...</p>
+        <Dropdown
+          label='Dialog Type'
+          auto
+          onChange={this.changeDialogType}
+          source={dialogTypes}
+          value={this.state.type}
+        />
+        <Button label='Show Dialog' raised primary onClick={this.handleToggle} />
+        <ContextComponent>
+          <Dialog
+            actions={this.actions}
+            active={this.state.active}
+            type={this.state.type}
+            title="Use Google's location service?"
+            onOverlayClick={this.handleToggle}
+            onEscKeyDown={this.handleToggle}
+          >
+            <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
+            <DialogChild />
+          </Dialog>
+        </ContextComponent>
+      </section>
+    );
+  }
+}
+
+class ContextComponent extends React.Component {
+  static propTypes = {
+    children: PropTypes.any
+  };
+
+  static childContextTypes = {
+    message: PropTypes.string
+  }
+
+  getChildContext () {
+    return {
+      message: 'Hi, I\'m the top container'
+    };
+  }
+
+  render () {
+    return this.props.children;
+  }
+}
+
+class DialogChild extends React.Component {
+  static contextTypes = {
+    message: PropTypes.string
+  }
+
+  render () {
+    return <p>This message comes from a parent: <strong>{this.context.message}</strong></p>;
+  }
+}
+
+export default DialogTest;
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
deleted file mode 100644
index e6aa9a0d0..000000000
--- a/spec/components/dialog.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import Button from '../../components/button';
-import Dialog from '../../components/dialog';
-
-class DialogTest extends React.Component {
-  state = {
-    title: 'Use Google\'s location service?',
-    actions: [
-      { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) },
-      { label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) }]
-  };
-
-  onClose () {
-    this.refs.dialog.hide();
-  }
-
-  onShow () {
-    this.refs.dialog.show();
-  }
-
-  render () {
-    return (
-      <section>
-        <h5>Dialog</h5>
-        <p>lorem ipsum...</p>
-        <Button kind='raised' label='Show Dialog' onClick={this.onShow.bind(this)} />
-        <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
-          <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
-        </Dialog>
-      </section>
-    );
-  }
-}
-
-export default DialogTest;
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.js
similarity index 68%
rename from spec/components/drawer.jsx
rename to spec/components/drawer.js
index 5611606cc..2ae7ab5ea 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.js
@@ -3,29 +3,38 @@ import Button from '../../components/button';
 import Drawer from '../../components/drawer';
 
 class DrawerTest extends React.Component {
-  handleClick = (ref, method) => {
-    this.refs[ref][method]();
+  state = {
+    leftActive: false,
+    rightActive: false
+  };
+
+  handleToggleLeft = () => {
+    this.setState({leftActive: !this.state.leftActive});
+  };
+
+  handleToggleRight = () => {
+    this.setState({rightActive: !this.state.rightActive});
   };
 
   render () {
     return (
       <section>
         <h5>Drawer</h5>
-        <p>You can navigate using a drawer to the left or right. They can be auto-closable or not.</p>
+        <p>You can navigate using a drawer to the left or right.</p>
 
-        <Drawer ref='left' hideable={true}>
+        <Drawer active={this.state.leftActive} onOverlayClick={this.handleToggleLeft}>
           <h5>Officia deserunt mollit.</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </Drawer>
 
-        <Drawer ref='right' type='right'>
-          <Button label='Close' onClick={this.handleClick.bind(this, 'right', 'hide')} />
+        <Drawer active={this.state.rightActive} type='right'>
+          <Button primary label='Close' onClick={this.handleToggleRight} />
         </Drawer>
 
         <nav>
-          <Button accent label='Drawer left hideable' kind='raised' onClick={this.handleClick.bind(this, 'left', 'show')} />
-          <Button primary label='Drawer right' kind='raised' onClick={this.handleClick.bind(this, 'right', 'show')} />
+          <Button label='Drawer left' raised primary onClick={this.handleToggleLeft} />
+          <Button label='Drawer right' raised accent onClick={this.handleToggleRight} />
         </nav>
       </section>
     );
diff --git a/spec/components/dropdown.js b/spec/components/dropdown.js
new file mode 100644
index 000000000..5688f4140
--- /dev/null
+++ b/spec/components/dropdown.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import Dropdown from '../../components/dropdown';
+import style from '../style';
+
+const countries = [
+  { value: 'EN-gb', label: 'England', img: 'http://' },
+  { value: 'ES-es', label: 'Spain', img: 'http://' },
+  { value: 'TH-th', label: 'Thailand', img: 'http://' },
+  { value: 'EN-en', label: 'USA', img: 'http://' },
+  { value: 'FR-fr', label: 'France', img: 'http://' }
+];
+
+class DropdownTest extends React.Component {
+  state = {
+    dropdown4: 'TH-th'
+  };
+
+  handleChange = (dropdown, value) => {
+    const newState = {};
+    newState[dropdown] = value;
+    this.setState(newState);
+  };
+
+  customDropdownItem (data) {
+    return (
+      <div className={style.dropdownTemplate}>
+        <img className={style.dropdownTemplateImage} src={data.img} />
+        <div className={style.dropdownTemplateContent}>
+          <strong>{data.label}</strong>
+          <small>{data.value}</small>
+        </div>
+      </div>
+    );
+  }
+
+  render () {
+    return (
+      <section>
+        <h5>Dropdown</h5>
+        <p>lorem ipsum...</p>
+
+        <Dropdown
+          label="Country"
+          ref="dropdown1"
+          onChange={this.handleChange.bind(this, 'dropdown1')}
+          source={countries}
+          template={this.customDropdownItem}
+          value={this.state.dropdown1}
+        />
+
+        <Dropdown
+          label="Country"
+          ref="dropdown4"
+          onChange={this.handleChange.bind(this, 'dropdown4')}
+          source={countries}
+          value={this.state.dropdown4}
+        />
+
+        <Dropdown
+          disabled
+          ref="dropdown3"
+          label="Country"
+          onChange={this.handleChange.bind(this, 'dropdown3')}
+          source={countries}
+        />
+
+        <Dropdown
+          label="Country"
+          ref="dropdown5"
+          onChange={this.handleChange.bind(this, 'dropdown5')}
+          source={countries}
+          required
+        />
+      </section>
+    );
+  }
+}
+
+export default DropdownTest;
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
deleted file mode 100644
index ed1a792a9..000000000
--- a/spec/components/dropdown.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import Dropdown from '../../components/dropdown';
-
-class DropdownTest extends React.Component {
-  state = {
-    countries: [
-      { value: 'ES-es', label: 'Spain', img: 'http://' },
-      { value: 'TH-th', label: 'Thailand', img: 'http://' },
-      { value: 'EN-gb', label: 'England', img: 'http://' },
-      { value: 'EN-en', label: 'USA', img: 'http://' },
-      { value: 'FR-fr', label: 'France', img: 'http://' }
-    ],
-    selected: 'TH-th'
-  };
-
-  handleChange = (dropdown) => {
-    console.log('[DROPDOWN]', dropdown.getValue());
-  };
-
-  customDropdownItem (data) {
-    const style = {
-      width: 32,
-      height: 32,
-      backgroundColor: '#ccc',
-      marginRight: 8
-    };
-
-    return (
-      <div data-flex="horizontal grow" data-flex-content="center">
-        <img src={data.img} data-flex-grow="min" style={style} />
-        <div data-flex-grow="max" data-flex="vertical" >
-          <strong>{data.label}</strong>
-          <small>{data.value}</small>
-        </div>
-      </div>
-    );
-  }
-
-  render () {
-    return (
-      <section>
-        <h5>Dropdown</h5>
-        <p>lorem ipsum...</p>
-        <Dropdown dataSource={this.state.countries} label="Countries" onChange={this.handleChange}/>
-        <Dropdown dataSource={this.state.countries} disabled={true} onChange={this.handleChange}/>
-        <Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={this.handleChange}/>
-        <Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.handleChange}/>
-      </section>
-    );
-  }
-}
-
-export default DropdownTest;
diff --git a/spec/components/font_icon.jsx b/spec/components/font_icon.js
similarity index 85%
rename from spec/components/font_icon.jsx
rename to spec/components/font_icon.js
index ba115a791..49dc010ee 100644
--- a/spec/components/font_icon.jsx
+++ b/spec/components/font_icon.js
@@ -3,14 +3,14 @@ import FontIcon from '../../components/font_icon';
 
 const FontIconTest = () => (
   <section>
-    <h2>Font Icon</h2>
+    <h5>Font Icons</h5>
     <p>lorem ipsum...</p>
 
     <FontIcon value="add"/>
     <FontIcon value="access_alarm"/>
     <FontIcon value="explore"/>
     <FontIcon value="zoom_in"/>
-    <FontIcon value="input"/>
+    <FontIcon>input</FontIcon>
   </section>
 );
 
diff --git a/spec/components/form.js b/spec/components/form.js
new file mode 100644
index 000000000..bd65da812
--- /dev/null
+++ b/spec/components/form.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import Form from '../../components/form';
+
+const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'France'];
+
+const countries = [
+  { value: 'EN-gb', label: 'England', img: 'http://' },
+  { value: 'ES-es', label: 'Spain', img: 'http://' },
+  { value: 'TH-th', label: 'Thailand', img: 'http://' },
+  { value: 'EN-en', label: 'USA', img: 'http://' },
+  { value: 'FR-fr', label: 'France', img: 'http://' }
+];
+
+const FormFields = {
+  autocomplete: {kind: 'Autocomplete', label: 'Autocomplete', source: countriesArray, value: ''},
+  input: {kind: 'Input', type: 'text', label: 'Input', value: '@soyjavi', required: true},
+  multiline: {kind: 'Input', type: 'text', label: 'Input (multiline)', multiline: true},
+  number: {kind: 'Input', type: 'number', label: 'Input (number)'},
+  checkbox: {kind: 'Checkbox', label: 'Checkbox'},
+  date: {kind: 'DatePicker', label: 'DatePicker', value: undefined},
+  dropdown: {kind: 'Dropdown', label: 'Dropdown', source: countries, value: countries[2].value},
+  time: {kind: 'TimePicker', label: 'TimePicker', value: undefined},
+  switch: {kind: 'Switch', label: 'Switch'},
+  slider: {kind: 'Slider', label: 'Slider', min: 0, max: 10, value: 4, pinned: true},
+  submit: {kind: 'Button', type: 'submit', label: 'Button () you a nomad?'}
+};
+
+class FormTest extends React.Component {
+  state = {
+    model: {
+      autocomplete: countriesArray[3],
+      input: 'soyjavi',
+      multiline: 'Overwritten',
+      number: 0,
+      checkbox: true
+    }
+  };
+
+  handleEvent = (type, event, form) => {
+    console.log(`[FORM.${type}]`, event, form);
+  };
+
+  handleChange = (field, value) => {
+    console.log('FORM.change', field, value);
+    const model = {
+      ...this.state.model,
+     [field]: value
+    };
+    this.setState({ model });
+  };
+
+  render () {
+    Object.keys(this.state.model).map((field) => {
+      const formField = FormFields[field];
+      formField[formField.hasOwnProperty('value') ? 'value' : 'checked'] = this.state.model[field];
+    });
+
+    console.log(FormFields);
+
+    return (
+      <section>
+        <h5>Form</h5>
+        <p>lorem ipsum...</p>
+
+        <Form
+          model={FormFields}
+          onChange={this.handleChange}
+          onError={this.handleEvent.bind(this, 'error')}
+          onValid={this.handleEvent.bind(this, 'valid')}
+          onSubmit={this.handleEvent.bind(this, 'submit')} />
+      </section>
+    );
+  }
+}
+
+export default FormTest;
diff --git a/spec/components/form.jsx b/spec/components/form.jsx
deleted file mode 100644
index 815557284..000000000
--- a/spec/components/form.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import Form from '../../components/form';
-
-class FormTest extends React.Component {
-  state = {
-    attributes: [
-      { ref: 'name', label: 'Your Name', required: true, storage: true},
-      { ref: 'description', multiline: true, label: 'Description', value: 'Doer'},
-      { ref: 'birthdate', type: 'date', label: 'Birthdate'},
-      { ref: 'years', type: 'number', label: 'Years'},
-      { ref: 'twitter', label: 'Nickname', disabled: true},
-      { ref: 'nomad', type: 'checkbox', label: 'Are you a nomad?', value: true},
-      { ref: 'cow', type: 'checkbox', label: 'Are you a cow?', value: false},
-      { ref: 'girl', type: 'checkbox', label: 'Are you a girl?', value: false, disabled: true},
-      { ref: 'nomad_2', type: 'radio', label: 'Are you a nomad_2?', value: true},
-      { ref: 'cow_2', type: 'radio', label: 'Are you a cow_2?', value: false},
-      { ref: 'girl_2', type: 'radio', label: 'Are you a girl_2?', value: false, disabled: true},
-      { ref: 'type_user', type: 'dropdown', label: 'Type of user', dataSource: [{value: 1, label: 'Normal'}, {value: 2, label: 'Root'}]},
-      { type: 'submit', label: 'Send', style: 'primary anchor', disabled: true}
-    ]
-  };
-
-  handleEvent = (type, event, form) => {
-    console.log(`[FORM.${type}]`, form.getValue());
-  };
-
-  render () {
-    return (
-      <section>
-        <h2>Form</h2>
-        <p>lorem ipsum...</p>
-
-        <Form
-          attributes={this.state.attributes}
-          storage="example-form"
-          onChange={this.handleEvent.bind(this, 'change')}
-          onError={this.handleEvent.bind(this, 'error')}
-          onValid={this.handleEvent.bind(this, 'valid')}
-          onSubmit={this.handleEvent.bind(this, 'submit')} />
-      </section>
-    );
-  }
-}
-
-export default FormTest;
diff --git a/spec/components/github_icon.js b/spec/components/github_icon.js
new file mode 100644
index 000000000..1dfd508ec
--- /dev/null
+++ b/spec/components/github_icon.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+export default GithubIcon;
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.js
similarity index 69%
rename from spec/components/icon_menu.jsx
rename to spec/components/icon_menu.js
index 601801ab6..146f9229c 100644
--- a/spec/components/icon_menu.jsx
+++ b/spec/components/icon_menu.js
@@ -1,7 +1,11 @@
 import React from 'react';
-import { MenuItem, IconMenu } from '../../components/menu';
+import { MenuItem, IconMenu, MenuDivider } from '../../components/menu';
 
 class IconMenuTest extends React.Component {
+  state = {
+    selected: undefined
+  };
+
   handleShow = () => {
     console.log('Showing menu...');
   };
@@ -10,8 +14,9 @@ class IconMenuTest extends React.Component {
     console.log('Hiding menu...');
   };
 
-  handleSelect = (value, instance) => {
-    console.log('Option selected', value, instance);
+  handleSelect = (value) => {
+    console.log('Option selected', value);
+    this.setState({selected: value});
   };
 
   handleItem = () => {
@@ -20,25 +25,27 @@ class IconMenuTest extends React.Component {
 
   render () {
     return (
-      <div>
+      <section>
         <h5>Icon Menus</h5>
         <p>Although a menu can be used indepently with any component, we are providing a common use case with the icon menu.</p>
         <IconMenu
-          icon='more-vert'
+          icon='more_vert'
           position='auto'
-          iconRipple={true}
-          menuRipple={true}
+          iconRipple
+          menuRipple
           onShow={this.handleShow}
           onHide={this.handleHide}
           onSelect={this.handleSelect}
-          selectable={false}
+          selectable
+          selected={this.state.selected}
         >
           <MenuItem onClick={this.handleItem} value='refresh' caption='Refresh' />
           <MenuItem value='help' caption='Help & Feedback' />
           <MenuItem value='settings' caption='Settings' />
+          <MenuDivider />
           <MenuItem value='signout' caption='Sign out' disabled />
         </IconMenu>
-      </div>
+      </section>
     );
   }
 }
diff --git a/spec/components/input.js b/spec/components/input.js
new file mode 100644
index 000000000..61c57a07a
--- /dev/null
+++ b/spec/components/input.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Input from '../../components/input';
+
+class InputTest extends React.Component {
+  state = {
+    normal: 'Tony Stark',
+    fixedLabel: '',
+    withIcon: '',
+    withCustomIcon: '',
+    withHintCustomIcon: '',
+    multilineHint: 'Long Description here',
+    multilineRows: 'A\n\B\nC\nD\nE\nF'
+  };
+
+  handleChange = (name, value) => {
+    this.setState({...this.state, [name]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Inputs</h5>
+        <p>lorem ipsum...</p>
+        <Input
+          type='text'
+          value={this.state.normal}
+          label='First Name' onChange={this.handleChange.bind(this, 'normal')}
+          maxLength={12}
+        />
+        <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
+        <Input type='text' value='Read only' readOnly label='Phone Number' />
+        <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
+        <Input type='text' value={this.state.multilineRows} label='Row Limited Description' hint='Enter Description' multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
+        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon='favorite' />
+        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon='share' />
+      </section>
+    );
+  }
+}
+
+export default InputTest;
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
deleted file mode 100644
index 5b2be6f49..000000000
--- a/spec/components/input.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import Input from '../../components/input';
-
-const InputTest = () => (
-  <section>
-    <h5>Inputs</h5>
-    <p>lorem ipsum...</p>
-    <Input type='text' label='Firstname' />
-    <Input type='email' label='Label fixed' floating={false} />
-    <Input type='text' label='Phone Number' />
-    <Input type='text' label='Disabled field' disabled />
-    <Input type='tel' label='With icon' icon='phone' />
-    <Input type='email' label='With icon' icon='email' />
-    <Input type='date' label='Date' />
-    <Input type='time' label='Time' />
-  </section>
-);
-
-export default InputTest;
diff --git a/spec/components/layout.js b/spec/components/layout.js
new file mode 100644
index 000000000..6d74aa181
--- /dev/null
+++ b/spec/components/layout.js
@@ -0,0 +1,153 @@
+import React from 'react';
+import { AppBar, Checkbox, Dropdown, IconButton, RadioGroup, RadioButton } from '../../components';
+import { Layout, NavDrawer, Panel, Sidebar } from '../../components';
+
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
+
+const drawerItems = dummyText.split(/\s/).map(function (word, index) {
+    return (<li key={index}>{word}</li>);
+});
+
+const sidebarWidths = [
+    { value: 4, label: '4 incr' },
+    { value: 5, label: '5 incr' },
+    { value: 6, label: '6 incr' },
+    { value: 7, label: '7 incr' },
+    { value: 8, label: '8 incr' },
+    { value: 9, label: '9 incr' },
+    { value: 10, label: '10 incr' },
+    { value: 25, label: '25%'},
+    { value: 33, label: '33%'},
+    { value: 50, label: '50%'},
+    { value: 66, label: '66%'},
+    { value: 75, label: '75%'}
+];
+
+class LayoutTest extends React.Component {
+
+    state = {
+        permanentAt: 'lg',
+        drawerOpen: false,
+        drawerPinned: false,
+        sidebarPinned: false,
+        sidebarWidth: 5,
+        loremIpsums: 1
+    };
+
+    toggleDrawer = (event) => {
+        event.stopPropagation();
+        this.setState({ drawerOpen: !this.state.drawerOpen });
+    };
+
+    toggleDrawerPinned = () => {
+        this.setState({ drawerPinned: !this.state.drawerPinned });
+    };
+
+    changeDrawerPermanentAt = (value) => {
+        this.setState({ permanentAt: value });
+    };
+
+    toggleSidebar = (value) => {
+        this.setState({ sidebarPinned: (value === true) });
+    };
+
+    changeSidebarWidth = (value) => {
+        this.setState({ sidebarWidth: value });
+    };
+
+    fewer = (event) => {
+        event.preventDefault();
+        this.setState({ loremIpsums: Math.max(0, this.state.loremIpsums - 1) });
+    };
+
+    more = (event) => {
+        event.preventDefault();
+        this.setState({ loremIpsums: this.state.loremIpsums + 1 });
+    };
+
+    render () {
+
+        const rng = Array.from(new Array(this.state.loremIpsums), (x, i) => i);
+
+        return (
+            <section>
+                <h5>Layout</h5>
+                <div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
+                    <Layout>
+                        <NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
+                          <AppBar title='Drawer'/>
+                            <ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
+                                {drawerItems}
+                            </ul>
+                        </NavDrawer>
+                        <Panel>
+                            <AppBar leftIcon='menu' onLeftIconClick={this.toggleDrawer}/>
+                            <div style={{ flex: 1, overflowY: 'auto' }}>
+                                <div style={{ display: 'flex', flexDirection: 'row' }}>
+                                    <section style={{ margin: '1.8rem'}}>
+                                        <h5>NavDrawer State</h5>
+                                        <p>Drawer becomes permanent when window is....</p>
+                                        <RadioGroup name='permanentAt' value={this.state.permanentAt} onChange={this.changeDrawerPermanentAt}>
+                                          <RadioButton label='Small' value='sm'/>
+                                          <RadioButton label='Medium' value='md' />
+                                          <RadioButton label='Large' value='lg' />
+                                          <RadioButton label='Extra Large' value='xl' />
+                                          <RadioButton label='Never' value={undefined} />
+                                        </RadioGroup>
+                                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
+                                    </section>
+
+                                    <section style={{ margin: '1.8rem'}}>
+                                        <h5>Sidebar State</h5>
+                                        <RadioGroup name='sidebarPinned' value={this.state.sidebarPinned} onChange={this.toggleSidebar}>
+                                            <RadioButton label='Pinned' value />
+                                            <RadioButton label='Unpinned' value={false} />
+                                        </RadioGroup>
+                                        <h5>Sidebar Width</h5>
+                                            <Dropdown
+                                                auto
+                                                onChange={this.changeSidebarWidth}
+                                                source={sidebarWidths}
+                                                value={this.state.sidebarWidth}
+                                              />
+                                    </section>
+                                </div>
+
+                                <section style={{ margin: '1.8rem' }}>
+                                    <h5>Scrollable Content</h5>
+                                    <p>
+                                        The center pane should scroll independently from
+                                        the sides. Show
+                                        [<a href='#' onClick={this.fewer}>-</a>]
+                                        {`${this.state.loremIpsums}`}
+                                        [<a href='#' onClick={this.more}>+</a>] paragraph(s) below this one.
+                                    </p>
+                                    {rng.map((x, i) => <p key={i}>{dummyText}</p>)}
+                                </section>
+                            </div>
+                        </Panel>
+                        <Sidebar pinned={this.state.sidebarPinned} width={Number(this.state.sidebarWidth)}>
+                            <div><IconButton icon='close' onClick={this.toggleSidebar}/></div>
+                            <div style={{ flex: 1, margin: '1.8rem' }}>
+                                <h5>Sidebar</h5>
+                                <p>
+                                    Sidebar content should be secondary to the main content on a page.
+                                </p>
+                                <p>
+                                    The width of the sidebar can be set either in <em>increments</em>
+                                    (where 1 increment = height of the app bar) or in percentages.
+                                </p>
+                                <p>
+                                    As per the spec, the right sidebar expands to cover the entire
+                                    screen at small screen sizes.
+                                </p>
+                            </div>
+                        </Sidebar>
+                    </Layout>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default LayoutTest;
diff --git a/spec/components/link.jsx b/spec/components/link.js
similarity index 100%
rename from spec/components/link.jsx
rename to spec/components/link.js
diff --git a/spec/components/list.js b/spec/components/list.js
new file mode 100644
index 000000000..45a4d6aa6
--- /dev/null
+++ b/spec/components/list.js
@@ -0,0 +1,190 @@
+import React from 'react';
+import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from '../../components/list';
+import { Button } from '../../components/button';
+import Avatar from '../../components/avatar';
+import FontIcon from '../../components/font_icon';
+
+const listStyle = {
+  border: '1px solid #EEE',
+  display: 'inline-block',
+  minWidth: 340
+};
+
+class ListTest extends React.Component {
+  state = {
+    checkbox1: false,
+    checkbox2: true,
+    checkbox3: true
+  };
+
+  handleCheckboxChange = (field) => {
+    const newState = {};
+    newState[field] = !this.state[field];
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>With simple text and icons</h5>
+        <p>This list can be used inside a Drawer for a list of options or as navigation.</p>
+        <div style={listStyle}>
+          <List selectable ripple>
+            <ListSubHeader caption='Contacts' />
+            <ListItem caption='Inbox' leftIcon='inbox' />
+            <ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
+            <ListItem caption='Trash' leftIcon='delete' />
+            <ListItem caption='Spam' leftIcon='report' />
+          </List>
+        </div>
+
+        <h5>Two text lines, avatar and right icon</h5>
+        <p>Useful for a list of contacts or similar.</p>
+        <div style={listStyle}>
+          <List selectable ripple>
+            <ListSubHeader caption='Contacts' />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
+              caption='Alfonso Rocha'
+              legend='Product Manager at Fon'
+              rightIcon='star'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
+              caption='Javi Velasco'
+              legend='Frontend engineer at Audiense'
+              rightIcon='star'
+            />
+            <ListItem
+              avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
+              caption='Javi Jiménez'
+              legend='Frontend engineer at MediaSmart'
+              rightIcon='star'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/755797598565531649/Whsf9259.jpg'
+              caption='Tobias Van Schneider'
+              legend='Designer at Spotify'
+              rightIcon='star'
+            />
+          </List>
+        </div>
+
+        <h5>Two line options and checkbox items</h5>
+        <p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
+        <div style={listStyle}>
+          <List>
+            <ListSubHeader caption='General' />
+            <ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
+            <ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
+          </List>
+          <ListDivider />
+          <List>
+            <ListSubHeader caption='Hangout notifications' />
+            <ListCheckbox
+              caption='Notifications'
+              checked={this.state.checkbox1}
+              legend='Allow notifications'
+              onChange={this.handleCheckboxChange.bind(this, 'checkbox1')}
+            />
+            <ListCheckbox
+              caption='Sound'
+              checked={this.state.checkbox2}
+              legend='Hangouts message'
+              onChange={this.handleCheckboxChange.bind(this, 'checkbox2')}
+            />
+            <ListCheckbox
+              caption='Video sounds'
+              checked
+              disabled
+              legend='Hangouts video call'
+            />
+          </List>
+        </div>
+
+        <h5>Avatar, single text and icon</h5>
+        <p>Similar to a previous one but only with one text line</p>
+        <div style={listStyle}>
+          <List>
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
+              caption='Alfonso Rocha'
+              rightIcon='mail'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
+              caption='Javi Velasco'
+              rightIcon='mail'
+            />
+            <ListItem
+              avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
+              caption='Javi Jiménez'
+              rightIcon='mail'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/755797598565531649/Whsf9259.jpg'
+              caption='Tobias Van Schneider'
+              rightIcon='mail'
+            />
+          </List>
+        </div>
+
+        <h5>Simple with just one text line</h5>
+        <p>The most simple list.</p>
+        <div style={listStyle}>
+          <List>
+            <ListItem caption='Alfonso Rocha' />
+            <ListItem caption='Javi Velasco' />
+            <ListItem caption='Javi Jiménez' />
+            <ListItem caption='Tobias Van Schneider' />
+            <ListDivider />
+            <ListItem caption='Other people' />
+          </List>
+        </div>
+
+        <h5> List with custom components </h5>
+        <p> Using custom components in list item </p>
+        <div style={listStyle}>
+          <List ripple selectable>
+            <ListItem leftIcon='send' rightIcon='done' caption='Reference item'/>
+            <ListItem rightIcon='done' caption='Item with custom left icons'>
+              <FontIcon value='send' />
+              <Avatar image='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'/>
+            </ListItem>
+            <ListItem leftIcon='send'>
+              <ListItemContent caption='custom right icons' legend='ListItemContent acts as a divider'/>
+              <FontIcon value='done' />
+              <FontIcon value='undo' />
+            </ListItem>
+            <ListItem leftIcon='mail' rightIcon='create'>
+              <ListItemContent>
+                <ListItemText primary> Custom Caption </ListItemText>
+              </ListItemContent>
+            </ListItem>
+            <ListItem leftIcon='save' rightIcon='delete'>
+              <ListItemContent>
+                <ListItemText primary onClick={() => {console.log('clicked caption');}}>
+                  Custom caption with events
+                </ListItemText>
+                <ListItemText> Custom legend with correct height </ListItemText>
+              </ListItemContent>
+            </ListItem>
+            <ListItem caption='Item with a button'>
+              <Button icon='save' label='save' onClick={() => console.log('clicked button')}/>
+            </ListItem>
+            <ListItem caption='Item with overlayed click events' onClick={() => console.log('clicked row')}>
+              <FontIcon value='send' onClick={() => console.log('clicked icon')}/>
+              <Avatar
+                image='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
+                onMouseDown={() => console.log('avatar mouse down, should see ripple')}
+                onClick={() => console.log('clicked avatar')}
+              />
+            </ListItem>
+          </List>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default ListTest;
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
deleted file mode 100644
index ae1fdcd39..000000000
--- a/spec/components/list.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';
-
-const listStyle = {
-  border: '1px solid #EEE',
-  display: 'inline-block',
-  minWidth: 340
-};
-
-const ListTest = () => (
-  <section>
-    <h5>With simple text and icons</h5>
-    <p>This list can be used inside a Drawer for a list of options or as navigation.</p>
-    <div style={listStyle}>
-      <List selectable ripple>
-        <ListSubHeader caption='Contacts' />
-        <ListItem caption='Inbox' leftIcon='inbox' />
-        <ListItem caption='Outbox' leftIcon='send' />
-        <ListItem caption='Trash' leftIcon='delete' />
-        <ListItem caption='Spam' leftIcon='report' />
-      </List>
-    </div>
-
-    <h5>Two text lines, avatar and right icon</h5>
-    <p>Useful for a list of contacts or similar.</p>
-    <div style={listStyle}>
-      <List selectable ripple>
-        <ListSubHeader caption='Contacts' />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
-          caption='Alfonso Rocha'
-          legend='Product Manager at Fon'
-          rightIcon='star'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
-          caption='Javi Velasco'
-          legend='Frontend engineer at Socialbro'
-          rightIcon='star'
-        />
-        <ListItem
-          avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
-          caption='Javi Jiménez'
-          legend='Frontend engineer at MediaSmart'
-          rightIcon='star'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
-          caption='Tobias Van Schneider'
-          legend='Designer at Spotify'
-          rightIcon='star'
-        />
-      </List>
-    </div>
-
-    <h5>Two line options and checkbox items</h5>
-    <p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
-    <div style={listStyle}>
-      <List>
-        <ListSubHeader caption='General' />
-        <ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
-        <ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
-      </List>
-      <ListDivider />
-      <List>
-        <ListSubHeader caption='Hangout notifications' />
-        <ListCheckbox caption='Notifications' legend='Allow notifications' />
-        <ListCheckbox checked caption='Sound' legend='Hangouts message' />
-        <ListCheckbox disabled caption='Video sounds' legend='Hangouts video call' />
-      </List>
-    </div>
-
-    <h5>Avatar, sinle text and icon</h5>
-    <p>Similar to a previous one but only with one text line</p>
-    <div style={listStyle}>
-      <List>
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
-          caption='Alfonso Rocha'
-          rightIcon='mail'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
-          caption='Javi Velasco'
-          rightIcon='mail'
-        />
-        <ListItem
-          avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
-          caption='Javi Jiménez'
-          rightIcon='mail'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
-          caption='Tobias Van Schneider'
-          rightIcon='mail'
-        />
-      </List>
-    </div>
-
-    <h5>Simple with just one text line</h5>
-    <p>The most simple list.</p>
-    <div style={listStyle}>
-      <List>
-        <ListItem caption='Alfonso Rocha' />
-        <ListItem caption='Javi Velasco' />
-        <ListItem caption='Javi Jiménez' />
-        <ListItem caption='Tobias Van Schneider' />
-        <ListDivider />
-        <ListItem caption='Other people' />
-      </List>
-    </div>
-  </section>
-);
-
-export default ListTest;
diff --git a/spec/components/menu.jsx b/spec/components/menu.js
similarity index 78%
rename from spec/components/menu.jsx
rename to spec/components/menu.js
index 59c6110dc..4fc787d20 100644
--- a/spec/components/menu.jsx
+++ b/spec/components/menu.js
@@ -2,8 +2,13 @@ import React from 'react';
 import { Menu, MenuItem, MenuDivider } from '../../components/menu';
 
 class MenuTest extends React.Component {
-  handleSelect = (e, instance) => {
-    console.log('Menu selection changed!!, now its', instance.getValue());
+  state = {
+    value: undefined
+  };
+
+  handleSelect = (item) => {
+    console.log('Menu selection changed!!, now its', item);
+    this.setState({value: item});
   };
 
   handleItemClick = () => {
@@ -16,7 +21,7 @@ class MenuTest extends React.Component {
         <h5>Menus</h5>
         <p>This tabs can be disabled or hidden</p>
 
-        <Menu onSelect={this.handleSelect} selectable={false}>
+        <Menu onSelect={this.handleSelect} selectable={false} selected={this.state.value}>
           <MenuItem value='foo' caption='Caption' />
           <MenuItem onClick={this.handleItemClick} value='bar' caption='Caption & Shortcut' shortcut='Ctrl + P' />
           <MenuItem caption='Disabled ...' disabled shortcut='Ctrl + P' />
diff --git a/spec/components/navigation.js b/spec/components/navigation.js
new file mode 100644
index 000000000..8a7def39e
--- /dev/null
+++ b/spec/components/navigation.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Navigation from '../../components/navigation';
+import Link from '../../components/link';
+
+const actions = [
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
+];
+
+const NavigationTest = () => (
+  <section>
+    <h5>Navigation</h5>
+    <p>lorem ipsum...</p>
+    <Navigation type='horizontal' actions={actions} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
+  </section>
+);
+
+export default NavigationTest;
diff --git a/spec/components/navigation.jsx b/spec/components/navigation.jsx
deleted file mode 100644
index 50e2462da..000000000
--- a/spec/components/navigation.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import Navigation from '../../components/navigation';
-
-class NavigationTest extends React.Component {
-  state = {
-    routes: [
-      { label: 'Github', route: 'http://www.github.com/', icon: 'bookmark' },
-      { label: 'Mail', route: 'http://mail.google.com/', icon: 'inbox' }
-    ]
-  };
-
-  render () {
-    return (
-      <section>
-        <h5>Navigation</h5>
-        <p>lorem ipsum...</p>
-
-        <Navigation type='vertical' routes={this.state.routes} />
-      </section>
-    );
-  }
-}
-
-export default NavigationTest;
diff --git a/spec/components/pickers.js b/spec/components/pickers.js
new file mode 100644
index 000000000..2f3c128b4
--- /dev/null
+++ b/spec/components/pickers.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import DatePicker from '../../components/date_picker';
+import TimePicker from '../../components/time_picker';
+
+
+const datetime = new Date(2015, 10, 16);
+const min_datetime = new Date(new Date(datetime).setDate(8));
+const max_datetime = new Date(new Date(datetime).setDate(24));
+datetime.setHours(17);
+datetime.setMinutes(28);
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+const enabledDisabledDates = [new Date(today.getTime()), new Date(today.setDate(today.getDate() - 1))];
+
+class PickersTest extends React.Component {
+  state = {
+    date2: datetime,
+    firstActive: false,
+    time2: datetime
+  };
+
+  handleChange = (item, value) => {
+    const newState = {};
+    newState.firstActive = false;
+    newState[item] = value;
+    this.setState(newState);
+  };
+
+  makeFirstUnactive = () => {
+    this.setState({ firstActive: false });
+  };
+
+  localeExample = {
+    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+  }
+
+  render () {
+    return (
+      <section>
+        <h5>Pickers</h5>
+        <p>Date pickers and time pickers with Material flavour.</p>
+
+        <DatePicker
+          active={this.state.firstActive}
+          label='Birthdate'
+          onChange={this.handleChange.bind(this, 'date1')}
+          onEscKeyDown={this.makeFirstUnactive}
+          onOverlayClick={this.makeFirstUnactive}
+          value={this.state.date1}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='With locale (string) - Spanish (string: en|es|af|ar|be|bg|bn|bo|br|bs|ca|gl|eu|pt|it|fr)'
+          locale='es'
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
+        />
+
+        <DatePicker
+          label='With locale (object) - Basque'
+          locale={this.localeExample}
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
+        />
+
+        <DatePicker
+          label='Expiration date (Read Only)'
+          maxDate={max_datetime}
+          minDate={min_datetime}
+          onChange={this.handleChange.bind(this, 'date2')}
+          readonly
+          value={this.state.date2}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='Formatted Date'
+          inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
+          onChange={this.handleChange.bind(this, 'date3')}
+          value={this.state.date3}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='Auto Picker'
+          autoOk
+          sundayFirstDayOfWeek
+          onChange={this.handleChange.bind(this, 'date4')}
+          value={this.state.date4}
+        />
+
+        <DatePicker
+          label='Date picker with enabled dates'
+          onChange={this.handleChange.bind(this, 'date5')}
+          enabledDates={enabledDisabledDates}
+          value={this.state.date5}
+        />
+
+        <DatePicker
+          label='Date picker with disabled dates'
+          onChange={this.handleChange.bind(this, 'date6')}
+          disabledDates={enabledDisabledDates}
+          value={this.state.date6}
+        />
+
+        <TimePicker
+          label='Start time'
+          onChange={this.handleChange.bind(this, 'time1')}
+          onEscKeyDown={() => console.log('esc key down')}
+          onOverlayClick={() => console.log('overlay click')}
+          value={this.state.time1}
+        />
+
+        <TimePicker
+          format='ampm'
+          label='Finishing time (Read Only)'
+          readonly
+          onChange={this.handleChange.bind(this, 'time2')}
+          value={this.state.time2}
+        />
+      </section>
+    );
+  }
+}
+
+export default PickersTest;
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
deleted file mode 100644
index b09116199..000000000
--- a/spec/components/pickers.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import DatePicker from '../../components/date_picker';
-import TimePicker from '../../components/time_picker';
-
-const PickersTest = () => {
-  const datetime = new Date(1995, 11, 17);
-  datetime.setHours(17);
-  datetime.setMinutes(28);
-
-  return (
-    <section>
-      <h5>Pickers</h5>
-      <p>Date pickers and time pickers with Material flavour.</p>
-
-      <DatePicker />
-      <DatePicker value={datetime} />
-
-      <TimePicker />
-      <TimePicker value={datetime} format='ampm' />
-    </section>
-  );
-};
-
-export default PickersTest;
diff --git a/spec/components/progress.jsx b/spec/components/progress.js
similarity index 86%
rename from spec/components/progress.jsx
rename to spec/components/progress.js
index 9683f99df..e032fe2b2 100644
--- a/spec/components/progress.jsx
+++ b/spec/components/progress.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ProgressBar from '../../components/progress_bar';
+import style from '../style';
 
 const initialState = {
   progress: 0,
@@ -47,6 +48,8 @@ class ProgressBarTest extends React.Component {
         <ProgressBar mode='indeterminate'/>
         <p style={{margin: '10px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate'/>
+        <p style={{margin: '10px auto'}}>Circular with custom size</p>
+        <ProgressBar className={style.customSizedProgress} type='circular' mode='indeterminate' theme={style} />
       </section>
     );
   }
diff --git a/spec/components/radio.jsx b/spec/components/radio.js
similarity index 78%
rename from spec/components/radio.jsx
rename to spec/components/radio.js
index 711e7088c..0d88b462e 100644
--- a/spec/components/radio.jsx
+++ b/spec/components/radio.js
@@ -2,8 +2,13 @@ import React from 'react';
 import { RadioGroup, RadioButton } from '../../components/radio';
 
 class RadioGroupTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('Changed!', { comic: instance.getValue()});
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    console.log('Changed!', { comic: value});
+    this.setState({value});
   };
 
   handleFocus = () => {
@@ -20,7 +25,7 @@ class RadioGroupTest extends React.Component {
         <h5>Radio Button</h5>
         <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
 
-        <RadioGroup ref='group' name='comic' value='vvendetta' onChange={this.handleChange}>
+        <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
           <RadioButton label='The Walking Dead' value='thewalkingdead'/>
           <RadioButton label='From Hell' value='fromhell' disabled/>
           <RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>
diff --git a/spec/components/slider.js b/spec/components/slider.js
new file mode 100644
index 000000000..f6977bd7e
--- /dev/null
+++ b/spec/components/slider.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import Slider from '../../components/slider';
+
+class SliderTest extends React.Component {
+  state = {
+    slider2: 5,
+    slider3: 1
+  };
+
+  handleChange = (slider, value) => {
+    this.setState({...this.state, [slider]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Sliders</h5>
+        <p>Normal slider</p>
+        <Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
+        <p>With steps, initial value and editable</p>
+        <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
+        <p>Pinned and with snaps</p>
+        <Slider pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled status</p>
+        <Slider disabled pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+      </section>
+    );
+  }
+}
+
+export default SliderTest;
diff --git a/spec/components/slider.jsx b/spec/components/slider.jsx
deleted file mode 100644
index d16c42476..000000000
--- a/spec/components/slider.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Slider from '../../components/slider';
-
-const SliderTest = () => (
-  <section>
-    <h5>Sliders</h5>
-    <p>Normal slider</p>
-    <Slider />
-    <p>With steps, initial value and editable</p>
-    <Slider value={5} min={0} max={10} editable />
-    <p>Pinned and with snaps</p>
-    <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
-  </section>
-);
-
-export default SliderTest;
diff --git a/spec/components/snackbar.js b/spec/components/snackbar.js
new file mode 100644
index 000000000..c9c83ab05
--- /dev/null
+++ b/spec/components/snackbar.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Button from '../../components/button';
+import Snackbar from '../../components/snackbar';
+
+class SnackbarTest extends React.Component {
+  state = {
+    active: false
+  };
+
+  handleSnackbarClick = () => {
+    this.setState({active: false});
+  };
+
+  handleSnackbarTimeout = () => {
+    this.setState({active: false});
+  };
+
+  handleClick = () => {
+    this.setState({active: true});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Snackbars & Toasts</h5>
+        <p>lorem ipsum...</p>
+        <Button label='Show snackbar' primary raised onClick={this.handleClick} />
+        <Snackbar
+          action='http://github.com/Hide'
+          active={this.state.active}
+          timeout={2000}
+          onClick={this.handleSnackbarClick}
+          onTimeout={this.handleSnackbarTimeout}
+          type='warning'
+        >
+          Snackbar action <strong>cancel</strong>
+        </Snackbar>
+      </section>
+    );
+  }
+}
+
+export default SnackbarTest;
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
deleted file mode 100644
index 61783a177..000000000
--- a/spec/components/snackbar.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Button from '../../components/button';
-import Snackbar from '../../components/snackbar';
-
-class SnackbarTest extends React.Component {
-  handleClick = (event, snackbar) => {
-    console.log('handleClick', event, snackbar);
-  };
-
-  handleSnackbar = () => {
-    this.refs.snackbar.show();
-  };
-
-  render () {
-    return (
-      <section>
-        <h5>Snackbars & Toasts</h5>
-        <p>lorem ipsum...</p>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
-        <Snackbar
-          ref='snackbar'
-          action='http://github.com/Dismiss'
-          icon='question-answer'
-          label='Snackbar action cancel'
-          onClick={this.handleClick}
-          type='cancel'
-        />
-      </section>
-    );
-  }
-}
-
-export default SnackbarTest;
diff --git a/spec/components/switch.js b/spec/components/switch.js
new file mode 100644
index 000000000..7a8a23f93
--- /dev/null
+++ b/spec/components/switch.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Switch from '../../components/switch';
+
+class SwitchTest extends React.Component {
+  state = {
+    switch_1: true,
+    switch_2: false,
+    switch_3: true
+  };
+
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Switches</h5>
+        <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
+        <Switch
+          checked={this.state.switch_1}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 'switch_1')}
+        />
+        <Switch
+          checked={this.state.switch_2}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 'switch_2')}
+        />
+        <Switch
+          checked={this.state.switch_3}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 'switch_3')}
+        />
+      </section>
+    );
+  }
+}
+
+export default SwitchTest;
diff --git a/spec/components/switch.jsx b/spec/components/switch.jsx
deleted file mode 100644
index d3015b2d7..000000000
--- a/spec/components/switch.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import Switch from '../../components/switch';
-
-class SwitchTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('[Switch] Changed', instance.getValue());
-  };
-
-  render () {
-    return (
-      <section>
-        <h5>Switches</h5>
-        <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
-        <Switch label="Push notifications" />
-        <Switch checked label="Mail notifications" onChange={this.handleChange} />
-        <Switch disabled label="Nothing, thanks"/>
-      </section>
-    );
-  }
-}
-
-export default SwitchTest;
diff --git a/spec/components/table.jsx b/spec/components/table.js
similarity index 50%
rename from spec/components/table.jsx
rename to spec/components/table.js
index b659e878d..8598aa632 100644
--- a/spec/components/table.jsx
+++ b/spec/components/table.js
@@ -3,27 +3,32 @@ import Table from '../../components/table';
 
 const UserModel = {
   name: {type: String},
-  twitter: {type: String},
+  twitter: {type: String, title: '@twitter'},
   birthdate: {type: Date},
-  cats: {type: Number},
+  cats: {type: Number, onChange (...args) { console.log('changes:', ...args); } },
   dogs: {type: Number},
-  owner: {type: Boolean}
+  owner: {type: Boolean }
 };
 
 const users = [
   {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
-  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true},
-  {name: 'chinorro'}
+  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true}
 ];
 
 class TableTest extends React.Component {
+  state = {
+    selected: [],
+    source: users
+  };
 
-  handleTableChange = (event, instance, row) => {
-    console.log('handleTableChange', instance.getValue(), row);
+  handleChange = (row, key, value) => {
+    const source = this.state.source;
+    source[row][key] = value;
+    this.setState({source});
   };
 
-  handleTableRowSelect = (event, row) => {
-    console.log('handleTableRowSelect', row, this.refs.table.getSelected());
+  handleSelect = (selected) => {
+    this.setState({selected});
   };
 
   render () {
@@ -32,11 +37,12 @@ class TableTest extends React.Component {
         <h5>Table</h5>
         <p style={{marginBottom: '10px'}}>Organized data.</p>
         <Table
-          ref='table'
           model={UserModel}
-          dataSource={users}
-          onChange={this.handleTableChange}
-          onSelect={this.handleTableRowSelect}
+          onChange={this.handleChange}
+          onSelect={this.handleSelect}
+          selectable
+          selected={this.state.selected}
+          source={this.state.source}
         />
       </section>
     );
diff --git a/spec/components/tabs.js b/spec/components/tabs.js
new file mode 100644
index 000000000..0ce6018d8
--- /dev/null
+++ b/spec/components/tabs.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Tabs, Tab } from '../../components/tabs';
+
+class TabsTest extends React.Component {
+  state = {
+    index: 1,
+    fixedIndex: 1,
+    inverseIndex: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  handleFixedTabChange = (index) => {
+    this.setState({fixedIndex: index});
+  };
+
+  handleInverseTabChange = (index) => {
+    this.setState({inverseIndex: index});
+  };
+
+  handleActive = () => {
+    console.log('Special one activated');
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+        <Tabs disableAnimatedBottomBorder index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+        <h5>Fixed Tabs</h5>
+        <p>These tabs fill the given space.</p>
+        <Tabs index={this.state.fixedIndex} onChange={this.handleFixedTabChange} fixed>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs</h5>
+        <p>These tabs have an inverted theme.</p>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+          <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs with labels and icons</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='Home' icon='home'><small>First Content</small></Tab>
+          <Tab label='Favorite' icon='favorite'><small>Second Content</small></Tab>
+          <Tab label='Call' icon='call'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs with icons</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab icon='home'><small>First Content</small></Tab>
+          <Tab icon='favorite'><small>Second Content</small></Tab>
+          <Tab icon='call'><small>Third Content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
+
+export default TabsTest;
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
deleted file mode 100644
index 62b585733..000000000
--- a/spec/components/tabs.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Tabs, Tab } from '../../components/tabs';
-
-const TabsTest = () => (
-  <section>
-    <h5>Tabs</h5>
-    <p>This tabs can be disabled or hidden</p>
-
-    <Tabs>
-        <Tab label='Primary'><small>Primary content</small></Tab>
-        <Tab label='Secondary'><small>Secondary content</small></Tab>
-        <Tab label='Third' disabled><small>Disabled content</small></Tab>
-        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-        <Tab label='Fifth'><small>Fifth content</small></Tab>
-    </Tabs>
-  </section>
-);
-
-export default TabsTest;
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
new file mode 100644
index 000000000..419955e25
--- /dev/null
+++ b/spec/components/tooltip.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import Button from '../../components/button';
+import Input from '../../components/input';
+import Tooltip from '../../components/tooltip';
+import Chip from '../../components/chip';
+import Avatar from '../../components/avatar';
+
+const TooltipButton = Tooltip(Button);
+const TooltipInput = Tooltip(Input);
+const TooltipStrong = Tooltip(({children, ...other}) => {
+  delete other.theme;
+  return <strong {...other}>{children}</strong>;
+});
+const TooltipStrongDirect = Tooltip('strong');
+const ChipTooltip = Tooltip(Chip);
+
+const TooltipTest = () => (
+  <section>
+    <h5>Tooltip</h5>
+    <p>Give information on :hover</p>
+    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipButton icon='add' floating disabled tooltip='Floating can not be shown' />
+    <TooltipButton
+      icon='add'
+      floating
+      tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
+    />
+    <ChipTooltip tooltip='Dolor sit amet' tooltipPosition='top'>
+      <Avatar icon='home'/>
+      <span>Tooltip in a chip</span>
+    </ChipTooltip>
+    <TooltipInput tooltip='lorem ipsum...' />
+    <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
+    <p>
+      Click this next word to show and hide on click:
+      {' '}
+      <TooltipStrongDirect tooltip='This is a auto show tooltip' tooltipShowOnClick>
+        oh hai
+      </TooltipStrongDirect>
+      {' '}. This is useful for mobile!
+    </p>
+  </section>
+);
+
+export default TooltipTest;
diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.jsx
deleted file mode 100644
index 375d67db3..000000000
--- a/spec/components/tooltip.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import Button from '../../components/button';
-import Input from '../../components/input';
-import Tooltip from '../../components/tooltip';
-
-const TooltipTest = () => (
-  <section>
-    <h5>Tooltip</h5>
-    <p>Give information on :hover</p>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
-    <Button kind='floating' primary accent icon='add' tooltip='Floating Tooltip' />
-    <Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
-    <Input tooltip='lorem ipsum...'/>
-    <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
-    </p>
-  </section>
-);
-
-export default TooltipTest;
diff --git a/spec/index.html b/spec/index.html
index a5b808ba8..61f5c7ab8 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -13,6 +13,8 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="HandheldFriendly" content="True">
     <meta http-equiv="cleartype" content="on">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="http://github.com/build/spec.css">
   </head>
   <body>
diff --git a/spec/index.jsx b/spec/index.js
similarity index 100%
rename from spec/index.jsx
rename to spec/index.js
diff --git a/spec/root.jsx b/spec/root.js
similarity index 63%
rename from spec/root.jsx
rename to spec/root.js
index d5e09a282..ddf1a6b9b 100644
--- a/spec/root.jsx
+++ b/spec/root.js
@@ -1,59 +1,65 @@
+/* global VERSION */
+import '../components/commons.scss';
 import React from 'react';
-
-import App from '../components/app';
-import AppBarToolbox from '../components/app_bar';
-import ButtonToolbox from '../components/button';
-
+import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
+import AppBarTest from './components/app_bar';
+import Avatar from './components/avatar';
+import FontIcon from './components/font_icon';
 import Button from './components/button';
+import ButtonToolbox from '../components/button';
 import Card from './components/card';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
 import IconMenu from './components/icon_menu';
 import Input from './components/input';
+import Layout from './components/layout';
 import List from './components/list';
 import Menu from './components/menu';
 import Pickers from './components/pickers';
 import Progress from './components/progress';
 import Radio from './components/radio';
-import Snackbar from './components/snackbar';
 import Slider from './components/slider';
+import Snackbar from './components/snackbar';
 import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
-
-// import Logo from '../docs/app/components/logo'
 import style from './style';
 
-const _hrefProject = () => {
-  window.href = 'http://react-toolbox/';
-};
+const RootAppBar = () => (
+  <AppBar className={style.appbar} fixed flat>
+    <h1>React Toolbox <small>Spec {VERSION}</small></h1>
+    <ButtonToolbox
+      accent
+      className={style.github}
+      icon='web'
+      floating
+      onClick={() => {window.href = 'http://react-toolbox/';}}
+    />
+  </AppBar>
+);
 
 const Root = () => (
-  <App className={style.app}>
-    <AppBarToolbox fixed flat className={style.app_bar}>
-      <h1>React Toolbox <small>Spec 0.11.4</small></h1>
-      <ButtonToolbox
-        accent
-        className={style.github}
-        icon='web'
-        kind='floating'
-        onClick={_hrefProject}
-      />
-    </AppBarToolbox>
-
+  <div className={style.app}>
+    <RootAppBar />
     <Autocomplete />
+    <AppBarTest />
+    <Avatar />
+    <FontIcon />
     <Button />
     <Card />
     <Checkbox />
+    <Chip />
     <Dialog />
     <Drawer />
     <Dropdown />
     <IconMenu />
     <Input />
+    <Layout />
     <List />
     <Menu />
     <Pickers />
@@ -65,7 +71,7 @@ const Root = () => (
     <Table />
     <Tabs />
     <Tooltip />
-  </App>
+  </div>
 );
 
 export default Root;
diff --git a/spec/style.scss b/spec/style.scss
index c9da88c54..ac92d051e 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,16 +1,19 @@
-@import "http://github.com/components/base";
+@import "http://github.com/components/colors";
+@import "http://github.com/components/globals";
+@import "http://github.com/components/mixins";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";
 
 $offset: 1.8 * $unit;
 
 .app {
-  padding: (8.2 * $unit) $offset $offset $offset;
+  @include no-webkit-scrollbar;
+  padding: ($appbar-height + 2) $offset $offset;
   background-color: #f5f5f5;
-  section {
+  > section, > div > section {
     padding: $offset;
     margin-bottom: $offset;
-    background-color: white;
+    background-color: #fff;
     box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
     > h5 {
       color: rgb(48, 63, 159);
@@ -22,7 +25,7 @@ $offset: 1.8 * $unit;
       margin: ($offset / 4) 0;
       opacity: .6;
     }
-    [data-react-toolbox='card'] {
+    [data-react-toolbox="card"] {
       display: inline-block;
       margin: $offset $offset 0 0;
     }
@@ -36,7 +39,7 @@ $offset: 1.8 * $unit;
   z-index: $z-index-higher;
 }
 
-.app_bar {
+.appbar {
   display: flex;
   > h1 {
     flex-grow: 1;
@@ -49,6 +52,97 @@ $offset: 1.8 * $unit;
   }
 }
 
-.logo {
-  // height: $unit;
+.primary {
+  background-color: $color-primary;
+}
+
+.cards {
+  margin-top: 10px;
+  background-color: #f8f8f8;
+  border: 1px solid #f4f4f4;
+}
+
+.cardsGroup {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  padding: 20px;
+  list-style: none;
+}
+
+.cardRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  .media {
+    width: 80px;
+    height: 80px;
+    margin: 16px 16px 0 0;
+  }
+  .mediaLarge {
+    width: 140px;
+    height: 140px;
+    margin: 16px;
+  }
+}
+
+.cardItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 20px;
+}
+
+.cardItemContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardItemName {
+  display: block;
+  margin: 15px 0;
+  text-align: center;
+}
+
+.card {
+  width: 345px;
+}
+
+.chipTruncateWrapper {
+  width: 20rem;
+  padding: $offset / 2;
+  margin-top: $offset;
+  border: 1px solid #f4f4f4;
+}
+
+.dropdownTemplate {
+  display: flex;
+  flex-direction: row;
+}
+
+.dropdownTemplateImage {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  flex-grow: 0;
+  margin-right: 8px;
+  background-color: #ccc;
+}
+
+.dropdownTemplateContent {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+}
+
+.customSizedProgress {
+  &.circular {
+    width: 40px;
+    height: 40px;
+  }
 }
diff --git a/tests.webpack.js b/tests.webpack.js
index b1e86b88b..f837e2e06 100644
--- a/tests.webpack.js
+++ b/tests.webpack.js
@@ -1,2 +1,2 @@
-const context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
+const context = require.context('./components', true, /.spec\.js$/);
 context.keys().forEach(context);
diff --git a/tools/buildReadme.js b/tools/buildReadme.js
new file mode 100755
index 000000000..61934a20f
--- /dev/null
+++ b/tools/buildReadme.js
@@ -0,0 +1,89 @@
+import Fs from 'fs';
+import GenerateMarkdown from './generateMarkdown';
+import Glob from 'glob';
+import Path from 'path';
+import { parse as ParseComponent } from 'react-docgen';
+import Promise from 'bluebird';
+
+const getComponentName = (filepath) => {
+  let name = Path.basename(filepath);
+  let ext;
+  while ((ext = Path.extname(name))) {
+    name = name.substring(0, name.length - ext.length);
+  }
+  return name;
+};
+
+const componentGlob = Path.join(process.argv[2], '/*.js');
+
+new Promise((resolve, reject) => {
+  Glob(componentGlob, (err, files) => {
+    if (err) {
+      return reject(err);
+    }
+
+    return resolve(files);
+  });
+}).then(filePaths => {
+  const files = {};
+
+  filePaths.forEach(path => {
+    files[getComponentName(path)] = new Promise((resolveRead, rejectRead) => {
+      Fs.readFile(path, 'utf8', (err, data) => {
+        if (err) {
+          return rejectRead(err);
+        }
+
+        return resolveRead(data);
+      });
+    });
+  });
+
+  return Promise.props(files);
+}).then(fulfillments => {
+  for (const componentName in fulfillments) {
+    fulfillments[componentName] = ParseComponent(fulfillments[componentName]);
+  }
+
+  return fulfillments;
+}).then(fulfillments => {
+  let markdown = '';
+
+  for (const componentName in fulfillments) {
+    const reactAPI = fulfillments[componentName];
+    markdown = markdown
+      .concat(GenerateMarkdown(componentName, reactAPI))
+      .concat('\n\n------------------------------------------------------------------\n\n');
+  }
+
+  return markdown;
+}).then(markdown => {
+  return new Promise((resolve, reject) => {
+
+    Fs.readFile(Path.join(process.argv[2], '/readme.md'), 'utf8', (err, contents) => {
+      if (err) {
+        return reject(err);
+      }
+
+      const contentLines = contents.split('\n');
+      const introLines = [];
+
+      contentLines.some(line => {
+        introLines.push(line);
+
+        if (line === '<!--component-docgen-start-->') {
+          introLines.push('\n');
+          return true;
+        }
+
+      });
+
+      const newMarkdown = introLines.join('\n').concat(markdown);
+
+      return resolve(newMarkdown);
+    });
+
+  });
+}).then(newMarkdown => {
+  Fs.writeFileSync(Path.join(process.argv[2], '/readme.md'), newMarkdown);
+});
diff --git a/tools/generateMarkdown.js b/tools/generateMarkdown.js
new file mode 100644
index 000000000..8fe93782b
--- /dev/null
+++ b/tools/generateMarkdown.js
@@ -0,0 +1,65 @@
+
+
+function generateTitle (name) {
+  return `## ${name} \`<${name}/>\``;
+}
+
+function generateDesciption (description) {
+  return description + '\n';
+}
+
+function generatePropType (type) {
+  let values;
+  if (Array.isArray(type.value)) {
+    values = '(`'
+      + type.value.map(function (typeValue) {
+        return typeValue.name || typeValue.value;
+      }).join('`,`')
+      + '`)';
+  } else {
+    values = type.value;
+  }
+
+  return `\`${type.name}\`${(values ? values : '')}`;
+}
+
+function generateProp (propName, prop) {
+  if (!prop.description) {
+    if (propName === 'className') {
+      prop.description = 'Additional class(es) for custom styling.';
+    } else if (propName === 'children') {
+      prop.description = 'Children to pass through the component.';
+    }
+  }
+
+  return (
+      `| \`${propName}\` ${prop.required ? '(required)' : ''}`
+    + `| ${(prop.type ? generatePropType(prop.type) : '')} `
+    + `| ${(prop.defaultValue ? `\`${prop.defaultValue}\`` : '')} `
+    + `| ${(prop.description ? prop.description : '')} `
+    + '|'
+  );
+}
+
+function generateProps (props) {
+  const title = '### Properties';
+
+  return (
+    `${title}\n`
+    + '| Name | Type | Default | Description |\n'
+    + '|:-----|:-----|:-----|:-----|\n'
+    + Object.keys(props).sort().map(propName => {
+      return generateProp(propName, props[propName]);
+    }).join('\n')
+  );
+}
+
+function generateMarkdown (name, reactAPI) {
+  const markdownString = generateTitle(name) + '\n'
+    + (reactAPI.description ? generateDesciption(reactAPI.description) + '\n' : '\n')
+    + generateProps(reactAPI.props);
+
+  return markdownString;
+}
+
+module.exports = generateMarkdown;
diff --git a/webpack.config.development.js b/webpack.config.development.js
index 1bb3f6294..95fecdcfb 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -1,3 +1,4 @@
+const pkg = require('./package');
 const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
@@ -8,7 +9,7 @@ module.exports = {
   devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
-    './spec/index.jsx'
+    './spec/index.js'
   ],
   output: {
     path: path.join(__dirname, 'build'),
@@ -16,16 +17,17 @@ module.exports = {
     publicPath: '/build/'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json']
+    extensions: ['', '.scss', '.js', '.json'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style']
   },
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
-        exclude: /(node_modules)/,
-        loader: 'babel'
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: [/(node_modules)/, /react-css-themr/]
       }, {
-        test: /(\.scss|\.css)$/,
+        test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
       }
     ]
@@ -36,7 +38,8 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
+      'process.env.NODE_ENV': JSON.stringify('development'),
+      VERSION: JSON.stringify(pkg.version)
     })
   ]
 };
diff --git a/webpack.config.test.js b/webpack.config.test.js
index cbf4e50ec..50c473632 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -5,17 +5,18 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
+        test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
-        test: /(\.scss|\.css)$/,
+        test: /\.(scss|css)$/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
       }
     ]
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json']
+    extensions: ['', '.scss', '.js', '.json'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style']
   },
   watch: true,
   postcss: [autoprefixer],
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..904c9a815
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,5893 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+
+abbrev@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.1.4.tgz#d71c96f7d41d0feda2c38cd14e8a27c04158df4a"
+  dependencies:
+    mime-types "~2.0.4"
+    negotiator "0.4.9"
+
+accepts@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+acorn-jsx@^3.0.0, acorn-jsx@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.0, acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.3.tgz#1a3e850b428e73ba6b09d1cc527f5aaad4d03ef1"
+
+after@0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
+
+ajv-keywords@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.1.1.tgz#02550bc605a3e576041565628af972e06c549d50"
+
+ajv@^4.7.0:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.8.2.tgz#65486936ca36fea39a1504332a78bebd5d447bdc"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
+amdefine@>=0.0.4:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.0.tgz#fd17474700cb5cc9c2b709f0be9d23ce3c198c33"
+
+ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-html@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.6.tgz#bda8e33dd2ee1c20f54c08eb405713cbfc0ed80e"
+
+ansi-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+anymatch@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+app-root-path@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
+
+aproba@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.0 || ^1.1.13"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-find@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-index@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-index/-/array-index-1.0.0.tgz#ec56a749ee103e4e08c790b9c353df16055b97f9"
+  dependencies:
+    debug "^2.2.0"
+    es6-symbol "^3.0.2"
+
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arraybuffer.slice@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+asn1.js@^4.0.0:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.8.1.tgz#3949b7f5fd1e8bedc13be3abebf477f93490c810"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+assert-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
+assert@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async@^0.9.0, async@~0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0, async@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.0.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
+  dependencies:
+    lodash "^4.14.0"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+autoprefixer@^6.3.1, autoprefixer@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
+  dependencies:
+    browserslist "~1.4.0"
+    caniuse-db "^1.0.30000597"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.6"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+
+babel-cli@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.18.0.tgz#92117f341add9dead90f6fa7d0a97c0cc08ec186"
+  dependencies:
+    babel-core "^6.18.0"
+    babel-polyfill "^6.16.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.9.0"
+    commander "^2.8.1"
+    convert-source-map "^1.1.0"
+    fs-readdir-recursive "^1.0.0"
+    glob "^5.0.5"
+    lodash "^4.2.0"
+    output-file-sync "^1.1.0"
+    path-is-absolute "^1.0.0"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+    v8flags "^2.0.10"
+  optionalDependencies:
+    chokidar "^1.0.0"
+
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^2.0.0"
+
+babel-core@^6.18.0, babel-core@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.21.0.tgz#75525480c21c803f826ef3867d22c19f080a3724"
+  dependencies:
+    babel-code-frame "^6.20.0"
+    babel-generator "^6.21.0"
+    babel-helpers "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.20.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.21.0"
+    babel-types "^6.21.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-eslint@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-traverse "^6.15.0"
+    babel-types "^6.15.0"
+    babylon "^6.13.0"
+    lodash.pickby "^4.6.0"
+
+babel-generator@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.21.0.tgz#605f1269c489a1c75deeca7ea16d43d4656c8494"
+  dependencies:
+    babel-messages "^6.8.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+
+babel-helper-bindify-decorators@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.18.0.tgz#fc00c573676a6e702fffa00019580892ec8780a5"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.18.0.tgz#8ae814989f7a53682152e3401a04fabd0bb333a6"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-react-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.18.0.tgz#ab02f19a2eb7ace936dd87fa55896d02be59bf71"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    esutils "^2.0.0"
+    lodash "^4.2.0"
+
+babel-helper-call-delegate@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.18.0.tgz#05b14aafa430884b034097ef29e9f067ea4133bd"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-define-map@^6.18.0, babel-helper-define-map@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.18.0.tgz#8d6c85dc7fbb4c19be3de40474d18e97c3676ec2"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-explode-assignable-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.18.0.tgz#14b8e8c2d03ad735d4b20f1840b24cd1f65239fe"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-explode-class@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.18.0.tgz#c44f76f4fa23b9c5d607cbac5d4115e7a76f62cb"
+  dependencies:
+    babel-helper-bindify-decorators "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-function-name@^6.18.0, babel-helper-function-name@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.18.0.tgz#68ec71aeba1f3e28b2a6f0730190b754a9bf30e6"
+  dependencies:
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-get-function-arity@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.18.0.tgz#a5b19695fd3f9cdfc328398b47dafcd7094f9f24"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-hoist-variables@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.18.0.tgz#a835b5ab8b46d6de9babefae4d98ea41e866b82a"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-optimise-call-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.18.0.tgz#9261d0299ee1a4f08a6dd28b7b7c777348fd8f0f"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-regex@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.18.0.tgz#ae0ebfd77de86cb2f1af258e2cc20b5fe893ecc6"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-remap-async-to-generator@^6.16.0, babel-helper-remap-async-to-generator@^6.16.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.18.0.tgz#336cdf3cab650bb191b02fc16a3708e7be7f9ce5"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.18.0.tgz#28ec69877be4144dbd64f4cc3a337e89f29a924e"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helpers@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.16.0.tgz#1095ec10d99279460553e67eb3eee9973d3867e3"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+
+babel-loader@^6.2.10:
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.11"
+    mkdirp "^0.5.1"
+    object-assign "^4.0.1"
+
+babel-messages@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.8.0.tgz#bf504736ca967e6d65ef0adb5a2a5f947c8e0eb9"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-check-es2015-constants@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-react-transform@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-transform/-/babel-plugin-react-transform-2.0.2.tgz#515bbfa996893981142d90b1f9b1635de2995109"
+  dependencies:
+    lodash "^4.6.1"
+
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
+babel-plugin-syntax-do-expressions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
+
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-function-bind@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
+
+babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.3.13:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.13.0.tgz#2b84b7d53dd744f94ff1fad7669406274b23f541"
+
+babel-plugin-transform-async-generator-functions@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.17.0.tgz#d0b5a2b2f0940f2b245fa20a00519ed7bc6cae54"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.2"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-async-to-generator@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.16.0.tgz#19ec36cb1486b59f9f468adfa42ce13908ca2999"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.0"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-class-constructor-call@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.18.0.tgz#80855e38a1ab47b8c6c647f8ea1bcd2c00ca3aae"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-class-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.18.0.tgz#bc1266a39d4c8726e0bd7b15c56235177e6ede57"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.9.1"
+
+babel-plugin-transform-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.13.0.tgz#82d65c1470ae83e2d13eebecb0a1c2476d62da9d"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-helper-explode-class "^6.8.0"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-types "^6.13.0"
+
+babel-plugin-transform-do-expressions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.8.0.tgz#fda692af339835cc255bb7544efb8f7c1306c273"
+  dependencies:
+    babel-plugin-syntax-do-expressions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.8.0.tgz#ed95d629c4b5a71ae29682b998f70d9833eb366d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.18.0.tgz#3bfdcfec318d46df22525cdea88f1978813653af"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-template "^6.15.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-plugin-transform-es2015-classes@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.18.0.tgz#ffe7a17321bf83e494dcda0ae3fc72df48ffd1d9"
+  dependencies:
+    babel-helper-define-map "^6.18.0"
+    babel-helper-function-name "^6.18.0"
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-helper-replace-supers "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.14.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-computed-properties@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.8.0.tgz#f51010fd61b3bd7b6b60a5fdfd307bb7a5279870"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-destructuring@^6.18.0:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.19.0.tgz#ff1d911c4b3f4cab621bd66702a869acd1900533"
+  dependencies:
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-for-of@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.18.0.tgz#4c517504db64bf8cfc119a6b8f177211f2028a70"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-function-name@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.9.0.tgz#8c135b17dbd064e5bba56ec511baaee2fca82719"
+  dependencies:
+    babel-helper-function-name "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.9.0"
+
+babel-plugin-transform-es2015-literals@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.8.0.tgz#50aa2e5c7958fc2ab25d74ec117e0cc98f046468"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.18.0.tgz#49a054cbb762bdf9ae2d8a807076cfade6141e40"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.18.0.tgz#c15ae5bb11b32a0abdcc98a5837baa4ee8d67bcc"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.18.0:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.19.0.tgz#50438136eba74527efa00a5b0fefaf1dc4071da6"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.11.6"
+    babel-template "^6.14.0"
+
+babel-plugin-transform-es2015-modules-umd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.18.0.tgz#23351770ece5c1f8e83ed67cb1d7992884491e50"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-object-super@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.8.0.tgz#1b858740a5a4400887c23dcff6f4d56eea4a24c5"
+  dependencies:
+    babel-helper-replace-supers "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-parameters@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.18.0.tgz#9b2cfe238c549f1635ba27fc1daa858be70608b1"
+  dependencies:
+    babel-helper-call-delegate "^6.18.0"
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-spread@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.8.0.tgz#0217f737e3b821fa5a669f187c6ed59205f05e9c"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.8.0.tgz#e73d300a440a35d5c64f5c2a344dc236e3df47be"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-template-literals@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.8.0.tgz#86eb876d0a2c635da4ec048b4f7de9dfc897e66b"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.18.0.tgz#0b14c48629c90ff47a0650077f6aa699bee35798"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.3.13:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.11.0.tgz#6298ceabaad88d50a3f4f392d8de997260f6ef2c"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.8.0.tgz#db25742e9339eade676ca9acec46f955599a68a4"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.8.0"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-export-extensions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.8.0.tgz#fa80ff655b636549431bfd38f6b817bd82e47f5b"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-flow-strip-types@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.18.0.tgz#4d3e642158661e9b40db457c004a30817fa32592"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-function-bind@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.8.0.tgz#e7f334ce69f50d28fe850a822eaaab9fa4f4d821"
+  dependencies:
+    babel-plugin-syntax-function-bind "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-object-rest-spread@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.16.0.tgz#db441d56fffc1999052fdebe2e2f25ebd28e36a9"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-display-name@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.8.0.tgz#f7a084977383d728bdbdc2835bba0159577f660e"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-jsx-self@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.11.0.tgz#605c9450c1429f97a930f7e1dfe3f0d9d0dbd0f4"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx-source@^6.3.13:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.9.0.tgz#af684a05c2067a86e0957d4f343295ccf5dccf00"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.8.0.tgz#94759942f70af18c617189aa7f3593f1644a71ab"
+  dependencies:
+    babel-helper-builder-react-jsx "^6.8.0"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-regenerator@^6.16.0:
+  version "6.16.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.16.1.tgz#a75de6b048a14154aae14b0122756c5bed392f59"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.16.0"
+    private "~0.1.5"
+
+babel-plugin-transform-strict-mode@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.18.0.tgz#df7cf2991fe046f44163dcd110d5ca43bc652b9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-polyfill@^6.16.0, babel-polyfill@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
+  dependencies:
+    babel-runtime "^6.20.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-preset-es2015@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.18.0.tgz#b8c70df84ec948c43dcf2bf770e988eb7da88312"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.18.0"
+    babel-plugin-transform-es2015-classes "^6.18.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.18.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.18.0"
+    babel-plugin-transform-es2015-function-name "^6.9.0"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-umd "^6.18.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.18.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.18.0"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.18.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-regenerator "^6.16.0"
+
+babel-preset-react@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.16.0.tgz#aa117d60de0928607e343c4828906e4661824316"
+  dependencies:
+    babel-plugin-syntax-flow "^6.3.13"
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-flow-strip-types "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.3.13"
+    babel-plugin-transform-react-jsx "^6.3.13"
+    babel-plugin-transform-react-jsx-self "^6.11.0"
+    babel-plugin-transform-react-jsx-source "^6.3.13"
+
+babel-preset-stage-0@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-0/-/babel-preset-stage-0-6.16.0.tgz#f5a263c420532fd57491f1a7315b3036e428f823"
+  dependencies:
+    babel-plugin-transform-do-expressions "^6.3.13"
+    babel-plugin-transform-function-bind "^6.3.13"
+    babel-preset-stage-1 "^6.16.0"
+
+babel-preset-stage-1@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.16.0.tgz#9d31fbbdae7b17c549fd3ac93e3cf6902695e479"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.3.13"
+    babel-plugin-transform-export-extensions "^6.3.13"
+    babel-preset-stage-2 "^6.16.0"
+
+babel-preset-stage-2@^6.16.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.18.0.tgz#9eb7bf9a8e91c68260d5ba7500493caaada4b5b5"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.18.0"
+    babel-plugin-transform-decorators "^6.13.0"
+    babel-preset-stage-3 "^6.17.0"
+
+babel-preset-stage-3@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.17.0.tgz#b6638e46db6e91e3f889013d8ce143917c685e39"
+  dependencies:
+    babel-plugin-syntax-trailing-function-commas "^6.3.13"
+    babel-plugin-transform-async-generator-functions "^6.17.0"
+    babel-plugin-transform-async-to-generator "^6.16.0"
+    babel-plugin-transform-exponentiation-operator "^6.3.13"
+    babel-plugin-transform-object-rest-spread "^6.16.0"
+
+babel-register@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.18.0.tgz#892e2e03865078dd90ad2c715111ec4449b32a68"
+  dependencies:
+    babel-core "^6.18.0"
+    babel-runtime "^6.11.6"
+    core-js "^2.4.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.2"
+
+babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.20.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-runtime@^6.9.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-traverse "^6.16.0"
+    babel-types "^6.16.0"
+    babylon "^6.11.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
+  dependencies:
+    babel-code-frame "^6.20.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
+    babylon "^6.11.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.21.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
+  dependencies:
+    babel-runtime "^6.20.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babylon@^6.11.0, babylon@^6.13.0:
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.13.1.tgz#adca350e088f0467647157652bafead6ddb8dfdb"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^0.4.1, balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+balanced-match@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
+
+base64-arraybuffer@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.2.tgz#474df4a9f2da24e05df3158c3b1db3c3cd46a154"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+base64id@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+benchmark@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/benchmark/-/benchmark-1.0.0.tgz#2f1e2fa4c359f11122aa183082218e957e390c73"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+binary-extensions@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.7.0.tgz#6c1610db163abfb34edfe42fa423343a1e01185d"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.3.0:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.6"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
+
+body-parser@^1.12.4:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.15.2.tgz#d7578cf4f1d11d5f6ea804cef35dc7a7ff6dae67"
+  dependencies:
+    bytes "2.4.0"
+    content-type "~1.0.2"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    http-errors "~1.5.0"
+    iconv-lite "0.4.13"
+    on-finished "~2.3.0"
+    qs "6.2.0"
+    raw-body "~2.1.7"
+    type-is "~1.6.13"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+  dependencies:
+    balanced-match "^0.4.1"
+    concat-map "0.0.1"
+
+braces@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
+  dependencies:
+    expand-range "^0.1.0"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+brorand@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.0.6.tgz#4028706b915f91f7b349a2e0bf3c376039d216e5"
+
+browser-stdout@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a"
+  dependencies:
+    buffer-xor "^1.0.2"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.0.tgz#10773910c3c206d5420a46aad8694f820b85968f"
+  dependencies:
+    bn.js "^4.1.1"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@^0.1.4, browserify-zlib@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+  dependencies:
+    caniuse-db "^1.0.30000539"
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
+buffer-xor@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0, buffer@^4.9.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+builtin-status-codes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  dependencies:
+    callsites "^0.2.0"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+callsites@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
+  version "1.0.30000597"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
+
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.6.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
+  dependencies:
+    inherits "^2.0.1"
+
+circular-json@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+
+clap@^1.0.9:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.1.tgz#a8a93e0bfb7581ac199c4f001a5525a724ce696d"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+cli-cursor@^1.0.1, cli-cursor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-spinners@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
+
+cli-truncate@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  dependencies:
+    slice-ansi "0.0.4"
+    string-width "^1.0.1"
+
+cli-width@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+coa@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  dependencies:
+    q "^1.1.2"
+
+code-point-at@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.0.1.tgz#1104cd34f9b5b45d3eba88f1babc1924e1ce35fb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+color-convert@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.5.0.tgz#7a2b4efb4488df85bca6443cb038b7100fbe7de1"
+
+color-name@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@^1.1.0, colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combine-lists@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+  dependencies:
+    lodash "^4.5.0"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.9.0, commander@^2.8.1, commander@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3"
+
+component-emitter@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+concat-stream@1.5.0, concat-stream@^1.4.6, concat-stream@^1.4.7:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.0.tgz#53f7d43c51c5e43f81c8fdd03321c631be68d611"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
+connect@^3.3.5:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+
+content-disposition@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+convert-source-map@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.2.0, core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+
+cosmiconfig@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-1.1.0.tgz#0dea0f9804efdfb929fbb1b188e25553ea053d37"
+  dependencies:
+    graceful-fs "^4.1.2"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.0.1"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    pinkie-promise "^2.0.0"
+    require-from-string "^1.1.0"
+
+cosmiconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.0.tgz#26e384a2055ea4e087050e5e08d53eb4eac8f86e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+cpx@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f"
+  dependencies:
+    babel-runtime "^6.9.2"
+    chokidar "^1.6.0"
+    duplexer "^0.1.1"
+    glob "^7.0.5"
+    glob2base "^0.0.12"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    resolve "^1.1.7"
+    safe-buffer "^5.0.1"
+    shell-quote "^1.6.1"
+    subarg "^1.0.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.2.tgz#51210062d7bb7479f6c65bb41a92208b1d61abad"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^1.0.0"
+    sha.js "^2.3.6"
+
+create-hmac@^1.1.0, create-hmac@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.4.tgz#d3fb4ba253eb8b3f56e39ea2fbcb8af747bd3170"
+  dependencies:
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+
+cross-env@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.1.3.tgz#58cd8231808f50089708b091f7dd37275a8e8154"
+  dependencies:
+    cross-spawn "^3.0.1"
+
+cross-spawn@^3.0.0, cross-spawn@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.0.1.tgz#a3bbb302db2297cbea3c04edf36941f4613aa399"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+crypto-browserify@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.0.tgz#3652a0906ab9b2a7e0c3ce66a408e957a2485522"
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+
+css-color-names@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+css-loader@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    loader-utils "~0.2.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.4"
+
+css-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.0.tgz#bb90ac5292f42b679d9a05f6da0e9697556bb80d"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+custom-event@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+
+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
+damerau-levenshtein@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
+
+dashdash@^1.12.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.0.tgz#29e486c5418bf0f356034a993d51686a33e84141"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+debug@0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"
+
+debug@2.2.0, debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+define-properties@^1.1.1, define-properties@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+del@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+di@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
+
+diff@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+doctrine@1.5.0, doctrine@^1.2.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+dom-serialize@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  dependencies:
+    custom-event "~1.0.0"
+    ent "~2.2.0"
+    extend "^3.0.0"
+    void-elements "^2.0.0"
+
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+
+elliptic@^6.0.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.3.2.tgz#e4c81e0829cf0a65ab70e998b8232723b5c1bc48"
+  dependencies:
+    bn.js "^4.4.0"
+    brorand "^1.0.1"
+    hash.js "^1.0.0"
+    inherits "^2.0.1"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+engine.io-client@1.6.9:
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.6.9.tgz#1d6ad48048a5083c95096943b29d36efdb212401"
+  dependencies:
+    component-emitter "1.1.2"
+    component-inherit "0.0.3"
+    debug "2.2.0"
+    engine.io-parser "1.2.4"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parsejson "0.0.1"
+    parseqs "0.0.2"
+    parseuri "0.0.4"
+    ws "1.0.1"
+    xmlhttprequest-ssl "1.5.1"
+    yeast "0.1.2"
+
+engine.io-parser@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.2.4.tgz#e0897b0bf14e792d4cd2a5950553919c56948c42"
+  dependencies:
+    after "0.8.1"
+    arraybuffer.slice "0.0.6"
+    base64-arraybuffer "0.1.2"
+    blob "0.0.4"
+    has-binary "0.1.6"
+    utf8 "2.1.0"
+
+engine.io@1.6.10:
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.6.10.tgz#f87d84e1bd21d1a2ec7f8deef0c62054acdfb27a"
+  dependencies:
+    accepts "1.1.4"
+    base64id "0.1.0"
+    debug "2.2.0"
+    engine.io-parser "1.2.4"
+    ws "1.0.1"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+ent@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+error-ex@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-stack-parser@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+  dependencies:
+    stackframe "^0.3.1"
+
+es-abstract@^1.3.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.6.1.tgz#bb8a2064120abcf928a086ea3d9043114285ec99"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.0"
+    is-callable "^1.1.3"
+    is-regex "^1.0.3"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
+  version "0.10.12"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.7"
+    es6-symbol "3"
+
+es6-map@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-set "~0.1.3"
+    es6-symbol "~3.1.0"
+    event-emitter "~0.3.4"
+
+es6-promise@~4.0.3:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
+
+es6-set@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-symbol "3"
+    event-emitter "~0.3.4"
+
+es6-symbol@3, es6-symbol@^3.0.2, es6-symbol@~3.1, es6-symbol@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+
+es6-weak-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.8"
+    es6-iterator "2"
+    es6-symbol "3"
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-import-resolver-node@^0.2.0:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.2.3.tgz#5add8106e8c928db2cba232bcd9efa846e3da16c"
+  dependencies:
+    debug "^2.2.0"
+    object-assign "^4.0.1"
+    resolve "^1.1.6"
+
+eslint-import-resolver-webpack@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.8.0.tgz#025b5887bd26f27489d1a33b7d7b40c2c14d9b83"
+  dependencies:
+    array-find "^1.0.0"
+    debug "^2.2.0"
+    enhanced-resolve "~0.9.0"
+    find-root "^0.1.1"
+    has "^1.0.1"
+    interpret "^1.0.0"
+    is-absolute "^0.2.3"
+    lodash.get "^3.7.0"
+    node-libs-browser "^1.0.0"
+    resolve "^1.2.0"
+    semver "^5.3.0"
+
+eslint-module-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.0.0.tgz#a6f8c21d901358759cdc35dbac1982ae1ee58bce"
+  dependencies:
+    debug "2.2.0"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-babel@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.0.0.tgz#a92114e2c493ac3034b030d7ecf96e174a76ef3f"
+
+eslint-plugin-import@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.2.0.tgz#72ba306fad305d67c4816348a4699a4229ac8b4e"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.2.0"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.2.0"
+    eslint-module-utils "^2.0.0"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    pkg-up "^1.0.0"
+
+eslint-plugin-jsx-a11y@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-3.0.2.tgz#9f0eabcafde3d2a2600d96a66adb90d099e841fe"
+  dependencies:
+    damerau-levenshtein "^1.0.0"
+    jsx-ast-utils "^1.0.0"
+    object-assign "^4.0.1"
+
+eslint-plugin-react@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.8.0.tgz#741ab5438a094532e5ce1bbb935d6832356f492d"
+  dependencies:
+    doctrine "^1.2.2"
+    jsx-ast-utils "^1.3.4"
+
+eslint@^2.7.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-2.13.1.tgz#e4cc8fa0f009fb829aaae23855a29360be1f6c11"
+  dependencies:
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    es6-map "^0.1.3"
+    escope "^3.6.0"
+    espree "^3.1.6"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^1.1.1"
+    glob "^7.0.3"
+    globals "^9.2.0"
+    ignore "^3.1.2"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    optionator "^0.8.1"
+    path-is-absolute "^1.0.0"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.6.0"
+    strip-json-comments "~1.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+eslint@^3.12.2:
+  version "3.12.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.2.tgz#6be5a9aa29658252abd7f91e9132bab1f26f3c34"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    escope "^3.6.0"
+    espree "^3.3.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    glob "^7.0.3"
+    globals "^9.14.0"
+    ignore "^3.2.0"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.7.5"
+    strip-bom "^3.0.0"
+    strip-json-comments "~1.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+espree@^3.1.6, espree@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.3.2.tgz#dbf3fadeb4ecb4d4778303e50103b3d36c88b89c"
+  dependencies:
+    acorn "^4.0.1"
+    acorn-jsx "^3.0.0"
+
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esrecurse@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  dependencies:
+    estraverse "~4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estraverse@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+
+esutils@^2.0.0, esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+
+event-emitter@~0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.7"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+evp_bytestokey@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.0.tgz#497b66ad9fef65cd7c08a6180824ba1476b66e53"
+  dependencies:
+    create-hash "^1.1.1"
+
+execa@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.5.0.tgz#a57456764b990e3e52f6eff7f17a9cc2ff2e7ccc"
+  dependencies:
+    cross-spawn "^4.0.0"
+    get-stream "^2.2.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+
+expand-braces@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+  dependencies:
+    array-slice "^0.2.3"
+    array-unique "^0.2.1"
+    braces "^0.1.2"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+  dependencies:
+    is-number "^0.1.1"
+    repeat-string "^0.2.2"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expect@^1.20.1:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-1.20.2.tgz#d458fe4c56004036bae3232416a3f6361f04f965"
+  dependencies:
+    define-properties "~1.1.2"
+    has "^1.0.1"
+    is-equal "^1.5.1"
+    is-regex "^1.0.3"
+    object-inspect "^1.1.0"
+    object-keys "^1.0.9"
+    tmatch "^2.0.1"
+
+express@^4.14.0:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.1"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    finalhandler "0.5.0"
+    fresh "0.3.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    path-to-regexp "0.1.7"
+    proxy-addr "~1.1.2"
+    qs "6.2.0"
+    range-parser "~1.2.0"
+    send "0.14.1"
+    serve-static "~1.11.1"
+    type-is "~1.6.13"
+    utils-merge "1.0.0"
+    vary "~1.1.0"
+
+extend@^3.0.0, extend@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
+  dependencies:
+    async "^1.5.0"
+    loader-utils "^0.2.3"
+    webpack-sources "^0.1.0"
+
+extract-zip@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.5.0.tgz#92ccf6d81ef70a9fa4c1747114ccef6d8688a6c4"
+  dependencies:
+    concat-stream "1.5.0"
+    debug "0.7.4"
+    mkdirp "0.5.0"
+    yauzl "2.4.1"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.5.tgz#bd33145744519ab1c36c3ee9f31f08e9079b67f2"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+fbjs@^0.8.1, fbjs@^0.8.4:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008"
+  dependencies:
+    core-js "^1.0.0"
+    immutable "^3.7.6"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    ua-parser-js "^0.7.9"
+
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  dependencies:
+    pend "~1.2.0"
+
+figures@^1.3.5, figures@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+file-entry-cache@^1.1.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-1.3.1.tgz#44c61ea607ae4be9c1402f41f44270cbfe334ff8"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-entry-cache@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+filename-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-index@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+
+find-root@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-0.1.2.tgz#98d2267cff1916ccaf2743b3a0eea81d79d7dcd1"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+flat-cache@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.1.tgz#6c837d6225a7de5659323740b36d5361f71691ff"
+  dependencies:
+    circular-json "^0.3.0"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+
+for-own@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  dependencies:
+    for-in "^0.1.5"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+
+form-data@~2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.1.tgz#4adf0342e1a79afa1e84c8c320a9ffc82392a1f3"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+formatio@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/formatio/-/formatio-1.1.1.tgz#5ed3ccd636551097383465d996199100e86161e9"
+  dependencies:
+    samsam "~1.1"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+fresh@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+front-matter@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.0.tgz#0bdff42cbad2b35c07ac7085811789759f9858c0"
+  dependencies:
+    js-yaml "^3.4.6"
+
+fs-extra@^1.0.0, fs-extra@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+
+fs-readdir-recursive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.14.tgz#558e8cc38643d8ef40fe45158486d0d25758eee4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fstream-ignore@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2, function-bind@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+gauge@~2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.6.0.tgz#d35301ad18e96902b4751dcbbe40f4218b942a46"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-color "^0.1.7"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+getpass@^0.1.1:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  dependencies:
+    assert-plus "^1.0.0"
+
+git-dirty@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/git-dirty/-/git-dirty-1.0.2.tgz#fbbd2cfd36fb5f87cb36e95c508e2e896724e116"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob2base@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+  dependencies:
+    find-index "^0.1.1"
+
+glob@7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.5.tgz#b4202a69099bbb4d292a7c1b95b6682b67ebdc95"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^5.0.5:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@~7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.1.tgz#5f757908c7cbabce54f386ae440e11e26b7916df"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
+globals@^9.0.0, globals@^9.14.0, globals@^9.2.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.1.0.tgz#c49352e4dc183d85893ee825385eb994bb6df45f"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.16.4"
+    minimatch "~3.0.2"
+
+gonzales-pe@3.4.7:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-3.4.7.tgz#17c7be67ad6caff6277a3e387ac736e983d280ec"
+  dependencies:
+    minimist "1.1.x"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.9.tgz#baacba37d19d11f9d146d3578bc99958c3787e29"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+growl@1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.6.tgz#25326f39cfa4f616ad8787894e3af2cfbc7b6e10"
+  dependencies:
+    isarray "0.0.1"
+
+has-binary@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
+  dependencies:
+    isarray "0.0.1"
+
+has-color@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash.js@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.0.3.tgz#1332ff00156c0a0ffdd8236013d07b77a0451573"
+  dependencies:
+    inherits "^2.0.1"
+
+hasha@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1"
+  dependencies:
+    is-stream "^1.0.1"
+    pinkie-promise "^2.0.0"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
+html-entities@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+
+http-browserify@^1.3.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
+  dependencies:
+    Base64 "~0.2.0"
+    inherits "~2.0.1"
+
+http-errors@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.0.tgz#b1cb3d8260fd8e2386cad3189045943372d48211"
+  dependencies:
+    inherits "2.0.1"
+    setprototypeof "1.0.1"
+    statuses ">= 1.3.0 < 2"
+
+http-proxy@^1.13.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@0.4.13, iconv-lite@~0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+icss-replace-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+ignore@^3.1.2, ignore@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
+
+immutability-helper@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.0.0.tgz#371657666eacf96f731f9f97e5cccd920b13a5d4"
+  dependencies:
+    invariant "^2.2.0"
+
+immutable@^3.7.6:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indent-string@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.0.0.tgz#ddab23d32113ef04b67ab4cf4a0951c1a85fd60c"
+  dependencies:
+    repeating "^3.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    ansi-regex "^2.0.0"
+    chalk "^1.0.0"
+    cli-cursor "^1.0.1"
+    cli-width "^2.0.0"
+    figures "^1.3.5"
+    lodash "^4.3.0"
+    readline2 "^1.0.1"
+    run-async "^0.1.0"
+    rx-lite "^3.1.2"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
+internal-ip@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+interpret@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
+
+invariant@^2.2.0, invariant@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.1.tgz#b097010547668c7e337028ebe816ebe36c8a8d54"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ipaddr.js@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+
+is-absolute-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.0.0.tgz#9c4b20b0e5c0cbef9a479a367ede6f991679f359"
+
+is-absolute@^0.2.3:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
+  dependencies:
+    is-relative "^0.2.1"
+    is-windows "^0.2.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-arrow-function@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-arrow-function/-/is-arrow-function-2.0.3.tgz#29be2c2d8d9450852b8bbafb635ba7b8d8e87ec2"
+  dependencies:
+    is-callable "^1.0.4"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-boolean-object@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
+
+is-buffer@^1.0.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.0.4, is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-dotfile@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+
+is-equal-shallow@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-equal@^1.5.1:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/is-equal/-/is-equal-1.5.3.tgz#05b7fa3a1122cbc71c1ef41ce0142d5532013b29"
+  dependencies:
+    has "^1.0.1"
+    is-arrow-function "^2.0.3"
+    is-boolean-object "^1.0.0"
+    is-callable "^1.1.3"
+    is-date-object "^1.0.1"
+    is-generator-function "^1.0.3"
+    is-number-object "^1.0.3"
+    is-regex "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.1"
+    object.entries "^1.0.3"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-generator-function@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.3.tgz#d374ca57e807444fa2658be3728ed6b174b326b1"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number-object@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
+
+is-number@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+
+is-number@^2.0.2, is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-posix-bracket@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-regex@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.3.tgz#0d55182bddf9f2fde278220aec3a75642c908637"
+
+is-relative@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
+  dependencies:
+    is-unc-path "^0.1.1"
+
+is-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+is-stream@^1.0.1, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-string@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
+
+is-svg@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.0.1.tgz#f93ab3bf1d6bbca30e9753cd3485b1300eebc013"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-unc-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-0.1.1.tgz#ab2533d77ad733561124c3dc0f5cd8b90054c86b"
+  dependencies:
+    unc-path-regex "^0.1.0"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isbinaryfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.1.tgz#6e99573675372e841a0520c036b41513d783e79e"
+
+isexe@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jodid25519@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
+  dependencies:
+    jsbn "~0.1.0"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+js-tokens@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-1.0.3.tgz#14e56eb68c8f1a92c43d59f5014ec29dc20f2ae1"
+
+js-tokens@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
+
+js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@~3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+
+json3@3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.2.6.tgz#f6efc93c06a04de9aec53053df2559bb19e2038b"
+
+json3@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+
+json5@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.0.tgz#9b20715b026cbe3778fd769edccd822d8332a5b2"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsonpointer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.0.tgz#6661e161d2fc445f19f98430231343722e1fcbd5"
+
+jsprim@^1.2.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  dependencies:
+    extsprintf "1.0.2"
+    json-schema "0.2.3"
+    verror "1.3.6"
+
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.4.tgz#0257ed1cc4b1e65b39d7d9940f9fb4f20f7ba0a9"
+  dependencies:
+    acorn-jsx "^3.0.1"
+    object-assign "^4.1.0"
+
+karma-cli@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/karma-cli/-/karma-cli-1.0.1.tgz#ae6c3c58a313a1d00b45164c455b9b86ce17f960"
+  dependencies:
+    resolve "^1.1.6"
+
+karma-mocha@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/karma-mocha/-/karma-mocha-1.3.0.tgz#eeaac7ffc0e201eb63c467440d2b69c7cf3778bf"
+  dependencies:
+    minimist "1.2.0"
+
+karma-phantomjs-launcher@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/karma-phantomjs-launcher/-/karma-phantomjs-launcher-1.0.2.tgz#19e1041498fd75563ed86730a22c1fe579fa8fb1"
+  dependencies:
+    lodash "^4.0.1"
+    phantomjs-prebuilt "^2.1.7"
+
+karma-webpack@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-1.8.0.tgz#340c7999eb3745b47becab47d0d304dac2c55257"
+  dependencies:
+    async "~0.9.0"
+    loader-utils "^0.2.5"
+    lodash "^3.8.0"
+    source-map "^0.1.41"
+    webpack-dev-middleware "^1.0.11"
+
+karma@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-1.3.0.tgz#b2b94e8f499fadd0069d54f9aef4a4d48ec5cc1f"
+  dependencies:
+    bluebird "^3.3.0"
+    body-parser "^1.12.4"
+    chokidar "^1.4.1"
+    colors "^1.1.0"
+    combine-lists "^1.0.0"
+    connect "^3.3.5"
+    core-js "^2.2.0"
+    di "^0.0.1"
+    dom-serialize "^2.2.0"
+    expand-braces "^0.1.1"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    http-proxy "^1.13.0"
+    isbinaryfile "^3.0.0"
+    lodash "^3.8.0"
+    log4js "^0.6.31"
+    mime "^1.3.4"
+    minimatch "^3.0.0"
+    optimist "^0.6.1"
+    qjobs "^1.1.4"
+    range-parser "^1.2.0"
+    rimraf "^2.3.3"
+    socket.io "1.4.7"
+    source-map "^0.5.3"
+    tmp "0.0.28"
+    useragent "^2.1.9"
+
+kew@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
+
+kind-of@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
+  dependencies:
+    is-buffer "^1.0.2"
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lint-staged@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-3.2.3.tgz#74a72945b79ceb63ca18b984b02dc176045285cf"
+  dependencies:
+    app-root-path "^2.0.0"
+    cosmiconfig "^1.1.0"
+    execa "^0.5.0"
+    listr "^0.9.0"
+    minimatch "^3.0.0"
+    npm-which "^3.0.1"
+    staged-git-files "0.0.4"
+    which "^1.2.11"
+
+listr-silent-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
+
+listr-update-renderer@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.1.2.tgz#bb534ff4b704048e66a9aac45487a365a8d956d5"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    strip-ansi "^3.0.1"
+
+listr-verbose-renderer@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.2.1.tgz#99adf0c5346a28a5947e53140e9654763982b1fa"
+  dependencies:
+    chalk "^1.1.3"
+    cli-cursor "^1.0.2"
+    figures "^1.7.0"
+
+listr@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.9.0.tgz#0ee78c5d95499f26042abe3334e10cacc9e81fcf"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    figures "^1.7.0"
+    indent-string "^2.1.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.1.1"
+    listr-update-renderer "^0.1.1"
+    listr-verbose-renderer "^0.2.1"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    ora "^0.2.3"
+    rxjs "^5.0.0-beta.11"
+    stream-to-observable "^0.1.0"
+    strip-ansi "^3.0.1"
+
+load-json-file@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._basecreate@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821"
+
+lodash._baseget@^3.0.0:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/lodash._baseget/-/lodash._baseget-3.7.2.tgz#1b6ae1d5facf3c25532350a13c1197cb8bb674f4"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash._topath@^3.0.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/lodash._topath/-/lodash._topath-3.8.1.tgz#3ec5e2606014f4cb97f755fe6914edd8bfc00eac"
+  dependencies:
+    lodash.isarray "^3.0.0"
+
+lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.capitalize@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
+
+lodash.clonedeep@^4.3.2:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+
+lodash.create@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.create/-/lodash.create-3.1.1.tgz#d7f2849f0dbda7e04682bb8cd72ab022461debe7"
+  dependencies:
+    lodash._baseassign "^3.0.0"
+    lodash._basecreate "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+
+lodash.get@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-3.7.0.tgz#3ce68ae2c91683b281cc5394128303cbf75e691f"
+  dependencies:
+    lodash._baseget "^3.0.0"
+    lodash._topath "^3.0.0"
+
+lodash.indexof@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.kebabcase@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
+lodash@^3.8.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1, lodash@~4.16.4:
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.4.tgz#01ce306b9bad1319f2a5528674f88297aeb70127"
+
+log-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  dependencies:
+    chalk "^1.0.0"
+
+log-update@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
+  dependencies:
+    ansi-escapes "^1.0.0"
+    cli-cursor "^1.0.2"
+
+log4js@^0.6.31:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
+  dependencies:
+    readable-stream "~1.0.2"
+    semver "~4.3.3"
+
+lolex@^1.4.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.5.1.tgz#dbcf7c687cbc22e59d1a8d40208a720252f521d8"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.2.0.tgz#69a65aad3de542cf4ee0f4fe74e8e33c709ccb0f"
+  dependencies:
+    js-tokens "^1.0.1"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lru-cache@2.2.x:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
+
+lru-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.1.tgz#1343955edaf2e37d9b9e7ee7241e27c4b9fb72be"
+  dependencies:
+    pseudomap "^1.0.1"
+    yallist "^2.0.0"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+  dependencies:
+    lodash.indexof "^4.0.5"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+merge@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.0.tgz#4a62fb1d42933c05583982f4c716f6fb9e6c6d3d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@~1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.12.0.tgz#3d0c63180f458eb10d325aaa37d7c58ae312e9d7"
+
+mime-db@~1.24.0:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.12.tgz#152ba256777020dd4663f54c2e7bc26381e71729"
+  dependencies:
+    mime-db "~1.24.0"
+
+mime-types@~2.0.4:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.0.14.tgz#310e159db23e077f8bb22b748dabfa4957140aa6"
+  dependencies:
+    mime-db "~1.12.0"
+
+mime@1.3.4, mime@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.1.x:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
+
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+mkdirp@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
+  dependencies:
+    minimist "0.0.8"
+
+mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+mocha@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.2.0.tgz#7dc4f45e5088075171a68896814e6ae9eb7a85e3"
+  dependencies:
+    browser-stdout "1.3.0"
+    commander "2.9.0"
+    debug "2.2.0"
+    diff "1.4.0"
+    escape-string-regexp "1.0.5"
+    glob "7.0.5"
+    growl "1.9.2"
+    json3 "3.3.2"
+    lodash.create "3.1.1"
+    mkdirp "0.5.1"
+    supports-color "3.1.2"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+
+nan@^2.3.0, nan@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+negotiator@0.4.9:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.4.9.tgz#92e46b6db53c7e421ed64a2bc94f08be7630df3f"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-fetch@^1.0.1:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-gyp@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.4.0.tgz#dda558393b3ecbbe24c9e6b8703c71194c63fa36"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3"
+    osenv "0"
+    path-array "^1.0.0"
+    request "2"
+    rimraf "2"
+    semver "2.x || 3.x || 4 || 5"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-libs-browser@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-1.0.0.tgz#ff8ad6c2cfa78043bdd0091ec07f0aaa581620fc"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.1"
+    os-browserify "~0.2.0"
+    path-browserify "0.0.0"
+    process "~0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.11.0"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.31"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.31.tgz#d8a00ddaa301a940615dbcc8caad4024d58f6017"
+  dependencies:
+    mkdirp "~0.5.1"
+    nopt "~3.0.6"
+    npmlog "^4.0.0"
+    rc "~1.1.6"
+    request "^2.75.0"
+    rimraf "~2.5.4"
+    semver "~5.3.0"
+    tar "~2.2.1"
+    tar-pack "~3.3.0"
+
+node-sass@^3.13.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.1.tgz#7240fbbff2396304b4223527ed3020589c004fc2"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "^2.61.0"
+    sass-graph "^2.1.1"
+
+"nopt@2 || 3", nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@^1.4.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.7.0.tgz#d82452d98d38821cffddab4d77a5f8d20ce66db0"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+normalize.css@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-4.2.0.tgz#21d66cc557154d4379fd1e079ec7de58a379b099"
+
+npm-path@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.2.tgz#6462f098bb38e21e335a8c6f42d21d7b57f098c8"
+  dependencies:
+    which "^1.2.10"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+npm-which@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa"
+  dependencies:
+    commander "^2.9.0"
+    npm-path "^2.0.2"
+    which "^1.2.10"
+
+"npmlog@0 || 1 || 2 || 3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-3.1.2.tgz#2d46fa874337af9498a2f12bb43d8d0be4a36873"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+npmlog@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.0.tgz#e094503961c70c1774eb76692080e8d578a9f88f"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-inspect@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.2.1.tgz#3b62226eb8f6d441751c7d8f22a20ff80ac9dc3f"
+
+object-keys@^1.0.8, object-keys@^1.0.9:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object.entries@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.3.tgz#f42cc75363a4f9aa7037bcfb3bab3be4ffc78027"
+  dependencies:
+    define-properties "^1.1.1"
+    es-abstract "^1.3.2"
+    function-bind "^1.0.2"
+    has "^1.0.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+once@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
+optimist@^0.6.1, optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+ora@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
+  dependencies:
+    chalk "^1.1.1"
+    cli-cursor "^1.0.2"
+    cli-spinners "^0.1.2"
+    object-assign "^4.0.1"
+
+os-browserify@^0.2.0, os-browserify@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-shim@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.3.tgz#83cf05c6d6458fc4d5ac6362ea325d92f2754217"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+output-file-sync@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+  dependencies:
+    graceful-fs "^4.1.4"
+    mkdirp "^0.5.1"
+    object-assign "^4.1.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-asn1@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
+  dependencies:
+    asn1.js "^4.0.0"
+    browserify-aes "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  dependencies:
+    error-ex "^1.2.0"
+
+parsejson@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.1.tgz#9b10c6c0d825ab589e685153826de0a3ba278bcc"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseqs@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.2.tgz#9dfe70b2cddac388bde4f35b1f240fa58adbe6c7"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.4.tgz#806582a39887e1ea18dd5e2fe0e01902268e9350"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+path-array@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-array/-/path-array-1.0.1.tgz#7e2f0f35f07a2015122b868b7eac0eb2c4fec271"
+  dependencies:
+    array-index "^1.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-is-inside@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+pbkdf2@^3.0.3:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.9.tgz#f2c4b25a600058b3c3773c086c37dbbee1ffe693"
+  dependencies:
+    create-hmac "^1.1.2"
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+
+phantomjs-prebuilt@^2.1.14, phantomjs-prebuilt@^2.1.7:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0"
+  dependencies:
+    es6-promise "~4.0.3"
+    extract-zip "~1.5.0"
+    fs-extra "~1.0.0"
+    hasha "~2.2.0"
+    kew "~0.7.0"
+    progress "~1.1.8"
+    request "~2.79.0"
+    request-progress "~2.0.1"
+    which "~1.2.10"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  dependencies:
+    find-up "^1.0.0"
+
+pkg-up@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-1.0.0.tgz#3e08fb461525c4421624a33b9f7e6d0af5b05a26"
+  dependencies:
+    find-up "^1.0.0"
+
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.4.1.tgz#45dce4d4e33b7d967b97a4d937f270ea98d2fe7a"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.1.tgz#5fae3f1a71df3e19cffb37309d1a7dba56c4589c"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.2.tgz#5d72f7d05d11de0a9589e001958067ccae1b4931"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-load-config@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.0.0.tgz#1399f60dcd6bd9c3124b2eb22960f77f9dc08b3d"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.0.2"
+    postcss-load-plugins "^2.0.0"
+
+postcss-load-options@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.0.2.tgz#b99eb5759a588f4b2dd8b6471c6985f72060e7b0"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.0.0.tgz#2840d8df1d1c57ebcb1d41b5f60d45796504b43f"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.2.1.tgz#8809ab184a9f903a01f660385f2e296ff563d22c"
+  dependencies:
+    loader-utils "^0.2.16"
+    object-assign "^4.1.0"
+    postcss "^5.2.6"
+    postcss-load-config "^1.0.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.10.tgz#54b360be804e7e69a5c7222635247b92a3569e9b"
+  dependencies:
+    postcss "^5.0.4"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.4.tgz#47d4fef7efbcc64e541fae6115c9a3cc84d47006"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.0.5.tgz#82d602643b8616a61fb3634d7ede0289836d67f9"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.0.5.tgz#4e1f966fb49c95266804016ba9a3c6645bb601e0"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-scope@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-values@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  dependencies:
+    icss-replace-symbols "^1.0.2"
+    postcss "^5.0.14"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.0.tgz#2fbd30e12248c442981d31ea2484d46fd0628970"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.7.tgz#6bd90d0a4bc5a1df22c26ea65c53257dc3829f4e"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.0.tgz#8f739b938289ef2e48936d7101783e4741ca9bbb"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.3.tgz#fc193e435a973c10f9801c74700a830f79643343"
+  dependencies:
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.1.tgz#fdbf696103b12b0a64060e5610507f410491f7c8"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.5.tgz#46fc0363f01bab6a36a9abb01c229fcc45363094"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss-zindex@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.1.1.tgz#ea3fbe656c9738aa8729e2ee96ec2a46089b720f"
+  dependencies:
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.6:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.1.2"
+
+pre-commit@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"
+  dependencies:
+    cross-spawn "^5.0.1"
+    spawn-sync "^1.0.15"
+    which "1.2.x"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process@^0.11.0, process@~0.11.0:
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
+progress@^1.1.8, progress@~1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+proxy-addr@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.1.1"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+qjobs@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
+
+qs@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+
+qs@~6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+
+query-string@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@^0.2.0, querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0, querystring@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+randomatic@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
+  dependencies:
+    is-number "^2.0.2"
+    kind-of "^3.0.2"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.3.tgz#674c99760901c3c4112771a31e521dc349cc09ec"
+
+range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-body@~2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.1.7.tgz#adfeace2e4fb3098058014d08c072dcc59758774"
+  dependencies:
+    bytes "2.4.0"
+    iconv-lite "0.4.13"
+    unpipe "1.0.0"
+
+rc@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~1.0.4"
+
+react-addons-css-transition-group@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.4.1.tgz#60b133fac5116e4009e56ab0674dc2ddcc1a18f6"
+
+react-addons-test-utils@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.1.tgz#1e4caab151bf27cce26df5f9cb714f4fd8359ae1"
+
+react-css-themr@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.1.tgz#ac0959ee64f020a05e2f3f4e1c9c7489964f8556"
+  dependencies:
+    invariant "^2.2.1"
+
+react-deep-force-update@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
+
+react-dom@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
+  dependencies:
+    fbjs "^0.8.1"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+react-proxy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
+  dependencies:
+    lodash "^4.6.1"
+    react-deep-force-update "^1.0.0"
+
+react-transform-catch-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
+
+react-transform-hmr@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
+  dependencies:
+    global "^4.3.0"
+    react-proxy "^1.1.7"
+
+react@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
+  dependencies:
+    fbjs "^0.8.4"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readable-stream@^2.1.0, readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readable-stream@~1.0.2:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readdirp@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+redbox-react@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.3.tgz#63ec9c2cb9c620c46e2b9f8543b4898f1b787e41"
+  dependencies:
+    error-stack-parser "^1.3.6"
+    object-assign "^4.0.1"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.1.tgz#fa02e126e695824263cab91d3a5b0fdc1dd27a9a"
+  dependencies:
+    balanced-match "~0.1.0"
+
+regenerate@^1.2.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+
+regenerator-runtime@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.5.tgz#403d6d40a4bdff9c330dd9392dcbb2d9a8bba1fc"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+repeating@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-3.0.0.tgz#f4c376fdd2015761f6f96f4303b1224d581e802f"
+
+request-progress@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08"
+  dependencies:
+    throttleit "^1.0.0"
+
+request@2, request@^2.61.0, request@^2.75.0, request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+require-uncached@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.2.tgz#67dad3b733089e77030124678a459589faf6a7ec"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-from@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+
+resolve@^1.1.6, resolve@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
+
+resolve@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.5.2, rimraf@~2.5.1, rimraf@~2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+ripemd160@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
+
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  dependencies:
+    once "^1.3.0"
+
+rx-lite@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+
+rxjs@^5.0.0-beta.11:
+  version "5.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.0.0-rc.3.tgz#d8bc390d83277846b2d2afa1acf3c5f4f114a8d5"
+  dependencies:
+    symbol-observable "^1.0.1"
+
+safe-buffer@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
+
+samsam@^1.1.3:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.2.1.tgz#edd39093a3184370cb859243b2bdf255e7d8ea67"
+
+samsam@~1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.3.tgz#9f5087419b4d091f232571e7fa52e90b0f552621"
+
+sass-graph@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    yargs "^4.7.1"
+
+sass-lint@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/sass-lint/-/sass-lint-1.10.2.tgz#825bd6b0da79ddd36a42ffae5b6d44ac4922502b"
+  dependencies:
+    commander "^2.8.1"
+    eslint "^2.7.0"
+    front-matter "2.1.0"
+    fs-extra "^1.0.0"
+    glob "^7.0.0"
+    globule "^1.0.0"
+    gonzales-pe "3.4.7"
+    js-yaml "^3.5.4"
+    lodash.capitalize "^4.1.0"
+    lodash.kebabcase "^4.0.0"
+    merge "^1.2.0"
+    path-is-absolute "^1.0.0"
+    util "^0.10.3"
+
+sass-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.1.0.tgz#fd8604c5bf90001b173bb27540e8f2f5ed64602b"
+  dependencies:
+    async "^2.0.1"
+    loader-utils "^0.2.15"
+    object-assign "^4.1.0"
+
+sax@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+semver@~4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+send@0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+  dependencies:
+    debug "~2.2.0"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    fresh "0.3.0"
+    http-errors "~1.5.0"
+    mime "1.3.4"
+    ms "0.7.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.0"
+
+serve-static@~1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.14.1"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+setprototypeof@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.1.tgz#52009b27888c4dc48f591949c0a8275834c1ca7e"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+sha.js@^2.3.6:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.5.tgz#27d171efcc82a118b99639ff581660242b506e7c"
+  dependencies:
+    inherits "^2.0.1"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
+shell-quote@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shelljs@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.6.1.tgz#ec6211bed1920442088fe0f70b2837232ed2c8a8"
+
+shelljs@^0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+signal-exit@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.1.tgz#5a4c884992b63a7acd9badb7894c3ee9cfccad81"
+
+sinon@^2.0.0-pre.2:
+  version "2.0.0-pre.4"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-2.0.0-pre.4.tgz#f29fbcca8d2fa73b633a3b0c0e4e3c78f2360c2c"
+  dependencies:
+    formatio "1.1.1"
+    lolex "^1.4.0"
+    samsam "^1.1.3"
+    text-encoding "0.5.2"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+socket.io-adapter@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.4.0.tgz#fb9f82ab1aa65290bf72c3657955b930a991a24f"
+  dependencies:
+    debug "2.2.0"
+    socket.io-parser "2.2.2"
+
+socket.io-client@1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.4.6.tgz#49b0ba537efd15b8297c84016e642e1c7c752c3d"
+  dependencies:
+    backo2 "1.0.2"
+    component-bind "1.0.0"
+    component-emitter "1.2.0"
+    debug "2.2.0"
+    engine.io-client "1.6.9"
+    has-binary "0.1.7"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseuri "0.0.4"
+    socket.io-parser "2.2.6"
+    to-array "0.1.4"
+
+socket.io-parser@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.2.2.tgz#3d7af6b64497e956b7d9fe775f999716027f9417"
+  dependencies:
+    benchmark "1.0.0"
+    component-emitter "1.1.2"
+    debug "0.7.4"
+    isarray "0.0.1"
+    json3 "3.2.6"
+
+socket.io-parser@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.2.6.tgz#38dfd61df50dcf8ab1d9e2091322bf902ba28b99"
+  dependencies:
+    benchmark "1.0.0"
+    component-emitter "1.1.2"
+    debug "2.2.0"
+    isarray "0.0.1"
+    json3 "3.3.2"
+
+socket.io@1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.4.7.tgz#92b7f7cb88c5797d4daee279fe8075dbe6d3fa1c"
+  dependencies:
+    debug "2.2.0"
+    engine.io "1.6.10"
+    has-binary "0.1.7"
+    socket.io-adapter "0.4.0"
+    socket.io-client "1.4.6"
+    socket.io-parser "2.2.6"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^0.1.4, source-list-map@~0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
+
+source-list-map@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e"
+
+source-map-support@^0.4.2:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.5.tgz#4438df4219e1b3c7feb674614b4c67f9722db1e4"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map@^0.1.41:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+spawn-sync@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
+  dependencies:
+    concat-stream "^1.4.7"
+    os-shim "^0.1.2"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jodid25519 "^1.0.0"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+stackframe@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
+staged-git-files@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-0.0.4.tgz#d797e1b551ca7a639dec0237dc6eb4bb9be17d35"
+
+"statuses@>= 1.3.0 < 2", statuses@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-http@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+  dependencies:
+    builtin-status-codes "^2.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.1.0"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-to-observable@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@^0.10.25, string_decoder@~0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
+style-loader@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  dependencies:
+    loader-utils "^0.2.7"
+
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
+supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+svgo@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.2.1"
+    js-yaml "~3.6.1"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+symbol-observable@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  dependencies:
+    ajv "^4.7.0"
+    ajv-keywords "^1.0.0"
+    chalk "^1.1.1"
+    lodash "^4.0.0"
+    slice-ansi "0.0.4"
+    string-width "^2.0.0"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+  dependencies:
+    debug "~2.2.0"
+    fstream "~1.0.10"
+    fstream-ignore "~1.0.5"
+    once "~1.3.3"
+    readable-stream "~2.1.4"
+    rimraf "~2.5.1"
+    tar "~2.2.1"
+    uid-number "~0.0.6"
+
+tar@^2.0.0, tar@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+text-encoding@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.5.2.tgz#85b4660819f088777609465551690fea137d824a"
+
+text-table@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+throttleit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+timers-browserify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  dependencies:
+    setimmediate "^1.0.4"
+
+tmatch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
+
+tmp@0.0.28:
+  version "0.0.28"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+to-fast-properties@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+tryit@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.3.tgz#3da382f670f25ded78d7b3d1792119bca0b7132d"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-is@~1.6.13:
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.13.tgz#6e83ba7bc30cd33a7bb0b7fb00737a2085bf9d08"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.11"
+
+typedarray@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+ua-parser-js@^0.7.9:
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f"
+
+uglify-js@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.4.tgz#a295a0de12b6a650c031c40deb0dc40b14568bd2"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+
+uid-number@~0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+unc-path-regex@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+url@^0.11.0, url@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+user-home@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  dependencies:
+    os-homedir "^1.0.0"
+
+useragent@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.1.9.tgz#4dba2bc4dad1875777ab15de3ff8098b475000b7"
+  dependencies:
+    lru-cache "2.2.x"
+
+utf8@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.0.tgz#0cfec5c8052d44a23e3aaa908104e8075f95dfd5"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.3, util@^0.10.3, util@~0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
+v8flags@^2.0.10:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
+  dependencies:
+    user-home "^1.1.1"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+vary@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+verror@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+
+webpack-hot-middleware@^2.13.0:
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.2.tgz#6500b15e6d4f1a9590f8df708183f4d2ac2c3e9e"
+  dependencies:
+    ansi-html "0.0.6"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
+webpack-sources@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.2.tgz#057a3f3255f8ba561b901d9150589aa103a57e65"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.5.3"
+
+webpack@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+whatwg-fetch@>=0.10.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which@1, which@1.2.x, which@^1.2.10, which@^1.2.11, which@^1.2.9, which@~1.2.10:
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
+  dependencies:
+    isexe "^1.1.1"
+
+wide-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+window-size@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wrap-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.0.0.tgz#7d30f8f873f9a5bbc3a64dabc8d177e071ae426f"
+  dependencies:
+    string-width "^1.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.0.1.tgz#7d0b2a2e58cddd819039c29c9de65045e1b310e9"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+xmlhttprequest-ssl@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz#3b7741fea4a86675976e908d296d4445961faa67"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+
+yargs-parser@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
+  dependencies:
+    camelcase "^3.0.0"
+    lodash.assign "^4.0.6"
+
+yargs@^4.7.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+  dependencies:
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    lodash.assign "^4.0.3"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.1"
+    which-module "^1.0.0"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^2.4.1"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yauzl@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  dependencies:
+    fd-slicer "~1.0.1"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"