From 12aba3e66e40988d61a0f7d4d671b98d40fc07c6 Mon Sep 17 00:00:00 2001
From: Ty <ty@dice.fm>
Date: Tue, 10 Nov 2015 11:22:11 +0000
Subject: [PATCH] Squashed commit of the following:

commit 615c4eb4fd7244bd556a694586017592b5257933
Merge: 48912d6 26a0c85
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 10 10:27:00 2015 +0100

    Merge pull request #2091 from callemall/oliviertassinari-patch-1

    [eslint] Use the latest version

commit 48912d66a560560c932411bebbcdc3aac7311d7d
Merge: 6f28ad0 5b4c559
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 10 10:16:55 2015 +0100

    Merge pull request #2116 from subjectix/fix-dialog-raw-code

    Fixed raw code of dialog's open prop

commit 5b4c559480fad4882670075dbc0da4877b7df082
Author: Ali Taheri <ali.taheri.m@gmail.com>
Date:   Tue Nov 10 10:37:26 2015 +0330

    Fixed raw code of dialog's open prop

commit 6f28ad04e8f95073646bfeb8936c550ca4a94347
Author: Shaurya Arora <shaurya.arora1@gmail.com>
Date:   Mon Nov 9 18:30:22 2015 -0600

    v0.13.2 release

commit fd088e18188ed188fee3dce5e0e04a6aa13217d7
Merge: d328658 4145d8f
Author: Shaurya Arora <shaurya.arora1@gmail.com>
Date:   Mon Nov 9 17:42:57 2015 -0600

    Merge pull request #2113 from shaurya947/master

    Add import statements to every component's doc page

commit 4145d8f3248f2dea6e3e2c5180e5bcb950a73df0
Author: Shaurya Arora <shaurya.arora1@gmail.com>
Date:   Mon Nov 9 17:32:18 2015 -0600

    Add import statements to every component's doc page

commit d32865844ccc27f2b684211f64d2a6bb587d5e54
Merge: abfd6ae a8066d1
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 10 00:16:14 2015 +0100

    Merge pull request #2112 from callemall/oliviertassinari-patch-3

    [npm] Add private: true

commit a8066d19c0768862b4b2d1f45602278d79d28eea
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 10 00:12:13 2015 +0100

    Update package.json

    Add private to the docs package.json.
    Will prevent this warning to be displayed `npm WARN package.json material-ui-docs@0.13.1 No license field.`
    and accidental publish.

commit abfd6ae042682fbad28e1a493e0df3b0d0dc25b0
Merge: 7233878 ed062ff
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 10 00:06:28 2015 +0100

    Merge pull request #2111 from luisrudge/remove-peer-dependencies

    [npm] moving some peer dependencies to dependencies

commit ed062ff8d6f19a24e2462722c3885a1ff3c0a1d5
Author: Luis Rudge <luis@luisrudge.net>
Date:   Mon Nov 9 20:30:29 2015 -0200

    moving some peer dependencies to dependencies

commit 723387851bc9acbd6d7ffc9ad603a3b3fa5126c7
Merge: 49feb2e 915c1eb
Author: Shaurya Arora <shaurya.arora1@gmail.com>
Date:   Mon Nov 9 15:52:36 2015 -0600

    Merge pull request #2105 from oliviertassinari/open

    [Dialog] Use open instead of isOpen

commit 915c1ebe991f17fb1f1f2e3032d3cecaeed6d955
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Mon Nov 9 19:07:13 2015 +0100

    [Dialog] Use open instead of isOpen

commit 49feb2ee238f03e90f7c6fcfb3bf73728721ec76
Merge: bb57b9f 6aff277
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Mon Nov 9 13:05:23 2015 +0100

    Merge pull request #2044 from CalebEverett/master

    [LeftNav] Open or close if docked prop changes when window resizes

commit bb57b9fb8d715ea5f92e0924b0b44a1cd3ae64f4
Merge: e439aaa bc7ceac
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Mon Nov 9 13:00:34 2015 +0100

    Merge pull request #2045 from rhythnic/master

    [Badge] Add a new component

commit bc7ceac55e40b5ece72a1afefb3c642b95747a03
Author: Nick Baroni <nick@rhythnic.com>
Date:   Tue Nov 3 17:49:19 2015 +0900

    Added badge component.

commit e439aaa1040a4ba55532e518371a9aa5fe376a87
Merge: c78b437 22e3b4c
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Mon Nov 9 11:37:23 2015 +0100

    Merge pull request #2097 from callemall/oliviertassinari-patch-2

    [README] Use master branch for the travis build status

commit 22e3b4cf67aa17138f0a462bb6e3c496d804f31c
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Mon Nov 9 11:12:46 2015 +0100

    [README] Use master branch for the travis build status

commit 6aff277d30e92824ef286b7829b7d64f42cd079a
Author: Caleb Everett <caleb@careercalifornia.edu>
Date:   Wed Nov 4 12:20:53 2015 -0800

    set LeftNav docked in componentWillReceiveProps

commit 26a0c85c634afe68d38f33b7d9d550678759f238
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 8 15:51:53 2015 +0100

    [eslint] Use the latest version

commit c78b43774450577c67545980a5e83ad2c3f6076d
Merge: df5f6ed 0dc2e4a
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 8 13:29:41 2015 +0100

    Merge pull request #2083 from subjectix/dialog-style-prop

    [doc] Add style property

commit df5f6ed9b980b27722f1cf1e8ce9b09f0b67882e
Merge: b4f8f8a 230bfcf
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 8 12:22:30 2015 +0100

    Merge pull request #2084 from oliviertassinari/npm

    [npm] Separate the lint and the build

commit 230bfcf3ed58762c6f5a9dde445d474ef2dc5fbb
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Sat Nov 7 12:54:20 2015 +0100

    [npm] Separate the lint and the build

commit 0dc2e4aca18e72b4d263abfb9defa10fb759ab96
Author: Ali Taheri <ali.taheri.m@gmail.com>
Date:   Tue Oct 6 15:54:45 2015 +0330

    Added undocumented style property to the components that use it

commit b4f8f8a4e721f89b48f0f788865016639efb18a8
Merge: 780d9a5 34e26fb
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sat Nov 7 04:03:50 2015 +0100

    Merge pull request #2078 from EnzoMartin/patch-1

    Fix label display with Chrome autocomplete

commit 780d9a5872e4033da5c725d124626673ce17a697
Merge: 4ab4d19 dfa9216
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sat Nov 7 02:44:05 2015 +0100

    Merge pull request #2073 from quangbuule/patch-1

    [TextField] Fix isValid function

commit 34e26fbd2e893fd5052dc5fded5ddf7ed47cff59
Author: Enzo Martin <enzo.r.martin@gmail.com>
Date:   Fri Nov 6 19:12:22 2015 +0100

    Fix label display with Chrome autocomplete

commit 4ab4d195d193febe439f2eb8a3f3c761ad9b4fc1
Merge: 47bf496 9fc0926
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Fri Nov 6 18:01:53 2015 +0100

    Merge pull request #2070 from mbrookes/patch-1

    [Doc] Add missing Textfield docs

commit 9fc0926aecc8e1c7ae61dccb2492a975e9722683
Author: Matt Brookes <mbrookes@users.noreply.github.com>
Date:   Fri Nov 6 16:34:44 2015 +0000

    Correct prop name!

commit dfa921628a1ce71cf75abc155908561accc46fa3
Author: Quangbuu Le <quangbuule@gmail.com>
Date:   Fri Nov 6 11:29:25 2015 +0700

    Update text-field.jsx

    The isValid function return not correct, this caused re-rendering the whole TextField when value prop received.

commit 0904107145e408b9abf2ea0b6875a804ad2aee18
Author: Matt Brookes <mbrookes@users.noreply.github.com>
Date:   Thu Nov 5 23:08:41 2015 +0000

    Missing Textfield docs.

commit 47bf496d977d0ff1ef9e1a7615c405b49e81ac2a
Merge: 7df3a99 2b1e062
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Thu Nov 5 15:22:32 2015 +0100

    Merge pull request #2063 from pandaiolo/node-props

    Changing propType from string to node on components

commit 2b1e062af30e28ed3724eb3a5d2547442e65bd8d
Author: Pandaiolo <aurelien@arimaska.net>
Date:   Thu Nov 5 14:30:04 2015 +0100

    [docs] Changing propType from string to node on components

commit 98532fd09683a65c194cd0386d7b19d5f65b96b6
Author: Pandaiolo <aurelien@arimaska.net>
Date:   Thu Nov 5 12:53:38 2015 +0100

    Changing propType from string to node on components

commit 7df3a9937b55a4aaa5a8a15e05572a4dfabaf21f
Merge: 789eaee 2019ad9
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Thu Nov 5 11:36:11 2015 +0100

    Merge pull request #2062 from pinturic/patch-1

    [LeftNav] Fix resize when using children

commit 2019ad96def1bb5975b92d3dfe76c5af493a7644
Author: pinturic <luca.tagliaferri@gmail.com>
Date:   Thu Nov 5 11:28:04 2015 +0100

    Update left-nav.jsx

    cleaned _updateMenuHeight variables declaration

commit b6cca6ffb2c4eb9861105dcf10c9a721efd044ce
Author: pinturic <luca.tagliaferri@gmail.com>
Date:   Thu Nov 5 11:14:27 2015 +0100

    Update left-nav.jsx

    Menu can be null if the MenuItems are inlined

commit 789eaee8485e73d9ffc0705923fd64eb3bf2e572
Merge: 8f5510a 308a7a2
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Wed Nov 4 23:56:20 2015 +0100

    Merge pull request #2016 from KapJI/theme-fix

    [Theme] Fix Slider and Toggle colors

commit 8f5510a19fba157f62b3107794435eb33cdc87fb
Merge: dfb8363 801e05a
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Wed Nov 4 23:13:54 2015 +0100

    Merge pull request #1996 from JorgenEvens/feature/dialog-show-prop

    [Dialog] Allow open state of dialog to be controlled through the show prop

commit 801e05ac6724cd711b16bad8fe14a69d7bc76dd7
Author: Jorgen Evens <jorgen@evens.eu>
Date:   Thu Oct 29 20:26:37 2015 +0100

    [Dialog] Re-enable legacy API with deprecation warnings.

commit 8050f496fa8768a80f92adc4431e3b8fdfab29fd
Author: Jorgen Evens <jorgen@evens.eu>
Date:   Tue Oct 27 22:48:45 2015 +0100

    [Dialog] Switch from imperative control to props.

    - Remove .dismiss() and .show()
    - Remove onShow and onDismiss callback
    - Added onRequestClose callback
    - Removed modal property
    - Updated docs
    - Add default values for defaultIsOpen and isOpen.

commit dfb836383adeeb592f6141751a814876828cbe15
Merge: aef950e 045b630
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Wed Nov 4 18:43:13 2015 +0100

    Merge pull request #2054 from cannium/master

    [TableBody] Table click away should also trigger onRowSelection

commit 045b63009e24c5b9690d031567493e36fa64ad2c
Author: Can Zhang <zhangcan@letv.com>
Date:   Wed Nov 4 10:36:22 2015 +0800

    Table click away should also trigger onRowSelection

commit aef950e8c43e5dd7e24f4a5077503bdc332ba92a
Merge: d3ee052 e7d6660
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 19:33:29 2015 +0100

    Merge pull request #2051 from chrismcv/auto-prefix-null

    [AutoPrefix] add null support

commit d3ee052c59ac5f23695dab93277a7698c0e9d789
Merge: 67cca09 d14c413
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 19:16:40 2015 +0100

    Merge pull request #2049 from Dashlane/fix/typo-textfield-doc

    [Doc] Fix typo in TextField doc

commit d14c413bb417d94dbe49c5425fd52c429ad9be20
Author: Thomas Guillory <thomas.guillory@dashlane.com>
Date:   Tue Nov 3 10:50:59 2015 +0100

    Fix typo in TextField doc

    There is a typo in TextField element documentation: the "Style Hint
    Text" example is not using the right property of `styles` object.

commit e7d6660e3616d1369e604b6382b5fbc8562ae33d
Author: Chris McVittie <chris.mcvittie@blue-zinc.com>
Date:   Tue Nov 3 16:25:52 2015 +0000

    auto prefix null support

commit 67cca097a7e06fe643dc8dca76ff967b75c675a0
Merge: 5821f0a dfb0acb
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 17:04:18 2015 +0100

    Merge pull request #1720 from NatalieT/ipad-fix

    [TextField fix ipad enhanced textarea

commit dfb0acb6b88658783638aae3fa6fee6bf432fac3
Author: Natalie Fitzsimons <natalie.fitzsimons@tm2app.co.uk>
Date:   Tue Nov 3 15:23:00 2015 +0000

    ipad cursor in extra field fix

commit 5821f0a58415ac6d9d93465b8c0b42384cb5ecd2
Merge: c8e622e 50a0942
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 14:47:55 2015 +0100

    Merge pull request #2042 from chrismcv/r2l

    Render to Layer component

commit 50a0942dbaa862ab225c74833deb4a885beffd4e
Author: Chris McVittie <chris@greenflump.com>
Date:   Mon Nov 2 20:35:40 2015 +0000

    Render to Layer component (+ squashed fixes)

commit c8e622e38564798c87194e449e97dcc065785294
Merge: 08a7c6b 3983146
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 12:07:44 2015 +0100

    Merge pull request #2014 from oliviertassinari/button-label-position

    [Button] Fix and add missing labelPosition

commit 08a7c6b014451a0a0e43b3e10bf2922f351cb26e
Merge: 076c4af bfa7336
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 12:06:52 2015 +0100

    Merge pull request #2024 from oliviertassinari/snackbar-fix-hide-show

    [Snackbar] Assert that displayed data changed before hide/show

commit 076c4afe035499f0821b9d868b288948c9da16f8
Merge: ac357ec 7677be5
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Tue Nov 3 11:58:29 2015 +0100

    Merge pull request #2047 from oliviertassinari/fix-progress

    [CircularProgress] Fix transition

commit 7677be5beedd9c315544d6beafa19c354d3d4e9f
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Tue Nov 3 11:50:19 2015 +0100

    [CircularProgress] clean up

commit 3f6d31a2c95c3a6e0a4fd98126183f65b61ee12f
Author: Chris McVittie <chris@greenflump.com>
Date:   Mon Nov 2 19:45:57 2015 +0000

    fix circular progress issue

commit ac357ec3ee16a1c23f57b767d913295cd1f61df8
Merge: 68baf9b b12bcdd
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 1 20:15:40 2015 +0100

    Merge pull request #2007 from Cavitt/universal-rendering

    Universal Rendering Support

commit b12bcdd11f8976de2ade6cb5c9f897583c618312
Author: Cavitt <support@xenomap.com>
Date:   Thu Oct 29 06:01:27 2015 -0500

    Implemented inline-style-prefixer

    User agent based prefixing for client and server side rendering. When
    rendering server-side define `navigator.userAgent` after receiving
    request headers but before rendering styles. A warning will be shown
    when attempting to use server-side rendering without defining a user
    agent. Client side rendering should automatically work as all modern
    browsers provide user agent via the navigator property.

commit 68baf9bd044d471486fb139da3d477edda59bfbc
Merge: edaf30f b13fe11
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 1 16:49:36 2015 +0100

    Merge pull request #2025 from CameronFletcher92/timepicker-fix

    Added keys to timepicker buttons, fixed #1964

commit edaf30fcbeec1616e53cdbf6cd90a42a12a39c7d
Merge: c66ff3d f25ef9e
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 1 16:46:11 2015 +0100

    Merge pull request #2030 from CameronFletcher92/tableheader-fix

    [Table] Added key to selectall column in TableHeader. Addresses #2028

commit f25ef9eed1f72851b59675e2f6613de1f1136f18
Author: Cameron Fletcher <cameronfletcher92@gmail.com>
Date:   Sun Nov 1 15:06:04 2015 +1000

    removed console log

commit 0b57d954f16ebb9422c79c4743acc65ec3fcc6a8
Author: Cameron Fletcher <cameronfletcher92@gmail.com>
Date:   Sun Nov 1 15:02:18 2015 +1000

    [Table] Added key to selectall column in TableHeader. Addresses #2028

commit c66ff3d3be855731b5cace43c4984ed8910f45e8
Merge: 0d86eea 80141f6
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sun Nov 1 00:51:10 2015 +0100

    Merge pull request #2021 from callemall/oliviertassinari-patch-1

    [Overlay] Fix server side rendering

commit b13fe11e6fb72cc5858f53d325b837ed16227d8c
Author: Cameron Fletcher <cameronfletcher92@gmail.com>
Date:   Sun Nov 1 00:24:16 2015 +1000

    changed timepicker button keys to AM/PM

commit e3920ac8d6b84b85490e2baa684c7c24e7fb0cb1
Author: Cameron Fletcher <cameronfletcher92@gmail.com>
Date:   Sun Nov 1 00:14:17 2015 +1000

    Added keys to timepicker buttons, fixed #1964

commit bfa733601a8c23fb3d1ddefb333129e15c8ce506
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Sat Oct 31 12:28:17 2015 +0100

    [Snackbar] Assert that displayed data changed before hide/show

commit 0d86eeabc2c3ed2dff215aa03ab0da9808895aac
Merge: 6141e2b 176762e
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sat Oct 31 12:22:26 2015 +0100

    Merge pull request #2022 from oliviertassinari/fix-test-date-picker

    [DatePicker] Fix tests for the 31 of October

commit 176762e3c9eda58cda107ab87764aff3d869ccb8
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Sat Oct 31 12:03:05 2015 +0100

    [DatePicker] Fix tests for the 31 of October

    This is a temporary fix.
    There is an edge case with the test.
    Calling addMonths with 31 of October return 1 of December,
    while we expect November.

commit 80141f67746984d878b55add78dd8c030e302c25
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sat Oct 31 11:16:39 2015 +0100

    [Overlay] Fix server side rendering

    The componentDidMount method is not called when rendering server side

commit 6141e2bdd74556fdd64b6cfea3e84d061cd62964
Merge: fd346dd 3f8825f
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Sat Oct 31 11:11:49 2015 +0100

    Merge pull request #1609 from umidbekkarimov/master

    [Table] onRowSelection return 'none' string on unselect all

commit 3983146501e9e7f08562605dfd4707e974563b90
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Fri Oct 30 13:39:33 2015 +0100

    [Button] Fix and add missing labelPosition

commit fd346ddb2be49e92a6984a234af3cec2b27dc7ec
Merge: 9be7261 a3e9cad
Author: Shaurya Arora <shaurya.arora1@gmail.com>
Date:   Fri Oct 30 17:03:23 2015 -0500

    Merge pull request #1589 from KapJI/slider-minvalue

    [Slider] Remove redundant 'defaultValue'. Fix bug when 'min' is greater than zero.

commit 308a7a22182e71d81fa50316be022290d4926dd4
Author: Ruslan Sayfutdinov <ruslan@sayfutdinov.com>
Date:   Fri Oct 30 20:54:27 2015 +0300

    Fix Slider and Toggle colors

commit a3e9cad6c31703c1ed40311b0b3b98e910ee5b8f
Author: Ruslan Sayfutdinov <ruslan@sayfutdinov.com>
Date:   Fri Oct 30 19:35:44 2015 +0300

    [Slider] Return 'defaultValue' back

commit 9be7261a08ff051c3193f5fbe523587c24df2b00
Merge: 3304889 f69ad2d
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Thu Oct 29 22:34:34 2015 +0100

    Merge pull request #1907 from oliviertassinari/tabs-swipeable

    [Docs] Add an example of tabs with a slide effect

commit f69ad2df0dc124d13267822fbee689339c7216e3
Author: Olivier Tassinari <olivier.tassinari@gmail.com>
Date:   Sat Oct 17 01:05:22 2015 +0200

    [Docs] Add an example of tabs with a slide effect

    This a classical use case for tabs on android.

commit 330488977f95dbebd6cf6a387bf10a86238331ff
Author: Shaurya Arora <shaurya.arora1@gmail.com>
Date:   Thu Oct 29 16:08:34 2015 -0500

    V0.13.1 release

commit 02959ea5663169cf31d6cfb17af048310638e351
Merge: eb3d232 8aaa223
Author: Olivier Tassinari <Olivier.tassinari@gmail.com>
Date:   Thu Oct 29 10:51:14 2015 +0100

    Merge pull request #1988 from igorbt/gridlist-docs-fix

    [GridList] docs fix - add back code examples

commit 8aaa2230b35c144c5d804868c8ef757215ad0bfa
Author: igorbt <igorbt@yahoo.com>
Date:   Wed Oct 28 06:28:43 2015 +0200

    fixed warning about keys and style

commit 6e9331981df28bdf163ba54f7744d157246a1eb1
Author: igorbt <igorbt@yahoo.com>
Date:   Thu Oct 22 07:33:24 2015 +0300

    adding back grid-list code examples

commit 28a0477573bbbed59bb4473902ff38106de0f6a3
Author: Ruslan Sayfutdinov <ruslan@sayfutdinov.com>
Date:   Fri Sep 4 18:48:19 2015 +0300

    Fix value update while dragging

commit 29964f5f8f8e32630ac626345e6fa88bacd8522f
Author: Ruslan Sayfutdinov <ruslan@sayfutdinov.com>
Date:   Fri Sep 4 00:39:48 2015 +0300

    Remove redundant 'defaultValue'. Fix bug when 'min' greater than zero.

commit 3f8825f983c1a0a7a9e9549159e0d85db2a2071a
Author: Umidbek Karimov <uma.karimov@gmail.com>
Date:   Tue Sep 8 18:02:54 2015 +0500

    Update table.jsx

    [Table] onRowSelection return 'none' string on unselect all
---
 .babelrc                                      |   6 +
 .travis.yml                                   |   3 +
 CHANGELOG.md                                  |  41 +++++
 README.md                                     |   5 +-
 docs/package.json                             |  10 +-
 docs/src/app/app-routes.jsx                   |   2 +
 docs/src/app/components/pages/components.jsx  |   1 +
 .../components/pages/components/app-bar.jsx   |  29 ++--
 .../components/pages/components/avatars.jsx   |  25 ++-
 .../app/components/pages/components/badge.jsx |  99 ++++++++++++
 .../components/pages/components/buttons.jsx   |  65 ++++++--
 .../app/components/pages/components/cards.jsx |  36 ++++-
 .../pages/components/date-picker.jsx          |  23 ++-
 .../components/pages/components/dialog.jsx    | 107 ++++++++++---
 .../pages/components/drop-down-menu.jsx       |  22 ++-
 .../components/pages/components/grid-list.jsx | 148 +++++++++---------
 .../pages/components/icon-buttons.jsx         |  26 ++-
 .../pages/components/icon-menus.jsx           |  55 ++++---
 .../app/components/pages/components/icons.jsx |  42 +++--
 .../components/pages/components/left-nav.jsx  |  22 ++-
 .../app/components/pages/components/lists.jsx |  74 ++++++---
 .../app/components/pages/components/menus.jsx |  55 +++++--
 .../app/components/pages/components/paper.jsx |  26 ++-
 .../components/pages/components/progress.jsx  |  31 +++-
 .../pages/components/refresh-indicator.jsx    |  22 ++-
 .../components/pages/components/sliders.jsx   |  22 ++-
 .../components/pages/components/snackbar.jsx  |  22 ++-
 .../components/pages/components/switches.jsx  |  44 ++++--
 .../app/components/pages/components/table.jsx |  73 ++++++++-
 .../app/components/pages/components/tabs.jsx  |  64 +++++++-
 .../pages/components/text-fields.jsx          |  42 +++--
 .../pages/components/time-picker.jsx          |  24 ++-
 .../components/pages/components/toolbars.jsx  |  46 +++++-
 .../app/components/raw-code/badge-code.txt    |  19 +++
 .../app/components/raw-code/dialog-code.txt   |  21 ++-
 .../components/raw-code/flat-button-code.txt  |  26 +--
 .../components/raw-code/grid-list-code.txt    |  32 ++++
 .../raw-code/raised-button-code.txt           |  27 ++--
 .../src/app/components/raw-code/tabs-code.txt |  19 +++
 .../components/raw-code/text-fields-code.txt  |   1 -
 docs/webpack-production.config.js             |   5 +
 package.json                                  |  28 ++--
 src/badge.jsx                                 | 106 +++++++++++++
 src/card/card-actions.jsx                     |   1 +
 src/card/card-expandable.jsx                  |   1 +
 src/card/card-header.jsx                      |   1 +
 src/card/card-title.jsx                       |   5 +-
 src/circular-progress.jsx                     |  27 ++--
 src/clearfix.jsx                              |   4 +
 src/date-picker/date-display.jsx              |   1 +
 src/date-picker/date-picker-dialog.jsx        |  17 +-
 src/dialog.jsx                                | 140 ++++++++++++-----
 src/drop-down-icon.jsx                        |   1 +
 src/drop-down-menu.jsx                        |   1 +
 src/enhanced-button.jsx                       |   1 +
 src/enhanced-switch.jsx                       |   3 +-
 src/enhanced-textarea.jsx                     |   4 +-
 src/flat-button.jsx                           |  17 +-
 src/floating-action-button.jsx                |   1 +
 src/font-icon.jsx                             |   1 +
 src/grid-list/grid-list.jsx                   |   1 +
 src/grid-list/grid-tile.jsx                   |   3 +-
 src/icon-button.jsx                           |   1 +
 src/index.js                                  |   1 +
 src/ink-bar.jsx                               |   1 +
 src/left-nav.jsx                              |  20 ++-
 src/linear-progress.jsx                       |   1 +
 src/lists/list-divider.jsx                    |   1 +
 src/lists/list-item.jsx                       |   1 +
 src/lists/list.jsx                            |   3 +-
 src/lists/nested-list.jsx                     |   1 +
 src/menu/link-menu-item.jsx                   |   1 +
 src/menu/menu-item.jsx                        |   1 +
 src/menu/menu.jsx                             |   2 +
 src/menu/subheader-menu-item.jsx              |   1 +
 src/menus/icon-menu.jsx                       |   1 +
 src/menus/menu-divider.jsx                    |   4 +
 src/menus/menu-item.jsx                       |   1 +
 src/menus/menu.jsx                            |   8 +-
 src/overlay.jsx                               |   3 +-
 src/paper.jsx                                 |   1 +
 src/radio-button-group.jsx                    |   1 +
 src/raised-button.jsx                         |  30 +++-
 src/refresh-indicator.jsx                     |  25 +--
 src/render-to-layer.js                        | 123 +++++++++++++++
 src/ripples/circle-ripple.jsx                 |   1 +
 src/ripples/focus-ripple.jsx                  |   5 +-
 src/ripples/touch-ripple.jsx                  |   1 +
 src/select-field.jsx                          |   1 +
 src/slider.jsx                                |   6 +-
 src/snackbar.jsx                              |   3 +-
 src/styles/auto-prefix.js                     |  70 ++++-----
 src/styles/raw-themes/light-raw-theme.js      |   2 +-
 src/styles/theme-manager.js                   |  16 +-
 src/styles/transitions.js                     |   2 +-
 src/svg-icon.jsx                              |   1 +
 src/table/table-body.jsx                      |   1 +
 src/table/table-header.jsx                    |   5 +-
 src/table/table.jsx                           |   9 +-
 src/tabs/tab.jsx                              |   1 +
 src/tabs/tabs.jsx                             |   1 +
 src/text-field.jsx                            |   4 +-
 src/time-picker/clock.jsx                     |   4 +-
 src/time-picker/time-picker-dialog.jsx        |  21 ++-
 src/toolbar/toolbar-group.jsx                 |   3 +-
 src/toolbar/toolbar-separator.jsx             |   4 +
 src/toolbar/toolbar-title.jsx                 |   1 +
 src/tooltip.jsx                               |   5 +-
 src/transition-groups/scale-in-child.jsx      |   1 +
 src/transition-groups/scale-in.jsx            |   1 +
 src/transition-groups/slide-in-child.jsx      |   1 +
 src/transition-groups/slide-in.jsx            |   1 +
 test/date-picker/calendar-spec.js             |  32 ++--
 113 files changed, 1717 insertions(+), 544 deletions(-)
 create mode 100644 .babelrc
 create mode 100644 docs/src/app/components/pages/components/badge.jsx
 create mode 100644 docs/src/app/components/raw-code/badge-code.txt
 create mode 100644 docs/src/app/components/raw-code/grid-list-code.txt
 create mode 100644 src/badge.jsx
 create mode 100644 src/render-to-layer.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000000000..9e50396b4fbd2c
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "stage": 1,
+  "plugins": [
+    "dev-expression"
+  ]
+}
diff --git a/.travis.yml b/.travis.yml
index 2d63fafb93ddf0..41586280211d3e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,3 +2,6 @@ language: node_js
 node_js:
   - "stable"
 sudo: false
