diff --git a/.size-limit.js b/.size-limit.js
index 708a151876ef46..29cdc628dff629 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -16,13 +16,13 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '17.7 KB',
+    limit: '17.8 KB',
   },
   {
     name: 'The size of all the material-ui modules.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '93.4 KB',
+    limit: '92.8 KB',
   },
   {
     name: 'The main docs bundle',
diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md
index 81a9fcfc7a3a50..65a4b0b83738c1 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering.md
@@ -66,7 +66,7 @@ We then get the CSS from our `sheetsRegistry` using `sheetsRegistry.toString()`.
 
 ```jsx
 import ReactDOMServer from 'react-dom/server'
-import { SheetsRegistry } from 'react-jss/lib/jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,
diff --git a/docs/src/pages/premium-themes/PremiumThemes.js b/docs/src/pages/premium-themes/PremiumThemes.js
index 74c322c89dab23..09ea6897efd0da 100644
--- a/docs/src/pages/premium-themes/PremiumThemes.js
+++ b/docs/src/pages/premium-themes/PremiumThemes.js
@@ -63,11 +63,12 @@ function PremiumThemes(props) {
   return (
     <Grid container spacing={16}>
       {themes.map(theme => (
-        <Grid key={theme.name} item xs={12} sm={6}>
+        <Grid key={theme.name} item xs={12} md={6}>
           <Card className={classes.card}>
             <CardMedia
               component="a"
               href={theme.href}
+              rel="noopener nofollow"
               className={classes.media}
               image={theme.src}
               title={theme.name}
@@ -89,7 +90,13 @@ function PremiumThemes(props) {
               <Typography component="p">{theme.description}</Typography>
             </CardContent>
             <CardActions>
-              <Button component="a" href={theme.href} size="small" color="primary">
+              <Button
+                component="a"
+                rel="noopener nofollow"
+                href={theme.href}
+                size="small"
+                color="primary"
+              >
                 Learn More
               </Button>
             </CardActions>
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
index b07fe65665e650..f05807edeaecd1 100644
--- a/examples/ssr/server.js
+++ b/examples/ssr/server.js
@@ -1,7 +1,7 @@
 import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { SheetsRegistry } from 'react-jss/lib/jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,
diff --git a/packages/material-ui-benchmark/src/benchmark.js b/packages/material-ui-benchmark/src/benchmark.js
index 6632ae016d15fe..e1a42b76c24c8e 100644
--- a/packages/material-ui-benchmark/src/benchmark.js
+++ b/packages/material-ui-benchmark/src/benchmark.js
@@ -7,7 +7,7 @@ import ReactDOMServer from 'react-dom/server';
 import styledEmotion from 'react-emotion';
 import { renderStylesToString } from 'emotion-server';
 import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import ButtonBase from '@material-ui/core/ButtonBase/ButtonBase';
+import ButtonBase from '@material-ui/core/ButtonBase';
 
 const theme = createMuiTheme();
 
diff --git a/packages/material-ui-benchmark/src/server.js b/packages/material-ui-benchmark/src/server.js
index 4da58137c3942c..948610d6553869 100644
--- a/packages/material-ui-benchmark/src/server.js
+++ b/packages/material-ui-benchmark/src/server.js
@@ -3,7 +3,7 @@
 import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { SheetsRegistry } from 'react-jss/lib/jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import {
   MuiThemeProvider,
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 043c37c50f4e57..594f7b2e1bc62b 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -35,12 +35,12 @@ export const styles = {
 };
 
 class GridListTile extends React.Component {
-  handleResize = debounce(() => {
-    this.fit();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     this.ensureImageCover();
+
+    this.handleResize = debounce(() => {
+      this.fit();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate() {
diff --git a/packages/material-ui/src/InputBase/Textarea.js b/packages/material-ui/src/InputBase/Textarea.js
index 1a0e6758a2a2b7..77a1280438f9cb 100644
--- a/packages/material-ui/src/InputBase/Textarea.js
+++ b/packages/material-ui/src/InputBase/Textarea.js
@@ -43,10 +43,6 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
-  handleResize = debounce(() => {
-    this.syncHeightWithShadow();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   constructor(props) {
     super();
     this.isControlled = props.value != null;
@@ -60,6 +56,10 @@ class Textarea extends React.Component {
 
   componentDidMount() {
     this.syncHeightWithShadow();
+
+    this.handleResize = debounce(() => {
+      this.syncHeightWithShadow();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate() {
diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index b3e606c223449c..52f5d0ea4c4735 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -87,16 +87,15 @@ class Popover extends React.Component {
 
   handleGetOffsetLeft = getOffsetLeft;
 
-  handleResize = debounce(() => {
-    this.setPositioningStyles(this.paperRef);
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     if (this.props.action) {
       this.props.action({
         updatePosition: this.handleResize,
       });
     }
+    this.handleResize = debounce(() => {
+      this.setPositioningStyles(this.paperRef);
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentWillUnmount = () => {
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index f0fb895464fb65..3cfa5575a0ad55 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -75,17 +75,6 @@ export function setTranslateValue(props, node) {
 class Slide extends React.Component {
   mounted = false;
 
-  handleResize = debounce(() => {
-    // Skip configuration where the position is screen size invariant.
-    if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
-      return;
-    }
-
-    if (this.transitionRef) {
-      setTranslateValue(this.props, this.transitionRef);
-    }
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     this.mounted = true;
 
@@ -96,6 +85,17 @@ class Slide extends React.Component {
       // otherwise component will be shown when in=false.
       this.updatePosition();
     }
+
+    this.handleResize = debounce(() => {
+      // Skip configuration where the position is screen size invariant.
+      if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
+        return;
+      }
+
+      if (this.transitionRef) {
+        setTranslateValue(this.props, this.transitionRef);
+      }
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate(prevProps) {
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
index f0cb64ec6447ad..b24a951c3539b4 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -18,23 +18,23 @@ const styles = {
  * It has been moved into the core in order to minimize the bundle size.
  */
 class ScrollbarSize extends React.Component {
-  handleResize = debounce(() => {
-    const { onChange } = this.props;
-
-    const prevHeight = this.scrollbarHeight;
-    const prevWidth = this.scrollbarWidth;
-    this.setMeasurements();
-    if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
-      onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
-    }
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   componentDidMount() {
     this.setMeasurements();
     this.props.onLoad({
       scrollbarHeight: this.scrollbarHeight,
       scrollbarWidth: this.scrollbarWidth,
     });
+
+    this.handleResize = debounce(() => {
+      const { onChange } = this.props;
+
+      const prevHeight = this.scrollbarHeight;
+      const prevWidth = this.scrollbarWidth;
+      this.setMeasurements();
+      if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
+        onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
+      }
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentWillUnmount() {
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index a329fcf79ee8cf..ce11f76fa66173 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -59,15 +59,6 @@ export const styles = theme => ({
 class Tabs extends React.Component {
   valueToIndex = new Map();
 
-  handleResize = debounce(() => {
-    this.updateIndicatorState(this.props);
-    this.updateScrollButtonState();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
-  handleTabsScroll = debounce(() => {
-    this.updateScrollButtonState();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
-
   state = {
     indicatorStyle: {},
     scrollerStyle: {
@@ -89,6 +80,15 @@ class Tabs extends React.Component {
         updateIndicator: this.handleResize,
       });
     }
+
+    this.handleResize = debounce(() => {
+      this.updateIndicatorState(this.props);
+      this.updateScrollButtonState();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
+
+    this.handleTabsScroll = debounce(() => {
+      this.updateScrollButtonState();
+    }, 166); // Corresponds to 10 frames at 60 Hz.
   }
 
   componentDidUpdate(prevProps, prevState) {
diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
index 6a0f1680438ece..dc0445b3d07653 100644
--- a/packages/material-ui/src/styles/createTypography.js
+++ b/packages/material-ui/src/styles/createTypography.js
@@ -27,13 +27,15 @@ export default function createTypography(palette, typography) {
     htmlFontSize = 16,
     // eslint-disable-next-line no-underscore-dangle
     useNextVariants = Boolean(global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__),
+    // Private option to prevent noise in the console from the default theme.
+    suppressWarning = false,
     // Apply the CSS properties to all the variants.
     allVariants,
     ...other
   } = typeof typography === 'function' ? typography(palette) : typography;
 
   warning(
-    useNextVariants,
+    useNextVariants || suppressWarning,
     'Material-UI: you are using the deprecated typography variants ' +
       'that will be removed in the next major release.' +
       '\nPlease read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2',
diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js
index 7d12d08ea6fcb4..cb6d25919c3b51 100644
--- a/packages/material-ui/src/styles/withStyles.js
+++ b/packages/material-ui/src/styles/withStyles.js
@@ -48,7 +48,11 @@ function getDefaultTheme() {
     return defaultTheme;
   }
 
-  defaultTheme = createMuiTheme();
+  defaultTheme = createMuiTheme({
+    typography: {
+      suppressWarning: true,
+    },
+  });
   return defaultTheme;
 }
 
diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js
index be7d99d7471c6c..38d5779f3864de 100644
--- a/packages/material-ui/src/withWidth/withWidth.js
+++ b/packages/material-ui/src/withWidth/withWidth.js
@@ -35,15 +35,6 @@ const withWidth = (options = {}) => Component => {
   } = options;
 
   class WithWidth extends React.Component {
-    handleResize = debounce(() => {
-      const width = this.getWidth();
-      if (width !== this.state.width) {
-        this.setState({
-          width,
-        });
-      }
-    }, resizeInterval);
-
     constructor(props) {
       super(props);
 
@@ -59,6 +50,15 @@ const withWidth = (options = {}) => Component => {
           width,
         });
       }
+
+      this.handleResize = debounce(() => {
+        const width = this.getWidth();
+        if (width !== this.state.width) {
+          this.setState({
+            width,
+          });
+        }
+      }, resizeInterval);
     }
 
     componentWillUnmount() {