@docusaurus/theme-classic 2.0.0-beta.16 → 2.0.0-beta.17

package/lib/getSwizzleConfig.js

@@ -11,91 +11,114 @@ exports.default = getSwizzleConfig;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/* eslint sort-keys: "error" */
 function getSwizzleConfig() {
   return {
     components: {
       CodeBlock: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
         description: 'The component used to render multi-line code blocks, generally used in Markdown files.'
       },
+      ColorModeToggle: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The color mode toggle to switch between light and dark mode.'
+      },
       DocSidebar: {
         actions: {
-          wrap: 'safe',
-          eject: 'unsafe' // too much technical code in sidebar, not very safe atm
-
+          eject: 'unsafe',
+          // too much technical code in sidebar, not very safe atm
+          wrap: 'safe'
         },
         description: 'The sidebar component on docs pages'
       },
       Footer: {
         actions: {
-          wrap: 'safe',
-          eject: 'unsafe' // TODO split footer into smaller parts
-
+          eject: 'unsafe',
+          // TODO split footer into smaller parts
+          wrap: 'safe'
         },
         description: "The footer component of you site's layout"
       },
-      NotFound: {
-        actions: {
-          wrap: 'safe',
-          eject: 'safe'
-        },
-        description: 'The global 404 page of your site, meant to be ejected and customized'
-      },
-      SearchBar: {
+      IconArrow: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        // TODO how to describe this one properly?
-        // By default it's an empty placeholder for the user to fill
-        description: 'The search bar component of your site, appearing in the navbar.'
+        description: 'The arrow icon component'
       },
-      IconArrow: {
+      IconDarkMode: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        description: 'The arrow icon component'
+        description: 'The dark mode icon component.'
       },
       IconEdit: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
         description: 'The edit icon component'
       },
-      IconMenu: {
+      IconLightMode: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        description: 'The menu icon component'
+        description: 'The light mode icon component.'
       },
-      'prism-include-languages': {
+      IconMenu: {
         actions: {
-          wrap: 'forbidden',
-          // not a component!
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        description: 'The Prism languages to include for code block syntax highlighting. Meant to be ejected.'
+        description: 'The menu icon component'
       },
       MDXComponents: {
         actions: {
-          wrap: 'forbidden',
-          /// TODO allow wrapping objects???
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'forbidden' /// TODO allow wrapping objects???
+
         },
         description: 'The MDX components to use for rendering MDX files. Meant to be ejected.'
       },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {
-          wrap: 'forbidden',
-          eject: 'forbidden'
+          eject: 'forbidden',
+          wrap: 'forbidden'
         }
+      },
+      NotFound: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The global 404 page of your site, meant to be ejected and customized'
+      },
+      SearchBar: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        // TODO how to describe this one properly?
+        // By default it's an empty placeholder for the user to fill
+        description: 'The search bar component of your site, appearing in the navbar.'
+      },
+      'prism-include-languages': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden' // not a component!
+
+        },
+        description: 'The Prism languages to include for code block syntax highlighting. Meant to be ejected.'
       }
     }
   };

package/lib/theme-classic.d.ts

