diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md
index 8c58516f4be5db..e158319ee8f7f7 100644
--- a/docs/pages/api/autocomplete.md
+++ b/docs/pages/api/autocomplete.md
@@ -61,7 +61,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">noOptionsText</span> | <span class="prop-type">node</span> | <span class="prop-default">'No options'</span> | Text to display when there are no options.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: T) => void`<br>*event:* The event source of the callback.<br>*value:* null |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the popup 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">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. |
+| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> |  | Callback fired when the popup 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</span> |  | Control the popup` open state. |
 | <span class="prop-name">openText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Open'</span> | Override the default text for the *open popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
diff --git a/docs/pages/index.js b/docs/pages/index.js
index 759f527912a7d4..59fd3b7c86dc21 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -174,7 +174,7 @@ export default function HomePage() {
   "@type": "Organization",
   "name": "Material-UI",
   "url": "https://material-ui.com/",
-  "logo": "https://material-ui.com/static/brand.png",
+  "logo": "https://material-ui.com/static/logo.png",
   "sameAs": [
     "https://twitter.com/materialUI",
     "https://github.com/mui-org/material-ui",
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index 35ff6f637d4be2..9ba041029edd89 100644
--- a/docs/src/modules/components/Ad.js
+++ b/docs/src/modules/components/Ad.js
@@ -53,7 +53,15 @@ const inHouseAds = [
     name: 'scaffoldhub',
     link: 'https://scaffoldhub.io/?partner=1',
     img: '/static/in-house/scaffoldhub.png',
-    description: '<b>ScaffoldHub</b> - Automate building your full-stack Material-UI web-app.',
+    description: '<b>Scaffold</b><br />Automate building your full-stack Material-UI web-app.',
+  },
+  {
+    name: 'themes-2',
+    link:
+      'https://themes.material-ui.com/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-2',
+    img: '/static/in-house/themes-2.jpg',
+    description:
+      '<b>Premium Templates</b><br />Sart your project with the best themes for admins, dashboards and more.',
   },
   {
     name: 'themes',
@@ -69,20 +77,22 @@ const inHouseAds = [
       'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
     img: '/static/in-house/tidelift.png',
     description:
-      '<b>Material-UI for enterprise</b><br />Available in the Tidelift Subscription. Reduce risk, and improve code health.',
-  },
-  {
-    name: 'monday',
-    link: 'https://monday.com/partners/status-video?&utm_source=Partner&utm_campaign=MaterialUI',
-    img: '/static/in-house/monday.jpg',
-    description: 'Why use multiple tools to manage your projects? Meet monday.com',
+      '<b>Material-UI for enterprise</b><br />Save time and reduce risk. Managed open source — backed by maintainers.',
   },
   {
     name: 'bonsaiilabs',
     link: 'https://bonsaiilabs.com/courseDetail/material-ui-with-react',
     img: '/static/in-house/bonsaiilabs.png',
     description:
-      'A course to learn Material‑UI while developing a mobile flight search and booking app.',
+      '<b>Learn Material‑UI</b><br />A course to learn Material-UI while developing a flight search/booking app.',
+  },
+  {
+    name: 'sketch',
+    link:
+      'https://themes.material-ui.com/themes/sketch-react/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-sketch',
+    img: '/static/in-house/sketch.png',
+    description:
+      '<b>Sketch</b><br />A large UI kit with over 1,500 handcrafted Material-UI symbols 💎.',
   },
 ];
 
@@ -214,7 +224,7 @@ function Ad(props) {
         eventLabel: type,
       });
 
-      if (type === 'in-house') {
+      if (type.indexOf('in-house') === 0) {
         window.ga('send', {
           hitType: 'event',
           eventCategory: 'in-house-ad',
diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js
index ce385bcb63e588..ec72bd635aca49 100644
--- a/docs/src/modules/components/AppFooter.js
+++ b/docs/src/modules/components/AppFooter.js
@@ -34,7 +34,7 @@ const styles = theme => ({
     },
     '& ul': {
       margin: 0,
-      paddingLeft: 0,
+      padding: 0,
       listStyle: 'none',
     },
     '& li': {
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index cb85ef1ea9bf0a..e7632435c5fc71 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
   ul: {
     padding: 0,
     margin: 0,
-    listStyleType: 'none',
+    listStyle: 'none',
   },
   item: {
     fontSize: 13,
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
index b8f45007d28807..c14d27fdd246cc 100644
--- a/docs/src/modules/components/Head.js
+++ b/docs/src/modules/components/Head.js
@@ -21,7 +21,7 @@ export default function Head(props) {
       <meta name="twitter:site" content="@MaterialUI" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content="https://material-ui.com/static/brand.png" />
+      <meta name="twitter:image" content="https://material-ui.com/static/logo.png" />
       {/* Facebook */}
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
@@ -30,7 +30,7 @@ export default function Head(props) {
         content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
       />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content="https://material-ui.com/static/brand.png" />
+      <meta property="og:image" content="https://material-ui.com/static/logo.png" />
       <meta property="og:ttl" content="604800" />
       {/* Algolia */}
       <meta name="docsearch:language" content={userLanguage} />
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index e5c00f8ad27c5e..dda8810b812c58 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -21,6 +21,9 @@ import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
+  root: {
+    width: '100%',
+  },
   container: {
     position: 'relative',
   },
@@ -132,7 +135,7 @@ function MarkdownDocs(props) {
         </Portal>
       )}
       <div
-        className={clsx({
+        className={clsx(classes.root, {
           [classes.ad]: !disableAd,
           [classes.toc]: !disableToc,
         })}
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 4ab7860e2c30e2..acda4134c56c83 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -116,8 +116,7 @@ const markedOptions = {
 
 const styles = theme => ({
   root: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 16,
+    ...theme.typography.body1,
     color: theme.palette.text.primary,
     wordBreak: 'break-word',
     '& .anchor-link': {
@@ -147,6 +146,8 @@ const styles = theme => ({
     '& code[class*="language-"]': {
       backgroundColor: '#272c34',
       color: '#fff',
+      // Avoid layout jump after hydration (style injected by prism)
+      lineHeight: 1.5,
     },
     '& p code, & ul code, & pre code': {
       fontSize: 14,
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
index a54ed776610619..219b9456a328dd 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.js
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -31,12 +31,14 @@ const InputWrapper = styled('div')`
 
   & input {
     font-size: 14px;
-    line-height: 26px;
-    padding: 2px 6px;
+    height: 30px;
+    box-sizing: border-box;
+    padding: 4px 6px;
     width: 0;
     min-width: 30px;
     flex-grow: 1;
     border: 0;
+    margin: 0;
     outline: 0;
   }
 `;
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
index 1d599d1cff7f79..c2d4db38691799 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -31,12 +31,14 @@ const InputWrapper = styled('div')`
 
   & input {
     font-size: 14px;
-    line-height: 26px;
-    padding: 2px 6px;
+    height: 30px;
+    box-sizing: border-box;
+    padding: 4px 6px;
     width: 0;
     min-width: 30px;
     flex-grow: 1;
     border: 0;
+    margin: 0;
     outline: 0;
   }
 `;
diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js
index 8b900f47bf99e2..1a967b8cc74217 100644
--- a/docs/src/pages/components/cards/ImgMediaCard.js
+++ b/docs/src/pages/components/cards/ImgMediaCard.js
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
 });
@@ -18,7 +18,7 @@ export default function ImgMediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           component="img"
diff --git a/docs/src/pages/components/cards/ImgMediaCard.tsx b/docs/src/pages/components/cards/ImgMediaCard.tsx
index 8b900f47bf99e2..1a967b8cc74217 100644
--- a/docs/src/pages/components/cards/ImgMediaCard.tsx
+++ b/docs/src/pages/components/cards/ImgMediaCard.tsx
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
 });
@@ -18,7 +18,7 @@ export default function ImgMediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           component="img"
diff --git a/docs/src/pages/components/cards/MediaCard.js b/docs/src/pages/components/cards/MediaCard.js
index becf41e2546dc6..f16505dfbe80d1 100644
--- a/docs/src/pages/components/cards/MediaCard.js
+++ b/docs/src/pages/components/cards/MediaCard.js
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -21,7 +21,7 @@ export default function MediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           className={classes.media}
diff --git a/docs/src/pages/components/cards/MediaCard.tsx b/docs/src/pages/components/cards/MediaCard.tsx
index becf41e2546dc6..f16505dfbe80d1 100644
--- a/docs/src/pages/components/cards/MediaCard.tsx
+++ b/docs/src/pages/components/cards/MediaCard.tsx
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -21,7 +21,7 @@ export default function MediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           className={classes.media}
diff --git a/docs/src/pages/components/cards/MediaControlCard.js b/docs/src/pages/components/cards/MediaControlCard.js
index 5aab43b04123a9..45cef7d97fc282 100644
--- a/docs/src/pages/components/cards/MediaControlCard.js
+++ b/docs/src/pages/components/cards/MediaControlCard.js
@@ -10,7 +10,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 
 const useStyles = makeStyles(theme => ({
-  card: {
+  root: {
     display: 'flex',
   },
   details: {
@@ -40,7 +40,7 @@ export default function MediaControlCard() {
   const theme = useTheme();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
           <Typography component="h5" variant="h5">
diff --git a/docs/src/pages/components/cards/MediaControlCard.tsx b/docs/src/pages/components/cards/MediaControlCard.tsx
index f3adffd758655f..a5d9281ec7c739 100644
--- a/docs/src/pages/components/cards/MediaControlCard.tsx
+++ b/docs/src/pages/components/cards/MediaControlCard.tsx
@@ -11,7 +11,7 @@ import SkipNextIcon from '@material-ui/icons/SkipNext';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    card: {
+    root: {
       display: 'flex',
     },
     details: {
@@ -42,7 +42,7 @@ export default function MediaControlCard() {
   const theme = useTheme();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
           <Typography component="h5" variant="h5">
diff --git a/docs/src/pages/components/cards/OutlinedCard.js b/docs/src/pages/components/cards/OutlinedCard.js
index 77855224dcaaf2..1f143544b2b6a4 100644
--- a/docs/src/pages/components/cards/OutlinedCard.js
+++ b/docs/src/pages/components/cards/OutlinedCard.js
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function OutlinedCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card} variant="outlined">
+    <Card className={classes.root} variant="outlined">
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day
diff --git a/docs/src/pages/components/cards/OutlinedCard.tsx b/docs/src/pages/components/cards/OutlinedCard.tsx
index 77855224dcaaf2..1f143544b2b6a4 100644
--- a/docs/src/pages/components/cards/OutlinedCard.tsx
+++ b/docs/src/pages/components/cards/OutlinedCard.tsx
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function OutlinedCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card} variant="outlined">
+    <Card className={classes.root} variant="outlined">
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day
diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js
index 31498e60154214..04a18b6a912f10 100644
--- a/docs/src/pages/components/cards/RecipeReviewCard.js
+++ b/docs/src/pages/components/cards/RecipeReviewCard.js
@@ -17,7 +17,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles(theme => ({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -48,7 +48,7 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>
diff --git a/docs/src/pages/components/cards/RecipeReviewCard.tsx b/docs/src/pages/components/cards/RecipeReviewCard.tsx
index 928edc041be879..e6697cd9f2cda6 100644
--- a/docs/src/pages/components/cards/RecipeReviewCard.tsx
+++ b/docs/src/pages/components/cards/RecipeReviewCard.tsx
@@ -18,7 +18,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    card: {
+    root: {
       maxWidth: 345,
     },
     media: {
@@ -50,7 +50,7 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>
diff --git a/docs/src/pages/components/cards/SimpleCard.js b/docs/src/pages/components/cards/SimpleCard.js
index 20bedec76119e9..79be00bd552a90 100644
--- a/docs/src/pages/components/cards/SimpleCard.js
+++ b/docs/src/pages/components/cards/SimpleCard.js
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function SimpleCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day
diff --git a/docs/src/pages/components/cards/SimpleCard.tsx b/docs/src/pages/components/cards/SimpleCard.tsx
index 20bedec76119e9..79be00bd552a90 100644
--- a/docs/src/pages/components/cards/SimpleCard.tsx
+++ b/docs/src/pages/components/cards/SimpleCard.tsx
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function SimpleCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day
diff --git a/docs/src/pages/components/skeleton/Facebook.js b/docs/src/pages/components/skeleton/Facebook.js
index d89a71129137cb..cc7282864aaa12 100644
--- a/docs/src/pages/components/skeleton/Facebook.js
+++ b/docs/src/pages/components/skeleton/Facebook.js
@@ -30,7 +30,7 @@ function Media(props) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton variant="circle" width={40} height={40} />
+            <Skeleton animation="wave" variant="circle" width={40} height={40} />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -45,11 +45,17 @@ function Media(props) {
             </IconButton>
           )
         }
-        title={loading ? <Skeleton height={10} width="80%" style={{ marginBottom: 6 }} /> : 'Ted'}
-        subheader={loading ? <Skeleton height={10} width="40%" /> : '5 hours ago'}
+        title={
+          loading ? (
+            <Skeleton animation="wave" height={10} width="80%" style={{ marginBottom: 6 }} />
+          ) : (
+            'Ted'
+          )
+        }
+        subheader={loading ? <Skeleton animation="wave" height={10} width="40%" /> : '5 hours ago'}
       />
       {loading ? (
-        <Skeleton variant="rect" className={classes.media} />
+        <Skeleton animation="wave" variant="rect" className={classes.media} />
       ) : (
         <CardMedia
           className={classes.media}
@@ -61,8 +67,8 @@ function Media(props) {
       <CardContent>
         {loading ? (
           <React.Fragment>
-            <Skeleton height={10} style={{ marginBottom: 6 }} />
-            <Skeleton height={10} width="80%" />
+            <Skeleton animation="wave" height={10} style={{ marginBottom: 6 }} />
+            <Skeleton animation="wave" height={10} width="80%" />
           </React.Fragment>
         ) : (
           <Typography variant="body2" color="textSecondary" component="p">
diff --git a/docs/src/pages/components/skeleton/Facebook.tsx b/docs/src/pages/components/skeleton/Facebook.tsx
index 7f25f7b32e844f..a74a1d165d8fc8 100644
--- a/docs/src/pages/components/skeleton/Facebook.tsx
+++ b/docs/src/pages/components/skeleton/Facebook.tsx
@@ -35,7 +35,7 @@ function Media(props: MediaProps) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton variant="circle" width={40} height={40} />
+            <Skeleton animation="wave" variant="circle" width={40} height={40} />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -50,11 +50,17 @@ function Media(props: MediaProps) {
             </IconButton>
           )
         }
-        title={loading ? <Skeleton height={10} width="80%" style={{ marginBottom: 6 }} /> : 'Ted'}
-        subheader={loading ? <Skeleton height={10} width="40%" /> : '5 hours ago'}
+        title={
+          loading ? (
+            <Skeleton animation="wave" height={10} width="80%" style={{ marginBottom: 6 }} />
+          ) : (
+            'Ted'
+          )
+        }
+        subheader={loading ? <Skeleton animation="wave" height={10} width="40%" /> : '5 hours ago'}
       />
       {loading ? (
-        <Skeleton variant="rect" className={classes.media} />
+        <Skeleton animation="wave" variant="rect" className={classes.media} />
       ) : (
         <CardMedia
           className={classes.media}
@@ -65,8 +71,8 @@ function Media(props: MediaProps) {
       <CardContent>
         {loading ? (
           <React.Fragment>
-            <Skeleton height={10} style={{ marginBottom: 6 }} />
-            <Skeleton height={10} width="80%" />
+            <Skeleton animation="wave" height={10} style={{ marginBottom: 6 }} />
+            <Skeleton animation="wave" height={10} width="80%" />
           </React.Fragment>
         ) : (
           <Typography variant="body2" color="textSecondary" component="p">
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
index f78c597234e9eb..787a5d55b64eb1 100644
--- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
+++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
@@ -14,12 +14,10 @@ theme.typography.h3 = {
   },
 };
 
-export default function ResponsiveFontSizes() {
+export default function CustomResponsiveFontSizes() {
   return (
-    <div>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h3">Responsive h3</Typography>
-      </ThemeProvider>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Typography variant="h3">Responsive h3</Typography>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
index f78c597234e9eb..787a5d55b64eb1 100644
--- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
+++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
@@ -14,12 +14,10 @@ theme.typography.h3 = {
   },
 };
 
-export default function ResponsiveFontSizes() {
+export default function CustomResponsiveFontSizes() {
   return (
-    <div>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h3">Responsive h3</Typography>
-      </ThemeProvider>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Typography variant="h3">Responsive h3</Typography>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js
index af5ab349fa90fe..26a48739646398 100644
--- a/docs/src/pages/customization/typography/TypographyVariants.js
+++ b/docs/src/pages/customization/typography/TypographyVariants.js
@@ -19,12 +19,12 @@ const theme = createMuiTheme({
 
 export default function TypographyVariants() {
   return (
-    <ThemeProvider theme={theme}>
-      <div>
+    <div>
+      <ThemeProvider theme={theme}>
         <Typography variant="subtitle1">subtitle</Typography>
         <Typography>body1</Typography>
         <Button>Button</Button>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx
index af5ab349fa90fe..26a48739646398 100644
--- a/docs/src/pages/customization/typography/TypographyVariants.tsx
+++ b/docs/src/pages/customization/typography/TypographyVariants.tsx
@@ -19,12 +19,12 @@ const theme = createMuiTheme({
 
 export default function TypographyVariants() {
   return (
-    <ThemeProvider theme={theme}>
-      <div>
+    <div>
+      <ThemeProvider theme={theme}>
         <Typography variant="subtitle1">subtitle</Typography>
         <Typography>body1</Typography>
         <Button>Button</Button>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md
index 9194a61d6dd26a..2bd30a21f19812 100644
--- a/docs/src/pages/customization/typography/typography.md
+++ b/docs/src/pages/customization/typography/typography.md
@@ -56,7 +56,7 @@ const raleway = {
 Next, you need to change the theme to use this new font.
 In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
 
-```js
+```jsx
 const theme = createMuiTheme({
   typography: {
     fontFamily: 'Raleway, Arial',
@@ -71,10 +71,12 @@ const theme = createMuiTheme({
 });
 
 // ...
-<ThemeProvider theme={theme}>
-  <CssBaseline />
-  {children}
-</ThemeProvider>;
+return (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+);
 ```
 
 ## Font size
