diff --git a/.eslintrc.js b/.eslintrc.js
index 45d5bdec7acbf1..2b614c3458453b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -155,5 +155,11 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['docs/pages/**/*.js'],
+      rules: {
+        'react/prop-types': 'off',
+      },
+    },
   ],
 };
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index bdb2f61de1d4a1..076a6f61277372 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -335,13 +335,16 @@ MyApp.propTypes = {
 };
 
 MyApp.getInitialProps = async ({ ctx, Component }) => {
-  let pageProps = { userLanguage: ctx.query.userLanguage };
+  let pageProps = {};
 
   if (Component.getInitialProps) {
     pageProps = await Component.getInitialProps(ctx);
   }
 
   return {
-    pageProps,
+    pageProps: {
+      userLanguage: ctx.query.userLanguage || 'en',
+      ...pageProps,
+    },
   };
 };
diff --git a/docs/pages/api-docs/alert-title.js b/docs/pages/api-docs/alert-title.js
index 6dfc542a39886a..725678e7b7112a 100644
--- a/docs/pages/api-docs/alert-title.js
+++ b/docs/pages/api-docs/alert-title.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/alert-title';
-const requireRaw = require.context('!raw-loader!./', false, /alert-title\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/alert-title\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/alert.js b/docs/pages/api-docs/alert.js
index d886dff1b1a055..d6b70720d6e3e4 100644
--- a/docs/pages/api-docs/alert.js
+++ b/docs/pages/api-docs/alert.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/alert';
-const requireRaw = require.context('!raw-loader!./', false, /alert\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/alert\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/app-bar.js b/docs/pages/api-docs/app-bar.js
index 154fde3c957c0b..c14477d7e57f5e 100644
--- a/docs/pages/api-docs/app-bar.js
+++ b/docs/pages/api-docs/app-bar.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/app-bar';
-const requireRaw = require.context('!raw-loader!./', false, /app-bar\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/app-bar\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/autocomplete.js b/docs/pages/api-docs/autocomplete.js
index 7fff2551eb6501..dbcfb7d2ca3621 100644
--- a/docs/pages/api-docs/autocomplete.js
+++ b/docs/pages/api-docs/autocomplete.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/autocomplete';
-const requireRaw = require.context('!raw-loader!./', false, /autocomplete\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/autocomplete\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/avatar-group.js b/docs/pages/api-docs/avatar-group.js
index d43bbd37ec1af8..1641e49047137f 100644
--- a/docs/pages/api-docs/avatar-group.js
+++ b/docs/pages/api-docs/avatar-group.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/avatar-group';
-const requireRaw = require.context('!raw-loader!./', false, /avatar-group\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/avatar-group\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/avatar.js b/docs/pages/api-docs/avatar.js
index ac8d01475a1643..a2cb2cb580fdb5 100644
--- a/docs/pages/api-docs/avatar.js
+++ b/docs/pages/api-docs/avatar.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/avatar';
-const requireRaw = require.context('!raw-loader!./', false, /avatar\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/avatar\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/backdrop.js b/docs/pages/api-docs/backdrop.js
index 47e811a8da47fd..83b7de4db23d61 100644
--- a/docs/pages/api-docs/backdrop.js
+++ b/docs/pages/api-docs/backdrop.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/backdrop';
-const requireRaw = require.context('!raw-loader!./', false, /backdrop\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/backdrop\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/badge.js b/docs/pages/api-docs/badge.js
index 00a54b4469404e..43302b4cc93f2b 100644
--- a/docs/pages/api-docs/badge.js
+++ b/docs/pages/api-docs/badge.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/badge';
-const requireRaw = require.context('!raw-loader!./', false, /badge\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/badge\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/bottom-navigation-action.js b/docs/pages/api-docs/bottom-navigation-action.js
index 3cdcf91bf36846..91d6b984d8202f 100644
--- a/docs/pages/api-docs/bottom-navigation-action.js
+++ b/docs/pages/api-docs/bottom-navigation-action.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/bottom-navigation-action';
-const requireRaw = require.context('!raw-loader!./', false, /bottom-navigation-action\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/bottom-navigation-action\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/bottom-navigation.js b/docs/pages/api-docs/bottom-navigation.js
index 75294928cc0ba5..cb343e6cc8b968 100644
--- a/docs/pages/api-docs/bottom-navigation.js
+++ b/docs/pages/api-docs/bottom-navigation.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/bottom-navigation';
-const requireRaw = require.context('!raw-loader!./', false, /bottom-navigation\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/bottom-navigation\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/breadcrumbs.js b/docs/pages/api-docs/breadcrumbs.js
index a9a739a16befa8..ee13354b763f06 100644
--- a/docs/pages/api-docs/breadcrumbs.js
+++ b/docs/pages/api-docs/breadcrumbs.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/breadcrumbs';
-const requireRaw = require.context('!raw-loader!./', false, /breadcrumbs\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/breadcrumbs\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/button-base.js b/docs/pages/api-docs/button-base.js
index 249d4f182e23cc..e1931b61cd7cb6 100644
--- a/docs/pages/api-docs/button-base.js
+++ b/docs/pages/api-docs/button-base.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/button-base';
-const requireRaw = require.context('!raw-loader!./', false, /button-base\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/button-base\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/button-group.js b/docs/pages/api-docs/button-group.js
index a9a8011d38db07..c45a61ff829c35 100644
--- a/docs/pages/api-docs/button-group.js
+++ b/docs/pages/api-docs/button-group.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/button-group';
-const requireRaw = require.context('!raw-loader!./', false, /button-group\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/button-group\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/button.js b/docs/pages/api-docs/button.js
index b28ee7c9b3bb01..31ea06b24525d8 100644
--- a/docs/pages/api-docs/button.js
+++ b/docs/pages/api-docs/button.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/button';
-const requireRaw = require.context('!raw-loader!./', false, /button\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/button\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/card-action-area.js b/docs/pages/api-docs/card-action-area.js
index 17cf535a331e8d..ce00afb26b9c6e 100644
--- a/docs/pages/api-docs/card-action-area.js
+++ b/docs/pages/api-docs/card-action-area.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-action-area';
-const requireRaw = require.context('!raw-loader!./', false, /card-action-area\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/card-action-area\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/card-actions.js b/docs/pages/api-docs/card-actions.js
index 200785749cf32a..1158a5986fc25b 100644
--- a/docs/pages/api-docs/card-actions.js
+++ b/docs/pages/api-docs/card-actions.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-actions';
-const requireRaw = require.context('!raw-loader!./', false, /card-actions\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/card-actions\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/card-content.js b/docs/pages/api-docs/card-content.js
index 48889759f376ef..4ada07e2eb72a6 100644
--- a/docs/pages/api-docs/card-content.js
+++ b/docs/pages/api-docs/card-content.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-content';
-const requireRaw = require.context('!raw-loader!./', false, /card-content\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/card-content\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/card-header.js b/docs/pages/api-docs/card-header.js
index a087280a54fb45..b65e81e5bf21fa 100644
--- a/docs/pages/api-docs/card-header.js
+++ b/docs/pages/api-docs/card-header.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-header';
-const requireRaw = require.context('!raw-loader!./', false, /card-header\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/card-header\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/card-media.js b/docs/pages/api-docs/card-media.js
index 59b5fdb44e694c..8e7ecd8527778e 100644
--- a/docs/pages/api-docs/card-media.js
+++ b/docs/pages/api-docs/card-media.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-media';
-const requireRaw = require.context('!raw-loader!./', false, /card-media\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/card-media\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/card.js b/docs/pages/api-docs/card.js
index 2e625dc692b59d..b2b7fceadd03bf 100644
--- a/docs/pages/api-docs/card.js
+++ b/docs/pages/api-docs/card.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card';
-const requireRaw = require.context('!raw-loader!./', false, /card\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/card\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/checkbox.js b/docs/pages/api-docs/checkbox.js
index 99dd1535420d35..e6c751fb961224 100644
--- a/docs/pages/api-docs/checkbox.js
+++ b/docs/pages/api-docs/checkbox.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/checkbox';
-const requireRaw = require.context('!raw-loader!./', false, /checkbox\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/checkbox\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/chip.js b/docs/pages/api-docs/chip.js
index 64bbbf4b7adf71..b2e5b41ab626f1 100644
--- a/docs/pages/api-docs/chip.js
+++ b/docs/pages/api-docs/chip.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/chip';
-const requireRaw = require.context('!raw-loader!./', false, /chip\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/chip\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/circular-progress.js b/docs/pages/api-docs/circular-progress.js
index 5d125ea66de882..154208c945f323 100644
--- a/docs/pages/api-docs/circular-progress.js
+++ b/docs/pages/api-docs/circular-progress.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/circular-progress';
-const requireRaw = require.context('!raw-loader!./', false, /circular-progress\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/circular-progress\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/click-away-listener.js b/docs/pages/api-docs/click-away-listener.js
index 33b35d131a8c78..43b7a90994cce9 100644
--- a/docs/pages/api-docs/click-away-listener.js
+++ b/docs/pages/api-docs/click-away-listener.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/click-away-listener';
-const requireRaw = require.context('!raw-loader!./', false, /click-away-listener\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/click-away-listener\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/collapse.js b/docs/pages/api-docs/collapse.js
index a95997b4ff847b..4f99e7ff06e9a3 100644
--- a/docs/pages/api-docs/collapse.js
+++ b/docs/pages/api-docs/collapse.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/collapse';
-const requireRaw = require.context('!raw-loader!./', false, /collapse\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/collapse\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/container.js b/docs/pages/api-docs/container.js
index c5dbebd70d2ad4..367330ec6a89d5 100644
--- a/docs/pages/api-docs/container.js
+++ b/docs/pages/api-docs/container.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/container';
-const requireRaw = require.context('!raw-loader!./', false, /container\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/container\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/css-baseline.js b/docs/pages/api-docs/css-baseline.js
index cd262415d25855..6ef62b32af7582 100644
--- a/docs/pages/api-docs/css-baseline.js
+++ b/docs/pages/api-docs/css-baseline.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/css-baseline';
-const requireRaw = require.context('!raw-loader!./', false, /css-baseline\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/css-baseline\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/dialog-actions.js b/docs/pages/api-docs/dialog-actions.js
index 296fb9b94723d5..47db03616798a0 100644
--- a/docs/pages/api-docs/dialog-actions.js
+++ b/docs/pages/api-docs/dialog-actions.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-actions';
-const requireRaw = require.context('!raw-loader!./', false, /dialog-actions\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/dialog-actions\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/dialog-content-text.js b/docs/pages/api-docs/dialog-content-text.js
index 6bba03700ba632..655db26bff595b 100644
--- a/docs/pages/api-docs/dialog-content-text.js
+++ b/docs/pages/api-docs/dialog-content-text.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-content-text';
-const requireRaw = require.context('!raw-loader!./', false, /dialog-content-text\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/dialog-content-text\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/dialog-content.js b/docs/pages/api-docs/dialog-content.js
index 79f51214acad0f..97d8f80d7212d1 100644
--- a/docs/pages/api-docs/dialog-content.js
+++ b/docs/pages/api-docs/dialog-content.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-content';
-const requireRaw = require.context('!raw-loader!./', false, /dialog-content\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/dialog-content\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/dialog-title.js b/docs/pages/api-docs/dialog-title.js
index cba97b433d5d81..59ce357a872567 100644
--- a/docs/pages/api-docs/dialog-title.js
+++ b/docs/pages/api-docs/dialog-title.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-title';
-const requireRaw = require.context('!raw-loader!./', false, /dialog-title\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/dialog-title\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/dialog.js b/docs/pages/api-docs/dialog.js
index 024e23779f4182..b703a05e7648e8 100644
--- a/docs/pages/api-docs/dialog.js
+++ b/docs/pages/api-docs/dialog.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog';
-const requireRaw = require.context('!raw-loader!./', false, /dialog\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/dialog\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/divider.js b/docs/pages/api-docs/divider.js
index 9fe90287508aca..0ea897a9459515 100644
--- a/docs/pages/api-docs/divider.js
+++ b/docs/pages/api-docs/divider.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/divider';
-const requireRaw = require.context('!raw-loader!./', false, /divider\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/divider\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/drawer.js b/docs/pages/api-docs/drawer.js
index af5bd517f6f69a..d8b18cb8592ca1 100644
--- a/docs/pages/api-docs/drawer.js
+++ b/docs/pages/api-docs/drawer.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/drawer';
-const requireRaw = require.context('!raw-loader!./', false, /drawer\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/drawer\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/expansion-panel-actions.js b/docs/pages/api-docs/expansion-panel-actions.js
index b0eff1e5d4ec49..600da1a71a2121 100644
--- a/docs/pages/api-docs/expansion-panel-actions.js
+++ b/docs/pages/api-docs/expansion-panel-actions.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/expansion-panel-actions';
-const requireRaw = require.context('!raw-loader!./', false, /expansion-panel-actions\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/expansion-panel-actions\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/expansion-panel-details.js b/docs/pages/api-docs/expansion-panel-details.js
index 2915795a9f4df6..64770a5d61ecd6 100644
--- a/docs/pages/api-docs/expansion-panel-details.js
+++ b/docs/pages/api-docs/expansion-panel-details.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/expansion-panel-details';
-const requireRaw = require.context('!raw-loader!./', false, /expansion-panel-details\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/expansion-panel-details\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/expansion-panel-summary.js b/docs/pages/api-docs/expansion-panel-summary.js
index ae6808df32ede3..91d9464084646c 100644
--- a/docs/pages/api-docs/expansion-panel-summary.js
+++ b/docs/pages/api-docs/expansion-panel-summary.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/expansion-panel-summary';
-const requireRaw = require.context('!raw-loader!./', false, /expansion-panel-summary\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/expansion-panel-summary\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/expansion-panel.js b/docs/pages/api-docs/expansion-panel.js
index 8b2e9dc3b08a71..e67324794eed10 100644
--- a/docs/pages/api-docs/expansion-panel.js
+++ b/docs/pages/api-docs/expansion-panel.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/expansion-panel';
-const requireRaw = require.context('!raw-loader!./', false, /expansion-panel\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/expansion-panel\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/fab.js b/docs/pages/api-docs/fab.js
index a6180999b6e590..62eb0408f0ada5 100644
--- a/docs/pages/api-docs/fab.js
+++ b/docs/pages/api-docs/fab.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/fab';
-const requireRaw = require.context('!raw-loader!./', false, /fab\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/fab\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/fade.js b/docs/pages/api-docs/fade.js
index 0d4f13d6acca7e..e0f7e5209ca607 100644
--- a/docs/pages/api-docs/fade.js
+++ b/docs/pages/api-docs/fade.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/fade';
-const requireRaw = require.context('!raw-loader!./', false, /fade\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/fade\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/filled-input.js b/docs/pages/api-docs/filled-input.js
index 9365f2c0a3f347..53ae0920bddaaa 100644
--- a/docs/pages/api-docs/filled-input.js
+++ b/docs/pages/api-docs/filled-input.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/filled-input';
-const requireRaw = require.context('!raw-loader!./', false, /filled-input\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/filled-input\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/form-control-label.js b/docs/pages/api-docs/form-control-label.js
index ddde010b9b200a..5c16a507df141f 100644
--- a/docs/pages/api-docs/form-control-label.js
+++ b/docs/pages/api-docs/form-control-label.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-control-label';
-const requireRaw = require.context('!raw-loader!./', false, /form-control-label\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/form-control-label\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/form-control.js b/docs/pages/api-docs/form-control.js
index 782f23ad131cdc..433f6a922ef529 100644
--- a/docs/pages/api-docs/form-control.js
+++ b/docs/pages/api-docs/form-control.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-control';
-const requireRaw = require.context('!raw-loader!./', false, /form-control\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/form-control\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/form-group.js b/docs/pages/api-docs/form-group.js
index f99281dd74e89a..f1fedc62ae2244 100644
--- a/docs/pages/api-docs/form-group.js
+++ b/docs/pages/api-docs/form-group.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-group';
-const requireRaw = require.context('!raw-loader!./', false, /form-group\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/form-group\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/form-helper-text.js b/docs/pages/api-docs/form-helper-text.js
index 0662b7156f2470..ddf08e0d7cdc2f 100644
--- a/docs/pages/api-docs/form-helper-text.js
+++ b/docs/pages/api-docs/form-helper-text.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-helper-text';
-const requireRaw = require.context('!raw-loader!./', false, /form-helper-text\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/form-helper-text\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/form-label.js b/docs/pages/api-docs/form-label.js
index e572ca2fb533ef..978231ae2e0a87 100644
--- a/docs/pages/api-docs/form-label.js
+++ b/docs/pages/api-docs/form-label.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-label';
-const requireRaw = require.context('!raw-loader!./', false, /form-label\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/form-label\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/grid-list-tile-bar.js b/docs/pages/api-docs/grid-list-tile-bar.js
index 62eb8df158675d..0fdfabb707f500 100644
--- a/docs/pages/api-docs/grid-list-tile-bar.js
+++ b/docs/pages/api-docs/grid-list-tile-bar.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grid-list-tile-bar';
-const requireRaw = require.context('!raw-loader!./', false, /grid-list-tile-bar\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-list-tile-bar\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/grid-list-tile.js b/docs/pages/api-docs/grid-list-tile.js
index 01cc60a30660a4..254ce412024784 100644
--- a/docs/pages/api-docs/grid-list-tile.js
+++ b/docs/pages/api-docs/grid-list-tile.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grid-list-tile';
-const requireRaw = require.context('!raw-loader!./', false, /grid-list-tile\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-list-tile\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/grid-list.js b/docs/pages/api-docs/grid-list.js
index bf8142c46aefa7..004dd933dede76 100644
--- a/docs/pages/api-docs/grid-list.js
+++ b/docs/pages/api-docs/grid-list.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grid-list';
-const requireRaw = require.context('!raw-loader!./', false, /grid-list\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-list\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/grid.js b/docs/pages/api-docs/grid.js
index 48392293bf6e2c..35fcee3aa8e2f6 100644
--- a/docs/pages/api-docs/grid.js
+++ b/docs/pages/api-docs/grid.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grid';
-const requireRaw = require.context('!raw-loader!./', false, /grid\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/grid\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/grow.js b/docs/pages/api-docs/grow.js
index 3174477f840991..ee20906eecd902 100644
--- a/docs/pages/api-docs/grow.js
+++ b/docs/pages/api-docs/grow.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grow';
-const requireRaw = require.context('!raw-loader!./', false, /grow\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/grow\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/hidden.js b/docs/pages/api-docs/hidden.js
index c49627c8a6e992..6d67ca39ce34d8 100644
--- a/docs/pages/api-docs/hidden.js
+++ b/docs/pages/api-docs/hidden.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/hidden';
-const requireRaw = require.context('!raw-loader!./', false, /hidden\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/hidden\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/icon-button.js b/docs/pages/api-docs/icon-button.js
index 54d17610dfadb6..76fadb870d463a 100644
--- a/docs/pages/api-docs/icon-button.js
+++ b/docs/pages/api-docs/icon-button.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/icon-button';
-const requireRaw = require.context('!raw-loader!./', false, /icon-button\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/icon-button\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/icon.js b/docs/pages/api-docs/icon.js
index d9778c32038006..f841734a598597 100644
--- a/docs/pages/api-docs/icon.js
+++ b/docs/pages/api-docs/icon.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/icon';
-const requireRaw = require.context('!raw-loader!./', false, /icon\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/icon\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/input-adornment.js b/docs/pages/api-docs/input-adornment.js
index ebda81876ab665..7ccdb6919f17ae 100644
--- a/docs/pages/api-docs/input-adornment.js
+++ b/docs/pages/api-docs/input-adornment.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input-adornment';
-const requireRaw = require.context('!raw-loader!./', false, /input-adornment\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/input-adornment\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/input-base.js b/docs/pages/api-docs/input-base.js
index fa9417892723d9..dcdbf8782ecc65 100644
--- a/docs/pages/api-docs/input-base.js
+++ b/docs/pages/api-docs/input-base.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input-base';
-const requireRaw = require.context('!raw-loader!./', false, /input-base\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/input-base\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/input-label.js b/docs/pages/api-docs/input-label.js
index 9d3e5324576e43..ba443c21721ecb 100644
--- a/docs/pages/api-docs/input-label.js
+++ b/docs/pages/api-docs/input-label.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input-label';
-const requireRaw = require.context('!raw-loader!./', false, /input-label\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/input-label\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/input.js b/docs/pages/api-docs/input.js
index 0366f459ddec30..fce3ce586ec13a 100644
--- a/docs/pages/api-docs/input.js
+++ b/docs/pages/api-docs/input.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input';
-const requireRaw = require.context('!raw-loader!./', false, /input\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/input\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/linear-progress.js b/docs/pages/api-docs/linear-progress.js
index 057c03a8e98d5d..9431f1d17fee69 100644
--- a/docs/pages/api-docs/linear-progress.js
+++ b/docs/pages/api-docs/linear-progress.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/linear-progress';
-const requireRaw = require.context('!raw-loader!./', false, /linear-progress\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/linear-progress\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/link.js b/docs/pages/api-docs/link.js
index 56da21799941f3..13b59ffed461be 100644
--- a/docs/pages/api-docs/link.js
+++ b/docs/pages/api-docs/link.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/link';
-const requireRaw = require.context('!raw-loader!./', false, /link\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/link\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list-item-avatar.js b/docs/pages/api-docs/list-item-avatar.js
index 272be9a1b427d2..81c5cce35668ed 100644
--- a/docs/pages/api-docs/list-item-avatar.js
+++ b/docs/pages/api-docs/list-item-avatar.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-avatar';
-const requireRaw = require.context('!raw-loader!./', false, /list-item-avatar\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list-item-avatar\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list-item-icon.js b/docs/pages/api-docs/list-item-icon.js
index 85c29b9150a0da..5f0e569e1e782d 100644
--- a/docs/pages/api-docs/list-item-icon.js
+++ b/docs/pages/api-docs/list-item-icon.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-icon';
-const requireRaw = require.context('!raw-loader!./', false, /list-item-icon\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list-item-icon\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list-item-secondary-action.js b/docs/pages/api-docs/list-item-secondary-action.js
index f720560b5b00db..1d5c4ecfa4e807 100644
--- a/docs/pages/api-docs/list-item-secondary-action.js
+++ b/docs/pages/api-docs/list-item-secondary-action.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-secondary-action';
-const requireRaw = require.context('!raw-loader!./', false, /list-item-secondary-action\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list-item-secondary-action\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list-item-text.js b/docs/pages/api-docs/list-item-text.js
index d07f522cf0becc..f602f595daeb15 100644
--- a/docs/pages/api-docs/list-item-text.js
+++ b/docs/pages/api-docs/list-item-text.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-text';
-const requireRaw = require.context('!raw-loader!./', false, /list-item-text\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list-item-text\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list-item.js b/docs/pages/api-docs/list-item.js
index 7480dd8cfe05b6..5902fe162c264d 100644
--- a/docs/pages/api-docs/list-item.js
+++ b/docs/pages/api-docs/list-item.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item';
-const requireRaw = require.context('!raw-loader!./', false, /list-item\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list-item\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list-subheader.js b/docs/pages/api-docs/list-subheader.js
index cf84b6365aa396..a3ad288f5fd2fc 100644
--- a/docs/pages/api-docs/list-subheader.js
+++ b/docs/pages/api-docs/list-subheader.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-subheader';
-const requireRaw = require.context('!raw-loader!./', false, /list-subheader\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list-subheader\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/list.js b/docs/pages/api-docs/list.js
index c489691ee1e309..b8c77ceb8763a6 100644
--- a/docs/pages/api-docs/list.js
+++ b/docs/pages/api-docs/list.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list';
-const requireRaw = require.context('!raw-loader!./', false, /list\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/list\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/menu-item.js b/docs/pages/api-docs/menu-item.js
index a02af074038b50..aa6e1c04a8bec1 100644
--- a/docs/pages/api-docs/menu-item.js
+++ b/docs/pages/api-docs/menu-item.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/menu-item';
-const requireRaw = require.context('!raw-loader!./', false, /menu-item\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/menu-item\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/menu-list.js b/docs/pages/api-docs/menu-list.js
index 8b667b670e3f88..ca466d281402a4 100644
--- a/docs/pages/api-docs/menu-list.js
+++ b/docs/pages/api-docs/menu-list.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/menu-list';
-const requireRaw = require.context('!raw-loader!./', false, /menu-list\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/menu-list\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/menu.js b/docs/pages/api-docs/menu.js
index f2c37fedefcadd..efd84df3e8b935 100644
--- a/docs/pages/api-docs/menu.js
+++ b/docs/pages/api-docs/menu.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/menu';
-const requireRaw = require.context('!raw-loader!./', false, /menu\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/menu\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/mobile-stepper.js b/docs/pages/api-docs/mobile-stepper.js
index e4b638bafa10d7..472b74d346251a 100644
--- a/docs/pages/api-docs/mobile-stepper.js
+++ b/docs/pages/api-docs/mobile-stepper.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/mobile-stepper';
-const requireRaw = require.context('!raw-loader!./', false, /mobile-stepper\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/mobile-stepper\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/modal.js b/docs/pages/api-docs/modal.js
index 3513641c6cf2bc..979f2bef945047 100644
--- a/docs/pages/api-docs/modal.js
+++ b/docs/pages/api-docs/modal.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/modal';
-const requireRaw = require.context('!raw-loader!./', false, /modal\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/modal\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/native-select.js b/docs/pages/api-docs/native-select.js
index e03961343afd78..22108ce15f4468 100644
--- a/docs/pages/api-docs/native-select.js
+++ b/docs/pages/api-docs/native-select.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/native-select';
-const requireRaw = require.context('!raw-loader!./', false, /native-select\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/native-select\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/no-ssr.js b/docs/pages/api-docs/no-ssr.js
index e2162d024e984b..9d9c8a6631ec41 100644
--- a/docs/pages/api-docs/no-ssr.js
+++ b/docs/pages/api-docs/no-ssr.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/no-ssr';
-const requireRaw = require.context('!raw-loader!./', false, /no-ssr\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/no-ssr\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/outlined-input.js b/docs/pages/api-docs/outlined-input.js
index 2252a1863c020c..bce4b51e05a20b 100644
--- a/docs/pages/api-docs/outlined-input.js
+++ b/docs/pages/api-docs/outlined-input.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/outlined-input';
-const requireRaw = require.context('!raw-loader!./', false, /outlined-input\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/outlined-input\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/pagination-item.js b/docs/pages/api-docs/pagination-item.js
index 2ca3b7b819e217..dbda4201e73ac9 100644
--- a/docs/pages/api-docs/pagination-item.js
+++ b/docs/pages/api-docs/pagination-item.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/pagination-item';
-const requireRaw = require.context('!raw-loader!./', false, /pagination-item\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/pagination-item\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/pagination.js b/docs/pages/api-docs/pagination.js
index db6e1828231531..0065f09da79782 100644
--- a/docs/pages/api-docs/pagination.js
+++ b/docs/pages/api-docs/pagination.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/pagination';
-const requireRaw = require.context('!raw-loader!./', false, /pagination\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/pagination\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/paper.js b/docs/pages/api-docs/paper.js
index 940b52203850cc..cef76c5ef4af0d 100644
--- a/docs/pages/api-docs/paper.js
+++ b/docs/pages/api-docs/paper.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/paper';
-const requireRaw = require.context('!raw-loader!./', false, /paper\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/paper\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/popover.js b/docs/pages/api-docs/popover.js
index 4ad5672a6122d7..5ffb48ba112e42 100644
--- a/docs/pages/api-docs/popover.js
+++ b/docs/pages/api-docs/popover.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/popover';
-const requireRaw = require.context('!raw-loader!./', false, /popover\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/popover\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/popper.js b/docs/pages/api-docs/popper.js
index f742113221d1b7..603d9b40a4ccc8 100644
--- a/docs/pages/api-docs/popper.js
+++ b/docs/pages/api-docs/popper.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/popper';
-const requireRaw = require.context('!raw-loader!./', false, /popper\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/popper\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/portal.js b/docs/pages/api-docs/portal.js
index 7cd12e2aa9e4bd..b3a6e34d4ae9b1 100644
--- a/docs/pages/api-docs/portal.js
+++ b/docs/pages/api-docs/portal.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/portal';
-const requireRaw = require.context('!raw-loader!./', false, /portal\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/portal\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/radio-group.js b/docs/pages/api-docs/radio-group.js
index ad4027edddfa55..85c2819d62f4a3 100644
--- a/docs/pages/api-docs/radio-group.js
+++ b/docs/pages/api-docs/radio-group.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/radio-group';
-const requireRaw = require.context('!raw-loader!./', false, /radio-group\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/radio-group\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/radio.js b/docs/pages/api-docs/radio.js
index e94d57300824fb..66efafd2872ce8 100644
--- a/docs/pages/api-docs/radio.js
+++ b/docs/pages/api-docs/radio.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/radio';
-const requireRaw = require.context('!raw-loader!./', false, /radio\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/radio\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/rating.js b/docs/pages/api-docs/rating.js
index 41cd363e35055a..8367051a8210aa 100644
--- a/docs/pages/api-docs/rating.js
+++ b/docs/pages/api-docs/rating.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/rating';
-const requireRaw = require.context('!raw-loader!./', false, /rating\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/rating\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/root-ref.js b/docs/pages/api-docs/root-ref.js
index 0db44858bf3617..191416ac953e93 100644
--- a/docs/pages/api-docs/root-ref.js
+++ b/docs/pages/api-docs/root-ref.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/root-ref';
-const requireRaw = require.context('!raw-loader!./', false, /root-ref\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/root-ref\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/scoped-css-baseline.js b/docs/pages/api-docs/scoped-css-baseline.js
index d55876a90fa6ab..1ad829af78f08d 100644
--- a/docs/pages/api-docs/scoped-css-baseline.js
+++ b/docs/pages/api-docs/scoped-css-baseline.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/scoped-css-baseline';
-const requireRaw = require.context('!raw-loader!./', false, /scoped-css-baseline\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/scoped-css-baseline\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/select.js b/docs/pages/api-docs/select.js
index 86c631b03c1f35..35a0808796cbae 100644
--- a/docs/pages/api-docs/select.js
+++ b/docs/pages/api-docs/select.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/select';
-const requireRaw = require.context('!raw-loader!./', false, /select\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/select\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/skeleton.js b/docs/pages/api-docs/skeleton.js
index 9fd7ba3b5ba144..a96e3dbf710267 100644
--- a/docs/pages/api-docs/skeleton.js
+++ b/docs/pages/api-docs/skeleton.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/skeleton';
-const requireRaw = require.context('!raw-loader!./', false, /skeleton\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/skeleton\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/slide.js b/docs/pages/api-docs/slide.js
index c195b07b901fbe..f8f62c696efe2f 100644
--- a/docs/pages/api-docs/slide.js
+++ b/docs/pages/api-docs/slide.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/slide';
-const requireRaw = require.context('!raw-loader!./', false, /slide\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/slide\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/slider.js b/docs/pages/api-docs/slider.js
index c4608e9420f290..8d6bc821c14d8f 100644
--- a/docs/pages/api-docs/slider.js
+++ b/docs/pages/api-docs/slider.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/slider';
-const requireRaw = require.context('!raw-loader!./', false, /slider\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/slider\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/snackbar-content.js b/docs/pages/api-docs/snackbar-content.js
index 4a3eb987a445a7..f0177dcac38db3 100644
--- a/docs/pages/api-docs/snackbar-content.js
+++ b/docs/pages/api-docs/snackbar-content.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/snackbar-content';
-const requireRaw = require.context('!raw-loader!./', false, /snackbar-content\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/snackbar-content\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/snackbar.js b/docs/pages/api-docs/snackbar.js
index 06e2c983fe0be9..96f3054b6b7969 100644
--- a/docs/pages/api-docs/snackbar.js
+++ b/docs/pages/api-docs/snackbar.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/snackbar';
-const requireRaw = require.context('!raw-loader!./', false, /snackbar\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/snackbar\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/speed-dial-action.js b/docs/pages/api-docs/speed-dial-action.js
index 4a9a6fe875b743..5004f1212cc3ed 100644
--- a/docs/pages/api-docs/speed-dial-action.js
+++ b/docs/pages/api-docs/speed-dial-action.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/speed-dial-action';
-const requireRaw = require.context('!raw-loader!./', false, /speed-dial-action\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/speed-dial-action\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/speed-dial-icon.js b/docs/pages/api-docs/speed-dial-icon.js
index 238f9353608ab1..f958287858110f 100644
--- a/docs/pages/api-docs/speed-dial-icon.js
+++ b/docs/pages/api-docs/speed-dial-icon.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/speed-dial-icon';
-const requireRaw = require.context('!raw-loader!./', false, /speed-dial-icon\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/speed-dial-icon\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/speed-dial.js b/docs/pages/api-docs/speed-dial.js
index 60cb95e107729d..f783a62375d0ed 100644
--- a/docs/pages/api-docs/speed-dial.js
+++ b/docs/pages/api-docs/speed-dial.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/speed-dial';
-const requireRaw = require.context('!raw-loader!./', false, /speed-dial\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/speed-dial\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/step-button.js b/docs/pages/api-docs/step-button.js
index 482b82ca0ceee8..d442fa84d783d8 100644
--- a/docs/pages/api-docs/step-button.js
+++ b/docs/pages/api-docs/step-button.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-button';
-const requireRaw = require.context('!raw-loader!./', false, /step-button\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/step-button\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/step-connector.js b/docs/pages/api-docs/step-connector.js
index f9cffcb88dcbf0..777356eb91703d 100644
--- a/docs/pages/api-docs/step-connector.js
+++ b/docs/pages/api-docs/step-connector.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-connector';
-const requireRaw = require.context('!raw-loader!./', false, /step-connector\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/step-connector\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/step-content.js b/docs/pages/api-docs/step-content.js
index b64794b45361a7..e43ecb26258898 100644
--- a/docs/pages/api-docs/step-content.js
+++ b/docs/pages/api-docs/step-content.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-content';
-const requireRaw = require.context('!raw-loader!./', false, /step-content\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/step-content\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/step-icon.js b/docs/pages/api-docs/step-icon.js
index 4afd214b654aca..3f7db348227bbb 100644
--- a/docs/pages/api-docs/step-icon.js
+++ b/docs/pages/api-docs/step-icon.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-icon';
-const requireRaw = require.context('!raw-loader!./', false, /step-icon\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/step-icon\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/step-label.js b/docs/pages/api-docs/step-label.js
index a3276314dd5705..03c09ded01fa4c 100644
--- a/docs/pages/api-docs/step-label.js
+++ b/docs/pages/api-docs/step-label.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-label';
-const requireRaw = require.context('!raw-loader!./', false, /step-label\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/step-label\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/step.js b/docs/pages/api-docs/step.js
index 7b5c0a33986963..1c98d3a9f9de9a 100644
--- a/docs/pages/api-docs/step.js
+++ b/docs/pages/api-docs/step.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step';
-const requireRaw = require.context('!raw-loader!./', false, /step\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/step\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/stepper.js b/docs/pages/api-docs/stepper.js
index 88692c43da0f63..ac2d442264969b 100644
--- a/docs/pages/api-docs/stepper.js
+++ b/docs/pages/api-docs/stepper.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/stepper';
-const requireRaw = require.context('!raw-loader!./', false, /stepper\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/stepper\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/svg-icon.js b/docs/pages/api-docs/svg-icon.js
index 21355e4df1fdc7..adbf249c0c4b79 100644
--- a/docs/pages/api-docs/svg-icon.js
+++ b/docs/pages/api-docs/svg-icon.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/svg-icon';
-const requireRaw = require.context('!raw-loader!./', false, /svg-icon\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/svg-icon\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/swipeable-drawer.js b/docs/pages/api-docs/swipeable-drawer.js
index 2cbca4d6c31c67..87cae004a02e00 100644
--- a/docs/pages/api-docs/swipeable-drawer.js
+++ b/docs/pages/api-docs/swipeable-drawer.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/swipeable-drawer';
-const requireRaw = require.context('!raw-loader!./', false, /swipeable-drawer\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/swipeable-drawer\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/switch.js b/docs/pages/api-docs/switch.js
index 919558392e9631..ff9ba1a1d9bd08 100644
--- a/docs/pages/api-docs/switch.js
+++ b/docs/pages/api-docs/switch.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/switch';
-const requireRaw = require.context('!raw-loader!./', false, /switch\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/switch\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/tab.js b/docs/pages/api-docs/tab.js
index 691c268aac6a44..62c1a074371b8e 100644
--- a/docs/pages/api-docs/tab.js
+++ b/docs/pages/api-docs/tab.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tab';
-const requireRaw = require.context('!raw-loader!./', false, /tab\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/tab\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-body.js b/docs/pages/api-docs/table-body.js
index 77f886b4ba16af..be7856e32b1247 100644
--- a/docs/pages/api-docs/table-body.js
+++ b/docs/pages/api-docs/table-body.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-body';
-const requireRaw = require.context('!raw-loader!./', false, /table-body\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-body\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-cell.js b/docs/pages/api-docs/table-cell.js
index d1ea5c2202af79..b04cc4619d3ff0 100644
--- a/docs/pages/api-docs/table-cell.js
+++ b/docs/pages/api-docs/table-cell.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-cell';
-const requireRaw = require.context('!raw-loader!./', false, /table-cell\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-cell\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-container.js b/docs/pages/api-docs/table-container.js
index 000ab0fef07f36..d6919c1205fc4f 100644
--- a/docs/pages/api-docs/table-container.js
+++ b/docs/pages/api-docs/table-container.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-container';
-const requireRaw = require.context('!raw-loader!./', false, /table-container\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-container\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-footer.js b/docs/pages/api-docs/table-footer.js
index 6a01ec82496c40..b80d93d40a4304 100644
--- a/docs/pages/api-docs/table-footer.js
+++ b/docs/pages/api-docs/table-footer.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-footer';
-const requireRaw = require.context('!raw-loader!./', false, /table-footer\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-footer\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-head.js b/docs/pages/api-docs/table-head.js
index 45a0d9d336d163..ec1509af290c06 100644
--- a/docs/pages/api-docs/table-head.js
+++ b/docs/pages/api-docs/table-head.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-head';
-const requireRaw = require.context('!raw-loader!./', false, /table-head\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-head\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-pagination.js b/docs/pages/api-docs/table-pagination.js
index 49633b44de965b..b815cc61b3922f 100644
--- a/docs/pages/api-docs/table-pagination.js
+++ b/docs/pages/api-docs/table-pagination.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-pagination';
-const requireRaw = require.context('!raw-loader!./', false, /table-pagination\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-pagination\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-row.js b/docs/pages/api-docs/table-row.js
index 94beb28ad23436..8a519da1c718f4 100644
--- a/docs/pages/api-docs/table-row.js
+++ b/docs/pages/api-docs/table-row.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-row';
-const requireRaw = require.context('!raw-loader!./', false, /table-row\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-row\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table-sort-label.js b/docs/pages/api-docs/table-sort-label.js
index 0e4823e9aa5e74..daa569b22c41d3 100644
--- a/docs/pages/api-docs/table-sort-label.js
+++ b/docs/pages/api-docs/table-sort-label.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-sort-label';
-const requireRaw = require.context('!raw-loader!./', false, /table-sort-label\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table-sort-label\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/table.js b/docs/pages/api-docs/table.js
index 6548c908d03275..7fb2bc06a6edb4 100644
--- a/docs/pages/api-docs/table.js
+++ b/docs/pages/api-docs/table.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table';
-const requireRaw = require.context('!raw-loader!./', false, /table\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/table\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/tabs.js b/docs/pages/api-docs/tabs.js
index 70e7c5455c6115..c5262494b10beb 100644
--- a/docs/pages/api-docs/tabs.js
+++ b/docs/pages/api-docs/tabs.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tabs';
-const requireRaw = require.context('!raw-loader!./', false, /tabs\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/tabs\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/text-field.js b/docs/pages/api-docs/text-field.js
index 0d1f2ba96c6c82..e072946741e510 100644
--- a/docs/pages/api-docs/text-field.js
+++ b/docs/pages/api-docs/text-field.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/text-field';
-const requireRaw = require.context('!raw-loader!./', false, /text-field\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/text-field\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/textarea-autosize.js b/docs/pages/api-docs/textarea-autosize.js
index b4d32f6af87f04..ce2bd7ec6948fb 100644
--- a/docs/pages/api-docs/textarea-autosize.js
+++ b/docs/pages/api-docs/textarea-autosize.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/textarea-autosize';
-const requireRaw = require.context('!raw-loader!./', false, /textarea-autosize\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/textarea-autosize\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/toggle-button-group.js b/docs/pages/api-docs/toggle-button-group.js
index b8300a6d323e73..d7aebc0f57f3f1 100644
--- a/docs/pages/api-docs/toggle-button-group.js
+++ b/docs/pages/api-docs/toggle-button-group.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/toggle-button-group';
-const requireRaw = require.context('!raw-loader!./', false, /toggle-button-group\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/toggle-button-group\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/toggle-button.js b/docs/pages/api-docs/toggle-button.js
index fea2684523e9a5..bc795c0b79611b 100644
--- a/docs/pages/api-docs/toggle-button.js
+++ b/docs/pages/api-docs/toggle-button.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/toggle-button';
-const requireRaw = require.context('!raw-loader!./', false, /toggle-button\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/toggle-button\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/toolbar.js b/docs/pages/api-docs/toolbar.js
index 811b2f91e4fda5..66695c75f3512f 100644
--- a/docs/pages/api-docs/toolbar.js
+++ b/docs/pages/api-docs/toolbar.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/toolbar';
-const requireRaw = require.context('!raw-loader!./', false, /toolbar\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/toolbar\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/tooltip.js b/docs/pages/api-docs/tooltip.js
index ee8f2c8473fa9a..0bb93b6e8bcd06 100644
--- a/docs/pages/api-docs/tooltip.js
+++ b/docs/pages/api-docs/tooltip.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tooltip';
-const requireRaw = require.context('!raw-loader!./', false, /tooltip\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/tooltip\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/tree-item.js b/docs/pages/api-docs/tree-item.js
index b0ac1d1d20828d..969e16e6622c0d 100644
--- a/docs/pages/api-docs/tree-item.js
+++ b/docs/pages/api-docs/tree-item.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tree-item';
-const requireRaw = require.context('!raw-loader!./', false, /tree-item\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/tree-item\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/tree-view.js b/docs/pages/api-docs/tree-view.js
index 853829a2f78965..95951e715ddb2f 100644
--- a/docs/pages/api-docs/tree-view.js
+++ b/docs/pages/api-docs/tree-view.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tree-view';
-const requireRaw = require.context('!raw-loader!./', false, /tree-view\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/tree-view\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/typography.js b/docs/pages/api-docs/typography.js
index 0d18372b83a39f..2b2c444849fbee 100644
--- a/docs/pages/api-docs/typography.js
+++ b/docs/pages/api-docs/typography.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/typography';
-const requireRaw = require.context('!raw-loader!./', false, /typography\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/typography\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/api-docs/zoom.js b/docs/pages/api-docs/zoom.js
index a03261e9283dbf..ed5d684175e272 100644
--- a/docs/pages/api-docs/zoom.js
+++ b/docs/pages/api-docs/zoom.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/zoom';
-const requireRaw = require.context('!raw-loader!./', false, /zoom\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\/zoom\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/pages/blog/2019-developer-survey-results.js b/docs/pages/blog/2019-developer-survey-results.js
index c303de4908af8b..a1c5b1039c2f25 100644
--- a/docs/pages/blog/2019-developer-survey-results.js
+++ b/docs/pages/blog/2019-developer-survey-results.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/2019-developer-survey-results';
 const requireRaw = require.context('!raw-loader!./', false, /2019-developer-survey-results\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/2019.js b/docs/pages/blog/2019.js
index 135e1b1a1ebe41..352ffadc6320f8 100644
--- a/docs/pages/blog/2019.js
+++ b/docs/pages/blog/2019.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/2019';
 const requireRaw = require.context('!raw-loader!./', false, /2019\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/2020-introducing-sketch.js b/docs/pages/blog/2020-introducing-sketch.js
index 89302ebbb61658..0e4c55461f9eac 100644
--- a/docs/pages/blog/2020-introducing-sketch.js
+++ b/docs/pages/blog/2020-introducing-sketch.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/2020-introducing-sketch';
 const requireRaw = require.context('!raw-loader!./', false, /2020-introducing-sketch\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/2020-q1-update.js b/docs/pages/blog/2020-q1-update.js
index d481e2903bbd46..5782018e32f7f0 100644
--- a/docs/pages/blog/2020-q1-update.js
+++ b/docs/pages/blog/2020-q1-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/2020-q1-update';
 const requireRaw = require.context('!raw-loader!./', false, /2020-q1-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/april-2019-update.js b/docs/pages/blog/april-2019-update.js
index 37a24ba3cbaf85..7a63d2715b2854 100644
--- a/docs/pages/blog/april-2019-update.js
+++ b/docs/pages/blog/april-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/april-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /april-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/august-2019-update.js b/docs/pages/blog/august-2019-update.js
index 1e51e72c697eb4..491cddf7f3f6ab 100644
--- a/docs/pages/blog/august-2019-update.js
+++ b/docs/pages/blog/august-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/august-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /august-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/december-2019-update.js b/docs/pages/blog/december-2019-update.js
index 524be6be299929..7c90a041a2680f 100644
--- a/docs/pages/blog/december-2019-update.js
+++ b/docs/pages/blog/december-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/december-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /december-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/july-2019-update.js b/docs/pages/blog/july-2019-update.js
index 4b696bc684f58f..5ebcd69fb413bc 100644
--- a/docs/pages/blog/july-2019-update.js
+++ b/docs/pages/blog/july-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/july-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /july-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/june-2019-update.js b/docs/pages/blog/june-2019-update.js
index f9e8ce82b191e8..fe71ff076b74be 100644
--- a/docs/pages/blog/june-2019-update.js
+++ b/docs/pages/blog/june-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/june-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /june-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/march-2019-update.js b/docs/pages/blog/march-2019-update.js
index 30450be81392c8..969d397a1d749f 100644
--- a/docs/pages/blog/march-2019-update.js
+++ b/docs/pages/blog/march-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/march-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /march-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/material-ui-v1-is-out.js b/docs/pages/blog/material-ui-v1-is-out.js
index 72a5321c457706..60ab1410643f28 100644
--- a/docs/pages/blog/material-ui-v1-is-out.js
+++ b/docs/pages/blog/material-ui-v1-is-out.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/material-ui-v1-is-out';
 const requireRaw = require.context('!raw-loader!./', false, /material-ui-v1-is-out\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/material-ui-v4-is-out.js b/docs/pages/blog/material-ui-v4-is-out.js
index 917d18afdd1d2e..539b0d8ec35c46 100644
--- a/docs/pages/blog/material-ui-v4-is-out.js
+++ b/docs/pages/blog/material-ui-v4-is-out.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/material-ui-v4-is-out';
 const requireRaw = require.context('!raw-loader!./', false, /material-ui-v4-is-out\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/may-2019-update.js b/docs/pages/blog/may-2019-update.js
index 09bed82fb46192..09def428f24673 100644
--- a/docs/pages/blog/may-2019-update.js
+++ b/docs/pages/blog/may-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/may-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /may-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/november-2019-update.js b/docs/pages/blog/november-2019-update.js
index 103ff17b81c800..7c4274dcc2dff4 100644
--- a/docs/pages/blog/november-2019-update.js
+++ b/docs/pages/blog/november-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/november-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /november-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/october-2019-update.js b/docs/pages/blog/october-2019-update.js
index b386abed59f652..227a93c24df444 100644
--- a/docs/pages/blog/october-2019-update.js
+++ b/docs/pages/blog/october-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/october-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /october-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/blog/september-2019-update.js b/docs/pages/blog/september-2019-update.js
index a513eacd2416ff..6196676126da53 100644
--- a/docs/pages/blog/september-2019-update.js
+++ b/docs/pages/blog/september-2019-update.js
@@ -5,7 +5,6 @@ import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 const pageFilename = 'blog/september-2019-update';
 const requireRaw = require.context('!raw-loader!./', false, /september-2019-update\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <TopLayoutBlog docs={docs} />;
 }
diff --git a/docs/pages/company/about.js b/docs/pages/company/about.js
index 1d47abd63270c6..87e352cf43c580 100644
--- a/docs/pages/company/about.js
+++ b/docs/pages/company/about.js
@@ -10,7 +10,6 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
diff --git a/docs/pages/company/contact.js b/docs/pages/company/contact.js
index d4fa73d8744437..0f490fffcaf661 100644
--- a/docs/pages/company/contact.js
+++ b/docs/pages/company/contact.js
@@ -10,7 +10,6 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
diff --git a/docs/pages/company/jobs.js b/docs/pages/company/jobs.js
index 6292b8c485b448..c701fb9df60ab2 100644
--- a/docs/pages/company/jobs.js
+++ b/docs/pages/company/jobs.js
@@ -10,7 +10,6 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
diff --git a/docs/pages/components/about-the-lab.js b/docs/pages/components/about-the-lab.js
index 4d924a8ee462ec..d08bf231a64a78 100644
--- a/docs/pages/components/about-the-lab.js
+++ b/docs/pages/components/about-the-lab.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/alert.js b/docs/pages/components/alert.js
index 051f67db5754f9..87ae73a2339618 100644
--- a/docs/pages/components/alert.js
+++ b/docs/pages/components/alert.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/app-bar.js b/docs/pages/components/app-bar.js
index c167b262ac8f9b..9dc7234c9b5b80 100644
--- a/docs/pages/components/app-bar.js
+++ b/docs/pages/components/app-bar.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/autocomplete.js b/docs/pages/components/autocomplete.js
index 3e5300b9a4e3f5..a12cb25ff2ac6e 100644
--- a/docs/pages/components/autocomplete.js
+++ b/docs/pages/components/autocomplete.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/avatars.js b/docs/pages/components/avatars.js
index 29c18cc9ea1d41..b0cade409687b3 100644
--- a/docs/pages/components/avatars.js
+++ b/docs/pages/components/avatars.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/backdrop.js b/docs/pages/components/backdrop.js
index b72bbe4cc5c662..80a04d198c7832 100644
--- a/docs/pages/components/backdrop.js
+++ b/docs/pages/components/backdrop.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/badges.js b/docs/pages/components/badges.js
index 5519037b008ac1..7e578f2dd576ea 100644
--- a/docs/pages/components/badges.js
+++ b/docs/pages/components/badges.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/bottom-navigation.js b/docs/pages/components/bottom-navigation.js
index 78648ed2733e7b..4ec2a78087b594 100644
--- a/docs/pages/components/bottom-navigation.js
+++ b/docs/pages/components/bottom-navigation.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/box.js b/docs/pages/components/box.js
index e39705900bda1d..7626d30f4790fc 100644
--- a/docs/pages/components/box.js
+++ b/docs/pages/components/box.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/breadcrumbs.js b/docs/pages/components/breadcrumbs.js
index ef084dd598f49c..95519935c5d9f1 100644
--- a/docs/pages/components/breadcrumbs.js
+++ b/docs/pages/components/breadcrumbs.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/button-group.js b/docs/pages/components/button-group.js
index 591d86abc0a734..a00b1eea96056c 100644
--- a/docs/pages/components/button-group.js
+++ b/docs/pages/components/button-group.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/buttons.js b/docs/pages/components/buttons.js
index 511e3f474b970f..ac81be1d518fa7 100644
--- a/docs/pages/components/buttons.js
+++ b/docs/pages/components/buttons.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/cards.js b/docs/pages/components/cards.js
index 667553d346170f..e130c19db8e8f9 100644
--- a/docs/pages/components/cards.js
+++ b/docs/pages/components/cards.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/checkboxes.js b/docs/pages/components/checkboxes.js
index 8b187d12931c58..e837f1d0fcb94e 100644
--- a/docs/pages/components/checkboxes.js
+++ b/docs/pages/components/checkboxes.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/chips.js b/docs/pages/components/chips.js
index 7d33cad58397ec..48bc0a704b8479 100644
--- a/docs/pages/components/chips.js
+++ b/docs/pages/components/chips.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/click-away-listener.js b/docs/pages/components/click-away-listener.js
index 71ce74838d5507..ea22d5815a19bd 100644
--- a/docs/pages/components/click-away-listener.js
+++ b/docs/pages/components/click-away-listener.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/container.js b/docs/pages/components/container.js
index 2871c9e6bc32f7..2d61857222d06a 100644
--- a/docs/pages/components/container.js
+++ b/docs/pages/components/container.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/css-baseline.js b/docs/pages/components/css-baseline.js
index d7aead0c2e497a..23c1d485856117 100644
--- a/docs/pages/components/css-baseline.js
+++ b/docs/pages/components/css-baseline.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/dialogs.js b/docs/pages/components/dialogs.js
index ed59d2f99b5233..ebf87069b22f49 100644
--- a/docs/pages/components/dialogs.js
+++ b/docs/pages/components/dialogs.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/dividers.js b/docs/pages/components/dividers.js
index b81854bc289636..3fdce736d534d7 100644
--- a/docs/pages/components/dividers.js
+++ b/docs/pages/components/dividers.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/drawers.js b/docs/pages/components/drawers.js
index ff1213e4731837..0bdaf3992e486e 100644
--- a/docs/pages/components/drawers.js
+++ b/docs/pages/components/drawers.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/expansion-panels.js b/docs/pages/components/expansion-panels.js
index ed81aa80392bf4..aebe056d6b8437 100644
--- a/docs/pages/components/expansion-panels.js
+++ b/docs/pages/components/expansion-panels.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/floating-action-button.js b/docs/pages/components/floating-action-button.js
index c76306ec260700..30f790785135ed 100644
--- a/docs/pages/components/floating-action-button.js
+++ b/docs/pages/components/floating-action-button.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/grid-list.js b/docs/pages/components/grid-list.js
index ff3d3f66236dd0..7001d0e7fa175c 100644
--- a/docs/pages/components/grid-list.js
+++ b/docs/pages/components/grid-list.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/grid.js b/docs/pages/components/grid.js
index 542c20f434060f..30c4fa186c1fee 100644
--- a/docs/pages/components/grid.js
+++ b/docs/pages/components/grid.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/hidden.js b/docs/pages/components/hidden.js
index 658e5c0326c743..4b69f9a89f9a80 100644
--- a/docs/pages/components/hidden.js
+++ b/docs/pages/components/hidden.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/icons.js b/docs/pages/components/icons.js
index 6606bf6b7ab407..fc70edd46942d7 100644
--- a/docs/pages/components/icons.js
+++ b/docs/pages/components/icons.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/links.js b/docs/pages/components/links.js
index a19e4f95928be3..33434cffade1ba 100644
--- a/docs/pages/components/links.js
+++ b/docs/pages/components/links.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/lists.js b/docs/pages/components/lists.js
index a7c53cd8250595..d4daa48a40efea 100644
--- a/docs/pages/components/lists.js
+++ b/docs/pages/components/lists.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/material-icons.js b/docs/pages/components/material-icons.js
index bc52b4425d3ba3..1e84c4e7775e4d 100644
--- a/docs/pages/components/material-icons.js
+++ b/docs/pages/components/material-icons.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/menus.js b/docs/pages/components/menus.js
index 43a2109158a3c3..a4339b2712969b 100644
--- a/docs/pages/components/menus.js
+++ b/docs/pages/components/menus.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/modal.js b/docs/pages/components/modal.js
index ec37024fdf2a04..31406b5fc8f003 100644
--- a/docs/pages/components/modal.js
+++ b/docs/pages/components/modal.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/no-ssr.js b/docs/pages/components/no-ssr.js
index 6015406749fa85..d55cf9f2988143 100644
--- a/docs/pages/components/no-ssr.js
+++ b/docs/pages/components/no-ssr.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/pagination.js b/docs/pages/components/pagination.js
index f5cc965c6a4e51..4d4f9e09cdec2b 100644
--- a/docs/pages/components/pagination.js
+++ b/docs/pages/components/pagination.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/paper.js b/docs/pages/components/paper.js
index 1ee6998150c80c..6da8a45f56f348 100644
--- a/docs/pages/components/paper.js
+++ b/docs/pages/components/paper.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/pickers.js b/docs/pages/components/pickers.js
index c6ceb26452fd9b..69f9dbccb11f63 100644
--- a/docs/pages/components/pickers.js
+++ b/docs/pages/components/pickers.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/popover.js b/docs/pages/components/popover.js
index b715e9dd7ea634..de9227acc69932 100644
--- a/docs/pages/components/popover.js
+++ b/docs/pages/components/popover.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/popper.js b/docs/pages/components/popper.js
index 82e7b48604eb30..69d0f5c4862286 100644
--- a/docs/pages/components/popper.js
+++ b/docs/pages/components/popper.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/portal.js b/docs/pages/components/portal.js
index 65b1ee358e0f22..fdca2dcbd18064 100644
--- a/docs/pages/components/portal.js
+++ b/docs/pages/components/portal.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/progress.js b/docs/pages/components/progress.js
index 64949319fd9cec..c155ddca9c8b96 100644
--- a/docs/pages/components/progress.js
+++ b/docs/pages/components/progress.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/radio-buttons.js b/docs/pages/components/radio-buttons.js
index 90e0de6b40f007..0af971a4699456 100644
--- a/docs/pages/components/radio-buttons.js
+++ b/docs/pages/components/radio-buttons.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/rating.js b/docs/pages/components/rating.js
index dd4b649f08c070..cc43f8d689de7b 100644
--- a/docs/pages/components/rating.js
+++ b/docs/pages/components/rating.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/selects.js b/docs/pages/components/selects.js
index c7fda168091a48..68211cc49d3499 100644
--- a/docs/pages/components/selects.js
+++ b/docs/pages/components/selects.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/skeleton.js b/docs/pages/components/skeleton.js
index 813377cfec3a60..bd952c872dde73 100644
--- a/docs/pages/components/skeleton.js
+++ b/docs/pages/components/skeleton.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/slider.js b/docs/pages/components/slider.js
index 6aa626b50f481f..f64cb7da91e8e4 100644
--- a/docs/pages/components/slider.js
+++ b/docs/pages/components/slider.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/snackbars.js b/docs/pages/components/snackbars.js
index 2f2f6eeed97a45..5c5707c65e576d 100644
--- a/docs/pages/components/snackbars.js
+++ b/docs/pages/components/snackbars.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/speed-dial.js b/docs/pages/components/speed-dial.js
index d72e1f7990b7bd..697e703d817a0c 100644
--- a/docs/pages/components/speed-dial.js
+++ b/docs/pages/components/speed-dial.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/steppers.js b/docs/pages/components/steppers.js
index 460af7ca190344..ccecae1eaee1af 100644
--- a/docs/pages/components/steppers.js
+++ b/docs/pages/components/steppers.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/switches.js b/docs/pages/components/switches.js
index 694c946b606e3b..114d15301c9ebf 100644
--- a/docs/pages/components/switches.js
+++ b/docs/pages/components/switches.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tables.js b/docs/pages/components/tables.js
index a5c7da3829cfe0..02a3f0806b0744 100644
--- a/docs/pages/components/tables.js
+++ b/docs/pages/components/tables.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tabs.js b/docs/pages/components/tabs.js
index 4591a12607e76a..20a4f8652965cb 100644
--- a/docs/pages/components/tabs.js
+++ b/docs/pages/components/tabs.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/text-fields.js b/docs/pages/components/text-fields.js
index 0b0005c18d26c8..4437f6a516e684 100644
--- a/docs/pages/components/text-fields.js
+++ b/docs/pages/components/text-fields.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/textarea-autosize.js b/docs/pages/components/textarea-autosize.js
index 8b22d81b25acd6..f360424a5c82ce 100644
--- a/docs/pages/components/textarea-autosize.js
+++ b/docs/pages/components/textarea-autosize.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/toggle-button.js b/docs/pages/components/toggle-button.js
index f65da9e23b534a..9983feb9f65021 100644
--- a/docs/pages/components/toggle-button.js
+++ b/docs/pages/components/toggle-button.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tooltips.js b/docs/pages/components/tooltips.js
index fabe2ded5148a2..c171da98114382 100644
--- a/docs/pages/components/tooltips.js
+++ b/docs/pages/components/tooltips.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/transfer-list.js b/docs/pages/components/transfer-list.js
index 620312a68c17b8..d69c9ed5f43908 100644
--- a/docs/pages/components/transfer-list.js
+++ b/docs/pages/components/transfer-list.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/transitions.js b/docs/pages/components/transitions.js
index 98a7a8d5892803..cd3d521c52ca12 100644
--- a/docs/pages/components/transitions.js
+++ b/docs/pages/components/transitions.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tree-view.js b/docs/pages/components/tree-view.js
index b88925f7298801..890e993dc438b5 100644
--- a/docs/pages/components/tree-view.js
+++ b/docs/pages/components/tree-view.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/typography.js b/docs/pages/components/typography.js
index 67cb531135517d..0ecf511b4614cd 100644
--- a/docs/pages/components/typography.js
+++ b/docs/pages/components/typography.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/use-media-query.js b/docs/pages/components/use-media-query.js
index ab81701ba92c23..a0c0e74169ff06 100644
--- a/docs/pages/components/use-media-query.js
+++ b/docs/pages/components/use-media-query.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/breakpoints.js b/docs/pages/customization/breakpoints.js
index 67700fbac5f063..4d4610dcacc792 100644
--- a/docs/pages/customization/breakpoints.js
+++ b/docs/pages/customization/breakpoints.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/color.js b/docs/pages/customization/color.js
index 75a47d7833d138..128fcc17e5491f 100644
--- a/docs/pages/customization/color.js
+++ b/docs/pages/customization/color.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/components.js b/docs/pages/customization/components.js
index e1540703b9429f..b33e2ec4756b21 100644
--- a/docs/pages/customization/components.js
+++ b/docs/pages/customization/components.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/default-theme.js b/docs/pages/customization/default-theme.js
index b3df3b2671f4f7..8ff1e1c52bfcfc 100644
--- a/docs/pages/customization/default-theme.js
+++ b/docs/pages/customization/default-theme.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/density.js b/docs/pages/customization/density.js
index dc46511776fde4..4c816d5ba131bb 100644
--- a/docs/pages/customization/density.js
+++ b/docs/pages/customization/density.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/globals.js b/docs/pages/customization/globals.js
index ea28b517c4d354..d98939d88f979c 100644
--- a/docs/pages/customization/globals.js
+++ b/docs/pages/customization/globals.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/palette.js b/docs/pages/customization/palette.js
index 83951f2c334aff..e0f36e8b989119 100644
--- a/docs/pages/customization/palette.js
+++ b/docs/pages/customization/palette.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/spacing.js b/docs/pages/customization/spacing.js
index 0176ea0e5a90f4..0d63282bd6154c 100644
--- a/docs/pages/customization/spacing.js
+++ b/docs/pages/customization/spacing.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/theming.js b/docs/pages/customization/theming.js
index 76e923ccbfa2c6..3823ad5d186346 100644
--- a/docs/pages/customization/theming.js
+++ b/docs/pages/customization/theming.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/typography.js b/docs/pages/customization/typography.js
index bc5340ed74f7e9..b27c85ed9ef3a8 100644
--- a/docs/pages/customization/typography.js
+++ b/docs/pages/customization/typography.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/z-index.js b/docs/pages/customization/z-index.js
index 1f9d2d9d3551e4..299a96b2b5fb0b 100644
--- a/docs/pages/customization/z-index.js
+++ b/docs/pages/customization/z-index.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/backers.js b/docs/pages/discover-more/backers.js
index b471b2c628f4e5..ca57c72193d2cd 100644
--- a/docs/pages/discover-more/backers.js
+++ b/docs/pages/discover-more/backers.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/changelog.js b/docs/pages/discover-more/changelog.js
index 1395aff72c3728..2f968a6496f8b8 100644
--- a/docs/pages/discover-more/changelog.js
+++ b/docs/pages/discover-more/changelog.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/languages.js b/docs/pages/discover-more/languages.js
index 34be0e05a1b603..6d71c2d51ded16 100644
--- a/docs/pages/discover-more/languages.js
+++ b/docs/pages/discover-more/languages.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/related-projects.js b/docs/pages/discover-more/related-projects.js
index fc4e7efc2de3a2..b799160a777dbc 100644
--- a/docs/pages/discover-more/related-projects.js
+++ b/docs/pages/discover-more/related-projects.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/roadmap.js b/docs/pages/discover-more/roadmap.js
index 2821ccb5924fe6..ee29b8325e73e3 100644
--- a/docs/pages/discover-more/roadmap.js
+++ b/docs/pages/discover-more/roadmap.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/showcase.js b/docs/pages/discover-more/showcase.js
index 78010ffca8e26c..5e7862533335f3 100644
--- a/docs/pages/discover-more/showcase.js
+++ b/docs/pages/discover-more/showcase.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/team.js b/docs/pages/discover-more/team.js
index fcffd51223aeec..fdf94450459774 100644
--- a/docs/pages/discover-more/team.js
+++ b/docs/pages/discover-more/team.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/vision.js b/docs/pages/discover-more/vision.js
index e52218349ab5e9..a598066703ad6f 100644
--- a/docs/pages/discover-more/vision.js
+++ b/docs/pages/discover-more/vision.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/example-projects.js b/docs/pages/getting-started/example-projects.js
index 00b6e44b7f2363..01863114605467 100644
--- a/docs/pages/getting-started/example-projects.js
+++ b/docs/pages/getting-started/example-projects.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/faq.js b/docs/pages/getting-started/faq.js
index 864ffb3b9a509f..ac522845a778ec 100644
--- a/docs/pages/getting-started/faq.js
+++ b/docs/pages/getting-started/faq.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/installation.js b/docs/pages/getting-started/installation.js
index e1792d2892b99d..5568db20e62df2 100644
--- a/docs/pages/getting-started/installation.js
+++ b/docs/pages/getting-started/installation.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/learn.js b/docs/pages/getting-started/learn.js
index 40b96c683d5ab9..027c7b8bf8af87 100644
--- a/docs/pages/getting-started/learn.js
+++ b/docs/pages/getting-started/learn.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/support.js b/docs/pages/getting-started/support.js
index fa18e32b72f4b4..0bb7c639b45c56 100644
--- a/docs/pages/getting-started/support.js
+++ b/docs/pages/getting-started/support.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/supported-components.js b/docs/pages/getting-started/supported-components.js
index 314a2e2946346c..9a6fcb6d5032d9 100644
--- a/docs/pages/getting-started/supported-components.js
+++ b/docs/pages/getting-started/supported-components.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/supported-platforms.js b/docs/pages/getting-started/supported-platforms.js
index f1fb171c72e9be..12147f3dad6722 100644
--- a/docs/pages/getting-started/supported-platforms.js
+++ b/docs/pages/getting-started/supported-platforms.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/templates.js b/docs/pages/getting-started/templates.js
index 129ea2b760c3fb..d6af21663becae 100644
--- a/docs/pages/getting-started/templates.js
+++ b/docs/pages/getting-started/templates.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/usage.js b/docs/pages/getting-started/usage.js
index a49b4c6e7c2e18..81895dc67d8074 100644
--- a/docs/pages/getting-started/usage.js
+++ b/docs/pages/getting-started/usage.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/api.js b/docs/pages/guides/api.js
index 66b61d6cb1ae8b..10e5b05efd086d 100644
--- a/docs/pages/guides/api.js
+++ b/docs/pages/guides/api.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/composition.js b/docs/pages/guides/composition.js
index edfba20f6b33ad..a6f39cf6a12e20 100644
--- a/docs/pages/guides/composition.js
+++ b/docs/pages/guides/composition.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/flow.js b/docs/pages/guides/flow.js
index 25c66b7e76b9ae..362186c47e2f3a 100644
--- a/docs/pages/guides/flow.js
+++ b/docs/pages/guides/flow.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/interoperability.js b/docs/pages/guides/interoperability.js
index 13b44558e933b8..c0c67d67ce8a47 100644
--- a/docs/pages/guides/interoperability.js
+++ b/docs/pages/guides/interoperability.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/localization.js b/docs/pages/guides/localization.js
index 0a5dbd7ded5a4c..82c8c380b02fa4 100644
--- a/docs/pages/guides/localization.js
+++ b/docs/pages/guides/localization.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/migration-v0x.js b/docs/pages/guides/migration-v0x.js
index 2d9b0ab0dcd4a3..3c78ca0d8baeab 100644
--- a/docs/pages/guides/migration-v0x.js
+++ b/docs/pages/guides/migration-v0x.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/migration-v3.js b/docs/pages/guides/migration-v3.js
index a08e764eecf781..acd0da4e125fe3 100644
--- a/docs/pages/guides/migration-v3.js
+++ b/docs/pages/guides/migration-v3.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/minimizing-bundle-size.js b/docs/pages/guides/minimizing-bundle-size.js
index 84592d66fcf076..1a82dd1507a2f5 100644
--- a/docs/pages/guides/minimizing-bundle-size.js
+++ b/docs/pages/guides/minimizing-bundle-size.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/responsive-ui.js b/docs/pages/guides/responsive-ui.js
index bb43bb39ac0e39..6c4b8dccb76ff5 100644
--- a/docs/pages/guides/responsive-ui.js
+++ b/docs/pages/guides/responsive-ui.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/right-to-left.js b/docs/pages/guides/right-to-left.js
index 47f04ef7878e3b..23ed8dc4883406 100644
--- a/docs/pages/guides/right-to-left.js
+++ b/docs/pages/guides/right-to-left.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/server-rendering.js b/docs/pages/guides/server-rendering.js
index 552f4063f184a3..59f75e74a5533a 100644
--- a/docs/pages/guides/server-rendering.js
+++ b/docs/pages/guides/server-rendering.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/testing.js b/docs/pages/guides/testing.js
index b4da5c17385a29..cea7a803328860 100644
--- a/docs/pages/guides/testing.js
+++ b/docs/pages/guides/testing.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/typescript.js b/docs/pages/guides/typescript.js
index 170923b49868d1..e4e760cb72017b 100644
--- a/docs/pages/guides/typescript.js
+++ b/docs/pages/guides/typescript.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/styles/advanced.js b/docs/pages/styles/advanced.js
index 7f29c031a78cc5..901702f978b294 100644
--- a/docs/pages/styles/advanced.js
+++ b/docs/pages/styles/advanced.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/styles/api.js b/docs/pages/styles/api.js
index db207cab503801..802b6085ff16e5 100644
--- a/docs/pages/styles/api.js
+++ b/docs/pages/styles/api.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/styles/basics.js b/docs/pages/styles/basics.js
index 72cae0519afa29..cccfde34c09b69 100644
--- a/docs/pages/styles/basics.js
+++ b/docs/pages/styles/basics.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/api.js b/docs/pages/system/api.js
index b2451ede44a7e5..5606ba8b1aae6b 100644
--- a/docs/pages/system/api.js
+++ b/docs/pages/system/api.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/basics.js b/docs/pages/system/basics.js
index fc08d98b653fae..6aad7a78c566fc 100644
--- a/docs/pages/system/basics.js
+++ b/docs/pages/system/basics.js
@@ -14,9 +14,16 @@ const requireRaw = require.context(
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/borders.js b/docs/pages/system/borders.js
index e57b8a389b6cba..b08f7a524caeeb 100644
--- a/docs/pages/system/borders.js
+++ b/docs/pages/system/borders.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/display.js b/docs/pages/system/display.js
index 5a0311839f2835..0128f5d84ce28b 100644
--- a/docs/pages/system/display.js
+++ b/docs/pages/system/display.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/flexbox.js b/docs/pages/system/flexbox.js
index 9ce7ed1ce6b838..dc5c6fe14d28db 100644
--- a/docs/pages/system/flexbox.js
+++ b/docs/pages/system/flexbox.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/palette.js b/docs/pages/system/palette.js
index c692f54ac18b5a..d5af76593cbff6 100644
--- a/docs/pages/system/palette.js
+++ b/docs/pages/system/palette.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/positions.js b/docs/pages/system/positions.js
index 7add17813fa161..4541938bcc6e12 100644
--- a/docs/pages/system/positions.js
+++ b/docs/pages/system/positions.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/shadows.js b/docs/pages/system/shadows.js
index c6f97471330ce4..d8ed7d60f731a4 100644
--- a/docs/pages/system/shadows.js
+++ b/docs/pages/system/shadows.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/sizing.js b/docs/pages/system/sizing.js
index 7aba5291906334..10d0e15419faca 100644
--- a/docs/pages/system/sizing.js
+++ b/docs/pages/system/sizing.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/spacing.js b/docs/pages/system/spacing.js
index 6b319c9db895f8..c3442f07d24e2e 100644
--- a/docs/pages/system/spacing.js
+++ b/docs/pages/system/spacing.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/typography.js b/docs/pages/system/typography.js
index 3bd2683f47fec3..7d4d523ca3193a 100644
--- a/docs/pages/system/typography.js
+++ b/docs/pages/system/typography.js
@@ -10,9 +10,16 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
index b474f2b155242d..54d283749ee429 100644
--- a/docs/pages/versions.js
+++ b/docs/pages/versions.js
@@ -9,9 +9,16 @@ const pageFilename = 'versions';
 const requireDemo = require.context('docs/src/pages/versions/', false, /\.(js|tsx)$/);
 const requireRaw = require.context('!raw-loader!../src/pages/versions', false, /\.(js|md|tsx)$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return (
+    <MarkdownDocs
+      demos={demos}
+      docs={docs}
+      pageFilename={pageFilename}
+      requireRaw={requireRaw}
+      requireDemo={requireDemo}
+    />
+  );
 }
 
 async function getBranches() {
diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index 65f124e3666817..f194964f9b3a77 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -335,9 +335,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/${kebabCase(reactAPI.name)}';
-const requireRaw = require.context('!raw-loader!./', false, /${kebabCase(reactAPI.name)}\\.md$/);
+const requireRaw = require.context('!raw-loader!./', false, /\\/${kebabCase(reactAPI.name)}\\.md$/);
 
-// eslint-disable-next-line react/prop-types
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;
 }
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index d02c56977a965f..936f8452b2990f 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -19,8 +19,9 @@ 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 './AppTableOfContents';
-import MarkdownElement from './MarkdownElement';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 
 function flattenPages(pages, current = []) {
   return pages.reduce((items, item) => {
@@ -89,10 +90,25 @@ const styles = (theme) => ({
 });
 
 function MarkdownDocs(props) {
-  const { classes, disableAd = false, disableToc = false, demos, docs, requireDemo } = props;
+  const {
+    classes,
+    disableAd = false,
+    disableToc = false,
+    demos: demosProp,
+    docs: docsProp,
+    requireDemo,
+    pageFilename,
+    requireRaw,
+  } = props;
 
-  const t = useSelector((state) => state.options.t);
+  let demos = demosProp;
+  let docs = docsProp;
+
+  if (process.env.NODE_ENV !== 'production' && pageFilename && requireRaw) {
+    ({ demos, docs } = prepareMarkdown({ pageFilename, requireRaw }));
+  }
 
+  const t = useSelector((state) => state.options.t);
   const userLanguage = useSelector((state) => state.options.userLanguage);
   const { description, location, rendered, title, toc } = docs[userLanguage] || docs.en;
   if (description === undefined) {
@@ -226,11 +242,13 @@ function MarkdownDocs(props) {
 
 MarkdownDocs.propTypes = {
   classes: PropTypes.object.isRequired,
-  demos: PropTypes.object.isRequired,
+  demos: PropTypes.object,
   disableAd: PropTypes.bool,
   disableToc: PropTypes.bool,
   docs: PropTypes.object.isRequired,
+  pageFilename: PropTypes.string,
   requireDemo: PropTypes.func,
+  requireRaw: PropTypes.func,
 };
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/docs/src/modules/utils/parseMarkdown.js b/docs/src/modules/utils/parseMarkdown.js
index e81262b8d9925e..afddd4daada33f 100644
--- a/docs/src/modules/utils/parseMarkdown.js
+++ b/docs/src/modules/utils/parseMarkdown.js
@@ -11,6 +11,20 @@ const descriptionRegExp = /<p class="description">(.*)<\/p>[\r\n]/;
 const headerKeyValueRegExp = /(.*): (.*)/g;
 const emptyRegExp = /^\s*$/;
 
+/**
+ * Extract informations from the top of the markdown.
+ * For instance, the following input:
+ *
+ * ---
+ * title: Backdrop React Component
+ * components: Backdrop
+ * ---
+ *
+ * # Backdrop
+ *
+ * should output:
+ * { title: 'Backdrop React Component', components: ['Backdrop'] }
+ */
 export function getHeaders(markdown) {
   let header = markdown.match(headerRegExp);
 
@@ -118,9 +132,8 @@ export function prepareMarkdown(config) {
         match && LANGUAGES_IN_PROGRESS.indexOf(match[1]) !== -1 ? match[1] : 'en';
 
       const markdown = requireRaw(filename);
-      const contents = getContents(markdown);
       const headers = getHeaders(markdown);
-
+      const contents = getContents(markdown);
       const title = headers.title || getTitle(markdown);
       const description = headers.description || getDescription(markdown);