diff --git a/.prettierignore b/.prettierignore
index e523352d6cd..2255dc18b29 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,14 @@
-src/theme/DocItem
-src/theme/DocRoot
+# Ejected components keep upstream's formatting so they stay diffable against
+# @docusaurus/theme-classic. Refer to `src/theme/README.md`.
+# Wrapped components are our own code, so they follow the repo's formatting.
+src/theme/DocItem/Layout/index.tsx
+src/theme/EditMetaRow/index.tsx
+src/theme/Icon/Edit/index.tsx
+src/theme/Icon/Language/index.tsx
+src/theme/Layout/index.tsx
+src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+src/theme/prism-include-languages.ts
+
 legacy-stencil-components
 scripts/bak
 
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 03747ce145e..4e64afe30e9 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -1,10 +1,10 @@
 /**
  * DocItemLayout is a component that renders the layout of a page like
  * the individual component pages, guide pages, etc.
- * 
+ *
  * Original source:
  * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx
- * 
+ *
  * Reason for overriding:
  * - Add a phone demo to the right of the page, e.g. /docs
  */
@@ -95,8 +95,8 @@ export default function DocItemLayout({children, ...props}: Props): ReactNode {
         {/* ------- CUSTOM CODE -------- */}
         {/* Ideally this would only render if there is a demoUrl and the it's a mobile device. However,the `windowSize` does not provide a tablet so we have to hide it through CSS. */}
         {demoUrl && (
-          <div className='col col--4'>
-            <div className='doc-demo-wrapper'>
+          <div className="col col--4">
+            <div className="doc-demo-wrapper">
               <DocDemo url={demoUrl} source={demoSourceUrl} />
             </div>
           </div>
diff --git a/src/theme/DocRoot/Layout/Main/index.tsx b/src/theme/DocRoot/Layout/Main/index.tsx
index b8a6cf10363..1675410fc68 100644
--- a/src/theme/DocRoot/Layout/Main/index.tsx
+++ b/src/theme/DocRoot/Layout/Main/index.tsx
@@ -5,10 +5,10 @@
  * - Moved the navbar to the top of the page. Originally, the navbar would be placed along the top of the entire site, but we want it to be placed along the top of the docs page only.
  */
 
-import React, {type ReactNode} from 'react';
+import React, { type ReactNode } from 'react';
 import Main from '@theme-original/DocRoot/Layout/Main';
 import Navbar from '@theme/Navbar';
-import type {Props} from '@theme/DocRoot/Layout/Main';
+import type { Props } from '@theme/DocRoot/Layout/Main';
 
 export default function MainWrapper(props: Props): ReactNode {
   return (
diff --git a/src/theme/EditMetaRow/index.tsx b/src/theme/EditMetaRow/index.tsx
index 778bf57bded..9cf50b7229f 100644
--- a/src/theme/EditMetaRow/index.tsx
+++ b/src/theme/EditMetaRow/index.tsx
@@ -13,29 +13,35 @@
  * row.
  */
 
-import React, { type ReactNode } from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 // CUSTOM CODE
 import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
 // CUSTOM CODE END
 import EditThisPage from '@theme/EditThisPage';
-import type { Props } from '@theme/EditMetaRow';
+import type {Props} from '@theme/EditMetaRow';
 
 import LastUpdated from '@theme/LastUpdated';
 
 import globalStyles from '@docusaurus/theme-classic/lib/theme/EditMetaRow/styles.module.css';
 import styles from './styles.module.css';
 
-export default function EditMetaRow({ className, editUrl, lastUpdatedAt, lastUpdatedBy }: Props): ReactNode {
+export default function EditMetaRow({
+  className,
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}: Props): ReactNode {
   return (
     <div className={clsx('row', className)}>
       {/* CUSTOM CODE — "Edit this page | Copy page" as peer links on one row */}
-      <div className={clsx('col', globalStyles.noPrint, styles.editMetaActions)}>
+      <div
+        className={clsx('col', globalStyles.noPrint, styles.editMetaActions)}>
         {editUrl && <EditThisPage editUrl={editUrl} />}
         <CopyPageButton
           customStyles={{
-            container: { className: styles.copyPageContainer },
-            button: { className: styles.copyPageButton },
+            container: {className: styles.copyPageContainer},
+            button: {className: styles.copyPageButton},
           }}
         />
       </div>
@@ -43,7 +49,10 @@ export default function EditMetaRow({ className, editUrl, lastUpdatedAt, lastUpd
       {/* CUSTOM CODE — wrap the whole column in the conditional, not just its contents */}
       {(lastUpdatedAt || lastUpdatedBy) && (
         <div className={clsx('col', globalStyles.lastUpdated)}>
-          <LastUpdated lastUpdatedAt={lastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
         </div>
       )}
       {/* CUSTOM CODE END */}
diff --git a/src/theme/Icon/Edit/index.tsx b/src/theme/Icon/Edit/index.tsx
index dfadeaab866..c598a12f2e0 100644
--- a/src/theme/Icon/Edit/index.tsx
+++ b/src/theme/Icon/Edit/index.tsx
@@ -6,13 +6,13 @@
  * - Changed the icon to be the GitHub icon since the icon is used on the `Edit this page` link, which links to the GitHub repo.
  */
 
-import React, { type ReactNode } from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
-import type { Props } from '@theme/Icon/Edit';
+import type {Props} from '@theme/Icon/Edit';
 
 import styles from '@docusaurus/theme-classic/src/theme/Icon/Edit/styles.module.css';
 
-export default function IconEdit({ className, ...restProps }: Props): ReactNode {
+export default function IconEdit({className, ...restProps}: Props): ReactNode {
   return (
     <svg
       fill="none"
@@ -22,8 +22,7 @@ export default function IconEdit({ className, ...restProps }: Props): ReactNode
       className={clsx(styles.iconEdit, className)}
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
-      {...restProps}
-    >
+      {...restProps}>
       <g>
         <path
           d="M7 0C3.13438 0 0 3.21563 0 7.17813C0 10.35 2.00625 13.0375 4.7875 13.9875C4.83125 13.9969 4.86875 14 4.90625 14C5.16563 14 5.26562 13.8094 5.26562 13.6438C5.26562 13.4719 5.25938 13.0219 5.25625 12.4219C4.99375 12.4812 4.75938 12.5063 4.55 12.5063C3.20313 12.5063 2.89687 11.4594 2.89687 11.4594C2.57812 10.6313 2.11875 10.4094 2.11875 10.4094C1.50938 9.98125 2.11562 9.96875 2.1625 9.96875H2.16563C2.86875 10.0312 3.2375 10.7125 3.2375 10.7125C3.5875 11.325 4.05625 11.4969 4.475 11.4969C4.80312 11.4969 5.1 11.3906 5.275 11.3094C5.3375 10.8469 5.51875 10.5312 5.71875 10.35C4.16563 10.1688 2.53125 9.55313 2.53125 6.80312C2.53125 6.01875 2.80312 5.37813 3.25 4.87813C3.17812 4.69688 2.9375 3.96563 3.31875 2.97813C3.31875 2.97813 3.36875 2.9625 3.475 2.9625C3.72812 2.9625 4.3 3.05937 5.24375 3.71562C5.80312 3.55625 6.4 3.47812 6.99687 3.475C7.59062 3.47812 8.19063 3.55625 8.75 3.71562C9.69375 3.05937 10.2656 2.9625 10.5188 2.9625C10.625 2.9625 10.675 2.97813 10.675 2.97813C11.0563 3.96563 10.8156 4.69688 10.7437 4.87813C11.1906 5.38125 11.4625 6.02187 11.4625 6.80312C11.4625 9.55937 9.825 10.1656 8.26562 10.3438C8.51562 10.5656 8.74063 11.0031 8.74063 11.6719C8.74063 12.6313 8.73125 13.4062 8.73125 13.6406C8.73125 13.8094 8.82812 14 9.0875 14C9.125 14 9.16875 13.9969 9.2125 13.9875C11.9969 13.0375 14 10.3469 14 7.17813C14 3.21563 10.8656 0 7 0Z"
diff --git a/src/theme/Icon/Language/index.tsx b/src/theme/Icon/Language/index.tsx
index 2e8b58381ad..be301682722 100644
--- a/src/theme/Icon/Language/index.tsx
+++ b/src/theme/Icon/Language/index.tsx
@@ -6,12 +6,22 @@
  * - Changed the language icon in the navbar to use the Ionicons language icon. This provides a bolded version of the language icon.
  */
 
-import React, { type ReactNode } from 'react';
-import type { Props } from '@theme/Icon/Language';
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/Icon/Language';
 
-export default function IconLanguage({ width = 22, height = 22, ...props }: Props): ReactNode {
+export default function IconLanguage({
+  width = 22,
+  height = 22,
+  ...props
+}: Props): ReactNode {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width={width} height={height} aria-hidden {...props}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      width={width}
+      height={height}
+      aria-hidden
+      {...props}>
       <path
         fill="currentColor"
         d="M478.33 433.6l-90-218a22 22 0 00-40.67 0l-90 218a22 22 0 1040.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 00458 464a22 22 0 0020.32-30.4zM334.83 362L368 281.65 401.17 362zM267.84 342.92a22 22 0 00-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 000-44H214V70a22 22 0 00-44 0v20H54a22 22 0 000 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 00-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1021.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0030.75-4.9z"
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index b26bebc671b..a64e9d24f65 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -6,16 +6,20 @@
  * - Removed the navbar. It's been moved to the top of the docs page ({@link ../../DocRoot/Layout/index.tsx}).
  */
 
-import React, { type ReactNode } from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import { PageMetadata, SkipToContentFallbackId, ThemeClassNames } from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Footer from '@theme/Footer';
 import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
-import type { Props } from '@theme/Layout';
+import type {Props} from '@theme/Layout';
 import styles from '@docusaurus/theme-classic/src/theme/Layout/styles.module.css';
 
 export default function Layout(props: Props): ReactNode {
@@ -45,10 +49,11 @@ export default function Layout(props: Props): ReactNode {
           ThemeClassNames.layout.main.container,
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,
-          wrapperClassName
-        )}
-      >
-        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>{children}</ErrorBoundary>
+          wrapperClassName,
+        )}>
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index 39277cee9de..dc5469c2383 100644
--- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -7,15 +7,15 @@
  * - Removed the original styles that were applied to the language icon. We want to use our own styles.
  */
 
-import React, { type ReactNode } from 'react';
+import React, {type ReactNode} from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
-import { translate } from '@docusaurus/Translate';
-import { mergeSearchStrings, useHistorySelector } from '@docusaurus/theme-common';
+import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
-import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
-import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
+import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 
 import styles from '@docusaurus/theme-classic/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css';
 import customStyles from './styles.module.css';
@@ -23,7 +23,7 @@ import customStyles from './styles.module.css';
 function useLocaleDropdownUtils() {
   const {
     siteConfig,
-    i18n: { localeConfigs },
+    i18n: {localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
   const search = useHistorySelector((history) => history.location.search);
@@ -32,7 +32,9 @@ function useLocaleDropdownUtils() {
   const getLocaleConfig = (locale: string) => {
     const localeConfig = localeConfigs[locale];
     if (!localeConfig) {
-      throw new Error(`Docusaurus bug, no locale config found for locale=${locale}`);
+      throw new Error(
+        `Docusaurus bug, no locale config found for locale=${locale}`,
+      );
     }
     return localeConfig;
   };
@@ -55,12 +57,15 @@ function useLocaleDropdownUtils() {
   };
 
   return {
-    getURL: (locale: string, options: { queryString: string | undefined }) => {
+    getURL: (locale: string, options: {queryString: string | undefined}) => {
       // We have 2 query strings because
       // - there's the current one
       // - there's one user can provide through navbar config
       // see https://github.com/facebook/docusaurus/pull/8915
-      const finalSearch = mergeSearchStrings([search, options.queryString], 'append');
+      const finalSearch = mergeSearchStrings(
+        [search, options.queryString],
+        'append',
+      );
       return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`;
     },
     getLabel: (locale: string) => {
@@ -82,14 +87,14 @@ export default function LocaleDropdownNavbarItem({
   const utils = useLocaleDropdownUtils();
 
   const {
-    i18n: { currentLocale, locales },
+    i18n: {currentLocale, locales},
   } = useDocusaurusContext();
 
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
     return {
       label: utils.getLabel(locale),
       lang: utils.getLang(locale),
-      to: utils.getURL(locale, { queryString }),
+      to: utils.getURL(locale, {queryString}),
       target: '_self',
       autoAddBaseUrl: false,
       className:
@@ -124,7 +129,9 @@ export default function LocaleDropdownNavbarItem({
         <>
           <IconLanguage className={styles.iconLanguage} />
           {/* CUSTOM CODE - added span in order to hide the text */}
-          <span className={customStyles.localeVisuallyHidden}>{dropdownLabel}</span>
+          <span className={customStyles.localeVisuallyHidden}>
+            {dropdownLabel}
+          </span>
         </>
       }
       items={items}
diff --git a/src/theme/README.md b/src/theme/README.md
index 2fed55ad2ea..0a67156fd09 100644
--- a/src/theme/README.md
+++ b/src/theme/README.md
@@ -3,4 +3,4 @@
 This folder is used to override the base docusaurus theme. It houses [swizzled components](https://docusaurus.io/docs/swizzling). Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the `@theme-original` alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the [component partials](/src/styles/components).
 
 - Original theme: [`@docusaurus/theme-classic`](https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic)
-- [Original theme source](https://github.com/facebook/docusaurus/tree/26ae4164d6f90c231c6687363a3907b5f9f172b8/packages/docusaurus-theme-classic/src/theme)
+- [Original theme source](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-classic/src/theme)
diff --git a/src/theme/prism-include-languages.ts b/src/theme/prism-include-languages.ts
index 032dfd597e3..d60b064eba5 100644
--- a/src/theme/prism-include-languages.ts
+++ b/src/theme/prism-include-languages.ts
@@ -10,13 +10,15 @@
 
 import siteConfig from '@generated/docusaurus.config';
 import type * as PrismNamespace from 'prismjs';
-import type { Optional } from 'utility-types';
+import type {Optional} from 'utility-types';
 
-export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace): void {
+export default function prismIncludeLanguages(
+  PrismObject: typeof PrismNamespace,
+): void {
   const {
-    themeConfig: { prism },
+    themeConfig: {prism},
   } = siteConfig;
-  const { additionalLanguages } = prism as { additionalLanguages: string[] };
+  const {additionalLanguages} = prism as {additionalLanguages: string[]};
 
   // Prism components work on the Prism instance on the window, while prism-
   // react-renderer uses its own Prism instance. We temporarily mount the