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

package/src/getSwizzleConfig.ts

@@ -7,94 +7,116 @@
 
 import type {SwizzleConfig} from '@docusaurus/types';
 
+/* eslint sort-keys: "error" */
+
 export default function getSwizzleConfig(): SwizzleConfig {
   return {
     components: {
       CodeBlock: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
         description:
           'The component used to render multi-line code blocks, generally used in Markdown files.',
       },
-      DocSidebar: {
+      ColorModeToggle: {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description:
+          'The color mode toggle to switch between light and dark mode.',
+      },
+      DocSidebar: {
+        actions: {
           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
+          wrap: 'safe',
         },
         description: "The footer component of you site's layout",
       },
-      NotFound: {
+      IconArrow: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
-        },
-        description:
-          'The global 404 page of your site, meant to be ejected and customized',
-      },
-      SearchBar: {
-        actions: {
           wrap: 'safe',
-          eject: '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',
+          wrap: 'safe',
         },
-        description: 'The arrow icon component',
+        description: 'The dark mode icon component.',
       },
       IconEdit: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
         description: 'The edit icon component',
       },
-      IconMenu: {
+      IconLightMode: {
         actions: {
-          wrap: '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',
+          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',
+          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',
+          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/src/theme/BlogPostAuthor/index.tsx

@@ -6,19 +6,29 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
+import Link, {type Props as LinkProps} from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostAuthor';
 
 import styles from './styles.module.css';
 
+function MaybeLink(props: LinkProps): JSX.Element {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+
 export default function BlogPostAuthor({author}: Props): JSX.Element {
-  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 && (
@@ -28,9 +38,9 @@ export default function BlogPostAuthor({author}: Props): JSX.Element {
           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/src/theme/ColorModeToggle/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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 type {Props} from '@theme/ColorModeToggle';
+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,
+}: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+  const [checked, setChecked] = useState(defaultChecked);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(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/src/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/src/theme/IconDarkMode/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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';
+import type {Props} from '@theme/IconDarkMode';
+
+export default function IconDarkMode(props: Props): JSX.Element {
+  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/src/theme/IconLanguage/index.tsx

@@ -15,14 +15,14 @@ export default function IconLanguage({
 }: Props): JSX.Element {
   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/src/theme/IconLightMode/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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';
+import type {Props} from '@theme/IconLightMode';
+
+export default function IconLightMode(props: Props): JSX.Element {
+  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/src/theme/MDXComponents/index.tsx

@@ -37,8 +37,22 @@ const MDXComponents: MDXComponentsObject = {
     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/src/theme/Navbar/index.tsx

@@ -9,7 +9,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,
@@ -171,7 +171,7 @@ function NavbarMobileSidebar({
           titleClassName="navbar__title"
         />
         {!colorModeToggle.disabled && (
-          <Toggle
+          <ColorModeToggle
             className={styles.navbarSidebarToggle}
             checked={colorModeToggle.isDarkTheme}
             onChange={colorModeToggle.toggle}
@@ -271,7 +271,7 @@ export default function Navbar(): JSX.Element {
             <NavbarItem {...item} key={i} />
           ))}
           {!colorModeToggle.disabled && (
-            <Toggle
+            <ColorModeToggle
               className={styles.toggle}
               checked={colorModeToggle.isDarkTheme}
               onChange={colorModeToggle.toggle}

package/src/theme/SearchMetadata/index.tsx

@@ -26,6 +26,15 @@ export default function SearchMetadata({
 
   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/src/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/src/validateThemeConfig.ts

@@ -21,12 +21,6 @@ const DEFAULT_COLOR_MODE_CONFIG = {
   defaultMode: 'light',
   disableSwitch: false,
   respectPrefersColorScheme: false,
-  switchConfig: {
-    darkIcon: '🌜',
-    darkIconStyle: {},
-    lightIcon: '🌞',
-    lightIconStyle: {},
-  },
 };
 
 export const DEFAULT_CONFIG = {
@@ -220,20 +214,10 @@ const ColorModeSchema = Joi.object({
   respectPrefersColorScheme: Joi.bool().default(
     DEFAULT_COLOR_MODE_CONFIG.respectPrefersColorScheme,
   ),
-  switchConfig: Joi.object({
-    darkIcon: Joi.string().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIcon,
-    ),
-    darkIconStyle: Joi.object().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIconStyle,
-    ),
-    lightIcon: Joi.string().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIcon,
-    ),
-    lightIconStyle: Joi.object().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIconStyle,
-    ),
-  }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig),
+  switchConfig: 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/Toggle/index.js

@@ -1,100 +0,0 @@
-/**
- * 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, memo} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {translate} from '@docusaurus/Translate';
-import clsx from 'clsx';
-import styles from './styles.module.css'; // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-const ToggleComponent = memo(
-  ({className, switchConfig, checked: defaultChecked, disabled, onChange}) => {
-    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
-    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]: disabled,
-        })}>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          className={styles.toggleTrack}
-          role="button"
-          tabIndex={-1}
-          onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>
-            <span className={styles.toggleIcon} style={darkIconStyle}>
-              {darkIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackX}>
-            <span className={styles.toggleIcon} style={lightIconStyle}>
-              {lightIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackThumb} />
-        </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 function Toggle(props) {
-  const {
-    colorMode: {switchConfig},
-  } = useThemeConfig();
-  const isBrowser = useIsBrowser();
-  return (
-    <ToggleComponent
-      switchConfig={switchConfig}
-      disabled={!isBrowser}
-      {...props}
-    />
-  );
-}