Batch small changes (#16864)

docs/package.json

@@ -39,6 +39,7 @@
     "@types/react-window": "^1.7.0",
     "@types/styled-components": "4.1.12",
     "@zeit/next-typescript": "^1.1.1",
+    "accept-language": "^3.0.18",
     "address": "^1.0.3",
     "ast-types": "^0.13.2",
     "autoprefixer": "^9.6.1",

docs/pages/_document.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
 import Document, { Head, Main, NextScript } from 'next/document';
-import { Router } from 'next/router';
+import { Router as Router2 } from 'next/router';
 import { LANGUAGES } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { themeColor } from 'docs/src/modules/components/ThemeContext';
@@ -55,20 +55,20 @@ class MyDocument extends Document {
           {/* SEO */}
           <link
             rel="canonical"
-            href={`https://material-ui.com${Router._rewriteUrlForNextExport(
+            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
               `${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonical}`,
             )}`}
           />
           <link
             rel="alternate"
-            href={`https://material-ui.com${Router._rewriteUrlForNextExport(canonical)}`}
+            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(canonical)}`}
             hrefLang="x-default"
           />
           {LANGUAGES.map(userLanguage2 => (
             <link
               key={userLanguage2}
               rel="alternate"
-              href={`https://material-ui.com${Router._rewriteUrlForNextExport(
+              href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
                 `${userLanguage2 === 'en' ? '' : `/${userLanguage2}`}${canonical}`,
               )}`}
               hrefLang={userLanguage2}

docs/pages/api/app-bar.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/AppBar/AppBar.js
 <p class="description">The API documentation of the AppBar React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { AppBar } from '@material-ui/core';
+import AppBar from '@material-ui/core/AppBar';
 ```
 
 

docs/pages/api/avatar.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Avatar/Avatar.js
 <p class="description">The API documentation of the Avatar React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Avatar } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
 ```
 
 

docs/pages/api/backdrop.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Backdrop/Backdrop.js
 <p class="description">The API documentation of the Backdrop React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Backdrop } from '@material-ui/core';
+import Backdrop from '@material-ui/core/Backdrop';
 ```
 
 

docs/pages/api/badge.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Badge/Badge.js
 <p class="description">The API documentation of the Badge React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Badge } from '@material-ui/core';
+import Badge from '@material-ui/core/Badge';
 ```
 
 

docs/pages/api/bottom-navigation-action.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/BottomNavigationAction/BottomNavigationActio
 <p class="description">The API documentation of the BottomNavigationAction React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { BottomNavigationAction } from '@material-ui/core';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
 ```
 
 

docs/pages/api/bottom-navigation.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/BottomNavigation/BottomNavigation.js
 <p class="description">The API documentation of the BottomNavigation React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { BottomNavigation } from '@material-ui/core';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
 ```
 
 

docs/pages/api/breadcrumbs.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
 <p class="description">The API documentation of the Breadcrumbs React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Breadcrumbs } from '@material-ui/core';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 ```
 
 

docs/pages/api/button-base.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ButtonBase/ButtonBase.js
 <p class="description">The API documentation of the ButtonBase React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ButtonBase } from '@material-ui/core';
+import ButtonBase from '@material-ui/core/ButtonBase';
 ```
 
 `ButtonBase` contains as few styles as possible.

docs/pages/api/button-group.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ButtonGroup/ButtonGroup.js
 <p class="description">The API documentation of the ButtonGroup React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ButtonGroup } from '@material-ui/core';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
 ```
 
 

docs/pages/api/button.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Button/Button.js
 <p class="description">The API documentation of the Button React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 ```
 
 

docs/pages/api/card-action-area.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CardActionArea/CardActionArea.js
 <p class="description">The API documentation of the CardActionArea React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CardActionArea } from '@material-ui/core';
+import CardActionArea from '@material-ui/core/CardActionArea';
 ```
 
 

docs/pages/api/card-actions.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CardActions/CardActions.js
 <p class="description">The API documentation of the CardActions React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CardActions } from '@material-ui/core';
+import CardActions from '@material-ui/core/CardActions';
 ```
 
 

docs/pages/api/card-content.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CardContent/CardContent.js
 <p class="description">The API documentation of the CardContent React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CardContent } from '@material-ui/core';
+import CardContent from '@material-ui/core/CardContent';
 ```
 
 

docs/pages/api/card-header.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CardHeader/CardHeader.js
 <p class="description">The API documentation of the CardHeader React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CardHeader } from '@material-ui/core';
+import CardHeader from '@material-ui/core/CardHeader';
 ```
 
 

docs/pages/api/card-media.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CardMedia/CardMedia.js
 <p class="description">The API documentation of the CardMedia React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CardMedia } from '@material-ui/core';
+import CardMedia from '@material-ui/core/CardMedia';
 ```
 
 

docs/pages/api/card.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Card/Card.js
 <p class="description">The API documentation of the Card React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Card } from '@material-ui/core';
+import Card from '@material-ui/core/Card';
 ```
 
 

docs/pages/api/checkbox.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Checkbox/Checkbox.js
 <p class="description">The API documentation of the Checkbox React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Checkbox } from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
 ```
 
 

docs/pages/api/chip.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Chip/Chip.js
 <p class="description">The API documentation of the Chip React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Chip } from '@material-ui/core';