diff --git a/docs/src/pages/discover-more/languages/Languages.js b/docs/src/pages/discover-more/languages/Languages.js
index b88571dd77ac00..6d1db81b8416e0 100644
--- a/docs/src/pages/discover-more/languages/Languages.js
+++ b/docs/src/pages/discover-more/languages/Languages.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
 });
 
-function Languages() {
+export default function Languages() {
   const classes = useStyles();
 
   return (
@@ -44,5 +44,3 @@ function Languages() {
     </Paper>
   );
 }
-
-export default Languages;
diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md
index 24951ec3d97b9d..d36f9d6672ec78 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects.md
@@ -8,7 +8,7 @@ Feel free to submit a pull request to add another project; it will be accepted i
 
 ## Design resources
 
-- **Sketch**: [Material Theme Editor](https://material.io/resources/theme-editor/) for Material Design made by Google.
+- **Sketch**: [Sketch for Material-UI](https://themes.material-ui.com/themes/sketch-react/) — A large UI kit with over 1,500 handcrafted Material-UI's symbols 💎.
 - **Figma**:
   - https://material.5ly.co/ for Material-UI made by Fively Team.
   - https://ui-kit.co/ a starter kit for your Material Design 2 project.
diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js
index 0bd11c22524590..8662e1d5064ffa 100644
--- a/docs/src/pages/getting-started/templates/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js
@@ -33,8 +33,6 @@ const useStyles = makeStyles(theme => ({
     ul: {
       margin: 0,
       padding: 0,
-    },
-    li: {
       listStyle: 'none',
     },
   },
diff --git a/docs/src/pages/getting-started/usage/Usage.js b/docs/src/pages/getting-started/usage/Usage.js
index 5e7168a85dcec7..d8458e680d58cb 100644
--- a/docs/src/pages/getting-started/usage/Usage.js
+++ b/docs/src/pages/getting-started/usage/Usage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-function Usage() {
+export default function Usage() {
   return (
     <iframe
       title="codesandbox"
@@ -14,5 +14,3 @@ function Usage() {
     />
   );
 }
-
-export default Usage;
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
index ddd872708bce73..c7943bf6636039 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
@@ -49,7 +49,7 @@ const useStyles = makeStyles(theme => ({
   list: {
     margin: 0,
     listStyle: 'none',
-    paddingLeft: 0,
+    padding: 0,
   },
   listItem: {
     paddingTop: theme.spacing(0.5),
diff --git a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
index 314f4d2c3b6ca1..28aa82146e0a47 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/withRoot.js
@@ -3,7 +3,7 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import theme from './theme';
 
-function withRoot(Component) {
+export default function withRoot(Component) {
   function WithRoot(props) {
     return (
       <ThemeProvider theme={theme}>
@@ -16,5 +16,3 @@ function withRoot(Component) {
 
   return WithRoot;
 }
-
-export default withRoot;
diff --git a/docs/static/in-house/monday.jpg b/docs/static/in-house/monday.jpg
deleted file mode 100644
index 80b069be32c9dc..00000000000000
Binary files a/docs/static/in-house/monday.jpg and /dev/null differ
diff --git a/docs/static/in-house/sketch.png b/docs/static/in-house/sketch.png
new file mode 100644
index 00000000000000..dc7929f8f5917b
Binary files /dev/null and b/docs/static/in-house/sketch.png differ
diff --git a/docs/static/in-house/themes-2.jpg b/docs/static/in-house/themes-2.jpg
new file mode 100644
index 00000000000000..e45aa75c14a989
Binary files /dev/null and b/docs/static/in-house/themes-2.jpg differ
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index e1697d4cc31383..342c8edf031aac 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -677,7 +677,7 @@ Autocomplete.propTypes = {
    *
    * @param {object} event The event source of the callback.
    * @param {string} value The new value of the text input.
-   * @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`.
+   * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange: PropTypes.func,
   /**
diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js
index 56b0ecf513a299..bbadef73177756 100644
--- a/packages/material-ui-lab/src/Skeleton/Skeleton.js
+++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js
@@ -48,10 +48,11 @@ export const styles = theme => ({
     position: 'relative',
     overflow: 'hidden',
     '&::after': {
-      animation: '$wave 1.5s linear 0.5s infinite',
-      background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)',
+      animation: '$wave 1.6s linear 0.5s infinite',
+      background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent)',
       content: '""',
       position: 'absolute',
+      transform: 'translateX(-100%)', // Avoid flash during server-side hydration
       bottom: 0,
       left: 0,
       right: 0,
@@ -63,6 +64,10 @@ export const styles = theme => ({
     '0%': {
       transform: 'translateX(-100%)',
     },
+    '60%': {
+      // +0.5s of delay between each loop
+      transform: 'translateX(100%)',
+    },
     '100%': {
       transform: 'translateX(100%)',
     },
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
index fc2ff41adb1529..6eb2df4f872f9c 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
@@ -135,7 +135,7 @@ export interface UseAutocompleteCommonProps<T> {
    *
    * @param {object} event The event source of the callback.
    * @param {string} value The new value of the text input.
-   * @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`.
+   * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange?: (
     event: React.ChangeEvent<{}>,
diff --git a/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js b/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js
index ee3b93d846d763..372593cbf6e03f 100644
--- a/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js
+++ b/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js
@@ -3,7 +3,7 @@ import { SheetsRegistry } from 'jss';
 import StylesProvider from '../StylesProvider';
 import createGenerateClassName from '../createGenerateClassName';
 
-class ServerStyleSheets {
+export default class ServerStyleSheets {
   constructor(options = {}) {
     this.options = options;
   }
@@ -46,5 +46,3 @@ class ServerStyleSheets {
     );
   }
 }
-
-export default ServerStyleSheets;
diff --git a/packages/material-ui-styles/src/StylesProvider/StylesProvider.js b/packages/material-ui-styles/src/StylesProvider/StylesProvider.js
index 062ad3dd9783d6..7167f5b8128672 100644
--- a/packages/material-ui-styles/src/StylesProvider/StylesProvider.js
+++ b/packages/material-ui-styles/src/StylesProvider/StylesProvider.js
@@ -34,7 +34,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 let injectFirstNode;
 
-function StylesProvider(props) {
+export default function StylesProvider(props) {
   const { children, injectFirst = false, disableGeneration = false, ...localOptions } = props;
 
   const outerOptions = React.useContext(StylesContext);
@@ -133,5 +133,3 @@ StylesProvider.propTypes = {
 if (process.env.NODE_ENV !== 'production') {
   StylesProvider.propTypes = exactProp(StylesProvider.propTypes);
 }
-
-export default StylesProvider;
diff --git a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js
index e1200fc8a71e3a..b82a26db585c54 100644
--- a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js
+++ b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js
@@ -1,7 +1,7 @@
 import { deepmerge } from '@material-ui/utils';
 import noopTheme from './noopTheme';
 
-function getStylesCreator(stylesOrCreator) {
+export default function getStylesCreator(stylesOrCreator) {
   const themingEnabled = typeof stylesOrCreator === 'function';
 
   if (process.env.NODE_ENV !== 'production') {
@@ -63,5 +63,3 @@ function getStylesCreator(stylesOrCreator) {
     options: {},
   };
 }
-
-export default getStylesCreator;
diff --git a/packages/material-ui-styles/src/getThemeProps/getThemeProps.js b/packages/material-ui-styles/src/getThemeProps/getThemeProps.js
index 0a2756976cbee2..6f4b9da85173ae 100644
--- a/packages/material-ui-styles/src/getThemeProps/getThemeProps.js
+++ b/packages/material-ui-styles/src/getThemeProps/getThemeProps.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-syntax */
-function getThemeProps(params) {
+export default function getThemeProps(params) {
   const { theme, name, props } = params;
 
   if (!theme || !theme.props || !theme.props[name]) {
@@ -19,5 +19,3 @@ function getThemeProps(params) {
 
   return props;
 }
-
-export default getThemeProps;
diff --git a/packages/material-ui-styles/src/jssPreset/jssPreset.js b/packages/material-ui-styles/src/jssPreset/jssPreset.js
index 51866a798b2300..5bec5bc93f92ba 100644
--- a/packages/material-ui-styles/src/jssPreset/jssPreset.js
+++ b/packages/material-ui-styles/src/jssPreset/jssPreset.js
@@ -7,7 +7,7 @@ import vendorPrefixer from 'jss-plugin-vendor-prefixer';
 import propsSort from 'jss-plugin-props-sort';
 
 // Subset of jss-preset-default with only the plugins the Material-UI components are using.
-function jssPreset() {
+export default function jssPreset() {
   return {
     plugins: [
       functions(),
@@ -23,5 +23,3 @@ function jssPreset() {
     ],
   };
 }
-
-export default jssPreset;
diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js
index 2ed424f5c5938e..4885fe4d0ad13c 100644
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.js
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.js
@@ -182,7 +182,7 @@ function useSynchronousEffect(func, values) {
   );
 }
 
-function makeStyles(stylesOrCreator, options = {}) {
+export default function makeStyles(stylesOrCreator, options = {}) {
   const {
     // alias for classNamePrefix, if provided will listen to theme (required for theme.overrides)
     name,
@@ -239,5 +239,3 @@ function makeStyles(stylesOrCreator, options = {}) {
     return getClasses(instance.current, props.classes, Component);
   };
 }
-
-export default makeStyles;
diff --git a/packages/material-ui-styles/src/mergeClasses/mergeClasses.js b/packages/material-ui-styles/src/mergeClasses/mergeClasses.js
index 1dca3820b86292..3b2bdaa59d4151 100644
--- a/packages/material-ui-styles/src/mergeClasses/mergeClasses.js
+++ b/packages/material-ui-styles/src/mergeClasses/mergeClasses.js
@@ -1,6 +1,6 @@
 import { getDisplayName } from '@material-ui/utils';
 
-function mergeClasses(options = {}) {
+export default function mergeClasses(options = {}) {
   const { baseClasses, newClasses, Component } = options;
 
   if (!newClasses) {
@@ -53,5 +53,3 @@ function mergeClasses(options = {}) {
 
   return nextClasses;
 }
-
-export default mergeClasses;
diff --git a/packages/material-ui-styles/src/styled/styled.js b/packages/material-ui-styles/src/styled/styled.js
index 6717b8ac29560a..46794ab61dc8e3 100644
--- a/packages/material-ui-styles/src/styled/styled.js
+++ b/packages/material-ui-styles/src/styled/styled.js
@@ -19,7 +19,7 @@ function omit(input, fields) {
 
 // styled-components's API removes the mapping between components and styles.
 // Using components as a low-level styling construct can be simpler.
-function styled(Component) {
+export default function styled(Component) {
   const componentCreator = (style, options = {}) => {
     const { name, ...stylesOptions } = options;
 
@@ -147,5 +147,3 @@ function styled(Component) {
 
   return componentCreator;
 }
-
-export default styled;
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
index ca34dca3571c36..b546e487ae3cf6 100644
--- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -16,11 +16,10 @@ export const styles = {
     alignItems: 'center',
     padding: 0, // Reset
     margin: 0, // Reset
-  },
-  /* Styles applied to the li element. */
-  li: {
     listStyle: 'none',
   },
+  /* Styles applied to the li element. */
+  li: {},
   /* Styles applied to the separator element. */
   separator: {
     display: 'flex',
diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js
index e6d512b78d81bc..598b86938d4c12 100644
--- a/packages/material-ui/src/ButtonBase/TouchRipple.js
+++ b/packages/material-ui/src/ButtonBase/TouchRipple.js
@@ -279,12 +279,6 @@ const TouchRipple = React.forwardRef(function TouchRipple(props, ref) {
   );
 });
 
-// TODO cleanup after https://github.com/reactjs/react-docgen/pull/378 is released
-function withMuiName(Component) {
-  Component.muiName = 'MuiTouchRipple';
-  return Component;
-}
-
 TouchRipple.propTypes = {
   /**
    * If `true`, the ripple starts at the center of the component
@@ -302,6 +296,4 @@ TouchRipple.propTypes = {
   className: PropTypes.string,
 };
 
-export default withStyles(styles, { flip: false, name: 'MuiTouchRipple' })(
-  withMuiName(React.memo(TouchRipple)),
-);
+export default withStyles(styles, { flip: false, name: 'MuiTouchRipple' })(React.memo(TouchRipple));
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index 70118bf44c74cd..2e0f82e37cd2ae 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -167,7 +167,7 @@ export const styles = theme => {
         backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
       },
     },
-    // TODO remove in V5
+    // TODO v5: remove
     /* Styles applied to the `avatar` element. */
     avatar: {},
     /* Styles applied to the `avatar` element if `size="small"`. */
diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index e53cd9d0a7aae4..e25c14d82b4d54 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
       minHeight: 'auto',
     },
   },
-  // TODO To remove in v5?
+  // TODO v5: remove
   /* Styles applied to the root element if `disableGutters={false}`. */
   gutters: {},
   /* Styles applied to the root element if `selected={true}`. */
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 9f34e926d23a3d..3d3473c837bdff 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -159,7 +159,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `color="primary"`. */
   colorPrimary: {
-    // TODO v5, move the style here
+    // TODO v5: move the style here
   },
   /* Styles applied to the root element if `color="secondary"`. */
   colorSecondary: {
@@ -277,7 +277,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the thumb element if `color="primary"`. */
   thumbColorPrimary: {
-    // TODO v5, move the style here
+    // TODO v5: move the style here
   },
   /* Styles applied to the thumb element if `color="secondary"`. */
   thumbColorSecondary: {
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
index ff6fb32db97aee..c7e72cf40d949a 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -48,10 +48,9 @@ export const styles = theme => ({
     textAlign: 'right',
     textAlignLast: 'right', // Align <select> on Chrome.
   },
+  // TODO v5: remove
   /* Styles applied to the Select component `icon` class. */
-  selectIcon: {
-    top: 1,
-  },
+  selectIcon: {},
   /* Styles applied to the `InputBase` component. */
   input: {
     color: 'inherit',
diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
index e12ddbb77f69e6..bb3b6fe572692f 100644
--- a/packages/material-ui/src/styles/createTypography.js
+++ b/packages/material-ui/src/styles/createTypography.js
@@ -78,7 +78,7 @@ export default function createTypography(palette, typography) {
     {
       htmlFontSize,
       pxToRem,
-      round, // TODO To remove in v5?
+      round, // TODO v5: remove
       fontFamily,
       fontSize,
       fontWeightLight,
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.js
index eda8ec7b38b5c2..f68b0c676ed052 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQuery.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { getThemeProps, useTheme } from '@material-ui/styles';
 
-function useMediaQuery(queryInput, options = {}) {
+export default function useMediaQuery(queryInput, options = {}) {
   const theme = useTheme();
   const props = getThemeProps({
     theme,
@@ -80,5 +80,3 @@ function useMediaQuery(queryInput, options = {}) {
 
   return match;
 }
-
-export default useMediaQuery;
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
index e479e9f71a4e8c..dec8ac860a76cc 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
@@ -1,8 +1,6 @@
 import useMediaQuery from './useMediaQuery';
 
-// TODO to deprecate in v4.x and remove in v5
-function useMediaQueryTheme(...args) {
+// TODO v5: to deprecate in v4.x and remove in v5
+export default function useMediaQueryTheme(...args) {
   return useMediaQuery(...args);
 }
-
-export default useMediaQueryTheme;
diff --git a/packages/material-ui/src/utils/setRef.js b/packages/material-ui/src/utils/setRef.js
index 5f5e9a241bb5f9..e1ee0697d6a33b 100644
--- a/packages/material-ui/src/utils/setRef.js
+++ b/packages/material-ui/src/utils/setRef.js
@@ -1,4 +1,4 @@
-// TODO: Make it private only in v5
+// TODO v5: make it private
 export default function setRef(ref, value) {
   if (typeof ref === 'function') {
     ref(value);
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 53b23358fa7bed..5243b2a66c7fab 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -90,10 +90,10 @@ const blacklist = [
   'docs-components-snackbars/SimpleSnackbar.png', // Needs interaction
   'docs-components-snackbars/TransitionsSnackbar.png', // Needs interaction
   'docs-components-speed-dial', // Needs interaction
-  'docs-components-stepper/HorizontalNonLinearAlternativeLabelStepper.png', // Redundant
-  'docs-components-stepper/HorizontalNonLinearStepper.png', // Redundant
-  'docs-components-stepper/SwipeableTextMobileStepper.png', // Redundant
+  'docs-components-steppers/HorizontalNonLinearAlternativeLabelStepper.png', // Redundant
+  'docs-components-steppers/HorizontalNonLinearStepper.png', // Redundant
   'docs-components-steppers/SwipeableTextMobileStepper.png', // Flaky image loading
+  'docs-components-steppers/TextMobileStepper.png', // Flaky image loading
   'docs-components-textarea-autosize', // Superseded by a dedicated regression test
   'docs-components-tooltips', // Needs interaction
   'docs-components-transitions', // Needs interaction