From ed7f9db95088c96d6bbae851bb90877ecf7a612a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 18 Oct 2020 12:51:16 +0200
Subject: [PATCH 01/34] [core] Batch small changes (#23116)

---
 docs/pages/api-docs/accordion-actions.md      |  2 +-
 docs/pages/api-docs/accordion.md              |  2 +-
 docs/pages/api-docs/card-actions.md           |  2 +-
 docs/pages/api-docs/dialog-actions.md         |  2 +-
 docs/pages/api-docs/filled-input.md           |  2 +-
 docs/pages/api-docs/input-label.md            |  2 +-
 docs/pages/api-docs/input.md                  |  2 +-
 docs/pages/api-docs/list-item.md              |  2 +-
 docs/pages/api-docs/list-subheader.md         |  4 +-
 docs/pages/api-docs/list.md                   |  2 +-
 docs/pages/api-docs/menu-item.md              |  2 +-
 docs/pages/api-docs/paper.md                  |  2 +-
 docs/pages/api-docs/toolbar.md                |  2 +-
 docs/pages/index.js                           |  2 +-
 .../src/modules/components/HighlightedCode.js |  2 +-
 docs/src/modules/components/MarkdownDocs.js   |  2 +-
 .../slider-styled/NonLinearSlider.js          | 49 +++++++++++++------
 .../slider-styled/NonLinearSlider.tsx         | 49 +++++++++++++------
 .../components/slider-styled/slider-styled.md |  4 +-
 .../supported-platforms.md                    |  2 +-
 docs/src/pages/landing/Sponsors.js            |  2 +-
 .../src/SliderUnstyled/SliderUnstyled.js      |  1 +
 .../src/TabContext/TabContext.js              |  2 +-
 .../material-ui-lab/src/TabList/TabList.js    |  2 +-
 .../src/TreeItem/TreeItem.test.js             |  2 +-
 .../material-ui-utils/src/chainPropTypes.ts   |  2 +-
 .../src/elementAcceptingRef.test.tsx          |  2 +-
 .../src/elementTypeAcceptingRef.test.tsx      |  2 +-
 .../material-ui-utils/src/exactProp.test.ts   |  2 +-
 .../material-ui/src/Accordion/Accordion.d.ts  |  2 +-
 .../material-ui/src/Accordion/Accordion.js    |  2 +-
 .../AccordionActions/AccordionActions.d.ts    |  2 +-
 .../src/AccordionActions/AccordionActions.js  |  2 +-
 .../src/ButtonBase/ButtonBase.test.js         |  2 +-
 .../src/CardActions/CardActions.d.ts          |  2 +-
 .../src/CardActions/CardActions.js            |  2 +-
 .../src/DialogActions/DialogActions.d.ts      |  2 +-
 .../src/DialogActions/DialogActions.js        |  2 +-
 .../src/FilledInput/FilledInput.d.ts          |  2 +-
 .../src/FilledInput/FilledInput.js            |  2 +-
 packages/material-ui/src/Input/Input.d.ts     |  2 +-
 packages/material-ui/src/Input/Input.js       |  2 +-
 .../src/InputLabel/InputLabel.d.ts            |  2 +-
 .../material-ui/src/InputLabel/InputLabel.js  |  2 +-
 packages/material-ui/src/List/List.d.ts       |  2 +-
 packages/material-ui/src/List/List.js         |  2 +-
 .../material-ui/src/ListItem/ListItem.d.ts    |  2 +-
 packages/material-ui/src/ListItem/ListItem.js |  2 +-
 .../src/ListSubheader/ListSubheader.d.ts      |  4 +-
 .../src/ListSubheader/ListSubheader.js        |  4 +-
 .../material-ui/src/MenuItem/MenuItem.d.ts    |  2 +-
 packages/material-ui/src/MenuItem/MenuItem.js |  2 +-
 packages/material-ui/src/Paper/Paper.d.ts     |  2 +-
 packages/material-ui/src/Paper/Paper.js       |  2 +-
 .../material-ui/src/Popover/Popover.test.js   |  2 +-
 .../src/RadioGroup/RadioGroup.test.js         |  2 +-
 packages/material-ui/src/Slider/Slider.js     |  1 +
 packages/material-ui/src/Toolbar/Toolbar.d.ts |  2 +-
 packages/material-ui/src/Toolbar/Toolbar.js   |  2 +-
 .../test/reconcile-prop-types/input.js        |  2 +-
 .../test/reconcile-prop-types/output.js       |  2 +-
 test/utils/components.js                      |  2 +-
 test/utils/createMount.js                     |  2 +-
 63 files changed, 136 insertions(+), 90 deletions(-)

diff --git a/docs/pages/api-docs/accordion-actions.md b/docs/pages/api-docs/accordion-actions.md
index 4a2fd25f04a9bf..67da434ce883f2 100644
--- a/docs/pages/api-docs/accordion-actions.md
+++ b/docs/pages/api-docs/accordion-actions.md
@@ -41,7 +41,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordionActions-root</span> | Styles applied to the root element.
-| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiAccordionActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiAccordionActions-spacing</span> | Styles applied to the root element unless `disableSpacing={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api-docs/accordion.md b/docs/pages/api-docs/accordion.md
index 5d2637a2dfed15..325889d244dc1d 100644
--- a/docs/pages/api-docs/accordion.md
+++ b/docs/pages/api-docs/accordion.md
@@ -47,7 +47,7 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordion-root</span> | Styles applied to the root element.
-| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiAccordion-rounded</span> | Styles applied to the root element if `square={false}`.
+| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiAccordion-rounded</span> | Styles applied to the root element unless `square={true}`.
 | <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Pseudo-class applied to the root element if `expanded={true}`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">region</span> | <span class="prop-name">.MuiAccordion-region</span> | Styles applied to the region element, the container of the children.
diff --git a/docs/pages/api-docs/card-actions.md b/docs/pages/api-docs/card-actions.md
index 1017a0c99869ed..e6946471fe8832 100644
--- a/docs/pages/api-docs/card-actions.md
+++ b/docs/pages/api-docs/card-actions.md
@@ -41,7 +41,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiCardActions-root</span> | Styles applied to the root element.
-| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiCardActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiCardActions-spacing</span> | Styles applied to the root element unless `disableSpacing={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api-docs/dialog-actions.md b/docs/pages/api-docs/dialog-actions.md
index 805be77bfb4ca5..c3f807ba491ade 100644
--- a/docs/pages/api-docs/dialog-actions.md
+++ b/docs/pages/api-docs/dialog-actions.md
@@ -41,7 +41,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiDialogActions-root</span> | Styles applied to the root element.
-| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiDialogActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiDialogActions-spacing</span> | Styles applied to the root element unless `disableSpacing={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api-docs/filled-input.md b/docs/pages/api-docs/filled-input.md
index ca4299265d2427..e6958f5c2f387f 100644
--- a/docs/pages/api-docs/filled-input.md
+++ b/docs/pages/api-docs/filled-input.md
@@ -66,7 +66,7 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiFilledInput-root</span> | Styles applied to the root element.
 | <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiFilledInput-colorSecondary</span> | Styles applied to the root element if color secondary.
-| <span class="prop-name">underline</span> | <span class="prop-name">.MuiFilledInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
+| <span class="prop-name">underline</span> | <span class="prop-name">.MuiFilledInput-underline</span> | Styles applied to the root element unless `disableUnderline={true}`.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if the component is focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">adornedStart</span> | <span class="prop-name">.MuiFilledInput-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
diff --git a/docs/pages/api-docs/input-label.md b/docs/pages/api-docs/input-label.md
index 923b562f4dfb68..2a835e5f954264 100644
--- a/docs/pages/api-docs/input-label.md
+++ b/docs/pages/api-docs/input-label.md
@@ -57,7 +57,7 @@ Any other props supplied will be provided to the root element ([FormLabel](/api/
 | <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInputLabel-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
 | <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiInputLabel-marginDense</span> | Styles applied to the root element if `margin="dense"`.
 | <span class="prop-name">shrink</span> | <span class="prop-name">.MuiInputLabel-shrink</span> | Styles applied to the `input` element if `shrink={true}`.
-| <span class="prop-name">animated</span> | <span class="prop-name">.MuiInputLabel-animated</span> | Styles applied to the `input` element if `disableAnimation={false}`.
+| <span class="prop-name">animated</span> | <span class="prop-name">.MuiInputLabel-animated</span> | Styles applied to the `input` element unless `disableAnimation={true}`.
 | <span class="prop-name">filled</span> | <span class="prop-name">.MuiInputLabel-filled</span> | Styles applied to the root element if `variant="filled"`.
 | <span class="prop-name">outlined</span> | <span class="prop-name">.MuiInputLabel-outlined</span> | Styles applied to the root element if `variant="outlined"`.
 
diff --git a/docs/pages/api-docs/input.md b/docs/pages/api-docs/input.md
index ba1533007eb8ca..e3b6afa86d8873 100644
--- a/docs/pages/api-docs/input.md
+++ b/docs/pages/api-docs/input.md
@@ -69,7 +69,7 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
 | <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiInput-colorSecondary</span> | Styles applied to the root element if color secondary.
-| <span class="prop-name">underline</span> | <span class="prop-name">.MuiInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
+| <span class="prop-name">underline</span> | <span class="prop-name">.MuiInput-underline</span> | Styles applied to the root element unless `disableUnderline={true}`.
 | <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
 | <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiInput-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">multiline</span> | <span class="prop-name">.MuiInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
diff --git a/docs/pages/api-docs/list-item.md b/docs/pages/api-docs/list-item.md
index 052beaeb743fa1..b7efc0a89d0963 100644
--- a/docs/pages/api-docs/list-item.md
+++ b/docs/pages/api-docs/list-item.md
@@ -57,7 +57,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">.MuiListItem-alignItemsFlexStart</span> | Styles applied to the `component` element if `alignItems="flex-start"`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the inner `component` element if `disabled={true}`.
 | <span class="prop-name">divider</span> | <span class="prop-name">.MuiListItem-divider</span> | Styles applied to the inner `component` element if `divider={true}`.
-| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiListItem-gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiListItem-gutters</span> | Styles applied to the inner `component` element unless `disableGutters={true}`.
 | <span class="prop-name">button</span> | <span class="prop-name">.MuiListItem-button</span> | Styles applied to the inner `component` element if `button={true}`.
 | <span class="prop-name">secondaryAction</span> | <span class="prop-name">.MuiListItem-secondaryAction</span> | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`.
 | <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
diff --git a/docs/pages/api-docs/list-subheader.md b/docs/pages/api-docs/list-subheader.md
index b07944c23d5c6b..89d6c062b3d0a9 100644
--- a/docs/pages/api-docs/list-subheader.md
+++ b/docs/pages/api-docs/list-subheader.md
@@ -47,9 +47,9 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiListSubheader-root</span> | Styles applied to the root element.
 | <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiListSubheader-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiListSubheader-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiListSubheader-gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiListSubheader-gutters</span> | Styles applied to the inner `component` element unless `disableGutters={true}`.
 | <span class="prop-name">inset</span> | <span class="prop-name">.MuiListSubheader-inset</span> | Styles applied to the root element if `inset={true}`.
-| <span class="prop-name">sticky</span> | <span class="prop-name">.MuiListSubheader-sticky</span> | Styles applied to the root element if `disableSticky={false}`.
+| <span class="prop-name">sticky</span> | <span class="prop-name">.MuiListSubheader-sticky</span> | Styles applied to the root element unless `disableSticky={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api-docs/list.md b/docs/pages/api-docs/list.md
index 0f75b54b4fd688..d44fc522ac8eb1 100644
--- a/docs/pages/api-docs/list.md
+++ b/docs/pages/api-docs/list.md
@@ -44,7 +44,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiList-root</span> | Styles applied to the root element.
-| <span class="prop-name">padding</span> | <span class="prop-name">.MuiList-padding</span> | Styles applied to the root element if `disablePadding={false}`.
+| <span class="prop-name">padding</span> | <span class="prop-name">.MuiList-padding</span> | Styles applied to the root element unless `disablePadding={true}`.
 | <span class="prop-name">dense</span> | <span class="prop-name">.MuiList-dense</span> | Styles applied to the root element if dense.
 | <span class="prop-name">subheader</span> | <span class="prop-name">.MuiList-subheader</span> | Styles applied to the root element if a `subheader` is provided.
 
diff --git a/docs/pages/api-docs/menu-item.md b/docs/pages/api-docs/menu-item.md
index aa15201b74bb9b..efd42ab0f45ddd 100644
--- a/docs/pages/api-docs/menu-item.md
+++ b/docs/pages/api-docs/menu-item.md
@@ -44,7 +44,7 @@ Any other props supplied will be provided to the root element ([ListItem](/api/l
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiMenuItem-root</span> | Styles applied to the root element.
-| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiMenuItem-gutters</span> | Styles applied to the root element if `disableGutters={false}`.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiMenuItem-gutters</span> | Styles applied to the root element unless `disableGutters={true}`.
 | <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Styles applied to the root element if `selected={true}`.
 | <span class="prop-name">dense</span> | <span class="prop-name">.MuiMenuItem-dense</span> | Styles applied to the root element if dense.
 
diff --git a/docs/pages/api-docs/paper.md b/docs/pages/api-docs/paper.md
index ec57c8ed379489..06357b191ce5d9 100644
--- a/docs/pages/api-docs/paper.md
+++ b/docs/pages/api-docs/paper.md
@@ -44,7 +44,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiPaper-root</span> | Styles applied to the root element.
-| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaper-rounded</span> | Styles applied to the root element if `square={false}`.
+| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaper-rounded</span> | Styles applied to the root element unless `square={true}`.
 | <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaper-outlined</span> | Styles applied to the root element if `variant="outlined"`.
 | <span class="prop-name">elevation</span> | <span class="prop-name">.MuiPaper-elevation</span> | Styles applied to the root element if `variant="elevation"`.
 | <span class="prop-name">elevation0</span> | <span class="prop-name">.MuiPaper-elevation0</span> | 
diff --git a/docs/pages/api-docs/toolbar.md b/docs/pages/api-docs/toolbar.md
index 53aec7d9760424..a79ad0320c805f 100644
--- a/docs/pages/api-docs/toolbar.md
+++ b/docs/pages/api-docs/toolbar.md
@@ -43,7 +43,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiToolbar-root</span> | Styles applied to the root element.
-| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiToolbar-gutters</span> | Styles applied to the root element if `disableGutters={false}`.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiToolbar-gutters</span> | Styles applied to the root element unless `disableGutters={true}`.
 | <span class="prop-name">regular</span> | <span class="prop-name">.MuiToolbar-regular</span> | Styles applied to the root element if `variant="regular"`.
 | <span class="prop-name">dense</span> | <span class="prop-name">.MuiToolbar-dense</span> | Styles applied to the root element if `variant="dense"`.
 
diff --git a/docs/pages/index.js b/docs/pages/index.js
index 30afeb509a28bf..5cd9da36c8c216 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js
index 900ceb15d91c67..4799e1ad37cb2b 100644
--- a/docs/src/modules/components/HighlightedCode.js
+++ b/docs/src/modules/components/HighlightedCode.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import prism from 'docs/src/modules/utils/prism';
 import MarkdownElement from './MarkdownElement';
 
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 3ffc59da2a6923..c7256939ef3fe9 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
diff --git a/docs/src/pages/components/slider-styled/NonLinearSlider.js b/docs/src/pages/components/slider-styled/NonLinearSlider.js
index 332d71420b0a81..66ca18f3c46239 100644
--- a/docs/src/pages/components/slider-styled/NonLinearSlider.js
+++ b/docs/src/pages/components/slider-styled/NonLinearSlider.js
@@ -1,33 +1,54 @@
 import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/lab/SliderStyled';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+  root: {
+    width: 250,
+  },
+});
 
 function valueLabelFormat(value) {
-  const [coefficient, exponent] = value
-    .toExponential()
-    .split('e')
-    .map((item) => Number(item));
-  return `${Math.round(coefficient)}e^${exponent}`;
+  const units = ['KB', 'MB', 'GB', 'TB'];
+
+  let unitIndex = 0;
+  let scaledValue = value;
+
+  while (scaledValue >= 1024 && unitIndex < units.length - 1) {
+    unitIndex += 1;
+    scaledValue /= 1024;
+  }
+
+  return `${scaledValue} ${units[unitIndex]}`;
+}
+
+function calculateValue(value) {
+  return 2 ** value;
 }
 
 export default function NonLinearSlider() {
-  const [value, setValue] = React.useState(1);
+  const [value, setValue] = React.useState(10);
 
   const handleChange = (event, newValue) => {
-    setValue(newValue);
+    if (typeof newValue === 'number') {
+      setValue(newValue);
+    }
   };
 
+  const classes = useStyles();
+
   return (
-    <div>
+    <div className={classes.root}>
       <Typography id="non-linear-slider" gutterBottom>
-        Temperature range
+        Storage: {valueLabelFormat(calculateValue(value))}
       </Typography>
       <Slider
         value={value}
-        min={0}
-        step={0.1}
-        max={6}
-        scale={(x) => x ** 10}
+        min={5}
+        step={1}
+        max={30}
+        scale={calculateValue}
         getAriaValueText={valueLabelFormat}
         valueLabelFormat={valueLabelFormat}
         onChange={handleChange}
diff --git a/docs/src/pages/components/slider-styled/NonLinearSlider.tsx b/docs/src/pages/components/slider-styled/NonLinearSlider.tsx
index 5700e72cae4b3f..e257a6bef178ea 100644
--- a/docs/src/pages/components/slider-styled/NonLinearSlider.tsx
+++ b/docs/src/pages/components/slider-styled/NonLinearSlider.tsx
@@ -1,36 +1,57 @@
 import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/lab/SliderStyled';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+  root: {
+    width: 250,
+  },
+});
 
 function valueLabelFormat(value: number) {
-  const [coefficient, exponent] = value
-    .toExponential()
-    .split('e')
-    .map((item) => Number(item));
-  return `${Math.round(coefficient)}e^${exponent}`;
+  const units = ['KB', 'MB', 'GB', 'TB'];
+
+  let unitIndex = 0;
+  let scaledValue = value;
+
+  while (scaledValue >= 1024 && unitIndex < units.length - 1) {
+    unitIndex += 1;
+    scaledValue /= 1024;
+  }
+
+  return `${scaledValue} ${units[unitIndex]}`;
+}
+
+function calculateValue(value: number) {
+  return 2 ** value;
 }
 
 export default function NonLinearSlider() {
-  const [value, setValue] = React.useState<number | number[]>(1);
+  const [value, setValue] = React.useState<number>(10);
 
   const handleChange = (
     event: React.SyntheticEvent,
     newValue: number | number[],
   ) => {
-    setValue(newValue);
+    if (typeof newValue === 'number') {
+      setValue(newValue);
+    }
   };
 
+  const classes = useStyles();
+
   return (
-    <div>
+    <div className={classes.root}>
       <Typography id="non-linear-slider" gutterBottom>
-        Temperature range
+        Storage: {valueLabelFormat(calculateValue(value))}
       </Typography>
       <Slider
         value={value}
-        min={0}
-        step={0.1}
-        max={6}
-        scale={(x) => x ** 10}
+        min={5}
+        step={1}
+        max={30}
+        scale={calculateValue}
         getAriaValueText={valueLabelFormat}
         valueLabelFormat={valueLabelFormat}
         onChange={handleChange}
diff --git a/docs/src/pages/components/slider-styled/slider-styled.md b/docs/src/pages/components/slider-styled/slider-styled.md
index 2da24ea7f87212..e7affcbff6b6cd 100644
--- a/docs/src/pages/components/slider-styled/slider-styled.md
+++ b/docs/src/pages/components/slider-styled/slider-styled.md
@@ -96,7 +96,9 @@ The track can be inverted with `track="inverted"`.
 ## Non-linear scale
 
 You can use the `scale` prop to represent the `value` on a different scale.
-For instance, in the following demo, the value _x_ represents the power of _10^x_.
+
+In the following demo, the value _x_ represents the value _2^x_.
+Increasing _x_ by one increases the represented value by factor _2_.
 
 {{"demo": "pages/components/slider-styled/NonLinearSlider.js"}}
 
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms.md
index 95bc05e9eeccd5..aafe19b450d3a2 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms.md
@@ -27,7 +27,7 @@ You can expect Material-UI's components to render without major issues.
 <!-- #stable-snapshot -->
 
 We support [Node.js](https://github.com/nodejs/node) starting with version 10 for server-side rendering.
-Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported.
+Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#release-schedule) are supported.
 
 ### CSS prefixing
 
diff --git a/docs/src/pages/landing/Sponsors.js b/docs/src/pages/landing/Sponsors.js
index 429ec4af386b48..aecc73f86fc156 100644
--- a/docs/src/pages/landing/Sponsors.js
+++ b/docs/src/pages/landing/Sponsors.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
index 983f72e0702875..3bd61e85bfcbe3 100644
--- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
@@ -549,6 +549,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
       return;
     }
 
+    // Avoid text selection
     event.preventDefault();
     const finger = trackFinger(event, touchId);
     const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
diff --git a/packages/material-ui-lab/src/TabContext/TabContext.js b/packages/material-ui-lab/src/TabContext/TabContext.js
index 06891edc290b2d..67341745d076e1 100644
--- a/packages/material-ui-lab/src/TabContext/TabContext.js
+++ b/packages/material-ui-lab/src/TabContext/TabContext.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 /**
  * @type {React.Context<{ idPrefix: string; value: string } | null>}
diff --git a/packages/material-ui-lab/src/TabList/TabList.js b/packages/material-ui-lab/src/TabList/TabList.js
index acdc996c82b73c..ff31a0b9667a76 100644
--- a/packages/material-ui-lab/src/TabList/TabList.js
+++ b/packages/material-ui-lab/src/TabList/TabList.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import Tabs from '@material-ui/core/Tabs';
 import { useTabContext, getTabId, getPanelId } from '../TabContext';
 
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
index 1f315925a465cd..abb4613317fe24 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { spy } from 'sinon';
 import {
   getClasses,
diff --git a/packages/material-ui-utils/src/chainPropTypes.ts b/packages/material-ui-utils/src/chainPropTypes.ts
index 25e4cf96705282..b91db65b8341b7 100644
--- a/packages/material-ui-utils/src/chainPropTypes.ts
+++ b/packages/material-ui-utils/src/chainPropTypes.ts
@@ -1,4 +1,4 @@
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 export default function chainPropTypes(
   propType1: PropTypes.Validator<unknown>,
diff --git a/packages/material-ui-utils/src/elementAcceptingRef.test.tsx b/packages/material-ui-utils/src/elementAcceptingRef.test.tsx
index b5390af22b9cab..44249e03034c5e 100644
--- a/packages/material-ui-utils/src/elementAcceptingRef.test.tsx
+++ b/packages/material-ui-utils/src/elementAcceptingRef.test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prefer-stateless-function */
 import { expect } from 'chai';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import elementAcceptingRef from './elementAcceptingRef';
diff --git a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.tsx b/packages/material-ui-utils/src/elementTypeAcceptingRef.test.tsx
index b72bf5d3161b30..b416453557425b 100644
--- a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.tsx
+++ b/packages/material-ui-utils/src/elementTypeAcceptingRef.test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prefer-stateless-function */
 import { expect } from 'chai';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import elementTypeAcceptingRef from './elementTypeAcceptingRef';
diff --git a/packages/material-ui-utils/src/exactProp.test.ts b/packages/material-ui-utils/src/exactProp.test.ts
index 54497eb4ab84a5..7fe118abbbc519 100644
--- a/packages/material-ui-utils/src/exactProp.test.ts
+++ b/packages/material-ui-utils/src/exactProp.test.ts
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import exactProp from './exactProp';
 
 describe('exactProp()', () => {
diff --git a/packages/material-ui/src/Accordion/Accordion.d.ts b/packages/material-ui/src/Accordion/Accordion.d.ts
index ddcb3c7c951b18..8a3f95864a35da 100644
--- a/packages/material-ui/src/Accordion/Accordion.d.ts
+++ b/packages/material-ui/src/Accordion/Accordion.d.ts
@@ -14,7 +14,7 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
   classes?: {
     /** Styles applied to the root element. */
     root?: string;
-    /** Styles applied to the root element if `square={false}`. */
+    /** Styles applied to the root element unless `square={true}`. */
     rounded?: string;
     /** Pseudo-class applied to the root element if `expanded={true}`. */
     expanded?: string;
diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js
index 1e23c6bdda33d4..0a7d051339361f 100644
--- a/packages/material-ui/src/Accordion/Accordion.js
+++ b/packages/material-ui/src/Accordion/Accordion.js
@@ -57,7 +57,7 @@ export const styles = (theme) => {
         backgroundColor: theme.palette.action.disabledBackground,
       },
     },
-    /* Styles applied to the root element if `square={false}`. */
+    /* Styles applied to the root element unless `square={true}`. */
     rounded: {
       borderRadius: 0,
       '&:first-child': {
diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.d.ts b/packages/material-ui/src/AccordionActions/AccordionActions.d.ts
index 9afec1bc567f08..34baee1ff3246c 100644
--- a/packages/material-ui/src/AccordionActions/AccordionActions.d.ts
+++ b/packages/material-ui/src/AccordionActions/AccordionActions.d.ts
@@ -12,7 +12,7 @@ export interface AccordionActionsProps extends StandardProps<React.HTMLAttribute
   classes?: {
     /** Styles applied to the root element. */
     root?: string;
-    /** Styles applied to the root element if `disableSpacing={false}`. */
+    /** Styles applied to the root element unless `disableSpacing={true}`. */
     spacing?: string;
   };
   /**
diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.js b/packages/material-ui/src/AccordionActions/AccordionActions.js
index 566e7b2763fe98..d425275d2e54d3 100644
--- a/packages/material-ui/src/AccordionActions/AccordionActions.js
+++ b/packages/material-ui/src/AccordionActions/AccordionActions.js
@@ -11,7 +11,7 @@ export const styles = {
     padding: 8,
     justifyContent: 'flex-end',
   },
-  /* Styles applied to the root element if `disableSpacing={false}`. */
+  /* Styles applied to the root element unless `disableSpacing={true}`. */
   spacing: {
     '& > :not(:first-child)': {
       marginLeft: 8,
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
index 0aa5a07a312045..a6d2e66d94cc04 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -14,7 +14,7 @@ import {
   simulatePointerDevice,
   programmaticFocusTriggersFocusVisible,
 } from 'test/utils';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import ButtonBase from './ButtonBase';
 
 describe('<ButtonBase />', () => {
diff --git a/packages/material-ui/src/CardActions/CardActions.d.ts b/packages/material-ui/src/CardActions/CardActions.d.ts
index 96b855f260a642..abdfad824c945a 100644
--- a/packages/material-ui/src/CardActions/CardActions.d.ts
+++ b/packages/material-ui/src/CardActions/CardActions.d.ts
@@ -12,7 +12,7 @@ export interface CardActionsProps extends StandardProps<React.HTMLAttributes<HTM
   classes?: {
     /** Styles applied to the root element. */
     root?: string;
-    /** Styles applied to the root element if `disableSpacing={false}`. */
+    /** Styles applied to the root element unless `disableSpacing={true}`. */
     spacing?: string;
   };
   /**
diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index 3cbbf320fae23d..3a2549716dd03b 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -10,7 +10,7 @@ export const styles = {
     alignItems: 'center',
     padding: 8,
   },
-  /* Styles applied to the root element if `disableSpacing={false}`. */
+  /* Styles applied to the root element unless `disableSpacing={true}`. */
   spacing: {
     '& > :not(:first-child)': {
       marginLeft: 8,
diff --git a/packages/material-ui/src/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts
index 60844eb107dca7..00077bade9e7b1 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.d.ts
+++ b/packages/material-ui/src/DialogActions/DialogActions.d.ts
@@ -12,7 +12,7 @@ export interface DialogActionsProps extends StandardProps<React.HTMLAttributes<H
   classes?: {
     /** Styles applied to the root element. */
     root?: string;
-    /** Styles applied to the root element if `disableSpacing={false}`. */
+    /** Styles applied to the root element unless `disableSpacing={true}`. */
     spacing?: string;
   };
   /**
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index bc2c8b0f4934b4..aab91751f5b2e4 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -12,7 +12,7 @@ export const styles = {
     justifyContent: 'flex-end',
     flex: '0 0 auto',
   },
-  /* Styles applied to the root element if `disableSpacing={false}`. */
+  /* Styles applied to the root element unless `disableSpacing={true}`. */
   spacing: {
     '& > :not(:first-child)': {
       marginLeft: 8,
diff --git a/packages/material-ui/src/FilledInput/FilledInput.d.ts b/packages/material-ui/src/FilledInput/FilledInput.d.ts
index d821e31e6efa41..4131707e098f82 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.d.ts
+++ b/packages/material-ui/src/FilledInput/FilledInput.d.ts
@@ -10,7 +10,7 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
     root?: string;
     /** Styles applied to the root element if color secondary. */
     colorSecondary?: string;
-    /** Styles applied to the root element if `disableUnderline={false}`. */
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
     underline?: string;
     /** Pseudo-class applied to the root element if the component is focused. */
     focused?: string;
diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index 140211c2d68b29..0a5b3639a207aa 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -41,7 +41,7 @@ export const styles = (theme) => {
         borderBottomColor: theme.palette.secondary.main,
       },
     },
-    /* Styles applied to the root element if `disableUnderline={false}`. */
+    /* Styles applied to the root element unless `disableUnderline={true}`. */
     underline: {
       '&:after': {
         borderBottom: `2px solid ${theme.palette.primary.main}`,
diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts
index 1b4f97c3065ac8..635d551b0b73c7 100644
--- a/packages/material-ui/src/Input/Input.d.ts
+++ b/packages/material-ui/src/Input/Input.d.ts
@@ -16,7 +16,7 @@ export interface InputProps extends StandardProps<InputBaseProps> {
     disabled?: string;
     /** Styles applied to the root element if color secondary. */
     colorSecondary?: string;
-    /** Styles applied to the root element if `disableUnderline={false}`. */
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
     underline?: string;
     /** Pseudo-class applied to the root element if `error={true}`. */
     error?: string;
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index 9b99157f848a22..6ad8491bede4fb 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -30,7 +30,7 @@ export const styles = (theme) => {
         borderBottomColor: theme.palette.secondary.main,
       },
     },
-    /* Styles applied to the root element if `disableUnderline={false}`. */
+    /* Styles applied to the root element unless `disableUnderline={true}`. */
     underline: {
       '&:after': {
         borderBottom: `2px solid ${theme.palette.primary.main}`,
diff --git a/packages/material-ui/src/InputLabel/InputLabel.d.ts b/packages/material-ui/src/InputLabel/InputLabel.d.ts
index e6064b4033deff..51f00b5a6dbef8 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.d.ts
+++ b/packages/material-ui/src/InputLabel/InputLabel.d.ts
@@ -29,7 +29,7 @@ export interface InputLabelProps extends StandardProps<FormLabelProps> {
     marginDense?: string;
     /** Styles applied to the `input` element if `shrink={true}`. */
     shrink?: string;
-    /** Styles applied to the `input` element if `disableAnimation={false}`. */
+    /** Styles applied to the `input` element unless `disableAnimation={true}`. */
     animated?: string;
     /** Styles applied to the root element if `variant="filled"`. */
     filled?: string;
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index 35bd4080b776e4..ec845584f2e9c2 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -40,7 +40,7 @@ export const styles = (theme) => ({
     transform: 'translate(0, 1.5px) scale(0.75)',
     transformOrigin: 'top left',
   },
-  /* Styles applied to the `input` element if `disableAnimation={false}`. */
+  /* Styles applied to the `input` element unless `disableAnimation={true}`. */
   animated: {
     transition: theme.transitions.create(['color', 'transform'], {
       duration: theme.transitions.duration.shorter,
diff --git a/packages/material-ui/src/List/List.d.ts b/packages/material-ui/src/List/List.d.ts
index b932b3584ae18e..68b278fe8f2ca0 100644
--- a/packages/material-ui/src/List/List.d.ts
+++ b/packages/material-ui/src/List/List.d.ts
@@ -13,7 +13,7 @@ export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
     classes?: {
       /** Styles applied to the root element. */
       root?: string;
-      /** Styles applied to the root element if `disablePadding={false}`. */
+      /** Styles applied to the root element unless `disablePadding={true}`. */
       padding?: string;
       /** Styles applied to the root element if dense. */
       dense?: string;
diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
index d43c4ad4189f77..caf852cb95c2e6 100644
--- a/packages/material-ui/src/List/List.js
+++ b/packages/material-ui/src/List/List.js
@@ -12,7 +12,7 @@ export const styles = {
     padding: 0,
     position: 'relative',
   },
-  /* Styles applied to the root element if `disablePadding={false}`. */
+  /* Styles applied to the root element unless `disablePadding={true}`. */
   padding: {
     paddingTop: 8,
     paddingBottom: 8,
diff --git a/packages/material-ui/src/ListItem/ListItem.d.ts b/packages/material-ui/src/ListItem/ListItem.d.ts
index 47ea5d20724ddb..dbf51c1b3d0ba9 100644
--- a/packages/material-ui/src/ListItem/ListItem.d.ts
+++ b/packages/material-ui/src/ListItem/ListItem.d.ts
@@ -38,7 +38,7 @@ export interface ListItemTypeMap<P, D extends React.ElementType> {
       disabled?: string;
       /** Styles applied to the inner `component` element if `divider={true}`. */
       divider?: string;
-      /** Styles applied to the inner `component` element if `disableGutters={false}`. */
+      /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
       gutters?: string;
       /** Styles applied to the inner `component` element if `button={true}`. */
       button?: string;
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index ae7ad67e28ee92..50e3ffec7b3b6a 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -61,7 +61,7 @@ export const styles = (theme) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundClip: 'padding-box',
   },
-  /* Styles applied to the inner `component` element if `disableGutters={false}`. */
+  /* Styles applied to the inner `component` element unless `disableGutters={true}`. */
   gutters: {
     paddingLeft: 16,
     paddingRight: 16,
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts
index 0450398ab3b925..c017a3b778b195 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts
@@ -17,11 +17,11 @@ export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'
       colorPrimary?: string;
       /** Styles applied to the root element if `color="inherit"`. */
       colorInherit?: string;
-      /** Styles applied to the inner `component` element if `disableGutters={false}`. */
+      /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
       gutters?: string;
       /** Styles applied to the root element if `inset={true}`. */
       inset?: string;
-      /** Styles applied to the root element if `disableSticky={false}`. */
+      /** Styles applied to the root element unless `disableSticky={true}`. */
       sticky?: string;
     };
     /**
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index 4529362d2fdc1e..27dbbd6c12272b 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -23,7 +23,7 @@ export const styles = (theme) => ({
   colorInherit: {
     color: 'inherit',
   },
-  /* Styles applied to the inner `component` element if `disableGutters={false}`. */
+  /* Styles applied to the inner `component` element unless `disableGutters={true}`. */
   gutters: {
     paddingLeft: 16,
     paddingRight: 16,
@@ -32,7 +32,7 @@ export const styles = (theme) => ({
   inset: {
     paddingLeft: 72,
   },
-  /* Styles applied to the root element if `disableSticky={false}`. */
+  /* Styles applied to the root element unless `disableSticky={true}`. */
   sticky: {
     position: 'sticky',
     top: 0,
diff --git a/packages/material-ui/src/MenuItem/MenuItem.d.ts b/packages/material-ui/src/MenuItem/MenuItem.d.ts
index 2f9f642205b82c..c79c0820ceb55f 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.d.ts
+++ b/packages/material-ui/src/MenuItem/MenuItem.d.ts
@@ -17,7 +17,7 @@ export interface MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
       classes?: {
         /** Styles applied to the root element. */
         root?: string;
-        /** Styles applied to the root element if `disableGutters={false}`. */
+        /** Styles applied to the root element unless `disableGutters={true}`. */
         gutters?: string;
         /** Styles applied to the root element if `selected={true}`. */
         selected?: string;
diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index 63d7108f8d0422..c57795633f5d6d 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -19,7 +19,7 @@ export const styles = (theme) => ({
     },
   },
   // TODO v5: remove
-  /* Styles applied to the root element if `disableGutters={false}`. */
+  /* Styles applied to the root element unless `disableGutters={true}`. */
   gutters: {},
   /* Styles applied to the root element if `selected={true}`. */
   selected: {},
diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts
index e9da3c6df43d39..010593284ccd22 100644
--- a/packages/material-ui/src/Paper/Paper.d.ts
+++ b/packages/material-ui/src/Paper/Paper.d.ts
@@ -16,7 +16,7 @@ export interface PaperProps extends StandardProps<React.HTMLAttributes<HTMLDivEl
   classes?: {
     /** Styles applied to the root element. */
     root?: string;
-    /** Styles applied to the root element if `square={false}`. */
+    /** Styles applied to the root element unless `square={true}`. */
     rounded?: string;
     /** Styles applied to the root element if `variant="outlined"`. */
     outlined?: string;
diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
index f56dc1ef16de26..a0ef15ad33d2f3 100644
--- a/packages/material-ui/src/Paper/Paper.js
+++ b/packages/material-ui/src/Paper/Paper.js
@@ -20,7 +20,7 @@ export const styles = (theme) => {
       color: theme.palette.text.primary,
       transition: theme.transitions.create('box-shadow'),
     },
-    /* Styles applied to the root element if `square={false}`. */
+    /* Styles applied to the root element unless `square={true}`. */
     rounded: {
       borderRadius: theme.shape.borderRadius,
     },
diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
index 08a1ed4b8002fc..077524b6f276f3 100644
--- a/packages/material-ui/src/Popover/Popover.test.js
+++ b/packages/material-ui/src/Popover/Popover.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
 import { findOutermostIntrinsic, getClasses, createMount, describeConformance } from 'test/utils';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import Grow from '../Grow';
 import Modal from '../Modal';
 import Paper from '../Paper';
diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.test.js b/packages/material-ui/src/RadioGroup/RadioGroup.test.js
index 178a36292f802e..95d139d4a72b96 100644
--- a/packages/material-ui/src/RadioGroup/RadioGroup.test.js
+++ b/packages/material-ui/src/RadioGroup/RadioGroup.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { createMount, describeConformance, act, createClientRender, fireEvent } from 'test/utils';
 import FormGroup from '../FormGroup';
 import Radio from '../Radio';
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 385f7ba3457f0e..e011ab661ecaf7 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -737,6 +737,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
       return;
     }
 
+    // Avoid text selection
     event.preventDefault();
     const finger = trackFinger(event, touchId);
     const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
diff --git a/packages/material-ui/src/Toolbar/Toolbar.d.ts b/packages/material-ui/src/Toolbar/Toolbar.d.ts
index 1d8298227555b3..3d64a7ea9bc96d 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.d.ts
+++ b/packages/material-ui/src/Toolbar/Toolbar.d.ts
@@ -17,7 +17,7 @@ export interface ToolbarTypeMap<P = {}, D extends React.ElementType = 'div'> {
     classes?: {
       /** Styles applied to the root element. */
       root?: string;
-      /** Styles applied to the root element if `disableGutters={false}`. */
+      /** Styles applied to the root element unless `disableGutters={true}`. */
       gutters?: string;
       /** Styles applied to the root element if `variant="regular"`. */
       regular?: string;
diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js
index 18299a341408d8..b42d574d177844 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.js
+++ b/packages/material-ui/src/Toolbar/Toolbar.js
@@ -11,7 +11,7 @@ export const styles = (theme) => ({
     display: 'flex',
     alignItems: 'center',
   },
-  /* Styles applied to the root element if `disableGutters={false}`. */
+  /* Styles applied to the root element unless `disableGutters={true}`. */
   gutters: {
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
diff --git a/packages/typescript-to-proptypes/test/reconcile-prop-types/input.js b/packages/typescript-to-proptypes/test/reconcile-prop-types/input.js
index 7adc38f157a388..36052f35975429 100644
--- a/packages/typescript-to-proptypes/test/reconcile-prop-types/input.js
+++ b/packages/typescript-to-proptypes/test/reconcile-prop-types/input.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { chainPropTypes } from 'some-utils-module';
 
 function Component(props) {
diff --git a/packages/typescript-to-proptypes/test/reconcile-prop-types/output.js b/packages/typescript-to-proptypes/test/reconcile-prop-types/output.js
index 7adc38f157a388..36052f35975429 100644
--- a/packages/typescript-to-proptypes/test/reconcile-prop-types/output.js
+++ b/packages/typescript-to-proptypes/test/reconcile-prop-types/output.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { chainPropTypes } from 'some-utils-module';
 
 function Component(props) {
diff --git a/test/utils/components.js b/test/utils/components.js
index 76c47c494ed24a..50e525d4ef4ad4 100644
--- a/test/utils/components.js
+++ b/test/utils/components.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 /**
  * A basic error boundary that can be used to assert thrown errors in render.
diff --git a/test/utils/createMount.js b/test/utils/createMount.js
index addb7c45813764..91a6025f5cc1e6 100644
--- a/test/utils/createMount.js
+++ b/test/utils/createMount.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as ReactDOMTestUtils from 'react-dom/test-utils';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { mount as enzymeMount } from 'enzyme';
 
 /**

From 1fe76fd28162af580d49d3fc3c0ef7c2567d52a2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 18 Oct 2020 19:05:07 +0200
Subject: [PATCH 02/34] [utils] Fix types of chainPropTypes (#23123)

---
 .../material-ui-utils/src/chainPropTypes.ts     |  8 ++++----
 .../src/chainpropTypes.spec.tsx                 | 17 +++++++++++++++++
 packages/material-ui/src/Box/Box.spec.tsx       |  2 +-
 packages/material-ui/src/Grid/Grid.spec.tsx     |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 packages/material-ui-utils/src/chainpropTypes.spec.tsx

diff --git a/packages/material-ui-utils/src/chainPropTypes.ts b/packages/material-ui-utils/src/chainPropTypes.ts
index b91db65b8341b7..da9fe8373d26cb 100644
--- a/packages/material-ui-utils/src/chainPropTypes.ts
+++ b/packages/material-ui-utils/src/chainPropTypes.ts
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 
-export default function chainPropTypes(
-  propType1: PropTypes.Validator<unknown>,
-  propType2: PropTypes.Validator<unknown>,
-): PropTypes.Validator<unknown> {
+export default function chainPropTypes<A, B>(
+  propType1: PropTypes.Validator<A>,
+  propType2: PropTypes.Validator<B>,
+): PropTypes.Validator<A & B> {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
diff --git a/packages/material-ui-utils/src/chainpropTypes.spec.tsx b/packages/material-ui-utils/src/chainpropTypes.spec.tsx
new file mode 100644
index 00000000000000..7a7cb1c463227c
--- /dev/null
+++ b/packages/material-ui-utils/src/chainpropTypes.spec.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import chainPropTypes from './chainPropTypes';
+
+interface ChainProps {
+  foo?: boolean;
+}
+
+const Chain: React.FC<ChainProps> = (props) => {
+  return <div />;
+};
+
+Chain.propTypes = {
+  foo: chainPropTypes(PropTypes.bool, () => {
+    return null;
+  }),
+};
diff --git a/packages/material-ui/src/Box/Box.spec.tsx b/packages/material-ui/src/Box/Box.spec.tsx
index 16d4b828b05ea1..9d2d8f9e47431e 100644
--- a/packages/material-ui/src/Box/Box.spec.tsx
+++ b/packages/material-ui/src/Box/Box.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
 
-function responsiveTest() {
+function ResponsiveTest() {
   <Box p={[2, 3, 4]} />;
   <Box p={{ xs: 2, sm: 3, md: 4 }} />;
   // undesired
diff --git a/packages/material-ui/src/Grid/Grid.spec.tsx b/packages/material-ui/src/Grid/Grid.spec.tsx
index 41d73d9b5592d5..29ea8f29d6cfee 100644
--- a/packages/material-ui/src/Grid/Grid.spec.tsx
+++ b/packages/material-ui/src/Grid/Grid.spec.tsx
@@ -2,6 +2,6 @@ import * as React from 'react';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-function responsiveTest() {
+function ResponsiveTest() {
   <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square />;
 }

From 66d1fd9aa9c3f873874268f7b7d493a5f3c93298 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Sun, 18 Oct 2020 20:06:10 +0100
Subject: [PATCH 03/34] [AvatarGroup] Move from lab to core (#23121)

---
 docs/pages/api-docs/avatar-group.md           |   8 +-
 .../pages/components/avatars/GroupAvatars.js  |   2 +-
 .../pages/components/avatars/GroupAvatars.tsx |   2 +-
 .../pages/guides/migration-v4/migration-v4.md |   7 +
 .../src/AvatarGroup/AvatarGroup.d.ts          |  53 +-----
 .../src/AvatarGroup/AvatarGroup.js            | 160 +++---------------
 .../src/themeAugmentation/components.d.ts     |  14 --
 .../src/themeAugmentation/overrides.d.ts      |   6 -
 .../src/themeAugmentation/overrides.spec.ts   |  17 --
 .../src/themeAugmentation/props.d.ts          |   6 -
 .../src/themeAugmentation/props.spec.ts       |  13 --
 .../src/AvatarGroup/AvatarGroup.d.ts          |  51 ++++++
 .../src/AvatarGroup/AvatarGroup.js            | 138 +++++++++++++++
 .../src/AvatarGroup/AvatarGroup.test.js       |   0
 .../material-ui/src/AvatarGroup/index.d.ts    |   2 +
 packages/material-ui/src/AvatarGroup/index.js |   1 +
 packages/material-ui/src/index.d.ts           |   3 +
 packages/material-ui/src/index.js             |   3 +
 .../material-ui/src/styles/components.d.ts    |   4 +
 .../material-ui/src/styles/overrides.d.ts     |   2 +
 packages/material-ui/src/styles/props.d.ts    |   2 +
 21 files changed, 244 insertions(+), 250 deletions(-)
 delete mode 100644 packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts
 delete mode 100644 packages/material-ui-lab/src/themeAugmentation/props.spec.ts
 create mode 100644 packages/material-ui/src/AvatarGroup/AvatarGroup.d.ts
 create mode 100644 packages/material-ui/src/AvatarGroup/AvatarGroup.js
 rename packages/{material-ui-lab => material-ui}/src/AvatarGroup/AvatarGroup.test.js (100%)
 create mode 100644 packages/material-ui/src/AvatarGroup/index.d.ts
 create mode 100644 packages/material-ui/src/AvatarGroup/index.js

diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md
index 11428ea74f6e60..85f912a7ede5b4 100644
--- a/docs/pages/api-docs/avatar-group.md
+++ b/docs/pages/api-docs/avatar-group.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
+filename: /packages/material-ui/src/AvatarGroup/AvatarGroup.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
 ## Import
 
 ```js
-import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import AvatarGroup from '@material-ui/core/AvatarGroup';
 // or
-import { AvatarGroup } from '@material-ui/lab';
+import { AvatarGroup } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -51,7 +51,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AvatarGroup/AvatarGroup.js) for more detail.
 
 ## Demos
 
diff --git a/docs/src/pages/components/avatars/GroupAvatars.js b/docs/src/pages/components/avatars/GroupAvatars.js
index 84e6b1f53bed9c..8c57f8953ca1e8 100644
--- a/docs/src/pages/components/avatars/GroupAvatars.js
+++ b/docs/src/pages/components/avatars/GroupAvatars.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Avatar from '@material-ui/core/Avatar';
-import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import AvatarGroup from '@material-ui/core/AvatarGroup';
 
 export default function GroupAvatars() {
   return (
diff --git a/docs/src/pages/components/avatars/GroupAvatars.tsx b/docs/src/pages/components/avatars/GroupAvatars.tsx
index 84e6b1f53bed9c..8c57f8953ca1e8 100644
--- a/docs/src/pages/components/avatars/GroupAvatars.tsx
+++ b/docs/src/pages/components/avatars/GroupAvatars.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Avatar from '@material-ui/core/Avatar';
-import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import AvatarGroup from '@material-ui/core/AvatarGroup';
 
 export default function GroupAvatars() {
   return (
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index f449ca85a303ad..0b3f571fe0b8f1 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -263,6 +263,13 @@ const classes = makeStyles(theme => ({
   +<Avatar classes={{ circular: 'className' }}>
   ```
 
+- Move the AvatarGroup from the lab to the core.
+
+  ```diff
+  -import AvatarGroup from '@material-ui/lab/AvatarGroup';
+  +import AvatarGroup from '@material-ui/core/AvatarGroup';
+  ```
+
 ### Badge
 
 - Rename `circle` to `circular` and `rectangle` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts
index 75eb99593a2232..3755fa36ec5fa7 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts
@@ -1,51 +1,2 @@
-import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '@material-ui/core';
-import { OverridableStringUnion } from '@material-ui/types';
-
-export interface AvatarGroupPropsVariantOverrides {}
-export type AvatarGroupVariantDefaults = Record<'circular' | 'rounded' | 'square', true>;
-
-export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
-  /**
-   * The avatars to stack.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the avatar elements. */
-    avatar?: string;
-  };
-  /**
-   * Max avatars to show before +x.
-   * @default 5
-   */
-  max?: number;
-  /**
-   * Spacing between avatars.
-   * @default 'medium'
-   */
-  spacing?: 'small' | 'medium' | number;
-  /**
-   * The shape of the avatars.
-   * @default 'circular'
-   */
-  variant?: OverridableStringUnion<AvatarGroupVariantDefaults, AvatarGroupPropsVariantOverrides>;
-}
-
-export type AvatarGroupClassKey = keyof NonNullable<AvatarGroupProps['classes']>;
-
-/**
- *
- * Demos:
- *
- * - [Avatars](https://material-ui.com/components/avatars/)
- *
- * API:
- *
- * - [AvatarGroup API](https://material-ui.com/api/avatar-group/)
- */
-export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;
+export { default } from '@material-ui/core/AvatarGroup';
+export * from '@material-ui/core/AvatarGroup';
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
index 070ae44eb74e17..a62c83085b7210 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
@@ -1,138 +1,24 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { isFragment } from 'react-is';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
-import { chainPropTypes } from '@material-ui/utils';
-
-const SPACINGS = {
-  small: -16,
-  medium: null,
-};
-
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    display: 'flex',
-    flexDirection: 'row-reverse',
-  },
-  /* Styles applied to the avatar elements. */
-  avatar: {
-    border: `2px solid ${theme.palette.background.default}`,
-    boxSizing: 'content-box',
-    marginLeft: -8,
-    '&:last-child': {
-      marginLeft: 0,
-    },
-  },
+import React from 'react';
+import AvatarGroup from '@material-ui/core/AvatarGroup';
+
+let warnedOnce = false;
+
+/**
+ * @ignore - do not document.
+ */
+export default React.forwardRef(function DeprecatedAvatarGroup(props, ref) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'Material-UI: The AvatarGroup component was moved from the lab to the core.',
+        '',
+        "You should use `import { AvatarGroup } from '@material-ui/core'`",
+        "or `import AvatarGroup from '@material-ui/core/AvatarGroup'`",
+      ].join('\n'),
+    );
+
+    warnedOnce = true;
+  }
+
+  return <AvatarGroup ref={ref} {...props} />;
 });
-
-const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
-  const {
-    children: childrenProp,
-    classes,
-    className,
-    max = 5,
-    spacing = 'medium',
-    variant = 'circular',
-    ...other
-  } = props;
-  const clampedMax = max < 2 ? 2 : max;
-
-  const children = React.Children.toArray(childrenProp).filter((child) => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (isFragment(child)) {
-        console.error(
-          [
-            "Material-UI: The AvatarGroup component doesn't accept a Fragment as a child.",
-            'Consider providing an array instead.',
-          ].join('\n'),
-        );
-      }
-    }
-
-    return React.isValidElement(child);
-  });
-
-  const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
-
-  const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
-
-  return (
-    <div className={clsx(classes.root, className)} ref={ref} {...other}>
-      {extraAvatars ? (
-        <Avatar
-          className={classes.avatar}
-          style={{
-            marginLeft,
-          }}
-          variant={variant}
-        >
-          +{extraAvatars}
-        </Avatar>
-      ) : null}
-      {children
-        .slice(0, children.length - extraAvatars)
-        .reverse()
-        .map((child) => {
-          return React.cloneElement(child, {
-            className: clsx(child.props.className, classes.avatar),
-            style: {
-              marginLeft,
-              ...child.props.style,
-            },
-            variant: child.props.variant || variant,
-          });
-        })}
-    </div>
-  );
-});
-
-AvatarGroup.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The avatars to stack.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * Max avatars to show before +x.
-   * @default 5
-   */
-  max: chainPropTypes(PropTypes.number, (props) => {
-    if (props.max < 2) {
-      throw new Error(
-        [
-          'Material-UI: The prop `max` should be equal to 2 or above.',
-          'A value below is clamped to 2.',
-        ].join('\n'),
-      );
-    }
-  }),
-  /**
-   * Spacing between avatars.
-   * @default 'medium'
-   */
-  spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
-  /**
-   * The shape of the avatars.
-   * @default 'circular'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['circular', 'rounded', 'square']),
-    PropTypes.string,
-  ]),
-};
-
-export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup);
diff --git a/packages/material-ui-lab/src/themeAugmentation/components.d.ts b/packages/material-ui-lab/src/themeAugmentation/components.d.ts
index ca26b0a9288b6b..12aea67780bf58 100644
--- a/packages/material-ui-lab/src/themeAugmentation/components.d.ts
+++ b/packages/material-ui-lab/src/themeAugmentation/components.d.ts
@@ -1,20 +1,6 @@
 import { ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@material-ui/core';
 
 export interface LabComponents {
-  MuiAvatarGroup?: {
-    defaultProps?: ComponentsProps['MuiAvatarGroup'];
-    styleOverrides?: ComponentsOverrides['MuiAvatarGroup'];
-  };
-  MuiPagination?: {
-    defaultProps?: ComponentsProps['MuiPagination'];
-    styleOverrides?: ComponentsOverrides['MuiPagination'];
-    variants?: ComponentsVariants['MuiPagination'];
-  };
-  MuiPaginationItem?: {
-    defaultProps?: ComponentsProps['MuiPaginationItem'];
-    styleOverrides?: ComponentsOverrides['MuiPaginationItem'];
-    variants?: ComponentsVariants['MuiPaginationItem'];
-  };
   MuiTabList?: {
     defaultProps?: ComponentsProps['MuiTabList'];
     styleOverrides?: ComponentsOverrides['MuiTabList'];
diff --git a/packages/material-ui-lab/src/themeAugmentation/overrides.d.ts b/packages/material-ui-lab/src/themeAugmentation/overrides.d.ts
index 2da49622335dbe..17c8211089c62e 100644
--- a/packages/material-ui-lab/src/themeAugmentation/overrides.d.ts
+++ b/packages/material-ui-lab/src/themeAugmentation/overrides.d.ts
@@ -1,4 +1,3 @@
-import { AvatarGroupClassKey } from '../AvatarGroup';
 import { TabListClassKey } from '../TabList';
 import { TabPanelClassKey } from '../TabPanel';
 import { TimelineClassKey } from '../Timeline';
@@ -8,13 +7,10 @@ import { TimelineDotClassKey } from '../TimelineDot';
 import { TimelineItemClassKey } from '../TimelineItem';
 import { TimelineOppositeContentClassKey } from '../TimelineOppositeContent';
 import { TimelineSeparatorClassKey } from '../TimelineSeparator';
-import { ToggleButtonClassKey } from '../ToggleButton';
-import { ToggleButtonGroupClassKey } from '../ToggleButtonGroup';
 import { TreeItemClassKey } from '../TreeItem';
 import { TreeViewClassKey } from '../TreeView';
 
 export interface LabComponentNameToClassKey {
-  MuiAvatarGroup: AvatarGroupClassKey;
   MuiTabList: TabListClassKey;
   MuiTabPanel: TabPanelClassKey;
   MuiTimeline: TimelineClassKey;
@@ -24,8 +20,6 @@ export interface LabComponentNameToClassKey {
   MuiTimelineItem: TimelineItemClassKey;
   MuiTimelineOppositeContent: TimelineOppositeContentClassKey;
   MuiTimelineSeparator: TimelineSeparatorClassKey;
-  MuiToggleButton: ToggleButtonClassKey;
-  MuiToggleButtonGroup: ToggleButtonGroupClassKey;
   MuiTreeItem: TreeItemClassKey;
   MuiTreeView: TreeViewClassKey;
 }
diff --git a/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts b/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts
deleted file mode 100644
index d05618d157b2fd..00000000000000
--- a/packages/material-ui-lab/src/themeAugmentation/overrides.spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createMuiTheme } from '@material-ui/core';
-
-createMuiTheme({
-  components: {
-    MuiAvatarGroup: {
-      styleOverrides: {
-        avatar: {
-          border: 'none',
-        },
-        // @ts-expect-error invalid class key
-        wrong: {
-          display: 'flex',
-        },
-      },
-    },
-  },
-});
diff --git a/packages/material-ui-lab/src/themeAugmentation/props.d.ts b/packages/material-ui-lab/src/themeAugmentation/props.d.ts
index 3dcc511d0658cc..4e8865584c4ee9 100644
--- a/packages/material-ui-lab/src/themeAugmentation/props.d.ts
+++ b/packages/material-ui-lab/src/themeAugmentation/props.d.ts
@@ -1,4 +1,3 @@
-import { AvatarGroupProps } from '../AvatarGroup';
 import { TabListProps } from '../TabList';
 import { TabPanelProps } from '../TabPanel';
 import { TimelineProps } from '../Timeline';
@@ -8,13 +7,10 @@ import { TimelineDotProps } from '../TimelineDot';
 import { TimelineItemProps } from '../TimelineItem';
 import { TimelineOppositeContentProps } from '../TimelineOppositeContent';
 import { TimelineSeparatorProps } from '../TimelineSeparator';
-import { ToggleButtonProps } from '../ToggleButton';
-import { ToggleButtonGroupProps } from '../ToggleButtonGroup';
 import { TreeItemProps } from '../TreeItem';
 import { TreeViewProps } from '../TreeView';
 
 export interface LabComponentsPropsList {
-  MuiAvatarGroup: AvatarGroupProps;
   MuiTabList: TabListProps;
   MuiTabPanel: TabPanelProps;
   MuiTimeline: TimelineProps;
@@ -24,8 +20,6 @@ export interface LabComponentsPropsList {
   MuiTimelineItem: TimelineItemProps;
   MuiTimelineOppositeContent: TimelineOppositeContentProps;
   MuiTimelineSeparator: TimelineSeparatorProps;
-  MuiToggleButton: ToggleButtonProps;
-  MuiToggleButtonGroup: ToggleButtonGroupProps;
   MuiTreeItem: TreeItemProps;
   MuiTreeView: TreeViewProps;
 }
diff --git a/packages/material-ui-lab/src/themeAugmentation/props.spec.ts b/packages/material-ui-lab/src/themeAugmentation/props.spec.ts
deleted file mode 100644
index 28e85a3cbdde47..00000000000000
--- a/packages/material-ui-lab/src/themeAugmentation/props.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createMuiTheme } from '@material-ui/core';
-
-createMuiTheme({
-  components: {
-    MuiAvatarGroup: {
-      defaultProps: {
-        spacing: 'small',
-        // @ts-expect-error invalid prop
-        maximum: 5,
-      },
-    },
-  },
-});
diff --git a/packages/material-ui/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui/src/AvatarGroup/AvatarGroup.d.ts
new file mode 100644
index 00000000000000..75eb99593a2232
--- /dev/null
+++ b/packages/material-ui/src/AvatarGroup/AvatarGroup.d.ts
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { OverridableStringUnion } from '@material-ui/types';
+
+export interface AvatarGroupPropsVariantOverrides {}
+export type AvatarGroupVariantDefaults = Record<'circular' | 'rounded' | 'square', true>;
+
+export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The avatars to stack.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the avatar elements. */
+    avatar?: string;
+  };
+  /**
+   * Max avatars to show before +x.
+   * @default 5
+   */
+  max?: number;
+  /**
+   * Spacing between avatars.
+   * @default 'medium'
+   */
+  spacing?: 'small' | 'medium' | number;
+  /**
+   * The shape of the avatars.
+   * @default 'circular'
+   */
+  variant?: OverridableStringUnion<AvatarGroupVariantDefaults, AvatarGroupPropsVariantOverrides>;
+}
+
+export type AvatarGroupClassKey = keyof NonNullable<AvatarGroupProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Avatars](https://material-ui.com/components/avatars/)
+ *
+ * API:
+ *
+ * - [AvatarGroup API](https://material-ui.com/api/avatar-group/)
+ */
+export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;
diff --git a/packages/material-ui/src/AvatarGroup/AvatarGroup.js b/packages/material-ui/src/AvatarGroup/AvatarGroup.js
new file mode 100644
index 00000000000000..cc39df9c076bd8
--- /dev/null
+++ b/packages/material-ui/src/AvatarGroup/AvatarGroup.js
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { isFragment } from 'react-is';
+import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
+import { withStyles } from '../styles';
+import Avatar from '../Avatar';
+
+const SPACINGS = {
+  small: -16,
+  medium: null,
+};
+
+export const styles = (theme) => ({
+  /* Styles applied to the root element. */
+  root: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  },
+  /* Styles applied to the avatar elements. */
+  avatar: {
+    border: `2px solid ${theme.palette.background.default}`,
+    boxSizing: 'content-box',
+    marginLeft: -8,
+    '&:last-child': {
+      marginLeft: 0,
+    },
+  },
+});
+
+const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
+  const {
+    children: childrenProp,
+    classes,
+    className,
+    max = 5,
+    spacing = 'medium',
+    variant = 'circular',
+    ...other
+  } = props;
+  const clampedMax = max < 2 ? 2 : max;
+
+  const children = React.Children.toArray(childrenProp).filter((child) => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (isFragment(child)) {
+        console.error(
+          [
+            "Material-UI: The AvatarGroup component doesn't accept a Fragment as a child.",
+            'Consider providing an array instead.',
+          ].join('\n'),
+        );
+      }
+    }
+
+    return React.isValidElement(child);
+  });
+
+  const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
+
+  const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
+
+  return (
+    <div className={clsx(classes.root, className)} ref={ref} {...other}>
+      {extraAvatars ? (
+        <Avatar
+          className={classes.avatar}
+          style={{
+            marginLeft,
+          }}
+          variant={variant}
+        >
+          +{extraAvatars}
+        </Avatar>
+      ) : null}
+      {children
+        .slice(0, children.length - extraAvatars)
+        .reverse()
+        .map((child) => {
+          return React.cloneElement(child, {
+            className: clsx(child.props.className, classes.avatar),
+            style: {
+              marginLeft,
+              ...child.props.style,
+            },
+            variant: child.props.variant || variant,
+          });
+        })}
+    </div>
+  );
+});
+
+AvatarGroup.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The avatars to stack.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Max avatars to show before +x.
+   * @default 5
+   */
+  max: chainPropTypes(PropTypes.number, (props) => {
+    if (props.max < 2) {
+      throw new Error(
+        [
+          'Material-UI: The prop `max` should be equal to 2 or above.',
+          'A value below is clamped to 2.',
+        ].join('\n'),
+      );
+    }
+  }),
+  /**
+   * Spacing between avatars.
+   * @default 'medium'
+   */
+  spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+  /**
+   * The shape of the avatars.
+   * @default 'circular'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['circular', 'rounded', 'square']),
+    PropTypes.string,
+  ]),
+};
+
+export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup);
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui/src/AvatarGroup/AvatarGroup.test.js
similarity index 100%
rename from packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
rename to packages/material-ui/src/AvatarGroup/AvatarGroup.test.js
diff --git a/packages/material-ui/src/AvatarGroup/index.d.ts b/packages/material-ui/src/AvatarGroup/index.d.ts
new file mode 100644
index 00000000000000..a691e2cb2eff92
--- /dev/null
+++ b/packages/material-ui/src/AvatarGroup/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './AvatarGroup';
+export * from './AvatarGroup';
diff --git a/packages/material-ui/src/AvatarGroup/index.js b/packages/material-ui/src/AvatarGroup/index.js
new file mode 100644
index 00000000000000..20c5443b297112
--- /dev/null
+++ b/packages/material-ui/src/AvatarGroup/index.js
@@ -0,0 +1 @@
+export { default } from './AvatarGroup';
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 7d6dd1c58ad3f2..db51828d6ebd66 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -107,6 +107,9 @@ export * from './Autocomplete';
 export { default as Avatar } from './Avatar';
 export * from './Avatar';
 
+export { default as AvatarGroup } from './AvatarGroup';
+export * from './AvatarGroup';
+
 export { default as Backdrop } from './Backdrop';
 export * from './Backdrop';
 
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index aafa3cae17b32b..80ec328be0eab4 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -33,6 +33,9 @@ export * from './Autocomplete';
 export { default as Avatar } from './Avatar';
 export * from './Avatar';
 
+export { default as AvatarGroup } from './AvatarGroup';
+export * from './AvatarGroup';
+
 export { default as Backdrop } from './Backdrop';
 export * from './Backdrop';
 
diff --git a/packages/material-ui/src/styles/components.d.ts b/packages/material-ui/src/styles/components.d.ts
index d81ee3f8a794ab..6adecbe35b6ea0 100644
--- a/packages/material-ui/src/styles/components.d.ts
+++ b/packages/material-ui/src/styles/components.d.ts
@@ -25,6 +25,10 @@ export interface Components {
     styleOverrides?: ComponentsOverrides['MuiAvatar'];
     variants?: ComponentsVariants['MuiAvatar'];
   };
+  MuiAvatarGroup?: {
+    defaultProps?: ComponentsProps['MuiAvatarGroup'];
+    styleOverrides?: ComponentsOverrides['MuiAvatarGroup'];
+  };
   MuiBackdrop?: {
     defaultProps?: ComponentsProps['MuiBackdrop'];
     styleOverrides?: ComponentsOverrides['MuiBackdrop'];
diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts
index 9b9d72f8bdc8c9..1b6fb9c7d9d448 100644
--- a/packages/material-ui/src/styles/overrides.d.ts
+++ b/packages/material-ui/src/styles/overrides.d.ts
@@ -8,6 +8,7 @@ import { AlertTitleClassKey } from '../AlertTitle';
 import { AppBarClassKey } from '../AppBar';
 import { AutocompleteClassKey } from '../Autocomplete';
 import { AvatarClassKey } from '../Avatar';
+import { AvatarGroupClassKey } from '../AvatarGroup';
 import { BackdropClassKey } from '../Backdrop';
 import { BadgeClassKey } from '../Badge';
 import { BottomNavigationActionClassKey } from '../BottomNavigationAction';
@@ -124,6 +125,7 @@ export interface ComponentNameToClassKey {
   MuiAppBar: AppBarClassKey;
   MuiAutocomplete: AutocompleteClassKey;
   MuiAvatar: AvatarClassKey;
+  MuiAvatarGroup: AvatarGroupClassKey;
   MuiBackdrop: BackdropClassKey;
   MuiBadge: BadgeClassKey;
   MuiBottomNavigation: BottomNavigationClassKey;
diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts
index b9f5ab4c577b6b..26f6046651627f 100644
--- a/packages/material-ui/src/styles/props.d.ts
+++ b/packages/material-ui/src/styles/props.d.ts
@@ -3,6 +3,7 @@ import { AlertTitleProps } from '../AlertTitle';
 import { AppBarProps } from '../AppBar';
 import { AutocompleteProps } from '../Autocomplete';
 import { AvatarProps } from '../Avatar';
+import { AvatarGroupProps } from '../AvatarGroup';
 import { BackdropProps } from '../Backdrop';
 import { BadgeProps } from '../Badge';
 import { BottomNavigationActionProps } from '../BottomNavigationAction';
@@ -124,6 +125,7 @@ export interface ComponentsPropsList {
   MuiAppBar: AppBarProps;
   MuiAutocomplete: AutocompleteProps<any, any, any, any>;
   MuiAvatar: AvatarProps;
+  MuiAvatarGroup: AvatarGroupProps;
   MuiBackdrop: BackdropProps;
   MuiBadge: BadgeProps;
   MuiBottomNavigation: BottomNavigationProps;

From ca74792833d9b08f96894e6ad090121a7e63bcb2 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Sun, 18 Oct 2020 22:05:51 +0200
Subject: [PATCH 04/34] Bump @types/chai from 4.2.12 to 4.2.14 (#23133)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 35384bf2ade587..b699d5571dff40 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2654,9 +2654,9 @@
     "@types/chai" "*"
 
 "@types/chai@*", "@types/chai@^4.2.3":
-  version "4.2.12"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.12.tgz#6160ae454cd89dae05adc3bb97997f488b608201"
-  integrity sha512-aN5IAC8QNtSUdQzxu7lGBgYAOuU1tmRU4c9dIq5OKGf/SBVjXo+ffM2wEjudAWbgpOhy60nLoAGH1xm8fpCKFQ==
+  version "4.2.14"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.14.tgz#44d2dd0b5de6185089375d976b4ec5caf6861193"
+  integrity sha512-G+ITQPXkwTrslfG5L/BksmbLUA0M1iybEsmCWPqzSxsRRhJZimBKJkoMi8fr/CPygPTj4zO5pJH7I2/cm9M7SQ==
 
 "@types/cheerio@*":
   version "0.22.22"

From ac5b4a78712ba6ffd54e33cf247fb44bb5f5f1dd Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Sun, 18 Oct 2020 22:07:26 +0200
Subject: [PATCH 05/34] Bump rollup from 2.28.2 to 2.32.0 (#23136)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b699d5571dff40..f4f690484f4067 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14830,9 +14830,9 @@ rollup-pluginutils@^2.3.1, rollup-pluginutils@^2.8.1:
     estree-walker "^0.6.1"
 
 rollup@^2.10.8:
-  version "2.28.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.28.2.tgz#599ec4978144a82d8a8ec3d37670a8440cb04e4b"
-  integrity sha512-8txbsFBFLmm9Xdt4ByTOGa9Muonmc8MfNjnGAR8U8scJlF1ZW7AgNZa7aqBXaKtlvnYP/ab++fQIq9dB9NWUbg==
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.32.0.tgz#ac58c8e85782bea8aa2d440fc05aba345013582a"
+  integrity sha512-0FIG1jY88uhCP2yP4CfvtKEqPDRmsUwfY1kEOOM+DH/KOGATgaIFd/is1+fQOxsvh62ELzcFfKonwKWnHhrqmw==
   optionalDependencies:
     fsevents "~2.1.2"
 

From 1ceaf62de1de8117d582a22ec755dea9ab8abc9e Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Sun, 18 Oct 2020 22:09:22 +0200
Subject: [PATCH 06/34] Bump @testing-library/react from 11.0.4 to 11.1.0
 (#23140)

---
 yarn.lock | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f4f690484f4067..93aea36d436f8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2536,10 +2536,10 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@testing-library/dom@^7.22.1", "@testing-library/dom@^7.24.2":
-  version "7.24.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.24.3.tgz#dae3071463cf28dc7755b43d9cf2202e34cbb85d"
-  integrity sha512-6eW9fUhEbR423FZvoHRwbWm9RUUByLWGayYFNVvqTnQLYvsNpBS4uEuKH9aqr3trhxFwGVneJUonehL3B1sHJw==
+"@testing-library/dom@^7.22.1", "@testing-library/dom@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.26.0.tgz#da4d052dc426a4ccc916303369c6e7552126f680"
+  integrity sha512-fyKFrBbS1IigaE3FV21LyeC7kSGF84lqTlSYdKmGaHuK2eYQ/bXVPM5vAa2wx/AU1iPD6oQHsxy2QQ17q9AMCg==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.10.3"
@@ -2547,6 +2547,7 @@
     aria-query "^4.2.2"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.1"
+    lz-string "^1.4.4"
     pretty-format "^26.4.2"
 
 "@testing-library/react-hooks@3.4.2":
@@ -2558,12 +2559,12 @@
     "@types/testing-library__react-hooks" "^3.4.0"
 
 "@testing-library/react@^11.0.2":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.0.4.tgz#c84082bfe1593d8fcd475d46baee024452f31dee"
-  integrity sha512-U0fZO2zxm7M0CB5h1+lh31lbAwMSmDMEMGpMT3BUPJwIjDEKYWOV4dx7lb3x2Ue0Pyt77gmz/VropuJnSz/Iew==
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.1.0.tgz#dfb4b3177d05a8ccf156b5fd14a5550e91d7ebe4"
+  integrity sha512-Nfz58jGzW0tgg3irmTB7sa02JLkLnCk+QN3XG6WiaGQYb0Qc4Ok00aujgjdxlIQWZHbb4Zj5ZOIeE9yKFSs4sA==
   dependencies:
     "@babel/runtime" "^7.11.2"
-    "@testing-library/dom" "^7.24.2"
+    "@testing-library/dom" "^7.26.0"
 
 "@trendmicro/react-interpolate@^0.5.5":
   version "0.5.5"

From c1d22e1d27f832519ad8b16bdf3ce81a39783216 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Sun, 18 Oct 2020 22:23:05 +0200
Subject: [PATCH 07/34] Bump @types/yargs from 15.0.7 to 15.0.9 (#23146)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 93aea36d436f8c..5623490ccb4611 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3111,9 +3111,9 @@
     "@types/yargs-parser" "*"
 
 "@types/yargs@^15.0.0", "@types/yargs@^15.0.5":
-  version "15.0.7"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.7.tgz#dad50a7a234a35ef9460737a56024287a3de1d2b"
-  integrity sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==
+  version "15.0.9"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.9.tgz#524cd7998fe810cdb02f26101b699cccd156ff19"
+  integrity sha512-HmU8SeIRhZCWcnRskCs36Q1Q00KBV6Cqh/ora8WN1+22dY07AZdn6Gel8QZ3t26XYPImtcL8WV/eqjhVmMEw4g==
   dependencies:
     "@types/yargs-parser" "*"
 

From 8c69a9483d8ef81dd4b9c5c57e01a52cddadba3c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sun, 18 Oct 2020 22:54:11 +0200
Subject: [PATCH 08/34] Bump @babel/* to 7.12.3 (#23147)

---
 yarn.lock | 1024 +++++++++++++++++++++++++++--------------------------
 1 file changed, 527 insertions(+), 497 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5623490ccb4611..8baffb2ea64049 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -54,9 +54,9 @@
     cross-fetch "3.0.5"
 
 "@babel/cli@^7.10.1":
-  version "7.11.6"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.11.6.tgz#1fcbe61c2a6900c3539c06ee58901141f3558482"
-  integrity sha512-+w7BZCvkewSmaRM6H4L2QM3RL90teqEIHDIFXAmrW33+0jhlymnDAEdqVeCZATvxhQuio1ifoGVlJJbIiH9Ffg==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.1.tgz#e08a0b1cb6fcd4b9eb6a606ba5602c5c0fe24a0c"
+  integrity sha512-eRJREyrfAJ2r42Iaxe8h3v6yyj1wu9OyosaUHW6UImjGf9ahGL9nsFNh7OCopvtcPL8WnEo7tp78wrZaZ6vG9g==
   dependencies:
     commander "^4.0.1"
     convert-source-map "^1.1.0"
@@ -67,7 +67,8 @@
     slash "^2.0.0"
     source-map "^0.5.0"
   optionalDependencies:
-    chokidar "^2.1.8"
+    "@nicolo-ribaudo/chokidar-2" "^2.1.8"
+    chokidar "^3.4.0"
 
 "@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.10.4"
@@ -76,28 +77,24 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/compat-data@^7.10.4", "@babel/compat-data@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.11.0.tgz#e9f73efe09af1355b723a7f39b11bad637d7c99c"
-  integrity sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==
-  dependencies:
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    semver "^5.5.0"
+"@babel/compat-data@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.1.tgz#d7386a689aa0ddf06255005b4b991988021101a0"
+  integrity sha512-725AQupWJZ8ba0jbKceeFblZTY90McUBWMwHhkFQ9q1zKPJ95GUktljFcgcsIVwRnTnRKlcYzfiNImg5G9m6ZQ==
 
 "@babel/core@7.7.7", "@babel/core@>=7.9.0", "@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5":
-  version "7.11.6"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651"
-  integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
+  integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
   dependencies:
     "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.11.6"
-    "@babel/helper-module-transforms" "^7.11.0"
-    "@babel/helpers" "^7.10.4"
-    "@babel/parser" "^7.11.5"
+    "@babel/generator" "^7.12.1"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.1"
+    "@babel/parser" "^7.12.3"
     "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.11.5"
-    "@babel/types" "^7.11.5"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.1"
@@ -107,12 +104,12 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.11.5", "@babel/generator@^7.11.6", "@babel/generator@^7.6.2":
-  version "7.11.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
-  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+"@babel/generator@^7.12.1", "@babel/generator@^7.6.2":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.1.tgz#0d70be32bdaa03d7c51c8597dda76e0df1f15468"
+  integrity sha512-DB+6rafIdc9o72Yc3/Ph5h+6hUjeOp66pF0naQBgUFFuPqzQwIlPTm3xZR7YNvduIMtkDIj2t21LSQwnbCrXvg==
   dependencies:
-    "@babel/types" "^7.11.5"
+    "@babel/types" "^7.12.1"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
@@ -131,14 +128,14 @@
     "@babel/helper-explode-assignable-expression" "^7.10.4"
     "@babel/types" "^7.10.4"
 
-"@babel/helper-builder-react-jsx-experimental@^7.10.4", "@babel/helper-builder-react-jsx-experimental@^7.11.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.11.5.tgz#4ea43dd63857b0a35cd1f1b161dc29b43414e79f"
-  integrity sha512-Vc4aPJnRZKWfzeCBsqTBnzulVNjABVdahSPhtdMD3Vs80ykx4a87jTHtF/VR+alSrDmNvat7l13yrRHauGcHVw==
+"@babel/helper-builder-react-jsx-experimental@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.1.tgz#1f1ad4c95f1d059856d2fdbc0763489d020cd02d"
+  integrity sha512-82to8lR7TofZWbTd3IEZT1xNHfeU/Ef4rDm/GLXddzqDh+yQ19QuGSzqww51aNxVH8rwfRIzL0EUQsvODVhtyw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/types" "^7.11.5"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/types" "^7.12.1"
 
 "@babel/helper-builder-react-jsx@^7.10.4":
   version "7.10.4"
@@ -148,37 +145,35 @@
     "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/types" "^7.10.4"
 
-"@babel/helper-compilation-targets@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
-  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
+"@babel/helper-compilation-targets@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.1.tgz#310e352888fbdbdd8577be8dfdd2afb9e7adcf50"
+  integrity sha512-jtBEif7jsPwP27GPHs06v4WBV0KrE8a/P7n0N0sSvHn2hwUCYnolP/CLmz51IzAW4NlN+HuoBtb9QcwnRo9F/g==
   dependencies:
-    "@babel/compat-data" "^7.10.4"
+    "@babel/compat-data" "^7.12.1"
+    "@babel/helper-validator-option" "^7.12.1"
     browserslist "^4.12.0"
-    invariant "^2.2.4"
-    levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/helper-create-class-features-plugin@^7.10.4", "@babel/helper-create-class-features-plugin@^7.10.5":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
-  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
+"@babel/helper-create-class-features-plugin@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
+  integrity sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==
   dependencies:
     "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-member-expression-to-functions" "^7.10.5"
+    "@babel/helper-member-expression-to-functions" "^7.12.1"
     "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.12.1"
     "@babel/helper-split-export-declaration" "^7.10.4"
 
-"@babel/helper-create-regexp-features-plugin@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz#fdd60d88524659a0b6959c0579925e425714f3b8"
-  integrity sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==
+"@babel/helper-create-regexp-features-plugin@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.1.tgz#18b1302d4677f9dc4740fe8c9ed96680e29d37e8"
+  integrity sha512-rsZ4LGvFTZnzdNZR5HZdmJVuXK8834R5QkF3WvcnBhrlVtF0HSIUC6zbreL9MgjTywhKokn8RIYRiq99+DLAxA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/helper-regex" "^7.10.4"
-    regexpu-core "^4.7.0"
+    regexpu-core "^4.7.1"
 
 "@babel/helper-define-map@^7.10.4":
   version "7.10.5"
@@ -190,11 +185,11 @@
     lodash "^4.17.19"
 
 "@babel/helper-explode-assignable-expression@^7.10.4":
-  version "7.11.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.11.4.tgz#2d8e3470252cc17aba917ede7803d4a7a276a41b"
-  integrity sha512-ux9hm3zR4WV1Y3xXxXkdG/0gxF9nvI0YVmKVhvK9AfMoaQkemL3sJpXw+Xbz65azo8qJiEz2XVDUpK3KYhH3ZQ==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz#8006a466695c4ad86a2a5f2fb15b5f2c31ad5633"
+  integrity sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.12.1"
 
 "@babel/helper-function-name@^7.10.4":
   version "7.10.4"
@@ -219,31 +214,33 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
-"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
-  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+"@babel/helper-member-expression-to-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.1.tgz#fba0f2fcff3fba00e6ecb664bb5e6e26e2d6165c"
+  integrity sha512-k0CIe3tXUKTRSoEx1LQEPFU9vRQfqHtl+kf8eNnDqb4AUJEy5pz6aIiog+YWtVm2jpggjS1laH68bPsR+KWWPQ==
   dependencies:
-    "@babel/types" "^7.11.0"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
-  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.1.tgz#1644c01591a15a2f084dd6d092d9430eb1d1216c"
+  integrity sha512-ZeC1TlMSvikvJNy1v/wPIazCu3NdOwgYZLIkmIyAsGhqkNpiDoQQRmaCK8YP4Pq3GPTLPV9WXaPCJKvx06JxKA==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
-  integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
+"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
+  integrity sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==
   dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-replace-supers" "^7.12.1"
+    "@babel/helper-simple-access" "^7.12.1"
     "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/helper-validator-identifier" "^7.10.4"
     "@babel/template" "^7.10.4"
-    "@babel/types" "^7.11.0"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
     lodash "^4.17.19"
 
 "@babel/helper-optimise-call-expression@^7.10.4":
@@ -265,40 +262,38 @@
   dependencies:
     lodash "^4.17.19"
 
-"@babel/helper-remap-async-to-generator@^7.10.4":
-  version "7.11.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.11.4.tgz#4474ea9f7438f18575e30b0cac784045b402a12d"
-  integrity sha512-tR5vJ/vBa9wFy3m5LLv2faapJLnDFxNWff2SAYkSE4rLUdbp7CdObYFgI7wK4T/Mj4UzpjPwzR8Pzmr5m7MHGA==
+"@babel/helper-remap-async-to-generator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
+  integrity sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/helper-wrap-function" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-replace-supers@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
-  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+"@babel/helper-replace-supers@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.12.1.tgz#f15c9cc897439281891e11d5ce12562ac0cf3fa9"
+  integrity sha512-zJjTvtNJnCFsCXVi5rUInstLd/EIVNmIKA1Q9ynESmMBWPWd+7sdR+G4/wdu+Mppfep0XLyG2m7EBPvjCeFyrw==
   dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-member-expression-to-functions" "^7.12.1"
     "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-simple-access@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
-  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+"@babel/helper-simple-access@^7.10.4", "@babel/helper-simple-access@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz#32427e5aa61547d38eb1e6eaf5fd1426fdad9136"
+  integrity sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==
   dependencies:
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
-  integrity sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
+  integrity sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
   dependencies:
-    "@babel/types" "^7.11.0"
+    "@babel/types" "^7.12.1"
 
 "@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
   version "7.11.0"
@@ -312,24 +307,29 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
+"@babel/helper-validator-option@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
+  integrity sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==
+
 "@babel/helper-wrap-function@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
-  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
+  integrity sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==
   dependencies:
     "@babel/helper-function-name" "^7.10.4"
     "@babel/template" "^7.10.4"
     "@babel/traverse" "^7.10.4"
     "@babel/types" "^7.10.4"
 
-"@babel/helpers@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044"
-  integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==
+"@babel/helpers@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.1.tgz#8a8261c1d438ec18cb890434df4ec768734c1e79"
+  integrity sha512-9JoDSBGoWtmbay98efmT2+mySkwjzeFeAL9BuWNoVQpkPFQF8SIIFUfY5os9u8wVzglzoiPRSW7cuJmBDUt43g==
   dependencies:
     "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
 
 "@babel/highlight@^7.10.4":
   version "7.10.4"
@@ -341,11 +341,11 @@
     js-tokens "^4.0.0"
 
 "@babel/node@^7.10.1":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.10.5.tgz#30866322aa2c0251a9bdd73d07a9167bd1f4ed64"
-  integrity sha512-suosS7zZ2roj+fYVCnDuVezUbRc0sdoyF0Gj/1FzWxD4ebbGiBGtL5qyqHH4NO34B5m4vWWYWgyNhSsrqS8vwA==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.12.1.tgz#66b5ae07b6bf76636e83906405fcfa69bab16c8a"
+  integrity sha512-S4tWOqo3V3ZuJjJNuheSMFIlDaQd6kbvqnQll+tdJTirksTdFHrauQf3d/xW4rgAM+mHJpxTZMHVeIXjCiDViw==
   dependencies:
-    "@babel/register" "^7.10.5"
+    "@babel/register" "^7.12.1"
     commander "^4.0.1"
     core-js "^3.2.1"
     lodash "^4.17.19"
@@ -354,37 +354,37 @@
     resolve "^1.13.1"
     v8flags "^3.1.1"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.11.5", "@babel/parser@^7.7.5", "@babel/parser@^7.8.3":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
-  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.12.1", "@babel/parser@^7.12.3", "@babel/parser@^7.7.5", "@babel/parser@^7.8.3":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd"
+  integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==
 
-"@babel/plugin-proposal-async-generator-functions@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
-  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"
+  integrity sha512-d+/o30tJxFxrA1lhzJqiUcEJdI6jKlNregCv5bASeGf2Q4MXmnwH7viDo7nhx1/ohf09oaH8j1GVYG/e3Yqk6A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.12.1"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@7.10.4", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.10.1", "@babel/plugin-proposal-class-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
-  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
+"@babel/plugin-proposal-class-properties@7.10.4", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.10.1", "@babel/plugin-proposal-class-properties@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
+  integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-proposal-dynamic-import@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
-  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz#43eb5c2a3487ecd98c5c8ea8b5fdb69a2749b2dc"
+  integrity sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
-"@babel/plugin-proposal-export-namespace-from@7.10.4", "@babel/plugin-proposal-export-namespace-from@^7.10.4":
+"@babel/plugin-proposal-export-namespace-from@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
   integrity sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==
@@ -392,78 +392,86 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
-  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz#8b9b8f376b2d88f5dd774e4d24a5cc2e3679b6d4"
+  integrity sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz#d45423b517714eedd5621a9dfdc03fa9f4eb241c"
+  integrity sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
-  integrity sha512-/f8p4z+Auz0Uaf+i8Ekf1iM7wUNLcViFUGiPxKeXvxTSl63B875YPiVdUDdem7hREcI0E0kSpEhS8tF5RphK7Q==
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz#f2c490d36e1b3c9659241034a5d2cd50263a2751"
+  integrity sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
-  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
+  integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
-"@babel/plugin-proposal-numeric-separator@7.10.4", "@babel/plugin-proposal-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
-  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
+"@babel/plugin-proposal-numeric-separator@7.10.4", "@babel/plugin-proposal-numeric-separator@^7.10.4", "@babel/plugin-proposal-numeric-separator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz#0e2c6774c4ce48be412119b4d693ac777f7685a6"
+  integrity sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@7.11.0", "@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.10.1", "@babel/plugin-proposal-object-rest-spread@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz#bd81f95a1f746760ea43b6c2d3d62b11790ad0af"
-  integrity sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==
+"@babel/plugin-proposal-object-rest-spread@7.11.0", "@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.10.1", "@babel/plugin-proposal-object-rest-spread@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
+  integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-transform-parameters" "^7.10.4"
+    "@babel/plugin-transform-parameters" "^7.12.1"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
-  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
+"@babel/plugin-proposal-optional-catch-binding@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz#ccc2421af64d3aae50b558a71cede929a5ab2942"
+  integrity sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
-"@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.10.1", "@babel/plugin-proposal-optional-chaining@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076"
-  integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==
+"@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.10.1", "@babel/plugin-proposal-optional-chaining@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
+  integrity sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
-"@babel/plugin-proposal-private-methods@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
-  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
+"@babel/plugin-proposal-private-methods@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz#86814f6e7a21374c980c10d38b4493e703f4a389"
+  integrity sha512-mwZ1phvH7/NHK6Kf8LP7MYDogGV+DKB1mryFOEwx5EBNQrosvIczzZFTUmWaeujd5xT6G1ELYWUz3CutMhjE1w==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
-  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz#2a183958d417765b9eae334f47758e5d6a82e072"
+  integrity sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-syntax-async-generators@^7.8.0":
@@ -480,10 +488,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-class-properties@^7.10.4", "@babel/plugin-syntax-class-properties@^7.2.0":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
-  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
+"@babel/plugin-syntax-class-properties@^7.12.1", "@babel/plugin-syntax-class-properties@^7.2.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.1.tgz#bcb297c5366e79bebadef509549cd93b04f19978"
+  integrity sha512-U40A76x5gTwmESz+qiqssqmeEsKvcSyvtgktrm0uzcARAmM9I1jR221f6Oq+GmHrcD+LvZDag1UTOTe2fL3TeA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
@@ -501,10 +509,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.4.tgz#53351dd7ae01995e567d04ce42af1a6e0ba846a6"
-  integrity sha512-yxQsX1dJixF4qEEdzVbst3SZQ58Nrooz8NV9Z9GL4byTE25BvJgl5lf0RECUf0fh28rZBb/RYTWn/eeKwCMrZQ==
+"@babel/plugin-syntax-flow@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.1.tgz#a77670d9abe6d63e8acadf4c31bb1eb5a506bbdd"
+  integrity sha512-1lBLLmtxrwpm4VKmtVFselI/P3pX+G63fAtUUt6b2Nzgao77KNDwyuRt90Mj2/9pKobtt68FdvjfqohZjg/FCA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
@@ -515,13 +523,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@7.10.4", "@babel/plugin-syntax-jsx@^7.10.4", "@babel/plugin-syntax-jsx@^7.2.0":
+"@babel/plugin-syntax-jsx@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
   integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-syntax-jsx@^7.12.1", "@babel/plugin-syntax-jsx@^7.2.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926"
+  integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -564,148 +579,148 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-top-level-await@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz#4bbeb8917b54fcf768364e0a81f560e33a3ef57d"
-  integrity sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==
+"@babel/plugin-syntax-top-level-await@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.1.tgz#dd6c0b357ac1bb142d98537450a319625d13d2a0"
+  integrity sha512-i7ooMZFS+a/Om0crxZodrTzNEPJHZrlMVGMTEpFAj6rYY/bKCddB0Dk/YxfPuYXOopuhKk/e1jV6h+WUU9XN3A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-typescript@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.4.tgz#2f55e770d3501e83af217d782cb7517d7bb34d25"
-  integrity sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ==
+"@babel/plugin-syntax-typescript@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.1.tgz#460ba9d77077653803c3dd2e673f76d66b4029e5"
+  integrity sha512-UZNEcCY+4Dp9yYRCAHrHDU+9ZXLYaY9MgBXSRLkB9WjYFRR6quJBumfVrEkUxrePPBwFcpWfNKXqVRQQtm7mMA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-arrow-functions@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
-  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
+"@babel/plugin-transform-arrow-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
+  integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-async-to-generator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
-  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
+"@babel/plugin-transform-async-to-generator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz#3849a49cc2a22e9743cbd6b52926d30337229af1"
+  integrity sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==
   dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-module-imports" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.12.1"
 
-"@babel/plugin-transform-block-scoped-functions@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
-  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
+"@babel/plugin-transform-block-scoped-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz#f2a1a365bde2b7112e0a6ded9067fdd7c07905d9"
+  integrity sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-block-scoping@^7.10.4":
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.11.1.tgz#5b7efe98852bef8d652c0b28144cd93a9e4b5215"
-  integrity sha512-00dYeDE0EVEHuuM+26+0w/SCL0BH2Qy7LwHuI4Hi4MH5gkC8/AqMN5uWFJIsoXZrAphiMm1iXzBw6L2T+eA0ew==
+"@babel/plugin-transform-block-scoping@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz#f0ee727874b42a208a48a586b84c3d222c2bbef1"
+  integrity sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-classes@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz#405136af2b3e218bc4a1926228bc917ab1a0adc7"
-  integrity sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==
+"@babel/plugin-transform-classes@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
+  integrity sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/helper-define-map" "^7.10.4"
     "@babel/helper-function-name" "^7.10.4"
     "@babel/helper-optimise-call-expression" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.12.1"
     "@babel/helper-split-export-declaration" "^7.10.4"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
-  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
+"@babel/plugin-transform-computed-properties@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz#d68cf6c9b7f838a8a4144badbe97541ea0904852"
+  integrity sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-destructuring@^7.10.4", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2":
+"@babel/plugin-transform-destructuring@^7.12.1", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2":
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/@minh.nguyen/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.2.tgz#49de3e25c373fadd11471a2fc99ec0ce07d92f19"
   integrity sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
-  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
+"@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz#a1d16c14862817b6409c0a678d6f9373ca9cd975"
+  integrity sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-duplicate-keys@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
-  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz#745661baba295ac06e686822797a69fbaa2ca228"
+  integrity sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-exponentiation-operator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
-  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
+"@babel/plugin-transform-exponentiation-operator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz#b0f2ed356ba1be1428ecaf128ff8a24f02830ae0"
+  integrity sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-flow-strip-types@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.10.4.tgz#c497957f09e86e3df7296271e9eb642876bf7788"
-  integrity sha512-XTadyuqNst88UWBTdLjM+wEY7BFnY2sYtPyAidfC7M/QaZnSuIZpMvLxqGT7phAcnGyWh/XQFLKcGf04CnvxSQ==
+"@babel/plugin-transform-flow-strip-types@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
+  integrity sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-flow" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.12.1"
 
-"@babel/plugin-transform-for-of@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
-  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
+"@babel/plugin-transform-for-of@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
+  integrity sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-function-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
-  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
+"@babel/plugin-transform-function-name@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz#2ec76258c70fe08c6d7da154003a480620eba667"
+  integrity sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==
   dependencies:
     "@babel/helper-function-name" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
-  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
+"@babel/plugin-transform-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz#d73b803a26b37017ddf9d3bb8f4dc58bfb806f57"
+  integrity sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-member-expression-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
-  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
+"@babel/plugin-transform-member-expression-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz#496038602daf1514a64d43d8e17cbb2755e0c3ad"
+  integrity sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-modules-amd@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
-  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
+"@babel/plugin-transform-modules-amd@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz#3154300b026185666eebb0c0ed7f8415fefcf6f9"
+  integrity sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-module-transforms" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@7.10.4", "@babel/plugin-transform-modules-commonjs@^7.1.0", "@babel/plugin-transform-modules-commonjs@^7.10.4":
+"@babel/plugin-transform-modules-commonjs@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
   integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
@@ -715,243 +730,251 @@
     "@babel/helper-simple-access" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
-  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
+"@babel/plugin-transform-modules-commonjs@^7.1.0", "@babel/plugin-transform-modules-commonjs@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
+  integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-simple-access" "^7.12.1"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz#663fea620d593c93f214a464cd399bf6dc683086"
+  integrity sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==
   dependencies:
     "@babel/helper-hoist-variables" "^7.10.4"
-    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-module-transforms" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-identifier" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-umd@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
-  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
+"@babel/plugin-transform-modules-umd@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz#eb5a218d6b1c68f3d6217b8fa2cc82fec6547902"
+  integrity sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==
   dependencies:
-    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
-  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz#b407f5c96be0d9f5f88467497fa82b30ac3e8753"
+  integrity sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
 
-"@babel/plugin-transform-new-target@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
-  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
+"@babel/plugin-transform-new-target@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz#80073f02ee1bb2d365c3416490e085c95759dec0"
+  integrity sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-object-assign@^7.10.1":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.10.4.tgz#f7c8f54ce8052ccd8b9da9b3358848423221c338"
-  integrity sha512-6zccDhYEICfMeQqIjuY5G09/yhKzG30DKHJeYBQUHIsJH7c2jXSGvgwRalufLAXAq432OSlsEfAOLlzEsQzxVw==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.12.1.tgz#9102b06625f60a5443cc292d32b565373665e1e4"
+  integrity sha512-geUHn4XwHznRAFiuROTy0Hr7bKbpijJCmr1Svt/VNGhpxmp0OrdxURNpWbOAf94nUbL+xj6gbxRVPHWIbRpRoA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-object-super@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
-  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
+"@babel/plugin-transform-object-super@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz#4ea08696b8d2e65841d0c7706482b048bed1066e"
+  integrity sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.12.1"
 
-"@babel/plugin-transform-parameters@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
-  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
+"@babel/plugin-transform-parameters@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz#d2e963b038771650c922eff593799c96d853255d"
+  integrity sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-property-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
-  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
+"@babel/plugin-transform-property-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz#41bc81200d730abb4456ab8b3fbd5537b59adecd"
+  integrity sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-react-constant-elements@^7.10.1", "@babel/plugin-transform-react-constant-elements@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.10.4.tgz#0f485260bf1c29012bb973e7e404749eaac12c9e"
-  integrity sha512-cYmQBW1pXrqBte1raMkAulXmi7rjg3VI6ZLg9QIic8Hq7BtYXaWuZSxsr2siOMI6SWwpxjWfnwhTUrd7JlAV7g==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.12.1.tgz#4471f0851feec3231cc9aaa0dccde39947c1ac1e"
+  integrity sha512-KOHd0tIRLoER+J+8f9DblZDa1fLGPwaaN1DI1TVHuQFOpjHV22C3CUB3obeC4fexHY9nx+fH0hQNvLFFfA1mxA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-display-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
-  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+"@babel/plugin-transform-react-display-name@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz#1cbcd0c3b1d6648c55374a22fc9b6b7e5341c00d"
+  integrity sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-development@^7.10.4":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.11.5.tgz#e1439e6a57ee3d43e9f54ace363fb29cefe5d7b6"
-  integrity sha512-cImAmIlKJ84sDmpQzm4/0q/2xrXlDezQoixy3qoz1NJeZL/8PRon6xZtluvr4H4FzwlDGI5tCcFupMnXGtr+qw==
+"@babel/plugin-transform-react-jsx-development@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.1.tgz#0b8f8cd531dcf7991f1e5f2c10a2a4f1cfc78e36"
+  integrity sha512-IilcGWdN1yNgEGOrB96jbTplRh+V2Pz1EoEwsKsHfX1a/L40cUYuD71Zepa7C+ujv7kJIxnDftWeZbKNEqZjCQ==
   dependencies:
-    "@babel/helper-builder-react-jsx-experimental" "^7.11.5"
+    "@babel/helper-builder-react-jsx-experimental" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
 
-"@babel/plugin-transform-react-jsx-self@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
-  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+"@babel/plugin-transform-react-jsx-self@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.1.tgz#ef43cbca2a14f1bd17807dbe4376ff89d714cf28"
+  integrity sha512-FbpL0ieNWiiBB5tCldX17EtXgmzeEZjFrix72rQYeq9X6nUK38HCaxexzVQrZWXanxKJPKVVIU37gFjEQYkPkA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-source@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
-  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+"@babel/plugin-transform-react-jsx-source@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.1.tgz#d07de6863f468da0809edcf79a1aa8ce2a82a26b"
+  integrity sha512-keQ5kBfjJNRc6zZN1/nVHCd6LLIHq4aUKcVnvE/2l+ZZROSbqoiGFRtT5t3Is89XJxBQaP7NLZX2jgGHdZvvFQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
-  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+"@babel/plugin-transform-react-jsx@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.1.tgz#c2d96c77c2b0e4362cc4e77a43ce7c2539d478cb"
+  integrity sha512-RmKejwnT0T0QzQUzcbP5p1VWlpnP8QHtdhEtLG55ZDQnJNalbF3eeDyu3dnGKvGzFIQiBzFhBYTwvv435p9Xpw==
   dependencies:
     "@babel/helper-builder-react-jsx" "^7.10.4"
-    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
 
-"@babel/plugin-transform-react-pure-annotations@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
-  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+"@babel/plugin-transform-react-pure-annotations@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42"
+  integrity sha512-RqeaHiwZtphSIUZ5I85PEH19LOSzxfuEazoY7/pWASCAIBuATQzpSVD+eT6MebeeZT2F4eSL0u4vw6n4Nm0Mjg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-regenerator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
-  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
+"@babel/plugin-transform-regenerator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753"
+  integrity sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==
   dependencies:
     regenerator-transform "^0.14.2"
 
-"@babel/plugin-transform-reserved-words@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
-  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
+"@babel/plugin-transform-reserved-words@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz#6fdfc8cc7edcc42b36a7c12188c6787c873adcd8"
+  integrity sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-runtime@7.11.5", "@babel/plugin-transform-runtime@^7.10.1":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.11.5.tgz#f108bc8e0cf33c37da031c097d1df470b3a293fc"
-  integrity sha512-9aIoee+EhjySZ6vY5hnLjigHzunBlscx9ANKutkeWTJTx6m5Rbq6Ic01tLvO54lSusR+BxV7u4UDdCmXv5aagg==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
+  integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
   dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-module-imports" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
-  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
+"@babel/plugin-transform-shorthand-properties@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
+  integrity sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-spread@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.11.0.tgz#fa84d300f5e4f57752fe41a6d1b3c554f13f17cc"
-  integrity sha512-UwQYGOqIdQJe4aWNyS7noqAnN2VbaczPLiEtln+zPowRNlD+79w3oi2TWfYe0eZgd+gjZCbsydN7lzWysDt+gw==
+"@babel/plugin-transform-spread@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
+  integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
 
-"@babel/plugin-transform-sticky-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
-  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
+"@babel/plugin-transform-sticky-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.1.tgz#5c24cf50de396d30e99afc8d1c700e8bce0f5caf"
+  integrity sha512-CiUgKQ3AGVk7kveIaPEET1jNDhZZEl1RPMWdTBE1799bdz++SwqDHStmxfCtDfBhQgCl38YRiSnrMuUMZIWSUQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/helper-regex" "^7.10.4"
 
-"@babel/plugin-transform-template-literals@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
-  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
+"@babel/plugin-transform-template-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
+  integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-typeof-symbol@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
-  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz#9ca6be343d42512fbc2e68236a82ae64bc7af78a"
+  integrity sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-typescript@^7.10.4":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.11.0.tgz#2b4879676af37342ebb278216dd090ac67f13abb"
-  integrity sha512-edJsNzTtvb3MaXQwj8403B7mZoGu9ElDJQZOKjGUnvilquxBA3IQoEIOvkX/1O8xfAsnHS/oQhe2w/IXrr+w0w==
+"@babel/plugin-transform-typescript@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.1.tgz#d92cc0af504d510e26a754a7dbc2e5c8cd9c7ab4"
+  integrity sha512-VrsBByqAIntM+EYMqSm59SiMEf7qkmI9dqMt6RbD/wlwueWmYcI0FFK5Fj47pP6DRZm+3teXjosKlwcZJ5lIMw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.5"
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-typescript" "^7.10.4"
+    "@babel/plugin-syntax-typescript" "^7.12.1"
 
-"@babel/plugin-transform-unicode-escapes@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
-  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.1.tgz#5232b9f81ccb07070b7c3c36c67a1b78f1845709"
+  integrity sha512-I8gNHJLIc7GdApm7wkVnStWssPNbSRMPtgHdmH3sRM1zopz09UWPS4x5V4n1yz/MIWTVnJ9sp6IkuXdWM4w+2Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-unicode-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
-  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
+"@babel/plugin-transform-unicode-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz#cc9661f61390db5c65e3febaccefd5c6ac3faecb"
+  integrity sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/polyfill@^7.2.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.11.5.tgz#df550b2ec53abbc2ed599367ec59e64c7a707bb5"
-  integrity sha512-FunXnE0Sgpd61pKSj2OSOs1D44rKTD3pGOfGilZ6LGrrIH0QEtJlTjqOqdF8Bs98JmjfGhni2BBkTfv9KcKJ9g==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.12.1.tgz#1f2d6371d1261bbd961f3c5d5909150e12d0bd96"
+  integrity sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==
   dependencies:
     core-js "^2.6.5"
     regenerator-runtime "^0.13.4"
 
 "@babel/preset-env@7.11.5", "@babel/preset-env@^7.1.6", "@babel/preset-env@^7.10.2":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.5.tgz#18cb4b9379e3e92ffea92c07471a99a2914e4272"
-  integrity sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
+  integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
   dependencies:
-    "@babel/compat-data" "^7.11.0"
-    "@babel/helper-compilation-targets" "^7.10.4"
-    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/compat-data" "^7.12.1"
+    "@babel/helper-compilation-targets" "^7.12.1"
+    "@babel/helper-module-imports" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
-    "@babel/plugin-proposal-class-properties" "^7.10.4"
-    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
-    "@babel/plugin-proposal-export-namespace-from" "^7.10.4"
-    "@babel/plugin-proposal-json-strings" "^7.10.4"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.11.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
-    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
-    "@babel/plugin-proposal-object-rest-spread" "^7.11.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
-    "@babel/plugin-proposal-optional-chaining" "^7.11.0"
-    "@babel/plugin-proposal-private-methods" "^7.10.4"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.1"
+    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+    "@babel/plugin-proposal-json-strings" "^7.12.1"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.1"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-class-properties" "^7.10.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.1"
     "@babel/plugin-syntax-dynamic-import" "^7.8.0"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
@@ -961,54 +984,51 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.10.4"
-    "@babel/plugin-transform-arrow-functions" "^7.10.4"
-    "@babel/plugin-transform-async-to-generator" "^7.10.4"
-    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
-    "@babel/plugin-transform-block-scoping" "^7.10.4"
-    "@babel/plugin-transform-classes" "^7.10.4"
-    "@babel/plugin-transform-computed-properties" "^7.10.4"
-    "@babel/plugin-transform-destructuring" "^7.10.4"
-    "@babel/plugin-transform-dotall-regex" "^7.10.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
-    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
-    "@babel/plugin-transform-for-of" "^7.10.4"
-    "@babel/plugin-transform-function-name" "^7.10.4"
-    "@babel/plugin-transform-literals" "^7.10.4"
-    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
-    "@babel/plugin-transform-modules-amd" "^7.10.4"
-    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
-    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
-    "@babel/plugin-transform-modules-umd" "^7.10.4"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
-    "@babel/plugin-transform-new-target" "^7.10.4"
-    "@babel/plugin-transform-object-super" "^7.10.4"
-    "@babel/plugin-transform-parameters" "^7.10.4"
-    "@babel/plugin-transform-property-literals" "^7.10.4"
-    "@babel/plugin-transform-regenerator" "^7.10.4"
-    "@babel/plugin-transform-reserved-words" "^7.10.4"
-    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
-    "@babel/plugin-transform-spread" "^7.11.0"
-    "@babel/plugin-transform-sticky-regex" "^7.10.4"
-    "@babel/plugin-transform-template-literals" "^7.10.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
-    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
-    "@babel/plugin-transform-unicode-regex" "^7.10.4"
+    "@babel/plugin-syntax-top-level-await" "^7.12.1"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-async-to-generator" "^7.12.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.1"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-computed-properties" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-dotall-regex" "^7.12.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-function-name" "^7.12.1"
+    "@babel/plugin-transform-literals" "^7.12.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+    "@babel/plugin-transform-modules-amd" "^7.12.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+    "@babel/plugin-transform-modules-umd" "^7.12.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+    "@babel/plugin-transform-new-target" "^7.12.1"
+    "@babel/plugin-transform-object-super" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-property-literals" "^7.12.1"
+    "@babel/plugin-transform-regenerator" "^7.12.1"
+    "@babel/plugin-transform-reserved-words" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/plugin-transform-sticky-regex" "^7.12.1"
+    "@babel/plugin-transform-template-literals" "^7.12.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.12.1"
+    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+    "@babel/plugin-transform-unicode-regex" "^7.12.1"
     "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.11.5"
-    browserslist "^4.12.0"
+    "@babel/types" "^7.12.1"
     core-js-compat "^3.6.2"
-    invariant "^2.2.2"
-    levenary "^1.1.1"
     semver "^5.5.0"
 
 "@babel/preset-flow@^7.0.0":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.10.4.tgz#e0d9c72f8cb02d1633f6a5b7b16763aa2edf659f"
-  integrity sha512-XI6l1CptQCOBv+ZKYwynyswhtOKwpZZp5n0LG1QKCo8erRhqjoQV6nvx61Eg30JHpysWQSBwA2AWRU3pBbSY5g==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.12.1.tgz#1a81d376c5a9549e75352a3888f8c273455ae940"
+  integrity sha512-UAoyMdioAhM6H99qPoKvpHMzxmNVXno8GYU/7vZmGaHk6/KqfDYL1W0NxszVbJ2EP271b7e6Ox+Vk2A9QsB3Sw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-flow-strip-types" "^7.10.4"
+    "@babel/plugin-transform-flow-strip-types" "^7.12.1"
 
 "@babel/preset-modules@0.1.4", "@babel/preset-modules@^0.1.3":
   version "0.1.4"
@@ -1022,30 +1042,30 @@
     esutils "^2.0.2"
 
 "@babel/preset-react@7.10.4", "@babel/preset-react@^7.10.1":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
-  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
+  integrity sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-react-display-name" "^7.10.4"
-    "@babel/plugin-transform-react-jsx" "^7.10.4"
-    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
-    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
-    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
-    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.12.1"
+    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-self" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-source" "^7.12.1"
+    "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
 "@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.10.4", "@babel/preset-typescript@^7.7.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.10.4.tgz#7d5d052e52a682480d6e2cc5aa31be61c8c25e36"
-  integrity sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
+  integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-typescript" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.12.1"
 
-"@babel/register@^7.0.0", "@babel/register@^7.10.1", "@babel/register@^7.10.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.11.5.tgz#79becf89e0ddd0fba8b92bc279bc0f5d2d7ce2ea"
-  integrity sha512-CAml0ioKX+kOAvBQDHa/+t1fgOt3qkTIz0TrRtRAT6XY0m5qYZXR85k6/sLCNPMGhYDlCFHCYuU0ybTJbvlC6w==
+"@babel/register@^7.0.0", "@babel/register@^7.10.1", "@babel/register@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.12.1.tgz#cdb087bdfc4f7241c03231f22e15d211acf21438"
+  integrity sha512-XWcmseMIncOjoydKZnWvWi0/5CUCD+ZYKhRwgYlWOrA8fGZ/FjuLRpqtIhLOVD/fvR1b9DQHtZPn68VvhpYf+Q==
   dependencies:
     find-cache-dir "^2.0.0"
     lodash "^4.17.19"
@@ -1054,25 +1074,25 @@
     source-map-support "^0.5.16"
 
 "@babel/runtime-corejs2@^7.10.2":
-  version "7.11.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.11.2.tgz#700a03945ebad0d31ba6690fc8a6bcc9040faa47"
-  integrity sha512-AC/ciV28adSSpEkBglONBWq4/Lvm6GAZuxIoyVtsnUpZMl0bxLtoChEnYAkP+47KyOCayZanojtflUEUJtR/6Q==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.12.1.tgz#494ce3ad84e92b5868b5437af65af6a0eb737da3"
+  integrity sha512-5uSG1M64+OO+DL4U12qTqHDhc1vorwH6suCSPRH+77UVYzxO5TMyziWe/nQNPcPt9Wnl5G7dIYXuZ6MBuW/dFw==
   dependencies:
     core-js "^2.6.5"
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime-corejs3@^7.10.2":
-  version "7.11.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.11.2.tgz#02c3029743150188edeb66541195f54600278419"
-  integrity sha512-qh5IR+8VgFz83VBa6OkaET6uN/mJOhHONuy3m1sgF0CV6mXdPSEBdA7e1eUbVvyNtANjMbg22JUv71BaDXLY6A==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.1.tgz#51b9092befbeeed938335a109dbe0df51451e9dc"
+  integrity sha512-umhPIcMrlBZ2aTWlWjUseW9LjQKxi1dpFlQS8DzsxB//5K+u6GLTC/JliPKHsd5kJVPIU6X/Hy0YvWOYPcMxBw==
   dependencies:
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime@7.0.0", "@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
-  version "7.11.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
-  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1085,25 +1105,25 @@
     "@babel/parser" "^7.10.4"
     "@babel/types" "^7.10.4"
 
-"@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5", "@babel/traverse@^7.4.5", "@babel/traverse@^7.6.2", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
-  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.4.5", "@babel/traverse@^7.6.2", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.1.tgz#941395e0c5cc86d5d3e75caa095d3924526f0c1e"
+  integrity sha512-MA3WPoRt1ZHo2ZmoGKNqi20YnPt0B1S0GTZEPhhd+hw2KGUzBlHuVunj6K4sNuK+reEvyiPwtp0cpaqLzJDmAw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.11.5"
+    "@babel/generator" "^7.12.1"
     "@babel/helper-function-name" "^7.10.4"
     "@babel/helper-split-export-declaration" "^7.11.0"
-    "@babel/parser" "^7.11.5"
-    "@babel/types" "^7.11.5"
+    "@babel/parser" "^7.12.1"
+    "@babel/types" "^7.12.1"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.19"
 
-"@babel/types@7.11.5", "@babel/types@7.8.3", "@babel/types@^7.0.0", "@babel/types@^7.10.2", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
-  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+"@babel/types@7.11.5", "@babel/types@7.8.3", "@babel/types@^7.0.0", "@babel/types@^7.10.2", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
+  integrity sha512-BzSY3NJBKM4kyatSOWh3D/JJ2O3CVzBybHWxtgxnggaxEuaSTTDqeiSb/xk9lrkw2Tbqyivw5ZU4rT+EfznQsA==
   dependencies:
     "@babel/helper-validator-identifier" "^7.10.4"
     lodash "^4.17.19"
@@ -2229,6 +2249,13 @@
   resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.5.tgz#fe559b5ca51c038cb7840e0d669a6d7ef01fe4eb"
   integrity sha512-Gz5z0+ID+KAGto6Tkgv1a340damEw3HG6ANLKwNi5/QSHqQ3JUAVxMuhz3qnL54505I777evpzL89ofWEMIWKw==
 
+"@nicolo-ribaudo/chokidar-2@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8.tgz#eef8d9b47e8dc589499f14d656e8d2dd978c3d14"
+  integrity sha512-FohwULwAebCUKi/akMFyGi7jfc7JXTeMHzKxuP3umRd9mK/2Y7/SMBSI2jX+YLopPXi+PF9l307NmpfxTdCegA==
+  dependencies:
+    chokidar "2.1.8"
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@@ -5109,7 +5136,7 @@ chokidar@2.1.8, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@3.4.2, chokidar@^3.4.1, chokidar@^3.4.2:
+chokidar@3.4.2:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
   integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
@@ -5124,6 +5151,21 @@ chokidar@3.4.2, chokidar@^3.4.1, chokidar@^3.4.2:
   optionalDependencies:
     fsevents "~2.1.2"
 
+chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -9424,13 +9466,6 @@ interpret@^2.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
-invariant@^2.2.2, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 invert-kv@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
@@ -10676,18 +10711,6 @@ lerna@^3.16.4:
     import-local "^2.0.0"
     npmlog "^4.1.2"
 
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
-levenary@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
-  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
-  dependencies:
-    leven "^3.1.0"
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -14181,6 +14204,13 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 readline-sync@^1.4.9:
   version "1.4.10"
   resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.10.tgz#41df7fbb4b6312d673011594145705bf56d8873b"
@@ -14373,10 +14403,10 @@ regexpp@^3.0.0, regexpp@^3.1.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
   integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
-regexpu-core@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
-  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+regexpu-core@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
+  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
   dependencies:
     regenerate "^1.4.0"
     regenerate-unicode-properties "^8.2.0"

From 431c5093c05b0240a9c6060695f84fea3fad1682 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Sun, 18 Oct 2020 22:56:08 +0200
Subject: [PATCH 09/34] Bump eslint-config-prettier from 6.12.0 to 6.13.0
 (#23137)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 8baffb2ea64049..820385f10f48e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7386,9 +7386,9 @@ eslint-config-airbnb@^18.2.0:
     object.entries "^1.1.2"
 
 eslint-config-prettier@^6.11.0:
-  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.12.0.tgz#9eb2bccff727db1c52104f0b49e87ea46605a0d2"
-  integrity sha512-9jWPlFlgNwRUYVoujvWTQ1aMO8o6648r+K7qU7K5Jmkbyqav1fuEZC0COYpGBxyiAJb65Ra9hrmFx19xRGwXWw==
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.13.0.tgz#207d88796b5624e5bb815bbbdfc5891ceb9ebffa"
+  integrity sha512-LcT0i0LSmnzqK2t764pyIt7kKH2AuuqKRTtJTdddWxOiUja9HdG5GXBVF2gmCTvVYWVsTu8J2MhJLVGRh+pj8w==
   dependencies:
     get-stdin "^6.0.0"
 

From 61800cdee1a6a4281e9c371f14b0930bc09a29a6 Mon Sep 17 00:00:00 2001
From: Vikas Raj <vikasraj1911@gmail.com>
Date: Mon, 19 Oct 2020 03:19:32 +0530
Subject: [PATCH 10/34] [examples] Updated nextjs-typescript example to use
 @material-ui/core@next (#23119)

---
 examples/nextjs-with-typescript/package.json     |  8 ++++++--
 examples/nextjs-with-typescript/pages/_app.tsx   |  8 ++++++--
 .../nextjs-with-typescript/pages/_document.tsx   | 16 +++++++++++++++-
 examples/nextjs-with-typescript/pages/about.tsx  |  2 +-
 examples/nextjs-with-typescript/pages/index.tsx  |  2 +-
 5 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/examples/nextjs-with-typescript/package.json b/examples/nextjs-with-typescript/package.json
index df28d997fbf4ea..7ed0c2c52da713 100644
--- a/examples/nextjs-with-typescript/package.json
+++ b/examples/nextjs-with-typescript/package.json
@@ -1,10 +1,14 @@
 {
   "name": "nextjs-with-typescript",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "latest",
+    "@emotion/cache": "latest",
+    "@emotion/core": "latest",
+    "@emotion/styled": "latest",
+    "@material-ui/core": "next",
     "clsx": "latest",
+    "create-emotion-server": "latest",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest"
diff --git a/examples/nextjs-with-typescript/pages/_app.tsx b/examples/nextjs-with-typescript/pages/_app.tsx
index ceda965f74ef29..47b3cce79281ec 100644
--- a/examples/nextjs-with-typescript/pages/_app.tsx
+++ b/examples/nextjs-with-typescript/pages/_app.tsx
@@ -2,9 +2,13 @@ import React from 'react';
 import Head from 'next/head';
 import { AppProps } from 'next/app';
 import { ThemeProvider } from '@material-ui/core/styles';
+import { CacheProvider } from '@emotion/core';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import createCache from '@emotion/cache';
 import theme from '../src/theme';
 
+export const cache = createCache();
+
 export default function MyApp(props: AppProps) {
   const { Component, pageProps } = props;
 
@@ -17,7 +21,7 @@ export default function MyApp(props: AppProps) {
   }, []);
 
   return (
-    <React.Fragment>
+    <CacheProvider value={cache}>
       <Head>
         <title>My page</title>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
@@ -27,6 +31,6 @@ export default function MyApp(props: AppProps) {
         <CssBaseline />
         <Component {...pageProps} />
       </ThemeProvider>
-    </React.Fragment>
+    </CacheProvider>
   );
 }
diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/nextjs-with-typescript/pages/_document.tsx
index f9e3041c9129c4..0dbcf16597d1a0 100644
--- a/examples/nextjs-with-typescript/pages/_document.tsx
+++ b/examples/nextjs-with-typescript/pages/_document.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/core/styles';
+import createEmotionServer from 'create-emotion-server';
 import theme from '../src/theme';
+import { cache } from './_app';
+
+const { extractCritical } = createEmotionServer(cache);
 
 export default class MyDocument extends Document {
   render() {
@@ -59,10 +63,20 @@ MyDocument.getInitialProps = async (ctx) => {
     });
 
   const initialProps = await Document.getInitialProps(ctx);
+  const styles = extractCritical(initialProps.html);
 
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
-    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      sheets.getStyleElement(),
+      <style
+        key="emotion-style-tag"
+        data-emotion-css={styles.ids.join(' ')}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: styles.css }}
+      />,
+    ],
   };
 };
diff --git a/examples/nextjs-with-typescript/pages/about.tsx b/examples/nextjs-with-typescript/pages/about.tsx
index 2d58f7601228a2..0a618e6b710362 100644
--- a/examples/nextjs-with-typescript/pages/about.tsx
+++ b/examples/nextjs-with-typescript/pages/about.tsx
@@ -11,7 +11,7 @@ export default function About() {
     <Container maxWidth="sm">
       <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Next.js with TypeScript example
+          Next.js v5-alpha with TypeScript example
         </Typography>
         <Link href="/">Go to the main page</Link>
         <ProTip />
diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/nextjs-with-typescript/pages/index.tsx
index 808e1465c68ca8..e56501743ecbbd 100644
--- a/examples/nextjs-with-typescript/pages/index.tsx
+++ b/examples/nextjs-with-typescript/pages/index.tsx
@@ -11,7 +11,7 @@ export default function Index() {
     <Container maxWidth="sm">
       <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Next.js with TypeScript example
+          Next.js v5-alpha with TypeScript example
         </Typography>
         <Link href="/about" color="secondary">
           Go to the about page

From 7a319462ff115a004b35da77f24c4f9e5545060d Mon Sep 17 00:00:00 2001
From: Piper <piperchester@users.noreply.github.com>
Date: Mon, 19 Oct 2020 01:33:03 -0700
Subject: [PATCH 11/34] [docs] Fix casing typo (#23148)

---
 README.md                                        | 2 +-
 docs/src/pages/discover-more/showcase/appList.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 550e6f95969479..7a0353233a1cc9 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,7 @@ Yes, it's really all you need to get started as you can see in this live and int
 ## Questions
 
 For _how-to_ questions and other non-issues,
-please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues.
+please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues.
 There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
 
 ## Examples
diff --git a/docs/src/pages/discover-more/showcase/appList.js b/docs/src/pages/discover-more/showcase/appList.js
index ad63178c7bb5ee..181b5041f89e19 100644
--- a/docs/src/pages/discover-more/showcase/appList.js
+++ b/docs/src/pages/discover-more/showcase/appList.js
@@ -529,7 +529,7 @@ const appList = [
   },
   {
     title: 'Swimmy',
-    description: 'An open source forum PWA. 🇯🇵 (Github docs are in English)',
+    description: 'An open source forum PWA. 🇯🇵 (GitHub docs are in English)',
     image: 'swimmy.jpg',
     link: 'https://swimmy.io/',
     source: 'https://github.com/swimmy/swimmy.io',

From e7c4fe3b9671af0f877162a5a728dfc1d0059516 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:50:47 +0200
Subject: [PATCH 12/34] Bump material-ui-popup-state from 1.6.1 to 1.7.0
 (#23129)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 820385f10f48e2..7579b7cf35b034 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11228,9 +11228,9 @@ marked@^1.0.0:
   integrity sha512-tiRxakgbNPBr301ihe/785NntvYyhxlqcL3YaC8CaxJQh7kiaEtrN9B/eK2I2943Yjkh5gw25chYFDQhOMCwMA==
 
 material-ui-popup-state@^1.4.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/material-ui-popup-state/-/material-ui-popup-state-1.6.1.tgz#fc1a93c9111ee20370488aef9c6f2b2da5707604"
-  integrity sha512-I1Cu8hc3RPPTZ7p946q6qQB+n68JuhoiOxclV+wft8bplYGHFLjbNmF59wQMTN6oRZD42QuVtTxDv7LIi0eB8w==
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/material-ui-popup-state/-/material-ui-popup-state-1.7.0.tgz#914ed2b3cc7eec035bc1a4268c11c64022e57973"
+  integrity sha512-C826tPGUlr4nQUjYF1hYyrrshRxCSMY+Lbuzn4ch+QdUtevvgoMKXca8dA9UZ/kH2x64T8V+rqAm1dna/x4iHQ==
   dependencies:
     "@babel/runtime" "^7.1.5"
     "@material-ui/types" "^4.1.1"

From 537d8e3a90f648ca92607e0f984f3e6d81ff6deb Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:50:56 +0200
Subject: [PATCH 13/34] Bump framer-motion from 2.8.0 to 2.9.1 (#23142)

Bumps [framer-motion](https://github.com/framer/motion) from 2.8.0 to 2.9.1.
- [Release notes](https://github.com/framer/motion/releases)
- [Changelog](https://github.com/framer/motion/blob/main/CHANGELOG.md)
- [Commits](https://github.com/framer/motion/commits)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 7579b7cf35b034..f82233b43cad4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8203,9 +8203,9 @@ fragment-cache@^0.2.1:
     map-cache "^0.2.2"
 
 framer-motion@^2.1.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.8.0.tgz#f77ae82eeb8277f6aa0b357fd95b946c273bf226"
-  integrity sha512-ZWuAZmrKIZ+5BKqd6BUTddNijcjoAl7TDbP2JnWUhtRqA6/a0qG8Ku/8+bcLZO00G8KY4B0BzvkbeLCVMgmGIQ==
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.1.tgz#86713730e9503922eedcf5e1bb91a5acc30076f5"
+  integrity sha512-NjEF5u1FkCTS+zRsDWOPPCxWBUWk255WXy4d1FDCC3j6ETJzDXx0V/NUPvwhzyATHbahfX5JdsHWdRe1whNHJg==
   dependencies:
     framesync "^4.1.0"
     hey-listen "^1.0.8"

From ed5de8401cbe85df1c991b74b0447c49c477871c Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:51:23 +0200
Subject: [PATCH 14/34] Bump @types/react-router-dom from 5.1.5 to 5.1.6
 (#23131)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f82233b43cad4b..87fb22be016647 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2945,9 +2945,9 @@
     "@types/react" "*"
 
 "@types/react-router-dom@^5.1.0":
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
-  integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.6.tgz#07b14e7ab1893a837c8565634960dc398564b1fb"
+  integrity sha512-gjrxYqxz37zWEdMVvQtWPFMFj1dRDb4TGOcgyOfSXTrEXdF92L00WE3C471O3TV/RF1oskcStkXsOU0Ete4s/g==
   dependencies:
     "@types/history" "*"
     "@types/react" "*"

From 54826f4589c58722c853569438e7def816fb63cb Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:51:48 +0200
Subject: [PATCH 15/34] Bump emoji-regex from 9.0.0 to 9.1.1 (#23145)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 87fb22be016647..81b40628ca9296 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6967,9 +6967,9 @@ emoji-regex@^8.0.0:
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 emoji-regex@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.0.0.tgz#48a2309cc8a1d2e9d23bc6a67c39b63032e76ea4"
-  integrity sha512-6p1NII1Vm62wni/VR/cUMauVQoxmLVb9csqQlvLz+hO2gk8U2UYDfXHQSUYIBKmZwAKz867IDqG7B+u0mj+M6w==
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.1.1.tgz#1d5ffce26d8191e6c3f3a9d27987b1c5bba7d20a"
+  integrity sha512-AaWyDiNO9rbtMIcGl7tdxMcNu8SOLaDLxmQEFT5JhgKufOJzPPkYmgN2QwqTgw4doWMZZQttC6sUWVQjb+1VdA==
 
 emojis-list@^2.0.0:
   version "2.1.0"

From 7f64f2d22f6bbfadd35a445c39eab8be781fa179 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:52:04 +0200
Subject: [PATCH 16/34] Bump mocha from 8.1.3 to 8.2.0 (#23139)

Bumps [mocha](https://github.com/mochajs/mocha) from 8.1.3 to 8.2.0.
- [Release notes](https://github.com/mochajs/mocha/releases)
- [Changelog](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mochajs/mocha/compare/v8.1.3...v8.2.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
---
 yarn.lock | 236 +++++++++++++++++-------------------------------------
 1 file changed, 73 insertions(+), 163 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 81b40628ca9296..a33d412b086236 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3211,6 +3211,11 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+"@ungap/promise-all-settled@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
+  integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -3931,16 +3936,6 @@ array.prototype.flatmap@^1.2.3:
     es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
 
-array.prototype.map@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
-  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.4"
-
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
@@ -5136,22 +5131,7 @@ chokidar@2.1.8, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
-  integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.4.0"
-  optionalDependencies:
-    fsevents "~2.1.2"
-
-chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2:
+chokidar@3.4.3, chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
   integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
@@ -6392,12 +6372,12 @@ debug@3.1.0, debug@=3.1.0, debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.1.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+debug@4, debug@4.2.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
+  integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
   dependencies:
-    ms "^2.1.1"
+    ms "2.1.2"
 
 debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
@@ -6406,6 +6386,13 @@ debug@^3.1.0, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
+debug@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -6424,6 +6411,11 @@ decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+decamelize@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
+  integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
+
 decimal.js-light@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.0.tgz#ca7faf504c799326df94b0ab920424fdfc125348"
@@ -7251,24 +7243,6 @@ es-abstract@^1.18.0-next.0:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-
-es-get-iterator@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -8091,12 +8065,10 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
-flat@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
-  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
-  dependencies:
-    is-buffer "~2.0.3"
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
 flatted@^2.0.0, flatted@^2.0.1:
   version "2.0.2"
@@ -9518,11 +9490,6 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -9557,7 +9524,7 @@ is-buffer@^1.1.5, is-buffer@~1.1.1:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0, is-buffer@^2.0.2, is-buffer@~2.0.3:
+is-buffer@^2.0.0, is-buffer@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
   integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
@@ -9694,11 +9661,6 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -9746,7 +9708,7 @@ is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
-is-plain-obj@^2.0.0:
+is-plain-obj@^2.0.0, is-plain-obj@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
   integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
@@ -9806,11 +9768,6 @@ is-scoped@^1.0.0:
   dependencies:
     scoped-regex "^1.0.0"
 
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-ssh@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.1.tgz#f349a8cadd24e65298037a522cf7520f2e81a0f3"
@@ -9828,7 +9785,7 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.4, is-string@^1.0.5:
+is-string@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
   integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
@@ -9902,7 +9859,7 @@ isarray@2.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
   integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
 
-isarray@^2.0.1, isarray@^2.0.5:
+isarray@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
@@ -10012,19 +9969,6 @@ istextorbinary@^2.5.1:
     editions "^2.2.0"
     textextensions "^2.5.0"
 
-iterate-iterator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
-  integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
-
-iterate-value@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
-  integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
-  dependencies:
-    es-get-iterator "^1.0.2"
-    iterate-iterator "^1.0.1"
-
 jake@^10.6.1:
   version "10.8.2"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.2.tgz#ebc9de8558160a66d82d0eadc6a2e58fbc500a7b"
@@ -11710,14 +11654,15 @@ mkdirp@0.5.3:
     minimist "^1.2.5"
 
 mocha@^8.0.1:
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-8.1.3.tgz#5e93f873e35dfdd69617ea75f9c68c2ca61c2ac5"
-  integrity sha512-ZbaYib4hT4PpF4bdSO2DohooKXIn4lDeiYqB+vTmCdr6l2woW0b6H3pf5x4sM5nwQMru9RvjjHYWVGltR50ZBw==
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-8.2.0.tgz#f8aa79110b4b5a6580c65d4dd8083c425282624e"
+  integrity sha512-lEWEMq2LMfNJMKeuEwb5UELi+OgFDollXaytR5ggQcHpzG3NP/R7rvixAvF+9/lLsTWhWG+4yD2M70GsM06nxw==
   dependencies:
+    "@ungap/promise-all-settled" "1.1.2"
     ansi-colors "4.1.1"
     browser-stdout "1.3.1"
-    chokidar "3.4.2"
-    debug "4.1.1"
+    chokidar "3.4.3"
+    debug "4.2.0"
     diff "4.0.2"
     escape-string-regexp "4.0.0"
     find-up "5.0.0"
@@ -11728,17 +11673,16 @@ mocha@^8.0.1:
     log-symbols "4.0.0"
     minimatch "3.0.4"
     ms "2.1.2"
-    object.assign "4.1.0"
-    promise.allsettled "1.0.2"
-    serialize-javascript "4.0.0"
-    strip-json-comments "3.0.1"
-    supports-color "7.1.0"
+    nanoid "3.1.12"
+    serialize-javascript "5.0.1"
+    strip-json-comments "3.1.1"
+    supports-color "7.2.0"
     which "2.0.2"
     wide-align "1.1.3"
-    workerpool "6.0.0"
+    workerpool "6.0.2"
     yargs "13.3.2"
     yargs-parser "13.1.2"
-    yargs-unparser "1.6.1"
+    yargs-unparser "2.0.0"
 
 modify-values@^1.0.0:
   version "1.0.1"
@@ -11840,7 +11784,7 @@ nan@^2.12.1, nan@^2.14.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nanoid@^3.1.12:
+nanoid@3.1.12, nanoid@^3.1.12:
   version "3.1.12"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
   integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
@@ -12445,16 +12389,6 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
-  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
-  dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    object-keys "^1.0.11"
-
 object.assign@^4.1.0, object.assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
@@ -13471,17 +13405,6 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
-promise.allsettled@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
-  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
-  dependencies:
-    array.prototype.map "^1.0.1"
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    iterate-value "^1.0.0"
-
 promzard@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
@@ -14197,13 +14120,6 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-readdirp@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
-  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
-  dependencies:
-    picomatch "^2.2.1"
-
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -15057,10 +14973,10 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-javascript@4.0.0, serialize-javascript@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
-  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+serialize-javascript@5.0.1, serialize-javascript@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
+  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
   dependencies:
     randombytes "^2.1.0"
 
@@ -15069,10 +14985,10 @@ serialize-javascript@^2.1.2:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
-serialize-javascript@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
-  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
   dependencies:
     randombytes "^2.1.0"
 
@@ -15879,21 +15795,16 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
-  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
+strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
-  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
-
 strong-log-transformer@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
@@ -16073,10 +15984,10 @@ sugarss@^2.0.0:
   dependencies:
     postcss "^7.0.2"
 
-supports-color@7.1.0, supports-color@^7.0.0, supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+supports-color@7.2.0, supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
@@ -17557,10 +17468,10 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-workerpool@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.0.0.tgz#85aad67fa1a2c8ef9386a1b43539900f61d03d58"
-  integrity sha512-fU2OcNA/GVAJLLyKUoHkAgIhKb0JoCpSjLC/G2vYKxUjVmQwGbRVeoPJ1a8U4pnVofz4AQV5Y/NEw8oKqxEBtA==
+workerpool@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.0.2.tgz#e241b43d8d033f1beb52c7851069456039d1d438"
+  integrity sha512-DSNyvOpFKrNusaaUwk+ej6cBj1bmhLcBfj80elGk+ZIo5JSkq+unB1dLKEOcNfJDZgjGICfhQ0Q5TbP0PvF4+Q==
 
 wrap-ansi@^2.0.0:
   version "2.1.0"
@@ -17791,16 +17702,15 @@ yargs-parser@^20.0.0:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.0.0.tgz#c65a1daaa977ad63cebdd52159147b789a4e19a9"
   integrity sha512-8eblPHTL7ZWRkyjIZJjnGf+TijiKJSwA24svzLRVvtgoi/RZiKa9fFQTrlx0OKLnyHSdt/enrdadji6WFfESVA==
 
-yargs-unparser@1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.1.tgz#bd4b0ee05b4c94d058929c32cb09e3fce71d3c5f"
-  integrity sha512-qZV14lK9MWsGCmcr7u5oXGH0dbGqZAIxTDrWXZDo5zUr6b6iUmelNKO6x6R1dQT24AH3LgRxJpr8meWy2unolA==
+yargs-unparser@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-2.0.0.tgz#f131f9226911ae5d9ad38c432fe809366c2325eb"
+  integrity sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==
   dependencies:
-    camelcase "^5.3.1"
-    decamelize "^1.2.0"
-    flat "^4.1.0"
-    is-plain-obj "^1.1.0"
-    yargs "^14.2.3"
+    camelcase "^6.0.0"
+    decamelize "^4.0.0"
+    flat "^5.0.2"
+    is-plain-obj "^2.1.0"
 
 yargs@13.3.2:
   version "13.3.2"
@@ -17836,7 +17746,7 @@ yargs@^12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yargs@^14.2.2, yargs@^14.2.3:
+yargs@^14.2.2:
   version "14.2.3"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
   integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==

From f65b1024cb8f42e90cafbb0666dc709d72ba83cd Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:52:35 +0200
Subject: [PATCH 17/34] Bump notistack from 1.0.0 to 1.0.1 (#23132)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a33d412b086236..f9f33841da3de0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12157,9 +12157,9 @@ normalize-url@^4.1.0:
   integrity sha512-rjH3yRt0Ssx19mUwS0hrDUOdG9VI+oRLpLHJ7tXRdjcuQ7v7wo6qPvOZppHRrqfslTKr0L2yBhjj4UXd7c3cQg==
 
 notistack@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/notistack/-/notistack-1.0.0.tgz#849ac58fad484852833284ee40bda5e04fbfe649"
-  integrity sha512-kIGwVy8qs2hpcDegLhjTQMlGkJvr7OVUg6mnOcjqwKOCZhCnkMt5h53kP9bPRKQQ3UckCzhkvuEPbyMbyYyRNQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-1.0.1.tgz#647061928b7684b296e9b69384b64416b71202f6"
+  integrity sha512-2T1WkokzRCM8N9EdueaXja160IMFIMHVhRu0fGkDje7qCzwBHlTMZY2NULQzB2GFOO6iGVzl5GCX2XrJIzI8bw==
   dependencies:
     clsx "^1.1.0"
     hoist-non-react-statics "^3.3.0"

From 13f3e9d8db81b40e1b08f43e4d45e37f3926c37d Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 13:52:48 +0200
Subject: [PATCH 18/34] Bump @types/node from 14.11.8 to 14.11.10 (#23130)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.11.8 to 14.11.10.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f9f33841da3de0..d5b17014c2d904 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2878,9 +2878,9 @@
   integrity sha512-vyxR57nv8NfcU0GZu8EUXZLTbCMupIUwy95LJ6lllN+JRPG25CwMHoB1q5xKh8YKhQnHYRAn4yW2yuHbf/5xgg==
 
 "@types/node@*", "@types/node@>= 8", "@types/node@^14.0.26":
-  version "14.11.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.8.tgz#fe2012f2355e4ce08bca44aeb3abbb21cf88d33f"
-  integrity sha512-KPcKqKm5UKDkaYPTuXSx8wEP7vE9GnuaXIZKijwRYcePpZFDVuy2a57LarFKiORbHOuTOOwYzxVxcUzsh2P2Pw==
+  version "14.11.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.10.tgz#8c102aba13bf5253f35146affbf8b26275069bef"
+  integrity sha512-yV1nWZPlMFpoXyoknm4S56y2nlTAuFYaJuQtYRAOU7xA/FJ9RY0Xm7QOkaYMMmr8ESdHIuUb6oQgR/0+2NqlyA==
 
 "@types/node@^12.12.29":
   version "12.12.47"

From 881512a0b3edd01f282d4405f814c38b7f4e3dd6 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Mon, 19 Oct 2020 16:05:33 +0200
Subject: [PATCH 19/34] [examples] Update preact to use the
 @material-ui/core@next  (#23154)

---
 examples/preact/config-overrides.js           |   8 +
 examples/preact/config/env.js                 |  91 ---
 examples/preact/config/jest/cssTransform.js   |  14 -
 examples/preact/config/jest/fileTransform.js  |  31 -
 examples/preact/config/paths.js               |  85 ---
 examples/preact/config/webpack.config.js      | 597 ------------------
 .../preact/config/webpackDevServer.config.js  | 103 ---
 examples/preact/package.json                  | 131 +---
 examples/preact/public/favicon.ico            | Bin 3870 -> 3150 bytes
 examples/preact/public/index.html             |  10 +-
 examples/preact/public/manifest.json          |  10 +
 examples/preact/public/robots.txt             |   3 +
 examples/preact/scripts/build.js              | 181 ------
 examples/preact/scripts/start.js              | 122 ----
 examples/preact/scripts/test.js               |  58 --
 examples/preact/src/App.js                    |  17 +-
 examples/preact/src/Copyright.js              |  15 +
 examples/preact/src/index.js                  |  17 +-
 examples/preact/src/serviceWorker.js          | 139 ++++
 examples/preact/src/setupTests.js             |   5 +
 examples/preact/src/theme.js                  |   4 +-
 21 files changed, 225 insertions(+), 1416 deletions(-)
 create mode 100644 examples/preact/config-overrides.js
 delete mode 100644 examples/preact/config/env.js
 delete mode 100644 examples/preact/config/jest/cssTransform.js
 delete mode 100644 examples/preact/config/jest/fileTransform.js
 delete mode 100644 examples/preact/config/paths.js
 delete mode 100644 examples/preact/config/webpack.config.js
 delete mode 100644 examples/preact/config/webpackDevServer.config.js
 create mode 100644 examples/preact/public/robots.txt
 delete mode 100644 examples/preact/scripts/build.js
 delete mode 100644 examples/preact/scripts/start.js
 delete mode 100644 examples/preact/scripts/test.js
 create mode 100644 examples/preact/src/Copyright.js
 create mode 100644 examples/preact/src/serviceWorker.js
 create mode 100644 examples/preact/src/setupTests.js

diff --git a/examples/preact/config-overrides.js b/examples/preact/config-overrides.js
new file mode 100644
index 00000000000000..9b1b7135552bf9
--- /dev/null
+++ b/examples/preact/config-overrides.js
@@ -0,0 +1,8 @@
+const { addWebpackAlias, override } = require('customize-cra');
+
+module.exports = override(
+  addWebpackAlias({
+    react: 'preact/compat',
+    'react-dom': 'preact/compat',
+  }),
+);
diff --git a/examples/preact/config/env.js b/examples/preact/config/env.js
deleted file mode 100644
index 1e2b63c41124c2..00000000000000
--- a/examples/preact/config/env.js
+++ /dev/null
@@ -1,91 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-  throw new Error('The NODE_ENV environment variable is required but was not specified.');
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      }),
-    );
-  }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-      },
-    );
-  // Stringify all values so we can feed into Webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
-
-  return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;
diff --git a/examples/preact/config/jest/cssTransform.js b/examples/preact/config/jest/cssTransform.js
deleted file mode 100644
index cff74820b9ad4a..00000000000000
--- a/examples/preact/config/jest/cssTransform.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// https://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};
diff --git a/examples/preact/config/jest/fileTransform.js b/examples/preact/config/jest/fileTransform.js
deleted file mode 100644
index 3d2d8d4f2425ac..00000000000000
--- a/examples/preact/config/jest/fileTransform.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// https://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef((props, ref) => ({
-          $$typeof: Symbol.for('react.element'),
-          type: 'svg',
-          ref: ref,
-          key: null,
-          props: Object.assign({}, props, {
-            children: ${assetFilename}
-          })
-        })),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};
diff --git a/examples/preact/config/paths.js b/examples/preact/config/paths.js
deleted file mode 100644
index 4eea313f5325fc..00000000000000
--- a/examples/preact/config/paths.js
+++ /dev/null
@@ -1,85 +0,0 @@
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(inputPath, needsSlash) {
-  const hasSlash = inputPath.endsWith('/');
-  if (hasSlash && !needsSlash) {
-    return inputPath.substr(0, inputPath.length - 1);
-  } else if (!hasSlash && needsSlash) {
-    return `${inputPath}/`;
-  } else {
-    return inputPath;
-  }
-}
-
-const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage;
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// Webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-  return ensureSlash(servedUrl, true);
-}
-
-const moduleFileExtensions = [
-  'web.mjs',
-  'mjs',
-  'web.js',
-  'js',
-  'web.ts',
-  'ts',
-  'web.tsx',
-  'tsx',
-  'json',
-  'web.jsx',
-  'jsx',
-];
-
-// Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find(extension =>
-    fs.existsSync(resolveFn(`${filePath}.${extension}`)),
-  );
-
-  if (extension) {
-    return resolveFn(`${filePath}.${extension}`);
-  }
-
-  return resolveFn(`${filePath}.js`);
-};
-
-// config after eject: we're in ./config/
-module.exports = {
-  dotenv: resolveApp('.env'),
-  appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  appTsConfig: resolveApp('tsconfig.json'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
-  appNodeModules: resolveApp('node_modules'),
-  publicUrl: getPublicUrl(resolveApp('package.json')),
-  servedPath: getServedPath(resolveApp('package.json')),
-};
-
-module.exports.moduleFileExtensions = moduleFileExtensions;
diff --git a/examples/preact/config/webpack.config.js b/examples/preact/config/webpack.config.js
deleted file mode 100644
index 0759961a8f9084..00000000000000
--- a/examples/preact/config/webpack.config.js
+++ /dev/null
@@ -1,597 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// This is the production and development configuration.
-// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
-
-  // Webpack uses `publicPath` to determine where the app is being served from.
-  // It requires a trailing slash, or the file assets will get an incorrect path.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/';
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
-
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
-  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && '';
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
-
-  // common function to get style loaders
-  const getStyleLoaders = (cssOptions, preProcessor) => {
-    const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        options: Object.assign(
-          {},
-          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined,
-        ),
-      },
-      {
-        loader: require.resolve('css-loader'),
-        options: cssOptions,
-      },
-      {
-        // Options for PostCSS as we reference these options twice
-        // Adds vendor prefixing based on your specified browser support in
-        // package.json
-        loader: require.resolve('postcss-loader'),
-        options: {
-          // Necessary for external CSS imports to work
-          // https://github.com/facebook/create-react-app/issues/2677
-          ident: 'postcss',
-          plugins: () => [
-            require('postcss-flexbugs-fixes'),
-            require('postcss-preset-env')({
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 3,
-            }),
-          ],
-          sourceMap: isEnvProduction && shouldUseSourceMap,
-        },
-      },
-    ].filter(Boolean);
-    if (preProcessor) {
-      loaders.push({
-        loader: require.resolve(preProcessor),
-        options: {
-          sourceMap: isEnvProduction && shouldUseSourceMap,
-        },
-      });
-    }
-    return loaders;
-  };
-
-  return {
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-    // Stop compilation early in production
-    bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? 'source-map'
-        : false
-      : isEnvDevelopment && 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: [
-      // Include an alternative client for WebpackDevServer. A client's job is to
-      // connect to WebpackDevServer by a socket and get notified about changes.
-      // When you save a file, the client will either apply hot updates (in case
-      // of CSS changes), or refresh the page (in case of JS changes). When you
-      // make a syntax error, this client will display a syntax error overlay.
-      // Note: instead of the default WebpackDevServer client, we use a custom one
-      // to bring better experience for Create React App users. You can replace
-      // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
-      // Finally, this is your app's code:
-      paths.appIndexJs,
-      // We include the app code last so that if there is a runtime error during
-      // initialization, it doesn't blow up the WebpackDevServer client, and
-      // changing JS code would still trigger a refresh.
-    ].filter(Boolean),
-    output: {
-      // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-      // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-      publicPath: publicPath,
-      // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
-        : isEnvDevelopment && (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-    },
-    optimization: {
-      minimize: isEnvProduction,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // we want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minfication steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-          // Use multi-process parallel running to improve the build speed
-          // Default number of concurrent runs: os.cpus().length - 1
-          parallel: true,
-          // Enable file caching
-          cache: true,
-          sourceMap: shouldUseSourceMap,
-        }),
-        // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-        }),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      runtimeChunk: true,
-    },
-    resolve: {
-      // This allows you to set a fallback for where Webpack should look for modules.
-      // We placed these paths second because we want `node_modules` to "win"
-      // if there are any conflicts. This matches Node resolution mechanism.
-      // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules'].concat(
-        // It is guaranteed to exist because we tweak it in `env.js`
-        process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
-      ),
-      // These are the reasonable defaults supported by the Node ecosystem.
-      // We also include JSX as a common component filename extension to support
-      // some tools, although we do not recommend using it, see:
-      // https://github.com/facebook/create-react-app/issues/290
-      // `web` extension prefixes have been added for better support
-      // for React Native Web.
-      extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
-      alias: {
-        // Support React Native Web
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
-
-        // Use Preact instead of React.
-        react: 'preact/compat',
-        'react-dom': 'preact/compat',
-
-        // Not necessary unless you consume a module using `createClass`
-        // 'create-react-class': 'preact-compat/lib/create-react-class',
-        // // Not necessary unless you consume a module requiring `react-dom-factories`
-        // 'react-dom-factories': 'preact-compat/lib/react-dom-factories'
-      },
-      plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
-        // Prevents users from importing files from outside of src/ (or node_modules/).
-        // This often causes confusion because we only process files within src/ with babel.
-        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-        // please link the files into your node_modules/ and let module-resolution kick in.
-        // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-      ],
-    },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
-    module: {
-      strictExportPresence: true,
-      rules: [
-        // Disable require.ensure as it's not a standard language feature.
-        { parser: { requireEnsure: false } },
-
-        // First, run the linter.
-        // It's important to do this before Babel processes the JS.
-        {
-          test: /\.(js|mjs|jsx)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
-              },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: paths.appSrc,
-        },
-        {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
-          oneOf: [
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
-            {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000,
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // Process application JS with Babel.
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
-            {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
-              include: paths.appSrc,
-              loader: require.resolve('babel-loader'),
-              options: {
-                customize: require.resolve('babel-preset-react-app/webpack-overrides'),
-
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
-                ],
-                // This is a feature of `babel-loader` for webpack (not Babel itself).
-                // It enables caching results in ./node_modules/.cache/babel-loader/
-                // directory for faster rebuilds.
-                cacheDirectory: true,
-                cacheCompression: isEnvProduction,
-                compact: isEnvProduction,
-              },
-            },
-            // Process any JS outside of the app with Babel.
-            // Unlike the application JS, we only compile the standard ES features.
-            {
-              test: /\.(js|mjs)$/,
-              exclude: /@babel(?:\/|\\{1,2})runtime/,
-              loader: require.resolve('babel-loader'),
-              options: {
-                babelrc: false,
-                configFile: false,
-                compact: false,
-                presets: [
-                  [require.resolve('babel-preset-react-app/dependencies'), { helpers: true }],
-                ],
-                cacheDirectory: true,
-                cacheCompression: isEnvProduction,
-
-                // If an error happens in a package, it's possible to be
-                // because it was compiled. Thus, we don't want the browser
-                // debugger to show the original code. Instead, the code
-                // being evaluated would be much more helpful.
-                sourceMaps: false,
-              },
-            },
-            // "postcss" loader applies autoprefixer to our CSS.
-            // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
-            // By default we support CSS Modules with the extension .module.css
-            {
-              test: cssRegex,
-              exclude: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-              }),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-            // using the extension .module.css
-            {
-              test: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
-              }),
-            },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-            // By default we support SASS Modules with the
-            // extensions .module.scss or .module.sass
-            {
-              test: sassRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                },
-                'sass-loader',
-              ),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules, but using SASS
-            // using the extension .module.scss or .module.sass
-            {
-              test: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: true,
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
-                'sass-loader',
-              ),
-            },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
-            {
-              loader: require.resolve('file-loader'),
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // ** STOP ** Are you adding a new loader?
-            // Make sure to add the new loader(s) before the "file" loader.
-          ],
-        },
-      ],
-    },
-    plugins: [
-      // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined,
-        ),
-      ),
-      // Inlines the webpack runtime script. This script is too small to warrant
-      // a network request.
-      isEnvProduction &&
-        shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
-      // Makes some environment variables available in index.html.
-      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-      // In production, it will be an empty string unless you specify "homepage"
-      // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
-      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-      // This gives some necessary context to module not found errors, such as
-      // the requesting resource.
-      new ModuleNotFoundPlugin(paths.appPath),
-      // Makes some environment variables available to the JS code, for example:
-      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-      // It is absolutely essential that NODE_ENV is set to production
-      // during a production build.
-      // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (currently CSS only):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-      // Watcher doesn't work well if you mistype casing in a path so we use
-      // a plugin that prints an error when you attempt to do this.
-      // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for Webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
-      // Generate a manifest file which contains a mapping of all asset filenames
-      // to their corresponding output file so that tools can pick it up without
-      // having to parse `index.html`.
-      new ManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: publicPath,
-      }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
-      isEnvProduction &&
-        new WorkboxWebpackPlugin.GenerateSW({
-          clientsClaim: true,
-          exclude: [/\.map$/, /asset-manifest\.json$/],
-          importWorkboxFrom: 'cdn',
-          navigateFallback: publicUrl + '/index.html',
-          navigateFallbackBlacklist: [
-            // Exclude URLs starting with /_, as they're likely an API call
-            new RegExp('^/_'),
-            // Exclude URLs containing a dot, as they're likely a resource in
-            // public/ and not a SPA route
-            new RegExp('/[^/]+\\.[^/]+$'),
-          ],
-        }),
-      // TypeScript type checking
-      useTypeScript &&
-        new ForkTsCheckerWebpackPlugin({
-          typescript: resolve.sync('typescript', {
-            basedir: paths.appNodeModules,
-          }),
-          async: isEnvDevelopment,
-          useTypescriptIncrementalApi: true,
-          checkSyntacticErrors: true,
-          tsconfig: paths.appTsConfig,
-          reportFiles: [
-            '**',
-            '!**/*.json',
-            '!**/__tests__/**',
-            '!**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-          ],
-          watch: paths.appSrc,
-          silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
-        }),
-    ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
-    // Turn off performance processing because we utilize
-    // our own hints via the FileSizeReporter
-    performance: false,
-  };
-};
diff --git a/examples/preact/config/webpackDevServer.config.js b/examples/preact/config/webpackDevServer.config.js
deleted file mode 100644
index cbf210359d11f3..00000000000000
--- a/examples/preact/config/webpackDevServer.config.js
+++ /dev/null
@@ -1,103 +0,0 @@
-'use strict';
-
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const paths = require('./paths');
-const fs = require('fs');
-
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
-
-module.exports = function(proxy, allowedHost) {
-  return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebook/create-react-app/issues/2271
-    // https://github.com/facebook/create-react-app/issues/2233
-    // While we're investigating better solutions, for now we will take a
-    // compromise. Since our WDS configuration only serves files in the `public`
-    // folder we won't consider accessing them a vulnerability. However, if you
-    // use the `proxy` feature, it gets more dangerous because it can expose
-    // remote code execution vulnerabilities in backends like Django and Rails.
-    // So we will disable the host check normally, but enable it if you have
-    // specified the `proxy` setting. Finally, we let you override it if you
-    // really know what you're doing with a special environment variable.
-    disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
-    // Enable gzip compression of generated files.
-    compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: '/',
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
-    },
-    // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
-    host,
-    overlay: false,
-    historyApiFallback: {
-      // Paths with dots should still use the history fallback.
-      // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
-    },
-    public: allowedHost,
-    proxy,
-    before(app, server) {
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
-      }
-
-      // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
-      // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
-
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
-    },
-  };
-};
diff --git a/examples/preact/package.json b/examples/preact/package.json
index c88aea592bb1f3..ab7db2a698451f 100644
--- a/examples/preact/package.json
+++ b/examples/preact/package.json
@@ -1,117 +1,38 @@
 {
   "name": "preact",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "7.2.2",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/plugin-transform-react-jsx-self": "^7.2.0",
-    "@material-ui/core": "latest",
-    "@svgr/webpack": "4.1.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "9.0.0",
-    "babel-jest": "23.6.0",
-    "babel-loader": "8.0.5",
-    "babel-plugin-named-asset-import": "^0.3.1",
-    "babel-preset-react-app": "^7.0.2",
-    "bfj": "6.1.1",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "css-loader": "1.0.0",
-    "dotenv": "6.0.0",
-    "dotenv-expand": "4.2.0",
-    "eslint": "5.12.0",
-    "eslint-config-react-app": "^3.0.8",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-react": "7.12.4",
-    "file-loader": "2.0.0",
-    "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-alpha.2",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
-    "jest-pnp-resolver": "1.0.2",
-    "jest-resolve": "23.6.0",
-    "jest-watch-typeahead": "^0.2.1",
-    "mini-css-extract-plugin": "0.5.0",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pnp-webpack-plugin": "1.2.1",
-    "postcss-flexbugs-fixes": "4.1.0",
-    "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.5.0",
-    "postcss-safe-parser": "4.0.1",
-    "preact": "^10.0.0-beta.0",
-    "react": "^16.8.6",
-    "react-app-polyfill": "^0.2.2",
-    "react-dev-utils": "^8.0.0",
-    "react-dom": "^16.8.6",
-    "resolve": "1.10.0",
-    "sass-loader": "7.1.0",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.2.2",
-    "url-loader": "1.1.2",
-    "webpack": "4.28.3",
-    "webpack-dev-server": "3.1.14",
-    "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3"
+    "@emotion/core": "latest",
+    "@emotion/styled": "latest",
+    "@material-ui/core": "next",
+    "@testing-library/jest-dom": "latest",
+    "@testing-library/react": "latest",
+    "@testing-library/user-event": "latest",
+    "preact": "latest",
+    "preact-compat": "latest",
+    "react-scripts": "latest"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
-    "test": "node scripts/test.js",
-    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
-    "resolver": "jest-pnp-resolver",
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jsdom",
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ]
   },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
+  "devDependencies": {
+    "customize-cra": "latest",
+    "react-app-rewired": "latest"
   }
 }
diff --git a/examples/preact/public/favicon.ico b/examples/preact/public/favicon.ico
index a11777cc471a4344702741ab1c8a588998b1311a..bcd5dfd67cd0361b78123e95c2dd96031f27f743 100644
GIT binary patch
literal 3150
zcmaKtc{Ei0AIGn;MZ^<@lHD*OV;K7~W1q3jSjJcqNywTkMOhP*k~Oj?GO|6{m(*C2
zC7JA+h<I$-c@W9(>N%%Bp7T4;J@?%2_x=5zbI<2~->=X60stMr0B~{wzpi9D0MG|#
zyuANt7z6;uz%?PEfAnimLl^)6h5ARwGXemG2>?hqQv-I^Gpyh$JH}Ag92}3{$a#z&
zd`il2Sb#$U&e&4#^4R|GTgk!Qs+x*PCL{2+`uB5mqtnqLaaw`*H2oqJ?XF(zUACc2
zSibBrdQzcidqv*TK}rpEv1ie&;Famq2IK5%4c}1Jt2b1x_{y1C!?EU)@`_F)yN*NK
z)(u03@%g%uDawwXGAMm%EnP9FgoucUedioDwL~{6RVO@A-Q$+pwVRR%WYR>{K3E&Q
zzqzT!EEZ$_NHGYM6&PK#CGUV$pTWsiI5#~m>htoJ!vbc0=gm3H8sz8KzIiVN5xdCT
z%;}`UH2Pc8))1VS-unh?v4*H*NIy5On{MRKw7BTmOO9oE2UApwkCl9Z?^dod9M^#w
z51tEZhf+#dpTo#GDDy<bEWGA$<=|8JJ8`t{bCVZ4A=!!(Dnz>#kuzoIjMjZ?%v*h$
z*vwUMOjGc?R0(FjLWkMD)kca4z6~H45FIzQ!Zzu&-yWyMdCBsDr2`l}Q{8fH$H@O<
z$&snNzbqLk?(GIe?!PVh?F~2qk4z^rMcp$P^hw^rUPjyCyoNTRw%;hNOwrCoN?G0E
z!wT^=4Loa9@O{t;Wk(Nj=?ms1Z?UN_;21m%sUm?uib=pg&x|u)8pP#l--$;B9l47n
zUUnMV0sXLe*@Gvy>XWjRoqc2tOzgYn%?g@Lb8C&WsxV1Kjssh^ZBs*Ysr+E6%tsC_
zCo-)hkYY=Bn?wMB4sqm?WS>{kh<6*DO)vXnQpQ9`-_qF6!#b<VC={xV*&!lEsNJc|
z`t*;g-fLc7b7_LnM)Ta?t3vIJLM7sghSx-zRMzeb%4u0$-VyEj(BdgvrPTzeNwt$F
zEIfg<YmdkpE=;j~-BzX!FbtW_53Nsn@RXnAJ3%QrSse4k%XJ=~GI%N6VzajM=J8r~
zj!<cVSAh!k&yr4X#d3-o!Yzw$T2s#YBiVpdba>;3Nf@;#B>e2j$yokl6F|9p1<($2
z=WSr%)Z?^|r6njhgbuMrIN>8JE05u0x5t@_dEfbGn9r0hK4c2vp>(*$GXsjeLL_uz
zWpyfUgdv!~-2N;llVzik#s2*XB*%7u8(^sJv&T3pzaR&<9({17Zs~UY>#ugZZkHBs
zD+>0_an$?}utGp$dcXtyFHnTQZJ}SF=oZ}X07dz~K>^o(vjTzw8ZQc!Fw1W=&Z?9%
zv63|~l}70sJbY?H8ON8j<H;=`G+=`|^e$sliuGbLw8Iim!Ewr$y^uCn5ICD7r{7Ln
zH;!1<P%SIp>)w5=6OpXuaZ}YT03`2%u8{;B0Vafo_iY7&BiQTbRkdJBYL}?%ATfmc
zLG$uXt$@3j#OIjALdT&Ut$=9F8<EGdJ)VPA{^F)=9l8o^O1k>cgV{w_f5eS)PjoVi
z&oemp-SKJ~UuGuCP<tf`^+D0Ssp;_WQ5id(yA1LiiwEjU)zXy4dOw%huD)6Rj!1Cd
z&AhoB&a$9Z505mRqMCf#VRFj!myTXd?(Zc1H=o$crL*W$%l)|z+ZlP>1|iY?J^S&P
z)-IG?O-*=z6kfZrX5H*G=aQ{ZaqnOqP@&+_;nq@mA>EcjgxrYX8EK|Iq4&E&rxR?R
z<O=I6ND<gMq;tYDO(piILIv8wjoVHT3$wOlJ$y@j_D(z?^{V9jX^TV|hdq5muwdcu
zq{rQwJ$5|z4t@JINEzMV-*Rk2wu&e6kWQr$GR(cbsiACnTzCrwJ-cHM=cvIJubkY%
zg}ryq`E4VC7zYN=f?Nor4Y1IaCA=}OP!}t{IdqG`+n;!&_vE)8siLJI6*h4j=(|}#
z19hl4Y=n^X8iOFepolHpaMo*noUV6aK-y?QU%vAt;}WDQR4$_`zP@_D#peuE^vw$6
zY2S^^VQ;nWs)#bgL6-dc6^$o$l+>8N$QOdRwY<X`DuKIVby40Iw%sDU;p6zvCc~ff
zl$0SH;_ct2r|ukF|8YpSJO$5p-5;TXw*D8rC~zC~i{9+Ih$T?W9MKDozlr_t3COdg
zf-;y~c5i3E-wuc$uJE-{dO6(KQU+}R#uo9_81`|gL43Zrl=KnvnJ;yt)6~5})ZBxV
zoxGqjvZCTp$HBirk}WE_O!MkAu7@jK@;I-KmQvAl_^^D`9a_2)atflNVqiFeKR^&>
zr{P`O)=87>YLH<tB^~-!iElm=YCnRFfDVqszi8LLpRH)`dg<c^p<zhH*#~LkERVM}
zFYPeNsR4r(fg|FIDCOT*OTh1BKgvqr`^cm7OsOeb%}wbn&tUxn0Ki~;L_V>tFfGXW
z6P)ucrhj~It_9w<^v5>T6N1U}+BkS))=WX*2JY=}^b2czGhH<`?`(}}qMcpPx_%>M
zM|fs(+I1m&_h(zqp-HgP>re$2O^o$q)xu#fl0ivOJE({du<q;a`}OC8?-%?-JcHw4
zDXjz1UxITzP_o;B>U)a*OD(eYgSi^cdTn}pqcPM(;S)2%1By^Wh%-CaC%>d9hi`7J
zaxL7@;nhA>PE%s99&;z{8>VFgf{u!(-B-x7Of6ueme+ScryL`h(^qKE)DtieWY>-7
zgB)VJESQS4*1LU(2&@pgLvSt{(((C?K_V(rQk``i&5}ZPG;G^FiPlZ$7|-vEmMWlU
z5lQ%iK2nu=h2wd_7>gK@vX=*AG+u~rQP$NwPC`ZA?4nh{3tui1x@bT6-;Rk3yDQ>d
z?3qRD#+PeV7#FAa>s`Xwxsx_oRFcN$StW2=CW<oh>`=qObsT?SD^#^jM1Yk}PSPxJ
zG@-_mnNU_)vM|iLRSI>UMp|hatyS}17R{10IuL0TLlupt>9dR<P*%raE$v@dXIGUv
z1Ep`BX32T#^wS?^xp6U0BtREV1F{F-KgRZV=Vy7XYH4ooAYHr)`$zdR7XjL1Lrx#m
zM`5qjP9vs!f4Qo-rf+8r@t=|_;7O5?Fo~mDYDD6>s_SPQbv7BLYyC#qv16E-y@XZ=
z-!p7I%#r-BVi$nQq3&ssRc_IC%R6$tA&^s_l46880~Wst3@>(|EO<}T4~ci~#!=e;
zD)B>o%1+$ksURD1p7I-<3ehlFyVkqrySf&gg>Bp<brefUF_TT@@`c%GEp3{yjAYV#
zWyI&XXs-Qutym;kFwhB_+1#wU*_mOHW^3Z9a5di9&gX0{E7j|kc1937kYD;Nx4w8|
zEtyqg{?t;$MQ$_0k55&!gt0ac>0Z9?JaG|gyTZ{Cb8SdvAWVmFX7v2ohs!OCc!Udk
zUITUpmZ33rKLI#(&lDj}c<kK0p^!b45kV5jt{;<&B{9gcZN^=<reT+-Jkcaq8c}i~
zI>KA#dpL4Fil=$5pu_wi1XJR<Ms<Hzy-bLUK6{fI*~chP9G}^;nq`|ASCC3>!llw`
zSItPBDEdMHk2>c7#%lBxZ<h*v`Si(R!wEGJET5VLw-4cA&KW~E&kFonpJ^o{oF|{}
zwicO!l9p)>HHvtVUOZ$}v?=?AT~9!Jcqa@IJGuMg(s^7r>pcTrd)pS`{5Cu8WPey`
z9)!!OUUY@L%9Q+bZa*S5`3f_|lFCPN6kdp_M2>{le8;cn^XUsPa+TUk47qd6)IBR%
zk*&Ip?!Ge_gmmdj)BX}P_5o@VI2*wbZ^>UhFju}0gQZh!pP%4XT9{@w;G#b3XK8sN
zF(7i$Jv(IM$8Akys9dhP^^~H2(7BfJp}yDW1#@!CL-!mGcSCnJ599WK9MV@yo_u$v
MDeX2GIKR{Qf5okjU;qFB

literal 3870
zcma);c{J4h9>;%nil|2-o+rCuEF-(I%-F}ijC~o(k~HKAkr0)!FCj~d>`RtpD?8b;
zXOC1OD!V*IsqUwzbMF1)-gEDD=A573Z-&G7^LoAC9|WO7Xc0Cx1g^Zu0u_SjAPB<A
z`RksU20=ur5rmib*S!+l%h4eS4)^Q+0X>3vGa^W|sj)80f#V0@M_CAZTIO(t--xg=
z!sii`1giyH7EKL_+Wi0ab<)&E_0KD!3Rp2^HNB*K2@PHCs4PWSA32*-^7d{9nH2_E
zmC{C*N*)(vEF1_aMamw2A{ZH5aIDqiabnFdJ|y0%aS|64E$`s2ccV~3lR!u<){eS`
z#^Mx6o(iP1Ix%<jZ{9b!^*}EvPeMb_W#+3mPDk@<s^Oh#VM&a2^K;|820}`)peR}+
zJXt@j)V#7+Js?u;Lb#g$HH)e~Ro^hvl6KSLHq)Y3adj<OOD7?;gwee^gNzCxwD?IA
z8?*}E@b*IiVPUPv3?XqzLRv|{4)GKGzjS`)#ukL7W&K6BHn&1}P(skc69cJ?5^C+V
z@yyqLJg;V2Ul%gZ*?2WiB%bNfz1}F^UeTpW^N?dSY@NL3zDD+Tzk$Cg_=cj!M^ot0
zu%qYEoTU9K@kMP2H52_@<2On}lNX!oZ(oWk^?eSfXAa3M8S?8tzISV2V&9A+_-47Y
z>4dv`t@!&Za-K@mTm#vadc{0aWDV*_%EiGK7qMC_(`exc>-$Gb9~W!w_^{*pYRm~G
zBN{nA<l~YIv(*f3@JAyAZDXwp4d;meFk*lN;rx5VQze6aK!n?W9`Uc4pES2K&V3BC
zkTJK{PcIXdQ?hM;i7~K{wRSeU-w9_32aC}+7nN6r5o<=I@CyjQAS~;jsb7p#@eUT2
zkh1M~1>;cm^w$VWg1O^^<6vY`1XCD|s_zv*g*5&V#wv&s#h$xlUilPe4U@I&UXZbL
z0)%9Uj&@yd03n;!7do+bfixH^FeZ-Ema}s;DQX2gY+7g0s(9;`8GyvPY1*vxiF&|w
z>!vA~GA<~JUqH}d;DfBSi^IT*#lrzXl$fNpq0_T1tA+`A$1?(gLb?e#0>UELvljtQ
zK+*74m0jn&)5yk8mLBv;=@}c{t0ztT<<S2g5CX`xuBQVwYJOMIsv7paOX6ypYJL$a
zJ|Vy}#?V4i+kjXzBq)LcuJEA=z^Z2W4WQ1U@0}*!;_q<!3_ls8PhMM3ii*Ci+cF6=
zF!@E<x#%Yvb!P0>v;Avck$S6D`Z)^c0(jiwKhQsn|LDRY&w(Fmi91I7H6S;b0XM{e
zXp0~(T@k_r-!jkLwd1_Vre^v$G4|kh4}=Gi?$AaJ)3I+^m|Zyj#*?Kp@w(lQdJZf4
z#|IJW5z+S^e9@(6hW6N~{pj8|NO*>1)E=%?nNUAkmv~OY&ZV<PHdt%yO<W_%O|c-T
zC%nAvgv?#h>;m-%?pQ_11)hAr0oAwILrlsGawpxx4D43J&K=n+p3WLnlDsQ$b(9+4
z?mO^hmV^F8MV{4<aA#E-8o{y-by8hR1>Lx>(Q=aHhQ1){0d*(e&s%G=i5rq3;t{JC
zmgbn5Nkl)t@fPH$v;af26lyhH!k+#}_&aBK4baYPbZy$5aFx4}ka<ge$nBI}>&qxl
z$=Rh$W;U)>-=S-0=?7FH9dUAd2(q#4TCAHky!$^~;Dz^j|8_wuKc*YzfdA<NJp8x7
z`_}_7!m44CG`<6nLk0r3A}8e>ht@Q&ror?91Dm!N03=4=O!a)I*0q~p0g$Fm$pmr$
zb;wD;STDIi$@M%y1>p&_>%?UP($15gou_ue1u0!4(%81;qcIW8NyxFEvXpiJ|H4wz
z*mFT(qVx1FKufG11hByuX%lPk4t#WZ{>8ka2efjY`~;AL6vWyQKpJun2nRiZYDij$
zP>4jQXPaP$UC$yIVgGa)jDV;F0l^n(V=HMRB5)20V7&r$<L^Phf(W29K>jmk{UUIe
zVjKroK}JAbD>B`2cwNQ&GDLx8{pg`7hbA~grk|W6LgiZ`8y`{Iq0i>t!3p2}MS6S+
zO_ruKyAElt)rdS>CtF7j{&6rP-#c=7evGMt7B6`7HG|-(WL`bDUAjyn+k$mx$C<FS
ztTQ#rrhaxTX7@2TN#`pson<p6thk-4?N)^;_(Up!_V=f}<~kR)zD%o0iiqseIMZqh
zGU`kZGbN)qs{;AuZP?~%PajDo&b&7)!V!+|VO<ediN}{)OvR~sQ<ZYe%O|)8-DTKw
zTXmYP$VLa(Y>H;q2Dz4x;cPP$hW=`pFfLO)!jaCL@V2+F)So3}vg|%O*^T1j>C2lx
zsURO-zIJC$^$g2byVbRIo^w>UxK}74^TqUiRR#7s_X$e)$6iYG1(PcW7un-va-S&u
zHk9-6Zn&>T==A)lM^D~bk{&rFzCi35>UR!ZjQkdSiNX*-;l4z9j*7|q`TBl~Au`5&
z+c)*8?#-tgUR$Zd%Q3bs96w6k7q@#tUn`5rj+r@_sAVVLqco|6O{ILX&U-&-cbVa3
zY?ngHR@%l{;`ri%H*0EhBWrGjv!LE4db?HEWb5mu*t@{kv|XwK8?npOshmzf=vZA@
zVSN9sL~!sn?r(AK)Q7Jk2(|M67Uy3I{eRy<vjA)m;~)jV3DFGzL)eNbs@Sy80roD>
z_l&Y@A>;vjkWN5I2xvFFTLX0i+`{qz7C_@bo`ZUzDugfq4+>a3?1v%)O+YTd6@Ul7
zAfLfm=nhZ`)P~&v90$&UcF+yXm9sq!qCx3^9gzIcO|Y(js^Fj)Rvq>nQAHI92ap=P
z10A4@prk+<s7nQxb0&o?puD0BStB$NLIA{pVg<pW;2=HJ11ZpVkRkF89w0s#3ef?(
zka>AGWCb`2)dQYFuR$|H6iDE8p}9a?#nV2}LBCoCf(Xi2@szia7#gY>b|l!-U`c}@
zLdhvQjc!BdLJvYvzzzngnw51yRYCqh4}$oRCy-z|v3Hc*d|?^Wj=l~18*E~*cR_kU
z{XsxM1i{V*4GujHQ3DBpl2w4FgFR48Nma@HPgnyKoIEY-MqmMeY=I<%oG~l!f<+FN
z1ZY^;10j4M4<Vo=b&OyEfF!Y);yDCJas8bbVhK~blk}<IGME~h)6n~gdmqP>#HYXP
zw5eJpA_y(>uLQ~OucgxDLuf}fVs272FaMxhn4xnDGIyLXnw>Xsd^J8XhcWIwIoQ9}
z%FoSJTAGW(SRGwJwb=@pY7r$uQRK3Zd~XbxU)ts!4XsJrCycrWSI?e!IqwqIR8+Jh
zlRjZ`UO1I!BtJR_2~7AbkbSm%XQqxEPkz6BTGWx8e}nQ=w7bZ|eVP4?*Tb!$(R)iC
z9)&%bS*u(lXqzitAN)Oo=&Ytn>%Hzjc<5liuPi>zC_nw;Z0AE3Y$Jao_Q90R-gl~5
z_xAb2J%eArrC1CN4G$}-zVvCqF1;H;abAu6G*+PDHSYFx@Tdbfox*uEd3}BUyYY-l
zTfEsOqsi#f9^FoLO;ChK<554qkri&Av~SIM*{fEYRE?vH7pTAOmu2pz3X?Wn*!ROX
ztd54huAk&mFBemMooL33RV-*1f0Q3_(7hl$<#*|WF9P!;r;4_+X~k~uKEqdzZ$5Al
zV63X<s4EnR@itBNL^suG_KHV!zgrw6&Bq&`dNv>N<k2!6lBSoSAvQBw$a}{Sg*d5f
zJqeF6lxH}v-(s5jl(8V8Bv*((#aw(*iLTd8#?8FnMLG#}AorDTkK*%$ni#S{e-*jA
zjy$_xALPmR?$A)F?XdsKy|!Ue+lIR5=csS!ZPu7h{Nc+Sd%?*WHR`S5ByDdhQAsNO
zeyx0!D+fx-a_t<57fQ^<7*WTVDog0}WA0F2_h++_I?f`i|C>@)j$FN#cCD;ek1R#l
zv%pGrhB~KWgoCj%GT?%{@@o(AJGt*PG#l3i>lhmb_twKH^EYvacVY-6bsCl5*^~L0
zonm@lk2UvvTKr2RS%}T>^~EYqdL1q4nD%0n&Xqr^cK^`J5W;lRRB^R-O<zOhVxo?8
zb#fjP=~|*nH<rZsU&F20QcP*BR|)$r#sFFtYi6hV=2&f<YJ%JC0IAdIRdHjO(;S%3
zC;L{EqcHO368@u|<ql>8b&HENO||mo0xaD+S=I8RTlIfVgqN@SXDr2&-)we--K7w=
zJVU8?Z+7k9dy;s;^gDkQa`0nz6N{T?(A&Iz)2!DEecLyRa&FI!id#5Z7B*O2=PsR0
zEvc|8{NS^)!d)MDX(97Xw}m&kEO@5jqRaDZ!+%`wYOI<23q|&js`&o4xvjP7D_xv@
z5hEwpsp{HezI9!~6O{~)lLR@oF7?J7i>1|5a~UuoN=q&6N}EJPV_GD`&M*v8Y`^2j
zKII*d_@Fi$+i*YEW+Hbz<W=zs^XxM$!;??OHDS{MUEdOi9{rF;;#a0RO>n{iQk~yP
z>7N{S4)r*!NwQ`(qcN#8SRQsNK6>{)X12nbF`*7#ecO7I)Q$uZsV+xS4E7aUn+U(K
baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@

diff --git a/examples/preact/public/index.html b/examples/preact/public/index.html
index 9b726206b5b811..b24f666be69e68 100644
--- a/examples/preact/public/index.html
+++ b/examples/preact/public/index.html
@@ -2,12 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
     <meta
-      name="viewport"
-      content="initial-scale=1, width=device-width"
+      name="description"
+      content="Web site created using create-react-app"
     />
-    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/examples/preact/public/manifest.json b/examples/preact/public/manifest.json
index 1f2f141fafdeb1..080d6c77ac21bb 100644
--- a/examples/preact/public/manifest.json
+++ b/examples/preact/public/manifest.json
@@ -6,6 +6,16 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",
diff --git a/examples/preact/public/robots.txt b/examples/preact/public/robots.txt
new file mode 100644
index 00000000000000..e9e57dc4d41b9b
--- /dev/null
+++ b/examples/preact/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/preact/scripts/build.js b/examples/preact/scripts/build.js
deleted file mode 100644
index 0512ba6a559ad8..00000000000000
--- a/examples/preact/scripts/build.js
+++ /dev/null
@@ -1,181 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const path = require('path');
-const chalk = require('react-dev-utils/chalk');
-const fs = require('fs-extra');
-const webpack = require('webpack');
-const bfj = require('bfj');
-const configFactory = require('../config/webpack.config');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Process CLI arguments
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
-
-// Generate configuration
-const config = configFactory('production');
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // First, read the current file sizes in build directory.
-    // This lets us display how much they changed later.
-    return measureFileSizesBeforeBuild(paths.appBuild);
-  })
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
-    // Merge with the public folder
-    copyPublicFolder();
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.',
-        );
-        console.log(
-          'To ignore, add ' + chalk.cyan('// eslint-disable-next-line') + ' to the line before.\n',
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
-
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(
-        stats,
-        previousFileSizes,
-        paths.appBuild,
-        WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE,
-      );
-      console.log();
-
-      const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
-      const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn);
-    },
-    err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
-    },
-  )
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
-
-  let compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      let messages;
-      if (err) {
-        if (!err.message) {
-          return reject(err);
-        }
-        messages = formatWebpackMessages({
-          errors: [err.message],
-          warnings: [],
-        });
-      } else {
-        messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true }),
-        );
-      }
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-      if (
-        process.env.CI &&
-        (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-      ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n',
-          ),
-        );
-        return reject(new Error(messages.warnings.join('\n\n')));
-      }
-
-      const resolveArgs = {
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings,
-      };
-      if (writeStatsJson) {
-        return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
-          .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
-      }
-
-      return resolve(resolveArgs);
-    });
-  });
-}
-
-function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
-    dereference: true,
-    filter: file => file !== paths.appHtml,
-  });
-}
diff --git a/examples/preact/scripts/start.js b/examples/preact/scripts/start.js
deleted file mode 100644
index babbb797f1bd18..00000000000000
--- a/examples/preact/scripts/start.js
+++ /dev/null
@@ -1,122 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-if (process.env.HOST) {
-  console.log(
-    chalk.cyan(
-      `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST),
-      )}`,
-    ),
-  );
-  console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`);
-  console.log(`Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`);
-  console.log();
-}
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // We attempt to use the default port but if it is busy, we offer the user to
-    // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
-  })
-  .then(port => {
-    if (port == null) {
-      // We have not found a port.
-      return;
-    }
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const urls = prepareUrls(protocol, HOST, port);
-    const devSocket = {
-      warnings: warnings => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors => devServer.sockWrite(devServer.sockets, 'errors', errors),
-    };
-    // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler({
-      appName,
-      config,
-      devSocket,
-      urls,
-      useYarn,
-      useTypeScript,
-      webpack,
-    });
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
-    // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig);
-    const devServer = new WebpackDevServer(compiler, serverConfig);
-    // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
-      if (isInteractive) {
-        clearConsole();
-      }
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
-        devServer.close();
-        process.exit();
-      });
-    });
-  })
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });
diff --git a/examples/preact/scripts/test.js b/examples/preact/scripts/test.js
deleted file mode 100644
index 6ecfca2ce6d5ee..00000000000000
--- a/examples/preact/scripts/test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-let argv = process.argv.slice(2);
-
-function isInGitRepository() {
-  try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isInMercurialRepository() {
-  try {
-    execSync('hg --cwd . root', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// Watch unless on CI, in coverage mode, explicitly adding `--no-watch`,
-// or explicitly running all tests
-if (
-  !process.env.CI &&
-  argv.indexOf('--coverage') === -1 &&
-  argv.indexOf('--no-watch') === -1 &&
-  argv.indexOf('--watchAll') === -1
-) {
-  // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
-
-// Jest doesn't have this option so we'll remove it
-if (argv.indexOf('--no-watch') !== -1) {
-  argv = argv.filter(arg => arg !== '--no-watch');
-}
-
-jest.run(argv);
diff --git a/examples/preact/src/App.js b/examples/preact/src/App.js
index e3bcbf5415324d..a2123f48b41742 100644
--- a/examples/preact/src/App.js
+++ b/examples/preact/src/App.js
@@ -2,28 +2,15 @@ import React from 'react';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
-import Link from '@material-ui/core/Link';
 import ProTip from './ProTip';
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://material-ui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
+import Copyright from './Copyright';
 
 export default function App() {
   return (
     <Container maxWidth="sm">
       <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Preact v4-beta example
+          Preact v5-alpha example
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/preact/src/Copyright.js b/examples/preact/src/Copyright.js
new file mode 100644
index 00000000000000..62cc86fe418ed9
--- /dev/null
+++ b/examples/preact/src/Copyright.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import MuiLink from '@material-ui/core/Link';
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://material-ui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}
diff --git a/examples/preact/src/index.js b/examples/preact/src/index.js
index e14e674636ffa3..7b3b0e77fe4a33 100644
--- a/examples/preact/src/index.js
+++ b/examples/preact/src/index.js
@@ -1,15 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
 import App from './App';
-import theme from './theme';
+import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
+  <React.StrictMode>
     <App />
-  </ThemeProvider>,
-  document.querySelector('#root'),
+  </React.StrictMode>,
+  document.getElementById('root'),
 );
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/examples/preact/src/serviceWorker.js b/examples/preact/src/serviceWorker.js
new file mode 100644
index 00000000000000..5f21fbd26988ce
--- /dev/null
+++ b/examples/preact/src/serviceWorker.js
@@ -0,0 +1,139 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA',
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.');
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}
diff --git a/examples/preact/src/setupTests.js b/examples/preact/src/setupTests.js
new file mode 100644
index 00000000000000..74b1a275a0ea7d
--- /dev/null
+++ b/examples/preact/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
diff --git a/examples/preact/src/theme.js b/examples/preact/src/theme.js
index b9718a185ec676..21af17c750d59c 100644
--- a/examples/preact/src/theme.js
+++ b/examples/preact/src/theme.js
@@ -1,7 +1,7 @@
-import { red } from '@material-ui/core/colors';
 import { createMuiTheme } from '@material-ui/core/styles';
+import { red } from '@material-ui/core/colors';
 
-// A custom theme for this app
+// Create a theme instance.
 const theme = createMuiTheme({
   palette: {
     primary: {

From 41eede3d4584680a985665dedd60fc853fb4c932 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Mon, 19 Oct 2020 16:18:45 +0200
Subject: [PATCH 20/34] [examples] Update cdn example to use
 @material-ui/core@next (#23153)

---
 examples/cdn/index.html   | 8 ++++----
 examples/cdn/package.json | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/cdn/index.html b/examples/cdn/index.html
index 0d3cf789d198ba..350dcd0db3bdb3 100644
--- a/examples/cdn/index.html
+++ b/examples/cdn/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/@material-ui/core@next/umd/material-ui.development.js" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
     <!-- Fonts to support Material Design -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
@@ -95,13 +95,13 @@
 function App() {
   return (
     <Container maxWidth="sm">
-      <div style={{ marginTop: 24, }}>
+      <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
-          CDN v4-beta example
+          CDN v5-alpha example
         </Typography>
         <ProTip />
         <Copyright />
-      </div>
+      </Box>
     </Container>
   );
 }
diff --git a/examples/cdn/package.json b/examples/cdn/package.json
index eadbd59e98d0df..7b2b45627e6aae 100644
--- a/examples/cdn/package.json
+++ b/examples/cdn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cdn",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "private": true,
   "dependencies": {},
   "scripts": {}

From 7e1ad74fbb65f302775c2154b61767caefb02cbd Mon Sep 17 00:00:00 2001
From: Yan Lee <agdholo@gmail.com>
Date: Mon, 19 Oct 2020 23:56:01 +0800
Subject: [PATCH 21/34] [docs] Fix typo in steppers (#23163)

---
 docs/src/pages/components/steppers/steppers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md
index 8d7585c52f841b..34004243f6c090 100644
--- a/docs/src/pages/components/steppers/steppers.md
+++ b/docs/src/pages/components/steppers/steppers.md
@@ -72,7 +72,7 @@ Vertical steppers are designed for narrow screen sizes. They are ideal for mobil
 
 ## Mobile stepper
 
-This component implements a compact stepper suitable for a mobile device. IT has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.
+This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.
 
 The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress.
 

From 79d09c1d60d7522e660a0b804fb94aa4135ea121 Mon Sep 17 00:00:00 2001
From: MatejKastak <MatejKastak@users.noreply.github.com>
Date: Mon, 19 Oct 2020 17:56:31 +0200
Subject: [PATCH 22/34] [docs] Remove unused style selectors `extendedIcon`
 (#23160)

---
 docs/src/pages/components/buttons/ButtonSizes.js  | 3 ---
 docs/src/pages/components/buttons/ButtonSizes.tsx | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js
index 2e98517f054151..6b2a07184b6d05 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.js
+++ b/docs/src/pages/components/buttons/ButtonSizes.js
@@ -9,9 +9,6 @@ const useStyles = makeStyles((theme) => ({
   margin: {
     margin: theme.spacing(1),
   },
-  extendedIcon: {
-    marginRight: theme.spacing(1),
-  },
 }));
 
 export default function ButtonSizes() {
diff --git a/docs/src/pages/components/buttons/ButtonSizes.tsx b/docs/src/pages/components/buttons/ButtonSizes.tsx
index 4a3dad5b091bc8..eea201ba5ef3b6 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.tsx
+++ b/docs/src/pages/components/buttons/ButtonSizes.tsx
@@ -10,9 +10,6 @@ const useStyles = makeStyles((theme: Theme) =>
     margin: {
       margin: theme.spacing(1),
     },
-    extendedIcon: {
-      marginRight: theme.spacing(1),
-    },
   }),
 );
 

From 3081a2cd34ec501358728359f39345a6d0b6c816 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Mon, 19 Oct 2020 18:02:00 +0200
Subject: [PATCH 23/34] [examples] Remove reason example project (#23158)

---
 .../getting-started/example-projects/example-projects.md | 1 -
 examples/reason/README.md                                | 9 ---------
 2 files changed, 10 deletions(-)
 delete mode 100644 examples/reason/README.md

diff --git a/docs/src/pages/getting-started/example-projects/example-projects.md b/docs/src/pages/getting-started/example-projects/example-projects.md
index 2edc3cdeb34794..be60576c87fce4 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects.md
@@ -14,7 +14,6 @@ You can find some example projects in the [GitHub repository](https://github.com
 - [CDN](https://github.com/mui-org/material-ui/tree/next/examples/cdn)
 - [Plain server-side](https://github.com/mui-org/material-ui/tree/next/examples/ssr)
 - [Use styled-components as style engine](https://github.com/mui-org/material-ui/tree/next/examples/create-react-app-with-styled-components)
-- [Reason React](https://github.com/mui-org/material-ui/tree/next/examples/reason)
 
 Create React App is an awesome project for learning React.
 Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/master/README.md#popular-alternatives) to see which project best fits your needs.
diff --git a/examples/reason/README.md b/examples/reason/README.md
deleted file mode 100644
index 40e1e095fa268e..00000000000000
--- a/examples/reason/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Reason example
-
-## How to use
-
-Download the example [or clone the repo](https://github.com/Tevinthuku/material-ui-reason-react-demo).
-
-## The idea behind the example
-
-[Reason](https://reasonml.github.io/) lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems.

From caff163fe0664a370327b3fde11e1ee00677de5b Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 18:21:13 +0200
Subject: [PATCH 24/34] Bump react from 16.13.1 to 16.14.0 (#23134)

---
 docs/package.json                             |  4 ++--
 package.json                                  |  6 ++---
 packages/material-ui-benchmark/package.json   |  4 ++--
 packages/typescript-to-proptypes/package.json |  1 -
 yarn.lock                                     | 24 +++++++++----------
 5 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 887977570cdff2..ad2c46a1ff7f40 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -93,9 +93,9 @@
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",
     "raw-loader": "^1.0.0",
-    "react": "^16.13.0",
+    "react": "^16.14.0",
     "react-docgen": "^5.0.0-beta.1",
-    "react-dom": "^16.13.0",
+    "react-dom": "^16.14.0",
     "react-draggable": "^4.0.3",
     "react-final-form": "^6.3.0",
     "react-is": "^16.13.0",
diff --git a/package.json b/package.json
index ac6b4004672c2e..7cae43b2cbe3df 100644
--- a/package.json
+++ b/package.json
@@ -130,9 +130,9 @@
     "pretty-format-v24": "npm:pretty-format@24",
     "prop-types": "^15.7.2",
     "puppeteer": "^5.0.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "^16.13.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-test-renderer": "^16.14.0",
     "remark": "^12.0.0",
     "rimraf": "^3.0.0",
     "rollup": "^2.10.8",
diff --git a/packages/material-ui-benchmark/package.json b/packages/material-ui-benchmark/package.json
index f806e8f050f6cc..0914caa796c0ed 100644
--- a/packages/material-ui-benchmark/package.json
+++ b/packages/material-ui-benchmark/package.json
@@ -30,8 +30,8 @@
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "emotion-theming": "^10.0.27",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-jss": "^10.3.0",
     "styled-system": "^5.1.2"
   }
diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json
index fd406e0069b92a..feb78cdce8be52 100644
--- a/packages/typescript-to-proptypes/package.json
+++ b/packages/typescript-to-proptypes/package.json
@@ -36,7 +36,6 @@
     "@types/uuid": "^8.0.0",
     "glob": "^7.1.6",
     "prettier": "^2.0.5",
-    "react": "^16.8.6",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
diff --git a/yarn.lock b/yarn.lock
index d5b17014c2d904..a141d9b4c90173 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13708,10 +13708,10 @@ react-docgen@^5.0.0-beta.1:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.13.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@^16.14.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -13880,10 +13880,10 @@ react-swipeable-views@^0.13.9:
     react-swipeable-views-utils "^0.13.9"
     warning "^4.0.1"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.13.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
-  integrity sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.14.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
+  integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
@@ -13937,10 +13937,10 @@ react-window@^1.8.5:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.13.0, react@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@^16.14.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From c1025b0e536321a8edd665e7ee92d7e26c598adb Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 18:21:36 +0200
Subject: [PATCH 25/34] Bump prismjs from 1.21.0 to 1.22.0 (#23138)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a141d9b4c90173..5c201e429449b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13354,9 +13354,9 @@ prettyjson@^1.2.1:
     minimist "^1.2.0"
 
 prismjs@^1.17.1:
-  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
-  integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa"
+  integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==
   optionalDependencies:
     clipboard "^2.0.0"
 

From 14b3302ce8e477429206b019712588b7446c7e52 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 19 Oct 2020 18:22:01 +0200
Subject: [PATCH 26/34] Bump recast from 0.20.3 to 0.20.4 (#23127)

---
 yarn.lock | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5c201e429449b0..da92febf853b88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4017,14 +4017,7 @@ ast-types@0.13.3:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.3.tgz#50da3f28d17bdbc7969a3a2d83a0e4a72ae755a7"
   integrity sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==
 
-ast-types@0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.1.tgz#0b415043770d7a2cbe4b2770271cbd7d2c9f61b9"
-  integrity sha512-pfSiukbt23P1qMhNnsozLzhMLBs7EEeXqPyvPmnuZM+RMfwfqwDbSVKYflgGuVI7/VehR4oMks0igzdNAg4VeQ==
-  dependencies:
-    tslib "^2.0.1"
-
-ast-types@^0.13.2, ast-types@^0.14.1:
+ast-types@0.14.2, ast-types@^0.13.2, ast-types@^0.14.1:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
   integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==
@@ -14143,13 +14136,12 @@ recast@^0.18.1:
     source-map "~0.6.1"
 
 recast@^0.20.2, recast@^0.20.3:
-  version "0.20.3"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.3.tgz#ac9387e4a59e5c8caef9057a35e306646287a7ef"
-  integrity sha512-jrEPzRV5B7wfRiN0UYMtjgIx1Hp8MRHdLcMYqMNd0DoOe1CB5JmPL/04I7WPuuApCs7LCSisYK/FfKnPEaJrzw==
+  version "0.20.4"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.4.tgz#db55983eac70c46b3fff96c8e467d65ffb4a7abc"
+  integrity sha512-6qLIBGGRcwjrTZGIiBpJVC/NeuXpogXNyRQpqU1zWPUigCphvApoCs9KIwDYh1eDuJ6dAFlQoi/QUyE5KQ6RBQ==
   dependencies:
-    ast-types "0.14.1"
+    ast-types "0.14.2"
     esprima "~4.0.0"
-    private "^0.1.8"
     source-map "~0.6.1"
     tslib "^2.0.1"
 

From 8d00f6d6628790e31d1cbe38d3de21737e893de7 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 19 Oct 2020 22:04:25 +0100
Subject: [PATCH 27/34] [docs] Add page feedback (#22885)

---
 .gitignore                                    |   8 +-
 docs/.env                                     |   1 +
 docs/next.config.js                           |   1 +
 docs/packages/feedback/README.md              | 108 ++++++
 docs/packages/feedback/claudia.json           |  11 +
 docs/packages/feedback/example.json           |   7 +
 docs/packages/feedback/index.js               | 149 ++++++++
 docs/packages/feedback/package.json           |  30 ++
 .../feedback/policies/access-dynamodb.json    |  15 +
 docs/pages/_app.js                            |   2 +-
 docs/src/modules/components/MarkdownDocs.js   |  92 +----
 .../modules/components/MarkdownDocsFooter.js  | 323 ++++++++++++++++++
 docs/src/modules/utils/helpers.js             |  12 +-
 docs/translations/translations.json           |  11 +
 package.json                                  |   3 +-
 yarn.lock                                     | 288 ++++++++++++++--
 16 files changed, 937 insertions(+), 124 deletions(-)
 create mode 100644 docs/.env
 create mode 100644 docs/packages/feedback/README.md
 create mode 100644 docs/packages/feedback/claudia.json
 create mode 100644 docs/packages/feedback/example.json
 create mode 100644 docs/packages/feedback/index.js
 create mode 100644 docs/packages/feedback/package.json
 create mode 100644 docs/packages/feedback/policies/access-dynamodb.json
 create mode 100644 docs/src/modules/components/MarkdownDocsFooter.js

diff --git a/.gitignore b/.gitignore
index fd0c6bfac89eaa..337888cbd21739 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,13 +1,13 @@
-# The best pattern to follow is ignoring editor files in a global .gitignore configuration file.
-# However, in order to prevent issues, editor files are ignored here.
+# It is best to ignoring editor and system files in a local .gitignore configuration file.
+# However, in order to prevent issues, they are ignored here.
+.DS_STORE
 .idea
 .vscode
-
-.DS_STORE
 *.log
 /.eslintcache
 /.nyc_output
 /coverage
+/docs/.env.local
 /docs/.next
 /docs/export
 /examples/**/.cache
diff --git a/docs/.env b/docs/.env
new file mode 100644
index 00000000000000..9908147ec3fb12
--- /dev/null
+++ b/docs/.env
@@ -0,0 +1 @@
+FEEDBACK_URL=https://hgvi836wi8.execute-api.us-east-1.amazonaws.com
\ No newline at end of file
diff --git a/docs/next.config.js b/docs/next.config.js
index 6b857de1bccf98..178ad045e1cffb 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -40,6 +40,7 @@ module.exports = {
           LIB_VERSION: JSON.stringify(pkg.version),
           PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'),
           REACT_MODE: JSON.stringify(reactMode),
+          FEEDBACK_URL: JSON.stringify(process.env.FEEDBACK_URL),
         },
       }),
     ]);
diff --git a/docs/packages/feedback/README.md b/docs/packages/feedback/README.md
new file mode 100644
index 00000000000000..1330cfbf7eb40f
--- /dev/null
+++ b/docs/packages/feedback/README.md
@@ -0,0 +1,108 @@
+# Rating
+
+This Lambda function stores and retrieves page feedback using DynamoDB. It is already deployed in the Material-UI AWS account. Request credentials if you need to update dev for testing, or to deploy a new prod version.
+
+If you wish to deploy your own instance for testing, follow the steps below.
+
+## Prerequisites
+
+Create an AWS profile in ~/.aws/credentials called "claudia" with credentials corresponding to an IAM user with AmazonAPIGatewayAdministrator, AWSLambdaFullAccess and IAMFullAccess policies.
+You can do that with `aws configure --profile claudia`.
+
+Create a table in DynamoDB, with a `string` partition key called `id`, and a sort key called `page`. You can do that from the DynamoDB web console, or using the AWS CLI command line. Here is an example command that will create the `feedback-dev` table with the minimal provisioned throughput:
+
+```bash
+aws dynamodb create-table --profile claudia --region us-east-1 \
+  --attribute-definitions AttributeName=id,AttributeType=S AttributeName=page,AttributeType=S \
+  --key-schema AttributeName=id,KeyType=HASH AttributeName=page,KeyType=RANGE \
+  --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=1 \
+  --query TableDescription.TableArn --output text \
+  --table-name feedback-dev
+```
+
+You will need to repeat this command to create a table for production, for example `feedback-prod`.
+
+For on-demand throughput, replace:
+
+```
+  --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=1 \
+```
+
+with:
+
+```
+  --billing-mode PAY_PER_REQUEST \
+```
+
+The project includes an IAM access policy that will grant the lambda function access to the tables. You can edit the [policies/access-dynamodb.json](policies/access-dynamodb.json) file to change the access permissions. These are only applied on create (`yarn setup`). Alternatively, to avoid inadvetantly pushing changes, use the `--policies` flag with `yarn setup` to refer to a copy of this directory, and exclude it in your `~/.gitignore`.
+
+> ⚠️ You will need to update the "Resource" key in this file with the value returned after creating each table.
+
+## Get started
+
+> ⚠️ When setting up for the first time, you will need to delete the included `claudia.json` file that is specific to the MUI installation. Alternatively, if making changes to the function that you intend to submit back, then to avoid inadvetantly commiting changes to `claudia.json`, use `--config` with each command to create and use a local config file, and exclude this file in your `~/.gitignore`.
+
+To set this up, first [set up the credentials](https://claudiajs.com/tutorials/installing.html#configuring-access-credentials), then:
+
+1. run `yarn install` (from the root workspace) to install the dependencies
+1. Navigate into the directory of this README, e.g. `cd docs/packages/feedback`
+1. run `yarn setup` to create the lambda function on AWS under the default name.
+   This will also ask you for table names for development and production.
+   If you used the above AWS command, they will be `feedback-dev` and `feedback-dev` respectively.
+1. Test the API using the [example requests below](#testing)
+
+For subsequent updates, use the `npm run deploy` command.
+
+## Stage variables
+
+The table name, stored in the API Gateway stage variables, is passed to each request processor in the `request.env` key-value map. Check out [index.js](index.js) to see it in use.
+
+The value is set during the first deployment, using `--configure-table-dev` & `--configure-table-prod`. This works using a post-deploy step (check out the last line of [index.js](index.js) for the actual setup, and [Configuring stage variables using post-deployment steps](https://github.com/claudiajs/claudia-api-builder/blob/master/docs/api.md#configuring-stage-variables-using-post-deployment-steps) for more information about the API).
+
+## The API
+
+- `POST` to `/feedback` - stores a new rating data object
+- `GET` from `/feedback/{id}` - returns all ratings with id `{id}`
+- `GET` from `/rating/average` - returns average ratings for all pages
+
+## Testing
+
+Claudia will print the API URL after it is created (typically something in the format `https://[API ID].execute-api.[REGION].amazonaws.com/<version>`). Replace `<API-URL>` with that value in the examples below:
+
+You can test the API by using `curl` (or using a fancier client like [Postman](https://www.getpostman.com/)). Below are some examples with `curl`.
+
+### Create new feedback
+
+This will create a feedback entry from the data stored in [example.json](example.json). Change the data in the file to create ratings:
+
+```bash
+curl -H "Content-Type: application/json" -X POST --data @example.json <API-URL>/feedback
+```
+
+Add the UUID returned to `example.json` with key `id` to store more feedback under the same id.
+
+### Retrieve feedback
+
+This will get the feedback stored for ID d6890562-3606-4c14-a765-da81919057d1
+
+```bash
+curl <API-URL>/feedback/d6890562-3606-4c14-a765-da81919057d1
+```
+
+### Retrieve average ratings
+
+This will get the average feedback stored for all pages
+
+```bash
+curl <API-URL>/feedback/average
+```
+
+### Testing with the documentation
+
+Create the file `docs/.env.local` containing an environment variable `FEEDBACK_URL` with your API URL without the version. For example:
+
+```sh
+FEEDBACK_URL=https://abcd123ef4.execute-api.us-east-1.amazonaws.com
+```
+
+If already running, restart the local docs site. Feedback should now be posted to your deployment.
diff --git a/docs/packages/feedback/claudia.json b/docs/packages/feedback/claudia.json
new file mode 100644
index 00000000000000..8b578bbc83c6cc
--- /dev/null
+++ b/docs/packages/feedback/claudia.json
@@ -0,0 +1,11 @@
+{
+  "lambda": {
+    "role": "feedback-executor",
+    "name": "feedback",
+    "region": "us-east-1"
+  },
+  "api": {
+    "id": "hgvi836wi8",
+    "module": "index"
+  }
+}
diff --git a/docs/packages/feedback/example.json b/docs/packages/feedback/example.json
new file mode 100644
index 00000000000000..a8c44f332201d6
--- /dev/null
+++ b/docs/packages/feedback/example.json
@@ -0,0 +1,7 @@
+{
+  "page": "/components/cards",
+  "version": "5.0.0",
+  "rating": 5,
+  "comment": "Yay!",
+  "language": "en"
+}
diff --git a/docs/packages/feedback/index.js b/docs/packages/feedback/index.js
new file mode 100644
index 00000000000000..3c6aca1e1133aa
--- /dev/null
+++ b/docs/packages/feedback/index.js
@@ -0,0 +1,149 @@
+/* eslint-disable no-console */
+const ApiBuilder = require('claudia-api-builder');
+const AWS = require('aws-sdk');
+const uuid = require('uuid/v4');
+
+const api = new ApiBuilder();
+const dynamoDb = new AWS.DynamoDB.DocumentClient();
+
+async function dbGet(request, id, page) {
+  const stage = request.context.stage;
+  const params = {
+    TableName: request.env[`${stage}TableName`],
+    Key: {
+      id,
+      page,
+    },
+    ConsistentRead: true,
+  };
+
+  try {
+    console.log('dbGet()', params);
+    const response = await dynamoDb.get(params).promise();
+    console.log({ response });
+    return response.Item;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+async function dbPut(request, id, item = {}) {
+  const stage = request.context.stage;
+  const { page, rating, comment, version, language } = request.body;
+
+  const params = {
+    TableName: request.env[`${stage}TableName`],
+    Item: {
+      id,
+      page,
+      rating,
+      comment,
+      version,
+      language,
+      dateTime: new Date().toString(),
+    },
+  };
+
+  await Object.assign(params.Item, item);
+
+  try {
+    console.log('dbPut()', params);
+    const response = await dynamoDb.put(params).promise();
+    console.log({ response });
+    return params.Item;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+async function dbQuery(request, id) {
+  const stage = request.context.stage;
+  const params = {
+    TableName: request.env[`${stage}TableName`],
+    KeyConditionExpression: 'id = :id',
+    ExpressionAttributeValues: {
+      ':id': id,
+    },
+    ConsistentRead: true,
+  };
+
+  try {
+    console.log('dbQuery()', params);
+    const response = await dynamoDb.query(params).promise();
+    console.log({ response });
+    return response.Items;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+async function updateAverageRating(request, currentUserRating) {
+  console.log('updateAverageRating()');
+
+  const id = 'average';
+  const pageAverage = await dbGet(request, id, request.body.page);
+  const average = (pageAverage && pageAverage.rating) || 0;
+  let count = (pageAverage && pageAverage.count) || 0;
+
+  let rating;
+  if (currentUserRating !== null) {
+    rating = (average * count - currentUserRating + request.body.rating) / count;
+  } else {
+    rating = (average * count + request.body.rating) / (count + 1);
+    count += 1;
+  }
+
+  const newAverageRating = {
+    rating,
+    count,
+    comment: undefined,
+    language: undefined,
+  };
+
+  return dbPut(request, id, newAverageRating);
+}
+
+api.post(
+  '/feedback',
+  async (request) => {
+    console.log('POST /feedback', request.body);
+    const id = request.body.id || uuid();
+
+    let currentRating = null;
+    if (request.body.id) {
+      const userPage = await dbGet(request, id, request.body.page);
+      console.log({ userPage });
+      currentRating = userPage && userPage.rating;
+    }
+
+    try {
+      const result = await dbPut(request, id);
+      await updateAverageRating(request, currentRating);
+      return result;
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  },
+  { success: 201 },
+);
+
+api.get('/feedback/{id}', (request) => {
+  console.log(`GET /feedback/${request.pathParams.id}`);
+  return (async () => {
+    const result = await dbQuery(request, request.pathParams.id);
+    return result.reduce((acc, curr) => {
+      const { rating, comment, count } = curr;
+      acc[curr.page] = { rating, comment, count };
+      return acc;
+    }, {});
+  })();
+});
+
+api.addPostDeployConfig('devTableName', 'DynamoDB Development Table Name:', 'configure-table-dev');
+api.addPostDeployConfig('prodTableName', 'DynamoDB Production Table Name:', 'configure-table-prod');
+
+module.exports = api;
diff --git a/docs/packages/feedback/package.json b/docs/packages/feedback/package.json
new file mode 100644
index 00000000000000..d41fdc0fc2122e
--- /dev/null
+++ b/docs/packages/feedback/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "feedback",
+  "version": "1.0.0",
+  "description": "Store and retrieve page ratings and comments",
+  "main": "./index.js",
+  "license": "MIT",
+  "author": "Material-UI Team",
+  "private": true,
+  "files": [
+    "*.js"
+  ],
+  "scripts": {
+    "claudia": "claudia --profile claudia",
+    "curl": "curl -H \"Content-Type: application/json\" -X POST --data @example.json https://hgvi836wi8.execute-api.us-east-1.amazonaws.com/dev/rating",
+    "setup": "claudia create --profile claudia --version dev --region us-east-1 --api-module index --policies policies --configure-table-dev --configure-table-prod --no-optional-dependencies",
+    "update": "claudia update --profile claudia --version dev --no-optional-dependencies",
+    "deploy": "claudia update --profile claudia --version dev --no-optional-dependencies && claudia --profile claudia set-version --version prod",
+    "reconfigure": "claudia update --profile claudia --configure-db"
+  },
+  "dependencies": {
+    "claudia-api-builder": "^4.1.2",
+    "uuid": "^3.3.2"
+  },
+  "devDependencies": {
+    "claudia": "^5.12.0"
+  },
+  "optionalDependencies": {
+    "aws-sdk": "^2.766.0"
+  }
+}
diff --git a/docs/packages/feedback/policies/access-dynamodb.json b/docs/packages/feedback/policies/access-dynamodb.json
new file mode 100644
index 00000000000000..13e30a4249a318
--- /dev/null
+++ b/docs/packages/feedback/policies/access-dynamodb.json
@@ -0,0 +1,15 @@
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Action": ["dynamodb:DeleteItem", "dynamodb:GetItem", "dynamodb:PutItem", "dynamodb:Query"],
+      "Effect": "Allow",
+      "Resource": "arn:aws:dynamodb:us-east-1:446171413463:table/feedback-dev"
+    },
+    {
+      "Action": ["dynamodb:DeleteItem", "dynamodb:GetItem", "dynamodb:PutItem", "dynamodb:Query"],
+      "Effect": "Allow",
+      "Resource": "arn:aws:dynamodb:us-east-1:446171413463:table/feedback-dev"
+    }
+  ]
+}
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 8fee303314c00d..7d6d0f0b195dda 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -213,7 +213,7 @@ async function registerServiceWorker() {
   if (
     'serviceWorker' in navigator &&
     process.env.NODE_ENV === 'production' &&
-    window.location.host.indexOf('material-ui.com') <= 0
+    window.location.host.indexOf('material-ui.com') !== -1
   ) {
     // register() automatically attempts to refresh the sw.js.
     const registration = await navigator.serviceWorker.register('/sw.js');
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index c7256939ef3fe9..1b145c2d59c618 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -3,18 +3,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import Button from '@material-ui/core/Button';
-import Divider from '@material-ui/core/Divider';
+import NoSsr from '@material-ui/core/NoSsr';
+import { exactProp } from '@material-ui/utils';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import EditPage from 'docs/src/modules/components/EditPage';
 import AppContainer from 'docs/src/modules/components/AppContainer';
-import PageContext from 'docs/src/modules/components/PageContext';
-import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
-import Link from 'docs/src/modules/components/Link';
-import { exactProp } from '@material-ui/utils';
 import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
 import Demo from 'docs/src/modules/components/Demo';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
@@ -23,33 +17,12 @@ import Ad from 'docs/src/modules/components/Ad';
 import AdManager from 'docs/src/modules/components/AdManager';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 import ComponentLinkHeader from 'docs/src/modules/components/ComponentLinkHeader';
+import MarkdownDocsFooter from './MarkdownDocsFooter';
 
 const markdownComponents = {
   'modules/components/ComponentLinkHeader.js': ComponentLinkHeader,
 };
 
-function flattenPages(pages, current = []) {
-  return pages.reduce((items, item) => {
-    if (item.children && item.children.length > 1) {
-      items = flattenPages(item.children, items);
-    } else {
-      items.push(item.children && item.children.length === 1 ? item.children[0] : item);
-    }
-    return items;
-  }, current);
-}
-
-// To replace with .findIndex() once we stop IE11 support.
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
 const styles = (theme) => ({
   root: {
     width: '100%',
@@ -80,18 +53,6 @@ const styles = (theme) => ({
       width: 'calc(100% - 175px - 240px)',
     },
   },
-  footer: {
-    marginTop: theme.spacing(12),
-  },
-  pagination: {
-    margin: theme.spacing(3, 0, 4),
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  pageLinkButton: {
-    textTransform: 'none',
-    fontWeight: theme.typography.fontWeightRegular,
-  },
 });
 
 function MarkdownDocs(props) {
@@ -104,13 +65,6 @@ function MarkdownDocs(props) {
     throw new Error('Missing description in the page');
   }
 
-  const { activePage, pages } = React.useContext(PageContext);
-  const pageList = flattenPages(pages);
-  const currentPageNum = findIndex(pageList, (page) => page.pathname === activePage?.pathname);
-  const currentPage = pageList[currentPageNum];
-  const prevPage = pageList[currentPageNum - 1];
-  const nextPage = pageList[currentPageNum + 1];
-
   return (
     <AppFrame>
       <AdManager>
@@ -184,43 +138,9 @@ function MarkdownDocs(props) {
                 />
               );
             })}
-            <footer className={classes.footer}>
-              {!currentPage ||
-              currentPage.displayNav === false ||
-              (nextPage.displayNav === false && !prevPage) ? null : (
-                <React.Fragment>
-                  <Divider />
-                  <div className={classes.pagination}>
-                    {prevPage ? (
-                      <Button
-                        component={Link}
-                        naked
-                        href={prevPage.pathname}
-                        size="large"
-                        className={classes.pageLinkButton}
-                        startIcon={<ChevronLeftIcon />}
-                      >
-                        {pageToTitleI18n(prevPage, t)}
-                      </Button>
-                    ) : (
-                      <div />
-                    )}
-                    {nextPage.displayNav === false ? null : (
-                      <Button
-                        component={Link}
-                        naked
-                        href={nextPage.pathname}
-                        size="large"
-                        className={classes.pageLinkButton}
-                        endIcon={<ChevronRightIcon />}
-                      >
-                        {pageToTitleI18n(nextPage, t)}
-                      </Button>
-                    )}
-                  </div>
-                </React.Fragment>
-              )}
-            </footer>
+            <NoSsr>
+              <MarkdownDocsFooter />
+            </NoSsr>
           </AppContainer>
         </div>
         {disableToc ? null : <AppTableOfContents items={toc} />}
diff --git a/docs/src/modules/components/MarkdownDocsFooter.js b/docs/src/modules/components/MarkdownDocsFooter.js
new file mode 100644
index 00000000000000..e05abbc625c520
--- /dev/null
+++ b/docs/src/modules/components/MarkdownDocsFooter.js
@@ -0,0 +1,323 @@
+/* eslint-disable no-restricted-globals */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { exactProp } from '@material-ui/utils';
+import { withStyles } from '@material-ui/core/styles';
+import DialogActions from '@material-ui/core/DialogActions';
+import TextField from '@material-ui/core/TextField';
+import Collapse from '@material-ui/core/Collapse';
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
+import ThumbUpIcon from '@material-ui/icons/ThumbUpAlt';
+import ThumbDownIcon from '@material-ui/icons/ThumbDownAlt';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import Snackbar from '@material-ui/core/Snackbar';
+import { getCookie, pageToTitleI18n } from 'docs/src/modules/utils/helpers';
+import PageContext from 'docs/src/modules/components/PageContext';
+import Link from 'docs/src/modules/components/Link';
+
+const styles = (theme) => ({
+  root: {
+    marginTop: theme.spacing(12),
+  },
+  pagination: {
+    margin: theme.spacing(3, 0, 4),
+    display: 'flex',
+    justifyContent: 'space-between',
+    [theme.breakpoints.down('sm')]: {
+      flexWrap: 'wrap',
+    },
+  },
+  pageLinkButton: {
+    textTransform: 'none',
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+  feedbackMessage: {
+    margin: theme.spacing(0, 2),
+  },
+  feedback: {
+    width: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      order: 3,
+      width: '100%',
+    },
+  },
+  hidden: {
+    ariaHidden: 'true',
+    opacity: 0,
+  },
+});
+
+function flattenPages(pages, current = []) {
+  return pages.reduce((items, item) => {
+    if (item.children && item.children.length > 1) {
+      items = flattenPages(item.children, items);
+    } else {
+      items.push(item.children && item.children.length === 1 ? item.children[0] : item);
+    }
+    return items;
+  }, current);
+}
+
+// To replace with .findIndex() once we stop IE11 support.
+function findIndex(array, comp) {
+  for (let i = 0; i < array.length; i += 1) {
+    if (comp(array[i])) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+async function postFeedback(data) {
+  const env = window.location.host.indexOf('material-ui.com') !== -1 ? 'prod' : 'dev';
+  try {
+    const response = await fetch(`${process.env.FEEDBACK_URL}/${env}/feedback`, {
+      method: 'POST',
+      referrerPolicy: 'origin',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    return response.json();
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+async function getUserFeedback(id) {
+  const env = location.hostname === 'material-ui.com' ? 'prod' : 'dev';
+  const URL = `${process.env.FEEDBACK_URL}/${env}/feedback/${id}`;
+
+  try {
+    const response = await fetch(URL, {
+      method: 'GET',
+      cache: 'no-store',
+      referrerPolicy: 'origin',
+    });
+    return response.json();
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+async function submitFeedback(page, rating, comment, language) {
+  const data = {
+    id: getCookie('feedbackId'),
+    page,
+    rating,
+    comment,
+    version: process.env.LIB_VERSION,
+    language,
+  };
+
+  const result = await postFeedback(data);
+  if (result) {
+    document.cookie = `feedbackId=${result.id};path=/;max-age=31536000`;
+    setTimeout(async () => {
+      const userFeedback = await getUserFeedback(result.id);
+      if (userFeedback) {
+        document.cookie = `feedback=${JSON.stringify(userFeedback)};path=/;max-age=31536000`;
+      }
+    });
+  }
+  return result;
+}
+
+function getCurrentRating(pathname) {
+  let userFeedback;
+  if (process.browser) {
+    userFeedback = getCookie('feedback');
+    userFeedback = userFeedback && JSON.parse(userFeedback);
+  }
+  return userFeedback && userFeedback[pathname] && userFeedback[pathname].rating;
+}
+
+function MarkdownDocsFooter(props) {
+  const { classes } = props;
+  const t = useSelector((state) => state.options.t);
+  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const { activePage, pages } = React.useContext(PageContext);
+  const [rating, setRating] = React.useState();
+  const [comment, setComment] = React.useState('');
+  const [commentOpen, setCommentOpen] = React.useState(false);
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [snackbarMessage, setSnackbarMessage] = React.useState(false);
+  const inputRef = React.useRef();
+  const bottomRef = React.useRef();
+  const pageList = flattenPages(pages);
+  const currentPageNum = findIndex(pageList, (page) => page.pathname === activePage?.pathname);
+  const currentPage = pageList[currentPageNum];
+  const prevPage = pageList[currentPageNum - 1];
+  const nextPage = pageList[currentPageNum + 1];
+
+  const setCurrentRatingFromCookie = React.useCallback(() => {
+    setRating(getCurrentRating(currentPage.pathname));
+  }, [currentPage.pathname]);
+
+  React.useEffect(() => {
+    setCurrentRatingFromCookie();
+  }, [setCurrentRatingFromCookie]);
+
+  async function processFeedback() {
+    const result = await submitFeedback(currentPage.pathname, rating, comment, userLanguage);
+    if (result) {
+      setSnackbarMessage(t('feedbackSubmitted'));
+    } else {
+      setCurrentRatingFromCookie();
+      setSnackbarMessage(t('feedbackFailed'));
+    }
+    setSnackbarOpen(true);
+  }
+
+  const handleClickThumb = (vote) => async () => {
+    if (vote !== rating) {
+      setRating(vote);
+      // Focus a hidden element at the bottom of the page
+      // so that the texfield is visible when it opens.
+      bottomRef.current.focus();
+      setCommentOpen(true);
+    }
+  };
+
+  const handleChangeTextfield = (event) => {
+    setComment(event.target.value);
+  };
+
+  const handleSubmitComment = () => {
+    setCommentOpen(false);
+    processFeedback();
+  };
+
+  const handleCancelComment = () => {
+    setCommentOpen(false);
+    setCurrentRatingFromCookie();
+  };
+
+  const handleEntered = () => {
+    inputRef.current.focus();
+  };
+
+  const handleCloseSnackbar = () => {
+    setSnackbarOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <footer className={classes.root}>
+        {!currentPage ||
+        currentPage.displayNav === false ||
+        (nextPage.displayNav === false && !prevPage) ? null : (
+          <React.Fragment>
+            <Divider />
+            <div className={classes.pagination}>
+              {prevPage ? (
+                <Button
+                  component={Link}
+                  naked
+                  href={prevPage.pathname}
+                  size="large"
+                  className={classes.pageLinkButton}
+                  startIcon={<ChevronLeftIcon />}
+                >
+                  {pageToTitleI18n(prevPage, t)}
+                </Button>
+              ) : (
+                <div />
+              )}
+              <Grid
+                container
+                role="group"
+                justifyContent="center"
+                alignItems="center"
+                aria-label={t('feedbackGroupLabel')}
+                className={classes.feedback}
+              >
+                <Typography align="center" variant="subtitle1" className={classes.feedbackMessage}>
+                  {t('feedbackMessage')}
+                </Typography>
+                <div>
+                  <Tooltip title={t('feedbackYes')}>
+                    <IconButton onClick={handleClickThumb(1)} aria-pressed={rating === 1}>
+                      <ThumbUpIcon color={rating === 1 ? 'primary' : undefined} />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={t('feedbackNo')}>
+                    <IconButton onClick={handleClickThumb(0)} aria-pressed={rating === 0}>
+                      <ThumbDownIcon color={rating === 0 ? 'error' : undefined} />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+              </Grid>
+              {nextPage.displayNav === false ? null : (
+                <Button
+                  component={Link}
+                  naked
+                  href={nextPage.pathname}
+                  size="large"
+                  className={classes.pageLinkButton}
+                  endIcon={<ChevronRightIcon />}
+                >
+                  {pageToTitleI18n(nextPage, t)}
+                </Button>
+              )}
+            </div>
+          </React.Fragment>
+        )}
+        <Collapse in={commentOpen} onEntered={handleEntered}>
+          <div>
+            <Typography variant="h6" gutterBottom id="feedback-title">
+              {t('feedbackTitle')}
+            </Typography>
+            <div>
+              <Typography color="textSecondary" gutterBottom>
+                {rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')}
+              </Typography>
+              <TextField
+                multiline
+                variant="outlined"
+                margin="dense"
+                id="comment"
+                fullWidth
+                rows={6}
+                value={comment}
+                onChange={handleChangeTextfield}
+                inputProps={{ ref: inputRef }}
+                aria-labelledby="feedback-title"
+              />
+            </div>
+            <DialogActions>
+              <Button onClick={handleCancelComment}>{t('cancel')}</Button>
+              <Button onClick={handleSubmitComment}>{t('submit')}</Button>
+            </DialogActions>
+          </div>
+        </Collapse>
+      </footer>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={handleCloseSnackbar}
+        message={snackbarMessage}
+      />
+      <input tabIndex="-1" ref={bottomRef} className={classes.hidden} />
+    </React.Fragment>
+  );
+}
+
+MarkdownDocsFooter.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  MarkdownDocsFooter.propTypes = exactProp(MarkdownDocsFooter.propTypes);
+}
+
+export default withStyles(styles)(MarkdownDocsFooter);
diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index d4dbb1c7e66eed..7bde646e578880 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -175,9 +175,17 @@ function getDependencies(raw, options = {}) {
   return deps;
 }
 
+/**
+ * Get the value of a cookie
+ * Source: https://vanillajstoolkit.com/helpers/getcookie/
+ * @param  {String} name  The name of the cookie
+ * @return {String}       The cookie value
+ */
 function getCookie(name) {
-  const regex = new RegExp(`(?:(?:^|.*;*)${name}*=*([^;]*).*$)|^.*$`);
-  return document.cookie.replace(regex, '$1');
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+  return undefined;
 }
 
 function pathnameToLanguage(pathname) {
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 014401590d6d36..cf1a2ee036278e 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -7,6 +7,7 @@
   "blogTitle": "Blog",
   "bundleSize": "Bundle size",
   "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
+  "cancel": "Cancel",
   "cdn": "or use a CDN.",
   "changeLanguage": "Change language",
   "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
@@ -28,6 +29,15 @@
   "emojiLove": "Love",
   "emoojiWarning": "Warning",
   "expandAll": "Expand all",
+  "feedbackFailed": "Couldn't submit feedback. Please try again later.",
+  "feedbackGroupLabel": "give page feedback",
+  "feedbackMessage": "Was this page helpful?",
+  "feedbackMessageDown": "Please let us know what we could do to improve this page.",
+  "feedbackMessageUp": "Please let us know what we should keep doing more of.",
+  "feedbackNo": "No",
+  "feedbackSubmitted": "Feedback submitted",
+  "feedbackTitle": "Thanks for your feedback!",
+  "feedbackYes": "Yes",
   "footerCommunity": "Community",
   "footerCompany": "Company",
   "footerResources": "Resources",
@@ -81,6 +91,7 @@
   "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
   "stickyFooterTitle": "Sticky footer",
   "strapline": "React components for faster and simpler web development. Build your own design system, or start with Material Design.",
+  "submit": "Submit",
   "tableOfContents": "Contents",
   "thanks": "Thank you!",
   "themes": "Premium themes",
diff --git a/package.json b/package.json
index 7cae43b2cbe3df..0c2ac38d6af249 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "prettier:all": "node ./scripts/prettier.js write",
     "size:snapshot": "node scripts/sizeSnapshot/create",
     "size:why": "node scripts/sizeSnapshot/why",
-    "start": "yarn docs:dev",
+    "start": "yarn && yarn docs:dev",
     "test": "yarn lint && yarn typescript && yarn test:coverage",
     "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'scripts/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}'",
     "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'scripts/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}'",
@@ -194,6 +194,7 @@
   "workspaces": [
     "packages/*",
     "docs",
+    "docs/packages/*",
     "framer"
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index da92febf853b88..ccc337ca8021b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3766,6 +3766,35 @@ aproba@^2.0.0:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
   integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
 
+archiver-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-2.1.0.tgz#e8a460e94b693c3e3da182a098ca6285ba9249e2"
+  integrity sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==
+  dependencies:
+    glob "^7.1.4"
+    graceful-fs "^4.2.0"
+    lazystream "^1.0.0"
+    lodash.defaults "^4.2.0"
+    lodash.difference "^4.5.0"
+    lodash.flatten "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.union "^4.6.0"
+    normalize-path "^3.0.0"
+    readable-stream "^2.0.0"
+
+archiver@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-3.1.1.tgz#9db7819d4daf60aec10fe86b16cb9258ced66ea0"
+  integrity sha512-5Hxxcig7gw5Jod/8Gq0OneVgLYET+oNHcxgWItq4TbhOzRLKNAFUb9edAftiMKXvXfCB0vbGrJdZDNq0dWMsxg==
+  dependencies:
+    archiver-utils "^2.1.0"
+    async "^2.6.3"
+    buffer-crc32 "^0.2.1"
+    glob "^7.1.4"
+    readable-stream "^3.4.0"
+    tar-stream "^2.1.0"
+    zip-stream "^2.1.2"
+
 archy@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
@@ -4056,7 +4085,7 @@ async@0.9.x:
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
   integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
 
-async@^2.6.2:
+async@^2.6.2, async@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -4122,6 +4151,21 @@ autosuggest-highlight@^3.1.1:
   dependencies:
     diacritic "0.0.2"
 
+aws-sdk@^2.599.0, aws-sdk@^2.766.0:
+  version "2.771.0"
+  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.771.0.tgz#ff4beb0a04d6ab1ae962c85dfb42e3e9bfe2b93b"
+  integrity sha512-fqNGusCwkdemx3yFqvQbU1+xq/PB2wGq7EQIrrTZx/zxfXUp+7+PnrHzXtViCRghN0tylLghBfWYD4VcVcqi7g==
+  dependencies:
+    buffer "4.9.2"
+    events "1.1.1"
+    ieee754 "1.1.13"
+    jmespath "0.15.0"
+    querystring "0.2.0"
+    sax "1.2.1"
+    url "0.10.3"
+    uuid "3.3.2"
+    xml2js "0.4.19"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -4431,12 +4475,14 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
-bl@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-3.0.0.tgz#3611ec00579fd18561754360b21e9f784500ff88"
-  integrity sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==
+bl@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
+  integrity sha512-fs4G6/Hu4/EE+F75J8DuN/0IpQqNjAdC7aEQv7Qt8MHGUH7Ckv2MwTEEeN9QehD0pfIDkMI1bkHYkKy7xHyKIg==
   dependencies:
-    readable-stream "^3.0.1"
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
 
 blob@0.0.5:
   version "0.0.5"
@@ -4598,6 +4644,13 @@ browserify-sign@^4.0.0:
     inherits "^2.0.1"
     parse-asn1 "^5.0.0"
 
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  integrity sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=
+  dependencies:
+    pako "~0.2.0"
+
 browserify-zlib@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
@@ -4658,7 +4711,7 @@ buffer-alloc@^1.2.0:
     buffer-alloc-unsafe "^1.1.0"
     buffer-fill "^1.0.0"
 
-buffer-crc32@~0.2.3:
+buffer-crc32@^0.2.1, buffer-crc32@^0.2.13, buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
@@ -4698,22 +4751,22 @@ buffer-xor@^1.0.3:
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
   integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
 
-buffer@5.6.0, buffer@^5.2.1:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
+buffer@4.9.2, buffer@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
+    isarray "^1.0.0"
 
-buffer@^4.3.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
-  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
+buffer@5.6.0, buffer@^5.1.0, buffer@^5.2.1, buffer@^5.5.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
+  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
-    isarray "^1.0.0"
 
 buffers@~0.1.1:
   version "0.1.1"
@@ -5139,7 +5192,7 @@ chokidar@3.4.3, chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2:
   optionalDependencies:
     fsevents "~2.1.2"
 
-chownr@^1.1.1:
+chownr@^1.0.1, chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
@@ -5184,6 +5237,30 @@ classnames@2.2.6, classnames@^2.2.5, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+claudia-api-builder@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/claudia-api-builder/-/claudia-api-builder-4.1.2.tgz#a44479ee44d41936c0bf68c2fe9c8d30f3f31daf"
+  integrity sha512-xXS9ew32KRJSMQGHMTEsvSkd1FTs9GK3JjiBIuxk9EJz2hubryrWiTzsJQvcVcfBYE0fb7bO+ZhH2/fqqG7Acg==
+
+claudia@^5.12.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/claudia/-/claudia-5.12.0.tgz#774e05d00d29cb6064d19da1c0d4a4713f2836e0"
+  integrity sha512-ukgOGUNeIaU23xQB5r41AqGPAcq8bBd5LGz4Q880aRgGSW6VGHVMD/srsZcWM6mP4XKSmaofHzmJfoIXSmlJFg==
+  dependencies:
+    archiver "^3.0.0"
+    aws-sdk "^2.599.0"
+    fs-extra "^6.0.1"
+    glob "^7.1.2"
+    gunzip-maybe "^1.4.0"
+    https-proxy-agent "^3.0.0"
+    minimal-request-promise "^1.1.0"
+    minimist "^1.2.0"
+    oh-no-i-insist "^1.1.1"
+    sequential-promise-map "^1.0.0"
+    tar-fs "^1.14.0"
+    uuid "^2.0.1"
+    which "^1.3.1"
+
 clean-css@^4.1.11:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -5511,6 +5588,16 @@ compose-function@3.0.3:
   dependencies:
     arity-n "^1.0.4"
 
+compress-commons@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-2.1.1.tgz#9410d9a534cf8435e3fbbb7c6ce48de2dc2f0610"
+  integrity sha512-eVw6n7CnEMFzc3duyFVrQEuY1BlHR3rYsSztyG32ibGMW722i3C6IizEGMFmfMU+A+fALvBIwxN3czffTcdA+Q==
+  dependencies:
+    buffer-crc32 "^0.2.13"
+    crc32-stream "^3.0.1"
+    normalize-path "^3.0.0"
+    readable-stream "^2.3.6"
+
 compression-webpack-plugin@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-6.0.2.tgz#13482bfa81e0472e5d6af1165b6ee9f29f98178b"
@@ -5847,6 +5934,21 @@ cpy@^8.0.0:
     nested-error-stacks "^2.1.0"
     p-all "^2.1.0"
 
+crc32-stream@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-3.0.1.tgz#cae6eeed003b0e44d739d279de5ae63b171b4e85"
+  integrity sha512-mctvpXlbzsvK+6z8kJwSJ5crm7yBwrQMTybJzMw1O4lLGJqjlDCXY2Zw7KheiA6XBEcBmfLx1D88mjRGVJtY9w==
+  dependencies:
+    crc "^3.4.4"
+    readable-stream "^3.4.0"
+
+crc@^3.4.4:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.8.0.tgz#ad60269c2c856f8c299e2c4cc0de4556914056c6"
+  integrity sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==
+  dependencies:
+    buffer "^5.1.0"
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -6873,7 +6975,7 @@ duplexer@^0.1.1:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
   integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
 
-duplexify@^3.4.2, duplexify@^3.6.0:
+duplexify@^3.4.2, duplexify@^3.5.0, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
   integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
@@ -7623,7 +7725,7 @@ eventemitter3@^4.0.0:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
   integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
 
-events@^1.1.0:
+events@1.1.1, events@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
   integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
@@ -8804,6 +8906,18 @@ growl@1.10.5:
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
+gunzip-maybe@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz#b913564ae3be0eda6f3de36464837a9cd94b98ac"
+  integrity sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==
+  dependencies:
+    browserify-zlib "^0.1.4"
+    is-deflate "^1.0.0"
+    is-gzip "^1.0.0"
+    peek-stream "^1.1.0"
+    pumpify "^1.3.3"
+    through2 "^2.0.3"
+
 gzip-size@^5.0.0, gzip-size@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -9162,6 +9276,14 @@ https-proxy-agent@^2.2.1:
     agent-base "^4.3.0"
     debug "^3.1.0"
 
+https-proxy-agent@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz#b8c286433e87602311b01c8ea34413d856a4af81"
+  integrity sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
 https-proxy-agent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
@@ -9211,7 +9333,7 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
   dependencies:
     postcss "^7.0.14"
 
-ieee754@^1.1.4:
+ieee754@1.1.13, ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
@@ -9558,6 +9680,11 @@ is-decimal@^1.0.0, is-decimal@^1.0.2:
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
   integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
 
+is-deflate@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-deflate/-/is-deflate-1.0.0.tgz#c862901c3c161fb09dac7cdc7e784f80e98f2f14"
+  integrity sha1-yGKQHDwWH7CdrHzcfnhPgOmPLxQ=
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -9636,6 +9763,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-gzip@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-gzip/-/is-gzip-1.0.0.tgz#6ca8b07b99c77998025900e555ced8ed80879a83"
+  integrity sha1-bKiwe5nHeZgCWQDlVc7Y7YCHmoM=
+
 is-hexadecimal@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
@@ -10004,6 +10136,11 @@ jest-worker@^26.2.1, jest-worker@^26.3.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jmespath@0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
+  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -10617,6 +10754,13 @@ lazy-cache@^2.0.1:
   dependencies:
     set-getter "^0.1.0"
 
+lazystream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
+  integrity sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=
+  dependencies:
+    readable-stream "^2.0.5"
+
 lcid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
@@ -10811,6 +10955,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.defaults@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+  integrity sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=
+
 lodash.difference@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
@@ -10826,6 +10975,11 @@ lodash.find@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
   integrity sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=
 
+lodash.flatten@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
+  integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -11496,6 +11650,11 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.5.5"
     tiny-warning "^1.0.3"
 
+minimal-request-promise@^1.1.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/minimal-request-promise/-/minimal-request-promise-1.5.0.tgz#60f5d7f55b4026d197074e2e155626d4cc5c2ebc"
+  integrity sha1-YPXX9VtAJtGXB04uFVYm1MxcLrw=
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -12441,6 +12600,11 @@ octokit-pagination-methods@^1.1.0:
   resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
   integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
 
+oh-no-i-insist@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/oh-no-i-insist/-/oh-no-i-insist-1.1.1.tgz#af6f12e2d43366839bae45f8c870b976a11eee35"
+  integrity sha1-r28S4tQzZoObrkX4yHC5dqEe7jU=
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -12730,6 +12894,11 @@ paged-request@^2.0.1:
   dependencies:
     axios "^0.18.0"
 
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
+
 pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
@@ -13013,6 +13182,15 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+peek-stream@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/peek-stream/-/peek-stream-1.1.3.tgz#3b35d84b7ccbbd262fff31dc10da56856ead6d67"
+  integrity sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==
+  dependencies:
+    buffer-from "^1.0.0"
+    duplexify "^3.5.0"
+    through2 "^2.0.3"
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -13480,6 +13658,14 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
+pump@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.3.tgz#5dfe8311c33bbf6fc18261f9f34702c47c08a954"
+  integrity sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
@@ -14062,7 +14248,7 @@ read@1, read@~1.0.1:
   dependencies:
     mute-stream "~0.0.4"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -14075,7 +14261,7 @@ read@1, read@~1.0.1:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-"readable-stream@2 || 3", readable-stream@^3.0.1, readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.5.0:
+"readable-stream@2 || 3", readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.5.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -14847,6 +15033,11 @@ sass-loader@10.0.2:
     schema-utils "^2.7.1"
     semver "^7.3.2"
 
+sax@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+  integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
+
 sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -14965,6 +15156,11 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+sequential-promise-map@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/sequential-promise-map/-/sequential-promise-map-1.2.0.tgz#d683f0ecbcf12c2cd512e9dae6ba860926c86e58"
+  integrity sha512-C163WXhlrmenILjQ6T7UBEP1HiDsdEpTVNUwTxFpinzPoO296RD2XvGuXa69t0WE9puVTb4D7qTspabMaVshHA==
+
 serialize-javascript@5.0.1, serialize-javascript@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
@@ -16084,6 +16280,16 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tar-fs@^1.14.0:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.3.tgz#966a628841da2c4010406a82167cbd5e0c72d509"
+  integrity sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==
+  dependencies:
+    chownr "^1.0.1"
+    mkdirp "^0.5.1"
+    pump "^1.0.0"
+    tar-stream "^1.1.2"
+
 tar-fs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.0.tgz#677700fc0c8b337a78bee3623fdc235f21d7afad"
@@ -16094,7 +16300,7 @@ tar-fs@^2.0.0:
     pump "^3.0.0"
     tar-stream "^2.0.0"
 
-tar-stream@1.6.2:
+tar-stream@1.6.2, tar-stream@^1.1.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
   integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
@@ -16107,12 +16313,12 @@ tar-stream@1.6.2:
     to-buffer "^1.1.1"
     xtend "^4.0.0"
 
-tar-stream@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.0.tgz#d1aaa3661f05b38b5acc9b7020efdca5179a2cc3"
-  integrity sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==
+tar-stream@^2.0.0, tar-stream@^2.1.0:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.4.tgz#c4fb1a11eb0da29b893a5b25476397ba2d053bfa"
+  integrity sha512-o3pS2zlG4gxr67GmFYBLlq+dM8gyRGUOvsrHclSkvtVtQbjV0s/+ZE8OpICbaj8clrX3tjeHngYGP7rweaBnuw==
   dependencies:
-    bl "^3.0.0"
+    bl "^4.0.3"
     end-of-stream "^1.4.1"
     fs-constants "^1.0.0"
     inherits "^2.0.3"
@@ -16285,7 +16491,7 @@ thenify-all@^1.0.0, thenify-all@^1.6.0:
   dependencies:
     any-promise "^1.0.0"
 
-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0, through2@^2.0.2, through2@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -16975,6 +17181,14 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+url@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  integrity sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -17037,6 +17251,11 @@ uuid@3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+uuid@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+  integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
+
 uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
@@ -17592,7 +17811,7 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xml2js@^0.4.17:
+xml2js@0.4.19, xml2js@^0.4.17:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
   integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==
@@ -17870,3 +18089,12 @@ zepto@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zepto/-/zepto-1.2.0.tgz#e127bd9e66fd846be5eab48c1394882f7c0e4f98"
   integrity sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=
+
+zip-stream@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-2.1.3.tgz#26cc4bdb93641a8590dd07112e1f77af1758865b"
+  integrity sha512-EkXc2JGcKhO5N5aZ7TmuNo45budRaFGHOmz24wtJR7znbNqDPmdZtUauKX6et8KAVseAMBOyWJqEpXcHTBsh7Q==
+  dependencies:
+    archiver-utils "^2.1.0"
+    compress-commons "^2.1.1"
+    readable-stream "^3.4.0"

From 41cd2bc7425bb7fa7016eecb7c70e05f2b7ce98b Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 20 Oct 2020 09:20:28 +0200
Subject: [PATCH 28/34] [examples] Update ssr example to use
 @material-ui/core@next (#23155)

---
 .../server-rendering/server-rendering.md      | 41 +++++++++++++++----
 examples/ssr/App.js                           |  2 +-
 examples/ssr/cache.js                         |  5 +++
 examples/ssr/client.js                        | 14 ++++---
 examples/ssr/package.json                     |  6 ++-
 examples/ssr/server.js                        | 22 +++++++---
 6 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 examples/ssr/cache.js

diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md
index 674c4ddbb88ef9..99c8a98c74d907 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering.md
@@ -92,6 +92,20 @@ inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/
 The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
 
 We then get the CSS from the `sheets` using `sheets.toString()`.
+As we are also using emotion as our default styled engine, we need to extract the styles from the emotion instance as well. For this we need to share the same cache definition for both the client and server:
+
+`cache.js`
+
+```js
+import createCache from '@emotion/cache';
+
+const cache = createCache();
+
+export default cache;
+```
+
+With this we are creating new Emotion server instance and using this to extract the critical styles for the html as well.
+
 We will see how this is passed along in the `renderFullPage` function.
 
 ```jsx
@@ -99,8 +113,12 @@ import express from 'express';
 import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles';
+import createEmotionServer from 'create-emotion-server';
 import App from './App';
 import theme from './theme';
+import cache from './cache';
+
+const { extractCritical } = createEmotionServer(cache);
 
 function handleRender(req, res) {
   const sheets = new ServerStyleSheets();
@@ -108,17 +126,22 @@ function handleRender(req, res) {
   // Render the component to a string.
   const html = ReactDOMServer.renderToString(
     sheets.collect(
-      <ThemeProvider theme={theme}>
-        <App />
-      </ThemeProvider>,
+      <CacheProvider value={cache}>
+        <ThemeProvider theme={theme}>
+          <App />
+        </ThemeProvider>
+      </CacheProvider>,
     ),
   );
 
   // Grab the CSS from the sheets.
   const css = sheets.toString();
 
+  // Grab the CSS from emotion
+  const styles = extractCritical(html);
+
   // Send the rendered page back to the client.
-  res.send(renderFullPage(html, css));
+  res.send(renderFullPage(html, `${css} ${styles.css}`));
 }
 
 const app = express();
@@ -164,8 +187,10 @@ Let's take a look at the client file:
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from '@material-ui/core/styles';
+import { CacheProvider } from '@emotion/core';
 import App from './App';
 import theme from './theme';
+import cache from './cache';
 
 function Main() {
   React.useEffect(() => {
@@ -176,9 +201,11 @@ function Main() {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
+    </CacheProvider>
   );
 }
 
diff --git a/examples/ssr/App.js b/examples/ssr/App.js
index 19b1447ba389d4..58fdb3b34769fb 100644
--- a/examples/ssr/App.js
+++ b/examples/ssr/App.js
@@ -23,7 +23,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Server Rendering v4-beta example
+          Server Rendering v5-alpha example
         </Typography>
         <ProTip />
         <Copyright />
diff --git a/examples/ssr/cache.js b/examples/ssr/cache.js
new file mode 100644
index 00000000000000..04a3ca8ec2c06c
--- /dev/null
+++ b/examples/ssr/cache.js
@@ -0,0 +1,5 @@
+import createCache from '@emotion/cache';
+
+const cache = createCache();
+
+export default cache;
diff --git a/examples/ssr/client.js b/examples/ssr/client.js
index 1e4ad708d98405..6c2aefa45f6f2e 100644
--- a/examples/ssr/client.js
+++ b/examples/ssr/client.js
@@ -2,8 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
+import { CacheProvider } from '@emotion/core';
 import App from './App';
 import theme from './theme';
+import cache from './cache';
 
 function Main() {
   React.useEffect(() => {
@@ -14,11 +16,13 @@ function Main() {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <App />
+      </ThemeProvider>
+    </CacheProvider>
   );
 }
 
diff --git a/examples/ssr/package.json b/examples/ssr/package.json
index d2b79296c9342d..94b7b688ea6593 100644
--- a/examples/ssr/package.json
+++ b/examples/ssr/package.json
@@ -8,8 +8,12 @@
     "@babel/plugin-proposal-class-properties": "latest",
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
-    "@material-ui/core": "latest",
+    "@emotion/cache": "latest",
+    "@emotion/core": "latest",
+    "@emotion/styled": "latest",
+    "@material-ui/core": "next",
     "babel-loader": "latest",
+    "create-emotion-server": "latest",
     "cross-env": "latest",
     "express": "latest",
     "nodemon": "latest",
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
index ac7b9444bea6c4..788e63ed560ad6 100644
--- a/examples/ssr/server.js
+++ b/examples/ssr/server.js
@@ -3,8 +3,13 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles';
+import { CacheProvider } from '@emotion/core';
+import createEmotionServer from 'create-emotion-server';
 import App from './App';
 import theme from './theme';
+import cache from './cache';
+
+const { extractCritical } = createEmotionServer(cache);
 
 function renderFullPage(html, css) {
   return `
@@ -30,19 +35,24 @@ function handleRender(req, res) {
   // Render the component to a string.
   const html = ReactDOMServer.renderToString(
     sheets.collect(
-      <ThemeProvider theme={theme}>
-        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-        <CssBaseline />
-        <App />
-      </ThemeProvider>,
+      <CacheProvider value={cache}>
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <App />
+        </ThemeProvider>
+      </CacheProvider>,
     ),
   );
 
   // Grab the CSS from our sheets.
   const css = sheets.toString();
 
+  // Grab the CSS from emotion
+  const styles = extractCritical(html);
+
   // Send the rendered page back to the client.
-  res.send(renderFullPage(html, css));
+  res.send(renderFullPage(html, `${css} ${styles.css}`));
 }
 
 const app = express();

From 397d599c706b2a1b210d6eadd1e928cd2a01aee5 Mon Sep 17 00:00:00 2001
From: Mordechai Meisels <mordechai112@gmail.com>
Date: Tue, 20 Oct 2020 04:24:11 -0400
Subject: [PATCH 29/34] [Card] Use flex display for CardHeader.avatar (#23169)

---
 packages/material-ui/src/CardHeader/CardHeader.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
index 1d9b379a72b649..69a57fd8818e82 100644
--- a/packages/material-ui/src/CardHeader/CardHeader.js
+++ b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -13,6 +13,7 @@ export const styles = {
   },
   /* Styles applied to the avatar element. */
   avatar: {
+    display: 'flex',
     flex: '0 0 auto',
     marginRight: 16,
   },

From 4110d1bce956462138f5eaa9cf9a6af34e1e7349 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Tue, 20 Oct 2020 10:11:31 +0000
Subject: [PATCH 30/34] Bump yargs from 16.0.3 to 16.1.0 (#23128)

---
 yarn.lock | 46 +++++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index ccc337ca8021b0..e7f5ec8ef1c255 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5350,10 +5350,10 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-cliui@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.1.tgz#a4cb67aad45cd83d8d05128fc9f4d8fbb887e6b3"
-  integrity sha512-rcvHOWyGyid6I1WjT/3NatKj2kDt9OdSHSXpyLXaMWFbKpGACNW8pRhhdPUq9MWUOdwn8Rz9AVETjF4105rZZQ==
+cliui@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.3.tgz#ef180f26c8d9bff3927ee52428bfec2090427981"
+  integrity sha512-Gj3QHTkVMPKqwP3f7B4KPkBZRMR9r4rfi5bXFpg1a+Svvj8l7q5CnkBkVQzfxT5DFSsGk2+PascOgL0JYkL2kw==
   dependencies:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
@@ -7390,10 +7390,10 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.3:
     d "^1.0.1"
     ext "^1.1.2"
 
-escalade@^3.0.1, escalade@^3.0.2, escalade@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
-  integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
+escalade@^3.0.1, escalade@^3.1.0, escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
 escape-goat@^2.0.0:
   version "2.1.1"
@@ -17851,10 +17851,10 @@ xtend@~2.1.1:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-y18n@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.1.tgz#1ad2a7eddfa8bce7caa2e1f6b5da96c39d99d571"
-  integrity sha512-/jJ831jEs4vGDbYPQp4yGKDYPSCCEQ45uZWJHE1AoYBzqdZi8+LDWas0z4HrmJXmKdpFsTiowSHXdxyFhpmdMg==
+y18n@^5.0.2:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.4.tgz#0ab2db89dd5873b5ec4682d8e703e833373ea897"
+  integrity sha512-deLOfD+RvFgrpAmSZgfGdWYE+OKyHcVHaRQ7NphG/63scpRvTHHeQMAxGGvaLVGJ+HYVcCXlzcTK0ZehFf+eHQ==
 
 yallist@^2.1.2:
   version "2.1.2"
@@ -17908,10 +17908,10 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.0.0:
-  version "20.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.0.0.tgz#c65a1daaa977ad63cebdd52159147b789a4e19a9"
-  integrity sha512-8eblPHTL7ZWRkyjIZJjnGf+TijiKJSwA24svzLRVvtgoi/RZiKa9fFQTrlx0OKLnyHSdt/enrdadji6WFfESVA==
+yargs-parser@^20.2.2:
+  version "20.2.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.3.tgz#92419ba867b858c868acf8bae9bf74af0dd0ce26"
+  integrity sha512-emOFRT9WVHw03QSvN5qor9QQT9+sw5vwxfYweivSMHTcAXPefwVae2FjO7JJjj8hCE4CzPOPeFM83VwT29HCww==
 
 yargs-unparser@2.0.0:
   version "2.0.0"
@@ -17992,17 +17992,17 @@ yargs@^15.0.2, yargs@^15.1.0, yargs@^15.3.1:
     yargs-parser "^18.1.2"
 
 yargs@^16.0.3:
-  version "16.0.3"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.0.3.tgz#7a919b9e43c90f80d4a142a89795e85399a7e54c"
-  integrity sha512-6+nLw8xa9uK1BOEOykaiYAJVh6/CjxWXK/q9b5FpRgNslt8s22F2xMBqVIKgCRjNgGvGPBy8Vog7WN7yh4amtA==
+  version "16.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.1.0.tgz#fc333fe4791660eace5a894b39d42f851cd48f2a"
+  integrity sha512-upWFJOmDdHN0syLuESuvXDmrRcWd1QafJolHskzaw79uZa7/x53gxQKiR07W59GWY1tFhhU/Th9DrtSfpS782g==
   dependencies:
-    cliui "^7.0.0"
-    escalade "^3.0.2"
+    cliui "^7.0.2"
+    escalade "^3.1.1"
     get-caller-file "^2.0.5"
     require-directory "^2.1.1"
     string-width "^4.2.0"
-    y18n "^5.0.1"
-    yargs-parser "^20.0.0"
+    y18n "^5.0.2"
+    yargs-parser "^20.2.2"
 
 yarn-deduplicate@^3.0.0:
   version "3.0.0"

From ab4843344b1e1db1014c2c419d05274260908b63 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Tue, 20 Oct 2020 10:26:30 +0000
Subject: [PATCH 31/34] Bump terser-webpack-plugin from 4.2.2 to 4.2.3 (#23126)

---
 yarn.lock | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e7f5ec8ef1c255..c70e8fee66493e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10127,7 +10127,7 @@ jest-worker@24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest-worker@^26.2.1, jest-worker@^26.3.0:
+jest-worker@^26.2.1, jest-worker@^26.5.0:
   version "26.5.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.5.0.tgz#87deee86dbbc5f98d9919e0dadf2c40e3152fa30"
   integrity sha512-kTw66Dn4ZX7WpjZ7T/SUDgRhapFRKWmisVAF0Rv4Fu8SLFD7eLbqpLvbxVqYhSgaWa7I+bW7pHnbyfNsH6stug==
@@ -16411,18 +16411,18 @@ terser-webpack-plugin@^1.4.3:
     worker-farm "^1.7.0"
 
 terser-webpack-plugin@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-4.2.2.tgz#d86200c700053bba637913fe4310ba1bdeb5568e"
-  integrity sha512-3qAQpykRTD5DReLu5/cwpsg7EZFzP3Q0Hp2XUWJUw2mpq2jfgOKTZr8IZKKnNieRVVo1UauROTdhbQJZveGKtQ==
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz#28daef4a83bd17c1db0297070adc07fc8cfc6a9a"
+  integrity sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==
   dependencies:
     cacache "^15.0.5"
     find-cache-dir "^3.3.1"
-    jest-worker "^26.3.0"
+    jest-worker "^26.5.0"
     p-limit "^3.0.2"
-    schema-utils "^2.7.1"
+    schema-utils "^3.0.0"
     serialize-javascript "^5.0.1"
     source-map "^0.6.1"
-    terser "^5.3.2"
+    terser "^5.3.4"
     webpack-sources "^1.4.3"
 
 terser@4.8.0, terser@^4.1.2, terser@^4.7.0:
@@ -16434,10 +16434,10 @@ terser@4.8.0, terser@^4.1.2, terser@^4.7.0:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-terser@^5.0.0, terser@^5.3.2:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.4.tgz#e510e05f86e0bd87f01835c3238839193f77a60c"
-  integrity sha512-dxuB8KQo8Gt6OVOeLg/rxfcxdNZI/V1G6ze1czFUzPeCFWZRtvZMgSzlZZ5OYBZ4HoG607F6pFPNLekJyV+yVw==
+terser@^5.0.0, terser@^5.3.4:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.7.tgz#798a4ae2e7ff67050c3e99fcc4e00725827d97e2"
+  integrity sha512-lJbKdfxWvjpV330U4PBZStCT9h3N9A4zZVA5Y4k9sCWXknrpdyxi1oMsRKLmQ/YDMDxSBKIh88v0SkdhdqX06w==
   dependencies:
     commander "^2.20.0"
     source-map "~0.7.2"

From 8023b1c88b1166154ae9dae2b2c54ecc2688fb60 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 20 Oct 2020 12:40:55 +0200
Subject: [PATCH 32/34] [core] Fix bundles for packages without subpackages
 (#23157)

---
 scripts/build.js                       | 40 +++++++++++++++++++-------
 scripts/copy-files.js                  |  8 ++++--
 scripts/sizeSnapshot/webpack.config.js |  4 +--
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/scripts/build.js b/scripts/build.js
index 112de544c2acc7..4abe02debc828e 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,4 +1,5 @@
 const childProcess = require('child_process');
+const glob = require('glob');
 const path = require('path');
 const { promisify } = require('util');
 const yargs = require('yargs');
@@ -32,12 +33,36 @@ async function run(argv) {
   };
   const babelConfigPath = path.resolve(__dirname, '../babel.config.js');
   const srcDir = path.resolve('./src');
+  const extensions = ['.js', '.ts', '.tsx'];
+  const ignore = [
+    '**/*.test.js',
+    '**/*.test.ts',
+    '**/*.test.tsx',
+    '**/*.spec.ts',
+    '**/*.spec.tsx',
+    '**/*.d.ts',
+  ];
+
+  const topLevelNonIndexFiles = glob
+    .sync(`*{${extensions.join(',')}}`, { cwd: srcDir, ignore })
+    .filter((file) => {
+      return path.basename(file, path.extname(file)) !== 'index';
+    });
+  const topLevelPathImportsArePackages = topLevelNonIndexFiles.length === 0;
+
   const outDir = path.resolve(
     relativeOutDir,
+    // We generally support top level path imports e.g.
+    // 1. `import ArrowDownIcon from '@material-ui/icons/ArrowDown'`.
+    // 2. `import Typography from '@material-ui/core/Typography'`.
+    // The first case resolves to a file while the second case resolves to a package first i.e. a package.json
+    // This means that only in the second case the bundler can decide whether it uses ES modules or CommonJS modules.
+    // Different extensions are not viable yet since they require additional bundler config for users and additional transpilation steps in our repo.
+    // Switch to `exports` field in v6.
     {
-      node: './node',
+      node: topLevelPathImportsArePackages ? './node' : './',
       modern: './modern',
-      stable: './',
+      stable: topLevelPathImportsArePackages ? './' : './esm',
       legacy: './legacy',
     }[bundle],
   );
@@ -47,20 +72,13 @@ async function run(argv) {
     '--config-file',
     babelConfigPath,
     '--extensions',
-    '".js,.ts,.tsx"',
+    `"${extensions.join(',')}"`,
     srcDir,
     '--out-dir',
     outDir,
     '--ignore',
     // Need to put these patterns in quotes otherwise they might be evaluated by the used terminal.
-    `"${[
-      '**/*.test.js',
-      '**/*.test.ts',
-      '**/*.test.tsx',
-      '**/*.spec.ts',
-      '**/*.spec.tsx',
-      '**/*.d.ts',
-    ].join('","')}"`,
+    `"${ignore.join('","')}"`,
   ].join(' ');
 
   if (verbose) {
diff --git a/scripts/copy-files.js b/scripts/copy-files.js
index 18104ef7917f50..f7f500dc6615f2 100644
--- a/scripts/copy-files.js
+++ b/scripts/copy-files.js
@@ -69,8 +69,12 @@ async function createPackageFile() {
   const newPackageData = {
     ...packageDataOther,
     private: false,
-    main: './node/index.js',
-    module: './index.js',
+    main: fse.existsSync(path.resolve(buildPath, './node/index.js'))
+      ? './node/index.js'
+      : './index.js',
+    module: fse.existsSync(path.resolve(buildPath, './esm/index.js'))
+      ? './esm/index.js'
+      : './index.js',
     typings: './index.d.ts',
   };
   const targetPath = path.resolve(buildPath, './package.json');
diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js
index dd3e9af226ac63..079c6d665e3fb4 100644
--- a/scripts/sizeSnapshot/webpack.config.js
+++ b/scripts/sizeSnapshot/webpack.config.js
@@ -63,7 +63,7 @@ async function getSizeLimitBundles() {
     {
       name: '@material-ui/system',
       webpack: true,
-      path: 'packages/material-ui-system/build/index.js',
+      path: 'packages/material-ui-system/build/esm/index.js',
     },
     ...coreComponents,
     {
@@ -95,7 +95,7 @@ async function getSizeLimitBundles() {
     {
       name: '@material-ui/utils',
       webpack: true,
-      path: 'packages/material-ui-utils/build/index.js',
+      path: 'packages/material-ui-utils/build/esm/index.js',
     },
     // TODO: Requires webpack v5
     // Resolution of webpack/acorn to 7.x is blocked by nextjs (https://github.com/vercel/next.js/issues/11947)

From 10646a59c28bca5302c7aae4e2ce68958560cf0b Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 20 Oct 2020 15:48:35 +0200
Subject: [PATCH 33/34] [core] Improve bundle size comment (#23110)

---
 azure-pipelines.yml | 10 ++++++++
 dangerfile.js       | 57 +++++++++++++++++++++++++++------------------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 20686dc6c17a4b..0c6f557b46b804 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -47,6 +47,15 @@ steps:
       yarn install
     displayName: 'install dependencies'
 
+  - script: |
+      yarn danger ci
+    displayName: 'prepare danger on PRs'
+    condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))
+    env:
+      AZURE_BUILD_ID: $(Build.BuildId)
+      DANGER_COMMAND: 'prepareBundleSizeReport'
+      DANGER_GITHUB_API_TOKEN: $(GITHUB_API_TOKEN)
+
   - script: |
       yarn lerna run --ignore @material-ui/icons --parallel --scope "@material-ui/*" build
     displayName: 'build @material-ui packages'
@@ -135,4 +144,5 @@ steps:
     condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))
     env:
       AZURE_BUILD_ID: $(Build.BuildId)
+      DANGER_COMMAND: 'reportBundleSize'
       DANGER_GITHUB_API_TOKEN: $(GITHUB_API_TOKEN)
diff --git a/dangerfile.js b/dangerfile.js
index d5014abbb43091..3a594bffd45507 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -4,6 +4,10 @@ const { danger, markdown } = require('danger');
 const { exec } = require('child_process');
 const { loadComparison } = require('./scripts/sizeSnapshot');
 
+const azureBuildId = process.env.AZURE_BUILD_ID;
+const azureBuildUrl = `https://dev.azure.com/mui-org/Material-UI/_build/results?buildId=${azureBuildId}`;
+const dangerCommand = process.env.DANGER_COMMAND;
+
 const parsedSizeChangeThreshold = 300;
 const gzipSizeChangeThreshold = 100;
 
@@ -30,7 +34,7 @@ const UPSTREAM_REMOTE = 'danger-upstream';
  * scripts exit to avoid adding internal remotes to the local machine. This is
  * not an issue in CI.
  */
-async function cleanup() {
+async function reportBundleSizeCleanup() {
   await git(`remote remove ${UPSTREAM_REMOTE}`);
 }
 
@@ -103,7 +107,13 @@ function sieveResults(results) {
   return { all: results, main, pages };
 }
 
-async function run() {
+function prepareBundleSizeReport() {
+  markdown(
+    `Bundle size will be reported once [Azure build #${azureBuildId}](${azureBuildUrl}) finishes.`,
+  );
+}
+
+async function reportBundleSize() {
   // Use git locally to grab the commit which represents the place
   // where the branches differ
   const upstreamRepo = danger.github.pr.base.repo.full_name;
@@ -116,7 +126,7 @@ async function run() {
   await git(`fetch ${UPSTREAM_REMOTE}`);
   const mergeBaseCommit = await git(`merge-base HEAD ${UPSTREAM_REMOTE}/${upstreamRef}`);
 
-  const commitRange = `${mergeBaseCommit}...${danger.github.pr.head.sha}`;
+  const detailedComparisonUrl = `https://mui-dashboard.netlify.app/size-comparison?buildId=${azureBuildId}&baseRef=${danger.github.pr.base.ref}&baseCommit=${mergeBaseCommit}&prNumber=${danger.github.pr.number}`;
 
   const comparison = await loadComparison(mergeBaseCommit, upstreamRef);
 
@@ -134,31 +144,32 @@ async function run() {
       markdown(importantChanges.join('\n'));
     }
 
-    const details = `[Details of bundle changes](https://mui-dashboard.netlify.app/size-comparison?buildId=${process.env.AZURE_BUILD_ID}&baseRef=${danger.github.pr.base.ref}&baseCommit=${mergeBaseCommit}&prNumber=${danger.github.pr.number})`;
+    const details = `[Details of bundle changes](${detailedComparisonUrl})`;
 
     markdown(details);
   } else {
-    // this can later be removed to reduce PR noise. It is kept for now for debug
-    // purposes only. DangerJS will swallow console.logs if it completes successfully
-    markdown(`No bundle size changes comparing ${commitRange}`);
+    markdown(`[No bundle size changes](${detailedComparisonUrl})`);
   }
 }
 
-(async () => {
-  let exitCode = 0;
-  try {
-    await run();
-  } catch (err) {
-    console.error(err);
-    exitCode = 1;
-  }
-
-  try {
-    await cleanup();
-  } catch (err) {
-    console.error(err);
-    exitCode = 1;
+async function run() {
+  switch (dangerCommand) {
+    case 'prepareBundleSizeReport':
+      prepareBundleSizeReport();
+      break;
+    case 'reportBundleSize':
+      try {
+        await reportBundleSize();
+      } finally {
+        await reportBundleSizeCleanup();
+      }
+      break;
+    default:
+      throw new TypeError(`Unrecognized danger command '${dangerCommand}'`);
   }
+}
 
-  process.exit(exitCode);
-})();
+run().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

From ac0fa97ffe4eb9f867570809fcc1736caf7aa009 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 20 Oct 2020 15:49:20 +0200
Subject: [PATCH 34/34] [docs] Lazy load demo toolbar (#23108)

---
 docs/src/modules/components/Demo.js        | 647 ++-------------------
 docs/src/modules/components/DemoToolbar.js | 581 ++++++++++++++++++
 2 files changed, 630 insertions(+), 598 deletions(-)
 create mode 100644 docs/src/modules/components/DemoToolbar.js

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 8ef4e8642e7191..84e25faa8423e8 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -1,49 +1,41 @@
 import * as React from 'react';
-import LZString from 'lz-string';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import copy from 'clipboard-copy';
-import { useSelector, useDispatch } from 'react-redux';
-import { alpha, makeStyles, useTheme } from '@material-ui/core/styles';
+import { useSelector } from 'react-redux';
+import { alpha, makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Collapse from '@material-ui/core/Collapse';
-import Fade from '@material-ui/core/Fade';
-import ToggleButton from '@material-ui/core/ToggleButton';
-import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
-import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@material-ui/docs';
 import NoSsr from '@material-ui/core/NoSsr';
-import EditIcon from '@material-ui/icons/Edit';
-import CodeIcon from '@material-ui/icons/Code';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
-import Snackbar from '@material-ui/core/Snackbar';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Tooltip from '@material-ui/core/Tooltip';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import ResetFocusIcon from '@material-ui/icons/CenterFocusWeak';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import { AdCarbonInline } from 'docs/src/modules/components/AdCarbon';
-import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
 import getJsxPreview from 'docs/src/modules/utils/getJsxPreview';
-import { getCookie } from 'docs/src/modules/utils/helpers';
-import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
+import { CODE_VARIANTS } from 'docs/src/modules/constants';
 
-function compress(object) {
-  return LZString.compressToBase64(JSON.stringify(object))
-    .replace(/\+/g, '-') // Convert '+' to '-'
-    .replace(/\//g, '_') // Convert '/' to '_'
-    .replace(/=+$/, ''); // Remove ending '='
-}
+const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
+// Sync with styles from DemoToolbar
+// Importing the styles results in no bundle size reduction
+const useDemoToolbarFallbackStyles = makeStyles(
+  (theme) => {
+    return {
+      root: {
+        display: 'none',
+        [theme.breakpoints.up('sm')]: {
+          display: 'flex',
+          height: theme.spacing(6),
+        },
+      },
+    };
+  },
+  { name: 'DemoToolbar' },
+);
+export function DemoToolbarFallback() {
+  const classes = useDemoToolbarFallbackStyles();
+  const t = useSelector((state) => state.options.t);
 
-function addHiddenInput(form, name, value) {
-  const input = document.createElement('input');
-  input.type = 'hidden';
-  input.name = name;
-  input.value = value;
-  form.appendChild(input);
+  return (
+    <div aria-busy aria-label={t('demoToolbarLabel')} className={classes.root} role="toolbar" />
+  );
 }
 
 function getDemoName(location) {
@@ -87,551 +79,6 @@ function useUniqueId(prefix) {
   return id ? `${prefix}${id}` : id;
 }
 
-const useDemoToolbarStyles = makeStyles(
-  (theme) => {
-    return {
-      root: {
-        display: 'none',
-        [theme.breakpoints.up('sm')]: {
-          display: 'flex',
-          flip: false,
-          top: 0,
-          right: theme.spacing(1),
-          height: theme.spacing(6),
-        },
-        justifyContent: 'space-between',
-      },
-      toggleButtonGroup: {
-        margin: '8px 0',
-      },
-      toggleButton: {
-        padding: '4px 9px',
-      },
-      tooltip: {
-        zIndex: theme.zIndex.appBar - 1,
-      },
-    };
-  },
-  { name: 'DemoToolbar' },
-);
-
-const alwaysTrue = () => true;
-
-/**
- * @param {React.Ref<HTMLElement>[]} controlRefs
- * @param {object} [options]
- * @param {(index: number) => boolean} [options.isFocusableControl] In case certain controls become unfocusable
- * @param {number} [options.defaultActiveIndex]
- */
-function useToolbar(controlRefs, options = {}) {
-  const { defaultActiveIndex = 0, isFocusableControl = alwaysTrue } = options;
-  const [activeControlIndex, setActiveControlIndex] = React.useState(defaultActiveIndex);
-
-  // TODO: do we need to do this during layout practically? It's technically
-  // a bit too late since we allow user interaction between layout and passive effects
-  React.useEffect(() => {
-    setActiveControlIndex((currentActiveControlIndex) => {
-      if (!isFocusableControl(currentActiveControlIndex)) {
-        return defaultActiveIndex;
-      }
-      return currentActiveControlIndex;
-    });
-  }, [defaultActiveIndex, isFocusableControl]);
-
-  // controlRefs.findIndex(controlRef => controlRef.current = element)
-  function findControlIndex(element) {
-    let controlIndex = -1;
-    controlRefs.forEach((controlRef, index) => {
-      if (controlRef.current === element) {
-        controlIndex = index;
-      }
-    });
-    return controlIndex;
-  }
-
-  function handleControlFocus(event) {
-    const nextActiveControlIndex = findControlIndex(event.target);
-    if (nextActiveControlIndex !== -1) {
-      setActiveControlIndex(nextActiveControlIndex);
-    } else {
-      // make sure DCE works
-      // eslint-disable-next-line no-lonely-if
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(
-          'Material-UI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
-            'Make sure you have attached `getControlProps(index)` to every focusable element within this toolbar.',
-        );
-      }
-    }
-  }
-
-  let handleToolbarFocus;
-  if (process.env.NODE_ENV !== 'production') {
-    handleToolbarFocus = (event) => {
-      if (findControlIndex(event.target) === -1) {
-        console.error(
-          'Material-UI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
-            'Make sure you have attached `getControlProps(index)` to every focusable element within this toolbar.',
-        );
-      }
-    };
-  }
-
-  const { direction } = useTheme();
-
-  function handleToolbarKeyDown(event) {
-    // We handle toolbars where controls can be hidden temporarily.
-    // When a control is hidden we can't move focus to it and have to exclude
-    // it from the order.
-    let currentFocusableControlIndex = -1;
-    const focusableControls = [];
-    controlRefs.forEach((controlRef, index) => {
-      const { current: control } = controlRef;
-      if (index === activeControlIndex) {
-        currentFocusableControlIndex = focusableControls.length;
-      }
-      if (control !== null && isFocusableControl(index)) {
-        focusableControls.push(control);
-      }
-    });
-
-    const prevControlKey = direction === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
-    const nextControlKey = direction === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
-
-    let nextFocusableIndex = -1;
-    switch (event.key) {
-      case prevControlKey:
-        nextFocusableIndex =
-          (currentFocusableControlIndex - 1 + focusableControls.length) % focusableControls.length;
-        break;
-      case nextControlKey:
-        nextFocusableIndex = (currentFocusableControlIndex + 1) % focusableControls.length;
-        break;
-      case 'Home':
-        nextFocusableIndex = 0;
-        break;
-      case 'End':
-        nextFocusableIndex = focusableControls.length - 1;
-        break;
-      default:
-        break;
-    }
-
-    if (nextFocusableIndex !== -1) {
-      event.preventDefault();
-      focusableControls[nextFocusableIndex].focus();
-    }
-  }
-
-  function getControlProps(index) {
-    return {
-      onFocus: handleControlFocus,
-      ref: controlRefs[index],
-      tabIndex: index === activeControlIndex ? 0 : -1,
-    };
-  }
-
-  return {
-    getControlProps,
-    toolbarProps: {
-      // TODO: good opportunity to warn on missing `aria-label`
-      onFocus: handleToolbarFocus,
-      onKeyDown: handleToolbarKeyDown,
-      role: 'toolbar',
-    },
-  };
-}
-
-function DemoToolbar(props) {
-  const {
-    codeOpen,
-    codeVariant,
-    demo,
-    demoData,
-    demoId,
-    demoHovered,
-    demoName,
-    demoOptions,
-    demoSourceId,
-    initialFocusRef,
-    onCodeOpenChange,
-    onResetDemoClick,
-    openDemoSource,
-    showPreview,
-  } = props;
-
-  const classes = useDemoToolbarStyles();
-
-  const dispatch = useDispatch();
-  const t = useSelector((state) => state.options.t);
-
-  const hasTSVariant = demo.rawTS;
-  const renderedCodeVariant = () => {
-    if (codeVariant === CODE_VARIANTS.TS && hasTSVariant) {
-      return CODE_VARIANTS.TS;
-    }
-    return CODE_VARIANTS.JS;
-  };
-
-  const handleCodeLanguageClick = (event, clickedCodeVariant) => {
-    if (codeVariant !== clickedCodeVariant) {
-      dispatch({
-        type: ACTION_TYPES.OPTIONS_CHANGE,
-        payload: {
-          codeVariant: clickedCodeVariant,
-        },
-      });
-    }
-  };
-
-  const handleCodeSandboxClick = () => {
-    const demoConfig = getDemoConfig(demoData);
-    const parameters = compress({
-      files: {
-        'package.json': {
-          content: {
-            name: demoConfig.title,
-            description: demoConfig.description,
-            dependencies: demoConfig.dependencies,
-            devDependencies: {
-              'react-scripts': 'latest',
-              ...demoConfig.devDependencies,
-            },
-            main: demoConfig.main,
-            scripts: demoConfig.scripts,
-            // We used `title` previously but only inference from `name` is documented.
-            // TODO revisit once https://github.com/codesandbox/codesandbox-client/issues/4983 is resolved.
-            title: demoConfig.title,
-          },
-        },
-        ...Object.keys(demoConfig.files).reduce((files, name) => {
-          files[name] = { content: demoConfig.files[name] };
-          return files;
-        }, {}),
-      },
-    });
-
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.target = '_blank';
-    form.action = 'https://codeSandbox.io/api/v1/sandboxes/define';
-    addHiddenInput(form, 'parameters', parameters);
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-  };
-
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const handleMoreClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleMoreClose = () => {
-    setAnchorEl(null);
-  };
-
-  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
-  const [snackbarMessage, setSnackbarMessage] = React.useState(undefined);
-
-  const handleSnackbarClose = () => {
-    setSnackbarOpen(false);
-  };
-  const handleCopyClick = async () => {
-    try {
-      await copy(demoData.raw);
-      setSnackbarMessage(t('copiedSource'));
-      setSnackbarOpen(true);
-    } finally {
-      handleMoreClose();
-    }
-  };
-
-  const handleStackBlitzClick = () => {
-    const demoConfig = getDemoConfig(demoData);
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.target = '_blank';
-    form.action = 'https://stackblitz.com/run';
-    addHiddenInput(form, 'project[template]', 'javascript');
-    addHiddenInput(form, 'project[title]', demoConfig.title);
-    addHiddenInput(form, 'project[description]', demoConfig.description);
-    addHiddenInput(form, 'project[dependencies]', JSON.stringify(demoConfig.dependencies));
-    addHiddenInput(form, 'project[devDependencies]', JSON.stringify(demoConfig.devDependencies));
-    Object.keys(demoConfig.files).forEach((key) => {
-      const value = demoConfig.files[key];
-      addHiddenInput(form, `project[files][${key}]`, value);
-    });
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-    handleMoreClose();
-  };
-
-  const createHandleCodeSourceLink = (anchor) => async () => {
-    try {
-      await copy(`${window.location.href.split('#')[0]}#${anchor}`);
-      setSnackbarMessage(t('copiedSourceLink'));
-      setSnackbarOpen(true);
-    } finally {
-      handleMoreClose();
-    }
-  };
-
-  const [sourceHintSeen, setSourceHintSeen] = React.useState(false);
-  React.useEffect(() => {
-    setSourceHintSeen(getCookie('sourceHintSeen'));
-  }, []);
-  const handleCodeOpenClick = () => {
-    document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`;
-    onCodeOpenChange();
-    setSourceHintSeen(true);
-  };
-
-  function handleResetFocusClick() {
-    initialFocusRef.current.focusVisible();
-  }
-
-  const showSourceHint = demoHovered && !sourceHintSeen;
-
-  let showCodeLabel;
-  if (codeOpen) {
-    showCodeLabel = showPreview ? t('hideFullSource') : t('hideSource');
-  } else {
-    showCodeLabel = showPreview ? t('showFullSource') : t('showSource');
-  }
-
-  const atLeastSmallViewport = useMediaQuery((theme) => theme.breakpoints.up('sm'));
-
-  const controlRefs = [
-    React.useRef(null),
-    React.useRef(null),
-    React.useRef(null),
-    React.useRef(null),
-    React.useRef(null),
-    React.useRef(null),
-    React.useRef(null),
-    React.useRef(null),
-  ];
-  // if the code is not open we hide the first two language controls
-  const isFocusableControl = React.useCallback((index) => (codeOpen ? true : index >= 2), [
-    codeOpen,
-  ]);
-  const { getControlProps, toolbarProps } = useToolbar(controlRefs, {
-    defaultActiveIndex: 2,
-    isFocusableControl,
-  });
-
-  return (
-    <React.Fragment>
-      <div aria-label={t('demoToolbarLabel')} className={classes.root} {...toolbarProps}>
-        <NoSsr defer>
-          <Fade in={codeOpen}>
-            <ToggleButtonGroup
-              className={classes.toggleButtonGroup}
-              exclusive
-              value={renderedCodeVariant()}
-              onChange={handleCodeLanguageClick}
-            >
-              <ToggleButton
-                className={classes.toggleButton}
-                value={CODE_VARIANTS.JS}
-                aria-label={t('showJSSource')}
-                data-ga-event-category="demo"
-                data-ga-event-action="source-js"
-                data-ga-event-label={demoOptions.demo}
-                {...getControlProps(0)}
-              >
-                <JavaScriptIcon />
-              </ToggleButton>
-              <ToggleButton
-                className={classes.toggleButton}
-                value={CODE_VARIANTS.TS}
-                disabled={!hasTSVariant}
-                aria-label={t('showTSSource')}
-                data-ga-event-category="demo"
-                data-ga-event-action="source-ts"
-                data-ga-event-label={demoOptions.demo}
-                {...getControlProps(1)}
-              >
-                <TypeScriptIcon />
-              </ToggleButton>
-            </ToggleButtonGroup>
-          </Fade>
-          <div>
-            <Tooltip
-              classes={{ popper: classes.tooltip }}
-              key={showSourceHint}
-              open={showSourceHint && atLeastSmallViewport ? true : undefined}
-              PopperProps={{ disablePortal: true }}
-              title={showCodeLabel}
-              placement="bottom"
-            >
-              <IconButton
-                aria-controls={openDemoSource ? demoSourceId : null}
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="expand"
-                onClick={handleCodeOpenClick}
-                color={demoHovered ? 'primary' : 'default'}
-                {...getControlProps(2)}
-              >
-                <CodeIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            {demoOptions.hideEditButton ? null : (
-              <Tooltip
-                classes={{ popper: classes.tooltip }}
-                title={t('codesandbox')}
-                placement="bottom"
-              >
-                <IconButton
-                  data-ga-event-category="demo"
-                  data-ga-event-label={demoOptions.demo}
-                  data-ga-event-action="codesandbox"
-                  onClick={handleCodeSandboxClick}
-                  {...getControlProps(3)}
-                >
-                  <EditIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            )}
-            <Tooltip
-              classes={{ popper: classes.tooltip }}
-              title={t('copySource')}
-              placement="bottom"
-            >
-              <IconButton
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="copy"
-                onClick={handleCopyClick}
-                {...getControlProps(4)}
-              >
-                <FileCopyIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip
-              classes={{ popper: classes.tooltip }}
-              title={t('resetFocus')}
-              placement="bottom"
-            >
-              <IconButton
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="reset-focus"
-                onClick={handleResetFocusClick}
-                {...getControlProps(5)}
-              >
-                <ResetFocusIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip
-              classes={{ popper: classes.tooltip }}
-              title={t('resetDemo')}
-              placement="bottom"
-            >
-              <IconButton
-                aria-controls={demoId}
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="reset"
-                onClick={onResetDemoClick}
-                {...getControlProps(6)}
-              >
-                <RefreshIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <IconButton
-              onClick={handleMoreClick}
-              aria-owns={anchorEl ? 'demo-menu-more' : undefined}
-              aria-haspopup="true"
-              {...getControlProps(7)}
-            >
-              <MoreVertIcon fontSize="small" />
-            </IconButton>
-            <Menu
-              id="demo-menu-more"
-              anchorEl={anchorEl}
-              open={Boolean(anchorEl)}
-              onClose={handleMoreClose}
-              getContentAnchorEl={null}
-              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-            >
-              <MenuItem
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="github"
-                component="a"
-                href={demoData.githubLocation}
-                target="_blank"
-                rel="noopener nofollow"
-                onClick={handleMoreClose}
-              >
-                {t('viewGitHub')}
-              </MenuItem>
-              {demoOptions.hideEditButton ? null : (
-                <MenuItem
-                  data-ga-event-category="demo"
-                  data-ga-event-label={demoOptions.demo}
-                  data-ga-event-action="stackblitz"
-                  onClick={handleStackBlitzClick}
-                >
-                  {t('stackblitz')}
-                </MenuItem>
-              )}
-              <MenuItem
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="copy-js-source-link"
-                onClick={createHandleCodeSourceLink(`${demoName}.js`)}
-              >
-                {t('copySourceLinkJS')}
-              </MenuItem>
-              <MenuItem
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="copy-ts-source-link"
-                onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
-              >
-                {t('copySourceLinkTS')}
-              </MenuItem>
-            </Menu>
-          </div>
-        </NoSsr>
-      </div>
-      <Snackbar
-        open={snackbarOpen}
-        autoHideDuration={3000}
-        onClose={handleSnackbarClose}
-        message={snackbarMessage}
-      />
-    </React.Fragment>
-  );
-}
-
-DemoToolbar.propTypes = {
-  codeOpen: PropTypes.bool.isRequired,
-  codeVariant: PropTypes.string.isRequired,
-  demo: PropTypes.object.isRequired,
-  demoData: PropTypes.object.isRequired,
-  demoHovered: PropTypes.bool.isRequired,
-  demoId: PropTypes.string,
-  demoName: PropTypes.string.isRequired,
-  demoOptions: PropTypes.object.isRequired,
-  demoSourceId: PropTypes.string,
-  initialFocusRef: PropTypes.shape({ current: PropTypes.object }).isRequired,
-  onCodeOpenChange: PropTypes.func.isRequired,
-  onResetDemoClick: PropTypes.func.isRequired,
-  openDemoSource: PropTypes.bool.isRequired,
-  showPreview: PropTypes.bool.isRequired,
-};
-
 const useStyles = makeStyles(
   (theme) => ({
     root: {
@@ -805,25 +252,29 @@ export default function Demo(props) {
       <div className={classes.anchorLink} id={`${demoName}.js`} />
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
       {demoOptions.hideToolbar ? null : (
-        <DemoToolbar
-          codeOpen={codeOpen}
-          codeVariant={codeVariant}
-          demo={demo}
-          demoData={demoData}
-          demoHovered={demoHovered}
-          demoId={demoId}
-          demoName={demoName}
-          demoOptions={demoOptions}
-          demoSourceId={demoSourceId}
-          initialFocusRef={initialFocusRef}
-          onCodeOpenChange={() => {
-            setCodeOpen((open) => !open);
-            setShowAd(true);
-          }}
-          onResetDemoClick={resetDemo}
-          openDemoSource={openDemoSource}
-          showPreview={showPreview}
-        />
+        <NoSsr defer fallback={<DemoToolbarFallback />}>
+          <React.Suspense fallback={<DemoToolbarFallback />}>
+            <DemoToolbar
+              codeOpen={codeOpen}
+              codeVariant={codeVariant}
+              demo={demo}
+              demoData={demoData}
+              demoHovered={demoHovered}
+              demoId={demoId}
+              demoName={demoName}
+              demoOptions={demoOptions}
+              demoSourceId={demoSourceId}
+              initialFocusRef={initialFocusRef}
+              onCodeOpenChange={() => {
+                setCodeOpen((open) => !open);
+                setShowAd(true);
+              }}
+              onResetDemoClick={resetDemo}
+              openDemoSource={openDemoSource}
+              showPreview={showPreview}
+            />
+          </React.Suspense>
+        </NoSsr>
       )}
       <Collapse in={openDemoSource} unmountOnExit>
         <div>
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
new file mode 100644
index 00000000000000..96eaafd5ae54e7
--- /dev/null
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -0,0 +1,581 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import copy from 'clipboard-copy';
+import LZString from 'lz-string';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Fade from '@material-ui/core/Fade';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
+import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@material-ui/docs';
+import EditIcon from '@material-ui/icons/Edit';
+import CodeIcon from '@material-ui/icons/Code';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import Snackbar from '@material-ui/core/Snackbar';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Tooltip from '@material-ui/core/Tooltip';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import ResetFocusIcon from '@material-ui/icons/CenterFocusWeak';
+import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
+import { getCookie } from 'docs/src/modules/utils/helpers';
+import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
+
+function compress(object) {
+  return LZString.compressToBase64(JSON.stringify(object))
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+}
+
+function addHiddenInput(form, name, value) {
+  const input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = name;
+  input.value = value;
+  form.appendChild(input);
+}
+
+const useDemoToolbarStyles = makeStyles(
+  (theme) => {
+    return {
+      // Sync with styles form DemoToolbarFallback.
+      root: {
+        display: 'none',
+        [theme.breakpoints.up('sm')]: {
+          display: 'flex',
+          flip: false,
+          top: 0,
+          right: theme.spacing(1),
+          height: theme.spacing(6),
+        },
+        justifyContent: 'space-between',
+      },
+      toggleButtonGroup: {
+        margin: '8px 0',
+      },
+      toggleButton: {
+        padding: '4px 9px',
+      },
+      tooltip: {
+        zIndex: theme.zIndex.appBar - 1,
+      },
+    };
+  },
+  { name: 'DemoToolbar' },
+);
+
+export function DemoToolbarFallback() {
+  const classes = useDemoToolbarStyles();
+  const t = useSelector((state) => state.options.t);
+
+  return (
+    <div aria-busy aria-label={t('demoToolbarLabel')} className={classes.root} role="toolbar" />
+  );
+}
+
+const alwaysTrue = () => true;
+
+/**
+ * @param {React.Ref<HTMLElement>[]} controlRefs
+ * @param {object} [options]
+ * @param {(index: number) => boolean} [options.isFocusableControl] In case certain controls become unfocusable
+ * @param {number} [options.defaultActiveIndex]
+ */
+function useToolbar(controlRefs, options = {}) {
+  const { defaultActiveIndex = 0, isFocusableControl = alwaysTrue } = options;
+  const [activeControlIndex, setActiveControlIndex] = React.useState(defaultActiveIndex);
+
+  // TODO: do we need to do this during layout practically? It's technically
+  // a bit too late since we allow user interaction between layout and passive effects
+  React.useEffect(() => {
+    setActiveControlIndex((currentActiveControlIndex) => {
+      if (!isFocusableControl(currentActiveControlIndex)) {
+        return defaultActiveIndex;
+      }
+      return currentActiveControlIndex;
+    });
+  }, [defaultActiveIndex, isFocusableControl]);
+
+  // controlRefs.findIndex(controlRef => controlRef.current = element)
+  function findControlIndex(element) {
+    let controlIndex = -1;
+    controlRefs.forEach((controlRef, index) => {
+      if (controlRef.current === element) {
+        controlIndex = index;
+      }
+    });
+    return controlIndex;
+  }
+
+  function handleControlFocus(event) {
+    const nextActiveControlIndex = findControlIndex(event.target);
+    if (nextActiveControlIndex !== -1) {
+      setActiveControlIndex(nextActiveControlIndex);
+    } else {
+      // make sure DCE works
+      // eslint-disable-next-line no-lonely-if
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          'Material-UI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
+            'Make sure you have attached `getControlProps(index)` to every focusable element within this toolbar.',
+        );
+      }
+    }
+  }
+
+  let handleToolbarFocus;
+  if (process.env.NODE_ENV !== 'production') {
+    handleToolbarFocus = (event) => {
+      if (findControlIndex(event.target) === -1) {
+        console.error(
+          'Material-UI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
+            'Make sure you have attached `getControlProps(index)` to every focusable element within this toolbar.',
+        );
+      }
+    };
+  }
+
+  const { direction } = useTheme();
+
+  function handleToolbarKeyDown(event) {
+    // We handle toolbars where controls can be hidden temporarily.
+    // When a control is hidden we can't move focus to it and have to exclude
+    // it from the order.
+    let currentFocusableControlIndex = -1;
+    const focusableControls = [];
+    controlRefs.forEach((controlRef, index) => {
+      const { current: control } = controlRef;
+      if (index === activeControlIndex) {
+        currentFocusableControlIndex = focusableControls.length;
+      }
+      if (control !== null && isFocusableControl(index)) {
+        focusableControls.push(control);
+      }
+    });
+
+    const prevControlKey = direction === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
+    const nextControlKey = direction === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
+
+    let nextFocusableIndex = -1;
+    switch (event.key) {
+      case prevControlKey:
+        nextFocusableIndex =
+          (currentFocusableControlIndex - 1 + focusableControls.length) % focusableControls.length;
+        break;
+      case nextControlKey:
+        nextFocusableIndex = (currentFocusableControlIndex + 1) % focusableControls.length;
+        break;
+      case 'Home':
+        nextFocusableIndex = 0;
+        break;
+      case 'End':
+        nextFocusableIndex = focusableControls.length - 1;
+        break;
+      default:
+        break;
+    }
+
+    if (nextFocusableIndex !== -1) {
+      event.preventDefault();
+      focusableControls[nextFocusableIndex].focus();
+    }
+  }
+
+  function getControlProps(index) {
+    return {
+      onFocus: handleControlFocus,
+      ref: controlRefs[index],
+      tabIndex: index === activeControlIndex ? 0 : -1,
+    };
+  }
+
+  return {
+    getControlProps,
+    toolbarProps: {
+      // TODO: good opportunity to warn on missing `aria-label`
+      onFocus: handleToolbarFocus,
+      onKeyDown: handleToolbarKeyDown,
+      role: 'toolbar',
+    },
+  };
+}
+
+export default function DemoToolbar(props) {
+  const {
+    codeOpen,
+    codeVariant,
+    demo,
+    demoData,
+    demoId,
+    demoHovered,
+    demoName,
+    demoOptions,
+    demoSourceId,
+    initialFocusRef,
+    onCodeOpenChange,
+    onResetDemoClick,
+    openDemoSource,
+    showPreview,
+  } = props;
+
+  const classes = useDemoToolbarStyles();
+
+  const dispatch = useDispatch();
+  const t = useSelector((state) => state.options.t);
+
+  const hasTSVariant = demo.rawTS;
+  const renderedCodeVariant = () => {
+    if (codeVariant === CODE_VARIANTS.TS && hasTSVariant) {
+      return CODE_VARIANTS.TS;
+    }
+    return CODE_VARIANTS.JS;
+  };
+
+  const handleCodeLanguageClick = (event, clickedCodeVariant) => {
+    if (codeVariant !== clickedCodeVariant) {
+      dispatch({
+        type: ACTION_TYPES.OPTIONS_CHANGE,
+        payload: {
+          codeVariant: clickedCodeVariant,
+        },
+      });
+    }
+  };
+
+  const handleCodeSandboxClick = () => {
+    const demoConfig = getDemoConfig(demoData);
+    const parameters = compress({
+      files: {
+        'package.json': {
+          content: {
+            name: demoConfig.title,
+            description: demoConfig.description,
+            dependencies: demoConfig.dependencies,
+            devDependencies: {
+              'react-scripts': 'latest',
+              ...demoConfig.devDependencies,
+            },
+            main: demoConfig.main,
+            scripts: demoConfig.scripts,
+            // We used `title` previously but only inference from `name` is documented.
+            // TODO revisit once https://github.com/codesandbox/codesandbox-client/issues/4983 is resolved.
+            title: demoConfig.title,
+          },
+        },
+        ...Object.keys(demoConfig.files).reduce((files, name) => {
+          files[name] = { content: demoConfig.files[name] };
+          return files;
+        }, {}),
+      },
+    });
+
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.target = '_blank';
+    form.action = 'https://codeSandbox.io/api/v1/sandboxes/define';
+    addHiddenInput(form, 'parameters', parameters);
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+  };
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const handleMoreClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMoreClose = () => {
+    setAnchorEl(null);
+  };
+
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [snackbarMessage, setSnackbarMessage] = React.useState(undefined);
+
+  const handleSnackbarClose = () => {
+    setSnackbarOpen(false);
+  };
+  const handleCopyClick = async () => {
+    try {
+      await copy(demoData.raw);
+      setSnackbarMessage(t('copiedSource'));
+      setSnackbarOpen(true);
+    } finally {
+      handleMoreClose();
+    }
+  };
+
+  const handleStackBlitzClick = () => {
+    const demoConfig = getDemoConfig(demoData);
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.target = '_blank';
+    form.action = 'https://stackblitz.com/run';
+    addHiddenInput(form, 'project[template]', 'javascript');
+    addHiddenInput(form, 'project[title]', demoConfig.title);
+    addHiddenInput(form, 'project[description]', demoConfig.description);
+    addHiddenInput(form, 'project[dependencies]', JSON.stringify(demoConfig.dependencies));
+    addHiddenInput(form, 'project[devDependencies]', JSON.stringify(demoConfig.devDependencies));
+    Object.keys(demoConfig.files).forEach((key) => {
+      const value = demoConfig.files[key];
+      addHiddenInput(form, `project[files][${key}]`, value);
+    });
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+    handleMoreClose();
+  };
+
+  const createHandleCodeSourceLink = (anchor) => async () => {
+    try {
+      await copy(`${window.location.href.split('#')[0]}#${anchor}`);
+      setSnackbarMessage(t('copiedSourceLink'));
+      setSnackbarOpen(true);
+    } finally {
+      handleMoreClose();
+    }
+  };
+
+  const [sourceHintSeen, setSourceHintSeen] = React.useState(false);
+  React.useEffect(() => {
+    setSourceHintSeen(getCookie('sourceHintSeen'));
+  }, []);
+  const handleCodeOpenClick = () => {
+    document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`;
+    onCodeOpenChange();
+    setSourceHintSeen(true);
+  };
+
+  function handleResetFocusClick() {
+    initialFocusRef.current.focusVisible();
+  }
+
+  const showSourceHint = demoHovered && !sourceHintSeen;
+
+  let showCodeLabel;
+  if (codeOpen) {
+    showCodeLabel = showPreview ? t('hideFullSource') : t('hideSource');
+  } else {
+    showCodeLabel = showPreview ? t('showFullSource') : t('showSource');
+  }
+
+  const atLeastSmallViewport = useMediaQuery((theme) => theme.breakpoints.up('sm'));
+
+  const controlRefs = [
+    React.useRef(null),
+    React.useRef(null),
+    React.useRef(null),
+    React.useRef(null),
+    React.useRef(null),
+    React.useRef(null),
+    React.useRef(null),
+    React.useRef(null),
+  ];
+  // if the code is not open we hide the first two language controls
+  const isFocusableControl = React.useCallback((index) => (codeOpen ? true : index >= 2), [
+    codeOpen,
+  ]);
+  const { getControlProps, toolbarProps } = useToolbar(controlRefs, {
+    defaultActiveIndex: 2,
+    isFocusableControl,
+  });
+
+  return (
+    <React.Fragment>
+      <div aria-label={t('demoToolbarLabel')} className={classes.root} {...toolbarProps}>
+        <Fade in={codeOpen}>
+          <ToggleButtonGroup
+            className={classes.toggleButtonGroup}
+            exclusive
+            value={renderedCodeVariant()}
+            onChange={handleCodeLanguageClick}
+          >
+            <ToggleButton
+              className={classes.toggleButton}
+              value={CODE_VARIANTS.JS}
+              aria-label={t('showJSSource')}
+              data-ga-event-category="demo"
+              data-ga-event-action="source-js"
+              data-ga-event-label={demoOptions.demo}
+              {...getControlProps(0)}
+            >
+              <JavaScriptIcon />
+            </ToggleButton>
+            <ToggleButton
+              className={classes.toggleButton}
+              value={CODE_VARIANTS.TS}
+              disabled={!hasTSVariant}
+              aria-label={t('showTSSource')}
+              data-ga-event-category="demo"
+              data-ga-event-action="source-ts"
+              data-ga-event-label={demoOptions.demo}
+              {...getControlProps(1)}
+            >
+              <TypeScriptIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Fade>
+        <div>
+          <Tooltip
+            classes={{ popper: classes.tooltip }}
+            key={showSourceHint}
+            open={showSourceHint && atLeastSmallViewport ? true : undefined}
+            PopperProps={{ disablePortal: true }}
+            title={showCodeLabel}
+            placement="bottom"
+          >
+            <IconButton
+              aria-controls={openDemoSource ? demoSourceId : null}
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="expand"
+              onClick={handleCodeOpenClick}
+              color={demoHovered ? 'primary' : 'default'}
+              {...getControlProps(2)}
+            >
+              <CodeIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          {demoOptions.hideEditButton ? null : (
+            <Tooltip
+              classes={{ popper: classes.tooltip }}
+              title={t('codesandbox')}
+              placement="bottom"
+            >
+              <IconButton
+                data-ga-event-category="demo"
+                data-ga-event-label={demoOptions.demo}
+                data-ga-event-action="codesandbox"
+                onClick={handleCodeSandboxClick}
+                {...getControlProps(3)}
+              >
+                <EditIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+          <Tooltip classes={{ popper: classes.tooltip }} title={t('copySource')} placement="bottom">
+            <IconButton
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="copy"
+              onClick={handleCopyClick}
+              {...getControlProps(4)}
+            >
+              <FileCopyIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip classes={{ popper: classes.tooltip }} title={t('resetFocus')} placement="bottom">
+            <IconButton
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="reset-focus"
+              onClick={handleResetFocusClick}
+              {...getControlProps(5)}
+            >
+              <ResetFocusIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip classes={{ popper: classes.tooltip }} title={t('resetDemo')} placement="bottom">
+            <IconButton
+              aria-controls={demoId}
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="reset"
+              onClick={onResetDemoClick}
+              {...getControlProps(6)}
+            >
+              <RefreshIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <IconButton
+            onClick={handleMoreClick}
+            aria-owns={anchorEl ? 'demo-menu-more' : undefined}
+            aria-haspopup="true"
+            {...getControlProps(7)}
+          >
+            <MoreVertIcon fontSize="small" />
+          </IconButton>
+          <Menu
+            id="demo-menu-more"
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleMoreClose}
+            getContentAnchorEl={null}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+          >
+            <MenuItem
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="github"
+              component="a"
+              href={demoData.githubLocation}
+              target="_blank"
+              rel="noopener nofollow"
+              onClick={handleMoreClose}
+            >
+              {t('viewGitHub')}
+            </MenuItem>
+            {demoOptions.hideEditButton ? null : (
+              <MenuItem
+                data-ga-event-category="demo"
+                data-ga-event-label={demoOptions.demo}
+                data-ga-event-action="stackblitz"
+                onClick={handleStackBlitzClick}
+              >
+                {t('stackblitz')}
+              </MenuItem>
+            )}
+            <MenuItem
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="copy-js-source-link"
+              onClick={createHandleCodeSourceLink(`${demoName}.js`)}
+            >
+              {t('copySourceLinkJS')}
+            </MenuItem>
+            <MenuItem
+              data-ga-event-category="demo"
+              data-ga-event-label={demoOptions.demo}
+              data-ga-event-action="copy-ts-source-link"
+              onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
+            >
+              {t('copySourceLinkTS')}
+            </MenuItem>
+          </Menu>
+        </div>
+      </div>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+      />
+    </React.Fragment>
+  );
+}
+
+DemoToolbar.propTypes = {
+  codeOpen: PropTypes.bool.isRequired,
+  codeVariant: PropTypes.string.isRequired,
+  demo: PropTypes.object.isRequired,
+  demoData: PropTypes.object.isRequired,
+  demoHovered: PropTypes.bool.isRequired,
+  demoId: PropTypes.string,
+  demoName: PropTypes.string.isRequired,
+  demoOptions: PropTypes.object.isRequired,
+  demoSourceId: PropTypes.string,
+  initialFocusRef: PropTypes.shape({ current: PropTypes.object }).isRequired,
+  onCodeOpenChange: PropTypes.func.isRequired,
+  onResetDemoClick: PropTypes.func.isRequired,
+  openDemoSource: PropTypes.bool.isRequired,
+  showPreview: PropTypes.bool.isRequired,
+};