@docusaurus/theme-classic 2.0.0-beta.20 → 2.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -14,45 +14,41 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc --noEmit && yarn babel:lib && yarn babel:lib-next && yarn format:lib-next",
-    "watch": "concurrently --names \"lib,lib-next,tsc\" --kill-others \"yarn babel:lib --watch\" \"yarn babel:lib-next --watch\" \"yarn tsc --watch\"",
-    "babel:lib": "cross-env BABEL_ENV=lib babel src -d lib --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
-    "babel:lib-next": "cross-env BABEL_ENV=lib-next babel src -d lib-next --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
-    "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
+    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.20",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.20",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.20",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.20",
-    "@docusaurus/theme-common": "2.0.0-beta.20",
-    "@docusaurus/theme-translations": "2.0.0-beta.20",
-    "@docusaurus/utils": "2.0.0-beta.20",
-    "@docusaurus/utils-common": "2.0.0-beta.20",
-    "@docusaurus/utils-validation": "2.0.0-beta.20",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.21",
+    "@docusaurus/theme-common": "2.0.0-beta.21",
+    "@docusaurus/theme-translations": "2.0.0-beta.21",
+    "@docusaurus/utils": "2.0.0-beta.21",
+    "@docusaurus/utils-common": "2.0.0-beta.21",
+    "@docusaurus/utils-validation": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
     "infima": "0.2.0-alpha.39",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
-    "postcss": "^8.4.13",
-    "prism-react-renderer": "^1.3.1",
+    "postcss": "^8.4.14",
+    "prism-react-renderer": "^1.3.3",
     "prismjs": "^1.28.0",
-    "react-router-dom": "^5.2.0",
-    "rtlcss": "^3.5.0"
+    "react-router-dom": "^5.3.3",
+    "rtlcss": "^3.5.0",
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.17.10",
-    "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "2.0.0-beta.20",
-    "@docusaurus/types": "2.0.0-beta.20",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
+    "@docusaurus/types": "2.0.0-beta.21",
     "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
-    "@types/rtlcss": "^3.1.4",
-    "cross-env": "^7.0.3",
+    "@types/rtlcss": "^3.5.0",
     "fs-extra": "^10.1.0",
     "react-test-renderer": "^17.0.2",
     "utility-types": "^3.10.0"
@@ -62,7 +58,7 @@
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16.14"
   },
-  "gitHead": "ed5cdba401a5948e187e927039b142a0decc702d"
+  "gitHead": "69ac49fc6909517f13615ee40290c4bd00c39df4"
 }

package/src/getSwizzleConfig.ts

@@ -214,13 +214,6 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
       },
