From 007d3cdc83980ac819add1db10e77769f15b0ec7 Mon Sep 17 00:00:00 2001
From: Chen Oppenhaim <chenop@gmail.com>
Date: Sat, 14 Jul 2018 15:58:37 +0300
Subject: [PATCH] added 3 exports and ran yarn docs:api

---
 packages/material-ui/.size-snapshot.json      |  6 +--
 .../material-ui/src/TableBody/TableBody.js    |  2 +-
 .../src/TableFooter/TableFooter.js            |  2 +-
 pages/api/button-base.md                      |  6 +--
 pages/api/checkbox.md                         |  2 +-
 pages/api/fade.md                             |  4 +-
 pages/api/form-control-label.md               |  4 +-
 pages/api/input.md                            |  2 +-
 pages/api/native-select.md                    |  2 +-
 pages/api/popover.md                          |  6 +--
 pages/api/radio-group.md                      |  2 +-
 pages/api/radio.md                            |  2 +-
 pages/api/select.md                           |  2 +-
 pages/api/slide.md                            |  4 +-
 pages/api/snackbar.md                         |  4 +-
 pages/api/switch-base.md                      |  2 +-
 pages/api/switch.md                           |  2 +-
 pages/api/table-body.md                       | 14 +++++++
 pages/api/table-footer.md                     | 14 +++++++
 pages/api/tabs.md                             |  2 +-
 pages/api/text-field.md                       | 40 +++++++++----------
 pages/api/typography.md                       |  2 +-
 pages/api/zoom.md                             |  6 +--
 pages/lab/api/speed-dial.md                   |  2 +-
 pages/lab/api/toggle-button-group.md          |  2 +-
 test/regressions/tests/Paper/SimplePaper.js   |  2 +-
 26 files changed, 83 insertions(+), 55 deletions(-)

diff --git a/packages/material-ui/.size-snapshot.json b/packages/material-ui/.size-snapshot.json
index c021a36ebe400f..d551b00f0b554c 100644
--- a/packages/material-ui/.size-snapshot.json
+++ b/packages/material-ui/.size-snapshot.json
@@ -1,7 +1,7 @@
 {
   "build/umd/material-ui.production.min.js": {
-    "bundled": 820697,
-    "minified": 320569,
-    "gzipped": 85623
+    "bundled": 712602,
+    "minified": 292116,
+    "gzipped": 77174
   }
 }
diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js
index a73144da7f5a59..5090d85434632c 100644
--- a/packages/material-ui/src/TableBody/TableBody.js
+++ b/packages/material-ui/src/TableBody/TableBody.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-const styles = {
+export const styles = {
   root: {
     display: 'table-row-group',
   },
diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js
index 7466ab2e564468..9754ebcfd68bfb 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-const styles = {
+export const styles = {
   root: {
     display: 'table-footer-group',
   },
diff --git a/pages/api/button-base.md b/pages/api/button-base.md
index cd96329f3b5242..ba9d513ad076f5 100644
--- a/pages/api/button-base.md
+++ b/pages/api/button-base.md
@@ -9,15 +9,15 @@ title: ButtonBase API
 
 <p class="description">The API documentation of the ButtonBase React component.</p>
 
-`ButtonBase` contains as few styles as possible.
-It aims to be a simple building block for creating a button.
+`ButtonBase` contains as few styles as possible.
+It aims to be a simple building block for creating a button.
 It contains a load of style reset and some focus/ripple logic.
 
 ## Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">action</span> | <span class="prop-type">func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions that can be triggered programmatically. |
+| <span class="prop-name">action</span> | <span class="prop-type">func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions
 that can be triggered programmatically. |
 | <span class="prop-name">buttonRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native button component. |
 | <span class="prop-name">centerRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md
index e5e01eb2bf90ed..96daa70da39aa7 100644
--- a/pages/api/checkbox.md
+++ b/pages/api/checkbox.md
@@ -27,7 +27,7 @@ title: Checkbox API
 | <span class="prop-name">indeterminateIcon</span> | <span class="prop-type">node | <span class="prop-default">&lt;IndeterminateCheckBoxIcon /></span> | The icon to display when the component is indeterminate. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Properties applied to the `input` element. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string |   | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
 
diff --git a/pages/api/fade.md b/pages/api/fade.md
index 2c5a7f0b4005f1..74b912c2a25e18 100644
--- a/pages/api/fade.md
+++ b/pages/api/fade.md
@@ -9,7 +9,7 @@ title: Fade API
 
 <p class="description">The API documentation of the Fade React component.</p>
 
-The Fade transition is used by the [Modal](/utils/modal) component.
+The Fade transition is used by the [Modal](/utils/modal) component.
 It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
 
 ## Props
@@ -18,7 +18,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |   | A single child content element. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool |   | If `true`, the component will transition in. |
-| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{
  enter: duration.enteringScreen,
  exit: duration.leavingScreen,
}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)).
 
diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md
index 9782dfd0ffdfc6..793d8557407591 100644
--- a/pages/api/form-control-label.md
+++ b/pages/api/form-control-label.md
@@ -9,7 +9,7 @@ title: FormControlLabel API
 
 <p class="description">The API documentation of the FormControlLabel React component.</p>
 
-Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.
+Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.
 Use this component if you want to display an extra label.
 
 ## Props
@@ -23,7 +23,7 @@ Use this component if you want to display an extra label.
 | <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">label</span> | <span class="prop-type">node |   | The text to be used in an enclosing label element. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   |  |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
 
 Any other properties supplied will be spread to the root element (native element).
diff --git a/pages/api/input.md b/pages/api/input.md
index f11748a0147ee4..d1711ec03d67db 100644
--- a/pages/api/input.md
+++ b/pages/api/input.md
@@ -32,7 +32,7 @@ title: Input API
 | <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> |   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
 | <span class="prop-name">multiline</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, a textarea element will be rendered. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   | Name attribute of the `input` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.value`. |
 | <span class="prop-name">placeholder</span> | <span class="prop-type">string |   | The short hint displayed in the input before the user enters a value. |
 | <span class="prop-name">rows</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Number of rows to display when multiline option is set to true. |
 | <span class="prop-name">rowsMax</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Maximum number of rows to display when multiline option is set to true. |
diff --git a/pages/api/native-select.md b/pages/api/native-select.md
index 3e56b9638c219b..4bcbf62f056a49 100644
--- a/pages/api/native-select.md
+++ b/pages/api/native-select.md
@@ -20,7 +20,7 @@ An alternative to `<Select native />` with a much smaller dependency graph.
 | <span class="prop-name">IconComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">ArrowDropDownIcon</span> | The icon that displays the arrow. |
 | <span class="prop-name">input</span> | <span class="prop-type">element | <span class="prop-default">&lt;Input /></span> | An `Input` element; does not have to be a material-ui specific `Input`. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `select` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.value`. |
 | <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | The input value. |
 
 Any other properties supplied will be spread to the root element ([Input](/api/input)).
diff --git a/pages/api/popover.md b/pages/api/popover.md
index af0815d1b61bba..8e3f620a21366f 100644
--- a/pages/api/popover.md
+++ b/pages/api/popover.md
@@ -15,9 +15,9 @@ title: Popover API
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">action</span> | <span class="prop-type">func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions that can be triggered programmatically. |
+| <span class="prop-name">action</span> | <span class="prop-type">func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions
 that can be triggered programmatically. |
 | <span class="prop-name">anchorEl</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |   | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. |
-| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> } | <span class="prop-default">{  vertical: 'top',  horizontal: 'left',}</span> | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> } | <span class="prop-default">{
  vertical: 'top',
  horizontal: 'left',
}</span> | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
 | <span class="prop-name">anchorPosition</span> | <span class="prop-type">{ left: number, top: number } |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
 | <span class="prop-name">anchorReference</span> | <span class="prop-type">enum:&nbsp;'anchorEl'&nbsp;&#124;<br>&nbsp;'anchorPosition'&nbsp;&#124;<br>&nbsp;'none'<br> | <span class="prop-default">'anchorEl'</span> |  |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
@@ -35,7 +35,7 @@ title: Popover API
 | <span class="prop-name">onExiting</span> | <span class="prop-type">func |   | Callback fired when the component is exiting. |
 | <span class="prop-name required">open *</span> | <span class="prop-type">bool |   | If `true`, the popover is visible. |
 | <span class="prop-name">PaperProps</span> | <span class="prop-type">object |   | Properties applied to the [`Paper`](/api/paper) element. |
