diff --git a/docs/pages/components/integrated-autocomplete.js b/docs/pages/components/integrated-autocomplete.js
deleted file mode 100644
index de2110603730a9..00000000000000
--- a/docs/pages/components/integrated-autocomplete.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-
-const req = require.context(
-  'docs/src/pages/components/integrated-autocomplete',
-  false,
-  /\.(md|js|tsx)$/,
-);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/integrated-autocomplete',
-  false,
-  /\.(js|tsx)$/,
-);
-const reqPrefix = 'pages/components/integrated-autocomplete';
-
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
-}
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 63f826051f0a69..b358e76ff797a0 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -56,20 +56,33 @@ const styles = theme => ({
     margin: 'auto',
     display: 'flex',
     justifyContent: 'center',
+    [theme.breakpoints.up('sm')]: {
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+  /* Isolate the demo with an outline. */
+  demoBgOutlined: {
+    padding: theme.spacing(3),
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    padding: theme.spacing(3),
     [theme.breakpoints.up('sm')]: {
-      borderRadius: theme.shape.borderRadius,
       borderLeftWidth: 1,
       borderRightWidth: 1,
     },
   },
-  demoBg: {
-    border: 'none',
+  /* Prepare the background to display an inner elevation. */
+  demoBgTrue: {
+    padding: theme.spacing(3),
     backgroundColor: theme.palette.background.level2,
   },
+  /* Make no difference between the demo and the markdown. */
+  demoBgInline: {
+    // Maintain alignment with the markdown text
+    [theme.breakpoints.down('xs')]: {
+      padding: theme.spacing(3),
+    },
+  },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -250,6 +263,10 @@ function Demo(props) {
     [demoOptions.height, demoOptions.maxWidth],
   );
 
+  if (demoOptions.bg == null) {
+    demoOptions.bg = 'outlined';
+  }
+
   if (demoOptions.iframe) {
     demoOptions.bg = true;
   }
@@ -298,7 +315,9 @@ function Demo(props) {
       <div
         className={clsx(classes.demo, {
           [classes.demoHiddenHeader]: demoOptions.hideHeader,
-          [classes.demoBg]: demoOptions.bg,
+          [classes.demoBgOutlined]: demoOptions.bg === 'outlined',
+          [classes.demoBgTrue]: demoOptions.bg === true,
+          [classes.demoBgInline]: demoOptions.bg === 'inline',
         })}
         tabIndex={-1}
         onMouseEnter={handleDemoHover}
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 7307a1d52bf570..dfd146dd61f0d5 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -213,6 +213,8 @@ const styles = theme => ({
       },
     },
     '& table': {
+      // Trade display table for scroll overflow
+      display: 'block',
       width: '100%',
       overflowX: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
diff --git a/docs/src/pages.js b/docs/src/pages.js
index 03d0b7dc2d2322..0100c8c2cdb7b8 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -42,7 +42,6 @@ const pages = [
           { pathname: '/components/switches' },
           { pathname: '/components/text-fields' },
           { pathname: '/components/transfer-list' },
-          { pathname: '/components/integrated-autocomplete' },
         ],
       },
       {
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js
index 1ef5d1156428ec..23b342b0a93786 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.js
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.js
@@ -89,7 +89,7 @@ export default function GoogleMaps() {
     <Autocomplete
       id="google-map-demo"
       style={{ width: 300 }}
-      getOptionLabel={option => option.description}
+      getOptionLabel={option => (typeof option === 'string' ? option : option.description)}
       filterOptions={x => x}
       options={options}
       autoComplete
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
index 96593ab0e23fd1..69c3afeeceec84 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
@@ -101,7 +101,7 @@ export default function GoogleMaps() {
     <Autocomplete
       id="google-map-demo"
       style={{ width: 300 }}
-      getOptionLabel={option => option.description}
+      getOptionLabel={option => (typeof option === 'string' ? option : option.description)}
       filterOptions={x => x}
       options={options}
       autoComplete
diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js b/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js
deleted file mode 100644
index 577f5afd089b30..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import React from 'react';
-import deburr from 'lodash/deburr';
-import Autosuggest from 'react-autosuggest';
-import match from 'autosuggest-highlight/match';
-import parse from 'autosuggest-highlight/parse';
-import TextField from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
-import MenuItem from '@material-ui/core/MenuItem';
-import Popper from '@material-ui/core/Popper';
-import { makeStyles } from '@material-ui/core/styles';
-
-const suggestions = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-];
-
-function renderInputComponent(inputProps) {
-  const { classes, inputRef = () => {}, ref, ...other } = inputProps;
-
-  return (
-    <TextField
-      fullWidth
-      InputProps={{
-        inputRef: node => {
-          ref(node);
-          inputRef(node);
-        },
-        classes: {
-          input: classes.input,
-        },
-      }}
-      {...other}
-    />
-  );
-}
-
-function renderSuggestion(suggestion, { query, isHighlighted }) {
-  const matches = match(suggestion.label, query);
-  const parts = parse(suggestion.label, matches);
-
-  return (
-    <MenuItem selected={isHighlighted} component="div">
-      <div>
-        {parts.map(part => (
-          <span key={part.text} style={{ fontWeight: part.highlight ? 500 : 400 }}>
-            {part.text}
-          </span>
-        ))}
-      </div>
-    </MenuItem>
-  );
-}
-
-function getSuggestions(value) {
-  const inputValue = deburr(value.trim()).toLowerCase();
-  const inputLength = inputValue.length;
-  let count = 0;
-
-  return inputLength === 0
-    ? []
-    : suggestions.filter(suggestion => {
-        const keep =
-          count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
-
-        if (keep) {
-          count += 1;
-        }
-
-        return keep;
-      });
-}
-
-function getSuggestionValue(suggestion) {
-  return suggestion.label;
-}
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    height: 250,
-    flexGrow: 1,
-  },
-  container: {
-    position: 'relative',
-  },
-  suggestionsContainerOpen: {
-    position: 'absolute',
-    zIndex: 1,
-    marginTop: theme.spacing(1),
-    left: 0,
-    right: 0,
-  },
-  suggestion: {
-    display: 'block',
-  },
-  suggestionsList: {
-    margin: 0,
-    padding: 0,
-    listStyleType: 'none',
-  },
-  divider: {
-    height: theme.spacing(2),
-  },
-}));
-
-export default function IntegrationAutosuggest() {
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [state, setState] = React.useState({
-    single: '',
-    popper: '',
-  });
-
-  const [stateSuggestions, setSuggestions] = React.useState([]);
-
-  const handleSuggestionsFetchRequested = ({ value }) => {
-    setSuggestions(getSuggestions(value));
-  };
-
-  const handleSuggestionsClearRequested = () => {
-    setSuggestions([]);
-  };
-
-  const handleChange = name => (event, { newValue }) => {
-    setState({
-      ...state,
-      [name]: newValue,
-    });
-  };
-
-  const autosuggestProps = {
-    renderInputComponent,
-    suggestions: stateSuggestions,
-    onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
-    onSuggestionsClearRequested: handleSuggestionsClearRequested,
-    getSuggestionValue,
-    renderSuggestion,
-  };
-
-  return (
-    <div className={classes.root}>
-      <Autosuggest
-        {...autosuggestProps}
-        inputProps={{
-          classes,
-          id: 'react-autosuggest-simple',
-          label: 'Country',
-          placeholder: 'Search a country (start with a)',
-          value: state.single,
-          onChange: handleChange('single'),
-        }}
-        theme={{
-          container: classes.container,
-          suggestionsContainerOpen: classes.suggestionsContainerOpen,
-          suggestionsList: classes.suggestionsList,
-          suggestion: classes.suggestion,
-        }}
-        renderSuggestionsContainer={options => (
-          <Paper {...options.containerProps} square>
-            {options.children}
-          </Paper>
-        )}
-      />
-      <div className={classes.divider} />
-      <Autosuggest
-        {...autosuggestProps}
-        inputProps={{
-          classes,
-          id: 'react-autosuggest-popper',
-          label: 'Country',
-          placeholder: 'With Popper',
-          value: state.popper,
-          onChange: handleChange('popper'),
-          inputRef: node => {
-            setAnchorEl(node);
-          },
-          InputLabelProps: {
-            shrink: true,
-          },
-        }}
-        theme={{
-          suggestionsList: classes.suggestionsList,
-          suggestion: classes.suggestion,
-        }}
-        renderSuggestionsContainer={options => (
-          <Popper anchorEl={anchorEl} open={Boolean(options.children)}>
-            <Paper
-              square
-              {...options.containerProps}
-              style={{ width: anchorEl ? anchorEl.clientWidth : undefined }}
-            >
-              {options.children}
-            </Paper>
-          </Popper>
-        )}
-      />
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx b/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx
deleted file mode 100644
index d945bb4b9ab42b..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import React from 'react';
-import deburr from 'lodash/deburr';
-import Autosuggest from 'react-autosuggest';
-import match from 'autosuggest-highlight/match';
-import parse from 'autosuggest-highlight/parse';
-import TextField from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
-import MenuItem from '@material-ui/core/MenuItem';
-import Popper from '@material-ui/core/Popper';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-
-interface OptionType {
-  label: string;
-}
-
-const suggestions: OptionType[] = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-];
-
-function renderInputComponent(inputProps: any) {
-  const { classes, inputRef = () => {}, ref, ...other } = inputProps;
-
-  return (
-    <TextField
-      fullWidth
-      InputProps={{
-        inputRef: node => {
-          ref(node);
-          inputRef(node);
-        },
-        classes: {
-          input: classes.input,
-        },
-      }}
-      {...other}
-    />
-  );
-}
-
-function renderSuggestion(
-  suggestion: OptionType,
-  { query, isHighlighted }: Autosuggest.RenderSuggestionParams,
-) {
-  const matches = match(suggestion.label, query);
-  const parts = parse(suggestion.label, matches);
-
-  return (
-    <MenuItem selected={isHighlighted} component="div">
-      <div>
-        {parts.map(part => (
-          <span key={part.text} style={{ fontWeight: part.highlight ? 500 : 400 }}>
-            {part.text}
-          </span>
-        ))}
-      </div>
-    </MenuItem>
-  );
-}
-
-function getSuggestions(value: string) {
-  const inputValue = deburr(value.trim()).toLowerCase();
-  const inputLength = inputValue.length;
-  let count = 0;
-
-  return inputLength === 0
-    ? []
-    : suggestions.filter(suggestion => {
-        const keep =
-          count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
-
-        if (keep) {
-          count += 1;
-        }
-
-        return keep;
-      });
-}
-
-function getSuggestionValue(suggestion: OptionType) {
-  return suggestion.label;
-}
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 250,
-      flexGrow: 1,
-    },
-    container: {
-      position: 'relative',
-    },
-    suggestionsContainerOpen: {
-      position: 'absolute',
-      zIndex: 1,
-      marginTop: theme.spacing(1),
-      left: 0,
-      right: 0,
-    },
-    suggestion: {
-      display: 'block',
-    },
-    suggestionsList: {
-      margin: 0,
-      padding: 0,
-      listStyleType: 'none',
-    },
-    divider: {
-      height: theme.spacing(2),
-    },
-  }),
-);
-
-export default function IntegrationAutosuggest() {
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [state, setState] = React.useState({
-    single: '',
-    popper: '',
-  });
-  const [stateSuggestions, setSuggestions] = React.useState<OptionType[]>([]);
-
-  const handleSuggestionsFetchRequested = ({ value }: any) => {
-    setSuggestions(getSuggestions(value));
-  };
-
-  const handleSuggestionsClearRequested = () => {
-    setSuggestions([]);
-  };
-
-  const handleChange = (name: keyof typeof state) => (
-    event: React.ChangeEvent<{}>,
-    { newValue }: Autosuggest.ChangeEvent,
-  ) => {
-    setState({
-      ...state,
-      [name]: newValue,
-    });
-  };
-
-  const autosuggestProps = {
-    renderInputComponent,
-    suggestions: stateSuggestions,
-    onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
-    onSuggestionsClearRequested: handleSuggestionsClearRequested,
-    getSuggestionValue,
-    renderSuggestion,
-  };
-
-  return (
-    <div className={classes.root}>
-      <Autosuggest
-        {...autosuggestProps}
-        inputProps={{
-          classes,
-          id: 'react-autosuggest-simple',
-          label: 'Country',
-          placeholder: 'Search a country (start with a)',
-          value: state.single,
-          onChange: handleChange('single'),
-        }}
-        theme={{
-          container: classes.container,
-          suggestionsContainerOpen: classes.suggestionsContainerOpen,
-          suggestionsList: classes.suggestionsList,
-          suggestion: classes.suggestion,
-        }}
-        renderSuggestionsContainer={options => (
-          <Paper {...options.containerProps} square>
-            {options.children}
-          </Paper>
-        )}
-      />
-      <div className={classes.divider} />
-      <Autosuggest
-        {...autosuggestProps}
-        inputProps={{
-          classes,
-          id: 'react-autosuggest-popper',
-          label: 'Country',
-          placeholder: 'With Popper',
-          value: state.popper,
-          onChange: handleChange('popper'),
-          inputRef: (node: HTMLInputElement | null) => {
-            setAnchorEl(node);
-          },
-          InputLabelProps: {
-            shrink: true,
-          },
-        }}
-        theme={{
-          suggestionsList: classes.suggestionsList,
-          suggestion: classes.suggestion,
-        }}
-        renderSuggestionsContainer={options => (
-          <Popper anchorEl={anchorEl} open={Boolean(options.children)}>
-            <Paper
-              square
-              {...options.containerProps}
-              style={{ width: anchorEl ? anchorEl.clientWidth : undefined }}
-            >
-              {options.children}
-            </Paper>
-          </Popper>
-        )}
-      />
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js b/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js
deleted file mode 100644
index 3b41a7bf3115ab..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js
+++ /dev/null
@@ -1,419 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import deburr from 'lodash/deburr';
-import Downshift from 'downshift';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import Popper from '@material-ui/core/Popper';
-import Paper from '@material-ui/core/Paper';
-import MenuItem from '@material-ui/core/MenuItem';
-import Chip from '@material-ui/core/Chip';
-
-const suggestions = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-];
-
-function renderInput(inputProps) {
-  const { InputProps, classes, ref, ...other } = inputProps;
-
-  return (
-    <TextField
-      InputProps={{
-        inputRef: ref,
-        classes: {
-          root: classes.inputRoot,
-          input: classes.inputInput,
-        },
-        ...InputProps,
-      }}
-      {...other}
-    />
-  );
-}
-
-renderInput.propTypes = {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  InputProps: PropTypes.object,
-};
-
-function renderSuggestion(suggestionProps) {
-  const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
-  const isHighlighted = highlightedIndex === index;
-  const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1;
-
-  return (
-    <MenuItem
-      {...itemProps}
-      key={suggestion.label}
-      selected={isHighlighted}
-      component="div"
-      style={{
-        fontWeight: isSelected ? 500 : 400,
-      }}
-    >
-      {suggestion.label}
-    </MenuItem>
-  );
-}
-
-renderSuggestion.propTypes = {
-  highlightedIndex: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number]).isRequired,
-  index: PropTypes.number.isRequired,
-  itemProps: PropTypes.object.isRequired,
-  selectedItem: PropTypes.string.isRequired,
-  suggestion: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-function getSuggestions(value, { showEmpty = false } = {}) {
-  const inputValue = deburr(value.trim()).toLowerCase();
-  const inputLength = inputValue.length;
-  let count = 0;
-
-  return inputLength === 0 && !showEmpty
-    ? []
-    : suggestions.filter(suggestion => {
-        const keep =
-          count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
-
-        if (keep) {
-          count += 1;
-        }
-
-        return keep;
-      });
-}
-
-function DownshiftMultiple(props) {
-  const { classes } = props;
-  const [inputValue, setInputValue] = React.useState('');
-  const [selectedItem, setSelectedItem] = React.useState([]);
-
-  const handleKeyDown = event => {
-    if (selectedItem.length && !inputValue.length && event.key === 'Backspace') {
-      setSelectedItem(selectedItem.slice(0, selectedItem.length - 1));
-    }
-  };
-
-  const handleInputChange = event => {
-    setInputValue(event.target.value);
-  };
-
-  const handleChange = item => {
-    let newSelectedItem = [...selectedItem];
-    if (newSelectedItem.indexOf(item) === -1) {
-      newSelectedItem = [...newSelectedItem, item];
-    }
-    setInputValue('');
-    setSelectedItem(newSelectedItem);
-  };
-
-  const handleDelete = item => () => {
-    const newSelectedItem = [...selectedItem];
-    newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
-    setSelectedItem(newSelectedItem);
-  };
-
-  return (
-    <Downshift
-      id="downshift-multiple"
-      inputValue={inputValue}
-      onChange={handleChange}
-      selectedItem={selectedItem}
-    >
-      {({
-        getInputProps,
-        getItemProps,
-        getLabelProps,
-        isOpen,
-        inputValue: inputValue2,
-        selectedItem: selectedItem2,
-        highlightedIndex,
-      }) => {
-        const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
-          onKeyDown: handleKeyDown,
-          placeholder: 'Select multiple countries',
-        });
-
-        return (
-          <div className={classes.container}>
-            {renderInput({
-              fullWidth: true,
-              classes,
-              label: 'Countries',
-              InputLabelProps: getLabelProps(),
-              InputProps: {
-                startAdornment: selectedItem.map(item => (
-                  <Chip
-                    key={item}
-                    tabIndex={-1}
-                    label={item}
-                    className={classes.chip}
-                    onDelete={handleDelete(item)}
-                  />
-                )),
-                onBlur,
-                onChange: event => {
-                  handleInputChange(event);
-                  onChange(event);
-                },
-                onFocus,
-              },
-              inputProps,
-            })}
-
-            {isOpen ? (
-              <Paper className={classes.paper} square>
-                {getSuggestions(inputValue2).map((suggestion, index) =>
-                  renderSuggestion({
-                    suggestion,
-                    index,
-                    itemProps: getItemProps({ item: suggestion.label }),
-                    highlightedIndex,
-                    selectedItem: selectedItem2,
-                  }),
-                )}
-              </Paper>
-            ) : null}
-          </div>
-        );
-      }}
-    </Downshift>
-  );
-}
-
-DownshiftMultiple.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    flexGrow: 1,
-    height: 250,
-  },
-  container: {
-    flexGrow: 1,
-    position: 'relative',
-  },
-  paper: {
-    position: 'absolute',
-    zIndex: 1,
-    marginTop: theme.spacing(1),
-    left: 0,
-    right: 0,
-  },
-  chip: {
-    margin: theme.spacing(0.5, 0.25),
-  },
-  inputRoot: {
-    flexWrap: 'wrap',
-  },
-  inputInput: {
-    width: 'auto',
-    flexGrow: 1,
-  },
-  divider: {
-    height: theme.spacing(2),
-  },
-}));
-
-let popperNode;
-
-export default function IntegrationDownshift() {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <Downshift id="downshift-simple">
-        {({
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          highlightedIndex,
-          inputValue,
-          isOpen,
-          selectedItem,
-        }) => {
-          const { onBlur, onFocus, ...inputProps } = getInputProps({
-            placeholder: 'Search for a country (start with a)',
-          });
-
-          return (
-            <div className={classes.container}>
-              {renderInput({
-                fullWidth: true,
-                classes,
-                label: 'Country',
-                InputLabelProps: getLabelProps({ shrink: true }),
-                InputProps: { onBlur, onFocus },
-                inputProps,
-              })}
-
-              <div {...getMenuProps()}>
-                {isOpen ? (
-                  <Paper className={classes.paper} square>
-                    {getSuggestions(inputValue).map((suggestion, index) =>
-                      renderSuggestion({
-                        suggestion,
-                        index,
-                        itemProps: getItemProps({ item: suggestion.label }),
-                        highlightedIndex,
-                        selectedItem,
-                      }),
-                    )}
-                  </Paper>
-                ) : null}
-              </div>
-            </div>
-          );
-        }}
-      </Downshift>
-      <div className={classes.divider} />
-      <DownshiftMultiple classes={classes} />
-      <div className={classes.divider} />
-      <Downshift id="downshift-popper">
-        {({
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          highlightedIndex,
-          inputValue,
-          isOpen,
-          selectedItem,
-        }) => {
-          const { onBlur, onFocus, ...inputProps } = getInputProps({
-            placeholder: 'With Popper',
-          });
-
-          return (
-            <div className={classes.container}>
-              {renderInput({
-                fullWidth: true,
-                classes,
-                label: 'Country',
-                InputProps: { onBlur, onFocus },
-                InputLabelProps: getLabelProps({ shrink: true }),
-                inputProps,
-                ref: node => {
-                  popperNode = node;
-                },
-              })}
-
-              <Popper open={isOpen} anchorEl={popperNode}>
-                <div {...(isOpen ? getMenuProps({}, { suppressRefError: true }) : {})}>
-                  <Paper
-                    square
-                    style={{ marginTop: 8, width: popperNode ? popperNode.clientWidth : undefined }}
-                  >
-                    {getSuggestions(inputValue).map((suggestion, index) =>
-                      renderSuggestion({
-                        suggestion,
-                        index,
-                        itemProps: getItemProps({ item: suggestion.label }),
-                        highlightedIndex,
-                        selectedItem,
-                      }),
-                    )}
-                  </Paper>
-                </div>
-              </Popper>
-            </div>
-          );
-        }}
-      </Downshift>
-      <div className={classes.divider} />
-      <Downshift id="downshift-options">
-        {({
-          clearSelection,
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          highlightedIndex,
-          inputValue,
-          isOpen,
-          openMenu,
-          selectedItem,
-        }) => {
-          const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
-            onChange: event => {
-              if (event.target.value === '') {
-                clearSelection();
-              }
-            },
-            onFocus: openMenu,
-            placeholder: 'With the clear & show empty options',
-          });
-
-          return (
-            <div className={classes.container}>
-              {renderInput({
-                fullWidth: true,
-                classes,
-                label: 'Countries',
-                InputLabelProps: getLabelProps({ shrink: true }),
-                InputProps: { onBlur, onChange, onFocus },
-                inputProps,
-              })}
-
-              <div {...getMenuProps()}>
-                {isOpen ? (
-                  <Paper className={classes.paper} square>
-                    {getSuggestions(inputValue, { showEmpty: true }).map((suggestion, index) =>
-                      renderSuggestion({
-                        suggestion,
-                        index,
-                        itemProps: getItemProps({ item: suggestion.label }),
-                        highlightedIndex,
-                        selectedItem,
-                      }),
-                    )}
-                  </Paper>
-                ) : null}
-              </div>
-            </div>
-          );
-        }}
-      </Downshift>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx b/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx
deleted file mode 100644
index 4ae1d79601e199..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx
+++ /dev/null
@@ -1,414 +0,0 @@
-import React from 'react';
-import deburr from 'lodash/deburr';
-import Downshift from 'downshift';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import TextField, { TextFieldProps } from '@material-ui/core/TextField';
-import Popper from '@material-ui/core/Popper';
-import Paper from '@material-ui/core/Paper';
-import MenuItem, { MenuItemProps } from '@material-ui/core/MenuItem';
-import Chip from '@material-ui/core/Chip';
-
-interface Suggestion {
-  label: string;
-}
-
-const suggestions: Suggestion[] = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-];
-
-type RenderInputProps = TextFieldProps & {
-  classes: ReturnType<typeof useStyles>;
-  ref?: React.Ref<HTMLDivElement>;
-};
-
-function renderInput(inputProps: RenderInputProps) {
-  const { InputProps, classes, ref, ...other } = inputProps;
-
-  return (
-    <TextField
-      InputProps={{
-        inputRef: ref,
-        classes: {
-          root: classes.inputRoot,
-          input: classes.inputInput,
-        },
-        ...InputProps,
-      }}
-      {...other}
-    />
-  );
-}
-
-interface RenderSuggestionProps {
-  highlightedIndex: number | null;
-  index: number;
-  itemProps: MenuItemProps<'div', { button?: never }>;
-  selectedItem: Suggestion['label'];
-  suggestion: Suggestion;
-}
-
-function renderSuggestion(suggestionProps: RenderSuggestionProps) {
-  const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
-  const isHighlighted = highlightedIndex === index;
-  const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1;
-
-  return (
-    <MenuItem
-      {...itemProps}
-      key={suggestion.label}
-      selected={isHighlighted}
-      component="div"
-      style={{
-        fontWeight: isSelected ? 500 : 400,
-      }}
-    >
-      {suggestion.label}
-    </MenuItem>
-  );
-}
-
-function getSuggestions(value: string, { showEmpty = false } = {}) {
-  const inputValue = deburr(value.trim()).toLowerCase();
-  const inputLength = inputValue.length;
-  let count = 0;
-
-  return inputLength === 0 && !showEmpty
-    ? []
-    : suggestions.filter(suggestion => {
-        const keep =
-          count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
-
-        if (keep) {
-          count += 1;
-        }
-
-        return keep;
-      });
-}
-
-interface DownshiftMultipleProps {
-  classes: ReturnType<typeof useStyles>;
-}
-
-function DownshiftMultiple(props: DownshiftMultipleProps) {
-  const { classes } = props;
-  const [inputValue, setInputValue] = React.useState('');
-  const [selectedItem, setSelectedItem] = React.useState<Array<Suggestion['label']>>([]);
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (selectedItem.length && !inputValue.length && event.key === 'Backspace') {
-      setSelectedItem(selectedItem.slice(0, selectedItem.length - 1));
-    }
-  };
-
-  const handleInputChange = (event: React.ChangeEvent<{ value: string }>) => {
-    setInputValue(event.target.value);
-  };
-
-  const handleChange = (item: Suggestion['label']) => {
-    let newSelectedItem = [...selectedItem];
-    if (newSelectedItem.indexOf(item) === -1) {
-      newSelectedItem = [...newSelectedItem, item];
-    }
-    setInputValue('');
-    setSelectedItem(newSelectedItem);
-  };
-
-  const handleDelete = (item: string) => () => {
-    const newSelectedItem = [...selectedItem];
-    newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
-    setSelectedItem(newSelectedItem);
-  };
-
-  return (
-    <Downshift
-      id="downshift-multiple"
-      inputValue={inputValue}
-      onChange={handleChange}
-      selectedItem={selectedItem}
-    >
-      {({
-        getInputProps,
-        getItemProps,
-        getLabelProps,
-        isOpen,
-        inputValue: inputValue2,
-        selectedItem: selectedItem2,
-        highlightedIndex,
-      }) => {
-        const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
-          onKeyDown: handleKeyDown,
-          placeholder: 'Select multiple countries',
-        });
-        return (
-          <div className={classes.container}>
-            {renderInput({
-              fullWidth: true,
-              classes,
-              label: 'Countries',
-              InputLabelProps: getLabelProps(),
-              InputProps: {
-                startAdornment: selectedItem.map(item => (
-                  <Chip
-                    key={item}
-                    tabIndex={-1}
-                    label={item}
-                    className={classes.chip}
-                    onDelete={handleDelete(item)}
-                  />
-                )),
-                onBlur,
-                onChange: event => {
-                  handleInputChange(event);
-                  onChange!(event as React.ChangeEvent<HTMLInputElement>);
-                },
-                onFocus,
-              },
-              inputProps,
-            })}
-            {isOpen ? (
-              <Paper className={classes.paper} square>
-                {getSuggestions(inputValue2!).map((suggestion, index) =>
-                  renderSuggestion({
-                    suggestion,
-                    index,
-                    itemProps: getItemProps({ item: suggestion.label }),
-                    highlightedIndex,
-                    selectedItem: selectedItem2,
-                  }),
-                )}
-              </Paper>
-            ) : null}
-          </div>
-        );
-      }}
-    </Downshift>
-  );
-}
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      height: 250,
-    },
-    container: {
-      flexGrow: 1,
-      position: 'relative',
-    },
-    paper: {
-      position: 'absolute',
-      zIndex: 1,
-      marginTop: theme.spacing(1),
-      left: 0,
-      right: 0,
-    },
-    chip: {
-      margin: theme.spacing(0.5, 0.25),
-    },
-    inputRoot: {
-      flexWrap: 'wrap',
-    },
-    inputInput: {
-      width: 'auto',
-      flexGrow: 1,
-    },
-    divider: {
-      height: theme.spacing(2),
-    },
-  }),
-);
-
-let popperNode: HTMLDivElement | null | undefined;
-
-export default function IntegrationDownshift() {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <Downshift id="downshift-simple">
-        {({
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          highlightedIndex,
-          inputValue,
-          isOpen,
-          selectedItem,
-        }) => {
-          const { onBlur, onFocus, ...inputProps } = getInputProps({
-            placeholder: 'Search for a country (start with a)',
-          });
-
-          return (
-            <div className={classes.container}>
-              {renderInput({
-                fullWidth: true,
-                classes,
-                label: 'Country',
-                InputLabelProps: getLabelProps({ shrink: true } as any),
-                InputProps: { onBlur, onFocus },
-                inputProps,
-              })}
-              <div {...getMenuProps()}>
-                {isOpen ? (
-                  <Paper className={classes.paper} square>
-                    {getSuggestions(inputValue!).map((suggestion, index) =>
-                      renderSuggestion({
-                        suggestion,
-                        index,
-                        itemProps: getItemProps({ item: suggestion.label }),
-                        highlightedIndex,
-                        selectedItem,
-                      }),
-                    )}
-                  </Paper>
-                ) : null}
-              </div>
-            </div>
-          );
-        }}
-      </Downshift>
-      <div className={classes.divider} />
-      <DownshiftMultiple classes={classes} />
-      <div className={classes.divider} />
-      <Downshift id="downshift-popper">
-        {({
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          highlightedIndex,
-          inputValue,
-          isOpen,
-          selectedItem,
-        }) => {
-          const { onBlur, onFocus, ...inputProps } = getInputProps({
-            placeholder: 'With Popper',
-          });
-
-          return (
-            <div className={classes.container}>
-              {renderInput({
-                fullWidth: true,
-                classes,
-                label: 'Country',
-                InputProps: { onBlur, onFocus },
-                InputLabelProps: getLabelProps({ shrink: true } as any),
-                inputProps,
-                ref: node => {
-                  popperNode = node;
-                },
-              })}
-              <Popper open={isOpen} anchorEl={popperNode}>
-                <div {...(isOpen ? getMenuProps({}, { suppressRefError: true }) : {})}>
-                  <Paper
-                    square
-                    style={{ marginTop: 8, width: popperNode ? popperNode.clientWidth : undefined }}
-                  >
-                    {getSuggestions(inputValue!).map((suggestion, index) =>
-                      renderSuggestion({
-                        suggestion,
-                        index,
-                        itemProps: getItemProps({ item: suggestion.label }),
-                        highlightedIndex,
-                        selectedItem,
-                      }),
-                    )}
-                  </Paper>
-                </div>
-              </Popper>
-            </div>
-          );
-        }}
-      </Downshift>
-      <div className={classes.divider} />
-      <Downshift id="downshift-options">
-        {({
-          clearSelection,
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          highlightedIndex,
-          inputValue,
-          isOpen,
-          openMenu,
-          selectedItem,
-        }) => {
-          const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
-            onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-              if (event.target.value === '') {
-                clearSelection();
-              }
-            },
-            onFocus: openMenu,
-            placeholder: 'With the clear & show empty options',
-          });
-
-          return (
-            <div className={classes.container}>
-              {renderInput({
-                fullWidth: true,
-                classes,
-                label: 'Countries',
-                InputLabelProps: getLabelProps({ shrink: true } as any),
-                InputProps: { onBlur, onChange, onFocus },
-                inputProps,
-              })}
-              <div {...getMenuProps()}>
-                {isOpen ? (
-                  <Paper className={classes.paper} square>
-                    {getSuggestions(inputValue!, { showEmpty: true }).map((suggestion, index) =>
-                      renderSuggestion({
-                        suggestion,
-                        index,
-                        itemProps: getItemProps({ item: suggestion.label }),
-                        highlightedIndex,
-                        selectedItem,
-                      }),
-                    )}
-                  </Paper>
-                ) : null}
-              </div>
-            </div>
-          );
-        }}
-      </Downshift>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js b/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js
deleted file mode 100644
index c45197d68b0fb8..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js
+++ /dev/null
@@ -1,415 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Select from 'react-select';
-import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import NoSsr from '@material-ui/core/NoSsr';
-import TextField from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
-import Chip from '@material-ui/core/Chip';
-import MenuItem from '@material-ui/core/MenuItem';
-import CancelIcon from '@material-ui/icons/Cancel';
-
-const suggestions = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-].map(suggestion => ({
-  value: suggestion.label,
-  label: suggestion.label,
-}));
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    flexGrow: 1,
-    height: 250,
-    minWidth: 290,
-  },
-  input: {
-    display: 'flex',
-    padding: 0,
-    height: 'auto',
-  },
-  valueContainer: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flex: 1,
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  chip: {
-    margin: theme.spacing(0.5, 0.25),
-  },
-  chipFocused: {
-    backgroundColor: emphasize(
-      theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700],
-      0.08,
-    ),
-  },
-  noOptionsMessage: {
-    padding: theme.spacing(1, 2),
-  },
-  singleValue: {
-    fontSize: 16,
-  },
-  placeholder: {
-    position: 'absolute',
-    left: 2,
-    bottom: 6,
-    fontSize: 16,
-  },
-  paper: {
-    position: 'absolute',
-    zIndex: 1,
-    marginTop: theme.spacing(1),
-    left: 0,
-    right: 0,
-  },
-  divider: {
-    height: theme.spacing(2),
-  },
-}));
-
-function NoOptionsMessage(props) {
-  return (
-    <Typography
-      color="textSecondary"
-      className={props.selectProps.classes.noOptionsMessage}
-      {...props.innerProps}
-    >
-      {props.children}
-    </Typography>
-  );
-}
-
-NoOptionsMessage.propTypes = {
-  /**
-   * The children to be rendered.
-   */
-  children: PropTypes.node,
-  /**
-   * Props to be passed on to the wrapper.
-   */
-  innerProps: PropTypes.object.isRequired,
-  selectProps: PropTypes.object.isRequired,
-};
-
-function inputComponent({ inputRef, ...props }) {
-  return <div ref={inputRef} {...props} />;
-}
-
-inputComponent.propTypes = {
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.any.isRequired,
-    }),
-  ]),
-};
-
-function Control(props) {
-  const {
-    children,
-    innerProps,
-    innerRef,
-    selectProps: { classes, TextFieldProps },
-  } = props;
-
-  return (
-    <TextField
-      fullWidth
-      InputProps={{
-        inputComponent,
-        inputProps: {
-          className: classes.input,
-          ref: innerRef,
-          children,
-          ...innerProps,
-        },
-      }}
-      {...TextFieldProps}
-    />
-  );
-}
-
-Control.propTypes = {
-  /**
-   * Children to render.
-   */
-  children: PropTypes.node,
-  /**
-   * The mouse down event and the innerRef to pass down to the controller element.
-   */
-  innerProps: PropTypes.shape({
-    onMouseDown: PropTypes.func.isRequired,
-  }).isRequired,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.oneOf([null]),
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.any.isRequired,
-    }),
-  ]).isRequired,
-  selectProps: PropTypes.object.isRequired,
-};
-
-function Option(props) {
-  return (
-    <MenuItem
-      ref={props.innerRef}
-      selected={props.isFocused}
-      component="div"
-      style={{
-        fontWeight: props.isSelected ? 500 : 400,
-      }}
-      {...props.innerProps}
-    >
-      {props.children}
-    </MenuItem>
-  );
-}
-
-Option.propTypes = {
-  /**
-   * The children to be rendered.
-   */
-  children: PropTypes.node,
-  /**
-   * props passed to the wrapping element for the group.
-   */
-  innerProps: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    key: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-    onMouseMove: PropTypes.func.isRequired,
-    onMouseOver: PropTypes.func.isRequired,
-    tabIndex: PropTypes.number.isRequired,
-  }).isRequired,
-  /**
-   * Inner ref to DOM Node
-   */
-  innerRef: PropTypes.oneOfType([
-    PropTypes.oneOf([null]),
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.any.isRequired,
-    }),
-  ]).isRequired,
-  /**
-   * Whether the option is focused.
-   */
-  isFocused: PropTypes.bool.isRequired,
-  /**
-   * Whether the option is selected.
-   */
-  isSelected: PropTypes.bool.isRequired,
-};
-
-function Placeholder(props) {
-  const { selectProps, innerProps = {}, children } = props;
-  return (
-    <Typography color="textSecondary" className={selectProps.classes.placeholder} {...innerProps}>
-      {children}
-    </Typography>
-  );
-}
-
-Placeholder.propTypes = {
-  /**
-   * The children to be rendered.
-   */
-  children: PropTypes.node,
-  /**
-   * props passed to the wrapping element for the group.
-   */
-  innerProps: PropTypes.object,
-  selectProps: PropTypes.object.isRequired,
-};
-
-function SingleValue(props) {
-  return (
-    <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
-      {props.children}
-    </Typography>
-  );
-}
-
-SingleValue.propTypes = {
-  /**
-   * The children to be rendered.
-   */
-  children: PropTypes.node,
-  /**
-   * Props passed to the wrapping element for the group.
-   */
-  innerProps: PropTypes.any.isRequired,
-  selectProps: PropTypes.object.isRequired,
-};
-
-function ValueContainer(props) {
-  return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
-}
-
-ValueContainer.propTypes = {
-  /**
-   * The children to be rendered.
-   */
-  children: PropTypes.node,
-  selectProps: PropTypes.object.isRequired,
-};
-
-function MultiValue(props) {
-  return (
-    <Chip
-      tabIndex={-1}
-      label={props.children}
-      className={clsx(props.selectProps.classes.chip, {
-        [props.selectProps.classes.chipFocused]: props.isFocused,
-      })}
-      onDelete={props.removeProps.onClick}
-      deleteIcon={<CancelIcon {...props.removeProps} />}
-    />
-  );
-}
-
-MultiValue.propTypes = {
-  children: PropTypes.node,
-  isFocused: PropTypes.bool.isRequired,
-  removeProps: PropTypes.shape({
-    onClick: PropTypes.func.isRequired,
-    onMouseDown: PropTypes.func.isRequired,
-    onTouchEnd: PropTypes.func.isRequired,
-  }).isRequired,
-  selectProps: PropTypes.object.isRequired,
-};
-
-function Menu(props) {
-  return (
-    <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
-      {props.children}
-    </Paper>
-  );
-}
-
-Menu.propTypes = {
-  /**
-   * The children to be rendered.
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * Props to be passed to the menu wrapper.
-   */
-  innerProps: PropTypes.object.isRequired,
-  selectProps: PropTypes.object.isRequired,
-};
-
-const components = {
-  Control,
-  Menu,
-  MultiValue,
-  NoOptionsMessage,
-  Option,
-  Placeholder,
-  SingleValue,
-  ValueContainer,
-};
-
-export default function IntegrationReactSelect() {
-  const classes = useStyles();
-  const theme = useTheme();
-  const [single, setSingle] = React.useState(null);
-  const [multi, setMulti] = React.useState(null);
-
-  const handleChangeSingle = value => {
-    setSingle(value);
-  };
-
-  const handleChangeMulti = value => {
-    setMulti(value);
-  };
-
-  const selectStyles = {
-    input: base => ({
-      ...base,
-      color: theme.palette.text.primary,
-      '& input': {
-        font: 'inherit',
-      },
-    }),
-  };
-
-  return (
-    <div className={classes.root}>
-      <NoSsr>
-        <Select
-          classes={classes}
-          styles={selectStyles}
-          inputId="react-select-single"
-          TextFieldProps={{
-            label: 'Country',
-            InputLabelProps: {
-              htmlFor: 'react-select-single',
-              shrink: true,
-            },
-          }}
-          placeholder="Search a country (start with a)"
-          options={suggestions}
-          components={components}
-          value={single}
-          onChange={handleChangeSingle}
-        />
-        <div className={classes.divider} />
-        <Select
-          classes={classes}
-          styles={selectStyles}
-          inputId="react-select-multiple"
-          TextFieldProps={{
-            label: 'Countries',
-            InputLabelProps: {
-              htmlFor: 'react-select-multiple',
-              shrink: true,
-            },
-          }}
-          placeholder="Select multiple countries"
-          options={suggestions}
-          components={components}
-          value={multi}
-          onChange={handleChangeMulti}
-          isMulti
-        />
-      </NoSsr>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx b/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx
deleted file mode 100644
index d550070ac94795..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import React, { CSSProperties, HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import Select from 'react-select';
-import { createStyles, emphasize, makeStyles, useTheme, Theme } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import NoSsr from '@material-ui/core/NoSsr';
-import TextField, { BaseTextFieldProps } from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
-import Chip from '@material-ui/core/Chip';
-import MenuItem from '@material-ui/core/MenuItem';
-import CancelIcon from '@material-ui/icons/Cancel';
-import { ValueContainerProps } from 'react-select/src/components/containers';
-import { ControlProps } from 'react-select/src/components/Control';
-import { MenuProps, NoticeProps } from 'react-select/src/components/Menu';
-import { MultiValueProps } from 'react-select/src/components/MultiValue';
-import { OptionProps } from 'react-select/src/components/Option';
-import { PlaceholderProps } from 'react-select/src/components/Placeholder';
-import { SingleValueProps } from 'react-select/src/components/SingleValue';
-import { ValueType } from 'react-select/src/types';
-import { Omit } from '@material-ui/types';
-
-interface OptionType {
-  label: string;
-  value: string;
-}
-
-const suggestions: OptionType[] = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-].map(suggestion => ({
-  value: suggestion.label,
-  label: suggestion.label,
-}));
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      height: 250,
-      minWidth: 290,
-    },
-    input: {
-      display: 'flex',
-      padding: 0,
-      height: 'auto',
-    },
-    valueContainer: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      flex: 1,
-      alignItems: 'center',
-      overflow: 'hidden',
-    },
-    chip: {
-      margin: theme.spacing(0.5, 0.25),
-    },
-    chipFocused: {
-      backgroundColor: emphasize(
-        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700],
-        0.08,
-      ),
-    },
-    noOptionsMessage: {
-      padding: theme.spacing(1, 2),
-    },
-    singleValue: {
-      fontSize: 16,
-    },
-    placeholder: {
-      position: 'absolute',
-      left: 2,
-      bottom: 6,
-      fontSize: 16,
-    },
-    paper: {
-      position: 'absolute',
-      zIndex: 1,
-      marginTop: theme.spacing(1),
-      left: 0,
-      right: 0,
-    },
-    divider: {
-      height: theme.spacing(2),
-    },
-  }),
-);
-
-function NoOptionsMessage(props: NoticeProps<OptionType>) {
-  return (
-    <Typography
-      color="textSecondary"
-      className={props.selectProps.classes.noOptionsMessage}
-      {...props.innerProps}
-    >
-      {props.children}
-    </Typography>
-  );
-}
-
-type InputComponentProps = Pick<BaseTextFieldProps, 'inputRef'> & HTMLAttributes<HTMLDivElement>;
-
-function inputComponent({ inputRef, ...props }: InputComponentProps) {
-  return <div ref={inputRef} {...props} />;
-}
-
-function Control(props: ControlProps<OptionType>) {
-  const {
-    children,
-    innerProps,
-    innerRef,
-    selectProps: { classes, TextFieldProps },
-  } = props;
-
-  return (
-    <TextField
-      fullWidth
-      InputProps={{
-        inputComponent,
-        inputProps: {
-          className: classes.input,
-          ref: innerRef,
-          children,
-          ...innerProps,
-        },
-      }}
-      {...TextFieldProps}
-    />
-  );
-}
-
-function Option(props: OptionProps<OptionType>) {
-  return (
-    <MenuItem
-      ref={props.innerRef}
-      selected={props.isFocused}
-      component="div"
-      style={{
-        fontWeight: props.isSelected ? 500 : 400,
-      }}
-      {...props.innerProps}
-    >
-      {props.children}
-    </MenuItem>
-  );
-}
-
-type MuiPlaceholderProps = Omit<PlaceholderProps<OptionType>, 'innerProps'> &
-  Partial<Pick<PlaceholderProps<OptionType>, 'innerProps'>>;
-function Placeholder(props: MuiPlaceholderProps) {
-  const { selectProps, innerProps = {}, children } = props;
-  return (
-    <Typography color="textSecondary" className={selectProps.classes.placeholder} {...innerProps}>
-      {children}
-    </Typography>
-  );
-}
-
-function SingleValue(props: SingleValueProps<OptionType>) {
-  return (
-    <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
-      {props.children}
-    </Typography>
-  );
-}
-
-function ValueContainer(props: ValueContainerProps<OptionType>) {
-  return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
-}
-
-function MultiValue(props: MultiValueProps<OptionType>) {
-  return (
-    <Chip
-      tabIndex={-1}
-      label={props.children}
-      className={clsx(props.selectProps.classes.chip, {
-        [props.selectProps.classes.chipFocused]: props.isFocused,
-      })}
-      onDelete={props.removeProps.onClick}
-      deleteIcon={<CancelIcon {...props.removeProps} />}
-    />
-  );
-}
-
-function Menu(props: MenuProps<OptionType>) {
-  return (
-    <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
-      {props.children}
-    </Paper>
-  );
-}
-
-const components = {
-  Control,
-  Menu,
-  MultiValue,
-  NoOptionsMessage,
-  Option,
-  Placeholder,
-  SingleValue,
-  ValueContainer,
-};
-
-export default function IntegrationReactSelect() {
-  const classes = useStyles();
-  const theme = useTheme();
-  const [single, setSingle] = React.useState<ValueType<OptionType>>(null);
-  const [multi, setMulti] = React.useState<ValueType<OptionType>>(null);
-
-  const handleChangeSingle = (value: ValueType<OptionType>) => {
-    setSingle(value);
-  };
-
-  const handleChangeMulti = (value: ValueType<OptionType>) => {
-    setMulti(value);
-  };
-
-  const selectStyles = {
-    input: (base: CSSProperties) => ({
-      ...base,
-      color: theme.palette.text.primary,
-      '& input': {
-        font: 'inherit',
-      },
-    }),
-  };
-
-  return (
-    <div className={classes.root}>
-      <NoSsr>
-        <Select
-          classes={classes}
-          styles={selectStyles}
-          inputId="react-select-single"
-          TextFieldProps={{
-            label: 'Country',
-            InputLabelProps: {
-              htmlFor: 'react-select-single',
-              shrink: true,
-            },
-          }}
-          placeholder="Search a country (start with a)"
-          options={suggestions}
-          components={components}
-          value={single}
-          onChange={handleChangeSingle}
-        />
-        <div className={classes.divider} />
-        <Select
-          classes={classes}
-          styles={selectStyles}
-          inputId="react-select-multiple"
-          TextFieldProps={{
-            label: 'Countries',
-            InputLabelProps: {
-              htmlFor: 'react-select-multiple',
-              shrink: true,
-            },
-          }}
-          placeholder="Select multiple countries"
-          options={suggestions}
-          components={components}
-          value={multi}
-          onChange={handleChangeMulti}
-          isMulti
-        />
-      </NoSsr>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md
deleted file mode 100644
index 72c7707c77dd45..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Composant React Auto-complétion
-components: TextField, Paper, MenuItem, Popper
----
-
-# Autocomplete (Auto-complétion)
-
-<p class="description">La saisie semi-automatique est une entrée de texte normale améliorée par un panneau d'options suggérées.</p>
-
-Material-UI doesn't provide a high-level API for solving this problem. You are encouraged to use a solution the React community has built, following one of the examples below.
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift).
-
-La dernière démo permet à l'utilisateur d'effacer une entrée et de montrer un certain nombre d'options sur le focus.
-
-{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}}
-
-## Projets complémentaires
-
-Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des projects suivants:
-
-- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
-- [mui-downshift](https://github.com/techniq/mui-downshift): A thin layer over paypal's downshift to use Material-UI visual components.
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
-- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
\ No newline at end of file
diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md
deleted file mode 100644
index 2ec8d464839491..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Componente React para Autocompletar
-components: TextField, Paper, MenuItem, Popper
----
-
-# Autocompletar
-
-<p class="description">O autocompletar é uma entrada de texto normal aprimorada por um painel de opções sugeridas.</p>
-
-Material-UI, não fornece nenhuma API de alto nível para resolver este problema. Você deve usar uma solução criada pela comunidade React, seguindo um dos exemplos abaixo.
-
-## downshift
-
-![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-Este exemplo demonstra como usar [downshift](https://github.com/downshift-js/downshift).
-
-A última demonstração permite ao usuário limpar a entrada e mostrar várias opções em foco.
-
-{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![estrelas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-Este exemplo demonstra como usar [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![estrelas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-Este exemplo demonstra como usar [react-autosuggest](https://github.com/moroshko/react-autosuggest). Ele também usa [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) para fazer o destaque do texto.
-
-{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}}
-
-## Projetos Complementares
-
-Para usos mais avançados, você pode tirar vantagem com:
-
-- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): O componente chip e usado no input para permitir a seleção de múltiplos valores de texto.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Uma camada fina sobre o downshift do paypal para usar componentes visuais do Material-UI.
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): Um componente de pesquisa difusa para React e Material-UI.
-- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extensão do react-select com Material-UI.
\ No newline at end of file
diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md
deleted file mode 100644
index b4c4721f3391bc..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: React-компонент Автозаполнение
-components: TextField, Paper, MenuItem, Popper
----
-
-# Автодополнение
-
-<p class="description">Автодополнение - это обычный ввод текста, дополненный панелью предлагаемых опций.</p>
-
-Material-UI doesn't provide a high-level API for solving this problem. You are encouraged to use a solution the React community has built, following one of the examples below.
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-Этот пример демонстрирует как использовать [downshift](https://github.com/downshift-js/downshift).
-
-The last demo allows the user to clear the input and show a number of options on focus.
-
-{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}}
-
-## Дополнительные проекты
-
-Для более сложных вариантов использования вы можете воспользоваться:
-
-- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
-- [mui-downshift](https://github.com/techniq/mui-downshift): A thin layer over paypal's downshift to use Material-UI visual components.
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
-- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
\ No newline at end of file
diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md
deleted file mode 100644
index 31eb4cbc5f782f..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: React Autocomplete（自动补全）组件
-components: TextField, Paper, MenuItem, Popper
----
-
-# Autocomplete（自动补全）
-
-<p class="description">自动补全是一个通过一组建议选项来帮助用户输入的普通文本输入框。</p>
-
-Material-UI 则不会提供用于解决此问题的高层 API。 我们鼓励您使用任意一个 React 社区维护的解决方案，如下所示。
-
-## downshift
-
-![评星](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-以下例子演示了如何使用 [downshift](https://github.com/downshift-js/downshift)。
-
-在最后一个例子中，用户可以清除已有的输入，并在焦点的位置上显示一系列的选项。
-
-{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![评星](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-以下例子演示了如何使用 [react-select](https://github.com/JedWatson/react-select)。
-
-{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![评星](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-以下例子演示了如何使用 [react-autosuggest](https://github.com/moroshko/react-autosuggest)。 它还使用了 [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) 来实现高亮的逻辑。
-
-{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}}
-
-## 补充项目
-
-对于更高级的用例，您可以参考：
-
-- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): 此 chip input 用于选择多个文本值的情况。
-- [mui-downshift](https://github.com/techniq/mui-downshift)：为了能够使用 Material-UI 的可视化组件，这在 paypal 的 downshift 上加了简单的一层。
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest)：一个用在 React 和 Material-UI 中的模糊搜索的组件。
-- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui)：使用 Material-UI 的 react-select 的扩展版本。
\ No newline at end of file
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md
deleted file mode 100644
index 10255755c2275d..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: crwdns104428:0crwdne104428:0
----
-
-# crwdns104430:0crwdne104430:0
-
-<p class="description">crwdns104432:0crwdne104432:0</p>
-
-> crwdns104434:0crwdne104434:0
-
-## crwdns104436:0crwdne104436:0
-
-![crwdns104440:0crwdne104440:0](crwdns104438:0crwdne104438:0) ![crwdns104444:0crwdne104444:0](crwdns104442:0crwdne104442:0)
-
-crwdns104446:0crwdne104446:0
-
-crwdns104448:0crwdne104448:0
-
-crwdns104450:0crwdne104450:0
-
-## crwdns104452:0crwdne104452:0
-
-![crwdns104456:0crwdne104456:0](crwdns104454:0crwdne104454:0) ![crwdns104460:0crwdne104460:0](crwdns104458:0crwdne104458:0)
-
-crwdns104462:0crwdne104462:0
-
-crwdns104464:0crwdne104464:0
-
-## crwdns104466:0crwdne104466:0
-
-![crwdns104470:0crwdne104470:0](crwdns104468:0crwdne104468:0) ![crwdns104474:0crwdne104474:0](crwdns104472:0crwdne104472:0)
-
-crwdns104476:0crwdne104476:0 crwdns104478:0crwdne104478:0
-
-crwdns104480:0crwdne104480:0
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md
deleted file mode 100644
index 8e3c7c73915104..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-Dieses Beispiel zeigt die Benutzung von [downshift](https://github.com/downshift-js/downshift).
-
-The last demo allows the user to clear the input and show a number of options on focus.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-Dieses Beispiel zeigt die Benutzung von [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md
deleted file mode 100644
index 931542870e8f3e..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![estrellas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/downshift.svg)
-
-This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift).
-
-The last demo allows the user to clear the input and show a number of options on focus.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![estrellas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/react-select.svg)
-
-This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![estrellas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md
deleted file mode 100644
index f87d0f54766103..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift).
-
-La dernière démo permet à l'utilisateur d'effacer une entrée et de montrer un certain nombre d'options sur le focus.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md
deleted file mode 100644
index 46d109f89aebc2..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![Stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/downshift.svg)
-
-次の例は、 [ダウンシフト](https://github.com/downshift-js/downshift)の使用方法を示します。
-
-最後のデモでは、ユーザーが入力をクリアしてフォーカスのある多くのオプションを表示することができます。
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![Stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/react-select.svg)
-
-次の例では、[react-select](https://github.com/JedWatson/react-select)の使用方法を示します。
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![Stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-次の例では、 [react-autosuggest](https://github.com/moroshko/react-autosuggest) の使用方法を示します。 ハイライトロジックに [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) を使用します。
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md
deleted file mode 100644
index b6eaac42a036de..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-Este exemplo demonstra como usar [downshift](https://github.com/downshift-js/downshift).
-
-A última demonstração permite ao usuário limpar a entrada e mostrar várias opções em foco.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![estrelas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-Este exemplo demonstra como usar [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![estrelas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-Este exemplo demonstra como usar [react-autosuggest](https://github.com/moroshko/react-autosuggest). Ele também usa [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) para fazer o destaque do texto.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md
deleted file mode 100644
index a4d17b5415777e..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-Этот пример демонстрирует как использовать [downshift](https://github.com/downshift-js/downshift).
-
-The last demo allows the user to clear the input and show a number of options on focus.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md
deleted file mode 100644
index 6999c953fcbb6b..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/downshift.svg)
-
-以下例子演示了如何使用 [downshift](https://github.com/downshift-js/downshift)。
-
-在最后一个例子中，用户可以清除已有的输入，并在焦点的位置上显示一系列的选项。
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/react-select.svg)
-
-以下例子演示了如何使用 [react-select](https://github.com/JedWatson/react-select)。
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-以下例子演示了如何使用 [react-autosuggest](https://github.com/moroshko/react-autosuggest)。 它还使用了 [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) 来实现高亮的逻辑。
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md
deleted file mode 100644
index 87c79ddcc43605..00000000000000
--- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Integrated Autocomplete React component
----
-
-# Integrated Autocomplete
-
-<p class="description">Integration examples with third-party libraries.</p>
-
-> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/).
-
-## downshift
-
-![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
-
-This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift).
-
-The last demo allows the user to clear the input and show a number of options on focus.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}}
-
-## react-select
-
-![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
-
-This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select).
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}}
-
-## react-autosuggest
-
-![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars)
-![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
-
-This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest).
-It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}}
diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js
index 427ff4857f7f42..6a0cbe5a111c72 100644
--- a/docs/src/pages/discover-more/showcase/Showcase.js
+++ b/docs/src/pages/discover-more/showcase/Showcase.js
@@ -17,13 +17,6 @@ import appList from './appList';
 const styles = theme => ({
   root: {
     flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
-    // Hide the demo container padding
-    margin: -theme.spacing(3),
-    // Maintain alignment with the markdown text
-    [theme.breakpoints.down('xs')]: {
-      padding: 30,
-    },
   },
   formControl: {
     marginBottom: theme.spacing(4),
diff --git a/docs/src/pages/discover-more/showcase/showcase.md b/docs/src/pages/discover-more/showcase/showcase.md
index cbe412093f64b5..d7d2e6d5feb3fa 100644
--- a/docs/src/pages/discover-more/showcase/showcase.md
+++ b/docs/src/pages/discover-more/showcase/showcase.md
@@ -8,4 +8,4 @@ Want to add your app? Found an app that no longer works or no longer uses Materi
 - High traffic
 - Open source
 
-{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": "inline"}}
diff --git a/docs/src/pages/getting-started/templates/dashboard/Chart.js b/docs/src/pages/getting-started/templates/dashboard/Chart.js
index a3a696cdae87e0..0c443b83fd17af 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Chart.js
+++ b/docs/src/pages/getting-started/templates/dashboard/Chart.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@material-ui/core/styles';
 import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts';
 import Title from './Title';
 
@@ -20,6 +21,8 @@ const data = [
 ];
 
 export default function Chart() {
+  const theme = useTheme();
+
   return (
     <React.Fragment>
       <Title>Today</Title>
@@ -33,13 +36,17 @@ export default function Chart() {
             left: 24,
           }}
         >
-          <XAxis dataKey="time" />
-          <YAxis>
-            <Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
+          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
+          <YAxis stroke={theme.palette.text.secondary}>
+            <Label
+              angle={270}
+              position="left"
+              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
+            >
               Sales ($)
             </Label>
           </YAxis>
-          <Line type="monotone" dataKey="amount" stroke="#556CD6" dot={false} />
+          <Line type="monotone" dataKey="amount" stroke={theme.palette.primary.main} dot={false} />
         </LineChart>
       </ResponsiveContainer>
     </React.Fragment>
diff --git a/docs/src/pages/getting-started/templates/dashboard/Deposits.js b/docs/src/pages/getting-started/templates/dashboard/Deposits.js
index 51a4158d3105a7..9abb81f5045167 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Deposits.js
+++ b/docs/src/pages/getting-started/templates/dashboard/Deposits.js
@@ -1,10 +1,13 @@
-/* eslint-disable no-script-url */
 import React from 'react';
 import Link from '@material-ui/core/Link';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Title from './Title';
 
+function preventDefault(event) {
+  event.preventDefault();
+}
+
 const useStyles = makeStyles({
   depositContext: {
     flex: 1,
@@ -23,7 +26,7 @@ export default function Deposits() {
         on 15 March, 2019
       </Typography>
       <div>
-        <Link color="primary" href="javascript:;">
+        <Link color="primary" href="#" onClick={preventDefault}>
           View balance
         </Link>
       </div>
diff --git a/docs/src/pages/getting-started/templates/dashboard/Orders.js b/docs/src/pages/getting-started/templates/dashboard/Orders.js
index 73819c62a6b99c..b6dff78a817640 100644
--- a/docs/src/pages/getting-started/templates/dashboard/Orders.js
+++ b/docs/src/pages/getting-started/templates/dashboard/Orders.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-script-url */
 import React from 'react';
 import Link from '@material-ui/core/Link';
 import { makeStyles } from '@material-ui/core/styles';
@@ -22,6 +21,10 @@ const rows = [
   createData(4, '15 Mar, 2019', 'Bruce Springsteen', 'Long Branch, NJ', 'VISA ⠀•••• 5919', 212.79),
 ];
 
+function preventDefault(event) {
+  event.preventDefault();
+}
+
 const useStyles = makeStyles(theme => ({
   seeMore: {
     marginTop: theme.spacing(3),
@@ -56,7 +59,7 @@ export default function Orders() {
         </TableBody>
       </Table>
       <div className={classes.seeMore}>
-        <Link color="primary" href="javascript:;">
+        <Link color="primary" href="#" onClick={preventDefault}>
           See more orders
         </Link>
       </div>
diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js
index 63da4a5eaf455c..0bd11c22524590 100644
--- a/docs/src/pages/getting-started/templates/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js
@@ -30,9 +30,6 @@ function Copyright() {
 
 const useStyles = makeStyles(theme => ({
   '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white,
-    },
     ul: {
       margin: 0,
       padding: 0,
@@ -57,7 +54,8 @@ const useStyles = makeStyles(theme => ({
     padding: theme.spacing(8, 0, 6),
   },
   cardHeader: {
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor:
+      theme.palette.type === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200],
   },
   cardPricing: {
     display: 'flex',
diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
index 89dab37dc3197c..54b9be8c75a99f 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
@@ -33,7 +33,8 @@ const useStyles = makeStyles(theme => ({
   image: {
     backgroundImage: 'url(https://source.unsplash.com/random)',
     backgroundRepeat: 'no-repeat',
-    backgroundColor: theme.palette.grey[50],
+    backgroundColor:
+      theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[50],
     backgroundSize: 'cover',
     backgroundPosition: 'center',
   },
diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.js b/docs/src/pages/getting-started/templates/sign-in/SignIn.js
index 8df9ed083e119f..4d7ed4f8ca5868 100644
--- a/docs/src/pages/getting-started/templates/sign-in/SignIn.js
+++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.js
@@ -27,11 +27,6 @@ function Copyright() {
 }
 
 const useStyles = makeStyles(theme => ({
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white,
-    },
-  },
   paper: {
     marginTop: theme.spacing(8),
     display: 'flex',
diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.js b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
index 1a0a50e5d28b5a..ee6f7a2d127318 100644
--- a/docs/src/pages/getting-started/templates/sign-up/SignUp.js
+++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
@@ -27,11 +27,6 @@ function Copyright() {
 }
 
 const useStyles = makeStyles(theme => ({
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white,
-    },
-  },
   paper: {
     marginTop: theme.spacing(8),
     display: 'flex',
diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js
index 1437ebc9f371c4..44f9f578596ef6 100644
--- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js
+++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js
@@ -7,7 +7,7 @@ import Link from '@material-ui/core/Link';
 
 function Copyright() {
   return (
-    <Typography variant="body2" color="textSecondary" align="center">
+    <Typography variant="body2" color="textSecondary">
       {'Copyright © '}
       <Link color="inherit" href="https://material-ui.com/">
         Your Website
@@ -29,9 +29,10 @@ const useStyles = makeStyles(theme => ({
     marginBottom: theme.spacing(2),
   },
   footer: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(3, 2),
     marginTop: 'auto',
-    backgroundColor: 'white',
+    backgroundColor:
+      theme.palette.type === 'dark' ? theme.palette.grey[800] : theme.palette.grey[200],
   },
 }));
 
diff --git a/docs/src/pages/versions/LatestVersions.js b/docs/src/pages/versions/LatestVersions.js
index 5e1572b1c2280f..31a96b23647b1b 100644
--- a/docs/src/pages/versions/LatestVersions.js
+++ b/docs/src/pages/versions/LatestVersions.js
@@ -5,7 +5,6 @@ import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
 
@@ -19,7 +18,7 @@ function LatestVersions(props) {
   const { classes } = props;
 
   return (
-    <Paper className={classes.root}>
+    <div className={classes.root}>
       <Table>
         <TableBody>
           <TableRow>
@@ -72,7 +71,7 @@ function LatestVersions(props) {
           </TableRow>
         </TableBody>
       </Table>
-    </Paper>
+    </div>
   );
 }
 
diff --git a/docs/src/pages/versions/StableVersions.js b/docs/src/pages/versions/StableVersions.js
index 001fd75dc0ac7c..1ba5d998b85eb5 100644
--- a/docs/src/pages/versions/StableVersions.js
+++ b/docs/src/pages/versions/StableVersions.js
@@ -8,7 +8,6 @@ import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
 
@@ -17,7 +16,7 @@ const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next'];
 
 const styles = {
   root: {
-    height: 410,
+    minHeight: 33 * 11,
     overflow: 'auto',
     width: '100%',
   },
@@ -72,8 +71,8 @@ function StableVersions(props) {
   }, []);
 
   return (
-    <Paper className={classes.root}>
-      <Table size="small">
+    <div className={classes.root}>
+      <Table>
         <TableBody>
           {docs.map(doc => (
             <TableRow key={doc.version}>
@@ -104,7 +103,7 @@ function StableVersions(props) {
           ))}
         </TableBody>
       </Table>
-    </Paper>
+    </div>
   );
 }
 
diff --git a/docs/src/pages/versions/versions.md b/docs/src/pages/versions/versions.md
index ce0126d96f6501..25ef15fb4e6144 100644
--- a/docs/src/pages/versions/versions.md
+++ b/docs/src/pages/versions/versions.md
@@ -6,14 +6,14 @@
 
 The most recent version is recommended in production.
 
-{{"demo": "pages/versions/StableVersions.js", "hideHeader": true}}
+{{"demo": "pages/versions/StableVersions.js", "hideHeader": true, "bg": "inline"}}
 
 ## Latest versions
 
 Here you can find the latest unreleased documentation and code.
 You can use it to see what changes are coming and provide better feedback to Material-UI contributors.
 
-{{"demo": "pages/versions/LatestVersions.js", "hideHeader": true}}
+{{"demo": "pages/versions/LatestVersions.js", "hideHeader": true, "bg": "inline"}}
 
 ## Versioning strategy
 
@@ -44,7 +44,7 @@ In general, you can expect the following release cycle:
 ## Release schedule
 
 | Date | Version | Status |
-|:-----|:--------|--------|
+|:-----|:--------|:-------|
 | May 2018 | v1.0.0 | Released |
 | Septembre 2018 | v3.0.0 | Released |
 | May 2019 | v4.0.0 | Released |