-      // TODO should probably not even appear here
-      'NavbarItem/utils': {
-        actions: {
-          eject: 'forbidden',
-          wrap: 'forbidden',
-        },
-      },
       NotFound: {
         actions: {
           eject: 'safe',

package/src/index.ts

@@ -5,21 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {LoadContext, Plugin} from '@docusaurus/types';
-import type {ThemeConfig} from '@docusaurus/theme-common';
-import {getTranslationFiles, translateThemeConfig} from './translations';
+import path from 'path';
 import {createRequire} from 'module';
-import type {Plugin as PostCssPlugin} from 'postcss';
 import rtlcss from 'rtlcss';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import {getTranslationFiles, translateThemeConfig} from './translations';
+import type {LoadContext, Plugin} from '@docusaurus/types';
+import type {ThemeConfig} from '@docusaurus/theme-common';
+import type {Plugin as PostCssPlugin} from 'postcss';
 import type {Options} from '@docusaurus/theme-classic';
 import type webpack from 'webpack';
 
 const requireFromDocusaurusCore = createRequire(
   require.resolve('@docusaurus/core/package.json'),
 );
-const ContextReplacementPlugin: typeof webpack.ContextReplacementPlugin =
-  requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
+const ContextReplacementPlugin = requireFromDocusaurusCore(
+  'webpack/lib/ContextReplacementPlugin',
+) as typeof webpack.ContextReplacementPlugin;
 
 // Need to be inlined to prevent dark mode FOUC
 // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
@@ -111,7 +113,7 @@ export default function themeClassic(
     name: 'docusaurus-theme-classic',
 
     getThemePath() {
-      return '../lib-next/theme';
+      return '../lib/theme';
     },
 
     getTypeScriptThemePath() {
@@ -142,11 +144,11 @@ export default function themeClassic(
       ];
 
       if (customCss) {
-        if (Array.isArray(customCss)) {
-          modules.push(...customCss);
-        } else {
-          modules.push(customCss);
-        }
+        modules.push(
+          ...(Array.isArray(customCss) ? customCss : [customCss]).map((p) =>
+            path.resolve(context.siteDir, p),
+          ),
+        );
       }
 
       return modules;
@@ -176,7 +178,7 @@ export default function themeClassic(
         const plugin: PostCssPlugin = {
           postcssPlugin: 'RtlCssPlugin',
           prepare: (result) => {
-            const file = result.root?.source?.input?.file;
+            const file = result.root.source?.input.file;
             // Skip Infima as we are using the its RTL version.
             if (file === resolvedInfimaFile) {
               return {};

package/src/theme/BlogArchivePage/index.tsx

@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
 
 type YearProp = {
   year: string;

package/src/theme/BlogListPage/index.tsx

@@ -6,19 +6,19 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import BlogLayout from '@theme/BlogLayout';
-import BlogPostItem from '@theme/BlogPostItem';
-import BlogListPaginator from '@theme/BlogListPaginator';
-import type {Props} from '@theme/BlogListPage';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
+import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
+import type {Props} from '@theme/BlogListPage';
 
 function BlogListPageMetadata(props: Props): JSX.Element {
   const {metadata} = props;

package/src/theme/BlogPostAuthors/index.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {Props} from '@theme/BlogPostAuthors';
 import BlogPostAuthor from '@theme/BlogPostAuthor';
+import type {Props} from '@theme/BlogPostAuthors';
 
 import styles from './styles.module.css';
 

package/src/theme/BlogPostItem/index.tsx

@@ -14,11 +14,11 @@ import {usePluralForm} from '@docusaurus/theme-common';
 import {blogPostContainerID} from '@docusaurus/utils-common';
 import MDXContent from '@theme/MDXContent';
 import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import BlogPostAuthors from '@theme/BlogPostAuthors';
 import type {Props} from '@theme/BlogPostItem';
 
 import styles from './styles.module.css';
-import TagsListInline from '@theme/TagsListInline';
-import BlogPostAuthors from '@theme/BlogPostAuthors';
 
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {

package/src/theme/BlogPostPage/index.tsx

@@ -6,17 +6,17 @@
  */
 
 import React from 'react';
-import BlogLayout from '@theme/BlogLayout';
-import BlogPostItem from '@theme/BlogPostItem';
-import BlogPostPaginator from '@theme/BlogPostPaginator';
-import type {Props} from '@theme/BlogPostPage';
+import clsx from 'clsx';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
+import BlogPostPaginator from '@theme/BlogPostPaginator';
 import TOC from '@theme/TOC';
-import clsx from 'clsx';
+import type {Props} from '@theme/BlogPostPage';
 
 function BlogPostPageMetadata(props: Props): JSX.Element {
   const {content: BlogPostContents} = props;

package/src/theme/BlogSidebar/Desktop/index.tsx

@@ -9,9 +9,9 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/BlogSidebar/Desktop';
 
 import styles from './styles.module.css';
-import type {Props} from '@theme/BlogSidebar/Desktop';
 
 export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
   return (

package/src/theme/BlogSidebar/index.tsx

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
 import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
 import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
-import {useWindowSize} from '@docusaurus/theme-common';
 import type {Props} from '@theme/BlogSidebar';
 
 export default function BlogSidebar({sidebar}: Props): JSX.Element | null {

package/src/theme/BlogTagsListPage/index.tsx

@@ -6,18 +6,17 @@
  */
 
 import React from 'react';
-
-import BlogLayout from '@theme/BlogLayout';
-import TagsListByLetter from '@theme/TagsListByLetter';
-import type {Props} from '@theme/BlogTagsListPage';
+import clsx from 'clsx';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import TagsListByLetter from '@theme/TagsListByLetter';
+import type {Props} from '@theme/BlogTagsListPage';
 import SearchMetadata from '../SearchMetadata';
-import clsx from 'clsx';
 
 export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
   const title = translateTagsPageTitle();

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -6,11 +6,7 @@
  */
 
 import React from 'react';
-
-import Link from '@docusaurus/Link';
-import BlogLayout from '@theme/BlogLayout';
-import BlogPostItem from '@theme/BlogPostItem';
-import type {Props} from '@theme/BlogTagsPostsPage';
+import clsx from 'clsx';
 import Translate, {translate} from '@docusaurus/Translate';
 import {
   PageMetadata,
@@ -18,9 +14,12 @@ import {
   ThemeClassNames,
   usePluralForm,
 } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
+import type {Props} from '@theme/BlogTagsPostsPage';
 
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {

package/src/theme/CodeBlock/Content/Element.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import Container from '@theme/CodeBlock/Container';
 import clsx from 'clsx';
+import Container from '@theme/CodeBlock/Container';
 import type {Props} from '@theme/CodeBlock/Content/Element';
 
 import styles from './styles.module.css';

package/src/theme/CodeBlock/Content/String.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import {
   useThemeConfig,
   parseCodeBlockTitle,
@@ -15,7 +16,6 @@ import {
   usePrismTheme,
   useCodeWordWrap,
 } from '@docusaurus/theme-common';
-import clsx from 'clsx';
 import Highlight, {defaultProps, type Language} from 'prism-react-renderer';
 import Line from '@theme/CodeBlock/Line';
 import CopyButton from '@theme/CodeBlock/CopyButton';
@@ -52,7 +52,7 @@ export default function CodeBlockString({
     magicComments,
   });
   const showLineNumbers =
-    showLineNumbersProp || containsLineNumbers(metastring);
+    showLineNumbersProp ?? containsLineNumbers(metastring);
 
   return (
     <Container

package/src/theme/CodeBlock/Line/index.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import type {Props} from '@theme/CodeBlock/Line';
+
 import styles from './styles.module.css';
 
 export default function CodeBlockLine({

package/src/theme/CodeBlock/index.tsx

@@ -7,9 +7,9 @@
 
 import React, {isValidElement, type ReactNode} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import type {Props} from '@theme/CodeBlock';
 import ElementContent from '@theme/CodeBlock/Content/Element';
 import StringContent from '@theme/CodeBlock/Content/String';
+import type {Props} from '@theme/CodeBlock';
 
 /**
  * Best attempt to make the children a plain string so it is copyable. If there

package/src/theme/ColorModeToggle/index.tsx

@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/ColorModeToggle';
+import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/IconLightMode';
 import IconDarkMode from '@theme/IconDarkMode';
+import type {Props} from '@theme/ColorModeToggle';
 
-import clsx from 'clsx';
 import styles from './styles.module.css';
 
 function ColorModeToggle({className, value, onChange}: Props): JSX.Element {

package/src/theme/Details/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
 import type {Props} from '@theme/Details';
+
 import styles from './styles.module.css';
 
 // Should we have a custom details/summary comp in Infima instead of reusing

package/src/theme/DocBreadcrumbs/index.tsx

@@ -6,18 +6,19 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import {
   ThemeClassNames,
   useSidebarBreadcrumbs,
   useHomePageRoute,
 } from '@docusaurus/theme-common';
-import styles from './styles.module.css';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import {translate} from '@docusaurus/Translate';
 import IconHome from '@theme/IconHome';
 
+import styles from './styles.module.css';
+
 // TODO move to design system folder
 function BreadcrumbsItemLink({
   children,

package/src/theme/DocCard/index.tsx

@@ -6,17 +6,18 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
+import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/DocCard';
+
+import styles from './styles.module.css';
 import type {
   PropSidebarItemCategory,
   PropSidebarItemLink,
 } from '@docusaurus/plugin-content-docs';
-import type {Props} from '@theme/DocCard';
-import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
 
 function CardContainer({
   href,

package/src/theme/DocCardList/index.tsx

@@ -7,11 +7,10 @@
 
 import React from 'react';
 import clsx from 'clsx';
-
-import DocCard from '@theme/DocCard';
-import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 import {findFirstCategoryLink} from '@docusaurus/theme-common';
+import DocCard from '@theme/DocCard';
 import type {Props} from '@theme/DocCardList';
+import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
 // Filter categories that don't have a link.
 function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {

package/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -10,14 +10,14 @@ import {
   PageMetadata,
   useCurrentSidebarCategory,
 } from '@docusaurus/theme-common';
-import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import DocCardList from '@theme/DocCardList';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Heading from '@theme/Heading';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
 
 import styles from './styles.module.css';
 

package/src/theme/DocItem/index.tsx

@@ -7,23 +7,24 @@
 
 import React from 'react';
 import clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import type {Props} from '@theme/DocItem';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
-import styles from './styles.module.css';
-import {
-  PageMetadata,
-  HtmlClassNameProvider,
-  ThemeClassNames,
-  useWindowSize,
-} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/DocItem';
+
+import styles from './styles.module.css';
 
 function DocItemMetadata(props: Props): JSX.Element {
   const {content: DocContent} = props;

package/src/theme/DocItemFooter/index.tsx

@@ -7,16 +7,15 @@
 
 import React from 'react';
 import clsx from 'clsx';
-
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import LastUpdated from '@theme/LastUpdated';
-import type {Props} from '@theme/DocItem';
 import EditThisPage from '@theme/EditThisPage';
 import TagsListInline, {
   type Props as TagsListInlineProps,
 } from '@theme/TagsListInline';
+import type {Props} from '@theme/DocItem';
 
 import styles from './styles.module.css';
-import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function TagsRow(props: TagsListInlineProps) {
   return (

package/src/theme/DocPage/Layout/Main/index.tsx

@@ -6,12 +6,11 @@
  */
 
 import React from 'react';
-
+import clsx from 'clsx';
 import {useDocsSidebar} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocPage/Layout/Main';
 
-import clsx from 'clsx';
 import styles from './styles.module.css';
-import type {Props} from '@theme/DocPage/Layout/Main';
 
 export default function DocPageLayoutMain({
   hiddenSidebarContainer,

package/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/IconArrow';
 import type {Props} from '@theme/DocPage/Layout/Sidebar/ExpandButton';
 
 import styles from './styles.module.css';

package/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -6,15 +6,14 @@
  */
 
 import React, {type ReactNode, useState, useCallback} from 'react';
-import DocSidebar from '@theme/DocSidebar';
+import clsx from 'clsx';
+import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
-import type {Props} from '@theme/DocPage/Layout/Sidebar';
+import DocSidebar from '@theme/DocSidebar';
 import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+import type {Props} from '@theme/DocPage/Layout/Sidebar';
 
-import clsx from 'clsx';
-import styles from './index.module.css';
-
-import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 
 // Reset sidebar state when sidebar changes
 // Use React key to unmount/remount the children

package/src/theme/DocPage/Layout/index.tsx

@@ -6,15 +6,14 @@
  */
 
 import React, {useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import BackToTopButton from '@theme/BackToTopButton';
-import type {Props} from '@theme/DocPage/Layout';
 import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
+import type {Props} from '@theme/DocPage/Layout';
 
-import styles from './index.module.css';
-
-import {useDocsSidebar} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 
 export default function DocPageLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();

package/src/theme/DocPage/index.tsx

@@ -6,12 +6,7 @@
  */
 
 import React from 'react';
-import NotFound from '@theme/NotFound';
-import type {Props} from '@theme/DocPage';
-import DocPageLayout from '@theme/DocPage/Layout';
-
 import clsx from 'clsx';
-
 import {
   HtmlClassNameProvider,
   ThemeClassNames,
@@ -20,7 +15,10 @@ import {
   DocsVersionProvider,
   useDocRouteMetadata,
 } from '@docusaurus/theme-common';
+import DocPageLayout from '@theme/DocPage/Layout';
+import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';
+import type {Props} from '@theme/DocPage';
 
 export default function DocPage(props: Props): JSX.Element {
   const {versionMetadata} = props;