@@ -632,7 +632,7 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
-declare module '@theme/Toggle' {
+declare module '@theme/ColorModeToggle' {
   import type {SyntheticEvent} from 'react';
 
   export interface Props {
@@ -663,6 +663,14 @@ declare module '@theme/IconArrow' {
   export default function IconArrow(props: Props): JSX.Element;
 }
 
+declare module '@theme/IconDarkMode' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function IconDarkMode(props: Props): JSX.Element;
+}
+
 declare module '@theme/IconEdit' {
   import type {ComponentProps} from 'react';
 
@@ -671,6 +679,14 @@ declare module '@theme/IconEdit' {
   export default function IconEdit(props: Props): JSX.Element;
 }
 
+declare module '@theme/IconLightMode' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function IconLightMode(props: Props): JSX.Element;
+}
+
 declare module '@theme/IconMenu' {
   import type {ComponentProps} from 'react';
 

package/lib/validateThemeConfig.js

@@ -25,13 +25,7 @@ const DocsSchema = _utilsValidation.Joi.object({
 const DEFAULT_COLOR_MODE_CONFIG = {
   defaultMode: 'light',
   disableSwitch: false,
-  respectPrefersColorScheme: false,
-  switchConfig: {
-    darkIcon: '🌜',
-    darkIconStyle: {},
-    lightIcon: '🌞',
-    lightIconStyle: {}
-  }
+  respectPrefersColorScheme: false
 };
 const DEFAULT_CONFIG = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
@@ -189,12 +183,9 @@ const ColorModeSchema = _utilsValidation.Joi.object({
   defaultMode: _utilsValidation.Joi.string().equal('dark', 'light').default(DEFAULT_COLOR_MODE_CONFIG.defaultMode),
   disableSwitch: _utilsValidation.Joi.bool().default(DEFAULT_COLOR_MODE_CONFIG.disableSwitch),
   respectPrefersColorScheme: _utilsValidation.Joi.bool().default(DEFAULT_COLOR_MODE_CONFIG.respectPrefersColorScheme),
-  switchConfig: _utilsValidation.Joi.object({
-    darkIcon: _utilsValidation.Joi.string().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIcon),
-    darkIconStyle: _utilsValidation.Joi.object().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIconStyle),
-    lightIcon: _utilsValidation.Joi.string().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIcon),
-    lightIconStyle: _utilsValidation.Joi.object().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIconStyle)
-  }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig)
+  switchConfig: _utilsValidation.Joi.any().forbidden().messages({
+    'any.unknown': 'colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.'
+  })
 }).default(DEFAULT_COLOR_MODE_CONFIG); // schema can probably be improved
 
 

package/lib-next/theme/BlogPostAuthor/index.js

@@ -7,14 +7,26 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
+
+function MaybeLink(props) {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+
+  return <>{props.children}</>;
+}
+
 export default function BlogPostAuthor({author}) {
-  const {name, title, url, imageURL} = author;
+  const {name, title, url, imageURL, email} = author;
+  const link = url || (email && `mailto:${email}`) || undefined;
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <Link className="avatar__photo-link avatar__photo" href={url}>
-          <img className={styles.image} src={imageURL} alt={name} />
-        </Link>
+        <span className="avatar__photo-link avatar__photo">
+          <MaybeLink href={link}>
+            <img className={styles.image} src={imageURL} alt={name} />
+          </MaybeLink>
+        </span>
       )}
 
       {name && (
@@ -24,9 +36,9 @@ export default function BlogPostAuthor({author}) {
           itemScope
           itemType="https://schema.org/Person">
           <div className="avatar__name">
-            <Link href={url} itemProp="url">
+            <MaybeLink href={link} itemProp="url">
               <span itemProp="name">{name}</span>
-            </Link>
+            </MaybeLink>
           </div>
           {title && (
             <small className="avatar__subtitle" itemProp="description">

package/lib-next/theme/ColorModeToggle/index.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {useState, useRef, useEffect} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function ColorModeToggle({className, checked: defaultChecked, onChange}) {
+  const isBrowser = useIsBrowser();
+  const [checked, setChecked] = useState(defaultChecked);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setChecked(defaultChecked);
+  }, [defaultChecked]);
+  return (
+    <div
+      className={clsx(styles.toggle, className, {
+        [styles.toggleChecked]: checked,
+        [styles.toggleFocused]: focused,
+        [styles.toggleDisabled]: !isBrowser,
+      })}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        className={styles.toggleButton}
+        role="button"
+        tabIndex={-1}
+        onClick={() => inputRef.current?.click()}>
+        <IconLightMode
+          className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+        />
+        <IconDarkMode
+          className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+        />
+      </div>
+
+      <input
+        ref={inputRef}
+        checked={checked}
+        type="checkbox"
+        className={styles.toggleScreenReader}
+        aria-label={translate(
+          {
+            message: 'Switch between dark and light mode (currently {mode})',
+            id: 'theme.colorToggle.ariaLabel',
+            description: 'The ARIA label for the navbar color mode toggle',
+          },
+          {
+            mode: checked
+              ? translate({
+                  message: 'dark mode',
+                  id: 'theme.colorToggle.ariaLabel.mode.dark',
+                  description: 'The name for the dark color mode',
+                })
+              : translate({
+                  message: 'light mode',
+                  id: 'theme.colorToggle.ariaLabel.mode.light',
+                  description: 'The name for the light color mode',
+                }),
+          },
+        )}
+        onChange={onChange}
+        onClick={() => setChecked(!checked)}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            inputRef.current?.click();
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+export default React.memo(ColorModeToggle);

package/lib-next/theme/ColorModeToggle/styles.module.css

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.toggle {
+  position: relative;
+  width: 32px;
+  height: 32px;
+}
+
+.toggleScreenReader {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.toggleDisabled {
+  cursor: not-allowed;
+}
+
+.toggleButton {
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.toggleButton:hover {
+  background-color: #00000010;
+}
+
+[data-theme='dark'] .toggleButton:hover {
+  background-color: #ffffff20;
+}
+
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+  display: none;
+}

package/lib-next/theme/IconDarkMode/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export default function IconDarkMode(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
+      />
+    </svg>
+  );
+}

package/lib-next/theme/IconLanguage/index.js

@@ -8,14 +8,14 @@ import React from 'react';
 export default function IconLanguage({width = 20, height = 20, ...props}) {
   return (
     <svg
-      viewBox="0 0 20 20"
+      viewBox="0 0 24 24"
       width={width}
       height={height}
-      aria-hidden="true"
+      aria-hidden
       {...props}>
       <path
         fill="currentColor"
-        d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"
+        d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
       />
     </svg>
   );

package/lib-next/theme/IconLightMode/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export default function IconLightMode(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+      />
+    </svg>
+  );
+}

package/lib-next/theme/MDXComponents/index.js

@@ -30,8 +30,22 @@ const MDXComponents = {
     return <Head {...props}>{unwrappedChildren}</Head>;
   },
   code: (props) => {
+    const inlineElements = [
+      'a',
+      'b',
+      'big',
+      'i',
+      'span',
+      'em',
+      'strong',
+      'sup',
+      'sub',
+      'small',
+    ];
     const shouldBeInline = React.Children.toArray(props.children).every(
-      (el) => typeof el === 'string' && !el.includes('\n'),
+      (el) =>
+        (typeof el === 'string' && !el.includes('\n')) ||
+        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
     );
     return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
   },

package/lib-next/theme/Navbar/index.js

@@ -8,7 +8,7 @@ import React, {useCallback, useState, useEffect} from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
-import Toggle from '@theme/Toggle';
+import ColorModeToggle from '@theme/ColorModeToggle';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
@@ -157,7 +157,7 @@ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
           titleClassName="navbar__title"
         />
         {!colorModeToggle.disabled && (
-          <Toggle
+          <ColorModeToggle
             className={styles.navbarSidebarToggle}
             checked={colorModeToggle.isDarkTheme}
             onChange={colorModeToggle.toggle}
@@ -254,7 +254,7 @@ export default function Navbar() {
             <NavbarItem {...item} key={i} />
           ))}
           {!colorModeToggle.disabled && (
-            <Toggle
+            <ColorModeToggle
               className={styles.toggle}
               checked={colorModeToggle.isDarkTheme}
               onChange={colorModeToggle.toggle}

package/lib-next/theme/SearchMetadata/index.js

@@ -17,6 +17,15 @@ export default function SearchMetadata({locale, version, tag}) {
   const language = locale;
   return (
     <Head>
+      {/*
+      Docusaurus metadata, used by third-party search plugin
+      See https://github.com/cmfcmf/docusaurus-search-local/issues/99
+      */}
+      {locale && <meta name="docusaurus_locale" content={locale} />}
+      {version && <meta name="docusaurus_version" content={version} />}
+      {tag && <meta name="docusaurus_tag" content={tag} />}
+
+      {/* Algolia DocSearch metadata */}
       {language && <meta name="docsearch:language" content={language} />}
       {version && <meta name="docsearch:version" content={version} />}
       {tag && <meta name="docsearch:docusaurus_tag" content={tag} />}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,29 +21,29 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.16",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.16",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.16",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.16",
-    "@docusaurus/theme-common": "2.0.0-beta.16",
-    "@docusaurus/theme-translations": "2.0.0-beta.16",
-    "@docusaurus/utils": "2.0.0-beta.16",
-    "@docusaurus/utils-common": "2.0.0-beta.16",
-    "@docusaurus/utils-validation": "2.0.0-beta.16",
+    "@docusaurus/core": "2.0.0-beta.17",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.17",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.17",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.17",
+    "@docusaurus/theme-common": "2.0.0-beta.17",
+    "@docusaurus/theme-translations": "2.0.0-beta.17",
+    "@docusaurus/utils": "2.0.0-beta.17",
+    "@docusaurus/utils-common": "2.0.0-beta.17",
+    "@docusaurus/utils-validation": "2.0.0-beta.17",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
     "infima": "0.2.0-alpha.37",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.7",
     "prism-react-renderer": "^1.2.1",
     "prismjs": "^1.27.0",
     "react-router-dom": "^5.2.0",
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.16",
-    "@docusaurus/types": "2.0.0-beta.16",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.17",
+    "@docusaurus/types": "2.0.0-beta.17",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "eb43c4d4f95a4fb97dc9bb9dc615413e0dc2e1e7"
+  "gitHead": "0032c0b0480083227af2e1b4da2d3ee6ce992403"
 }