+import Chip from '@material-ui/core/Chip';
 ```
 
 Chips represent complex entities in small blocks, such as a contact.

docs/pages/api/circular-progress.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CircularProgress/CircularProgress.js
 <p class="description">The API documentation of the CircularProgress React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CircularProgress } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
 ```
 
 ## ARIA

docs/pages/api/click-away-listener.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
 <p class="description">The API documentation of the ClickAwayListener React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ClickAwayListener } from '@material-ui/core';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 ```
 
 Listen for click events that occur somewhere in the document, outside of the element itself.

docs/pages/api/collapse.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Collapse/Collapse.js
 <p class="description">The API documentation of the Collapse React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Collapse } from '@material-ui/core';
+import Collapse from '@material-ui/core/Collapse';
 ```
 
 The Collapse transition is used by the

docs/pages/api/container.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Container/Container.js
 <p class="description">The API documentation of the Container React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Container } from '@material-ui/core';
+import Container from '@material-ui/core/Container';
 ```
 
 

docs/pages/api/css-baseline.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/CssBaseline/CssBaseline.js
 <p class="description">The API documentation of the CssBaseline React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { CssBaseline } from '@material-ui/core';
+import CssBaseline from '@material-ui/core/CssBaseline';
 ```
 
 Kickstart an elegant, consistent, and simple baseline to build upon.

docs/pages/api/dialog-actions.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/DialogActions/DialogActions.js
 <p class="description">The API documentation of the DialogActions React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { DialogActions } from '@material-ui/core';
+import DialogActions from '@material-ui/core/DialogActions';
 ```
 
 

docs/pages/api/dialog-content-text.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/DialogContentText/DialogContentText.js
 <p class="description">The API documentation of the DialogContentText React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { DialogContentText } from '@material-ui/core';
+import DialogContentText from '@material-ui/core/DialogContentText';
 ```
 
 

docs/pages/api/dialog-content.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/DialogContent/DialogContent.js
 <p class="description">The API documentation of the DialogContent React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { DialogContent } from '@material-ui/core';
+import DialogContent from '@material-ui/core/DialogContent';
 ```
 
 

docs/pages/api/dialog-title.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/DialogTitle/DialogTitle.js
 <p class="description">The API documentation of the DialogTitle React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { DialogTitle } from '@material-ui/core';
+import DialogTitle from '@material-ui/core/DialogTitle';
 ```
 
 

docs/pages/api/dialog.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Dialog/Dialog.js
 <p class="description">The API documentation of the Dialog React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Dialog } from '@material-ui/core';
+import Dialog from '@material-ui/core/Dialog';
 ```
 
 Dialogs are overlaid modal paper based components with a backdrop.

docs/pages/api/divider.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Divider/Divider.js
 <p class="description">The API documentation of the Divider React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Divider } from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
 ```
 
 

docs/pages/api/drawer.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Drawer/Drawer.js
 <p class="description">The API documentation of the Drawer React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Drawer } from '@material-ui/core';
+import Drawer from '@material-ui/core/Drawer';
 ```
 
 The props of the [Modal](/api/modal/) component are available

docs/pages/api/expansion-panel-actions.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.
 <p class="description">The API documentation of the ExpansionPanelActions React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ExpansionPanelActions } from '@material-ui/core';
+import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
 ```
 
 

docs/pages/api/expansion-panel-details.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.
 <p class="description">The API documentation of the ExpansionPanelDetails React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ExpansionPanelDetails } from '@material-ui/core';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 ```
 
 

docs/pages/api/expansion-panel-summary.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.
 <p class="description">The API documentation of the ExpansionPanelSummary React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ExpansionPanelSummary } from '@material-ui/core';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 ```
 
 

docs/pages/api/expansion-panel.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
 <p class="description">The API documentation of the ExpansionPanel React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { ExpansionPanel } from '@material-ui/core';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 ```
 
 

docs/pages/api/fab.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Fab/Fab.js
 <p class="description">The API documentation of the Fab React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Fab } from '@material-ui/core';
+import Fab from '@material-ui/core/Fab';
 ```
 
 

docs/pages/api/fade.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/Fade/Fade.js
 <p class="description">The API documentation of the Fade React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { Fade } from '@material-ui/core';
+import Fade from '@material-ui/core/Fade';
 ```
 
 The Fade transition is used by the [Modal](/components/modal/) component.

docs/pages/api/filled-input.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/FilledInput/FilledInput.js
 <p class="description">The API documentation of the FilledInput React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { FilledInput } from '@material-ui/core';
+import FilledInput from '@material-ui/core/FilledInput';
 ```
 
 

docs/pages/api/form-control-label.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/FormControlLabel/FormControlLabel.js
 <p class="description">The API documentation of the FormControlLabel React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { FormControlLabel } from '@material-ui/core';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 ```
 
 Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.

docs/pages/api/form-control.md

@@ -9,7 +9,7 @@ filename: /packages/material-ui/src/FormControl/FormControl.js
 <p class="description">The API documentation of the FormControl React component. Learn more about the props and the CSS customization points.</p>
 
 ```js
-import { FormControl } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
 ```
 
 Provides context such as filled/focused/error/required for form inputs.