-| <span class="prop-name">transformOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> } | <span class="prop-default">{  vertical: 'top',  horizontal: 'left',}</span> | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
+| <span class="prop-name">transformOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> } | <span class="prop-default">{
  vertical: 'top',
  horizontal: 'left',
}</span> | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">Grow</span> | Transition component. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | Set to 'auto' to automatically calculate transition time based on height. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object |   | Properties applied to the `Transition` element. |
diff --git a/pages/api/radio-group.md b/pages/api/radio-group.md
index 8eea5be66c7e72..3196e5c2c324a8 100644
--- a/pages/api/radio-group.md
+++ b/pages/api/radio-group.md
@@ -17,7 +17,7 @@ title: RadioGroup API
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   | The name used to reference the value of the control. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.<br>*value:* The `value` of the selected radio button |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.value`.<br>*value:* The `value` of the selected radio button |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | Value of the selected radio button. |
 
 Any other properties supplied will be spread to the root element ([FormGroup](/api/form-group)).
diff --git a/pages/api/radio.md b/pages/api/radio.md
index 9bc52c6f8ccafc..e349ccf8429556 100644
--- a/pages/api/radio.md
+++ b/pages/api/radio.md
@@ -25,7 +25,7 @@ title: Radio API
 | <span class="prop-name">id</span> | <span class="prop-type">string |   | The id of the `input` element. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.value`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string |   | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
 
diff --git a/pages/api/select.md b/pages/api/select.md
index 519a33022499d3..dc99bfd4fc6c1a 100644
--- a/pages/api/select.md
+++ b/pages/api/select.md
@@ -25,7 +25,7 @@ title: Select API
 | <span class="prop-name">MenuProps</span> | <span class="prop-type">object |   | Properties applied to the [`Menu`](/api/menu) element. |
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). |
 | <span class="prop-name">native</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will be using a native `select` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object, child?: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.<br>*child:* The react element that was selected when `native` is `false` (default). |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object, child?: object) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.value`.<br>*child:* The react element that was selected when `native` is `false` (default). |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func |   | Callback fired when the component requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func |   | Callback fired when the component requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">open</span> | <span class="prop-type">bool |   | Control `select` open state. You can only use it when the `native` property is `false` (default). |
diff --git a/pages/api/slide.md b/pages/api/slide.md
index e9cecb4aa7021f..3d87a151ac8ec2 100644
--- a/pages/api/slide.md
+++ b/pages/api/slide.md
@@ -9,7 +9,7 @@ title: Slide API
 
 <p class="description">The API documentation of the Slide React component.</p>
 
-The Slide transition is used by the [Snackbar](/demos/snackbars) component.
+The Slide transition is used by the [Snackbar](/demos/snackbars) component.
 It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
 
 ## Props
@@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 | <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |   | A single child content element. |
 | <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'&nbsp;&#124;<br>&nbsp;'up'&nbsp;&#124;<br>&nbsp;'down'<br> | <span class="prop-default">'down'</span> | Direction the child node will enter from. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool |   | If `true`, show the component; triggers the enter or exit animation. |
-| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{
  enter: duration.enteringScreen,
  exit: duration.leavingScreen,
}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)).
 
diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md
index da7e8718e95ce2..5b29b60b89edf1 100644
--- a/pages/api/snackbar.md
+++ b/pages/api/snackbar.md
@@ -16,7 +16,7 @@ title: Snackbar API
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">action</span> | <span class="prop-type">node |   | The action to display. |
-| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> } | <span class="prop-default">{  vertical: 'bottom',  horizontal: 'center',}</span> | The anchor of the `Snackbar`. |
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br> } | <span class="prop-default">{
  vertical: 'bottom',
  horizontal: 'center',
}</span> | The anchor of the `Snackbar`. |
 | <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number |   | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
 | <span class="prop-name">children</span> | <span class="prop-type">element |   | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
@@ -34,7 +34,7 @@ title: Snackbar API
 | <span class="prop-name">open</span> | <span class="prop-type">bool |   | If true, `Snackbar` is open. |
 | <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number |   | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">Slide</span> | Transition component. |
-| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{
  enter: duration.enteringScreen,
  exit: duration.leavingScreen,
}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object |   | Properties applied to the `Transition` element. |
 
 Any other properties supplied will be spread to the root element (native element).
diff --git a/pages/api/switch-base.md b/pages/api/switch-base.md
index d5c9843254eacd..8088ec96d2b519 100644
--- a/pages/api/switch-base.md
+++ b/pages/api/switch-base.md
@@ -27,7 +27,7 @@ title: SwitchBase API
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   |  |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string | <span class="prop-default">'checkbox'</span> | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
 
diff --git a/pages/api/switch.md b/pages/api/switch.md
index 216d8a3be5c0c7..22baa8584f40b7 100644
--- a/pages/api/switch.md
+++ b/pages/api/switch.md
@@ -25,7 +25,7 @@ title: Switch API
 | <span class="prop-name">id</span> | <span class="prop-type">string |   | The id of the `input` element. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string |   | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
 
diff --git a/pages/api/table-body.md b/pages/api/table-body.md
index f086ca6919a91a..5dfdbcabb0e845 100644
--- a/pages/api/table-body.md
+++ b/pages/api/table-body.md
@@ -21,6 +21,20 @@ title: TableBody API
 
 Any other properties supplied will be spread to the root element (native element).
 
+## CSS API
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableBody/TableBody.js)
+for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiTableBody`.
+
 ## Demos
 
 - [Tables](/demos/tables)
diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md
index 7b3d9e03ae48c4..13902d1c4a9b7d 100644
--- a/pages/api/table-footer.md
+++ b/pages/api/table-footer.md
@@ -21,6 +21,20 @@ title: TableFooter API
 
 Any other properties supplied will be spread to the root element (native element).
 
+## CSS API
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableFooter/TableFooter.js)
+for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiTableFooter`.
+
 ## Demos
 
 - [Tables](/demos/tables)
diff --git a/pages/api/tabs.md b/pages/api/tabs.md
index ed27d24c0d4ecd..9d2cdd8bb792d5 100644
--- a/pages/api/tabs.md
+++ b/pages/api/tabs.md
@@ -15,7 +15,7 @@ title: Tabs API
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">action</span> | <span class="prop-type">func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions that can be triggered programmatically. |
+| <span class="prop-name">action</span> | <span class="prop-type">func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions
 that can be triggered programmatically. |
 | <span class="prop-name">centered</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the tabs will be centered. This property is intended for large views. |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
diff --git a/pages/api/text-field.md b/pages/api/text-field.md
index 1024456b2f4728..93ee2344aaaab1 100644
--- a/pages/api/text-field.md
+++ b/pages/api/text-field.md
@@ -9,31 +9,31 @@ title: TextField API
 
 <p class="description">The API documentation of the TextField React component.</p>
 
-The `TextField` is a convenience wrapper for the most common cases (80%).
-It cannot be all things to all people, otherwise the API would grow out of control.
+The `TextField` is a convenience wrapper for the most common cases (80%).
+It cannot be all things to all people, otherwise the API would grow out of control.
 
-## Advanced Configuration
+## Advanced Configuration
 
-It's important to understand that the text field is a simple abstraction
-on top of the following components:
-- [FormControl](/api/form-control)
-- [InputLabel](/api/input-label)
-- [Input](/api/input)
-- [FormHelperText](/api/form-helper-text)
+It's important to understand that the text field is a simple abstraction
+on top of the following components:
+- [FormControl](/api/form-control)
+- [InputLabel](/api/input-label)
+- [Input](/api/input)
+- [FormHelperText](/api/form-helper-text)
 
-If you wish to alter the properties applied to the native input, you can do so as follows:
+If you wish to alter the properties applied to the native input, you can do so as follows:
 
-```jsx
-const inputProps = {
-  step: 300,
-};
+```jsx
+const inputProps = {
+  step: 300,
+};
 
-return <TextField id="time" type="time" inputProps={inputProps} />;
-```
+return <TextField id="time" type="time" inputProps={inputProps} />;
+```
 
-For advanced cases, please look at the source of TextField by clicking on the
-"Edit this page" button above. Consider either:
-- using the upper case props for passing values directly to the components
+For advanced cases, please look at the source of TextField by clicking on the
+"Edit this page" button above. Consider either:
+- using the upper case props for passing values directly to the components
 - using the underlying components directly as shown in the demos
 
 ## Props
@@ -57,7 +57,7 @@ For advanced cases, please look at the source of TextField by clicking on the
 | <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'normal'<br> |   | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
 | <span class="prop-name">multiline</span> | <span class="prop-type">bool |   | If `true`, a textarea element will be rendered instead of an input. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   | Name attribute of the `input` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback.
 You can pull out the new value by accessing `event.target.value`. |
 | <span class="prop-name">placeholder</span> | <span class="prop-type">string |   | The short hint displayed in the input before the user enters a value. |
 | <span class="prop-name">required</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label is displayed as required. |
 | <span class="prop-name">rows</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |   | Number of rows to display when multiline option is set to true. |
diff --git a/pages/api/typography.md b/pages/api/typography.md
index 74b44e5848839c..464470b5de1a38 100644
--- a/pages/api/typography.md
+++ b/pages/api/typography.md
@@ -21,7 +21,7 @@ title: Typography API
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
 | <span class="prop-name">gutterBottom</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
-| <span class="prop-name">headlineMapping</span> | <span class="prop-type">object | <span class="prop-default">{  display4: 'h1',  display3: 'h1',  display2: 'h1',  display1: 'h1',  headline: 'h1',  title: 'h2',  subheading: 'h3',  body2: 'aside',  body1: 'p',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
+| <span class="prop-name">headlineMapping</span> | <span class="prop-type">object | <span class="prop-default">{
  display4: 'h1',
  display3: 'h1',
  display2: 'h1',
  display1: 'h1',
  headline: 'h1',
  title: 'h2',
  subheading: 'h3',
  body2: 'aside',
  body1: 'p',
}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
 | <span class="prop-name">noWrap</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
 | <span class="prop-name">paragraph</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
 | <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'<br> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
diff --git a/pages/api/zoom.md b/pages/api/zoom.md
index fed5c131fa583d..e7b3ca139c3a94 100644
--- a/pages/api/zoom.md
+++ b/pages/api/zoom.md
@@ -9,8 +9,8 @@ title: Zoom API
 
 <p class="description">The API documentation of the Zoom React component.</p>
 
-The Zoom transition can be used for the floating variant of the
-[Button](https://material-ui.com/demos/buttons/#floating-action-buttons) component.
+The Zoom transition can be used for the floating variant of the
+[Button](https://material-ui.com/demos/buttons/#floating-action-buttons) component.
 It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
 
 ## Props
@@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |   | A single child content element. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool |   | If `true`, the component will transition in. |
-| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{
  enter: duration.enteringScreen,
  exit: duration.leavingScreen,
}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)).
 
diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md
index 14f2da121b82c9..f9177028490e8e 100644
--- a/pages/lab/api/speed-dial.md
+++ b/pages/lab/api/speed-dial.md
@@ -25,7 +25,7 @@ title: SpeedDial API
 | <span class="prop-name required">open *</span> | <span class="prop-type">bool |   | If `true`, the SpeedDial is open. |
 | <span class="prop-name">openIcon</span> | <span class="prop-type">node |   | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">Zoom</span> | Transition component. |
-| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{
  enter: duration.enteringScreen,
  exit: duration.leavingScreen,
}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object |   | Properties applied to the `Transition` element. |
 
 Any other properties supplied will be spread to the root element (native element).
diff --git a/pages/lab/api/toggle-button-group.md b/pages/lab/api/toggle-button-group.md
index b68355d2134920..2ca47141576dcf 100644
--- a/pages/lab/api/toggle-button-group.md
+++ b/pages/lab/api/toggle-button-group.md
@@ -18,7 +18,7 @@ title: ToggleButtonGroup API
 | <span class="prop-name required">children *</span> | <span class="prop-type">node |   | The content of the button. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Useful to extend the style applied to components. |
 | <span class="prop-name">exclusive</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true` only allow one of the child ToggleButton values to be selected. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: object) => void`<br>*event:* The event source of the callback<br>*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: object) => void`<br>*event:* The event source of the callback<br>*value:* of the selected buttons. When `exclusive` is true
 this is a single value; when false an array of selected values. |
 | <span class="prop-name">selected</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | If `true` render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty. |
 | <span class="prop-name">value</span> | <span class="prop-type">any | <span class="prop-default">null</span> | The currently selected value within the group or an array of selected values when `exclusive` is false. |
 
diff --git a/test/regressions/tests/Paper/SimplePaper.js b/test/regressions/tests/Paper/SimplePaper.js
index 34c45f1d12c87f..d74cc7314f83f2 100644
--- a/test/regressions/tests/Paper/SimplePaper.js
+++ b/test/regressions/tests/Paper/SimplePaper.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import Paper from '@material-ui/core/Paper';
 
-const style = {
+export const style = {
   margin: 15,
   padding: 30,
 };