+script:
+  - npm run lint
+  - npm test
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd95025113329a..5ff985cb5f5e0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,44 @@
+## 0.13.2
+###### _Nov 9, 2015_
+
+##### General
+- Add tabs with slide effect (#1907)
+- Universal rendering support (#2007) (thanks @Cavitt)
+- Add labelPosition prop to buttons (#2014)
+- Add RenderToLayer component (#2042) (thanks @chrismcv)
+- Open state of of dialog now controlled through props (#1996)
+  - openImmediately, show(), dismiss() deprecated
+- Update TextField docs (#2070)
+- New Badge component (#2045) (thanks @rhythnic)
+- Add import statements to components' docs pages (#2113)
+
+##### Component Fixes / Enhancements
+- Fix server side rendering (#2021)
+- Add key to TableHeaderColumn for selectAll (#2030)
+- Fix Circular Progress transition (#2047)
+- Fix Snackbar getting stuck when receiving new props (#2024)
+- iPad enhanced textarea fix (#1720)
+- Table clickAway triggers onRowSelection (#2054)
+- Theme color fixes for Slider and Toggle (#2016)
+
+## 0.13.1
+###### _Oct 29, 2015_
+
+##### General
+- [SVGIcons] added index.js and index-generator script (#1959)
+- [TimePicker] openDialog() function (#1939) and autoOk prop (#1940) added
+- [DatePicker] i18n support added (#1658)
+- [LeftNav] supports nested children (w/o menuItems) (#1982)
+- [Snackbar] updated for new specification (#1668)
+- [Tabs] added tabTemplate prop (#1691)
+
+##### Component Fixes / Enhancements
+- [TextArea] height issue fixed (#1875)
+- [GridList] doc added (#1948) with code examples (#1988)
+- [TextField] fixed custom theme color hiding backgroundColor (#1989)
+- [TimePicker] added style and textFieldStyle props (#1949)
+- [Card] text color is now pulled from theme (#1995)
+
 ## 0.13.0
 ###### _Oct 21, 2015_
 
diff --git a/README.md b/README.md
index b9333208dd4186..7e75ca7b08dcb7 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,7 @@
-#[Material-UI](http://callemall.github.io/material-ui/) [![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui) [![Build Status](https://img.shields.io/travis/callemall/material-ui.svg?style=flat-square)](https://travis-ci.org/callemall/material-ui) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+#[Material-UI](http://callemall.github.io/material-ui/)
+[![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui)
+[![Build Status](https://travis-ci.org/callemall/material-ui.svg?branch=master)](https://travis-ci.org/callemall/material-ui)
+[![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 [![PeerDependencies](https://img.shields.io/david/peer/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=peerDependencies&view=list)
 [![Dependencies](https://img.shields.io/david/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui)
diff --git a/docs/package.json b/docs/package.json
index 32954df2addb47..da50229a91f868 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,11 +1,12 @@
 {
   "name": "material-ui-docs",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "Documentation site for material-ui",
   "repository": {
     "type": "git",
     "url": "https://github.com/callemall/material-ui.git"
   },
+  "private": true,
   "scripts": {
     "prestart": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --inline",
     "start": "open http://localhost:3000",
@@ -15,13 +16,10 @@
   "dependencies": {
     "codemirror": "^5.5.0",
     "history": "^1.11.1",
-    "react-addons-create-fragment": "^0.14.0",
     "react-addons-perf": "^0.14.0",
-    "react-addons-pure-render-mixin": "^0.14.0",
-    "react-addons-transition-group": "^0.14.0",
-    "react-addons-update": "^0.14.0",
     "react-dom": "^0.14.0",
-    "react-tap-event-plugin": "^0.2.0"
+    "react-motion": "^0.3.1",
+    "react-swipeable-views": "^0.3.0"
   },
   "devDependencies": {
     "raw-loader": "^0.5.1",
diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
index fe37b92430b23b..7996d2d3f32d5b 100644
--- a/docs/src/app/app-routes.jsx
+++ b/docs/src/app/app-routes.jsx
@@ -22,6 +22,7 @@ const InlineStyles = require('./components/pages/customization/inline-styles');
 const Components = require('./components/pages/components');
 const AppBar = require('./components/pages/components/app-bar');
 const Avatars = require('./components/pages/components/avatars');
+const Badge = require('./components/pages/components/badge');
 const Buttons = require('./components/pages/components/buttons');
 const Cards = require('./components/pages/components/cards');
 const DatePicker = require('./components/pages/components/date-picker');
@@ -77,6 +78,7 @@ const AppRoutes = (
     <Route path="components" component={Components}>
       <Route path="appbar" component={AppBar} />
       <Route path="avatars" component={Avatars} />
+      <Route path="badge" component={Badge} />
       <Route path="buttons" component={Buttons} />
       <Route path="cards" component={Cards} />
       <Route path="date-picker" component={DatePicker} />
diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx
index d7069c034cdf97..bc9787804cfff6 100644
--- a/docs/src/app/components/pages/components.jsx
+++ b/docs/src/app/components/pages/components.jsx
@@ -7,6 +7,7 @@ export default class Components extends React.Component {
     let menuItems = [
       { route: '/components/appbar', text: 'AppBar'},
       { route: '/components/avatars', text: 'Avatars'},
+      { route: '/components/badge', text: 'Badge'},
       { route: '/components/buttons', text: 'Buttons'},
       { route: '/components/cards', text: 'Cards'},
       { route: '/components/date-picker', text: 'Date Picker'},
diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
index a0900340ab69e8..b9b0f3b14907ed 100644
--- a/docs/src/app/components/pages/components/app-bar.jsx
+++ b/docs/src/app/components/pages/components/app-bar.jsx
@@ -1,11 +1,12 @@
-let React = require('react');
-let { AppBar, DropDownMenu } = require('material-ui');
-let IconButton = require('icon-button');
-let NavigationClose = require('svg-icons/navigation/close');
-let FlatButton = require('flat-button');
-let ComponentDoc = require('../../component-doc');
-let CodeExample = require('../../code-example/code-example');
-let Code = require('app-bar-code');
+const React = require('react');
+const { AppBar, DropDownMenu, Paper } = require('material-ui');
+const IconButton = require('icon-button');
+const NavigationClose = require('svg-icons/navigation/close');
+const FlatButton = require('flat-button');
+const ComponentDoc = require('../../component-doc');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
+const Code = require('app-bar-code');
 const IconMenu = require('menus/icon-menu');
 const MenuItem = require('menus/menu-item');
 const MoreVertIcon = require('svg-icons/navigation/more-vert');
@@ -63,7 +64,7 @@ export default class AppBarPage extends React.Component {
             name: 'style',
             type: 'object',
             header: 'optional',
-            desc: 'Override the inline-styles of the app bars\'s root element.',
+            desc: 'Override the inline-styles of the app bar\'s root element.',
           },
           {
             name: 'showMenuIconButton',
@@ -113,6 +114,16 @@ export default class AppBarPage extends React.Component {
         name="AppBar"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <AppBar
             title="Title"
diff --git a/docs/src/app/components/pages/components/avatars.jsx b/docs/src/app/components/pages/components/avatars.jsx
index 552e23f83697c6..d82dfaa90250cb 100644
--- a/docs/src/app/components/pages/components/avatars.jsx
+++ b/docs/src/app/components/pages/components/avatars.jsx
@@ -1,10 +1,11 @@
-let React = require('react');
-let { Avatar, FontIcon, List, ListItem, Styles } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let FileFolder = require('svg-icons/file/folder');
-let { Colors } = Styles;
-let Code = require('avatars-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { Avatar, FontIcon, List, ListItem, Styles, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const FileFolder = require('svg-icons/file/folder');
+const { Colors } = Styles;
+const Code = require('avatars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 
 export default class AvatarsPage extends React.Component {
@@ -70,6 +71,16 @@ export default class AvatarsPage extends React.Component {
         name="Avatars"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <List>
             <ListItem leftAvatar={imageAvatar} disabled={true}>Image Avatar</ListItem>
diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx
new file mode 100644
index 00000000000000..4ca67f96986985
--- /dev/null
+++ b/docs/src/app/components/pages/components/badge.jsx
@@ -0,0 +1,99 @@
+const React = require('react');
+const { FontIcon, IconButton, Badge, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('badge-code');
+const CodeExample = require('../../code-example/code-example');
+const NotificationsIcon = require('svg-icons/social/notifications');
+const ShoppingCartIcon = require('svg-icons/action/shopping-cart');
+const FolderIcon = require('svg-icons/file/folder-open');
+const UploadIcon = require('svg-icons/file/cloud-upload');
+const CodeBlock = require('../../code-example/code-block');
+
+export default class BadgePage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)';
+
+    this.componentInfo = [
+      {
+        name: 'Props',
+        infoArray: [
+          {
+            name: 'badgeContent',
+            type: 'node',
+            header: 'required',
+            desc: 'This is the content rendered within the badge.',
+          },
+          {
+            name: 'primary',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, the badge will use the primary badge colors.',
+          },
+          {
+            name: 'secondary',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, the badge will use the secondary badge colors.',
+          },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the root element.',
+          },
+          {
+            name: 'badgeStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the badge element.',
+          },
+        ],
+      },
+    ];
+  }
+
+  render() {
+    return (
+      <ComponentDoc
+        name="Badge"
+        desc={this.desc}
+        componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
+        <CodeExample code={Code}>
+          
+          <Badge badgeContent={4} primary={true}>
+            <NotificationsIcon />
+          </Badge>
+
+          <Badge badgeContent={10} secondary={true} badgeStyle={{top:12, right:12}}>
+            <IconButton tooltip="Go To Cart">
+              <ShoppingCartIcon/>
+            </IconButton>
+          </Badge>
+
+          <Badge backgroundColor="#d8d8d8"
+                 badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}>
+            <FolderIcon />
+          </Badge>
+
+          <Badge badgeContent="&copy;" badgeStyle={{fontSize:20}}>
+            <h3>Company Name</h3>
+          </Badge>
+
+        </CodeExample>
+      </ComponentDoc>
+    );
+  }
+
+}
diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
index 66d6b52e646171..d2890faf905374 100644
--- a/docs/src/app/components/pages/components/buttons.jsx
+++ b/docs/src/app/components/pages/components/buttons.jsx
@@ -1,25 +1,27 @@
-let React = require('react');
-let ComponentDoc = require('../../component-doc');
-let mui = require('material-ui');
-let ToggleStar = require('svg-icons/toggle/star');
+const React = require('react');
+const ComponentDoc = require('../../component-doc');
+const mui = require('material-ui');
+const ToggleStar = require('svg-icons/toggle/star');
 
-let {
+const {
   ClearFix,
   FlatButton,
   FloatingActionButton,
   FontIcon,
   RaisedButton,
+  Paper,
   Styles,
   Tab,
   Tabs,
   Utils,
 } = mui;
-let extend = Utils.Extend;
-let { Colors, Typography } = Styles;
-let RaisedButtonCode = require('raised-button-code');
-let FloatingActionButtonCode = require('floating-action-button-code');
-let FlatButtonCode = require('flat-button-code');
-let CodeExample = require('../../code-example/code-example');
+const extend = Utils.Extend;
+const { Colors, Typography } = Styles;
+const RaisedButtonCode = require('raised-button-code');
+const FloatingActionButtonCode = require('floating-action-button-code');
+const FlatButtonCode = require('flat-button-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 
 export default class ButtonPage extends React.Component {
@@ -70,6 +72,12 @@ export default class ButtonPage extends React.Component {
             header: 'optional',
             desc: 'Override the inline-styles of the button\'s label element.',
           },
+          {
+            name: 'labelPosition',
+            type: 'oneOf ["before", "after"]',
+            header: 'default: "before"',
+            desc: 'Place label before or after the passed children',
+          },
           {
             name: 'linkButton',
             type: 'bool',
@@ -319,7 +327,6 @@ export default class ButtonPage extends React.Component {
         height: '100%',
         display: 'inline-block',
         verticalAlign: 'middle',
-        float: 'left',
         paddingLeft: '12px',
         lineHeight: '36px',
         color: Colors.cyan500,
@@ -347,12 +354,25 @@ export default class ButtonPage extends React.Component {
     return (
       <div>
         <h2 style={styles.headline}>Buttons</h2>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst FlatButton = require(\'material-ui/lib/flat-button\');\n' +
+            'const RaisedButton = require(\'material-ui/lib/raised-button\');\n' +
+            'const FloatingActionButton = require(\'material-ui/lib/floating-action-button\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <Tabs>
           <Tab label="Flat Buttons">
             <ComponentDoc
               name=""
               desc={this.desc}
               componentInfo={this.componentInfo.slice(0, 1)}>
+
               <CodeExample code={FlatButtonCode}>
                 <div style={styles.group}>
                   <div style={styles.container}>
@@ -375,7 +395,17 @@ export default class ButtonPage extends React.Component {
                     <FlatButton
                       linkButton={true}
                       href="https://github.com/callemall/material-ui"
-                      secondary={true} label="GitHub"
+                      secondary={true}
+                      label="GitHub"
+                      labelStyle={styles.buttonLabel}>
+                      <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
+                    </FlatButton>
+                  </div>
+                  <div style={styles.container}>
+                    <FlatButton
+                      secondary={true}
+                      label="Label after"
+                      labelPosition="after"
                       labelStyle={styles.buttonLabel}>
                       <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
                     </FlatButton>
@@ -420,6 +450,15 @@ export default class ButtonPage extends React.Component {
                       <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
                     </RaisedButton>
                   </div>
+                  <div style={styles.container}>
+                    <RaisedButton
+                      secondary={true}
+                      label="Label after"
+                      labelPosition="after"
+                      labelStyle={styles.buttonLabel}>
+                      <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
+                    </RaisedButton>
+                  </div>
                   <div style={styles.container}>
                     <RaisedButton label="Disabled" disabled={true} />
                   </div>
diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx
index cb89da0dbfa486..121c02a2f10db4 100644
--- a/docs/src/app/components/pages/components/cards.jsx
+++ b/docs/src/app/components/pages/components/cards.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const CodeExample = require('../../code-example/code-example');
 
-let {
+const {
   Avatar,
   Card,
   CardActions,
@@ -13,8 +13,10 @@ let {
   CardText,
   CardTitle,
   FlatButton,
+  Paper,
 } = mui;
-let Code = require('cards-code');
+const Code = require('cards-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class CardPage extends React.Component {
 
@@ -68,6 +70,12 @@ export default class CardPage extends React.Component {
                   'and CardActions implement showExpandableButton. Any child component of Card can implements ' +
                   'showExpandableButton or forwards the property to a child component supporting it.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the card\'s root element.',
+          },
         ],
       },
       {
@@ -90,6 +98,22 @@ export default class CardPage extends React.Component {
         name="Card"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst Card = require(\'material-ui/lib/card/card\');\n' +
+            'const CardActions = require(\'material-ui/lib/card/card-actions\');\n' +
+            'const CardExpandable = require(\'material-ui/lib/card/card-expandable\');\n' +
+            'const CardHeader = require(\'material-ui/lib/card/card-header\');\n' +
+            'const CardMedia = require(\'material-ui/lib/card/card-media\');\n' +
+            'const CardText = require(\'material-ui/lib/card/card-text\');\n' +
+            'const CardTitle = require(\'material-ui/lib/card/card-title\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Card>
             <CardHeader
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
index 98698b1357fa66..e6d4cb8e833a23 100644
--- a/docs/src/app/components/pages/components/date-picker.jsx
+++ b/docs/src/app/components/pages/components/date-picker.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { DatePicker, TextField, Toggle } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('date-picker-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { DatePicker, TextField, Paper, Toggle } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('date-picker-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DatePickerPage extends React.Component {
   constructor(props) {
@@ -202,6 +202,17 @@ export default class DatePickerPage extends React.Component {
       <ComponentDoc
         name="Date Picker"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst DatePicker = require(\'material-ui/lib/date-picker/date-picker\');\n' +
+            'const DatePickerDialog = require(\'material-ui/lib/date-picker/date-picker-dialog\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <DatePicker
             hintText="Portrait Dialog" />
diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
index 2ef62cc95b6f15..1eed3bb6139159 100644
--- a/docs/src/app/components/pages/components/dialog.jsx
+++ b/docs/src/app/components/pages/components/dialog.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { Dialog, FlatButton, RaisedButton, Toggle } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('dialog-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { Dialog, FlatButton, RaisedButton, Paper, Toggle } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('dialog-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DialogPage extends React.Component {
 
@@ -11,6 +11,9 @@ export default class DialogPage extends React.Component {
     super();
     this.state = {
       modal: false,
+      openDialogStandardActions: false,
+      openDialogCustomActions: false,
+      openDialogScrollable: false,
     };
     this._handleCustomDialogCancel = this._handleCustomDialogCancel.bind(this);
     this._handleCustomDialogSubmit = this._handleCustomDialogSubmit.bind(this);
@@ -19,6 +22,7 @@ export default class DialogPage extends React.Component {
     this._handleCustomDialogTouchTap = this._handleCustomDialogTouchTap.bind(this);
     this._handleStandardDialogTouchTap = this._handleStandardDialogTouchTap.bind(this);
     this._handleScrollableDialogTouchTap = this._handleScrollableDialogTouchTap.bind(this);
+    this._handleRequestClose = this._handleRequestClose.bind(this);
     this._handleToggleChange = this._handleToggleChange.bind(this);
   }
 
@@ -40,6 +44,12 @@ export default class DialogPage extends React.Component {
             header: 'optional',
             desc: 'The ref of the action to focus on when the dialog is displayed.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the dialog\'s root element.',
+          },
           {
             name: 'bodyStyle',
             type: 'object',
@@ -66,11 +76,23 @@ export default class DialogPage extends React.Component {
             desc: 'Force the user to use one of the actions in the dialog. Clicking outside the dialog will not dismiss the dialog.',
           },
           {
-            name: 'openImmediately',
+            name: 'Deprecated: openImmediately',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'Deprecated: Set to true to have the dialog automatically open on mount.',
+          },
+          {
+            name: 'defaultOpen',
             type: 'bool',
             header: 'default: false',
             desc: 'Set to true to have the dialog automatically open on mount.',
           },
+          {
+            name: 'open',
+            type: 'bool',
+            header: 'default: null',
+            desc: 'Controls whether the Dialog is opened or not.',
+          },
           {
             name: 'title',
             type: 'node',
@@ -96,12 +118,12 @@ export default class DialogPage extends React.Component {
         name: 'Methods',
         infoArray: [
           {
-            name: 'dismiss',
+            name: 'Deprecated: dismiss',
             header: 'Dialog.dismiss()',
             desc: 'Hides the dialog.',
           },
           {
-            name: 'show',
+            name: 'Deprecated: show',
             header: 'Dialog.show()',
             desc: 'Shows the dialog.',
           },
@@ -116,15 +138,20 @@ export default class DialogPage extends React.Component {
         name: 'Events',
         infoArray: [
           {
-            name: 'onDismiss',
+            name: 'Deprecated: onDismiss',
             header: 'function()',
             desc: 'Fired when the dialog is dismissed.',
           },
           {
-            name: 'onShow',
+            name: 'Deprecated: onShow',
             header: 'function()',
             desc: 'Fired when the dialog is shown.',
           },
+          {
+            name: 'onRequestClose',
+            header: 'function(buttonClicked)',
+            desc: 'Fired when the dialog is requested to be closed by a click outside the dialog or on the buttons.',
+          },
         ],
       },
     ];
@@ -163,6 +190,16 @@ export default class DialogPage extends React.Component {
       <ComponentDoc
         name="Dialog"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Dialog = require(\'material-ui/lib/dialog\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <RaisedButton label="Standard Actions" onTouchTap={this._handleStandardDialogTouchTap} />
           <br/><br/>
@@ -175,7 +212,8 @@ export default class DialogPage extends React.Component {
             title="Dialog With Standard Actions"
             actions={standardActions}
             actionFocus="submit"
-            modal={this.state.modal}>
+            open={this.state.openDialogStandardActions}
+            onRequestClose={this._handleRequestClose}>
             The actions in this window are created from the json that&#39;s passed in.
           </Dialog>
 
@@ -183,7 +221,8 @@ export default class DialogPage extends React.Component {
             ref="customDialog"
             title="Dialog With Custom Actions"
             actions={customActions}
-            modal={this.state.modal}>
+            open={this.state.openDialogCustomActions}
+            onRequestClose={this._handleRequestClose}>
             The actions in this window were passed in as an array of react objects.
           </Dialog>
           <div style={{width: '300px', margin: '0 auto', paddingTop: '20px'}}>
@@ -196,9 +235,10 @@ export default class DialogPage extends React.Component {
             ref="scrollableContentDialog"
             title="Dialog With Scrollable Content"
             actions={scrollableCustomActions}
-            modal={this.state.modal}
             autoDetectWindowHeight={true}
-            autoScrollBodyContent={true}>
+            autoScrollBodyContent={true}
+            open={this.state.openDialogScrollable}
+            onRequestClose={this._handleRequestClose}>
             <div style={{height: '1000px'}}>
               Really long content
             </div>
@@ -214,11 +254,15 @@ export default class DialogPage extends React.Component {
   }
 
   _handleCustomDialogCancel() {
-    this.refs.customDialog.dismiss();
+    this.setState({
+      openDialogCustomActions: true,
+    });
   }
 
   _handleCustomDialogSubmit() {
-    this.refs.customDialog.dismiss();
+    this.setState({
+      openDialogCustomActions: true,
+    });
   }
 
   _handleToggleChange(e, toggled) {
@@ -226,23 +270,42 @@ export default class DialogPage extends React.Component {
   }
 
   _handleScrollableDialogCancel() {
-    this.refs.scrollableContentDialog.dismiss();
+    this.setState({
+      openDialogScrollable: false,
+    });
   }
 
   _handleScrollableDialogSubmit() {
-    this.refs.scrollableContentDialog.dismiss();
+    this.setState({
+      openDialogScrollable: false,
+    });
   }
 
   _handleCustomDialogTouchTap() {
-    this.refs.customDialog.show();
+    this.setState({
+      openDialogScrollable: true,
+    });
   }
 
   _handleStandardDialogTouchTap() {
-    this.refs.standardDialog.show();
+    this.setState({
+      openDialogStandardActions: true,
+    });
   }
 
   _handleScrollableDialogTouchTap() {
-    this.refs.scrollableContentDialog.show();
+    this.setState({
+      openDialogScrollable: true,
+    });
+  }
+
+  _handleRequestClose(buttonClicked) {
+    if (!buttonClicked && this.state.modal) return;
+    this.setState({
+      openDialogStandardActions: false,
+      openDialogCustomActions: false,
+      openDialogScrollable: false,
+    });
   }
 
 }
diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx
index c3e2e501605bd4..0bf50932e52eec 100644
--- a/docs/src/app/components/pages/components/drop-down-menu.jsx
+++ b/docs/src/app/components/pages/components/drop-down-menu.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { DropDownMenu } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('drop-down-menu-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { DropDownMenu, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('drop-down-menu-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DropDownMenuPage extends React.Component {
 
@@ -117,6 +117,16 @@ export default class DropDownMenuPage extends React.Component {
       <ComponentDoc
         name="Drop Down Menu"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst DropDownMenu = require(\'material-ui/lib/drop-down-menu\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <DropDownMenu menuItems={menuItems} />
         </CodeExample>
diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx
index 4c42eb526a753a..fda7e10432f0d4 100644
--- a/docs/src/app/components/pages/components/grid-list.jsx
+++ b/docs/src/app/components/pages/components/grid-list.jsx
@@ -1,52 +1,19 @@
-let React = require('react');
-let { GridList, GridTile } = require('material-ui');
+const React = require('react');
+const { GridList, GridTile, Paper } = require('material-ui');
 
-let StarBorder = require('svg-icons/toggle/star-border');
-let IconButton = require('icon-button');
-
-let ComponentDoc = require('../../component-doc');
+const StarBorder = require('svg-icons/toggle/star-border');
+const IconButton = require('icon-button');
 
+const ComponentDoc = require('../../component-doc');
+const Code = require('grid-list-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 class GridListPage extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.code = `
-{/* Basic grid list with mostly default options */}
-<GridList
-  cellHeight={200}
-  style={{width: 320, height: 640, overflowY: 'auto'}}
-  >
-  {
-    tilesData.map(tile => <GridTile
-      title={tile.title}
-      subtitle={<span>by <b>{tile.author}</b></span>}
-      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-      ><img src={tile.img} /></GridTile>)
-  }
-</GridList>
-{/* Grid list with all possible overrides */}
-<GridList
-  cols={2}
-  cellHeight={200}
-  padding={1}
-  style={{width: 320, height: 640, overflowY: 'auto'}}
-  >
-  {
-    tilesData.map(tile => <GridTile
-      title={tile.title}
-      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-      actionPosition="left"
-      titlePosition="top"
-      titleBackground={gradientBg}
-      cols={tile.featured ? 2 : 1}
-      rows={tile.featured ? 2 : 1}
-      ><img src={tile.img} /></GridTile>)
-  }
-</GridList>
-    `;
-
     this.desc = <p>Simple flex-box based <a
                   href="https://www.google.com/design/spec/components/grid-lists.html"
                   >Grid List</a> implementation. Support tiles with arbitrary cell size,
@@ -77,6 +44,12 @@ class GridListPage extends React.Component {
             header: 'optional',
             desc: 'Number of px for one cell height. Defaults to 180.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the grid list\'s root element.',
+          },
         ],
       },
       {
@@ -84,7 +57,7 @@ class GridListPage extends React.Component {
         infoArray: [
           {
             name: 'title',
-            type: 'string',
+            type: 'node',
             header: 'optional',
             desc: 'Title to be displayed on tile.',
           },
@@ -130,6 +103,12 @@ class GridListPage extends React.Component {
             header: 'optional',
             desc: 'Height of the tile in number of grid cells. Defaults to 1.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the grid tile\'s root element.',
+          },
           {
             name: 'rootClass',
             type: 'string|ReactComponent',
@@ -199,7 +178,7 @@ class GridListPage extends React.Component {
       },
     ];
 
-    let gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%);';
+    let gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)';
 
     return (
       <ComponentDoc
@@ -207,40 +186,55 @@ class GridListPage extends React.Component {
         code={this.code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
-        <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
-          {/* Basic grid list with mostly default options */}
-          <GridList
-            cellHeight={200}
-            style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
-            >
-            {
-              tilesData.map(tile => <GridTile
-                title={tile.title}
-                subtitle={<span>by <b>{tile.author}</b></span>}
-                actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-                ><img src={tile.img} /></GridTile>)
-            }
-          </GridList>
-          {/* Grid list with all possible overrides */}
-          <GridList
-            cols={2}
-            cellHeight={200}
-            padding={1}
-            style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
-            >
-            {
-              tilesData.map(tile => <GridTile
-                title={tile.title}
-                actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-                actionPosition="left"
-                titlePosition="top"
-                titleBackground={gradientBg}
-                cols={tile.featured ? 2 : 1}
-                rows={tile.featured ? 2 : 1}
-                ><img src={tile.img} /></GridTile>)
-            }
-          </GridList>
-        </div>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst GridList = require(\'material-ui/lib/grid-list/grid-list\');\n' +
+            'const GridTile = require(\'material-ui/lib/grid-list/grid-tile\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
+        <CodeExample code={Code}>
+          <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
+            {/* Basic grid list with mostly default options */}
+            <GridList
+              cellHeight={200}
+              style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
+              >
+              {
+                tilesData.map(tile => <GridTile
+                  key={tile.img}
+                  title={tile.title}
+                  subtitle={<span>by <b>{tile.author}</b></span>}
+                  actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+                  ><img src={tile.img} /></GridTile>)
+              }
+            </GridList>
+            {/* Grid list with all possible overrides */}
+            <GridList
+              cols={2}
+              cellHeight={200}
+              padding={1}
+              style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
+              >
+              {
+                tilesData.map(tile => <GridTile
+                  key={tile.img}
+                  title={tile.title}
+                  actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+                  actionPosition="left"
+                  titlePosition="top"
+                  titleBackground={gradientBg}
+                  cols={tile.featured ? 2 : 1}
+                  rows={tile.featured ? 2 : 1}
+                  ><img src={tile.img} /></GridTile>)
+              }
+            </GridList>
+          </div>
+        </CodeExample>
       </ComponentDoc>
     );
   }
diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx
index 3265b03aba6b1f..6a1c2daee16fbf 100644
--- a/docs/src/app/components/pages/components/icon-buttons.jsx
+++ b/docs/src/app/components/pages/components/icon-buttons.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let { FontIcon, IconButton, NavigationMenu } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let ActionGrade = require('svg-icons/action/grade');
-let ActionHome = require('svg-icons/action/home');
-let Code = require('icon-buttons-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { FontIcon, IconButton, NavigationMenu, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const ActionGrade = require('svg-icons/action/grade');
+const ActionHome = require('svg-icons/action/home');
+const Code = require('icon-buttons-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class IconButtonsPage extends React.Component {
 
@@ -115,6 +115,16 @@ export default class IconButtonsPage extends React.Component {
         name="Icon Buttons"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst IconButton = require(\'material-ui/lib/icon-button\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right"  tooltipPosition = "bottom-right" />
 
diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx
index 2225cabcf4533c..c26da0ec406acf 100644
--- a/docs/src/app/components/pages/components/icon-menus.jsx
+++ b/docs/src/app/components/pages/components/icon-menus.jsx
@@ -1,22 +1,22 @@
-let React = require('react');
-let { IconButton } = require('material-ui');
-let IconMenu = require('menus/icon-menu');
-let MenuItem = require('menus/menu-item');
-let MenuDivider = require('menus/menu-divider');
-let MoreVertIcon = require('svg-icons/navigation/more-vert');
-let ComponentDoc = require('../../component-doc');
-
-let ContentCopy = require('svg-icons/content/content-copy');
-let ContentFilter = require('svg-icons/content/filter-list');
-let ContentLink = require('svg-icons/content/link');
-let Delete = require('svg-icons/action/delete');
-let Download = require('svg-icons/file/file-download');
-let MapsPlace = require('svg-icons/maps/place');
-let PersonAdd = require('svg-icons/social/person-add');
-let RemoveRedEye = require('svg-icons/image/remove-red-eye');
-let Code = require('icon-menus-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { IconButton, Paper } = require('material-ui');
+const IconMenu = require('menus/icon-menu');
+const MenuItem = require('menus/menu-item');
+const MenuDivider = require('menus/menu-divider');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
+const ComponentDoc = require('../../component-doc');
+
+const ContentCopy = require('svg-icons/content/content-copy');
+const ContentFilter = require('svg-icons/content/filter-list');
+const ContentLink = require('svg-icons/content/link');
+const Delete = require('svg-icons/action/delete');
+const Download = require('svg-icons/file/file-download');
+const MapsPlace = require('svg-icons/maps/place');
+const PersonAdd = require('svg-icons/social/person-add');
+const RemoveRedEye = require('svg-icons/image/remove-red-eye');
+const Code = require('icon-menus-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class IconMenus extends React.Component {
 
@@ -56,6 +56,12 @@ export default class IconMenus extends React.Component {
             header: 'default: false',
             desc: 'Indicates if the menu should render with compact desktop styles.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the icon menu\'s root element.',
+          },
           {
             name: 'iconStyle',
             type: 'object',
@@ -146,6 +152,17 @@ export default class IconMenus extends React.Component {
         name="Icon Menus"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst IconMenu = require(\'material-ui/lib/menus/icon-menu\');\n' +
+            'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <br/>
 
diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx
index 9a467e095d28c3..833fb0f6add53d 100644
--- a/docs/src/app/components/pages/components/icons.jsx
+++ b/docs/src/app/components/pages/components/icons.jsx
@@ -1,13 +1,13 @@
-let React = require('react');
-let { ClearFix, FontIcon, Styles, Paper } = require('material-ui');
-let CodeBlock = require('../../code-example/code-block');
-let ComponentDoc = require('../../component-doc');
-let ActionHome = require('svg-icons/action/home');
+const React = require('react');
+const { ClearFix, FontIcon, Styles, Paper } = require('material-ui');
+const CodeBlock = require('../../code-example/code-block');
+const ComponentDoc = require('../../component-doc');
+const ActionHome = require('svg-icons/action/home');
 
-let { Colors, Typography } = Styles;
-let IconButtonCode = require('icons-code');
-let SvgIconsCode = require('svg-icons-code');
-let CodeExample = require('../../code-example/code-example');
+const { Colors, Typography } = Styles;
+const IconButtonCode = require('icons-code');
+const SvgIconsCode = require('svg-icons-code');
+const CodeExample = require('../../code-example/code-example');
 
 
 export default class FontIconPage extends React.Component {
@@ -38,7 +38,7 @@ export default class FontIconPage extends React.Component {
         and reference the icon&#39;s className in the "className" prop. <br /><br />
         We also support <a title="Google's
         Material Icons" href="https://google.github.io/material-design-icons">Google&#39;s
-        Material Icons</a> as seen in the third block of code. If you're using the material icons, be sure to include the link to the font icon file in your head section:
+        Material Icons</a> as seen in the third block of code. If you&#39;re using the material icons, be sure to include the link to the font icon file in your head section:
         <Paper>
           <CodeBlock>
             {'<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">'}
@@ -75,6 +75,12 @@ export default class FontIconPage extends React.Component {
             header: 'optional',
             desc: 'This is the icon color when the mouse hovers over the icon.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the font icon\'s root element.',
+          },
         ],
       },
       {
@@ -93,6 +99,12 @@ export default class FontIconPage extends React.Component {
             header: 'optional',
             desc: 'This is the icon color when the mouse hovers over the icon.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the svg icon\'s root element.',
+          },
         ],
       },
     ];
@@ -107,6 +119,16 @@ export default class FontIconPage extends React.Component {
           name="Font Icons"
           desc={fontIconDesc}
           componentInfo={componentInfo.slice(0, 1)}>
+
+          <Paper style = {{marginBottom: '22px'}}>
+            <CodeBlock>
+            {
+              '//Import statement:\nconst FontIcon = require(\'material-ui/lib/font-icon\');\n\n' +
+              '//See material-ui/lib/index.js for more\n'
+            }
+            </CodeBlock>
+          </Paper>
+
           <CodeExample code={IconButtonCode}>
             <FontIcon className="muidocs-icon-action-home" style={iconStyles} />
             <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.red500} />
diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx
index a1052f9d8a8077..b6497f1db515c1 100644
--- a/docs/src/app/components/pages/components/left-nav.jsx
+++ b/docs/src/app/components/pages/components/left-nav.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { LeftNav, MenuItem, RaisedButton } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('left-nav-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { LeftNav, MenuItem, RaisedButton, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('left-nav-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class LeftNavPage extends React.Component {
 
@@ -141,6 +141,16 @@ export default class LeftNavPage extends React.Component {
       <ComponentDoc
         name="Left Nav"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst LeftNav = require(\'material-ui/lib/left-nav\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div>
             <div>
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
index 9a787da1673e84..119fee1dba9ec8 100644
--- a/docs/src/app/components/pages/components/lists.jsx
+++ b/docs/src/app/components/pages/components/lists.jsx
@@ -1,21 +1,21 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let MobileTearSheet = require('../../mobile-tear-sheet');
-let ActionAssignment = require('svg-icons/action/assignment');
-let ActionGrade = require('svg-icons/action/grade');
-let ActionInfo = require('svg-icons/action/info');
-let CommunicationCall = require('svg-icons/communication/call');
-let CommunicationChatBubble = require('svg-icons/communication/chat-bubble');
-let CommunicationEmail = require('svg-icons/communication/email');
-let ContentDrafts = require('svg-icons/content/drafts');
-let ContentInbox = require('svg-icons/content/inbox');
-let ContentSend = require('svg-icons/content/send');
-let EditorInsertChart = require('svg-icons/editor/insert-chart');
-let FileFolder = require('svg-icons/file/folder');
-let MoreVertIcon = require('svg-icons/navigation/more-vert');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const MobileTearSheet = require('../../mobile-tear-sheet');
+const ActionAssignment = require('svg-icons/action/assignment');
+const ActionGrade = require('svg-icons/action/grade');
+const ActionInfo = require('svg-icons/action/info');
+const CommunicationCall = require('svg-icons/communication/call');
+const CommunicationChatBubble = require('svg-icons/communication/chat-bubble');
+const CommunicationEmail = require('svg-icons/communication/email');
+const ContentDrafts = require('svg-icons/content/drafts');
+const ContentInbox = require('svg-icons/content/inbox');
+const ContentSend = require('svg-icons/content/send');
+const EditorInsertChart = require('svg-icons/editor/insert-chart');
+const FileFolder = require('svg-icons/file/folder');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
 
-let {
+const {
   Avatar,
   Checkbox,
   IconButton,
@@ -24,16 +24,16 @@ let {
   ListItem,
   Styles,
   Toggle,
+  Paper,
 } = mui;
 
-let IconMenu = require('menus/icon-menu');
-let MenuItem = require('menus/menu-item');
-
-let { Colors } = Styles;
-let Code = require('lists-code');
-let CodeExample = require('../../code-example/code-example');
-
+const IconMenu = require('menus/icon-menu');
+const MenuItem = require('menus/menu-item');
 
+const { Colors } = Styles;
+const Code = require('lists-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class ListsPage extends React.Component {
 
@@ -53,9 +53,15 @@ export default class ListsPage extends React.Component {
             header: 'default: false',
             desc: 'If true, the subheader will be indented by 72px.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the list\'s root element.',
+          },
           {
             name: 'subheader',
-            type: 'string',
+            type: 'node',
             header: 'optional',
             desc: 'The subheader string that will be displayed at the top of the list.',
           },
@@ -170,6 +176,12 @@ export default class ListsPage extends React.Component {
             header: 'default: 1',
             desc: 'Can be 1 or 2. This is the number of secondary text lines before ellipsis will show.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the list item\'s root element.',
+          },
         ],
       },
       {
@@ -236,6 +248,18 @@ export default class ListsPage extends React.Component {
       <ComponentDoc
         name="Lists"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst List = require(\'material-ui/lib/lists/list\');\n' +
+            'const ListDivider = require(\'material-ui/lib/lists/list-divider\');\n' +
+            'const ListItem = require(\'material-ui/lib/lists/list-item\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <MobileTearSheet>
             <List>
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
index d8c51fec34f838..b48e3b5c88358b 100644
--- a/docs/src/app/components/pages/components/menus.jsx
+++ b/docs/src/app/components/pages/components/menus.jsx
@@ -1,20 +1,21 @@
-let React = require('react');
+const React = require('react');
 const ReactTransitionGroup = require('react-addons-transition-group');
-let Menu = require('menus/menu');
-let MenuItem = require('menus/menu-item');
-let MenuDivider = require('menus/menu-divider');
-let ComponentDoc = require('../../component-doc');
-
-let ArrowDropRight = require('svg-icons/navigation-arrow-drop-right');
-let ContentCopy = require('svg-icons/content/content-copy');
-let ContentLink = require('svg-icons/content/link');
-let Delete = require('svg-icons/action/delete');
-let Download = require('svg-icons/file/file-download');
-let PersonAdd = require('svg-icons/social/person-add');
-let RemoveRedEye = require('svg-icons/image/remove-red-eye');
-let Code = require('menus-code');
-let CodeExample = require('../../code-example/code-example');
+const Paper = require('paper');
+const Menu = require('menus/menu');
+const MenuItem = require('menus/menu-item');
+const MenuDivider = require('menus/menu-divider');
+const ComponentDoc = require('../../component-doc');
 
+const ArrowDropRight = require('svg-icons/navigation-arrow-drop-right');
+const ContentCopy = require('svg-icons/content/content-copy');
+const ContentLink = require('svg-icons/content/link');
+const Delete = require('svg-icons/action/delete');
+const Download = require('svg-icons/file/file-download');
+const PersonAdd = require('svg-icons/social/person-add');
+const RemoveRedEye = require('svg-icons/image/remove-red-eye');
+const Code = require('menus-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class MenusPage extends React.Component {
 
@@ -46,6 +47,12 @@ export default class MenusPage extends React.Component {
             header: 'default: false',
             desc: 'Indicates if the menu should render with compact desktop styles.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the menu\'s root element.',
+          },
           {
             name: 'listStyle',
             type: 'object',
@@ -114,6 +121,12 @@ export default class MenusPage extends React.Component {
             header: 'default: false',
             desc: 'Disables a menu item.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the menu item\'s root element.',
+          },
           {
             name: 'innerDivStyle',
             type: 'object',
@@ -203,6 +216,18 @@ export default class MenusPage extends React.Component {
         name="Menus"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Menu = require(\'material-ui/lib/menus/menu\');\n' +
+            'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n' +
+            'const MenuDivider = require(\'material-ui/lib/menus/menu-divider\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Menu style={styles.menu}>
             <MenuItem primaryText="Maps" />
diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx
index 00ea47d4b61f0e..ea3d0f6087ea0e 100644
--- a/docs/src/app/components/pages/components/paper.jsx
+++ b/docs/src/app/components/pages/components/paper.jsx
@@ -1,13 +1,13 @@
-let React = require('react');
-let { ClearFix, Mixins, Paper } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
+const React = require('react');
+const { ClearFix, Mixins, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
 
-let { StyleResizable } = Mixins;
-let Code = require('paper-code');
-let CodeExample = require('../../code-example/code-example');
+const { StyleResizable } = Mixins;
+const Code = require('paper-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
-
-let PaperPage = React.createClass ({
+const PaperPage = React.createClass ({
 
   mixins: [StyleResizable],
 
@@ -84,6 +84,16 @@ let PaperPage = React.createClass ({
       <ComponentDoc
         name="Paper"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Paper = require(\'material-ui/lib/paper\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div>
             <ClearFix style={groupStyle}>
diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx
index 92ea197e8c3e64..aed803bfab6119 100644
--- a/docs/src/app/components/pages/components/progress.jsx
+++ b/docs/src/app/components/pages/components/progress.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let { CircularProgress, LinearProgress } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('progress-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { CircularProgress, LinearProgress, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('progress-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
-
-let ProgressPage = React.createClass({
+const ProgressPage = React.createClass({
 
   getInitialState () {
     return {
@@ -66,6 +66,12 @@ let ProgressPage = React.createClass({
             header: 'default: 1',
             desc: 'The size of the progress.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the progress\'s root element.',
+          },
         ],
       },
     ];
@@ -75,6 +81,17 @@ let ProgressPage = React.createClass({
       <ComponentDoc
         name="Progress"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst CircularProgress = require(\'material-ui/lib/circular-progress\');\n' +
+            'const LinearProgress = require(\'material-ui/lib/linear-progress\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <h2>Linear Progress</h2>
           <p>
diff --git a/docs/src/app/components/pages/components/refresh-indicator.jsx b/docs/src/app/components/pages/components/refresh-indicator.jsx
index 6c71795d89cc88..b66cd4ae810443 100644
--- a/docs/src/app/components/pages/components/refresh-indicator.jsx
+++ b/docs/src/app/components/pages/components/refresh-indicator.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { RefreshIndicator } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('refresh-indicator-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { RefreshIndicator, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('refresh-indicator-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 let RefreshIndicatorPage = React.createClass({
 
@@ -58,6 +58,16 @@ let RefreshIndicatorPage = React.createClass({
       <ComponentDoc
         name="RefreshIndicator"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst RefreshIndicator = require(\'material-ui/lib/refresh-indicator\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div style={{ position: "relative" }}>
             <p>
diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx
index 1989c614f269d9..681bb76ef3073c 100644
--- a/docs/src/app/components/pages/components/sliders.jsx
+++ b/docs/src/app/components/pages/components/sliders.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { Slider } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('sliders-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { Paper, Slider } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('sliders-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class SlidersPage extends React.Component {
 
@@ -129,6 +129,16 @@ export default class SlidersPage extends React.Component {
       <ComponentDoc
         name="Sliders"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Slider = require(\'material-ui/lib/slider\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Slider name="slider1" />
           <Slider name="slider2" defaultValue={0.5} step={0.10} />
diff --git a/docs/src/app/components/pages/components/snackbar.jsx b/docs/src/app/components/pages/components/snackbar.jsx
index ece71d615ce48d..b6684f7d67fef7 100644
--- a/docs/src/app/components/pages/components/snackbar.jsx
+++ b/docs/src/app/components/pages/components/snackbar.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { RaisedButton, Snackbar, TextField } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('snackbars-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { RaisedButton, Snackbar, TextField, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('snackbars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class SnackbarPage extends React.Component {
 
@@ -98,6 +98,16 @@ export default class SnackbarPage extends React.Component {
       <ComponentDoc
         name="Snackbar"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Snackbar = require(\'material-ui/lib/snackbar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <RaisedButton
             onTouchTap={this._handleClick}
diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
index 6ffe11abfe37dd..e48be9a95efb31 100644
--- a/docs/src/app/components/pages/components/switches.jsx
+++ b/docs/src/app/components/pages/components/switches.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let mui = require('material-ui');
-let CodeExample = require('../../code-example/code-example');
-let ComponentDoc = require('../../component-doc');
-let ToggleStar = require('svg-icons/toggle/star');
-let ToggleStarBorder = require('svg-icons/toggle/star-border');
+const React = require('react');
+const mui = require('material-ui');
+const CodeExample = require('../../code-example/code-example');
+const ComponentDoc = require('../../component-doc');
+const ToggleStar = require('svg-icons/toggle/star');
+const ToggleStarBorder = require('svg-icons/toggle/star-border');
 
-let {
+const {
   Checkbox,
   ClearFix,
   RadioButton,
@@ -15,12 +15,13 @@ let {
   Tab,
   Tabs,
   Toggle,
+  Paper,
 } = mui;
-let { Typography } = Styles;
-let CheckboxCode = require('checkbox-code');
-let RadioButtonCode = require('radio-buttons-code');
-let ToggleCode = require('toggle-code');
-
+const { Typography } = Styles;
+const CheckboxCode = require('checkbox-code');
+const RadioButtonCode = require('radio-buttons-code');
+const ToggleCode = require('toggle-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class SwitchesPage extends React.Component {
 
@@ -55,7 +56,7 @@ export default class SwitchesPage extends React.Component {
         },
         {
           name: 'label',
-          type: 'string',
+          type: 'node',
           header: 'optional',
           desc: 'The text that is displayed beside the checkbox.',
         },
@@ -130,7 +131,7 @@ export default class SwitchesPage extends React.Component {
         },
         {
           name: 'label',
-          type: 'string',
+          type: 'node',
           header: 'optional',
           desc: 'The text that is displayed beside the radio button.',
         },
@@ -252,7 +253,7 @@ export default class SwitchesPage extends React.Component {
         },
         {
           name: 'label',
-          type: 'string',
+          type: 'node',
           header: 'optional',
           desc: 'The text that is displayed beside the toggle switch.',
         },
@@ -347,6 +348,19 @@ export default class SwitchesPage extends React.Component {
     return (
       <div>
       <h2 style={this.getStyles().headline}>Switches</h2>
+
+      <Paper style = {{marginBottom: '22px'}}>
+        <CodeBlock>
+        {
+          '//Import statements:\nconst Checkbox = require(\'material-ui/lib/checkbox\');\n' +
+          'const RadioButton = require(\'material-ui/lib/radio-button\');\n' +
+          'const RadioButtonGroup = require(\'material-ui/lib/radio-button-group\');\n' +
+          'const Toggle = require(\'material-ui/lib/toggle\');\n\n' +
+          '//See material-ui/lib/index.js for more\n'
+        }
+        </CodeBlock>
+      </Paper>
+
       <Tabs>
         <Tab label="Checkbox">
           <ComponentDoc
diff --git a/docs/src/app/components/pages/components/table.jsx b/docs/src/app/components/pages/components/table.jsx
index d3b94d2acc8c9b..fba22c2e264b51 100644
--- a/docs/src/app/components/pages/components/table.jsx
+++ b/docs/src/app/components/pages/components/table.jsx
@@ -1,8 +1,8 @@
-let React = require('react');
-let CodeExample = require('../../code-example/code-example');
-let Router = require('react-router');
-let ComponentDoc = require('../../component-doc');
-let {
+const React = require('react');
+const CodeExample = require('../../code-example/code-example');
+const Router = require('react-router');
+const ComponentDoc = require('../../component-doc');
+const {
   Table,
   TableBody,
   TableHeader,
@@ -12,10 +12,11 @@ let {
   TableRowColumn,
   TextField,
   Toggle,
+  Paper,
 } = require('material-ui');
 
-let Code = require('table-code');
-
+const Code = require('table-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class TablePage extends React.Component {
 
@@ -87,6 +88,12 @@ export default class TablePage extends React.Component {
             desc: 'If true, table rows can be selected. If multiple row selection is desired, enable multiSelectable. ' +
               'The default value is true.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table\'s root element.',
+          },
         ],
       },
       {
@@ -120,6 +127,12 @@ export default class TablePage extends React.Component {
             desc: 'If set to true the select all checkbox will be programmatically checked and will not trigger the select ' +
               'all event.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table header\'s root element.',
+          },
         ],
       },
       {
@@ -177,6 +190,12 @@ export default class TablePage extends React.Component {
             header: 'optional',
             desc: 'If true, every other table row starting with the first row will be striped. The default value is false.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table body\'s root element.',
+          },
         ],
       },
       {
@@ -190,6 +209,12 @@ export default class TablePage extends React.Component {
               'is true, this property will not influence the number of columns. This is mainly useful for "super header" ' +
               'rows so that the checkbox column does not create an offset that needs to be accounted for manually.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table footer\'s root element.',
+          },
         ],
       },
       {
@@ -232,6 +257,12 @@ export default class TablePage extends React.Component {
             header: 'default: false',
             desc: 'Indicates whether or not the row is striped.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table row\'s root element.',
+          },
         ],
       },
       {
@@ -255,6 +286,12 @@ export default class TablePage extends React.Component {
             header: 'optional',
             desc: 'Additional styling that can be applied to the tooltip.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table header column\'s root element.',
+          },
         ],
       },
       {
@@ -272,6 +309,12 @@ export default class TablePage extends React.Component {
             header: 'default: false',
             desc: 'If true, this column responds to hover events.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the table row column\'s root element.',
+          },
         ],
       },
       {
@@ -344,6 +387,22 @@ export default class TablePage extends React.Component {
         name="Table"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst Table = require(\'material-ui/lib/table/table\');\n' +
+            'const TableBody = require(\'material-ui/lib/table/table-body\');\n' +
+            'const TableFooter = require(\'material-ui/lib/table/table-footer\');\n' +
+            'const TableHeader = require(\'material-ui/lib/table/table-header\');\n' +
+            'const TableHeaderColumn = require(\'material-ui/lib/table/table-header-column\');\n' +
+            'const TableRow = require(\'material-ui/lib/table/table-row\');\n' +
+            'const TableRowColumn = require(\'material-ui/lib/table/table-row-column\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div className="table-examples">
             <Table
diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx
index e9127f7b24fc3d..8fd23066534a68 100644
--- a/docs/src/app/components/pages/components/tabs.jsx
+++ b/docs/src/app/components/pages/components/tabs.jsx
@@ -1,17 +1,21 @@
-let React = require('react');
-let CodeExample = require('../../code-example/code-example');
-let {IconButton, Slider, Styles, Tab, Tabs } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let { Colors, Typography } = Styles;
-let Code = require('tabs-code');
-
+const React = require('react');
+const CodeExample = require('../../code-example/code-example');
+const {IconButton, Slider, Styles, Tab, Tabs, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const { Colors, Typography } = Styles;
+const Code = require('tabs-code');
+const SwipeableViews = require('react-swipeable-views');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class TabsPage extends React.Component {
 
   constructor(props) {
     super(props);
     this._handleTabActive = this._handleTabActive.bind(this);
-    this.state = {tabsValue: 'a'};
+    this.state = {
+      tabsValue: 'a',
+      slideIndex: 0,
+    };
   }
 
   render(){
@@ -150,6 +154,9 @@ export default class TabsPage extends React.Component {
         position: 'relative',
         paddingLeft: padding,
       },
+      slide: {
+        padding: 10,
+      },
     };
 
     return (
@@ -157,6 +164,17 @@ export default class TabsPage extends React.Component {
         name="Tabs"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Tabs = require(\'material-ui/lib/tabs/tabs\');\n' +
+            'const Tab = require(\'material-ui/lib/tabs/tab\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Tabs>
             <Tab label="Item One" >
@@ -227,11 +245,41 @@ export default class TabsPage extends React.Component {
                 </Tab>
               </Tabs>
           </div>
+          <br />
+          <Tabs onChange={this._handleChangeTabs.bind(this)} value={this.state.slideIndex + ''}>
+            <Tab label="Tab One" value="0" />
+            <Tab label="Tab Two" value="1" />
+            <Tab label="Tab Three" value="2" />
+          </Tabs>
+          <SwipeableViews index={this.state.slideIndex} onChangeIndex={this._handleChangeIndex.bind(this)}>
+            <div>
+              <h2 style={styles.headline}>Tabs with slide effect</h2>
+              Swipe to see the next slide.<br />
+            </div>
+            <div style={styles.slide}>
+              slide n°2
+            </div>
+            <div style={styles.slide}>
+              slide n°3
+            </div>
+          </SwipeableViews>
         </CodeExample>
       </ComponentDoc>
     );
   }
 
+  _handleChangeIndex(index) {
+    this.setState({
+      slideIndex: index,
+    });
+  }
+
+  _handleChangeTabs(value) {
+    this.setState({
+      slideIndex: parseInt(value, 10),
+    });
+  }
+
   _handleButtonClick() {
     this.setState({tabsValue: 'c'});
   }
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
index 8924913fe46898..69a07a81a1ca0d 100644
--- a/docs/src/app/components/pages/components/text-fields.jsx
+++ b/docs/src/app/components/pages/components/text-fields.jsx
@@ -1,13 +1,14 @@
-let React = require('react');
-let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let { Colors } = Styles;
-let { StyleResizable } = Mixins;
-let Code = require('text-fields-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { ClearFix, Mixins, SelectField, TextField, Styles, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const { Colors } = Styles;
+const { StyleResizable } = Mixins;
+const Code = require('text-fields-code');
+const CodeExample = require('../../code-example/code-example');
 const LinkedStateMixin = require('react-addons-linked-state-mixin');
+const CodeBlock = require('../../code-example/code-block');
 
-let TextFieldsPage = React.createClass({
+const TextFieldsPage = React.createClass({
 
   mixins: [StyleResizable, LinkedStateMixin],
 
@@ -56,6 +57,12 @@ let TextFieldsPage = React.createClass({
       {
         name: 'Props',
         infoArray: [
+          {
+            name: 'defaultValue',
+            type: 'string',
+            header: 'optional',
+            desc: 'The text string to use for the default value.',
+          },
           {
             name: 'errorStyle',
             type: 'object',
@@ -68,6 +75,12 @@ let TextFieldsPage = React.createClass({
             header: 'optional',
             desc: 'The error text string to display.',
           },
+          {
+            name: 'floatingLabelStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'The style object to use to override floating label styles.',
+          },
           {
             name: 'floatingLabelText',
             type: 'string',
@@ -235,6 +248,17 @@ let TextFieldsPage = React.createClass({
         name="Text Field"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst TextField = require(\'material-ui/lib/text-field\');\n' +
+            'const SelectField = require(\'material-ui/lib/select-field\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <ClearFix>
             <div style={styles.group}>
@@ -242,7 +266,7 @@ let TextFieldsPage = React.createClass({
                 style={styles.textfield}
                 hintText="Hint Text" /><br/>
               <TextField
-                style={styles.textField}
+                style={styles.textfield}
                 hintText="Styled Hint Text"
                 hintStyle={{color: 'red'}} /><br/>
               <TextField
diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx
index c231ed1207353f..7226f793619b72 100644
--- a/docs/src/app/components/pages/components/time-picker.jsx
+++ b/docs/src/app/components/pages/components/time-picker.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let { TimePicker } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('time-picker-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { TimePicker, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('time-picker-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
-
-let TimePickerPage = React.createClass({
+const TimePickerPage = React.createClass({
 
   render() {
 
@@ -131,6 +131,16 @@ let TimePickerPage = React.createClass({
       <ComponentDoc
         name="Time Picker"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst TimePicker = require(\'material-ui/lib/time-picker\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <TimePicker
             ref="picker12hr"
diff --git a/docs/src/app/components/pages/components/toolbars.jsx b/docs/src/app/components/pages/components/toolbars.jsx
index 9a79c43ffe8549..62c0b66dc54a61 100644
--- a/docs/src/app/components/pages/components/toolbars.jsx
+++ b/docs/src/app/components/pages/components/toolbars.jsx
@@ -1,8 +1,8 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
 
-let {
+const {
   DropDownIcon,
   DropDownMenu,
   FontIcon,
@@ -11,10 +11,11 @@ let {
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarTitle,
+  Paper,
 } = mui;
-let Code = require('toolbars-code');
-let CodeExample = require('../../code-example/code-example');
-
+const Code = require('toolbars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class ToolbarPage extends React.Component {
 
@@ -43,6 +44,12 @@ export default class ToolbarPage extends React.Component {
             header: 'optional',
             desc: 'Optional pull "left" or "right"',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the toolbar group\'s root element.',
+          },
         ],
       },
       {
@@ -53,6 +60,12 @@ export default class ToolbarPage extends React.Component {
             desc: 'A vertical bar used to separate groups of components. It ' +
                   'is used to easily organize components.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the toolbar separator\'s root element.',
+          },
         ],
       },
       {
@@ -68,6 +81,12 @@ export default class ToolbarPage extends React.Component {
             header: 'optional',
             desc: 'The text to be displayed for the element.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the toolbar title\'s root element.',
+          },
         ],
       },
     ];
@@ -91,6 +110,19 @@ export default class ToolbarPage extends React.Component {
         name="Toolbars"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Toolbar = require(\'material-ui/lib/toolbar/toolbar\');\n' +
+            'const ToolbarGroup = require(\'material-ui/lib/toolbar/toolbar-group\');\n' +
+            'const ToolbarSeparator = require(\'material-ui/lib/toolbar/toolbar-separator\');\n' +
+            'const ToolbarTitle = require(\'material-ui/lib/toolbar/toolbar-title\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Toolbar>
             <ToolbarGroup key={0} float="left">
diff --git a/docs/src/app/components/raw-code/badge-code.txt b/docs/src/app/components/raw-code/badge-code.txt
new file mode 100644
index 00000000000000..b81afb780a8e95
--- /dev/null
+++ b/docs/src/app/components/raw-code/badge-code.txt
@@ -0,0 +1,19 @@
+<Badge badgeContent={4} primary={true}>
+  <NotificationsIcon />
+</Badge>
+
+//override badgeStyle to account for padding of child element
+<Badge badgeContent={10} secondary={true} badgeStyle={{top:12, right:12}}>
+  <IconButton tooltip="Go To Cart">
+    <ShoppingCartIcon/>
+  </IconButton>
+</Badge>
+
+<Badge backgroundColor="#d8d8d8"
+       badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}>
+  <FolderIcon />
+</Badge>
+
+<Badge badgeContent="&copy;" badgeStyle={{fontSize:20}}>
+  <h3>Company Name</h3>
+</Badge>
\ No newline at end of file
diff --git a/docs/src/app/components/raw-code/dialog-code.txt b/docs/src/app/components/raw-code/dialog-code.txt
index ee89651d477e41..37f58cb4d881b9 100644
--- a/docs/src/app/components/raw-code/dialog-code.txt
+++ b/docs/src/app/components/raw-code/dialog-code.txt
@@ -8,7 +8,8 @@ let standardActions = [
   title="Dialog With Standard Actions"
   actions={standardActions}
   actionFocus="submit"
-  modal={this.state.modal}>
+  open={this.state.showDialogStandardActions}
+  onRequestClose={this._handleRequestClose}>
   The actions in this window are created from the json that's passed in.
 </Dialog>
 
@@ -27,11 +28,19 @@ let customActions = [
 <Dialog
   title="Dialog With Custom Actions"
   actions={customActions}
-  modal={this.state.modal}>
+  open={this.state.showDialogCustomActions}
+  onRequestClose={this._handleRequestClose}>
   The actions in this window were passed in as an array of react objects.
 </Dialog>
 
-<Dialog title="Dialog With Scrollable Content" actions={customActions}
-  autoDetectWindowHeight={true} autoScrollBodyContent={true}>
-    <div style={{height: '2000px'}}>Really long content</div>
-</Dialog>
+<Dialog
+  title="Dialog With Scrollable Content"
+  actions={customActions}
+  autoDetectWindowHeight={true}
+  autoScrollBodyContent={true}
+  open={this.state.showDialogScrollable}
+  onRequestClose={this._handleRequestClose}>
+  <div style={{height: '1000px'}}>
+    Really long content
+  </div>
+</Dialog>
\ No newline at end of file
diff --git a/docs/src/app/components/raw-code/flat-button-code.txt b/docs/src/app/components/raw-code/flat-button-code.txt
index 4a22cf57b6502f..3bc6aa4d4b760c 100644
--- a/docs/src/app/components/raw-code/flat-button-code.txt
+++ b/docs/src/app/components/raw-code/flat-button-code.txt
@@ -1,15 +1,19 @@
-//Flat Buttons
 <FlatButton label="Default" />
+
 <FlatButton label="Primary" primary={true} />
+
 <FlatButton label="Secondary" secondary={true} />
-<div style={styles.container}>
-  <FlatButton primary={true} label="Choose an Image">
-    <input type="file" id="imageButton" style={styles.exampleImageInput}></input>
-  </FlatButton>
-</div>
-<div style={styles.container}>
-  <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
-    <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
-  </FlatButton>
-</div>
+
+<FlatButton primary={true} label="Choose an Image">
+  <input type="file" id="imageButton" style={styles.exampleImageInput} />
+</FlatButton>
+
+<FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
+  <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github" />
+</FlatButton>
+
+<FlatButton secondary={true} label="Label after" labelPosition="after">
+  <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github" />
+</FlatButton>
+
 <FlatButton label="Disabled" disabled={true} />
diff --git a/docs/src/app/components/raw-code/grid-list-code.txt b/docs/src/app/components/raw-code/grid-list-code.txt
new file mode 100644
index 00000000000000..0fa7b71d181d1f
--- /dev/null
+++ b/docs/src/app/components/raw-code/grid-list-code.txt
@@ -0,0 +1,32 @@
+{/* Basic grid list with mostly default options */}
+<GridList
+  cellHeight={200}
+  style={{width: 320, height: 640, overflowY: 'auto'}}
+  >
+  {
+    tilesData.map(tile => <GridTile
+      title={tile.title}
+      subtitle={<span>by <b>{tile.author}</b></span>}
+      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+      ><img src={tile.img} /></GridTile>)
+  }
+</GridList>
+{/* Grid list with all possible overrides */}
+<GridList
+  cols={2}
+  cellHeight={200}
+  padding={1}
+  style={{width: 320, height: 640, overflowY: 'auto'}}
+  >
+  {
+    tilesData.map(tile => <GridTile
+      title={tile.title}
+      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+      actionPosition="left"
+      titlePosition="top"
+      titleBackground={gradientBg}
+      cols={tile.featured ? 2 : 1}
+      rows={tile.featured ? 2 : 1}
+      ><img src={tile.img} /></GridTile>)
+  }
+</GridList>
diff --git a/docs/src/app/components/raw-code/raised-button-code.txt b/docs/src/app/components/raw-code/raised-button-code.txt
index aa2b5361fccd20..93eb6c4509650b 100644
--- a/docs/src/app/components/raw-code/raised-button-code.txt
+++ b/docs/src/app/components/raw-code/raised-button-code.txt
@@ -1,16 +1,19 @@
-//Raised Buttons
 <RaisedButton label="Default" />
+
 <RaisedButton label="Primary" primary={true} />
+
 <RaisedButton label="Secondary" secondary={true} />
-<div style={styles.container}>
-  <RaisedButton primary={true} label="Choose an Image">
-    <input type="file" style={styles.exampleImageInput}></input>
-  </RaisedButton>
-</div>
-<div style={styles.container}>
-  <RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
-    <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
-  </RaisedButton>
-</div>
-<RaisedButton label="Disabled" disabled={true} />
 
+<RaisedButton primary={true} label="Choose an Image">
+  <input type="file" style={styles.exampleImageInput} />
+</RaisedButton>
+
+<RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
+  <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github" />
+</RaisedButton>
+
+<RaisedButton secondary={true} label="Label after" labelPosition="after">
+  <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github" />
+</RaisedButton>
+
+<RaisedButton label="Disabled" disabled={true} />
diff --git a/docs/src/app/components/raw-code/tabs-code.txt b/docs/src/app/components/raw-code/tabs-code.txt
index 0a1ea791286b66..76543ed0ff5b1a 100644
--- a/docs/src/app/components/raw-code/tabs-code.txt
+++ b/docs/src/app/components/raw-code/tabs-code.txt
@@ -28,3 +28,22 @@
     (Tab content...)
   </Tab>
 </Tabs>
+
+// Tabs with slide effect
+<Tabs onChange={this._handleChangeTabs.bind(this)} value={this.state.slideIndex + ''}>
+  <Tab label="Tab One" value="0" />
+  <Tab label="Tab Two" value="1" />
+  <Tab label="Tab Three" value="2" />
+</Tabs>
+<SwipeableViews index={this.state.slideIndex} onChangeIndex={this._handleChangeIndex.bind(this)}>
+  <div>
+    <h2 style={styles.headline}>Tabs with slide effect</h2>
+    Swipe to see the next slide.<br />
+  </div>
+  <div style={styles.slide}>
+    slide n°2
+  </div>
+  <div style={styles.slide}>
+    slide n°3
+  </div>
+</SwipeableViews>
diff --git a/docs/src/app/components/raw-code/text-fields-code.txt b/docs/src/app/components/raw-code/text-fields-code.txt
index d934fa3d8c8e40..294f1a77e6a57f 100644
--- a/docs/src/app/components/raw-code/text-fields-code.txt
+++ b/docs/src/app/components/raw-code/text-fields-code.txt
@@ -2,7 +2,6 @@
 <TextField
   hintText="Hint Text" />
 <TextField
-  style={styles.textField}
   hintText="Styled Hint Text"
   hintStyle={{color: 'red'}} />
 <TextField
diff --git a/docs/webpack-production.config.js b/docs/webpack-production.config.js
index 27987231b2d7fe..e742dec2f3c6de 100644
--- a/docs/webpack-production.config.js
+++ b/docs/webpack-production.config.js
@@ -45,6 +45,11 @@ var config = {
         warnings: false
       }
     }),
+    new webpack.DefinePlugin({
+      "process.env": {
+        NODE_ENV: JSON.stringify("production")
+      }
+    }),
     new HtmlWebpackPlugin({
         inject: false,
         template: path.join(__dirname, '/src/www/index.html')
diff --git a/package.json b/package.json
index 49bc6507ab39a8..52fa937186bd5a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "material-ui",
   "author": "Call-em-all Engineering Team",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "Material Design UI components built with React",
   "main": "./lib",
   "scripts": {
@@ -9,8 +9,8 @@
     "test-watch": "npm run test-base -- --auto-watch",
     "test-base": "./node_modules/.bin/karma start",
     "prebuild": "rimraf lib",
-    "eslint": "gulp eslint",
-    "build": "npm run eslint && babel --stage 1 ./src --out-dir ./lib",
+    "lint": "gulp eslint",
+    "build": "babel ./src --out-dir ./lib",
     "prepublish": "npm run build"
   },
   "keywords": [
@@ -29,25 +29,32 @@
     "url": "https://github.com/callemall/material-ui/issues"
   },
   "homepage": "http://material-ui.com/",
-  "peerDependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
+  "dependencies": {
+    "inline-style-prefixer": "^0.3.3",
+    "lodash.throttle": "~3.0.4",
+    "lodash.debounce": "~3.1.1",
     "react-tap-event-plugin": "^0.2.0",
     "react-addons-transition-group": "^0.14.0",
     "react-addons-update": "^0.14.0",
     "react-addons-create-fragment": "^0.14.0",
-    "react-addons-pure-render-mixin": "^0.14.0"
+    "react-addons-pure-render-mixin": "^0.14.0",
+    "warning": "^2.1.0"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "devDependencies": {
     "babel": "^5.4.3",
     "babel-core": "^5.8.21",
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
+    "babel-plugin-dev-expression": "^0.1.0",
     "babel-runtime": "^5.8.25",
     "babelify": "^6.1.3",
     "browserify-istanbul": "^0.2.1",
     "chai": "^3.2.0",
-    "eslint": "^1.1.0",
+    "eslint": "^1.8.0",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^3.2.2",
     "fbjs": "^0.2.1",
@@ -65,14 +72,9 @@
     "mocha": "^2.2.5",
     "phantomjs": "^1.9.17",
     "react": "^0.14.0",
-    "react-addons-create-fragment": "^0.14.0",
-    "react-addons-pure-render-mixin": "^0.14.0",
-    "react-addons-transition-group": "^0.14.0",
-    "react-addons-update": "^0.14.0",
     "react-dom": "^0.14.0",
     "react-hot-loader": "^1.2.8",
     "react-router": "^1.0.0-rc1",
-    "react-tap-event-plugin": "^0.2.0",
     "recursive-readdir-sync": "^1.0.6",
     "rimraf": "^2.4.3",
     "sinon": "^1.15.4",
diff --git a/src/badge.jsx b/src/badge.jsx
new file mode 100644
index 00000000000000..935ddbb9934265
--- /dev/null
+++ b/src/badge.jsx
@@ -0,0 +1,106 @@
+const React = require('react');
+const Typography = require('./styles/typography');
+const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
+const ThemeManager = require('./styles/theme-manager');
+const StylePropable = require('./mixins/style-propable');
+
+// Badge
+export default React.createClass({
+  displayName: 'Badge',
+  mixins: [StylePropable],
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+  //for passing default theme context to children
+  childContextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+  getChildContext () {
+    return {
+      muiTheme: this.state.muiTheme,
+    };
+  },
+  propTypes: {
+    className: React.PropTypes.string,
+    badgeContent: React.PropTypes.node.isRequired,
+    primary: React.PropTypes.bool,
+    secondary: React.PropTypes.bool,
+    style: React.PropTypes.object,
+    badgeStyle: React.PropTypes.object,
+  },
+  getInitialState() {
+    return {
+      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
+    };
+  },
+  getDefaultProps() {
+    return {
+      className: '',
+      primary: false,
+      secondary: false,
+      style: {},
+      badgeStyle: {},
+    };
+  },
+  componentWillReceiveProps(nextProps, nextContext) {
+    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    this.setState({
+      muiTheme: newMuiTheme,
+    });
+  },
+  getStyles() {
+    const theme = this.state.muiTheme.badge;
+
+    const badgeBackgroundColor = this.props.primary
+      ? theme.primaryColor
+      : this.props.secondary
+        ? theme.secondaryColor
+        : theme.color;
+
+    const badgeTextColor = this.props.primary
+      ? theme.primaryTextColor
+      : this.props.secondary
+        ? theme.secondaryTextColor
+        : theme.textColor;
+
+    const radius = 12;
+    const radius2x = Math.floor(2*radius);
+
+    return {
+      root: {
+        position: 'relative',
+        display: 'inline-block',
+        padding: [radius2x+'px', radius2x+'px', radius+'px', radius+'px'].join(' '),
+      },
+      badge: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        fontWeight: Typography.fontWeightMedium,
+        fontSize: radius,
+        width: radius2x,
+        height: radius2x,
+        borderRadius: '50%',
+        backgroundColor: badgeBackgroundColor,
+        color: badgeTextColor,
+      },
+    };
+  },
+  render() {
+    const styles = this.getStyles();
+    return (
+      <div style={this.prepareStyles(styles.root, this.props.style)} className={this.props.className}>
+        {this.props.children}
+        <span style={this.prepareStyles(styles.badge, this.props.badgeStyle)}>
+          {this.props.badgeContent}
+        </span>
+      </div>
+    );
+  },
+});
diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx
index 02be4876104fba..1f5068286cb56e 100644
--- a/src/card/card-actions.jsx
+++ b/src/card/card-actions.jsx
@@ -48,6 +48,7 @@ const CardActions = React.createClass({
     expandable: React.PropTypes.bool,
     actAsExpander: React.PropTypes.bool,
     showExpandableButton: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   render() {
diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx
index 076757d3860336..b55f5fe7b9a2ba 100644
--- a/src/card/card-expandable.jsx
+++ b/src/card/card-expandable.jsx
@@ -40,6 +40,7 @@ const CardExpandable = React.createClass({
   propTypes: {
     onExpanding: React.PropTypes.func.isRequired,
     expanded: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx
index 3035976f3847b1..8db6a8eb691d4f 100644
--- a/src/card/card-header.jsx
+++ b/src/card/card-header.jsx
@@ -42,6 +42,7 @@ const CardHeader = React.createClass({
     title: React.PropTypes.node,
     titleColor: React.PropTypes.string,
     titleStyle: React.PropTypes.object,
+    style: React.PropTypes.object,
     subtitle: React.PropTypes.node,
     subtitleColor: React.PropTypes.string,
     subtitleStyle: React.PropTypes.object,
diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx
index b4347a5a4725dc..a41b0c54be232a 100644
--- a/src/card/card-title.jsx
+++ b/src/card/card-title.jsx
@@ -38,10 +38,11 @@ const CardTitle = React.createClass({
   },
 
   propTypes: {
-    title: React.PropTypes.string,
+    title: React.PropTypes.node,
     titleColor: React.PropTypes.string,
     titleStyle: React.PropTypes.object,
-    subtitle: React.PropTypes.string,
+    style: React.PropTypes.object,
+    subtitle: React.PropTypes.node,
     subtitleColor: React.PropTypes.string,
     subtitleStyle: React.PropTypes.object,
     expandable: React.PropTypes.bool,
diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx
index b7902350a04a37..db6b01b50be3b1 100644
--- a/src/circular-progress.jsx
+++ b/src/circular-progress.jsx
@@ -17,6 +17,7 @@ const CircularProgress = React.createClass({
       max:  React.PropTypes.number,
       size: React.PropTypes.number,
       color: React.PropTypes.string,
+      style: React.PropTypes.object,
       innerStyle: React.PropTypes.object,
   },
 
@@ -99,26 +100,24 @@ const CircularProgress = React.createClass({
     if (!this.isMounted()) return;
     if (this.props.mode !== "indeterminate") return;
 
-    AutoPrefix.set(wrapper.style, "transform", null);
-    AutoPrefix.set(wrapper.style, "transform", "rotate(0deg)");
-    wrapper.style.transitionDuration = "0ms";
+    AutoPrefix.set(wrapper.style, 'transform', 'rotate(0deg)');
+    AutoPrefix.set(wrapper.style, 'transitionDuration', '0ms');
 
     setTimeout(() => {
-      AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)");
-      wrapper.style.transitionDuration = "10s";
-      //wrapper.style.webkitTransitionTimingFunction = "linear";
-      AutoPrefix.set(wrapper.style, "transitionTimingFunction", "linear");
+      AutoPrefix.set(wrapper.style, 'transform', 'rotate(1800deg)');
+      AutoPrefix.set(wrapper.style, 'transitionDuration', '10s');
+      AutoPrefix.set(wrapper.style, 'transitionTimingFunction', 'linear');
     }, 50);
   },
 
   getDefaultProps() {
-      return {
-          mode: "indeterminate",
-          value: 0,
-          min: 0,
-          max: 100,
-          size: 1,
-      };
+    return {
+      mode: "indeterminate",
+      value: 0,
+      min: 0,
+      max: 100,
+      size: 1,
+    };
   },
 
   getTheme() {
diff --git a/src/clearfix.jsx b/src/clearfix.jsx
index d2dbc6816bd7ee..3103d587272704 100644
--- a/src/clearfix.jsx
+++ b/src/clearfix.jsx
@@ -12,6 +12,10 @@ const ClearFix = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
+  propTypes: {
+    style: React.PropTypes.object,
+  },
+  
   //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx
index 275450ba977599..17d903773e36bf 100644
--- a/src/date-picker/date-display.jsx
+++ b/src/date-picker/date-display.jsx
@@ -19,6 +19,7 @@ const DateDisplay = React.createClass({
     disableYearSelection: React.PropTypes.bool,
     monthDaySelected: React.PropTypes.bool,
     selectedDate: React.PropTypes.object.isRequired,
+    style: React.PropTypes.object,
     weekCount: React.PropTypes.number,
   },
 
diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx
index d18bb981130b3d..a5b6f8024c25d6 100644
--- a/src/date-picker/date-picker-dialog.jsx
+++ b/src/date-picker/date-picker-dialog.jsx
@@ -52,6 +52,7 @@ const DatePickerDialog = React.createClass({
     onClickAway: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
     onShow: React.PropTypes.func,
+    style: React.PropTypes.object,
     shouldDisableDate: React.PropTypes.func,
     showYearSelector: React.PropTypes.bool,
   },
@@ -168,7 +169,7 @@ const DatePickerDialog = React.createClass({
         onClickAway={this._handleDialogClickAway}
         repositionOnUpdate={false}
         open={this.state.open}
-      >
+        onRequestClose={this.dismiss}>
         <Calendar
           DateTimeFormat={DateTimeFormat}
           locale={locale}
@@ -186,17 +187,15 @@ const DatePickerDialog = React.createClass({
   },
 
   show() {
-    if (this.props.container === 'inline') {
-      return this.setState({'open': true});
-    }
-    this.refs.dialog.show();
+    this.setState({
+      open: true,
+    });
   },
 
   dismiss() {
-    if (this.props.container === 'inline') {
-      return this.setState({'open': false});
-    }
-    this.refs.dialog.dismiss();
+    this.setState({
+      open: false,
+    });
   },
 
   _onDayTouchTap() {
diff --git a/src/dialog.jsx b/src/dialog.jsx
index 77ee8650c49c27..1e5d3cb5f5a3be 100644
--- a/src/dialog.jsx
+++ b/src/dialog.jsx
@@ -10,6 +10,7 @@ const Overlay = require('./overlay');
 const Paper = require('./paper');
 const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
 const ThemeManager = require('./styles/theme-manager');
+const warning = require('warning');
 
 const ReactTransitionGroup = require('react-addons-transition-group');
 
@@ -109,13 +110,13 @@ let Dialog = React.createClass({
     bodyStyle: React.PropTypes.object,
     contentClassName: React.PropTypes.string,
     contentStyle: React.PropTypes.object,
-    modal: React.PropTypes.bool,
     openImmediately: React.PropTypes.bool,
     onClickAway: React.PropTypes.func,
-    onDismiss: React.PropTypes.func,
-    onShow: React.PropTypes.func,
     repositionOnUpdate: React.PropTypes.bool,
+    style: React.PropTypes.object,
     title: React.PropTypes.node,
+    defaultOpen: React.PropTypes.bool,
+    open: React.PropTypes.bool,
   },
 
   windowListeners: {
@@ -128,14 +129,25 @@ let Dialog = React.createClass({
       autoDetectWindowHeight: false,
       autoScrollBodyContent: false,
       actions: [],
-      modal: false,
       repositionOnUpdate: true,
+      defaultOpen: false,
+      open: null,
     };
   },
 
   getInitialState() {
+    if (process.env.NODE_ENV !== 'production') {
+      this._testDeprecations();
+    }
+
+    let open = this.props.open;
+
+    if (open === null) {
+      open = (this.props.openImmediately || this.props.defaultOpen);
+    }
+
     return {
-      open: this.props.openImmediately || false,
+      open: open,
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
   },
@@ -143,15 +155,26 @@ let Dialog = React.createClass({
   //to update theme inside state whenever a new theme is passed down
   //from the parent / owner using context
   componentWillReceiveProps (nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
+
+    if (process.env.NODE_ENV !== 'production') {
+      this._testDeprecations();
+    }
+
+    if (nextProps.open !== this.props.open) {
+      if (nextProps.open && !this.state.open) {
+        this._show();
+      } else if (!nextProps.open && this.state.open) {
+        this._dismiss();
+      }
+    }
   },
 
   componentDidMount() {
     this._positionDialog();
-    if (this.props.openImmediately) {
+    if (this.state.open) {
       this.refs.dialogOverlay.preventScrolling();
-      this._onShow();
     }
   },
 
@@ -243,11 +266,9 @@ let Dialog = React.createClass({
                 style={styles.paper}
                 zDepth={4}>
                 {title}
-
                 <div ref="dialogContent" style={this.prepareStyles(styles.body)}>
                   {this.props.children}
                 </div>
-
                 {actions}
             </Paper>
           </TransitionItem>}
@@ -265,22 +286,21 @@ let Dialog = React.createClass({
     return this.state.open;
   },
 
-  dismiss() {
-    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this), () => {
-      this.refs.dialogOverlay.allowScrolling();
-    });
+  _testDeprecations() {
+    warning(!this.props.hasOwnProperty('openImmediately'),
+      'openImmediately has been deprecated in favor of defaultOpen');
 
-    this.setState({ open: false });
-    this._onDismiss();
-  },
+    warning(!this.props.hasOwnProperty('onShow'),
+      'onShow will be removed in favor of explicitly setting open');
 
-  show() {
-    this.refs.dialogOverlay.preventScrolling();
-    this.setState({ open: true }, this._onShow);
+    warning(!this.props.hasOwnProperty('onDismiss'),
+      'onDismiss will be removed in favor of explicitly setting open and can be replaced by onRequestClose');
+
+    warning(!this.props.hasOwnProperty('modal'),
+      'modal will be removed in favor of explicitly setting open and onRequestClose');
   },
 
   _getAction(actionJSON, key) {
-    let styles = {marginRight: 8};
     let props = {
       key: key,
       secondary: true,
@@ -290,12 +310,15 @@ let Dialog = React.createClass({
           actionJSON.onTouchTap.call(undefined);
         }
         if (!(actionJSON.onClick || actionJSON.onTouchTap)) {
-          this.dismiss();
+          this._requestClose(true);
         }
       },
       label: actionJSON.text,
-      style: styles,
+      style: {
+        marginRight: 8,
+      },
     };
+
     if (actionJSON.ref) {
       props.ref = actionJSON.ref;
       props.keyboardFocused = actionJSON.ref === this.props.actionFocus;
@@ -305,15 +328,14 @@ let Dialog = React.createClass({
     }
 
     return (
-      <FlatButton
-        {...props} />
+      <FlatButton {...props} />
     );
   },
 
   _getActionsContainer(actions) {
     let actionContainer;
     let actionObjects = [];
-    let actionStyle = {
+    const actionStyle = {
       boxSizing: 'border-box',
       WebkitTapHighlightColor: 'rgba(0,0,0,0)',
       padding: 8,
@@ -379,27 +401,71 @@ let Dialog = React.createClass({
     }
   },
 
+  show() {
+    warning(false, 'show has been deprecated in favor of explicitly setting the open property.');
+
+    this._show();
+  },
+
   _onShow() {
-    if (this.props.onShow) this.props.onShow();
+    if (this.props.onShow) {
+      this.props.onShow();
+    }
+  },
+
+  _show() {
+    this.refs.dialogOverlay.preventScrolling();
+    this.setState({
+      open: true,
+    }, this._onShow);
+  },
+
+  dismiss() {
+    warning(false, 'dismiss has been deprecated in favor of explicitly setting the open property.');
+
+    this._dismiss();
   },
 
   _onDismiss() {
-    if (this.props.onDismiss) this.props.onDismiss();
+    if (this.props.onDismiss) {
+      this.props.onDismiss();
+    }
   },
 
-  _handleOverlayTouchTap(e) {
-    if (this.props.modal) {
-      e.stopPropagation();
+  _dismiss() {
+    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this), () => {
+      this.refs.dialogOverlay.allowScrolling();
+    });
+
+    this.setState({
+      open: false,
+    }, this._onDismiss);
+  },
+
+  _requestClose(buttonClicked) {
+    warning(!this.props.hasOwnProperty('modal'),
+      'modal will be removed in favor of explicitly setting open and onRequestClose');
+
+    if (!buttonClicked && this.props.modal) {
+      return;
+    }
+
+    // Close the dialog if the open state is not explicitly set.
+    if (this.props.open === null) {
+      this._dismiss();
     }
-    else {
-      this.dismiss();
-      if (this.props.onClickAway) this.props.onClickAway();
+    if (this.props.onRequestClose) {
+      this.props.onRequestClose(!!buttonClicked);
     }
   },
 
-  _handleWindowKeyUp(e) {
-    if (e.keyCode === KeyCode.ESC && !this.props.modal) {
-      this.dismiss();
+  _handleOverlayTouchTap() {
+    this._requestClose(false);
+  },
+
+  _handleWindowKeyUp(event) {
+    if (event.keyCode === KeyCode.ESC) {
+      this._requestClose(false);
     }
   },
 
diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx
index a420c9542e6e27..7434342771c367 100644
--- a/src/drop-down-icon.jsx
+++ b/src/drop-down-icon.jsx
@@ -34,6 +34,7 @@ const DropDownIcon = React.createClass({
     iconStyle: React.PropTypes.object,
     iconClassName: React.PropTypes.string,
     iconLigature: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   getInitialState() {
diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx
index 610b02a2fe2d94..0f0e8426b4977d 100644
--- a/src/drop-down-menu.jsx
+++ b/src/drop-down-menu.jsx
@@ -47,6 +47,7 @@ const DropDownMenu = React.createClass({
     labelStyle:React.PropTypes.object,
     selectedIndex: React.PropTypes.number,
     openImmediately: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx
index 72da4cf8be1d87..23d4115a6f1b0a 100644
--- a/src/enhanced-button.jsx
+++ b/src/enhanced-button.jsx
@@ -82,6 +82,7 @@ const EnhancedButton = React.createClass({
     onKeyUp: React.PropTypes.func,
     onTouchTap: React.PropTypes.func,
     tabIndex: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx
index 4e9ae5f05d0a4a..d32fe02486cae2 100644
--- a/src/enhanced-switch.jsx
+++ b/src/enhanced-switch.jsx
@@ -45,7 +45,7 @@ const EnhancedSwitch = React.createClass({
       labelStyle: React.PropTypes.object,
       name: React.PropTypes.string,
       value: React.PropTypes.string,
-      label: React.PropTypes.string,
+      label: React.PropTypes.node,
       onSwitch: React.PropTypes.func,
       required: React.PropTypes.bool,
       disabled: React.PropTypes.bool,
@@ -53,6 +53,7 @@ const EnhancedSwitch = React.createClass({
       labelPosition: React.PropTypes.oneOf(['left', 'right']),
       disableFocusRipple: React.PropTypes.bool,
       disableTouchRipple: React.PropTypes.bool,
+      style: React.PropTypes.object,
     },
 
   windowListeners: {
diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx
index 90e60a430fec9f..9900d00f36e06e 100644
--- a/src/enhanced-textarea.jsx
+++ b/src/enhanced-textarea.jsx
@@ -19,10 +19,11 @@ const styles = {
     // Overflow also needed to here to remove the extra row
     // added to textareas in Firefox.
     overflow: 'hidden',
+    // Visibility needed to hide the extra text area on ipads
+    visibility: 'hidden',
     font: 'inherit',
     padding: 0,
     position: 'absolute',
-    opacity: 0,
   },
 };
 
@@ -51,6 +52,7 @@ const EnhancedTextarea = React.createClass({
     textareaStyle: React.PropTypes.object,
     rows: React.PropTypes.number,
     rowsMax: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/flat-button.jsx b/src/flat-button.jsx
index 57391c922e5555..754928efd37cb3 100644
--- a/src/flat-button.jsx
+++ b/src/flat-button.jsx
@@ -67,7 +67,10 @@ const FlatButton = React.createClass({
     disabled: React.PropTypes.bool,
     hoverColor: React.PropTypes.string,
     label: validateLabel,
-    labelPosition: React.PropTypes.oneOf(['before', 'after']),
+    labelPosition: React.PropTypes.oneOf([
+      'before',
+      'after',
+    ]),
     labelStyle: React.PropTypes.object,
     onKeyboardFocus: React.PropTypes.func,
     onMouseEnter: React.PropTypes.func,
@@ -76,12 +79,13 @@ const FlatButton = React.createClass({
     primary: React.PropTypes.bool,
     rippleColor: React.PropTypes.string,
     secondary: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
     return {
       labelStyle: {},
-      labelPosition: 'before',
+      labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes)
       onKeyboardFocus: () => {},
       onMouseEnter: () => {},
       onMouseLeave: () => {},
@@ -123,7 +127,7 @@ const FlatButton = React.createClass({
       secondary,
       style,
       ...other,
-      } = this.props;
+    } = this.props;
 
     const {
       buttonColor,
@@ -172,11 +176,14 @@ const FlatButton = React.createClass({
     const labelElement = label ? (
       <FlatButtonLabel label={label} style={labelStyle} />
     ) : undefined;
+
     // Place label before or after children.
-    const childrenFragment = labelPosition === 'before' ? { labelElement, children } : { children, labelElement };
+    const childrenFragment = labelPosition === 'before' ?
+      { labelElement, children }
+      :
+      { children, labelElement };
     const enhancedButtonChildren = Children.create(childrenFragment);
 
-
     return (
       <EnhancedButton
         {...other}
diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx
index 6f6b4294c13b32..2356207ed68528 100644
--- a/src/floating-action-button.jsx
+++ b/src/floating-action-button.jsx
@@ -51,6 +51,7 @@ const FloatingActionButton = React.createClass({
     onTouchEnd: React.PropTypes.func,
     onTouchStart: React.PropTypes.func,
     secondary: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getInitialState() {
diff --git a/src/font-icon.jsx b/src/font-icon.jsx
index b7f0af6f0bef2f..f7a8dad0fa7a1c 100644
--- a/src/font-icon.jsx
+++ b/src/font-icon.jsx
@@ -28,6 +28,7 @@ const FontIcon = React.createClass({
     hoverColor: React.PropTypes.string,
     onMouseLeave: React.PropTypes.func,
     onMouseEnter: React.PropTypes.func,
+    style: React.PropTypes.object,
   },
 
   getInitialState() {
diff --git a/src/grid-list/grid-list.jsx b/src/grid-list/grid-list.jsx
index dbbc28bd5c0130..d18e94cc4325e7 100644
--- a/src/grid-list/grid-list.jsx
+++ b/src/grid-list/grid-list.jsx
@@ -15,6 +15,7 @@ const GridList = React.createClass({
     cols: React.PropTypes.number,
     padding: React.PropTypes.number,
     cellHeight: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/grid-list/grid-tile.jsx b/src/grid-list/grid-tile.jsx
index 4f59fdbebca6a3..aba6ab8d9ed3a9 100644
--- a/src/grid-list/grid-tile.jsx
+++ b/src/grid-list/grid-tile.jsx
@@ -13,7 +13,7 @@ const GridTile = React.createClass({
   },
 
   propTypes: {
-    title: React.PropTypes.string,
+    title: React.PropTypes.node,
     subtitle: React.PropTypes.node,
     titlePosition: React.PropTypes.oneOf(['top', 'bottom']),
     titleBackground: React.PropTypes.string,
@@ -21,6 +21,7 @@ const GridTile = React.createClass({
     actionPosition: React.PropTypes.oneOf(['left', 'right']),
     cols: React.PropTypes.number,
     rows: React.PropTypes.number,
+    style: React.PropTypes.object,
     rootClass: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.object,
diff --git a/src/icon-button.jsx b/src/icon-button.jsx
index 0b1ab5120231ed..cc88629aff4132 100644
--- a/src/icon-button.jsx
+++ b/src/icon-button.jsx
@@ -65,6 +65,7 @@ const IconButton = React.createClass({
     tooltipStyles: React.PropTypes.object,
     tooltipPosition: PropTypes.cornersAndCenter,
     touch: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getInitialState() {
diff --git a/src/index.js b/src/index.js
index 31edeb6eae7fdb..8eac4857d27557 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ module.exports = {
   AppBar: require('./app-bar'),
   AppCanvas: require('./app-canvas'),
   Avatar: require('./avatar'),
+  Badge: require('./badge'),
   BeforeAfterWrapper: require('./before-after-wrapper'),
   Card: require('./card/card'),
   CardActions: require('./card/card-actions'),
diff --git a/src/ink-bar.jsx b/src/ink-bar.jsx
index 631be92d65bee8..5854512b922615 100644
--- a/src/ink-bar.jsx
+++ b/src/ink-bar.jsx
@@ -25,6 +25,7 @@ const InkBar = React.createClass({
     color: React.PropTypes.string,
     left: React.PropTypes.string.isRequired,
     width: React.PropTypes.string.isRequired,
+    style: React.PropTypes.object,
   },
 
   getInitialState () {
diff --git a/src/left-nav.jsx b/src/left-nav.jsx
index 4178fc29841c2c..90317cca214fa5 100644
--- a/src/left-nav.jsx
+++ b/src/left-nav.jsx
@@ -51,6 +51,7 @@ const LeftNav = React.createClass({
     menuItemClassName: React.PropTypes.string,
     menuItemClassNameSubheader: React.PropTypes.string,
     menuItemClassNameLink: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   windowListeners: {
@@ -82,7 +83,10 @@ const LeftNav = React.createClass({
   //from the parent / owner using context
   componentWillReceiveProps (nextProps, nextContext) {
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
+    this.setState({
+      muiTheme: newMuiTheme,
+      open: (this.props.docked !== nextProps.docked) ? nextProps.docked : this.state.open,
+    });
   },
 
   componentDidMount() {
@@ -223,10 +227,12 @@ const LeftNav = React.createClass({
 
   _updateMenuHeight() {
     if (this.props.header) {
-      let container = ReactDOM.findDOMNode(this.refs.clickAwayableElement);
-      let menu = ReactDOM.findDOMNode(this.refs.menuItems);
-      let menuHeight = container.clientHeight - menu.offsetTop;
-      menu.style.height = menuHeight + 'px';
+      const menu = ReactDOM.findDOMNode(this.refs.menuItems);
+      if (menu){
+        const container = ReactDOM.findDOMNode(this.refs.clickAwayableElement);
+        const menuHeight = container.clientHeight - menu.offsetTop;
+        menu.style.height = menuHeight + 'px';
+      }
     }
   },
 
@@ -301,9 +307,9 @@ const LeftNav = React.createClass({
 
   _setPosition(translateX) {
     let leftNav = ReactDOM.findDOMNode(this.refs.clickAwayableElement);
-    leftNav.style[AutoPrefix.single('transform')] =
-      'translate3d(' + (this._getTranslateMultiplier() * translateX) + 'px, 0, 0)';
+    let transformCSS = 'translate3d(' + (this._getTranslateMultiplier() * translateX) + 'px, 0, 0)';
     this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX());
+    AutoPrefix.set(leftNav.style, 'transform', transformCSS);
   },
 
   _getTranslateX(currentX) {
diff --git a/src/linear-progress.jsx b/src/linear-progress.jsx
index d538851219dfbc..8d146e22695ce0 100644
--- a/src/linear-progress.jsx
+++ b/src/linear-progress.jsx
@@ -14,6 +14,7 @@ const LinearProgress = React.createClass({
     value: React.PropTypes.number,
     min:  React.PropTypes.number,
     max:  React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   contextTypes: {
diff --git a/src/lists/list-divider.jsx b/src/lists/list-divider.jsx
index 7fe281c39f19ad..3cd43421c77293 100644
--- a/src/lists/list-divider.jsx
+++ b/src/lists/list-divider.jsx
@@ -13,6 +13,7 @@ const ListDivider = React.createClass({
 
   propTypes: {
     inset: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx
index 589d9bc29072f3..862fdbd7e4f237 100644
--- a/src/lists/list-item.jsx
+++ b/src/lists/list-item.jsx
@@ -46,6 +46,7 @@ const ListItem = React.createClass({
     rightIconButton: React.PropTypes.element,
     rightToggle: React.PropTypes.element,
     primaryText: React.PropTypes.node,
+    style: React.PropTypes.object,
     secondaryText: React.PropTypes.node,
     secondaryTextLines: React.PropTypes.oneOf([1, 2]),
   },
diff --git a/src/lists/list.jsx b/src/lists/list.jsx
index a6c7aa41088384..d7928b6b28c813 100644
--- a/src/lists/list.jsx
+++ b/src/lists/list.jsx
@@ -17,7 +17,8 @@ const List = React.createClass({
 
   propTypes: {
     insetSubheader: React.PropTypes.bool,
-    subheader: React.PropTypes.string,
+    style: React.PropTypes.object,
+    subheader: React.PropTypes.node,
     subheaderStyle: React.PropTypes.object,
     zDepth: PropTypes.zDepth,
   },
diff --git a/src/lists/nested-list.jsx b/src/lists/nested-list.jsx
index 74a6afb0af2919..2f3daf8a040a71 100644
--- a/src/lists/nested-list.jsx
+++ b/src/lists/nested-list.jsx
@@ -8,6 +8,7 @@ const NestedList = React.createClass({
   propTypes: {
     nestedLevel: React.PropTypes.number,
     open: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/menu/link-menu-item.jsx b/src/menu/link-menu-item.jsx
index 2a30c7ce086916..d21615b66e50f7 100644
--- a/src/menu/link-menu-item.jsx
+++ b/src/menu/link-menu-item.jsx
@@ -19,6 +19,7 @@ const LinkMenuItem = React.createClass({
     active: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
     className: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx
index 9b678f76db1426..9431b067bd913f 100644
--- a/src/menu/menu-item.jsx
+++ b/src/menu/menu-item.jsx
@@ -35,6 +35,7 @@ const MenuItem = React.createClass({
     onTouchTap: React.PropTypes.func,
     onToggle: React.PropTypes.func,
     selected: React.PropTypes.bool,
+    style: React.PropTypes.object,
     active: React.PropTypes.bool,
   },
 
diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx
index 9c27d8f42c925d..02ec883102719f 100644
--- a/src/menu/menu.jsx
+++ b/src/menu/menu.jsx
@@ -33,6 +33,7 @@ const NestedMenuItem = React.createClass({
     active: React.PropTypes.bool,
     onItemTap: React.PropTypes.func,
     menuItemStyle: React.PropTypes.object,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
@@ -222,6 +223,7 @@ const Menu = React.createClass({
     onRequestClose: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
     selectedIndex: React.PropTypes.number,
+    style: React.PropTypes.object,
     hideable: React.PropTypes.bool,
     visible: React.PropTypes.bool,
     zDepth: React.PropTypes.number,
diff --git a/src/menu/subheader-menu-item.jsx b/src/menu/subheader-menu-item.jsx
index 487599a952f6ed..d21c778cdfe99f 100644
--- a/src/menu/subheader-menu-item.jsx
+++ b/src/menu/subheader-menu-item.jsx
@@ -17,6 +17,7 @@ const SubheaderMenuItem = React.createClass({
       text: React.PropTypes.string.isRequired,
       firstChild: React.PropTypes.bool,
       className: React.PropTypes.string,
+      style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx
index f1a0fdcdc6fca7..1955b2035ac369 100644
--- a/src/menus/icon-menu.jsx
+++ b/src/menus/icon-menu.jsx
@@ -30,6 +30,7 @@ const IconMenu = React.createClass({
     onMouseUp: React.PropTypes.func,
     onTouchTap: React.PropTypes.func,
     menuStyle: React.PropTypes.object,
+    style: React.PropTypes.object,
     touchTapCloseDelay: React.PropTypes.number,
   },
 
diff --git a/src/menus/menu-divider.jsx b/src/menus/menu-divider.jsx
index d1e6dbaa41bacb..091c28dc9fdcfe 100644
--- a/src/menus/menu-divider.jsx
+++ b/src/menus/menu-divider.jsx
@@ -12,6 +12,10 @@ const MenuDivider = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
+  propTypes: {
+    style: React.PropTypes.object,
+  },
+
   //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
diff --git a/src/menus/menu-item.jsx b/src/menus/menu-item.jsx
index c505c734621d74..5c0a0c1060f5b1 100644
--- a/src/menus/menu-item.jsx
+++ b/src/menus/menu-item.jsx
@@ -29,6 +29,7 @@ const MenuItem = React.createClass({
     leftIcon: React.PropTypes.element,
     rightIcon: React.PropTypes.element,
     secondaryText: React.PropTypes.node,
+    style: React.PropTypes.object,
     value: React.PropTypes.string,
   },
 
diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx
index bc5fd33d61a6f3..320603e5592bd2 100644
--- a/src/menus/menu.jsx
+++ b/src/menus/menu.jsx
@@ -32,6 +32,7 @@ const Menu = React.createClass({
     onItemTouchTap: React.PropTypes.func,
     onKeyDown: React.PropTypes.func,
     openDirection: PropTypes.corners,
+    style: React.PropTypes.object,
     selectedMenuItemStyle: React.PropTypes.object,
     width: PropTypes.stringOrNumber,
     zDepth: PropTypes.zDepth,
@@ -88,11 +89,10 @@ const Menu = React.createClass({
 
   componentWillLeave(callback) {
     let rootStyle = ReactDOM.findDOMNode(this).style;
-
-    AutoPrefix.set(rootStyle, 'transition', Transitions.easeOut('250ms', ['opacity', 'transform']));
-    AutoPrefix.set(rootStyle, 'transform', 'translate3d(0,-8px,0)');
+    rootStyle.transition = Transitions.easeOut('250ms', ['opacity', 'transform']);
+    rootStyle.transform = 'translate3d(0,-8px,0)';
     rootStyle.opacity = 0;
-
+    rootStyle = AutoPrefix.all(rootStyle);
     setTimeout(() => {
       if (this.isMounted()) callback();
     }, 250);
diff --git a/src/overlay.jsx b/src/overlay.jsx
index 92df3e69a9a48a..5e8b5e53fd7154 100644
--- a/src/overlay.jsx
+++ b/src/overlay.jsx
@@ -45,6 +45,7 @@ const Overlay = React.createClass({
     autoLockScrolling: React.PropTypes.bool,
     show: React.PropTypes.bool,
     transitionEnabled: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
@@ -54,7 +55,7 @@ const Overlay = React.createClass({
     };
   },
 
-  componentWillMount() {
+  componentDidMount() {
     this._originalBodyOverflow = document.getElementsByTagName('body')[0].style.overflow;
   },
 
diff --git a/src/paper.jsx b/src/paper.jsx
index 2c361bfafbf766..0d565f81bd900e 100644
--- a/src/paper.jsx
+++ b/src/paper.jsx
@@ -43,6 +43,7 @@ const Paper = React.createClass({
     rounded: React.PropTypes.bool,
     transitionEnabled: React.PropTypes.bool,
     zDepth: PropTypes.zDepth,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/radio-button-group.jsx b/src/radio-button-group.jsx
index 9dd174744c126b..f2ce99ac5ec20e 100644
--- a/src/radio-button-group.jsx
+++ b/src/radio-button-group.jsx
@@ -29,6 +29,7 @@ const RadioButtonGroup = React.createClass({
     defaultSelected: React.PropTypes.string,
     labelPosition: React.PropTypes.oneOf(['left', 'right']),
     onChange: React.PropTypes.func,
+    style: React.PropTypes.object,
   },
 
   _hasCheckAttribute(radioButton) {
diff --git a/src/raised-button.jsx b/src/raised-button.jsx
index a4bfa6f14ba273..eac352f1605d29 100644
--- a/src/raised-button.jsx
+++ b/src/raised-button.jsx
@@ -3,6 +3,7 @@ const ReactDOM = require('react-dom');
 const StylePropable = require('./mixins/style-propable');
 const Transitions = require('./styles/transitions');
 const ColorManipulator = require('./utils/color-manipulator');
+const Children = require('./utils/children');
 const Typography = require('./styles/typography');
 const EnhancedButton = require('./enhanced-button');
 const Paper = require('./paper');
@@ -40,6 +41,10 @@ const RaisedButton = React.createClass({
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: validateLabel,
+    labelPosition: React.PropTypes.oneOf([
+      'before',
+      'after',
+    ]),
     onMouseDown: React.PropTypes.func,
     onMouseUp: React.PropTypes.func,
     onMouseLeave: React.PropTypes.func,
@@ -53,6 +58,13 @@ const RaisedButton = React.createClass({
     disabledBackgroundColor: React.PropTypes.string,
     disabledLabelColor: React.PropTypes.string,
     fullWidth: React.PropTypes.bool,
+    style: React.PropTypes.object,
+  },
+
+  getDefaultProps: function() {
+    return {
+      labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes)
+    };
   },
 
   getInitialState() {
@@ -160,18 +172,22 @@ const RaisedButton = React.createClass({
 
   render() {
     let {
+      children,
       disabled,
       label,
+      labelPosition,
+      labelStyle,
       primary,
       secondary,
-      ...other } = this.props;
+      ...other,
+    } = this.props;
 
     let styles = this.getStyles();
 
     let labelElement;
     if (label) {
       labelElement = (
-        <span style={this.prepareStyles(styles.label, this.props.labelStyle)}>
+        <span style={this.prepareStyles(styles.label, labelStyle)}>
           {label}
         </span>
       );
@@ -190,6 +206,13 @@ const RaisedButton = React.createClass({
       onKeyboardFocus: this._handleKeyboardFocus,
     };
 
+    // Place label before or after children.
+    const childrenFragment = labelPosition === 'before' ?
+      { labelElement, children }
+      :
+      { children, labelElement };
+    const enhancedButtonChildren = Children.create(childrenFragment);
+
     return (
       <Paper
         style={this.mergeStyles(styles.root, this.props.style)}
@@ -208,8 +231,7 @@ const RaisedButton = React.createClass({
                   styles.overlay,
                   (this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
                 )}>
-                  {labelElement}
-                  {this.props.children}
+                  {enhancedButtonChildren}
               </div>
           </EnhancedButton>
       </Paper>
diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx
index c7d3ea0f9b3f0b..1ec4f8c3c5ddd5 100644
--- a/src/refresh-indicator.jsx
+++ b/src/refresh-indicator.jsx
@@ -250,19 +250,24 @@ const RefreshIndicator = React.createClass({
     const perimeter = Math.PI * 2 * circle.radiu;
     const arcLen = perimeter * 0.64;
 
+    let strokeDasharray, strokeDashoffset, transitionDuration;
     if (currStep === 0) {
-      path.style.strokeDasharray = '1, 200';
-      path.style.strokeDashoffset = 0;
-      path.style[this.prefixed('transitionDuration')] = '0ms';
+      strokeDasharray = '1, 200';
+      strokeDashoffset = 0;
+      transitionDuration = '0ms';
     } else if (currStep === 1) {
-      path.style.strokeDasharray = arcLen + ', 200';
-      path.style.strokeDashoffset = -15;
-      path.style[this.prefixed('transitionDuration')] = '750ms';
+      strokeDasharray = arcLen + ', 200';
+      strokeDashoffset = -15;
+      transitionDuration = '750ms';
     } else {
-      path.style.strokeDasharray = arcLen + ',200';
-      path.style.strokeDashoffset = -(perimeter - 1);
-      path.style[this.prefixed('transitionDuration')] = '850ms';
+      strokeDasharray = arcLen + ',200';
+      strokeDashoffset = -(perimeter - 1);
+      transitionDuration = '850ms';
     }
+
+    AutoPrefix.set(path.style, "strokeDasharray", strokeDasharray);
+    AutoPrefix.set(path.style, "strokeDashoffset", strokeDashoffset);
+    AutoPrefix.set(path.style, "transitionDuration", transitionDuration);
   },
 
   _rotateWrapper(wrapper) {
@@ -278,7 +283,7 @@ const RefreshIndicator = React.createClass({
     setTimeout(() => {
       if (this.isMounted()) {
         AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)");
-        wrapper.style.transitionDuration = "10s";
+        AutoPrefix.set(wrapper.style, "transitionDuration", "10s");
         AutoPrefix.set(wrapper.style, "transitionTimingFunction", "linear");
       }
     }, 50);
diff --git a/src/render-to-layer.js b/src/render-to-layer.js
new file mode 100644
index 00000000000000..7771e4b7eed095
--- /dev/null
+++ b/src/render-to-layer.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Events from './utils/events';
+import Dom from './utils/dom';
+import debounce from 'lodash.debounce';
+
+// heavily inspired by https://github.com/Khan/react-components/blob/master/js/layered-component-mixin.jsx
+const RenderToLayer = React.createClass({
+
+  componentDidMount() {
+    this._renderLayer();
+  },
+
+  componentDidUpdate() {
+    this._renderLayer();
+  },
+
+  componentWillUnmount() {
+    this._unbindClickAway();
+    if (this._layer) {
+      this._unrenderLayer();
+    }
+  },
+
+  _checkClickAway(e) {
+    if (!this.canClickAway) {
+      return;
+    }
+    const el = this._layer;
+    if (e.target !== el &&
+        !Dom.isDescendant(el, e.target) &&
+        document.documentElement.contains(e.target)) {
+      if (this.props.componentClickAway) {
+        this.props.componentClickAway(e);
+      }
+    }
+  },
+
+  _preventClickAway(e) {
+    if (e.detail === this) {
+      return;
+    }
+    this.canClickAway = false;
+  },
+
+  _allowClickAway() {
+    this.canClickAway = true;
+  },
+
+  getLayer() {
+    return this._layer;
+  },
+
+  render() {
+    return null;
+  },
+
+  _renderLayer() {
+    if (this.props.open) {
+      if (!this._layer) {
+        this._layer = document.createElement('div');
+        document.body.appendChild(this._layer);
+      }
+      this._bindClickAway();
+      if (this.reactUnmount) {
+        this.reactUnmount.cancel();
+      }
+    } else if (this._layer) {
+      this._unbindClickAway();
+      this._unrenderLayer();
+    } else {
+      return;
+    }
+
+    // By calling this method in componentDidMount() and
+    // componentDidUpdate(), you're effectively creating a "wormhole" that
+    // funnels React's hierarchical updates through to a DOM node on an
+    // entirely different part of the page.
+
+    const layerElement = this.props.render();
+    // Renders can return null, but React.render() doesn't like being asked
+    // to render null. If we get null back from renderLayer(), just render
+    // a noscript element, like React does when an element's render returns
+    // null.
+    if (layerElement === null) {
+        this.layerElement = ReactDOM.unstable_renderSubtreeIntoContainer (this, <noscript />, this._layer);
+    } else {
+        this.layerElement = ReactDOM.unstable_renderSubtreeIntoContainer(this, layerElement, this._layer);
+    }
+  },
+
+  _unrenderLayer: function() {
+    if (this.layerWillUnmount) {
+        this.layerWillUnmount(this._layer);
+    }
+    if (!this.reactUnmount)
+      this.reactUnmount = debounce(() => {
+        if (this._layer) {
+          ReactDOM.unmountComponentAtNode(this._layer);
+          document.body.removeChild(this._layer);
+          this._layer = null;
+        }
+      }, 1000);
+    this.reactUnmount();
+  },
+
+  _bindClickAway() {
+    this.canClickAway = true;
+    Events.on(document, 'mousedown', this._checkClickAway);
+    Events.on(document, 'touchend', this._checkClickAway);
+    Events.on(document, 'popOverOnShow', this._preventClickAway);
+    Events.on(document, 'popOverOnHide', this._allowClickAway);
+  },
+
+  _unbindClickAway() {
+    Events.off(document, 'mousedown', this._checkClickAway);
+    Events.off(document, 'touchend', this._checkClickAway);
+    Events.off(document, 'popOverOnShow', this._preventClickAway);
+    Events.off(document, 'popOverOnHide', this._allowClickAway);
+  },
+});
+
+export default RenderToLayer;
diff --git a/src/ripples/circle-ripple.jsx b/src/ripples/circle-ripple.jsx
index a20ba528553f92..1cea7476211ba7 100644
--- a/src/ripples/circle-ripple.jsx
+++ b/src/ripples/circle-ripple.jsx
@@ -14,6 +14,7 @@ const CircleRipple = React.createClass({
   propTypes: {
     color: React.PropTypes.string,
     opacity: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/ripples/focus-ripple.jsx b/src/ripples/focus-ripple.jsx
index d0c8af2a13ec5e..cdd04ae19d72cf 100644
--- a/src/ripples/focus-ripple.jsx
+++ b/src/ripples/focus-ripple.jsx
@@ -19,6 +19,7 @@ const FocusRipple = React.createClass({
     innerStyle: React.PropTypes.object,
     opacity: React.PropTypes.number,
     show: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
@@ -97,14 +98,14 @@ const FocusRipple = React.createClass({
 
     const startScale = 'scale(1)';
     const endScale = 'scale(0.85)';
-    let currentScale = innerCircle.style[AutoPrefix.single('transform')];
+    let currentScale = innerCircle.style.transform;
     let nextScale;
 
     currentScale = currentScale || startScale;
     nextScale = currentScale === startScale ?
       endScale : startScale;
 
-    innerCircle.style[AutoPrefix.single('transform')] = nextScale;
+    AutoPrefix.set(innerCircle.style, 'transform', nextScale);
     this._timeout = setTimeout(this._pulsate, pulsateDuration);
   },
 
diff --git a/src/ripples/touch-ripple.jsx b/src/ripples/touch-ripple.jsx
index 9dfc9932937bc8..d9584cbbd6e5fb 100644
--- a/src/ripples/touch-ripple.jsx
+++ b/src/ripples/touch-ripple.jsx
@@ -16,6 +16,7 @@ const TouchRipple = React.createClass({
     centerRipple: React.PropTypes.bool,
     color: React.PropTypes.string,
     opacity: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   getInitialState() {
diff --git a/src/select-field.jsx b/src/select-field.jsx
index 20f6e0d53c868f..cf70780f85e78e 100644
--- a/src/select-field.jsx
+++ b/src/select-field.jsx
@@ -50,6 +50,7 @@ const SelectField = React.createClass({
     menuItems: React.PropTypes.array.isRequired,
     menuItemStyle: React.PropTypes.object,
     selectedIndex: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/slider.jsx b/src/slider.jsx
index 771dd34aac3759..23cff13ea92171 100644
--- a/src/slider.jsx
+++ b/src/slider.jsx
@@ -65,6 +65,7 @@ const Slider = React.createClass({
     onDragStop: React.PropTypes.func,
     onFocus: React.PropTypes.func,
     value: valueInRangePropType,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
@@ -80,7 +81,6 @@ const Slider = React.createClass({
 
   getDefaultProps() {
     return {
-      defaultValue: 0,
       disabled: false,
       max: 1,
       min: 0,
@@ -93,7 +93,7 @@ const Slider = React.createClass({
   getInitialState() {
     let value = this.props.value;
     if (value === undefined) {
-      value = this.props.defaultValue;
+      value = this.props.defaultValue !== undefined ? this.props.defaultValue : this.props.min;
     }
     let percent = (value - this.props.min) / (this.props.max - this.props.min);
     if (isNaN(percent)) percent = 0;
@@ -113,7 +113,7 @@ const Slider = React.createClass({
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
 
-    if (nextProps.value !== undefined) {
+    if (nextProps.value !== undefined && !this.state.dragging) {
       this.setValue(nextProps.value);
     }
   },
diff --git a/src/snackbar.jsx b/src/snackbar.jsx
index 2d1d81ab25640c..129e4b381bb2d7 100644
--- a/src/snackbar.jsx
+++ b/src/snackbar.jsx
@@ -62,6 +62,7 @@ const Snackbar = React.createClass({
     onShow: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
     openOnMount: React.PropTypes.bool,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
@@ -90,7 +91,7 @@ const Snackbar = React.createClass({
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
 
-    if (this.state.open) {
+    if (this.state.open && (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) {
       this.setState({
         open: false,
       });
diff --git a/src/styles/auto-prefix.js b/src/styles/auto-prefix.js
index 558ccc325247c6..12b54917096148 100644
--- a/src/styles/auto-prefix.js
+++ b/src/styles/auto-prefix.js
@@ -1,52 +1,46 @@
-const isBrowser = require('../utils/is-browser');
+import InlineStylePrefixer from 'inline-style-prefixer';
 
-const Modernizr = isBrowser ? require('../utils/modernizr.custom') : undefined;
-
-//Keep track of already prefixed keys so we can skip Modernizr prefixing
-let prefixedKeys = {};
+const prefixers = {};
 
 module.exports = {
 
-  all(styles) {
-    let prefixedStyle = {};
-    for (let key in styles) {
-      prefixedStyle[this.single(key)] = styles[key];
+  getPrefixer() {
+    let userAgent;
+
+    // Server-side renderer needs to supply user agent
+    if (typeof navigator === 'undefined') {
+      console.warn(`Material-UI expects the global navigator.userAgent to be defined for server-side rendering. Set this property when receiving the request headers.`)
+      userAgent = '*';
+    } else {
+      userAgent = navigator.userAgent;
     }
-    return prefixedStyle;
-  },
 
-  set(style, key, value) {
-    style[this.single(key)] = value;
+    // Get prefixing instance for this user agent
+    let prefixer = prefixers[userAgent];
+    // None found, create a new instance
+    if (!prefixer) {
+      prefixer = new InlineStylePrefixer(userAgent);
+      prefixers[userAgent] = prefixer;
+    }
+    return prefixer;
   },
 
-  single(key) {
-
-    //If a browser doesn't exist, we can't prefix with Modernizr so
-    //just return the key
-    if (!isBrowser) return key;
-
-    //Check if we've prefixed this key before, just return it
-    if (prefixedKeys.hasOwnProperty(key)) return prefixedKeys[key];
-
-    //Key hasn't been prefixed yet, prefix with Modernizr
-    const prefKey = Modernizr.prefixed(key);
-
-    // Windows 7 Firefox has an issue with the implementation of Modernizr.prefixed
-    // and is capturing 'false' as the CSS property name instead of the non-prefixed version.
-    if (prefKey === false) return key;
-
-    //Save the key off for the future and return the prefixed key
-    prefixedKeys[key] = prefKey;
-    return prefKey;
-
+  all(styles) {
+    if (!styles)
+      return {};
+    return this.getPrefixer().prefix(styles);
   },
 
-  singleHyphened(key) {
-    let str = this.single(key);
+  set(style, key, value) {
+    style[key] = value;
+    style = this.getPrefixer().prefix(style);
+  },
 
-    return !str ? key : str.replace(/([A-Z])/g, (str, m1) => {
-      return '-' + m1.toLowerCase();
-    }).replace(/^ms-/, '-ms-');
+  getPrefix(key) {
+    let style = {};
+    style[key] = true;
+    let prefixes = Object.keys(this.getPrefixer().prefix(style));
+    return prefixes ? prefixes[0] : key;
   },
 
 };
diff --git a/src/styles/raw-themes/light-raw-theme.js b/src/styles/raw-themes/light-raw-theme.js
index 6cc4622ce95f1e..c542b61400aa06 100644
--- a/src/styles/raw-themes/light-raw-theme.js
+++ b/src/styles/raw-themes/light-raw-theme.js
@@ -14,7 +14,7 @@ module.exports = {
   palette: {
     primary1Color: Colors.cyan500,
     primary2Color: Colors.cyan700,
-    primary3Color: Colors.lightBlack,
+    primary3Color: Colors.grey400,
     accent1Color: Colors.pinkA200,
     accent2Color: Colors.grey100,
     accent3Color: Colors.grey500,
diff --git a/src/styles/theme-manager.js b/src/styles/theme-manager.js
index 65abe773162553..3cf62dc672ecf9 100644
--- a/src/styles/theme-manager.js
+++ b/src/styles/theme-manager.js
@@ -16,6 +16,14 @@ module.exports = {
       avatar: {
         borderColor: 'rgba(0, 0, 0, 0.08)',
       },
+      badge: {
+        color: rawTheme.palette.alternateTextColor,
+        textColor: rawTheme.palette.textColor,
+        primaryColor: rawTheme.palette.accent1Color,
+        primaryTextColor: rawTheme.palette.alternateTextColor,
+        secondaryColor: rawTheme.palette.primary1Color,
+        secondaryTextColor: rawTheme.palette.alternateTextColor,
+      },
       button: {
         height: 36,
         minWidth: 88,
@@ -118,7 +126,7 @@ module.exports = {
         handleSize: 12,
         handleSizeDisabled: 8,
         handleSizeActive: 18,
-        handleColorZero: rawTheme.palette.borderColor,
+        handleColorZero: rawTheme.palette.primary3Color,
         handleFillColor: rawTheme.palette.alternateTextColor,
         selectionColor: rawTheme.palette.primary1Color,
         rippleColor: rawTheme.palette.primary1Color,
@@ -135,13 +143,13 @@ module.exports = {
         borderColor: rawTheme.palette.borderColor,
       },
       tableHeaderColumn: {
-        textColor: rawTheme.palette.primary3Color,
+        textColor: rawTheme.palette.accent3Color,
         height: 56,
         spacing: 24,
       },
       tableFooter: {
         borderColor: rawTheme.palette.borderColor,
-        textColor: rawTheme.palette.primary3Color,
+        textColor: rawTheme.palette.accent3Color,
       },
       tableRow: {
         hoverColor: rawTheme.palette.accent2Color,
@@ -158,7 +166,7 @@ module.exports = {
         color: rawTheme.palette.alternateTextColor,
         textColor: rawTheme.palette.accent3Color,
         accentColor: rawTheme.palette.primary1Color,
-        clockColor: rawTheme.palette.primary3Color,
+        clockColor: rawTheme.palette.textColor,
         selectColor: rawTheme.palette.primary2Color,
         selectTextColor: rawTheme.palette.alternateTextColor,
       },
diff --git a/src/styles/transitions.js b/src/styles/transitions.js
index 0d0949cb981ffd..9f082604fbe6ce 100644
--- a/src/styles/transitions.js
+++ b/src/styles/transitions.js
@@ -32,7 +32,7 @@ module.exports = {
     delay = delay || '0ms';
     easeFunction = easeFunction || "linear";
 
-    return AutoPrefix.singleHyphened(property) + ' ' +
+    return property + ' ' +
       duration + ' ' +
       easeFunction + ' ' +
       delay;
diff --git a/src/svg-icon.jsx b/src/svg-icon.jsx
index a34e99b93e21c3..3ca31d9c46bbc7 100644
--- a/src/svg-icon.jsx
+++ b/src/svg-icon.jsx
@@ -18,6 +18,7 @@ const SvgIcon = React.createClass({
     onMouseEnter: React.PropTypes.func,
     onMouseLeave: React.PropTypes.func,
     viewBox: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx
index bafe21016c2fbe..0aaeb01ae70716 100644
--- a/src/table/table-body.jsx
+++ b/src/table/table-body.jsx
@@ -85,6 +85,7 @@ const TableBody = React.createClass({
   componentClickAway() {
     if (this.props.deselectOnClickaway && this.state.selectedRows.length) {
       this.setState({ selectedRows: [] });
+      if (this.props.onRowSelection) this.props.onRowSelection([]);
     }
   },
 
diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx
index f0c8c4e9055854..06786fb1da42f9 100644
--- a/src/table/table-header.jsx
+++ b/src/table/table-header.jsx
@@ -152,7 +152,7 @@ const TableHeader = React.createClass({
   },
 
   _getSelectAllCheckboxColumn(props) {
-  if (!this.props.displaySelectAll) return this._getCheckboxPlaceholder(props);
+    if (!this.props.displaySelectAll) return this._getCheckboxPlaceholder(props);
 
     const checkbox =
       <Checkbox
@@ -163,8 +163,9 @@ const TableHeader = React.createClass({
         checked={this.props.selectAllSelected}
         onCheck={this._onSelectAll} />;
 
+    const key = 'hpcb' + props.rowNumber;
     return (
-      <TableHeaderColumn style={{width: 24}}>
+      <TableHeaderColumn key={key} style={{width: 24}}>
         {checkbox}
       </TableHeaderColumn>
     );
diff --git a/src/table/table.jsx b/src/table/table.jsx
index c2bc79d3cd920e..52e3f4d3845332 100644
--- a/src/table/table.jsx
+++ b/src/table/table.jsx
@@ -235,7 +235,14 @@ const Table = React.createClass({
   },
 
   _onSelectAll() {
-    if (this.props.onRowSelection && !this.state.allRowsSelected) this.props.onRowSelection('all');
+    if (this.props.onRowSelection) {
+      if (!this.state.allRowsSelected) {
+        this.props.onRowSelection('all');
+      } else {
+        this.props.onRowSelection('none');
+      }
+    }
+  
     this.setState({allRowsSelected: !this.state.allRowsSelected});
   },
 
diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx
index 81ffde47dadbbd..3182b6e8de4326 100644
--- a/src/tabs/tab.jsx
+++ b/src/tabs/tab.jsx
@@ -18,6 +18,7 @@ const Tab = React.createClass({
     selected: React.PropTypes.bool,
     width: React.PropTypes.string,
     value: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx
index 5230b8a9447b9b..ebeccc556e6642 100644
--- a/src/tabs/tabs.jsx
+++ b/src/tabs/tabs.jsx
@@ -21,6 +21,7 @@ const Tabs = React.createClass({
     inkBarStyle: React.PropTypes.object,
     tabItemContainerStyle: React.PropTypes.object,
     tabTemplate: React.PropTypes.func,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/text-field.jsx b/src/text-field.jsx
index 397d2a4259c94f..076bd537104ef0 100644
--- a/src/text-field.jsx
+++ b/src/text-field.jsx
@@ -16,7 +16,7 @@ const ContextPure = require('./mixins/context-pure');
  * @returns True if the string provided is valid, false otherwise.
  */
 function isValid(value) {
-  return value || value === 0;
+  return Boolean(value || value === 0);
 }
 
 const TextField = React.createClass({
@@ -55,6 +55,7 @@ const TextField = React.createClass({
     underlineStyle: React.PropTypes.object,
     underlineFocusStyle: React.PropTypes.object,
     underlineDisabledStyle: React.PropTypes.object,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
@@ -229,6 +230,7 @@ const TextField = React.createClass({
       top: 38,
       bottom: 'none',
       opacity: 1,
+      zIndex: 1, // Needed to display label above Chrome's autocomplete field background
       transform: 'scale(1) translate3d(0, 0, 0)',
       transformOrigin: 'left top',
     });
diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx
index 42a69838ac759d..a6979a5396ef41 100644
--- a/src/time-picker/clock.jsx
+++ b/src/time-picker/clock.jsx
@@ -80,8 +80,8 @@ const Clock = React.createClass({
 
     if (this.props.format === 'ampm'){
       buttons = [
-        <ClockButton position="left" onTouchTap={this._setAffix.bind(this, "am")} selected={isAM} >{"AM"}</ClockButton>,
-        <ClockButton position="right" onTouchTap={this._setAffix.bind(this, "pm")} selected={!isAM} >{"PM"}</ClockButton>,
+        <ClockButton key="AM" position="left" onTouchTap={this._setAffix.bind(this, "am")} selected={isAM} >{"AM"}</ClockButton>,
+        <ClockButton key="PM" position="right" onTouchTap={this._setAffix.bind(this, "pm")} selected={!isAM} >{"PM"}</ClockButton>,
       ];
     }
     return buttons;
diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx
index 5c1c33b3bb07a0..88d36da21f2aae 100644
--- a/src/time-picker/time-picker-dialog.jsx
+++ b/src/time-picker/time-picker-dialog.jsx
@@ -37,6 +37,7 @@ const TimePickerDialog = React.createClass({
 
   getInitialState () {
     return {
+      open: false,
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
   },
@@ -91,9 +92,9 @@ const TimePickerDialog = React.createClass({
         secondary={true}
         onTouchTap={this._handleOKTouchTap} />,
     ];
-    
+
     const onClockChangeMinutes = (autoOk === true ? this._handleOKTouchTap : undefined);
-    
+
     return (
       <Dialog {...other}
         ref="dialogWindow"
@@ -103,7 +104,9 @@ const TimePickerDialog = React.createClass({
         contentStyle={styles.dialogContent}
         onDismiss={this._handleDialogDismiss}
         onShow={this._handleDialogShow}
-        repositionOnUpdate={false}>
+        repositionOnUpdate={false}
+        open={this.state.open}
+        onRequestClose={this.dismiss}>
         <Clock
           ref="clock"
           format={format}
@@ -114,11 +117,15 @@ const TimePickerDialog = React.createClass({
   },
 
   show() {
-    this.refs.dialogWindow.show();
+    this.setState({
+      open: true,
+    });
   },
 
   dismiss() {
-    this.refs.dialogWindow.dismiss();
+    this.setState({
+      open: false,
+    });
   },
 
   _handleCancelTouchTap() {
@@ -144,9 +151,9 @@ const TimePickerDialog = React.createClass({
     }
   },
 
-  _handleWindowKeyUp(e) {
+  _handleWindowKeyUp(event) {
     if (this.refs.dialogWindow.isOpen()) {
-      switch (e.keyCode) {
+      switch (event.keyCode) {
         case KeyCode.ENTER:
           this._handleOKTouchTap();
           break;
diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx
index a43a4e198b2872..d15f87df8259a9 100644
--- a/src/toolbar/toolbar-group.jsx
+++ b/src/toolbar/toolbar-group.jsx
@@ -15,6 +15,7 @@ const ToolbarGroup = React.createClass({
   propTypes: {
     className: React.PropTypes.string,
     float: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
@@ -38,7 +39,7 @@ const ToolbarGroup = React.createClass({
     return {
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
-  }, 
+  },
 
   //to update theme inside state whenever a new theme is passed down
   //from the parent / owner using context
diff --git a/src/toolbar/toolbar-separator.jsx b/src/toolbar/toolbar-separator.jsx
index 8f4ef4b1c7605a..e66a574ea3e09f 100644
--- a/src/toolbar/toolbar-separator.jsx
+++ b/src/toolbar/toolbar-separator.jsx
@@ -11,6 +11,10 @@ const ToolbarSeparator = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
+  propTypes: {
+    style: React.PropTypes.object,
+  },
+  
   //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx
index 4b120c133bcfbe..507abd4f2a4099 100644
--- a/src/toolbar/toolbar-title.jsx
+++ b/src/toolbar/toolbar-title.jsx
@@ -13,6 +13,7 @@ const ToolbarTitle = React.createClass({
 
   propTypes: {
     text: React.PropTypes.string,
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
diff --git a/src/tooltip.jsx b/src/tooltip.jsx
index f378784b2339d8..f44d3d1c83178e 100644
--- a/src/tooltip.jsx
+++ b/src/tooltip.jsx
@@ -21,6 +21,7 @@ const Tooltip = React.createClass({
     touch: React.PropTypes.bool,
     verticalPosition: React.PropTypes.oneOf(['top', 'bottom']),
     horizontalPosition: React.PropTypes.oneOf(['left', 'right', 'center']),
+    style: React.PropTypes.object,
   },
 
   //for passing default theme context to children
@@ -43,11 +44,11 @@ const Tooltip = React.createClass({
   //from the parent / owner using context
   componentWillReceiveProps (nextProps, nextContext) {
     this._setTooltipPosition();
-    
+
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
   },
-  
+
   componentDidUpdate() {
     this._setRippleSize();
   },
diff --git a/src/transition-groups/scale-in-child.jsx b/src/transition-groups/scale-in-child.jsx
index c2769a2a87aa57..57ddb91cd6f82e 100644
--- a/src/transition-groups/scale-in-child.jsx
+++ b/src/transition-groups/scale-in-child.jsx
@@ -44,6 +44,7 @@ const ScaleInChild = React.createClass({
     enterDelay: React.PropTypes.number,
     maxScale: React.PropTypes.number,
     minScale: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps: function() {
diff --git a/src/transition-groups/scale-in.jsx b/src/transition-groups/scale-in.jsx
index 0745ab2d62795d..185e8f8df463d4 100644
--- a/src/transition-groups/scale-in.jsx
+++ b/src/transition-groups/scale-in.jsx
@@ -44,6 +44,7 @@ const ScaleIn = React.createClass({
     enterDelay: React.PropTypes.number,
     maxScale: React.PropTypes.number,
     minScale: React.PropTypes.number,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/src/transition-groups/slide-in-child.jsx b/src/transition-groups/slide-in-child.jsx
index 2c9f053575ec63..a9e412fe2ed85c 100644
--- a/src/transition-groups/slide-in-child.jsx
+++ b/src/transition-groups/slide-in-child.jsx
@@ -44,6 +44,7 @@ const SlideInChild = React.createClass({
     //This callback is needed bacause
     //the direction could change when leaving the dom
     getLeaveDirection: React.PropTypes.func.isRequired,
+    style: React.PropTypes.object,
   },
 
   getDefaultProps: function() {
diff --git a/src/transition-groups/slide-in.jsx b/src/transition-groups/slide-in.jsx
index 13821987c441c6..6d76892de0cc2b 100644
--- a/src/transition-groups/slide-in.jsx
+++ b/src/transition-groups/slide-in.jsx
@@ -42,6 +42,7 @@ const SlideIn = React.createClass({
     enterDelay: React.PropTypes.number,
     childStyle: React.PropTypes.object,
     direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down']),
+    style: React.PropTypes.object,
   },
 
   getDefaultProps() {
diff --git a/test/date-picker/calendar-spec.js b/test/date-picker/calendar-spec.js
index d1e5fc372ec48c..7fe7441956a76f 100644
--- a/test/date-picker/calendar-spec.js
+++ b/test/date-picker/calendar-spec.js
@@ -20,7 +20,7 @@ describe(`Calendar`, () => {
 
     describe(`Next Month Button`, () => {
         it(`should initially be disabled if the current month is the same as the month in the maxDate prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let maxDate = new Date(initialDate.toDateString());
 
             let render = TestUtils.renderIntoDocument(
@@ -38,9 +38,9 @@ describe(`Calendar`, () => {
         });
 
         it(`should initially be disabled if the current month is after the month in the maxDate prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let maxDate = new Date(initialDate.toDateString());
-            maxDate.setMonth(maxDate.getMonth() - 1);
+            maxDate = DateTime.addMonths(maxDate, -1);
 
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
@@ -56,9 +56,9 @@ describe(`Calendar`, () => {
         });
 
         it(`should initially enable the next month button if the current month is before the maxDate prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let maxDate = new Date(initialDate.toDateString());
-            maxDate.setMonth(maxDate.getMonth() + 1);
+            maxDate = DateTime.addMonths(maxDate, 1);
 
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
@@ -75,7 +75,7 @@ describe(`Calendar`, () => {
         });
 
         it(`should reenable the next month button when the current month is before the maxDate prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let maxDate = new Date(initialDate.toDateString());
 
             let render = TestUtils.renderIntoDocument(
@@ -96,9 +96,9 @@ describe(`Calendar`, () => {
         });
 
         it(`should redisable the next month button when the current month is the same as the maxDate prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let maxDate = new Date(initialDate.toDateString());
-            maxDate.setMonth(maxDate.getMonth() + 1);
+            maxDate = DateTime.addMonths(maxDate, 1);
 
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
@@ -120,7 +120,7 @@ describe(`Calendar`, () => {
 
     describe('Previous Month Button', () => {
         it(`should initially disable the previous month button if the current month is the same as the minDate month prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let minDate = new Date(initialDate.toDateString());
 
             let render = TestUtils.renderIntoDocument(
@@ -137,9 +137,9 @@ describe(`Calendar`, () => {
         });
 
         it(`should initially disable the previous month button if the current month is before the minDate month prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let minDate = new Date(initialDate.toDateString());
-            minDate.setMonth(initialDate.getMonth() + 1);
+            minDate = DateTime.addMonths(initialDate, 1);
 
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
@@ -155,9 +155,9 @@ describe(`Calendar`, () => {
         });
 
         it(`should initially enable the previous month button if the current month is after the minDate month prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let minDate = new Date(initialDate.toDateString());
-            minDate.setMonth(initialDate.getMonth() - 1);
+            minDate = DateTime.addMonths(initialDate, -1);
 
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
@@ -173,7 +173,7 @@ describe(`Calendar`, () => {
         });
 
         it(`should enable the previous month button when the current month is after the minDate month prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let minDate = new Date(initialDate.toDateString());
 
             let render = TestUtils.renderIntoDocument(
@@ -193,9 +193,9 @@ describe(`Calendar`, () => {
         });
 
         it(`should disable the previous month button when the current month is the same as the minDate month prop`, () => {
-            let initialDate = new Date();
+            let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
             let minDate = new Date(initialDate.toDateString());
-            minDate.setMonth(minDate.getMonth() - 1);
+            minDate = DateTime.addMonths(minDate, -1);
 
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar